@domternal/core 0.3.0 → 0.4.0

package/README.md

@@ -3,12 +3,13 @@
 [![Version](https://img.shields.io/npm/v/@domternal/core.svg)](https://www.npmjs.com/package/@domternal/core)
 [![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/domternal/domternal/blob/main/LICENSE)
 
-A lightweight, extensible rich text editor toolkit built on <u>[ProseMirror](https://prosemirror.net/)</u>. Framework-agnostic headless core with first-class Angular support.  
-Use it headless with vanilla JS/TS, add the built-in toolbar and theme, or drop in ready-made Angular components. Fully tree-shakeable, import only what you use, unused extensions are stripped from your bundle.
+A lightweight, extensible rich text editor toolkit built on <u>[ProseMirror](https://prosemirror.net/)</u>. Framework-agnostic headless core with first-class Angular and React support.  
+Use it headless with vanilla JS/TS, add the built-in toolbar and theme, or drop in ready-made framework components. Fully tree-shakeable, import only what you use, unused extensions are stripped from your bundle.
 
 ## Links
 
-<u>[Website](https://domternal.dev)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[Documentation](https://domternal.dev/v1/introduction)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[StackBlitz (Vanilla TS)](https://stackblitz.com/edit/domternal-vanilla-full-example)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[StackBlitz (Angular)](https://stackblitz.com/edit/domternal-angular-full-example)</u>
+<u>[Website](https://domternal.dev)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[Documentation](https://domternal.dev/v1/introduction)</u>  
+<u>[StackBlitz (Angular)](https://stackblitz.com/edit/domternal-angular-full-example)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[StackBlitz (React)](https://stackblitz.com/edit/domternal-react-full-example)</u> &nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp; <u>[StackBlitz (Vanilla TS)](https://stackblitz.com/edit/domternal-vanilla-full-example)</u> 
 
 ## Features
 
@@ -16,13 +17,14 @@ See <u>[Packages & Bundle Size](https://domternal.dev/v1/packages)</u> for a ful
 
 - **Headless core** - use with any framework or vanilla JS/TS
 - **Angular components** - editor, toolbar, bubble menu, floating menu, emoji picker (signals, OnPush, zoneless-ready)
-- **57 extensions across 10 packages** - 23 nodes, 9 marks, and 25 behavior extensions
+- **React components** - composable `Domternal` component, toolbar, bubble menu, floating menu, emoji picker, custom node views (React 18+)
+- **57 extensions across 11 packages** - 23 nodes, 9 marks, and 25 behavior extensions
 - **140+ chainable commands** - `editor.chain().focus().toggleBold().run()`
 - **Full table support** - cell merging, column resize, row/column controls, cell toolbar, all free and MIT licensed
 - **Tree-shakeable** - import only what you use, your bundler strips the rest
 - **~38 KB gzipped** (own code), <u>[~108 KB total](https://domternal.dev/v1/packages)</u> with ProseMirror
 - **TypeScript first** - 100% typed, zero `any`
-- **4,400+ tests** - 2,687 unit tests and 1,796 E2E tests across 37 Playwright specs
+- **7,500+ tests** - 3,936 unit tests and 3,652 E2E tests across 76 Playwright specs
 - **Light and dark theme** - 70+ CSS custom properties for full visual control
 - **Inline styles export** - `getHTML({ styled: true })` produces inline CSS ready for email clients, CMS, and Google Docs
 - **SSR helpers** - `generateHTML`, `generateJSON`, `generateText` for server-side rendering

package/dist/index.cjs

@@ -708,8 +708,12 @@ var ExtensionManager = class {
     return items;
   }
   /**
-   * Collects node views from all Node extensions
-   * Returns a map of node name → NodeViewConstructor for EditorView
+   * Collects node views from all Node extensions.
+   * Returns a map of node name to NodeViewConstructor for EditorView.
+   *
+   * Each constructor is annotated with `__domternalContext` containing
+   * the editor and extension metadata so framework wrappers (React, Vue)
+   * can access them without changing the ProseMirror calling convention.
    */
   collectNodeViews() {
     const nodeViews = {};
@@ -723,6 +727,10 @@ var ExtensionManager = class {
           `${ext.name}.addNodeView`
         );
         if (nodeView) {
+          nodeView.__domternalContext = {
+            editor: this.editor,
+            extension: { name: nodeExt.name, options: nodeExt.options }
+          };
           nodeViews[ext.name] = nodeView;
         }
       }
@@ -7657,31 +7665,31 @@ var InvisibleChars = Extension.create({
 
 // src/extensions/TextColor.ts
 var DEFAULT_TEXT_COLORS = [
-  // Row 1 — Neutrals
+  // Row 1 - Neutrals
   "#000000",
   "#595959",
   "#a6a6a6",
   "#d9d9d9",
   "#ffffff",
-  // Row 2 — Pastel
+  // Row 2 - Pastel
   "#ffc9c9",
   "#fff3bf",
   "#b2f2bb",
   "#a5d8ff",
   "#d0bfff",
-  // Row 3 — Vivid
+  // Row 3 - Vivid
   "#e03131",
   "#f08c00",
   "#2f9e44",
   "#1971c2",
   "#7048e8",
-  // Row 4 — Medium
+  // Row 4 - Medium
   "#ff6b6b",
   "#ffd43b",
   "#69db7c",
   "#4dabf7",
   "#9775fa",
-  // Row 5 — Dark
+  // Row 5 - Dark
   "#c92a2a",
   "#e67700",
   "#2b8a3e",
@@ -7771,31 +7779,31 @@ var TextColor = Extension.create({
   }
 });
 var DEFAULT_HIGHLIGHT_COLORS = [
-  // Row 1 — Classic warm highlights
+  // Row 1 - Classic warm highlights
   "#fef08a",
   "#fde68a",
   "#fed7aa",
   "#fecaca",
   "#fbcfe8",
-  // Row 2 — Lighter warm pastels
+  // Row 2 - Lighter warm pastels
   "#fef9c3",
   "#fef3c7",
   "#ffedd5",
   "#fee2e2",
   "#fce7f3",
-  // Row 3 — Cool highlights
+  // Row 3 - Cool highlights
   "#a7f3d0",
   "#99f6e4",
   "#a5f3fc",
   "#bfdbfe",
   "#c4b5fd",
-  // Row 4 — Lighter cool pastels
+  // Row 4 - Lighter cool pastels
   "#d1fae5",
   "#ccfbf1",
   "#cffafe",
   "#dbeafe",
   "#ede9fe",
-  // Row 5 — Neutrals
+  // Row 5 - Neutrals
   "#e5e7eb",
   "#d1d5db",
   "#f3f4f6",