Download the PHP package codeldev/livewire-markdown-editor without Composer

Livewire Markdown Editor

A clean, simple to use markdown editor that you can drop into any other livewire component.

Pest Tests: 100% Code Coverage | PHP Stan: Level Max

⚠️ IN ACTIVE DEVELOPMENT. USE AT YOUR OWN RISK ⚠️

Table of Contents

• Features Overview
• Installation
• Translations
• Usage
  • Set the Dispatcher
  • Set Initial Value
  • Set Up Your Parent Component
• Using the Editor
  • Slash Commands
  • Keyboard Shortcuts
  • Image Uploads
  • YouTube Embedding
  • Html Previews
• Advanced Configuration
• Component Architecture
• Custom Implementations
• Troubleshooting
• Testing
• Changelog
• Security
• Credits
• License

Features Overview

The Codel Markdown Editor comes with a rich set of features:

• Slash Command Menu - Press / to access formatting options
• Rich Text Formatting - Headings, lists, quotes, code blocks, and more
• Image Uploads - Drag & drop or file selection with preview
• YouTube Embedding - Easily embed YouTube videos
• Link Management - Insert and validate links
• Live Preview - Toggle between write and preview modes
• Word & Character Count - Track your content length
• Auto-growing Editor - Expands as you type
• Responsive Design - Works on all screen sizes

Installation

This package has been built for Laravel version 12+ on PHP 8.4 and requires the following dependencies:

• spatie/laravel-markdown v2
• livewire/livewire v3

Install the package via composer:

Install the Tailwind Typography plugin (required for preview styling):

Configure Tailwind to include the package styles.

Choose one of the following methods

Option A: Tailwind 4+ (CSS-based configuration)

Add to your file:

Option B: Traditional config file approach

Update your :

Config File

If required, you may publish the config file with:

This is the contents of the published config file:

Environment Variables

The following env variables are available to configure the editor using your env file.

Translations

You can publish (optional) the translations file with:

Usage

Set the Dispatcher

This is the event name the editor dispatches to when updating markdown content and passing the updates to your parent component.

Set Initial Value

Initialize the editor with current markdown content, e.g., when updating a post:

Set Up Your Parent Component

In your parent Livewire component, add the following to receive the editor updates:

Example:

Multiple Editor component configuration

Multiple markdown editors can be added to a single page / form. Each should have its own unique key and dispatcher. As an Example:

Using the Editor

Slash Commands

Press / in the editor to open the command menu. Available commands:

• Heading 1-3
• Link
• Divider
• Bullet List
• Number List
• Quote
• Code Block
• Image Upload
• YouTube Embed

Example usage:

1. Type / to open the command menu
2. Use arrow keys to navigate or click on a command
3. Press Enter to select a command

Keyboard Shortcuts

Image Uploads

The editor supports image uploads with the following specifications:

• Supported formats: All formats provided in the config file.
• Maximum file size: Max file size provided in the config file.
• Upload methods:
  • Drag & drop into the editor
  • Click the image option in the slash command menu

Images are processed internally by the editor component using the class defined in the config file:

If required, you may use your own custom implementation for uploading images

YouTube Embedding

To embed a YouTube video:

1. Press / to open the command menu
2. Select the YouTube option
3. Paste a valid YouTube URL (youtube.com or youtu.be)
4. Press Insert

Html Previews

Html for the preview uses the Spatie laravel-markdown package. Please review the readme of this package for available options to configure this package. By default, the editor uses:

Extensions:

Commonmark options

Any config options you set for the laravel-markdown package (either directly in the published config file OR your env file), will be merged with the options above.

If required, you may use your own custom implementation for converting markdown to html.

Advanced Configuration

You can customize the editor with additional parameters:

The editor uses a unique key to identify instances when multiple editors are used on the same page.

Component Architecture

The markdown editor is composed of several components:

• Main Component: Orchestrates the editor functionality
• Header Layout: Contains the tab navigation
• Editor Layout: The textarea for writing markdown
• Preview Layout: Renders the HTML preview
• Commands Component: Handles the slash command menu
• Link/YouTube Components: Manages link and YouTube popover interfaces
• Upload Component: Handles file uploads

The editor uses Alpine.js for frontend interactivity and Livewire for backend communication.

If you wish to customize the component files, publish them with:

Custom Implementations

The editor has been built with default Image processing and Preview HTML rendering. However, if you wish to use your own custom processing and rendering classes you may do so.

Custom upload action implementation

Custom html preview action implementation

Troubleshooting

Common Issues

Issue: Editor doesn't update the parent component Solution: Ensure the dispatcher name matches the #[On()] attribute in your parent component

Issue: Editor appears empty after initialization Solution: Make sure you're passing the markdown content correctly:

Testing

Changelog

Please see CHANGELOG for more information on what has changed recently.

Security Vulnerabilities

Please review security policy on how to report security vulnerabilities.

Credits

• CodelDev

License

The MIT License (MIT). Please see License File for more information.