@domternal/core 0.4.1 → 0.5.1

package/dist/index.d.cts

@@ -240,6 +240,12 @@ interface EditorOptions {
      * @default true
      */
     editable?: boolean;
+    /**
+     * Accessible label for the editor.
+     * Sets aria-label on the contenteditable element.
+     * @default 'Rich text editor'
+     */
+    ariaLabel?: string;
     /**
      * Autofocus behavior on mount
      * @default false
@@ -5824,6 +5830,12 @@ interface StarterKitOptions {
      * Set to false to disable the LinkPopover extension, or pass options to configure it.
      */
     linkPopover?: false | Partial<LinkPopoverOptions>;
+    /**
+     * Set to false to disable the SelectionDecoration extension.
+     * When enabled, the editor collapses range selections on blur to prevent
+     * ghost selections from lingering after clicking outside the editor.
+     */
+    selectionDecoration?: false;
 }
 declare const StarterKit: Extension<StarterKitOptions, unknown>;
 

package/dist/index.js

@@ -3602,6 +3602,11 @@ var Editor = class extends EventEmitter {
    */
   setEditable(editable) {
     this.options.editable = editable;
+    if (editable) {
+      this.view.dom.removeAttribute("aria-readonly");
+    } else {
+      this.view.dom.setAttribute("aria-readonly", "true");
+    }
     this.view.dispatch(this.state.tr);
     return this;
   }
@@ -3733,6 +3738,12 @@ var Editor = class extends EventEmitter {
       state,
       dispatchTransaction: this.dispatchTransaction.bind(this),
       editable: () => this.options.editable ?? true,
+      attributes: () => ({
+        role: "textbox",
+        "aria-multiline": "true",
+        "aria-label": this.options.ariaLabel ?? "Rich text editor",
+        ...this.options.editable ?? true ? {} : { "aria-readonly": "true" }
+      }),
       ...Object.keys(nodeViews).length > 0 ? { nodeViews } : {},
       // Clipboard transform — apply user-provided transform (e.g. inlineStyles) on copy/cut
       ...this.options.clipboardHTMLTransform ? this.buildClipboardSerializer(this.options.clipboardHTMLTransform, this._extensionManager.schema) : {},
@@ -5415,7 +5426,8 @@ var TaskItem = Node.create({
           "input",
           {
             type: "checkbox",
-            checked: node.attrs["checked"] ? "checked" : null
+            checked: node.attrs["checked"] ? "checked" : null,
+            "aria-label": "Task status"
           }
         ]
       ],
@@ -7457,7 +7469,7 @@ var SelectionDecoration = Extension.create(
             handleDOMEvents: {
               blur(view, event) {
                 const related = event.relatedTarget;
-                if (related instanceof HTMLElement && related.closest("[data-dm-editor-ui]")) {
+                if (related instanceof HTMLElement && (related.closest("[data-dm-editor-ui]") || related.closest(".dm-toolbar") || related.closest(".dm-bubble-menu"))) {
                   return false;
                 }
                 const { from, to } = view.state.selection;
@@ -8152,6 +8164,7 @@ function linkPopoverPlugin({ editor, markType, protocols }) {
   input.type = "url";
   input.placeholder = "Enter URL...";
   input.className = "dm-link-popover-input";
+  input.setAttribute("aria-label", "URL");
   const applyBtn = document.createElement("button");
   applyBtn.type = "button";
   applyBtn.className = "dm-link-popover-btn dm-link-popover-apply";
@@ -8670,6 +8683,10 @@ function createFloatingMenuPlugin(options) {
     shouldShow = defaultShouldShow2,
     offset: offset2 = 0
   } = options;
+  if (!element.getAttribute("role")) {
+    element.setAttribute("role", "toolbar");
+    element.setAttribute("aria-label", "Floating menu");
+  }
   let cleanupFloating = null;
   const updatePosition = (view) => {
     const { selection } = view.state;
@@ -8813,6 +8830,7 @@ var StarterKit = Extension.create({
     maybeAdd(TrailingNode, this.options.trailingNode);
     maybeAdd(ListKeymap, this.options.listKeymap);
     maybeAdd(LinkPopover, this.options.linkPopover);
+    maybeAdd(SelectionDecoration, this.options.selectionDecoration);
     return extensions;
   }
 });