Editor Params

MarkdownX has a few (optional) parameters you can pass to the component which include:

1. Content - set the content inside the textarea
2. Name - the name attribute for the textarea
3. Key - the unique key for the editor (allows for multiple editors on the same page)
4. Style - apply specific Tailwind classes to parts of the editor

Here is an example of how you would pass a parameters to the editor:

@livewire('markdown-x', ['content' => '', 'name' => 'body', 'key' => 'post-key'])

Or, you can use the following syntax:

<livewire:markdown-x :key="$postKey" name="body" />

Remember that prepending the : to the attribute will render the contents inside as code, otherwise you can just pass the attribute as a string without the colon.

Here's an example of how you would pass styles to your editor:

<livewire:markdown-x :style="[
    'toolbar' => 'flex items-center justify-between bg-gray-300',
    'textarea' => 'w-full h-full border-2 border-gray-200 focus:border-gray-200 focus:outline-none p-4',
    'height' => 'h-64',
    'preview' => 'bg-gray-200 p-10',
    'help' => 'bg-gray-300 p-8 prose max-w-none'
]"/>

Now you can customize the editors appearance 🎨.

Reminder - All the params are optional

Next, let's talk about some of the dropdown items available in the editor.