@richscripts/richtexteditor 2.5.4 → 2.6.0

package/README.md

@@ -17,8 +17,11 @@ A full collaborative-document workspace, not just a textarea replacement:
 - **Dictation** — Web Speech API integration (`editor.dictation.toggle()`) with multi-language support.
 - **DOCX import + export** — import Word documents through `editor.aiToolkit.importDocx({ file?, mode? })` and generate deterministic HTML → .docx via `editor.aiToolkit.exportDocx({ filename })`; preserves headings, lists, tables, images.
 - **Structured content bridge** — `editor.getJSON()` / `setJSON()`, `fromMarkdown()` / `toMarkdown()`, `renderHTML()`, `validateStructuredContent()` — for SSR, JSON storage, and Markdown round-trip. The packaged schema now preserves merge fields, ordered-list marker styles (`A` / `a` / `I` / `i`), table-of-contents blocks, footnotes, and editor page breaks instead of collapsing them into opaque HTML.
-- **Accessibility audit helper** — `RichTextEditor.auditAccessibility()` / `auditAccessibility()` catches empty headings, skipped heading levels, missing image alt text, and tables without header cells in browser or Node workflows.
-- **In-editor accessibility repair panel** — the packaged `accessibilitychecker` plugin adds a side panel (`editor.accessibilityChecker.open/close/toggle/run/repair`) with focused fixes for missing image alt text, empty headings, skipped heading levels, and headerless tables. Use `accessibilityCheckerAutoOpen` to keep the workflow visible during review passes.
+- **Accessibility audit helper** — `RichTextEditor.auditAccessibility()` / `auditAccessibility()` catches empty headings, skipped heading levels, missing image alt text, and tables without header cells in browser or Node workflows. Tables marked `role="presentation"` are exempt from the header rule and checked for the opposite fault instead — data-table markup on a layout table.
+- **In-editor accessibility repair panel** — the packaged `accessibilitychecker` plugin adds a side panel (`editor.accessibilityChecker.open/close/toggle/run/repair`) with focused fixes for missing image alt text, empty headings, skipped heading levels, headerless tables, unmarked language runs, and layout tables that still carry header cells. Use `accessibilityCheckerAutoOpen` to keep the workflow visible during review passes.
+- **Layout tables** *(new in 2.6)* &mdash; a `<table>` that only positions content is not a data table, and marking it as one makes a screen reader announce relationships that do not exist. `editor.setTableLayoutMode("layout")` writes `role="presentation"` and strips `<th>` / `scope` / `<caption>`; `insertLayoutTable(rows, cols)` starts one for an email or signature layout. Nested data tables keep their headers.
+- **Crash recovery** *(new in 2.6)* &mdash; `richtexteditor/rte-watchdog.js` snapshots the document, notices when the editing surface has actually died, recreates the instance and restores the text. It ignores errors from unrelated page code, and stops after repeated crashes instead of looping &mdash; `crashedPermanently` hands you the last good snapshot.
+- **Shadow DOM** *(new in 2.6)* &mdash; the packaged `shadowdom` plugin copies the editor's own stylesheets into the shadow root that contains it. Without it the editor edits correctly and renders completely unstyled there, because no document stylesheet crosses a shadow boundary.
 - **Restricted editing templates** &mdash; the packaged `restrictedediting` plugin lets apps lock the document root while keeping marked islands editable (`editor.restrictedEditing.enable/disable/toggle/list/goToNext/goToPrevious`). Mark reusable fields with `data-rte-editable` in template HTML or call `editor.restrictedEditing.markSelection({ label })` while authoring.
 - **Document outline + TOC helpers** &mdash; `RichTextEditor.getDocumentOutline()` / `getDocumentOutline()` extracts a flat heading outline (`id`, `text`, `level`, `path`), while `getTableOfContents()` returns a nested tree and `syncTableOfContents()` repopulates packaged TOC blocks from live headings.
   The same TOC helpers can also persist TinyMCE-style display settings such as `ordered`, `orderedListType`, and `includeTitle` for numbered or titleless navigation blocks.
@@ -340,6 +343,30 @@ code &mdash; keep it in a component that renders in the browser.
 
 Options: `value`, `config`, `assetBasePath`, `onReady`, `onUpdate`, `onChange`, `onError`.
 
+## Web component
+
+For pages that use none of the framework bindings above &mdash; Rails, Laravel, Blazor, Django,
+htmx, plain HTML.
+
+```html
+<script src="richtexteditor/rte-config.js"></script>
+<script src="richtexteditor/rte.js"></script>
+<script src="richtexteditor/rte-webcomponent.js"></script>
+
+<form method="post">
+  <rich-text-editor name="body" value="<p>Hello</p>"></rich-text-editor>
+  <button>Save</button>
+</form>
+```
+
+That form posts `body=...` with no glue code. The element is form-associated, so `form.reset()`,
+`required` and `form.elements.body` behave the way they do for a `<textarea>`.
+
+Attributes: `value`, `name`, `toolbar`, `height`, `width`, `readonly`, `disabled`, `required`,
+`shadow`, `config` (JSON). Properties: `.value`, `.editor`, `.ready` (a Promise). Events: `input`,
+`change`. It renders in the light DOM by default; `shadow` opts into encapsulation and relies on
+the `shadowdom` plugin for styling.
+
 ## Headless (bring your own UI)
 
 `@richscripts/richtexteditor/headless` is the same core the Svelte action uses, available directly

package/package.json

@@ -1,142 +1,142 @@
-{
-  "name": "@richscripts/richtexteditor",
-  "publishConfig": {
-    "access": "public"
-  },
-  "version": "2.5.4",
-  "description": "A full-featured JavaScript rich text editor (WYSIWYG) with toolbar, plugins, i18n support, a built-in AI Toolkit (Ask AI, AI Chat, AI Review drawer, BYOK resolver), structured content APIs (JSON/Markdown), and an optional collaboration / review stack: slash commands, @mentions, human-author Track Changes, threaded comments, revision history, and Yjs-backed presence. Ships first-class React, Vue, Angular and Svelte bindings, a headless \"bring your own UI\" core, and server-safe conversion helpers.",
-  "main": "./richtexteditor/rte.js",
-  "bin": {
-    "rte-migration-report": "./migration/cli.js"
-  },
-  "scripts": {
-    "test:server": "node tests/run-all.test.js",
-    "test:admin": "node tests/run-all.test.js",
-    "test": "node tests/run-all.test.js",
-    "smoke:pack": "node tests/smoke-pack.js",
-    "artifact:migration": "node scripts/build-migration-fidelity-artifact.js",
-    "artifact:migration:runtime": "npm --prefix vendor-runtime-tests ci && npm --prefix vendor-runtime-tests run generate && node scripts/build-migration-fidelity-artifact.js",
-    "guard:protected": "node tests/guard-protected-bundle.js",
-    "prepublishOnly": "node tests/guard-protected-bundle.js"
-  },
-  "types": "./index.d.ts",
-  "style": "./richtexteditor/rte_theme_default.css",
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./richtexteditor/rte.js"
-    },
-    "./angular": {
-      "types": "./angular/index.d.ts",
-      "default": "./angular/index.ts"
-    },
-    "./react": {
-      "types": "./react/index.d.ts",
-      "default": "./react/index.js"
-    },
-    "./vue": {
-      "types": "./vue/index.d.ts",
-      "default": "./vue/index.js"
-    },
-    "./svelte": {
-      "types": "./svelte/index.d.ts",
-      "default": "./svelte/index.js"
-    },
-    "./headless": {
-      "types": "./headless/index.d.ts",
-      "default": "./headless/index.js"
-    },
-    "./migration": {
-      "types": "./migration/index.d.ts",
-      "default": "./migration/index.js"
-    },
-    "./server": {
-      "types": "./server/index.d.ts",
-      "default": "./server/index.js"
-    },
-    "./admin": {
-      "types": "./admin/index.d.ts",
-      "default": "./admin/index.js"
-    },
-    "./integrations/shared": {
-      "types": "./integrations/shared.d.ts",
-      "default": "./integrations/shared.js"
-    },
-    "./richtexteditor/*": "./richtexteditor/*",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "angular",
-    "admin",
-    "headless",
-    "index.d.ts",
-    "integrations",
-    "migration",
-    "react",
-    "richtexteditor",
-    "server",
-    "svelte",
-    "vue"
-  ],
-  "peerDependencies": {
-    "react": ">=18",
-    "svelte": ">=3",
-    "vue": ">=3"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "svelte": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
-    }
-  },
-  "keywords": [
-    "rich-text-editor",
-    "wysiwyg",
-    "editor",
-    "html-editor",
-    "structured-content",
-    "json",
-    "markdown",
-    "react",
-    "vue",
-    "angular",
-    "svelte",
-    "headless",
-    "use-editor",
-    "ssr",
-    "server-rendering",
-    "text-editor",
-    "contenteditable",
-    "toolbar",
-    "formatting",
-    "image-editor",
-    "pdf-export",
-    "i18n",
-    "plugins",
-    "javascript",
-    "vanilla-js",
-    "no-dependencies",
-    "slash-commands",
-    "mentions",
-    "track-changes",
-    "comments",
-    "revision-history",
-    "collaboration",
-    "yjs",
-    "crdt",
-    "ai-toolkit",
-    "ai-editor"
-  ],
-  "author": "CuteSoft Components Inc.",
-  "license": "SEE LICENSE IN http://richtexteditor.com/license.aspx",
-  "homepage": "https://richtexteditor.com",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/richtexteditor/richtexteditor.git"
-  }
-}
+{
+  "name": "@richscripts/richtexteditor",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "2.6.0",
+  "description": "A full-featured JavaScript rich text editor (WYSIWYG) with toolbar, plugins, i18n support, a built-in AI Toolkit (Ask AI, AI Chat, AI Review drawer, BYOK resolver), structured content APIs (JSON/Markdown), and an optional collaboration / review stack: slash commands, @mentions, human-author Track Changes, threaded comments, revision history, and Yjs-backed presence. Ships first-class React, Vue, Angular and Svelte bindings, a headless \"bring your own UI\" core, and server-safe conversion helpers.",
+  "main": "./richtexteditor/rte.js",
+  "bin": {
+    "rte-migration-report": "./migration/cli.js"
+  },
+  "scripts": {
+    "test:server": "node tests/run-all.test.js",
+    "test:admin": "node tests/run-all.test.js",
+    "test": "node tests/run-all.test.js",
+    "smoke:pack": "node tests/smoke-pack.js",
+    "artifact:migration": "node scripts/build-migration-fidelity-artifact.js",
+    "artifact:migration:runtime": "npm --prefix vendor-runtime-tests ci && npm --prefix vendor-runtime-tests run generate && node scripts/build-migration-fidelity-artifact.js",
+    "guard:protected": "node tests/guard-protected-bundle.js",
+    "prepublishOnly": "node tests/guard-protected-bundle.js"
+  },
+  "types": "./index.d.ts",
+  "style": "./richtexteditor/rte_theme_default.css",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./richtexteditor/rte.js"
+    },
+    "./angular": {
+      "types": "./angular/index.d.ts",
+      "default": "./angular/index.ts"
+    },
+    "./react": {
+      "types": "./react/index.d.ts",
+      "default": "./react/index.js"
+    },
+    "./vue": {
+      "types": "./vue/index.d.ts",
+      "default": "./vue/index.js"
+    },
+    "./svelte": {
+      "types": "./svelte/index.d.ts",
+      "default": "./svelte/index.js"
+    },
+    "./headless": {
+      "types": "./headless/index.d.ts",
+      "default": "./headless/index.js"
+    },
+    "./migration": {
+      "types": "./migration/index.d.ts",
+      "default": "./migration/index.js"
+    },
+    "./server": {
+      "types": "./server/index.d.ts",
+      "default": "./server/index.js"
+    },
+    "./admin": {
+      "types": "./admin/index.d.ts",
+      "default": "./admin/index.js"
+    },
+    "./integrations/shared": {
+      "types": "./integrations/shared.d.ts",
+      "default": "./integrations/shared.js"
+    },
+    "./richtexteditor/*": "./richtexteditor/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "angular",
+    "admin",
+    "headless",
+    "index.d.ts",
+    "integrations",
+    "migration",
+    "react",
+    "richtexteditor",
+    "server",
+    "svelte",
+    "vue"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "svelte": ">=3",
+    "vue": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "rich-text-editor",
+    "wysiwyg",
+    "editor",
+    "html-editor",
+    "structured-content",
+    "json",
+    "markdown",
+    "react",
+    "vue",
+    "angular",
+    "svelte",
+    "headless",
+    "use-editor",
+    "ssr",
+    "server-rendering",
+    "text-editor",
+    "contenteditable",
+    "toolbar",
+    "formatting",
+    "image-editor",
+    "pdf-export",
+    "i18n",
+    "plugins",
+    "javascript",
+    "vanilla-js",
+    "no-dependencies",
+    "slash-commands",
+    "mentions",
+    "track-changes",
+    "comments",
+    "revision-history",
+    "collaboration",
+    "yjs",
+    "crdt",
+    "ai-toolkit",
+    "ai-editor"
+  ],
+  "author": "CuteSoft Components Inc.",
+  "license": "SEE LICENSE IN http://richtexteditor.com/license.aspx",
+  "homepage": "https://richtexteditor.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richtexteditor/richtexteditor.git"
+  }
+}