Editor

<x-wirekit::editor> is a rich-text editing surface that drops into a Livewire form the same way <x-wirekit::textarea> does — a Blade tag, a hidden form field, wire:model support, theme-token styling, full keyboard access. It is a thin adapter around Tiptap (built on ProseMirror); Tiptap itself stays a peer dependency you install from npm, exactly like the chart adapter. WireKit ships only the lightweight Alpine glue.

#Installation

Tiptap is not bundled. Install the core plus whatever extensions you need, then expose a window.wirekitEditor(config) factory that returns a Tiptap Editor. The factory name is engine-neutral — any ProseMirror-based Editor works — and the legacy window.tiptapEditor name is still accepted as a deprecated alias (renaming is a one-line change):

# 1. Install the Tiptap core + starter kit (the 80% case).
npm install @tiptap/core @tiptap/starter-kit

# 2. Optional extensions, per form.
npm install @tiptap/extension-link @tiptap/extension-placeholder \
            @tiptap/extension-text-align @tiptap/extension-character-count

// 3. app.js — expose the factory WireKit calls at Alpine init().
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import Link from '@tiptap/extension-link';
import Placeholder from '@tiptap/extension-placeholder';

window.wirekitEditor = (config) => new Editor({
    // 4. WireKit hands you element / content / editable / callbacks / editorProps.
    element: config.element,
    content: config.content,
    editable: config.editable,
    editorProps: config.editorProps,
    onCreate: config.onCreate,
    onUpdate: config.onUpdate,
    onSelectionUpdate: config.onSelectionUpdate,
    onTransaction: config.onTransaction,
    // 5. YOU own the extension set. `config.extensions` is an OPTIONAL list of
    //    string name-hints (empty by default) — map them to real extensions only
    //    if your factory reads them; never spread the raw strings into Tiptap
    //    (they are not Extension objects). Restrict link protocols to block
    //    javascript: URLs.
    extensions: [
        StarterKit,
        Link.configure({ protocols: ['http', 'https', 'mailto'], openOnClick: false }),
        Placeholder.configure({ placeholder: config.placeholder ?? 'Write something…' }),
    ],
});

#Which WireKit bundle registers the editor

The wirekitEditor Alpine factory that <x-wirekit::editor> wires into x-data ships in the full bundle (wirekit.js) and the self-contained bundle (wirekit-alpine.js) — if you load either, the editor works with no extra script. If you load the core bundle (wirekit.core.js, chart-only) to keep your footprint small, add the standalone editor adapter alongside it:

{{-- # 1. Core bundle (no overlays) keeps the base footprint small --}}
@wirekitScripts(bundle: 'core')
{{-- # 2. Editor adapter glue — registers `wirekitEditor` next to core --}}
<script defer src="{{ asset('vendor/wirekit/wirekit-tiptap.js') }}"></script>

The wirekit-tiptap.js adapter is tiny (size in Dependencies) and contains only the editor glue — no Tiptap code (that stays your peer dependency). Loading it next to wirekit.js or wirekit-alpine.js is redundant: those already include the editor. See Choosing a JS bundle for the full bundle matrix.

#Factory config contract

WireKit calls window.wirekitEditor(config) with exactly these keys — your factory receives them and wires each into Tiptap:

WireKit treats this as a stable input contract: existing keys won't change or disappear in a minor or patch release (new keys, if any, arrive as optional additions). Writing your factory straight from this table — rather than guessing from the Alpine source — is what avoids the classic extensions: ['StarterKit'] mistake of spreading name hints into Tiptap as if they were real extension objects.

Your factory can return the Editor as-is — WireKit marks it non-reactive (Vue's markRaw flag) before storing it on Alpine state, so Alpine never deep-proxies it. A reactivity-proxied ProseMirror editor would reject every command with a "mismatched transaction" error; the glue rules that whole class out for you.

#Basic Usage

The toolbar="basic" preset (the default) gives you bold / italic / strike / link / lists. The document is written to a hidden input as HTML on every change, so wire:model and native form submission just work.

<x-wirekit::editor
    name="post_body"
    label="Post body"
    value="<p>Edit me — <strong>bold</strong>, <em>italic</em>, and a <a href='#'>link</a> all round-trip through the hidden input.</p>"
/>

#Toolbar Presets

toolbar="full" exposes headings, quotes, code blocks, and undo/redo; toolbar="false" hides it (keyboard shortcuts still work); toolbar="custom" lets you compose <x-wirekit::editor.toolbar :commands="[...]"> in the toolbar slot.

<x-wirekit::editor
    name="article_body"
    toolbar="full"
    size="lg"
    value="<h2>A longer document</h2><p>The full toolbar adds headings, lists, code blocks, and history.</p>"
/>

#Read-only

Set :editable="false" to render a document as a non-editable preview (no toolbar, no hidden input) — useful for moderation queues and comment threads.

<x-wirekit::editor
    :editable="false"
    :toolbar="false"
    value="<p>This document is read-only. There's no toolbar and no form field — just the rendered content.</p>"
/>

#Character limit

Set maxLength to render a live counter in the bottom bar. It's a soft limit — the count turns red past the limit but typing isn't blocked (for a hard stop, pass a limit to CharacterCount in your factory). The visible count is aria-hidden; a debounced screen-reader announcement speaks the remaining count when the user pauses, so it never narrates every keystroke.

<x-wirekit::editor
    name="tweet"
    label="What's happening?"
    :max-length="280"
    value="<p>The counter sits in the bottom bar and turns red once you pass the limit.</p>"
/>

#Advanced: mentions, slash commands & collaboration

The extensions array in your window.wirekitEditor factory is the extension point for everything Tiptap can do beyond the toolbar presets. WireKit doesn't bundle these — you add the Tiptap peer extensions you need and wire their config, exactly where you already add StarterKit. Three common ones:

#Mentions (@name)

@tiptap/extension-mention turns @ into a typeahead. You own the suggestion source and the popup; WireKit just hosts the editor.

// 1. npm install @tiptap/extension-mention
import Mention from '@tiptap/extension-mention';

// 2. Add it to the factory's extension set (alongside StarterKit, Link, …).
//    The suggestion.items callback is YOUR data source.
Mention.configure({
    HTMLAttributes: { class: 'wk-mention' },
    suggestion: {
        items: ({ query }) =>
            people.filter((p) => p.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5),
        // 3. render() mounts the suggestion popup — see Tiptap's suggestion utility.
    },
});

#Slash commands & AI

A slash menu is the same suggestion mechanism keyed on / instead of @. Build it on @tiptap/suggestion: each item runs an editor command when picked. An "AI" item is just a command that calls your endpoint and inserts the response.

// 1. A slash item that asks YOUR backend to continue the text, then inserts it.
{
    title: 'Continue with AI',
    command: async ({ editor, range }) => {
        // 2. The request, model, auth, and rate-limiting are all yours —
        //    WireKit never calls an AI service.
        const text = await fetch('/ai/continue', { method: 'POST' }).then((r) => r.text());
        editor.chain().focus().deleteRange(range).insertContent(text).run();
    },
}

#Collaboration (Yjs)

Real-time collaboration uses @tiptap/extension-collaboration on top of a Yjs document synced by a provider you run.

// 1. npm install @tiptap/extension-collaboration yjs y-websocket
import Collaboration from '@tiptap/extension-collaboration';
import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

// 2. One shared doc + a provider pointed at YOUR server.
const ydoc = new Y.Doc();
new WebsocketProvider('wss://collab.example.com', roomName, ydoc);

// 3. Add Collaboration and DON'T set `content` — Yjs hydrates the document.
//    Collaboration manages undo/redo, so disable StarterKit's own history.
Collaboration.configure({ document: ydoc });

For presence cursors, add @tiptap/extension-collaboration-cursor with each user's name and color.

#Props

#Slots

#Events

The factory dispatches input and change on the hidden field after every (debounced) change, so wire:model.live and legacy listeners both fire.

#Accessibility

• The content region is a role="textbox" with aria-multiline="true"; the label prop names it (or a humanized name fallback).
• The toolbar is a role="toolbar" labeled "Editor commands"; toggle buttons expose aria-pressed reflecting the current mark/node.
• Toolbar buttons use mousedown.prevent so clicking a command never steals selection from the editor.
• The undo and redo buttons disable themselves (disabled + dimmed) when there is nothing to undo or redo, so the toolbar never offers a dead command.
• Error state sets aria-invalid="true" + aria-describedby to the error text — same as every other WireKit input.
• Default Tiptap keyboard shortcuts work (see below).

#Keyboard Interaction

#Design Tokens

#Usage & Conventions

#Further Reading

• Tiptap documentation
• Tiptap pricing / license model
• ProseMirror — the engine Tiptap wraps
• mews/purifier — server-side HTML sanitizer for Laravel