@pyreon/rich-text 0.46.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Vit Bokisch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,107 @@
+# @pyreon/rich-text
+
+Reactive WYSIWYG rich-text editor for Pyreon — a thin, signal-backed layer over
+[TipTap](https://tiptap.dev) (the MIT, framework-agnostic headless editor
+framework built on [ProseMirror](https://prosemirror.net)). Same adapter shape
+as `@pyreon/code` (CodeMirror) and `@pyreon/charts` (ECharts): a best-in-class
+engine, wrapped in Pyreon's fine-grained reactivity.
+
+- **Signal-backed document** — `editor.json` is a writable `Signal<JSONContent>`;
+  `html` / `text` / `isEmpty` / `characterCount` / `wordCount` / `canUndo` /
+  `canRedo` are computed signals; `editable` is a writable read-only toggle.
+  `characterCount` / `wordCount` / `isEmpty` derive from the document JSON, so
+  they report accurately **before the engine mounts** (stored-JSON draft lists),
+  count visible characters, and — like every content computed — never re-run on
+  a pure cursor move (only `isActive` tracks the selection).
+- **Toolbar-ready** — `editor.isActive('bold')` is a reactive accessor for
+  active-state highlighting; commands run through `editor.chain()` plus
+  `undo` / `redo` / `focus` / `blur` helpers.
+- **Lazy engine** — `@tiptap/*` is dynamically imported on mount, so it stays
+  out of the initial bundle (a ~1.5 KB gz wrapper; the engine is a lazy chunk).
+  A re-mount keeps the current document, disposing mid-load is leak-safe, and a
+  mount failure routes to `onError`.
+- **Accessible** — the content area is a labeled `role="textbox"` multiline
+  region.
+- **MIT throughout** — TipTap + ProseMirror are MIT; collaboration composes
+  with `@pyreon/sync` (no paid cloud).
+
+## Install
+
+```sh
+bun add @pyreon/rich-text
+# peer: @pyreon/runtime-dom (the <RichText> JSX emits _tpl()/_bind())
+```
+
+## Usage
+
+```tsx
+import { createRichTextEditor, RichText, bindRichTextToSignal } from '@pyreon/rich-text'
+import { signal } from '@pyreon/reactivity'
+
+const editor = createRichTextEditor({
+  content: '<p>Hello <strong>world</strong></p>',
+  ariaLabel: 'Post body',
+  onChange: (json) => console.log('user edit:', json),
+})
+
+// editor.json is a writable Signal<JSONContent>
+editor.json()              // reactive read — tracks in effects/JSX
+editor.json.set(draft)     // replace content (loop-safe)
+editor.text()              // computed plain text
+editor.characterCount()    // computed number
+editor.canUndo()           // computed boolean
+
+// Run a TipTap command:
+editor.chain()?.toggleBold().run()
+
+// Mount (lazy-loads TipTap):
+<RichText instance={editor} style="min-height: 12rem" />
+
+// Tear down (user-owned lifecycle):
+// onCleanup(() => editor.dispose())
+```
+
+### Toolbar
+
+```tsx
+// Command + reactive active-state (call isActive inside a reactive scope):
+<button
+  type="button"
+  class={() => (editor.isActive('bold') ? 'active' : '')}
+  onClick={() => editor.chain()?.toggleBold().run()}
+>
+  Bold
+</button>
+
+<button disabled={() => !editor.canUndo()} onClick={() => editor.undo()}>Undo</button>
+
+// Runtime read-only toggle:
+editor.editable.set(false)   // read-only
+editor.editable()            // reactive boolean
+```
+
+### Two-way binding
+
+```ts
+const draft = signal(editor.json())
+const binding = bindRichTextToSignal({ editor, signal: draft })
+// HTML form instead: bindRichTextToSignal({ editor, signal: htmlStr, format: 'html' })
+// onCleanup(() => binding.dispose())
+```
+
+`bindRichTextToSignal` is the editor mirror of `@pyreon/code`'s
+`bindEditorToSignal` — internal flags break the echo loop, and a value
+compare short-circuits no-op writes.
+
+## Collaboration (with `@pyreon/sync`)
+
+Real-time collaboration composes with `@pyreon/sync` rather than a paid cloud:
+bind the editor to the same `Y.Doc` XML fragment via TipTap's collaboration
+extension, and reuse `@pyreon/sync` transports + `syncedAwareness` for live
+cursors. See `docs/` for the full pattern.
+
+## License
+
+MIT. TipTap (`@tiptap/core`, `@tiptap/starter-kit`, `@tiptap/pm`) and
+ProseMirror are MIT. The TipTap Pro modules (Cloud, Comments, Content AI,
+document-conversion) are paid/commercially-licensed and are **not** used.

package/lib/index.js

@@ -0,0 +1,346 @@
+import { computed, effect, registerSingleton, signal, wrapSignal } from "@pyreon/reactivity";
+import { cx } from "@pyreon/core";
+import { jsx } from "@pyreon/core/jsx-runtime";
+
+//#region package.json
+var name = "@pyreon/rich-text";
+var version = "0.46.0";
+
+//#endregion
+//#region src/editor.ts
+const EMPTY_DOC = {
+	type: "doc",
+	content: []
+};
+/** Push every text node's string (depth-first) into `acc`. */
+function collectTextNodes(node, acc) {
+	if (node.type === "text") {
+		if (node.text) acc.push(node.text);
+		return;
+	}
+	const kids = node.content;
+	if (kids) for (const child of kids) collectTextNodes(child, acc);
+}
+/** Total VISIBLE character count — sum of every text node's length. */
+function countChars(node) {
+	const acc = [];
+	collectTextNodes(node, acc);
+	let total = 0;
+	for (const s of acc) total += s.length;
+	return total;
+}
+/**
+* Concatenate each textblock's inline text (marks joined without a separator,
+* so a mark-split word stays one word), one string per block.
+*/
+function collectBlockTexts(node, out) {
+	const kids = node.content;
+	if (!kids || kids.length === 0) return;
+	if (kids.some((c) => c.type === "text")) {
+		const acc = [];
+		collectTextNodes(node, acc);
+		out.push(acc.join(""));
+	} else for (const child of kids) collectBlockTexts(child, out);
+}
+/** Whitespace-delimited word count (block boundaries never merge words). */
+function countWords(node) {
+	const blocks = [];
+	collectBlockTexts(node, blocks);
+	let total = 0;
+	for (const b of blocks) {
+		const t = b.trim();
+		if (t !== "") total += t.split(/\s+/).length;
+	}
+	return total;
+}
+/** Best-effort plain text — blocks joined with `\n\n` (matches `getText`). */
+function extractText(node) {
+	const blocks = [];
+	collectBlockTexts(node, blocks);
+	return blocks.join("\n\n");
+}
+/**
+* Create a reactive WYSIWYG rich-text editor instance.
+*
+* The document state (`json` / `html` / `text` / counts / undo-redo) is
+* backed by signals; the TipTap `Editor` (over ProseMirror) is created
+* lazily when the instance is mounted via `<RichText>` — so `@tiptap/*`
+* stays out of the initial bundle (same lazy-load shape as
+* `@pyreon/code`'s languages and `@pyreon/charts`' ECharts).
+*
+* @example
+* ```tsx
+* const editor = createRichTextEditor({ content: '<p>Hello</p>' })
+*
+* editor.json()                 // reactive ProseMirror JSON
+* editor.json.set(draft)        // replace content (loop-safe)
+* editor.text()                 // reactive plain text
+* editor.chain()?.toggleBold().run()
+*
+* <RichText instance={editor} style="min-height: 12rem" />
+* ```
+*/
+function createRichTextEditor(config = {}) {
+	const { content = "", editable: initialEditable = true, ariaLabel = "Rich text editor", starterKit = true, extensions: userExtensions = [], autofocus = false, onChange, onError } = config;
+	const baseJson = signal(typeof content === "object" && content ? content : EMPTY_DOC);
+	const focused = signal(false);
+	const view = signal(null);
+	const baseEditable = signal(initialEditable);
+	const docVersion = signal(0);
+	const selectionVersion = signal(0);
+	const editable = wrapSignal(baseEditable, { set: (next) => {
+		view.peek()?.setEditable(next);
+		baseEditable.set(next);
+	} });
+	let applyingExternal = false;
+	let pendingContent = content;
+	let mountToken = 0;
+	let hasMountedOnce = false;
+	const json = wrapSignal(baseJson, { set: (next) => {
+		const e = view.peek();
+		if (e) {
+			applyingExternal = true;
+			e.commands.setContent(next);
+			applyingExternal = false;
+		} else pendingContent = next;
+		baseJson.set(next);
+	} });
+	const readEditor = () => {
+		docVersion();
+		return view.peek();
+	};
+	const html = computed(() => readEditor()?.getHTML() ?? (typeof content === "string" ? content : ""));
+	const canUndo = computed(() => readEditor()?.can().undo() ?? false);
+	const canRedo = computed(() => readEditor()?.can().redo() ?? false);
+	const text = computed(() => readEditor()?.getText() ?? extractText(baseJson()));
+	const characterCount = computed(() => countChars(baseJson()));
+	const wordCount = computed(() => countWords(baseJson()));
+	const isEmpty = computed(() => countChars(baseJson()) === 0);
+	/**
+	* Whether a mark/node is active at the current selection — reactive (reads
+	* the transaction counter, so it re-derives on every edit + selection
+	* move). The toolbar primitive: `editor.isActive('bold')`,
+	* `editor.isActive('heading', { level: 2 })`. Read it inside a reactive
+	* scope (a `() => …` thunk in JSX, an `effect`, a `computed`).
+	*/
+	const isActive = (name, attrs) => {
+		docVersion();
+		selectionVersion();
+		const e = view.peek();
+		if (!e) return false;
+		return typeof name === "string" ? e.isActive(name, attrs) : e.isActive(name);
+	};
+	const chain = () => view.peek()?.chain() ?? null;
+	const focus = () => {
+		view.peek()?.commands.focus();
+	};
+	const blur = () => {
+		view.peek()?.commands.blur();
+	};
+	const undo = () => {
+		view.peek()?.chain().undo().run();
+	};
+	const redo = () => {
+		view.peek()?.chain().redo().run();
+	};
+	const dispose = () => {
+		mountToken++;
+		const e = view.peek();
+		if (e) {
+			e.destroy();
+			view.set(null);
+		}
+	};
+	const _mount = async (parent) => {
+		if (view.peek()) return;
+		const token = ++mountToken;
+		try {
+			const { Editor } = await import("@tiptap/core");
+			const exts = [];
+			if (starterKit) {
+				const { StarterKit } = await import("@tiptap/starter-kit");
+				exts.push(StarterKit);
+			}
+			exts.push(...userExtensions);
+			if (token !== mountToken) return;
+			const editor = new Editor({
+				element: parent,
+				extensions: exts,
+				content: hasMountedOnce ? baseJson.peek() : pendingContent,
+				editable: baseEditable.peek(),
+				autofocus,
+				editorProps: { attributes: {
+					role: "textbox",
+					"aria-multiline": "true",
+					"aria-label": ariaLabel
+				} },
+				onUpdate: ({ editor: e }) => {
+					docVersion.update((v) => v + 1);
+					if (!applyingExternal) {
+						const next = e.getJSON();
+						baseJson.set(next);
+						onChange?.(next);
+					}
+				},
+				onSelectionUpdate: () => selectionVersion.update((v) => v + 1),
+				onFocus: () => focused.set(true),
+				onBlur: () => focused.set(false)
+			});
+			if (token !== mountToken) {
+				editor.destroy();
+				return;
+			}
+			view.set(editor);
+			hasMountedOnce = true;
+			baseJson.set(editor.getJSON());
+			docVersion.update((v) => v + 1);
+		} catch (err) {
+			const error = err instanceof Error ? err : new Error(String(err));
+			if (onError) onError(error);
+			else if (process.env.NODE_ENV !== "production") console.error("[Pyreon] @pyreon/rich-text failed to mount the editor:", error);
+		}
+	};
+	return {
+		json,
+		html,
+		text,
+		isEmpty,
+		characterCount,
+		wordCount,
+		canUndo,
+		canRedo,
+		focused,
+		editable,
+		view,
+		isActive,
+		chain,
+		focus,
+		blur,
+		undo,
+		redo,
+		dispose,
+		_mount
+	};
+}
+
+//#endregion
+//#region src/components/rich-text.tsx
+/**
+* Mount component for a {@link createRichTextEditor} instance. Creates the
+* TipTap editor inside a container `<div>` on render (lazy-loading the
+* engine). The instance is framework-independent — create it with
+* `createRichTextEditor`, mount it here.
+*
+* Lifecycle: like `@pyreon/code`'s `<CodeEditor>`, the editor instance is
+* **user-owned** — call `editor.dispose()` in your `onCleanup` /
+* `onUnmount` if the instance won't be reused (the component does not
+* auto-dispose, so the same instance can be re-mounted).
+*
+* @example
+* ```tsx
+* const editor = createRichTextEditor({ content: '<p>Hello</p>' })
+* <RichText instance={editor} style="min-height: 12rem" />
+* ```
+*/
+function RichText(props) {
+	const { instance } = props;
+	const containerRef = (el) => {
+		if (!el) return;
+		instance._mount(el);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		class: cx(["pyreon-rich-text", props.class]),
+		style: props.style ?? ""
+	});
+}
+
+//#endregion
+//#region src/bind-signal.ts
+/**
+* Two-way bind a Pyreon `Signal` to a rich-text editor's content, with
+* built-in loop prevention — the editor mirror of `@pyreon/code`'s
+* `bindEditorToSignal`. Use `format: 'json'` to persist/restore the
+* structured document, or `format: 'html'` for an HTML string.
+*
+* @example
+* ```ts
+* const draft = signal<JSONContent>({ type: 'doc', content: [] })
+* const editor = createRichTextEditor()
+* const binding = bindRichTextToSignal({ editor, signal: draft })
+* onCleanup(() => binding.dispose())
+* ```
+*/
+function bindRichTextToSignal(options) {
+	const { editor, signal, format = "json", onError } = options;
+	let applyingFromSignal = false;
+	let applyingFromEditor = false;
+	const signalToEditor = effect(() => {
+		const value = signal();
+		if (applyingFromEditor) return;
+		applyingFromSignal = true;
+		try {
+			if (format === "html") {
+				const e = editor.view.peek();
+				if (e && value !== e.getHTML()) e.commands.setContent(value);
+			} else if (JSON.stringify(value) !== JSON.stringify(editor.json.peek())) editor.json.set(value);
+		} catch (err) {
+			onError?.(err);
+		} finally {
+			applyingFromSignal = false;
+		}
+	});
+	const editorToSignal = effect(() => {
+		const out = format === "html" ? editor.html() : editor.json();
+		/* v8 ignore next — defensive loop guard. The external→editor sync path
+		sets applyingFromSignal then resets it inside the same synchronous
+		block; Pyreon defers a cross-effect re-run past that block (the flag is
+		already false when this effect re-runs), so the bail is unreachable
+		under the current scheduler but kept to match @pyreon/code's guard. */
+		if (applyingFromSignal) return;
+		applyingFromEditor = true;
+		try {
+			signal.set(out);
+		} catch (err) {
+			onError?.(err);
+		} finally {
+			applyingFromEditor = false;
+		}
+	});
+	return { dispose: () => {
+		signalToEditor.dispose();
+		editorToSignal.dispose();
+	} };
+}
+
+//#endregion
+//#region src/index.ts
+/**
+* @pyreon/rich-text — Reactive WYSIWYG rich-text editor for Pyreon.
+*
+* A thin signal-backed layer over TipTap (the MIT, framework-agnostic
+* headless editor framework built on ProseMirror) — the same adapter
+* shape as `@pyreon/code` (CodeMirror) and `@pyreon/charts` (ECharts).
+* The document state is exposed as signals; the TipTap engine is
+* lazy-loaded on mount so `@tiptap/*` stays out of the initial bundle.
+*
+* @example
+* ```tsx
+* import { createRichTextEditor, RichText, bindRichTextToSignal } from '@pyreon/rich-text'
+* import { signal } from '@pyreon/reactivity'
+*
+* const editor = createRichTextEditor({ content: '<p>Hello</p>' })
+*
+* editor.json()                       // reactive ProseMirror JSON
+* editor.json.set(draft)              // replace content (loop-safe)
+* editor.text()                       // reactive plain text
+* editor.chain()?.toggleBold().run()  // run a command
+*
+* <RichText instance={editor} style="min-height: 12rem" />
+* ```
+*/
+registerSingleton(name, version, import.meta.url);
+
+//#endregion
+export { RichText, bindRichTextToSignal, createRichTextEditor };
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["__pkgName","__pkgVersion"],"sources":["../package.json","../src/editor.ts","../src/components/rich-text.tsx","../src/bind-signal.ts","../src/index.ts"],"sourcesContent":["","import { computed, signal, wrapSignal } from '@pyreon/reactivity'\nimport type { AnyExtension, Editor, JSONContent } from '@tiptap/core'\nimport type { RichTextConfig, RichTextEditor } from './types'\n\nconst EMPTY_DOC: JSONContent = { type: 'doc', content: [] }\n\n// ── Pure ProseMirror-JSON walkers ──────────────────────────────────────────\n// text / character-count / word-count / isEmpty derive DIRECTLY from the\n// document JSON (`baseJson`), not the mounted TipTap engine. Three payoffs:\n//   1. They work BEFORE mount + AFTER dispose — a stored-JSON draft reports a\n//      real character/word count and an accurate `isEmpty` without ever\n//      loading the (lazy) engine (draft lists, SSR previews).\n//   2. They re-derive only when the DOCUMENT changes (`baseJson`), never on a\n//      pure selection move — moving the cursor no longer re-runs a live\n//      word-counter effect (the engine bumps one counter for BOTH update and\n//      selection events; content computeds must not subscribe to selection).\n//   3. `characterCount` counts the VISIBLE characters, not the `\\n\\n` block\n//      separators TipTap's `getText()` inserts between blocks (`aaa`+`bbb`\n//      across two paragraphs is 6, not 8).\n// Schema-less by design (StarterKit-accurate). A custom node whose rendered\n// text differs from its concatenated text descendants may count differently\n// than its live `getText()` — documented; the 99% (StarterKit) case is exact.\n\n/** Push every text node's string (depth-first) into `acc`. */\nfunction collectTextNodes(node: JSONContent, acc: string[]): void {\n  if (node.type === 'text') {\n    if (node.text) acc.push(node.text)\n    return\n  }\n  const kids = node.content\n  if (kids) for (const child of kids) collectTextNodes(child, acc)\n}\n\n/** Total VISIBLE character count — sum of every text node's length. */\nfunction countChars(node: JSONContent): number {\n  const acc: string[] = []\n  collectTextNodes(node, acc)\n  let total = 0\n  for (const s of acc) total += s.length\n  return total\n}\n\n/**\n * Concatenate each textblock's inline text (marks joined without a separator,\n * so a mark-split word stays one word), one string per block.\n */\nfunction collectBlockTexts(node: JSONContent, out: string[]): void {\n  const kids = node.content\n  if (!kids || kids.length === 0) return\n  // A textblock has at least one direct text child; concatenate its inline\n  // text as a single block. Otherwise it's a container — recurse into it.\n  if (kids.some((c) => c.type === 'text')) {\n    const acc: string[] = []\n    collectTextNodes(node, acc)\n    out.push(acc.join(''))\n  } else {\n    for (const child of kids) collectBlockTexts(child, out)\n  }\n}\n\n/** Whitespace-delimited word count (block boundaries never merge words). */\nfunction countWords(node: JSONContent): number {\n  const blocks: string[] = []\n  collectBlockTexts(node, blocks)\n  let total = 0\n  for (const b of blocks) {\n    const t = b.trim()\n    if (t !== '') total += t.split(/\\s+/).length\n  }\n  return total\n}\n\n/** Best-effort plain text — blocks joined with `\\n\\n` (matches `getText`). */\nfunction extractText(node: JSONContent): string {\n  const blocks: string[] = []\n  collectBlockTexts(node, blocks)\n  return blocks.join('\\n\\n')\n}\n\n/**\n * Create a reactive WYSIWYG rich-text editor instance.\n *\n * The document state (`json` / `html` / `text` / counts / undo-redo) is\n * backed by signals; the TipTap `Editor` (over ProseMirror) is created\n * lazily when the instance is mounted via `<RichText>` — so `@tiptap/*`\n * stays out of the initial bundle (same lazy-load shape as\n * `@pyreon/code`'s languages and `@pyreon/charts`' ECharts).\n *\n * @example\n * ```tsx\n * const editor = createRichTextEditor({ content: '<p>Hello</p>' })\n *\n * editor.json()                 // reactive ProseMirror JSON\n * editor.json.set(draft)        // replace content (loop-safe)\n * editor.text()                 // reactive plain text\n * editor.chain()?.toggleBold().run()\n *\n * <RichText instance={editor} style=\"min-height: 12rem\" />\n * ```\n */\nexport function createRichTextEditor(config: RichTextConfig = {}): RichTextEditor {\n  const {\n    content = '',\n    editable: initialEditable = true,\n    ariaLabel = 'Rich text editor',\n    starterKit = true,\n    extensions: userExtensions = [],\n    autofocus = false,\n    onChange,\n    onError,\n  } = config\n\n  // ── Reactive state ───────────────────────────────────────────────────\n  const baseJson = signal<JSONContent>(\n    typeof content === 'object' && content ? content : EMPTY_DOC,\n  )\n  const focused = signal(false)\n  const view = signal<Editor | null>(null)\n  const baseEditable = signal(initialEditable)\n  // Two transaction counters, deliberately split. `docVersion` bumps only on a\n  // CONTENT change (`onUpdate`); `selectionVersion` bumps on a selection move\n  // (`onSelectionUpdate`). Content computeds that read the live engine\n  // (`html` / `canUndo` / `canRedo`) subscribe to `docVersion` ONLY, so a cursor\n  // move doesn't re-run them; `isActive` (mark/node state depends on BOTH the\n  // marks present and where the cursor sits) subscribes to both.\n  const docVersion = signal(0)\n  const selectionVersion = signal(0)\n\n  // `editable` is a writable facade: reads delegate to baseEditable; `.set`\n  // flips the live editor's editable state (when mounted) then commits to base\n  // — the runtime read-only toggle (mirrors `@pyreon/code`'s `readOnly`).\n  const editable = wrapSignal(baseEditable, {\n    set: (next) => {\n      view.peek()?.setEditable(next)\n      baseEditable.set(next)\n    },\n  })\n\n  // Loop guard: when WE push content into the editor (`json.set`), the\n  // editor's `onUpdate` fires — skip writing back to `baseJson` (we set it\n  // explicitly), exactly like `@pyreon/code`'s CM↔signal compare guard.\n  let applyingExternal = false\n  // The content the editor is created with at mount (covers a string OR a\n  // pre-mount `json.set`).\n  let pendingContent: string | JSONContent = content\n  // Mount-attempt generation. `_mount` lazy-imports `@tiptap/*` (async), so a\n  // `dispose()` or a newer `_mount` can land WHILE an import is in flight.\n  // `dispose()` bumps this; `_mount` captures it before its awaits and bails\n  // (without creating a leaked editor) if it changed — closes the\n  // dispose-during-pending-mount leak (orphaned ProseMirror view + DOM).\n  let mountToken = 0\n  // True once a mount has successfully created the editor. After that, the\n  // live document lives in `baseJson` (kept current by `onUpdate` / `json.set`),\n  // so a re-mount (dispose → mount the SAME instance, the documented\n  // user-owned lifecycle) seeds from the CURRENT doc — not the stale\n  // config-time `pendingContent`, which would silently revert edits.\n  let hasMountedOnce = false\n\n  // `json` is a writable facade: reads/peek/subscribe delegate to baseJson;\n  // `.set` pushes into the live editor (when mounted) then commits to base.\n  const json = wrapSignal(baseJson, {\n    set: (next) => {\n      const e = view.peek()\n      if (e) {\n        applyingExternal = true\n        e.commands.setContent(next)\n        applyingExternal = false\n      } else {\n        pendingContent = next\n      }\n      baseJson.set(next)\n    },\n  })\n\n  const readEditor = (): Editor | null => {\n    docVersion() // subscribe — re-derive on each CONTENT change (not selection)\n    // pyreon-lint-disable-next-line pyreon/no-peek-in-tracked\n    return view.peek()\n  }\n\n  // Engine-derived, CONTENT-reactive (read the live editor once mounted; skip\n  // selection-only churn by subscribing to `docVersion`, not selection).\n  const html = computed(() => readEditor()?.getHTML() ?? (typeof content === 'string' ? content : ''))\n  const canUndo = computed(() => readEditor()?.can().undo() ?? false)\n  const canRedo = computed(() => readEditor()?.can().redo() ?? false)\n\n  // Document-derived (pure walkers over `baseJson`). They track the DOCUMENT,\n  // not the engine — so they work before mount / after dispose, don't re-run on\n  // a pure cursor move, and count visible characters (no `\\n\\n` separators).\n  // `text` prefers the live engine's exact `getText()` when mounted (custom\n  // node serializers), falling back to the walker before mount.\n  const text = computed(() => readEditor()?.getText() ?? extractText(baseJson()))\n  const characterCount = computed(() => countChars(baseJson()))\n  const wordCount = computed(() => countWords(baseJson()))\n  const isEmpty = computed(() => countChars(baseJson()) === 0)\n\n  /**\n   * Whether a mark/node is active at the current selection — reactive (reads\n   * the transaction counter, so it re-derives on every edit + selection\n   * move). The toolbar primitive: `editor.isActive('bold')`,\n   * `editor.isActive('heading', { level: 2 })`. Read it inside a reactive\n   * scope (a `() => …` thunk in JSX, an `effect`, a `computed`).\n   */\n  const isActive = (name: string | Record<string, unknown>, attrs?: Record<string, unknown>): boolean => {\n    // Active-state depends on BOTH content (which marks/nodes exist) AND the\n    // selection (where the cursor sits) — subscribe to both counters.\n    docVersion()\n    selectionVersion()\n    // pyreon-lint-disable-next-line pyreon/no-peek-in-tracked\n    const e = view.peek()\n    if (!e) return false\n    return typeof name === 'string' ? e.isActive(name, attrs) : e.isActive(name)\n  }\n\n  const chain = (): ReturnType<Editor['chain']> | null => view.peek()?.chain() ?? null\n  const focus = (): void => {\n    view.peek()?.commands.focus()\n  }\n  const blur = (): void => {\n    view.peek()?.commands.blur()\n  }\n  const undo = (): void => {\n    view.peek()?.chain().undo().run()\n  }\n  const redo = (): void => {\n    view.peek()?.chain().redo().run()\n  }\n  const dispose = (): void => {\n    // Invalidate any in-flight `_mount` so a mount whose dynamic import is\n    // still loading won't create a live editor AFTER we've torn down.\n    mountToken++\n    const e = view.peek()\n    if (e) {\n      e.destroy()\n      view.set(null)\n    }\n  }\n\n  const _mount = async (parent: HTMLElement): Promise<void> => {\n    if (view.peek()) return // already mounted\n\n    // Claim this mount attempt. If `dispose()` (or a newer `_mount`) bumps the\n    // token while the dynamic imports below are in flight, we bail before\n    // creating the editor — no leaked ProseMirror view + contenteditable DOM.\n    const token = ++mountToken\n\n    try {\n      const { Editor } = await import('@tiptap/core')\n      const exts: AnyExtension[] = []\n      if (starterKit) {\n        const { StarterKit } = await import('@tiptap/starter-kit')\n        exts.push(StarterKit)\n      }\n      exts.push(...userExtensions)\n\n      // Superseded while loading (disposed / re-mounted) — abort cleanly.\n      if (token !== mountToken) return\n\n      const editor = new Editor({\n        element: parent,\n        extensions: exts,\n        // First mount: the config content (a string lives only in\n        // `pendingContent`). Re-mount: the live document from `baseJson`.\n        content: hasMountedOnce ? baseJson.peek() : pendingContent,\n        // honor a pre-mount `editable.set(false)` (config default otherwise).\n        editable: baseEditable.peek(),\n        autofocus,\n        // a11y: the contenteditable content area is a labeled multiline textbox.\n        editorProps: {\n          attributes: {\n            role: 'textbox',\n            'aria-multiline': 'true',\n            'aria-label': ariaLabel,\n          },\n        },\n        onUpdate: ({ editor: e }) => {\n          docVersion.update((v) => v + 1)\n          if (!applyingExternal) {\n            const next = e.getJSON()\n            baseJson.set(next)\n            onChange?.(next)\n          }\n        },\n        onSelectionUpdate: () => selectionVersion.update((v) => v + 1),\n        onFocus: () => focused.set(true),\n        onBlur: () => focused.set(false),\n      })\n\n      // Disposed during the synchronous `new Editor` (defensive) — destroy the\n      // just-created view rather than leaking it.\n      if (token !== mountToken) {\n        editor.destroy()\n        return\n      }\n\n      view.set(editor)\n      hasMountedOnce = true\n      // Normalize the signal to the editor's parsed doc (covers string content).\n      baseJson.set(editor.getJSON())\n      docVersion.update((v) => v + 1)\n    } catch (err) {\n      // Mount failed (broken extension set, throwing extension, failed import).\n      // Surface it instead of leaving an unhandled promise rejection: route to\n      // the user `onError`, else log a `[Pyreon]`-prefixed message in dev.\n      const error = err instanceof Error ? err : new Error(String(err))\n      if (onError) {\n        onError(error)\n      } else if (process.env.NODE_ENV !== 'production') {\n        // oxlint-disable-next-line no-console\n        console.error('[Pyreon] @pyreon/rich-text failed to mount the editor:', error)\n      }\n    }\n  }\n\n  return {\n    json,\n    html,\n    text,\n    isEmpty,\n    characterCount,\n    wordCount,\n    canUndo,\n    canRedo,\n    focused,\n    editable,\n    view,\n    isActive,\n    chain,\n    focus,\n    blur,\n    undo,\n    redo,\n    dispose,\n    _mount,\n  }\n}\n","import { cx, type VNodeChild } from '@pyreon/core'\nimport type { RichTextProps } from '../types'\n\n/**\n * Mount component for a {@link createRichTextEditor} instance. Creates the\n * TipTap editor inside a container `<div>` on render (lazy-loading the\n * engine). The instance is framework-independent — create it with\n * `createRichTextEditor`, mount it here.\n *\n * Lifecycle: like `@pyreon/code`'s `<CodeEditor>`, the editor instance is\n * **user-owned** — call `editor.dispose()` in your `onCleanup` /\n * `onUnmount` if the instance won't be reused (the component does not\n * auto-dispose, so the same instance can be re-mounted).\n *\n * @example\n * ```tsx\n * const editor = createRichTextEditor({ content: '<p>Hello</p>' })\n * <RichText instance={editor} style=\"min-height: 12rem\" />\n * ```\n */\nexport function RichText(props: RichTextProps): VNodeChild {\n  const { instance } = props\n\n  const containerRef = (el: Element | null): void => {\n    if (!el) return\n    void instance._mount(el as HTMLElement)\n  }\n\n  return (\n    <div ref={containerRef} class={cx(['pyreon-rich-text', props.class])} style={props.style ?? ''} />\n  )\n}\n","import { effect } from '@pyreon/reactivity'\nimport type { JSONContent, RichTextEditor } from './types'\n\n/**\n * A signal-shaped binding source — a real Pyreon `Signal<T>` or any object\n * exposing the same `() => T` reader + `set(value)` writer (+ optional `peek`).\n */\nexport interface SignalLike<T> {\n  (): T\n  set: (value: T) => void\n  peek?: () => T\n}\n\nexport interface BindRichTextToSignalOptions<T> {\n  /** Editor instance to bind. */\n  editor: RichTextEditor\n  /** External state to mirror (a `Signal` or `SignalLike`). */\n  signal: SignalLike<T>\n  /**\n   * Serialization the external signal holds:\n   * - `'json'` (default) — `T` is `JSONContent` (the ProseMirror document).\n   * - `'html'` — `T` is an HTML `string`.\n   */\n  format?: 'json' | 'html'\n  /** Called if applying a value to the editor (or reading it back) throws. */\n  onError?: (error: Error) => void\n}\n\nexport interface RichTextBinding {\n  /** Stop the binding (disposes both directions). Call from `onCleanup`. */\n  dispose: () => void\n}\n\n/**\n * Two-way bind a Pyreon `Signal` to a rich-text editor's content, with\n * built-in loop prevention — the editor mirror of `@pyreon/code`'s\n * `bindEditorToSignal`. Use `format: 'json'` to persist/restore the\n * structured document, or `format: 'html'` for an HTML string.\n *\n * @example\n * ```ts\n * const draft = signal<JSONContent>({ type: 'doc', content: [] })\n * const editor = createRichTextEditor()\n * const binding = bindRichTextToSignal({ editor, signal: draft })\n * onCleanup(() => binding.dispose())\n * ```\n */\nexport function bindRichTextToSignal<T = JSONContent>(\n  options: BindRichTextToSignalOptions<T>,\n): RichTextBinding {\n  const { editor, signal, format = 'json', onError } = options\n\n  // Two flags break the echo race: each direction bails if the opposite\n  // write is already in flight (same shape as `bindEditorToSignal`).\n  let applyingFromSignal = false\n  let applyingFromEditor = false\n\n  // External → editor.\n  const signalToEditor = effect(() => {\n    const value = signal()\n    if (applyingFromEditor) return\n    applyingFromSignal = true\n    try {\n      if (format === 'html') {\n        // pyreon-lint-disable-next-line pyreon/no-peek-in-tracked\n        const e = editor.view.peek()\n        if (e && (value as string) !== e.getHTML()) {\n          e.commands.setContent(value as string)\n        }\n      } else {\n        // pyreon-lint-disable-next-line pyreon/no-peek-in-tracked\n        if (JSON.stringify(value) !== JSON.stringify(editor.json.peek())) {\n          editor.json.set(value as unknown as JSONContent)\n        }\n      }\n    } catch (err) {\n      onError?.(err as Error)\n    } finally {\n      applyingFromSignal = false\n    }\n  })\n\n  // Editor → external.\n  const editorToSignal = effect(() => {\n    const out = format === 'html' ? editor.html() : editor.json()\n    /* v8 ignore next — defensive loop guard. The external→editor sync path\n       sets applyingFromSignal then resets it inside the same synchronous\n       block; Pyreon defers a cross-effect re-run past that block (the flag is\n       already false when this effect re-runs), so the bail is unreachable\n       under the current scheduler but kept to match @pyreon/code's guard. */\n    if (applyingFromSignal) return\n    applyingFromEditor = true\n    try {\n      signal.set(out as unknown as T)\n    } catch (err) {\n      onError?.(err as Error)\n    } finally {\n      applyingFromEditor = false\n    }\n  })\n\n  return {\n    dispose: () => {\n      signalToEditor.dispose()\n      editorToSignal.dispose()\n    },\n  }\n}\n","/**\n * @pyreon/rich-text — Reactive WYSIWYG rich-text editor for Pyreon.\n *\n * A thin signal-backed layer over TipTap (the MIT, framework-agnostic\n * headless editor framework built on ProseMirror) — the same adapter\n * shape as `@pyreon/code` (CodeMirror) and `@pyreon/charts` (ECharts).\n * The document state is exposed as signals; the TipTap engine is\n * lazy-loaded on mount so `@tiptap/*` stays out of the initial bundle.\n *\n * @example\n * ```tsx\n * import { createRichTextEditor, RichText, bindRichTextToSignal } from '@pyreon/rich-text'\n * import { signal } from '@pyreon/reactivity'\n *\n * const editor = createRichTextEditor({ content: '<p>Hello</p>' })\n *\n * editor.json()                       // reactive ProseMirror JSON\n * editor.json.set(draft)              // replace content (loop-safe)\n * editor.text()                       // reactive plain text\n * editor.chain()?.toggleBold().run()  // run a command\n *\n * <RichText instance={editor} style=\"min-height: 12rem\" />\n * ```\n */\n\nimport { name as __pkgName, version as __pkgVersion } from '../package.json' with { type: 'json' }\nimport { registerSingleton } from '@pyreon/reactivity'\n\n// Singleton sentinel — fail-loud detection of duplicate @pyreon/rich-text\n// instances in the same heap. Name + version derived from this package's own\n// package.json (single source of truth; the build inlines the literals).\nregisterSingleton(__pkgName, __pkgVersion, import.meta.url)\n\n// Core\nexport { createRichTextEditor } from './editor'\n// Mount component\nexport { RichText } from './components/rich-text'\n// Signal binding\nexport { bindRichTextToSignal } from './bind-signal'\nexport type {\n  BindRichTextToSignalOptions,\n  RichTextBinding,\n  SignalLike,\n} from './bind-signal'\n\n// Types\nexport type {\n  JSONContent,\n  RichTextConfig,\n  RichTextEditor,\n  RichTextProps,\n} from './types'\n"],"mappings":"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"}

package/lib/types/index.d.ts

@@ -0,0 +1,210 @@
+import { Computed, Signal } from "@pyreon/reactivity";
+import { AnyExtension, Editor, JSONContent, JSONContent as JSONContent$1 } from "@tiptap/core";
+import { VNodeChild } from "@pyreon/core";
+
+//#region src/types.d.ts
+/** Configuration for {@link createRichTextEditor}. */
+interface RichTextConfig {
+  /**
+   * Initial document. An HTML string (`'<p>Hi</p>'`) or ProseMirror JSON
+   * (`{ type: 'doc', content: [...] }`). Defaults to an empty document.
+   */
+  content?: string | JSONContent$1;
+  /** Whether the document is editable (default `true`). Read-only when `false`. */
+  editable?: boolean;
+  /**
+   * Accessible name for the editor. The content area is a `role="textbox"`,
+   * which has no name unless one is supplied — a screen reader otherwise
+   * announces just "edit text, multiline". Defaults to `"Rich text editor"`.
+   */
+  ariaLabel?: string;
+  /** Include the TipTap StarterKit (paragraph, headings, bold/italic, lists, …). Default `true`. */
+  starterKit?: boolean;
+  /** Extra TipTap extensions, appended after StarterKit. */
+  extensions?: AnyExtension[];
+  /** Autofocus the editor on mount (default `false`). */
+  autofocus?: boolean;
+  /** Called with the document JSON on every change. */
+  onChange?: (json: JSONContent$1) => void;
+  /**
+   * Called if mounting the TipTap engine fails — a broken extension set
+   * (e.g. `starterKit: false` with no schema-providing extension), a
+   * throwing custom extension, or a failed dynamic import of `@tiptap/*`.
+   * Without this, a mount failure surfaces only as an unhandled promise
+   * rejection (the editor silently never mounts). When provided it takes the
+   * error; otherwise a `[Pyreon]`-prefixed message is logged in development.
+   */
+  onError?: (error: Error) => void;
+}
+/**
+ * A reactive rich-text editor instance. Mirrors `@pyreon/code`'s
+ * `EditorInstance`: document state is signal-backed; the TipTap `Editor`
+ * is created on mount via the `<RichText>` component.
+ */
+interface RichTextEditor {
+  /**
+   * The document as ProseMirror JSON — a writable `Signal`. `editor.json()`
+   * reads reactively; `editor.json.set(next)` replaces the editor content
+   * (loop-safe). Before mount it holds the initial content.
+   */
+  json: Signal<JSONContent$1>;
+  /** Rendered HTML (computed; reads the live editor once mounted). */
+  html: Computed<string>;
+  /** Plain-text content (computed). Exact `getText()` once mounted. */
+  text: Computed<string>;
+  /**
+   * Whether the document has no text (computed). Derived from the document
+   * JSON, so it is accurate before mount / after dispose (a media-only doc
+   * reconciles on mount).
+   */
+  isEmpty: Computed<boolean>;
+  /**
+   * Visible character count (computed) — sums text-node lengths, excluding the
+   * `\n\n` block separators `getText()` inserts. Derived from the document JSON,
+   * so a stored-JSON draft has a real count before the (lazy) engine mounts.
+   */
+  characterCount: Computed<number>;
+  /**
+   * Whitespace-delimited word count (computed). Derived from the document JSON
+   * (block boundaries never merge words), so it works before mount.
+   */
+  wordCount: Computed<number>;
+  /** Whether an undo step is available (computed). */
+  canUndo: Computed<boolean>;
+  /** Whether a redo step is available (computed). */
+  canRedo: Computed<boolean>;
+  /** Focus state (reactive). */
+  focused: Signal<boolean>;
+  /**
+   * Whether the document is editable — a writable `Signal`. `editable()` reads
+   * reactively (e.g. to label a read-only toggle); `editable.set(false)` flips
+   * the live editor to read-only at runtime.
+   */
+  editable: Signal<boolean>;
+  /** The underlying TipTap `Editor`, or `null` until mounted. */
+  view: Signal<Editor | null>;
+  /**
+   * Whether a mark/node is active at the current selection — reactive (reads
+   * the transaction counter, so it re-derives on edits + selection moves).
+   * The toolbar primitive: `editor.isActive('bold')`,
+   * `editor.isActive('heading', { level: 2 })`. Call inside a reactive scope.
+   */
+  isActive: (name: string | Record<string, unknown>, attrs?: Record<string, unknown>) => boolean;
+  /**
+   * The TipTap command chain for the mounted editor, or `null` before mount.
+   * `editor.chain()?.toggleBold().run()`. The escape hatch for every command
+   * (toggleBold / toggleItalic / toggleHeading / toggleBulletList / …).
+   */
+  chain: () => ReturnType<Editor['chain']> | null;
+  /** Imperatively focus the editor (no-op before mount). */
+  focus: () => void;
+  /** Imperatively blur the editor (no-op before mount). */
+  blur: () => void;
+  /** Undo the last change (no-op before mount). */
+  undo: () => void;
+  /** Redo the last undone change (no-op before mount). */
+  redo: () => void;
+  /** Tear down the editor + its DOM. Call from `onCleanup` / `onUnmount`. */
+  dispose: () => void;
+  /** @internal — mount the editor into a container element (called by `<RichText>`). */
+  _mount: (parent: HTMLElement) => Promise<void>;
+}
+/** Props for the `<RichText>` mount component. */
+interface RichTextProps {
+  /** The instance from {@link createRichTextEditor}. */
+  instance: RichTextEditor;
+  /** Class for the container element. */
+  class?: string;
+  /** Inline style for the container element. */
+  style?: string;
+}
+//#endregion
+//#region src/editor.d.ts
+/**
+ * Create a reactive WYSIWYG rich-text editor instance.
+ *
+ * The document state (`json` / `html` / `text` / counts / undo-redo) is
+ * backed by signals; the TipTap `Editor` (over ProseMirror) is created
+ * lazily when the instance is mounted via `<RichText>` — so `@tiptap/*`
+ * stays out of the initial bundle (same lazy-load shape as
+ * `@pyreon/code`'s languages and `@pyreon/charts`' ECharts).
+ *
+ * @example
+ * ```tsx
+ * const editor = createRichTextEditor({ content: '<p>Hello</p>' })
+ *
+ * editor.json()                 // reactive ProseMirror JSON
+ * editor.json.set(draft)        // replace content (loop-safe)
+ * editor.text()                 // reactive plain text
+ * editor.chain()?.toggleBold().run()
+ *
+ * <RichText instance={editor} style="min-height: 12rem" />
+ * ```
+ */
+declare function createRichTextEditor(config?: RichTextConfig): RichTextEditor;
+//#endregion
+//#region src/components/rich-text.d.ts
+/**
+ * Mount component for a {@link createRichTextEditor} instance. Creates the
+ * TipTap editor inside a container `<div>` on render (lazy-loading the
+ * engine). The instance is framework-independent — create it with
+ * `createRichTextEditor`, mount it here.
+ *
+ * Lifecycle: like `@pyreon/code`'s `<CodeEditor>`, the editor instance is
+ * **user-owned** — call `editor.dispose()` in your `onCleanup` /
+ * `onUnmount` if the instance won't be reused (the component does not
+ * auto-dispose, so the same instance can be re-mounted).
+ *
+ * @example
+ * ```tsx
+ * const editor = createRichTextEditor({ content: '<p>Hello</p>' })
+ * <RichText instance={editor} style="min-height: 12rem" />
+ * ```
+ */
+declare function RichText(props: RichTextProps): VNodeChild;
+//#endregion
+//#region src/bind-signal.d.ts
+/**
+ * A signal-shaped binding source — a real Pyreon `Signal<T>` or any object
+ * exposing the same `() => T` reader + `set(value)` writer (+ optional `peek`).
+ */
+interface SignalLike<T> {
+  (): T;
+  set: (value: T) => void;
+  peek?: () => T;
+}
+interface BindRichTextToSignalOptions<T> {
+  /** Editor instance to bind. */
+  editor: RichTextEditor;
+  /** External state to mirror (a `Signal` or `SignalLike`). */
+  signal: SignalLike<T>;
+  /**
+   * Serialization the external signal holds:
+   * - `'json'` (default) — `T` is `JSONContent` (the ProseMirror document).
+   * - `'html'` — `T` is an HTML `string`.
+   */
+  format?: 'json' | 'html';
+  /** Called if applying a value to the editor (or reading it back) throws. */
+  onError?: (error: Error) => void;
+}
+interface RichTextBinding {
+  /** Stop the binding (disposes both directions). Call from `onCleanup`. */
+  dispose: () => void;
+}
+/**
+ * Two-way bind a Pyreon `Signal` to a rich-text editor's content, with
+ * built-in loop prevention — the editor mirror of `@pyreon/code`'s
+ * `bindEditorToSignal`. Use `format: 'json'` to persist/restore the
+ * structured document, or `format: 'html'` for an HTML string.
+ *
+ * @example
+ * ```ts
+ * const draft = signal<JSONContent>({ type: 'doc', content: [] })
+ * const editor = createRichTextEditor()
+ * const binding = bindRichTextToSignal({ editor, signal: draft })
+ * onCleanup(() => binding.dispose())
+ * ```
+ */
+declare function bindRichTextToSignal<T = JSONContent>(options: BindRichTextToSignalOptions<T>): RichTextBinding;
+//#endregion
+export { type BindRichTextToSignalOptions, type JSONContent, RichText, type RichTextBinding, type RichTextConfig, type RichTextEditor, type RichTextProps, type SignalLike, bindRichTextToSignal, createRichTextEditor };

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@pyreon/rich-text",
+  "version": "0.46.0",
+  "description": "Reactive WYSIWYG rich-text editor for Pyreon — signal-backed layer over TipTap (ProseMirror); collaboration composes with @pyreon/sync",
+  "license": "MIT",
+  "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/fundamentals/rich-text#readme",
+  "bugs": {
+    "url": "https://github.com/pyreon/pyreon/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pyreon/pyreon.git",
+    "directory": "packages/fundamentals/rich-text"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "types": "./lib/types/index.d.ts"
+    }
+  },
+  "files": [
+    "lib",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vl_rolldown_build",
+    "dev": "vl_rolldown_build-watch",
+    "test": "vitest run",
+    "test:browser": "vitest run --config ./vitest.browser.config.ts",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint ."
+  },
+  "peerDependencies": {
+    "@pyreon/core": "^0.46.0",
+    "@pyreon/reactivity": "^0.46.0",
+    "@pyreon/runtime-dom": "^0.46.0"
+  },
+  "dependencies": {
+    "@tiptap/core": "^3.27.1",
+    "@tiptap/pm": "^3.27.1",
+    "@tiptap/starter-kit": "^3.27.1"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.9.0",
+    "@pyreon/manifest": "0.13.2",
+    "@pyreon/test-utils": "^0.13.34",
+    "@pyreon/vitest-config": "0.13.3",
+    "@vitest/browser-playwright": "^4.1.8",
+    "@vitus-labs/tools-lint": "^2.6.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}