Editor

component

A rich text editor (Tiptap) that stores restricted HTML: paragraphs, bold, italic, strike, inline code, headings, lists, quotes, links and horizontal lines, with a keyboard-friendly toolbar. The server sanitizes the same set, so what the toolbar makes is all a field ever stores.

Install

php bin/console ux:install editor \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: assets/ → assets/
src/ → src/
templates/ → templates/
Recipes: form-theme popover button input label
Composer: symfony/form
symfony/html-sanitizer
symfony/ux-icons
symfony/ux-twig-component:^3.5
twig/html-extra:^3.24.0
tales-from-a-dev/twig-tailwind-extra:^1.3.0
Importmap: @tiptap/core
@tiptap/extension-blockquote
@tiptap/extension-bold
@tiptap/extension-code
@tiptap/extension-document
@tiptap/extension-hard-break
@tiptap/extension-heading
@tiptap/extension-horizontal-rule
@tiptap/extension-italic
@tiptap/extension-link
@tiptap/extension-list
@tiptap/extension-paragraph
@tiptap/extension-strike
@tiptap/extension-text
@tiptap/extension-underline
@tiptap/extensions

Examples (4)

Default

Light

Dark

Code

<div class="w-full max-w-xl p-4">
    <twig:FormField for="editor-default" label="Description" :labelAttr="{id: 'editor-default_label'}">
        <twig:Editor id="editor-default" name="description" labelledBy="editor-default_label" value="<p>Our <strong>spring collection</strong> is here: light fabrics, bright colors.</p><ul><li><p>Free shipping over 50 €</p></li><li><p>Returns within 30 days</p></li></ul>" />
    </twig:FormField>
</div>

Placeholder and help

Light

Dark

Code

<div class="w-full max-w-xl p-4">
    <twig:FormField for="editor-placeholder" label="Your message" :labelAttr="{id: 'editor-placeholder_label'}" help="Lists and links are kept.">
        <twig:Editor id="editor-placeholder" name="message" labelledBy="editor-placeholder_label" placeholder="Write something…" maxChars="500" aria-describedby="editor-placeholder_help" />
    </twig:FormField>
</div>

Invalid

Light

Dark

Code

<div class="w-full max-w-xl p-4">
    <twig:FormField for="editor-invalid" label="Summary" :labelAttr="{id: 'editor-invalid_label'}" error="This value should not be blank.">
        <twig:Editor id="editor-invalid" name="summary" labelledBy="editor-invalid_label" aria-invalid="true" aria-describedby="editor-invalid_error" />
    </twig:FormField>
</div>

Read only

Light

Dark

Code

<div class="w-full max-w-xl p-4">
    <twig:Editor id="editor-readonly" name="terms" label="Terms" readonly value="<h2>Terms</h2><p>By ordering, you accept our <a href='/terms'>terms of sale</a>.</p><blockquote><p>Prices include taxes.</p></blockquote>" />
</div>