DmfMarkdownEditor

DmfMarkdownEditor replaces the standard WYSIWYG editor in selected admin content areas with a full-featured Markdown editor (based on md-editor-v3). Existing HTML content is converted to Markdown on first open; in the storefront the plugin exposes a |markdown Twig filter.

Quick facts

Composer package	dmf/sw6-plugin-markdown-editor
Plugin class	Dmf\MarkdownEditor\DmfMarkdownEditor
Version	1.0.0
License	MIT
Shopware	~6.7.0
PHP dependency	league/commonmark: ^2.4

Installation

composer require dmf/sw6-plugin-markdown-editor
bin/console plugin:refresh
bin/console plugin:install --activate DmfMarkdownEditor
bin/build-js.sh
bin/console cache:clear

Activated areas

The Markdown editor takes over selectively: other editor instances (e.g. customer-group registration intro) keep the default WYSIWYG.

Area	Enabled
Product description	Yes
Category description	Yes
Manufacturer description	Yes
CMS Text element	Yes
Custom fields (HTML/Text-Editor type)	Yes
Custom components	via use-markdown="true" prop

Configuration

In the admin under Settings → Extensions → DmfMarkdownEditor.

Toolbar configuration

toolbarItems (multi-select). Order via drag and drop. Default: bold, underline, italic, strikeThrough, title, unorderedList, orderedList, link, image, table, revoke, next, preview, pageFullscreen.

Available items: bold, italic, underline, strikeThrough, title, sub, sup, quote, unorderedList, orderedList, task, link, image, table, code, codeRow, revoke, next, preview, htmlPreview, pageFullscreen, fullscreen, catalog, mermaid, katex.

Editor settings

Field	Type	Default	Effect
previewTheme	single-select	github	Preview theme: github, vuepress, default, mk-cute, smart-blue, cyanosis.
editorLanguage	single-select	de-DE	Editor UI language (en-US or de-DE).
showPreviewOnStart	bool	false	Show the preview panel when the editor opens.
showCodeRowNum	bool	true	Show line numbers in code blocks.

Custom toolbar: Button tool

The editor ships a custom Button tool that inserts Bootstrap-styled button links directly into Markdown.

[Button text](url){.btn .btn-primary}

Rendered:

<a href="url" class="btn btn-primary">Button text</a>

Available button variants:

Variant	Classes
Primary	.btn .btn-primary
Secondary	.btn .btn-secondary
Link	.btn .btn-link
Outline Primary	.btn .btn-outline-primary
Outline Secondary	.btn .btn-outline-secondary
Ghost	.btn .btn-ghost

CommonMark Attributes

The class-attribute syntax is parsed via the CommonMark Attributes Extension. Make sure your storefront theme provides the corresponding Bootstrap button styles.

Auto HTML→Markdown conversion

On first open the plugin converts existing HTML content to Markdown:

• Detects structural tags (p, div, h1–h6, ul, ol, table, …).
• Preserves Shopware data mapping syntax {{ product.name }}.
• Converts button links including CSS classes.
• Cleans up empty paragraphs and excessive whitespace.

One-time only

The conversion runs once on initial load. Mixed content may require manual cleanup or a re-save.

Usage

Admin (automatic)

After installation, supported areas adopt the Markdown editor automatically.

Admin (manual component)

<dmf-markdown-editor
    v-model="myContent"
    label="Description"
    placeholder="Enter your markdown..."
    preview-theme="github"
/>

Enable Markdown for custom text editors

<sw-text-editor
    :value="myContent"
    :use-markdown="true"
    @update:value="onContentChange"
/>

Storefront (Twig filter)

{# product templates #}
{{ product.description|markdown }}

{# custom fields #}
{{ product.translated.customFields.my_markdown_field|markdown }}

{# function form #}
{{ render_markdown(someVariable) }}

Backend API

use Dmf\MarkdownEditor\Service\MarkdownRendererService;

class MyService
{
    public function __construct(
        private readonly MarkdownRendererService $markdownRenderer
    ) {}

    public function convertMarkdown(string $markdown): string
    {
        return $this->markdownRenderer->render($markdown);
    }
}

Component props (<dmf-markdown-editor>)

Prop	Type	Default	Description
modelValue	String	''	v-model binding
label	String	''	Field label
placeholder	String	''	Placeholder
disabled	Boolean	false	Disable editor
error	Object	null	Validation error object
previewTheme	String	null	Override
codeTheme	String	null	Override
toolbarItems	Array	null	Override

Troubleshooting

• Editor not loading: run bin/build-js.sh, then bin/build-administration.sh, then cache:clear.
• Toolbar items missing: check plugin config, clear browser cache.
• Markdown not rendered in storefront: apply the |markdown filter, ensure the content is actually Markdown.
• WYSIWYG appears instead of Markdown: set :use-markdown="true" on sw-text-editor if outside the default areas.