@thescaffold/editor-core

Core editor runtime for X Editor. Provides the <x-editor> Custom Element, the createEditor() factory, the addon lifecycle system, and all base registries.

Installation

npm install @thescaffold/editor-core prosemirror-model prosemirror-state prosemirror-view @codemirror/state @codemirror/view @floating-ui/dom

Quick Start

Vanilla HTML — Custom Element

<x-editor id="editor"></x-editor>

<script type="module">
  import "@thescaffold/editor-core/define";
  import { SchemaAddon, ToolbarAddon } from "@thescaffold/editor-addons";

  const el = document.getElementById("editor");
  el.config = {
    mode: "doc",
    addons: [SchemaAddon(), ToolbarAddon()],
  };

  el.addEventListener("xe:change", (e) => console.log(e.detail.doc));
</script>

Programmatic — createEditor()

import { createEditor } from "@thescaffold/editor-core";
import { SchemaAddon, ToolbarAddon } from "@thescaffold/editor-addons";

const editor = await createEditor(document.getElementById("container"), {
  mode: "doc",
  addons: [SchemaAddon(), ToolbarAddon()],
});

editor.on("change", (e) => console.log(e.doc));
editor.destroy();

Events

| Event | Detail | When | | --------------------- | ------------------ | ------------------ | | xe:ready | { editor } | Editor initialized | | xe:change | { doc, content } | Document mutated | | xe:selection-change | { selection } | Cursor moved | | xe:focus | — | Editor focused | | xe:blur | — | Editor blurred | | xe:mode-change | { from, to } | Mode switched | | xe:error | { error } | Internal error |

License

MIT