@domternal/react 0.4.1 → 0.5.1

package/dist/index.js

@@ -465,6 +465,20 @@ function useKeyboardNav(controllerRef, toolbarRef, closeDropdown) {
     const buttons = toolbarRef.current?.querySelectorAll(".dm-toolbar-button");
     buttons?.[idx]?.focus();
   }, []);
+  const focusDropdownItem = useCallback((direction, first) => {
+    const panel = toolbarRef.current?.querySelector(".dm-toolbar-dropdown-panel");
+    if (!panel) return;
+    const items = Array.from(panel.querySelectorAll('[role="menuitem"]'));
+    if (!items.length) return;
+    if (first) {
+      items[0]?.focus();
+      return;
+    }
+    const current = document.activeElement;
+    const idx = items.indexOf(current);
+    const next = idx === -1 ? direction > 0 ? 0 : items.length - 1 : (idx + direction + items.length) % items.length;
+    items[next]?.focus();
+  }, []);
   const onKeyDown = useCallback((event) => {
     const controller = controllerRef.current;
     if (!controller) return;
@@ -479,6 +493,26 @@ function useKeyboardNav(controllerRef, toolbarRef, closeDropdown) {
         controller.navigatePrev();
         focusCurrentButton();
         break;
+      case "ArrowDown": {
+        event.preventDefault();
+        if (controller.openDropdown) {
+          focusDropdownItem(1);
+        } else {
+          const btn = document.activeElement;
+          if (btn?.getAttribute("aria-haspopup") && btn.closest(".dm-toolbar")) {
+            btn.click();
+            requestAnimationFrame(() => focusDropdownItem(0, true));
+          }
+        }
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        if (controller.openDropdown) {
+          focusDropdownItem(-1);
+        }
+        break;
+      }
       case "Home":
         event.preventDefault();
         controller.navigateFirst();
@@ -497,7 +531,7 @@ function useKeyboardNav(controllerRef, toolbarRef, closeDropdown) {
         }
         break;
     }
-  }, [closeDropdown, focusCurrentButton]);
+  }, [closeDropdown, focusCurrentButton, focusDropdownItem]);
   return { onKeyDown, focusCurrentButton };
 }
 
@@ -573,6 +607,7 @@ function ToolbarDropdownPanel({
               type: "button",
               className: `dm-color-swatch${isActive(sub.name) ? " dm-color-swatch--active" : ""}`,
               role: "menuitem",
+              tabIndex: -1,
               "aria-label": sub.label,
               title: sub.label,
               style: { backgroundColor: sub.color },
@@ -586,6 +621,7 @@ function ToolbarDropdownPanel({
               type: "button",
               className: "dm-color-palette-reset",
               role: "menuitem",
+              tabIndex: -1,
               "aria-label": sub.label,
               dangerouslySetInnerHTML: { __html: getCachedItemContent(sub.icon, sub.label) },
               onMouseDown: (e) => e.preventDefault(),
@@ -609,6 +645,7 @@ function ToolbarDropdownPanel({
           type: "button",
           className: `dm-toolbar-dropdown-item${isActive(sub.name) ? " dm-toolbar-dropdown-item--active" : ""}`,
           role: "menuitem",
+          tabIndex: -1,
           "aria-label": sub.label,
           ref: (el) => {
             if (el && sub.style) el.setAttribute("style", sub.style);
@@ -700,6 +737,7 @@ function DomternalToolbar({ editor: editorProp, icons, layout }) {
       return;
     }
     controllerRef.current?.executeCommand(item);
+    requestAnimationFrame(() => editor.view.focus());
   }, [editor, closeDropdown]);
   const onDropdownItemClick = useCallback((item, event) => {
     if (!editor) return;
@@ -714,6 +752,7 @@ function DomternalToolbar({ editor: editorProp, icons, layout }) {
     } else {
       controllerRef.current?.executeCommand(item);
     }
+    requestAnimationFrame(() => editor.view.focus());
   }, [editor, closeDropdown]);
   const onButtonFocus = useCallback((name) => {
     const index = controllerRef.current?.getFlatIndex(name) ?? -1;
@@ -729,6 +768,7 @@ function DomternalToolbar({ editor: editorProp, icons, layout }) {
       className: "dm-toolbar",
       role: "toolbar",
       "aria-label": "Editor formatting",
+      "data-dm-editor-ui": "",
       onKeyDown,
       children: groups.map((group, gi) => /* @__PURE__ */ jsxs(Fragment, { children: [
         gi > 0 && /* @__PURE__ */ jsx("div", { className: "dm-toolbar-separator", role: "separator" }),
@@ -1269,7 +1309,13 @@ function useEmojiPicker(editor, emojis) {
       if (!grid) return;
       const label = grid.querySelector(`[data-category="${cat}"]`);
       if (label) {
-        grid.scrollTo({ top: label.offsetTop - grid.offsetTop, behavior: "smooth" });
+        grid.scrollTo({ top: label.offsetTop - grid.offsetTop });
+        setTimeout(() => {
+          const firstSwatch = label.nextElementSibling;
+          if (firstSwatch instanceof HTMLElement && firstSwatch.classList.contains("dm-emoji-swatch")) {
+            firstSwatch.focus();
+          }
+        }, 50);
       }
     });
   }, []);
@@ -1354,6 +1400,48 @@ function DomternalEmojiPicker({ editor: editorProp, emojis }) {
     close,
     categories
   } = useEmojiPicker(editor, emojis);
+  const onGridKeyDown = useCallback((event) => {
+    const grid = event.currentTarget;
+    const swatches = Array.from(grid.querySelectorAll(".dm-emoji-swatch"));
+    if (!swatches.length) return;
+    const current = document.activeElement;
+    let idx = swatches.indexOf(current);
+    if (idx === -1) {
+      if (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(event.key)) {
+        event.preventDefault();
+        swatches[0]?.focus();
+      }
+      return;
+    }
+    const cols = 8;
+    let next = idx;
+    switch (event.key) {
+      case "ArrowRight":
+        event.preventDefault();
+        next = Math.min(idx + 1, swatches.length - 1);
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        next = Math.max(idx - 1, 0);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        next = Math.min(idx + cols, swatches.length - 1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        next = Math.max(idx - cols, 0);
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        swatches[idx]?.click();
+        return;
+      default:
+        return;
+    }
+    swatches[next]?.focus();
+  }, []);
   if (!isOpen) return /* @__PURE__ */ jsx("div", { ref: pickerRef, className: "dm-emoji-picker-host" });
   return /* @__PURE__ */ jsx("div", { ref: pickerRef, className: "dm-emoji-picker-host", children: /* @__PURE__ */ jsxs("div", { className: "dm-emoji-picker", children: [
     /* @__PURE__ */ jsx("div", { className: "dm-emoji-picker-search", children: /* @__PURE__ */ jsx(
@@ -1361,6 +1449,7 @@ function DomternalEmojiPicker({ editor: editorProp, emojis }) {
       {
         type: "text",
         placeholder: "Search emoji...",
+        "aria-label": "Search emoji",
         value: searchQuery,
         onChange: onSearch,
         onKeyDown: (e) => {
@@ -1373,6 +1462,8 @@ function DomternalEmojiPicker({ editor: editorProp, emojis }) {
       {
         type: "button",
         className: `dm-emoji-picker-tab${activeCategory === cat ? " dm-emoji-picker-tab--active" : ""}`,
+        role: "tab",
+        "aria-selected": activeCategory === cat,
         title: cat,
         "aria-label": cat,
         onMouseDown: (e) => e.preventDefault(),
@@ -1381,11 +1472,12 @@ function DomternalEmojiPicker({ editor: editorProp, emojis }) {
       },
       cat
     )) }),
-    /* @__PURE__ */ jsx("div", { className: "dm-emoji-picker-grid", onScroll: onGridScroll, children: searchQuery ? /* @__PURE__ */ jsx(Fragment$1, { children: filteredEmojis.length > 0 ? filteredEmojis.map((item) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "dm-emoji-picker-grid", onScroll: onGridScroll, onKeyDown: onGridKeyDown, children: searchQuery ? /* @__PURE__ */ jsx(Fragment$1, { children: filteredEmojis.length > 0 ? filteredEmojis.map((item) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         className: "dm-emoji-swatch",
+        tabIndex: -1,
         title: formatName(item.name),
         "aria-label": formatName(item.name),
         onMouseDown: (e) => e.preventDefault(),
@@ -1401,6 +1493,7 @@ function DomternalEmojiPicker({ editor: editorProp, emojis }) {
           {
             type: "button",
             className: "dm-emoji-swatch",
+            tabIndex: -1,
             title: formatName(item.name),
             "aria-label": formatName(item.name),
             onMouseDown: (e) => e.preventDefault(),
@@ -1417,6 +1510,7 @@ function DomternalEmojiPicker({ editor: editorProp, emojis }) {
           {
             type: "button",
             className: "dm-emoji-swatch",
+            tabIndex: -1,
             title: formatName(item.name),
             "aria-label": formatName(item.name),
             onMouseDown: (e) => e.preventDefault(),
@@ -1445,7 +1539,7 @@ function DomternalContent({ className }) {
     }
   }, [editor]);
   const classes = className ? `dm-editor ${className}` : "dm-editor";
-  return /* @__PURE__ */ jsx("div", { className: classes, children: /* @__PURE__ */ jsx("div", { ref: containerRef }) });
+  return /* @__PURE__ */ jsx("div", { className: classes, "data-dm-editor-ui": "", children: /* @__PURE__ */ jsx("div", { ref: containerRef }) });
 }
 function DomternalLoading({ children }) {
   const { editor } = useCurrentEditor();
@@ -1534,7 +1628,7 @@ var DomternalEditor = forwardRef(
     const classes = className ? `dm-editor ${className}` : "dm-editor";
     return /* @__PURE__ */ jsxs(EditorProvider, { editor, children: [
       children,
-      /* @__PURE__ */ jsx("div", { className: classes, children: /* @__PURE__ */ jsx("div", { ref: editorRef }) })
+      /* @__PURE__ */ jsx("div", { className: classes, "data-dm-editor-ui": "", children: /* @__PURE__ */ jsx("div", { ref: editorRef }) })
     ] });
   }
 );