Editor

The Mishka Chelekom Headless Editor is a rich-text editor for Phoenix LiveView apps, built on TipTap 3 and ProseMirror. The editor engine owns the editing surface and your server owns the document. The content is mirrored into a hidden textarea, so the editor submits with an ordinary <.form> and phx-change fires as the user types, with no JavaScript glue of your own.

Toolbar buttons go in the toolbar slot. Tag a button with data-editor-command="bold" and the engine wires it up and sets data-active on it while that mark or block is active. The component ships no colors, spacing or typography. The generator installs the TipTap packages for you: @tiptap/core, @tiptap/pm and @tiptap/starter-kit, all MIT licensed.

Give the editor a name and the engine mirrors the document into a hidden textarea with that name, then dispatches an input event. That is what makes phx-change fire, after the debounce delay (300 ms by default), and Save submits the same value. This example needs a LiveView to hold the document, so it is shown as code.

<.form
  for={to_form(%{"body" => @body}, as: :post)}
  id="post-form"
  phx-change="validate"
  phx-submit="save"
>
  <.editor
    id="post-body"
    name="post[body]"
    value={@body}
    class="rounded-lg border border-neutral-200 data-[focused]:ring-2 data-[focused]:ring-neutral-400"
    toolbar_class="flex flex-wrap items-center gap-1 border-b border-neutral-200 p-1.5 [&_button]:rounded [&_button]:px-2 [&_button]:py-1 [&_button]:text-sm [&_button[data-active]]:bg-neutral-100 [&_button[data-active]]:font-semibold"
    surface_class="min-h-40 p-3 text-sm leading-6 outline-none [&_h1]:mt-2 [&_h1]:mb-1 [&_h1]:text-2xl [&_h1]:font-bold [&_p]:my-1 [&_ul]:my-1 [&_ul]:list-disc [&_ul]:pl-6"
  >
    <:toolbar>
      <button
        :for={{command, label} <- [{"bold", "B"}, {"italic", "I"}, {"strike", "S"}, {"code", "Code"}]}
        type="button"
        data-editor-command={command}
      >
        {label}
      </button>
    </:toolbar>
  </.editor>

  <button type="submit">Save</button>
</.form>

def mount(_params, _session, socket) do
  {:ok, assign(socket, :body, nil)}
end

def handle_event("validate", %{"post" => %{"body" => body}}, socket) do
  {:noreply, assign(socket, :body, body)}
end

def handle_event("save", %{"post" => %{"body" => body}}, socket) do
  {:noreply, put_flash(socket, :info, "Saved #{String.length(body)} characters")}
end

LiveView ignores the editing surface (phx-update="ignore"), because TipTap owns that subtree. A new value in a re-render does not reach it after the first render. To replace the document, push the chelekom:editor event with the editor's id and the new value in the editor's format. The change is not reported back as a user edit.

def handle_event("clear", _params, socket) do
  empty = ~s({"type":"doc","content":[{"type":"paragraph"}]})

  {:noreply, push_event(socket, "chelekom:editor", %{id: "post-body", value: empty})}
end

editable is the exception, because it travels as a data-* attribute, which LiveView still merges on an ignored element. Pass editable={@editable} and flipping it makes the editor read-only or editable in place. The document, cursor and undo history survive.

The engine looks for data-editor-command anywhere inside the editor root. The values it accepts are bold, italic, strike, code, paragraph, h1, h2, h3, bullet_list, ordered_list, blockquote, code_block, horizontal_rule, undo and redo. All of them except horizontal_rule, undo and redo get data-active while the selection is inside that mark or block. Clicks are handled by delegation, so LiveView can re-render the toolbar without losing them, and pressing a toolbar button does not take focus from the editor.

The root keeps your live class. The engine sets data-empty on it while the document is empty and data-focused while the surface has focus, and the root also has data-disabled and data-readonly when those attributes are set. placeholder is the empty-state text: the engine copies it to data-placeholder on the ProseMirror element and you draw it with CSS.

The surface is ignored by LiveView, so its classes are frozen after the first render. Set surface_class once. Because the editor ships no typography, headings, lists and quotes render flat under Tailwind Preflight. Style them from surface_class with descendant selectors, such as [&_h1]:text-2xl and [&_ul]:list-disc.

The default engine is TipTap, which stores json or html. The markup and attributes stay the same for the other engines, and only format changes: Lexical stores json, CodeMirror 6 stores plain text and Milkdown stores markdown. Generate the one you want with mix mishka.ui.gen.headless editor --lib code_mirror, using tiptap, lexical, code_mirror or milk_down. The engine is installed as editor.js under the Editor hook, so your templates do not change.

Extra TipTap extensions and StarterKit options go in assets/vendor/editor_extensions.js. The generator creates that file once and never overwrites it.

id is required. The surface id is <id>-surface and the mirror id is <id>-value. name is the form field name of the mirror, and without it there is no mirror and nothing to submit. value is the starting document in format. format is json (the default), html, text or markdown, and must be one the installed engine produces. required and form go to the mirror.

editable (default true), disabled and readonly each stop editing; disabled also disables the mirror. debounce is the delay in milliseconds before an edit is written to the mirror. label_id and describedby_id point the surface at the elements that label and describe it. on_change, on_focus and on_blur name LiveView events, each pushed with the current document as value.

The parts are the root, the optional toolbar, the hidden value mirror and the surface, each with a data-part attribute. class, toolbar_class, value_class and surface_class style them. hook names the JavaScript hook to mount and defaults to Editor; change it only if you have vendored a second engine under another name.

The surface is a div with role="textbox" and aria-multiline="true". With no label_id it is named "Rich text editor", so pass a label_id to use your own visible label. The toolbar has role="toolbar", aria-label="Formatting" and aria-controls pointing at the surface. The buttons you put in it are ordinary buttons in the tab order.

Editing is standard contenteditable. Mod+B, Mod+I and Mod+Shift+X toggle bold, italic and strike, and Mod+Z and Mod+Shift+Z undo and redo. Tab leaves the editor, so it is one tab stop and not a trap.