{
  "name": "prose-editor",
  "displayName": "Prose editor",
  "type": "shadow",
  "isCustomElement": true,
  "tag": "l-prose-editor",
  "nativeTag": null,
  "selector": "l-prose-editor",
  "subItemOf": null,
  "summary": "A rich text editor built on Tiptap (ProseMirror). Form-associated: its value is the editor HTML.\n\n### Keyboard — APG Toolbar pattern\nThe generated toolbar buttons follow the\n[APG Toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/):\nexactly one button holds `tabindex=\"0\"` at a time (roving tabindex).\n**ArrowRight** / **ArrowLeft** move focus to the next / previous button,\nwrapping around. **Home** / **End** jump to the first / last button.\nA single Tab enters and leaves the toolbar without stepping through every\nbutton. Slotted `toolbar-start` / `toolbar-end` focusables are excluded\nfrom roving management — they are consumer-controlled content and their\ntab order is handled by the consumer.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/prose-editor",
    "js": "luxen-ui/prose-editor"
  },
  "properties": [
    {
      "name": "editor",
      "attribute": null,
      "type": "Editor",
      "default": null,
      "reflects": false,
      "description": "The Tiptap editor instance. Available after the first render."
    },
    {
      "name": "initialHtml",
      "attribute": "initial-html",
      "type": "string",
      "default": "''",
      "reflects": false,
      "description": "Initial HTML content."
    },
    {
      "name": "initialJson",
      "attribute": "initial-json",
      "type": "string",
      "default": "''",
      "reflects": false,
      "description": "Initial content as a serialized ProseMirror JSON string."
    },
    {
      "name": "editorClass",
      "attribute": "editor-class",
      "type": "string",
      "default": "'prose'",
      "reflects": false,
      "description": "Class applied to the `.ProseMirror` editable element (e.g. for Tailwind Typography `prose`)."
    },
    {
      "name": "toolbar",
      "attribute": "toolbar",
      "type": "ToolbarCommandName[]",
      "default": "[]",
      "reflects": false,
      "description": "Explicit list of toolbar commands. Overrides `toolbar-preset` when set."
    },
    {
      "name": "toolbarPreset",
      "attribute": "toolbar-preset",
      "type": "'default' | 'minimal'",
      "default": "'default'",
      "reflects": false,
      "description": "Built-in toolbar layout used when `toolbar` is not set."
    },
    {
      "name": "toolbarPlacement",
      "attribute": "toolbar-placement",
      "type": "'top' | 'bottom'",
      "default": "'top'",
      "reflects": true,
      "description": "Where the toolbar sits relative to the content."
    },
    {
      "name": "autofocus",
      "attribute": "autofocus",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Focus the editor on creation."
    },
    {
      "name": "placeholder",
      "attribute": "placeholder",
      "type": "string",
      "default": "''",
      "reflects": false,
      "description": "Placeholder shown when the editor is empty."
    },
    {
      "name": "emojiDataSource",
      "attribute": "emoji-data-source",
      "type": "string",
      "default": "''",
      "reflects": false,
      "description": "URL the emoji picker fetches its data from. Point this at a locally served\n`emojibase-data` JSON to run fully offline (no CDN). Defaults to the\npicker's bundled CDN source."
    },
    {
      "name": "validationTarget",
      "attribute": null,
      "type": "HTMLElement | undefined",
      "default": null,
      "reflects": false,
      "description": ""
    }
  ],
  "attributes": [],
  "events": [
    {
      "name": "change",
      "description": "Fired when the content changes. Bubbles. Properties: `html: string`, `json: JSONContent`.",
      "cancelable": false
    },
    {
      "name": "add-file",
      "description": "Fired when the attachment toolbar button is clicked.",
      "cancelable": false
    }
  ],
  "methods": [
    {
      "name": "getHTML",
      "params": [],
      "returns": "string",
      "description": "Get the current content as an HTML string. Empty paragraph resolves to `''`."
    },
    {
      "name": "getJSON",
      "params": [],
      "returns": "JSONContent",
      "description": "Get the current content as ProseMirror JSON."
    },
    {
      "name": "clear",
      "params": [],
      "returns": null,
      "description": "Remove all content."
    },
    {
      "name": "focus",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "blur",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "toggleBold",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "toggleItalic",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "toggleUnderline",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "toggleStrike",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "toggleHighlight",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "toggleHeading",
      "params": [
        {
          "name": "level",
          "type": "1 | 2 | 3"
        }
      ],
      "returns": null,
      "description": ""
    },
    {
      "name": "toggleBulletList",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "toggleOrderedList",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "toggleBlockquote",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "toggleCodeBlock",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "setHorizontalRule",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "undo",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "redo",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "toggleLink",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "formResetCallback",
      "params": [],
      "returns": null,
      "description": ""
    }
  ],
  "slots": [
    {
      "name": "toolbar-start",
      "description": "Content placed before the generated toolbar buttons."
    },
    {
      "name": "toolbar-end",
      "description": "Content placed after the generated toolbar buttons."
    }
  ],
  "cssClasses": [],
  "cssParts": [
    {
      "name": "wrapper",
      "description": "The editor frame wrapping the toolbar and content."
    },
    {
      "name": "toolbar",
      "description": "The toolbar row."
    },
    {
      "name": "toolbar-button",
      "description": "Any toolbar button."
    },
    {
      "name": "divider",
      "description": "A toolbar divider."
    },
    {
      "name": "editor",
      "description": "The container around the editable content."
    }
  ],
  "cssProperties": [
    {
      "name": "--border-color",
      "default": null,
      "description": "Color of the editor frame border."
    },
    {
      "name": "--border-width",
      "default": null,
      "description": "Width of the editor frame border."
    },
    {
      "name": "--border-radius",
      "default": null,
      "description": "Corner radius of the editor frame."
    },
    {
      "name": "--background",
      "default": null,
      "description": "Background color of the editor."
    },
    {
      "name": "--color",
      "default": null,
      "description": "Text color of the editor."
    },
    {
      "name": "--toolbar-background",
      "default": null,
      "description": "Background color of the toolbar."
    },
    {
      "name": "--toolbar-padding",
      "default": null,
      "description": "Padding around the toolbar."
    },
    {
      "name": "--toolbar-gap",
      "default": null,
      "description": "Gap between toolbar buttons."
    },
    {
      "name": "--toolbar-divider-color",
      "default": null,
      "description": "Color of toolbar dividers."
    },
    {
      "name": "--toolbar-button-size",
      "default": null,
      "description": "Size of toolbar buttons."
    },
    {
      "name": "--toolbar-button-radius",
      "default": null,
      "description": "Corner radius of toolbar buttons."
    },
    {
      "name": "--toolbar-button-color",
      "default": null,
      "description": "Icon color of inactive toolbar buttons."
    },
    {
      "name": "--toolbar-button-color-active",
      "default": null,
      "description": "Icon color of hovered/active toolbar buttons."
    },
    {
      "name": "--toolbar-button-background-hover",
      "default": null,
      "description": "Background of hovered toolbar buttons."
    },
    {
      "name": "--toolbar-button-background-active",
      "default": null,
      "description": "Background of active toolbar buttons."
    },
    {
      "name": "--content-padding",
      "default": "0.75rem 1rem",
      "description": "Padding inside the editable content region."
    },
    {
      "name": "--content-min-height",
      "default": "8rem",
      "description": "Minimum height of the editable content region."
    },
    {
      "name": "--placeholder-color",
      "default": null,
      "description": "Placeholder text color."
    }
  ],
  "commands": [],
  "examples": []
}