@harbour-enterprises/superdoc 0.13.0-RC2 → 0.13.0-next.0

package/dist/super-editor/super-editor.es.js

@@ -9,14 +9,14 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var _SuperToolbar_instances, initToolbarGroups_fn, _interceptedCommands, makeToolbarItems_fn, initDefaultFonts_fn, updateHighlightColors_fn, deactivateAll_fn, updateToolbarHistory_fn, runCommandWithArgumentOnly_fn;
-import { _ as _export_sfc, u as useHighContrastMode, a as getQuickFormatList, b as generateLinkedStyleString, I as ImagePlaceholderPluginKey, f as findPlaceholder, c as findParentNode, d as getActiveFormatting, i as isInTable, e as undoDepth, r as redoDepth, E as Editor, h as getStarterExtensions, P as Placeholder, j as getRichTextExtensions, M as Mark, k as Extension, A as Attribute, N as Node } from "./chunks/editor-DfrK7LO9.js";
-import { o, C, T, m, p, l, n } from "./chunks/editor-DfrK7LO9.js";
-import { a7 as getDefaultExportFromCjs, E as v4, aa as vClickOutside, T as TextSelection, a as Plugin } from "./chunks/converter-DdMoUfYl.js";
-import { O } from "./chunks/converter-DdMoUfYl.js";
-import { ref, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, getCurrentInstance, computed, watch, onMounted, createCommentVNode, withDirectives, withKeys, withModifiers, vModelText, createTextVNode, toDisplayString, Fragment, renderList, normalizeStyle, createVNode, h, createApp, reactive, onUnmounted, shallowRef, onBeforeUnmount, createBlock } from "vue";
-import { t as toolbarIcons, s as sanitizeNumber, T as Toolbar, N as NSkeleton } from "./chunks/toolbar-h35AzYvu.js";
+import { a2 as getDefaultExportFromCjs, E as v4, a5 as vClickOutside, T as TextSelection, a as Plugin } from "./chunks/converter-Bwa99qcs.js";
+import { O } from "./chunks/converter-Bwa99qcs.js";
+import { _ as _export_sfc, u as useHighContrastMode, a as getQuickFormatList, b as generateLinkedStyleString, f as findParentNode, c as getFileOpener, s as startImageUpload, d as getActiveFormatting, i as isInTable, e as undoDepth, r as redoDepth, E as Editor, h as getStarterExtensions, P as Placeholder, j as getRichTextExtensions, M as Mark, k as Extension, A as Attribute, N as Node } from "./chunks/editor-BdaZqkkS.js";
+import { o, C, T, m, q, p, l, n } from "./chunks/editor-BdaZqkkS.js";
+import { ref, onMounted, createElementBlock, openBlock, normalizeClass, unref, Fragment, renderList, createElementVNode, withModifiers, getCurrentInstance, computed, watch, createCommentVNode, withDirectives, withKeys, vModelText, createTextVNode, toDisplayString, normalizeStyle, createVNode, h, createApp, reactive, onUnmounted, shallowRef, onBeforeUnmount, createBlock } from "vue";
+import { t as toolbarIcons, s as sanitizeNumber, T as Toolbar, N as NSkeleton } from "./chunks/toolbar-BNg5l9RP.js";
 import AIWriter from "./ai-writer.es.js";
-import { D } from "./chunks/docx-zipper-CaPhHWh0.js";
+import { D } from "./chunks/docx-zipper-CVKlI3mU.js";
 import { createZip } from "./file-zipper.es.js";
 var eventemitter3 = { exports: {} };
 (function(module) {
@@ -327,60 +327,99 @@ const useToolbarItem = (options) => {
     onDeactivate
   };
 };
-const _hoisted_1$b = ["innerHTML"];
-const _hoisted_2$9 = ["innerHTML"];
-const _hoisted_3$7 = ["innerHTML"];
-const _hoisted_4$3 = ["innerHTML"];
+const _hoisted_1$b = ["onClick", "innerHTML", "aria-label", "onKeydown"];
 const _sfc_main$c = {
   __name: "AlignmentButtons",
   emits: ["select"],
   setup(__props, { emit: __emit }) {
     const { isHighContrastMode } = useHighContrastMode();
     const emit = __emit;
+    const alignmentButtonsRefs = ref([]);
+    const alignmentButtons = [
+      {
+        key: "left",
+        ariaLabel: "Align left",
+        icon: toolbarIcons.alignLeft
+      },
+      {
+        key: "center",
+        ariaLabel: "Align center",
+        icon: toolbarIcons.alignCenter
+      },
+      {
+        key: "right",
+        ariaLabel: "Align right",
+        icon: toolbarIcons.alignRight
+      },
+      {
+        key: "justify",
+        ariaLabel: "Justify",
+        icon: toolbarIcons.alignJustify
+      }
+    ];
     const select = (alignment2) => {
       emit("select", alignment2);
     };
+    const moveToNextButton = (index) => {
+      if (index === alignmentButtonsRefs.value.length - 1) return;
+      const nextButton = alignmentButtonsRefs.value[index + 1];
+      if (nextButton) {
+        nextButton.setAttribute("tabindex", "0");
+        nextButton.focus();
+      }
+    };
+    const moveToPreviousButton = (index) => {
+      if (index === 0) return;
+      const previousButton = alignmentButtonsRefs.value[index - 1];
+      if (previousButton) {
+        previousButton.setAttribute("tabindex", "0");
+        previousButton.focus();
+      }
+    };
+    const handleKeyDown = (e, index) => {
+      switch (e.key) {
+        case "ArrowLeft":
+          moveToPreviousButton(index);
+          break;
+        case "ArrowRight":
+          moveToNextButton(index);
+          break;
+        case "Enter":
+          select(alignmentButtons[index].key);
+          break;
+      }
+    };
+    onMounted(() => {
+      const firstButton = alignmentButtonsRefs.value[0];
+      if (firstButton) {
+        firstButton.setAttribute("tabindex", "0");
+        firstButton.focus();
+      }
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["alignment-buttons", { "high-contrast": unref(isHighContrastMode) }])
       }, [
-        createElementVNode("div", {
-          class: "button-icon",
-          onClick: _cache[0] || (_cache[0] = ($event) => select("left")),
-          innerHTML: unref(toolbarIcons).alignLeft,
-          "data-item": "btn-textAlign-option",
-          role: "menuitem",
-          "aria-label": "Align left"
-        }, null, 8, _hoisted_1$b),
-        createElementVNode("div", {
-          class: "button-icon",
-          onClick: _cache[1] || (_cache[1] = ($event) => select("center")),
-          innerHTML: unref(toolbarIcons).alignCenter,
-          "data-item": "btn-textAlign-option",
-          role: "menuitem",
-          "aria-label": "Align center"
-        }, null, 8, _hoisted_2$9),
-        createElementVNode("div", {
-          class: "button-icon",
-          onClick: _cache[2] || (_cache[2] = ($event) => select("right")),
-          innerHTML: unref(toolbarIcons).alignRight,
-          "data-item": "btn-textAlign-option",
-          role: "menuitem",
-          "aria-label": "Align right"
-        }, null, 8, _hoisted_3$7),
-        createElementVNode("div", {
-          class: "button-icon",
-          onClick: _cache[3] || (_cache[3] = ($event) => select("justify")),
-          innerHTML: unref(toolbarIcons).alignJustify,
-          "data-item": "btn-textAlign-option",
-          role: "menuitem",
-          "aria-label": "Justify"
-        }, null, 8, _hoisted_4$3)
+        (openBlock(), createElementBlock(Fragment, null, renderList(alignmentButtons, (button, index) => {
+          return createElementVNode("div", {
+            key: button.key,
+            class: "button-icon",
+            onClick: ($event) => select(button.key),
+            innerHTML: button.icon,
+            "data-item": "btn-textAlign-option",
+            role: "menuitem",
+            "aria-label": button.ariaLabel,
+            ref_for: true,
+            ref_key: "alignmentButtonsRefs",
+            ref: alignmentButtonsRefs,
+            onKeydown: withModifiers((event) => handleKeyDown(event, index), ["prevent"])
+          }, null, 40, _hoisted_1$b);
+        }), 64))
       ], 2);
     };
   }
 };
-const AlignmentButtons = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-58d8a9bb"]]);
+const AlignmentButtons = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-3f28435a"]]);
 const _hoisted_1$a = {
   key: 0,
   class: "link-title"
@@ -544,7 +583,7 @@ const _sfc_main$b = {
   }
 };
 const LinkInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-64aa14bc"]]);
-const _hoisted_1$9 = ["onClick"];
+const _hoisted_1$9 = ["onClick", "onKeydown"];
 const _hoisted_2$7 = { class: "document-mode-column icon-column" };
 const _hoisted_3$5 = ["innerHTML"];
 const _hoisted_4$1 = { class: "document-mode-column text-column" };
@@ -560,20 +599,59 @@ const _sfc_main$a = {
   emits: ["select"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
+    const documentModeRefs = ref([]);
     const { isHighContrastMode } = useHighContrastMode();
+    const props = __props;
     const handleClick = (item) => {
       emit("select", item);
     };
+    const moveToNextOption = (index) => {
+      if (index === documentModeRefs.value.length - 1) return;
+      const nextOption = documentModeRefs.value[index + 1];
+      if (nextOption) {
+        nextOption.setAttribute("tabindex", "0");
+        nextOption.focus();
+      }
+    };
+    const moveToPreviousOption = (index) => {
+      if (index === 0) return;
+      const previousOption = documentModeRefs.value[index - 1];
+      if (previousOption) {
+        previousOption.setAttribute("tabindex", "0");
+        previousOption.focus();
+      }
+    };
+    const handleKeyDown = (e, index) => {
+      switch (e.key) {
+        case "ArrowDown":
+          moveToNextOption(index);
+          break;
+        case "ArrowUp":
+          moveToPreviousOption(index);
+          break;
+        case "Enter":
+          handleClick(props.options[index]);
+          break;
+      }
+    };
+    onMounted(() => {
+      documentModeRefs.value[0].setAttribute("tabindex", "0");
+      documentModeRefs.value[0].focus();
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["document-mode", { "high-contrast": unref(isHighContrastMode) }])
       }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option) => {
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
           return openBlock(), createElementBlock("div", {
             class: normalizeClass(["option-item", { disabled: option.disabled }]),
             onClick: ($event) => handleClick(option),
             "data-item": "btn-documentMode-option",
-            role: "menuitem"
+            role: "menuitem",
+            ref_for: true,
+            ref_key: "documentModeRefs",
+            ref: documentModeRefs,
+            onKeydown: withModifiers((event) => handleKeyDown(event, index), ["prevent"])
           }, [
             createElementVNode("div", _hoisted_2$7, [
               createElementVNode("div", {
@@ -585,18 +663,18 @@ const _sfc_main$a = {
               createElementVNode("div", _hoisted_5$1, toDisplayString(option.label), 1),
               createElementVNode("div", _hoisted_6, toDisplayString(option.description), 1)
             ])
-          ], 10, _hoisted_1$9);
+          ], 42, _hoisted_1$9);
         }), 256))
       ], 2);
     };
   }
 };
-const DocumentMode = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-050d9d49"]]);
+const DocumentMode = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-7febe4d9"]]);
 const _hoisted_1$8 = {
   key: 0,
   class: "linked-style-buttons"
 };
-const _hoisted_2$6 = ["onClick"];
+const _hoisted_2$6 = ["onClick", "onKeydown"];
 const _sfc_main$9 = {
   __name: "LinkedStyle",
   props: {
@@ -611,32 +689,72 @@ const _sfc_main$9 = {
   emits: ["select"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
+    const styleRefs = ref([]);
     const props = __props;
     const select = (style) => {
       emit("select", style);
     };
+    const moveToNextStyle = (index) => {
+      if (index === styleRefs.value.length - 1) {
+        return;
+      }
+      const nextItem = styleRefs.value[index + 1];
+      nextItem.setAttribute("tabindex", "0");
+      nextItem.focus();
+    };
+    const moveToPreviousStyle = (index) => {
+      if (index === 0) {
+        return;
+      }
+      const previousItem = styleRefs.value[index - 1];
+      previousItem.setAttribute("tabindex", "0");
+      previousItem.focus();
+    };
+    const handleKeyDown = (event, index, style) => {
+      switch (event.key) {
+        case "ArrowDown":
+          moveToNextStyle(index);
+          break;
+        case "ArrowUp":
+          moveToPreviousStyle(index);
+          break;
+        case "Enter":
+          console.log("style", style);
+          select(style);
+          break;
+      }
+    };
+    onMounted(() => {
+      styleRefs.value[0].setAttribute("tabindex", "0");
+      styleRefs.value[0].focus();
+    });
     return (_ctx, _cache) => {
       return props.editor ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getQuickFormatList)(__props.editor), (style) => {
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getQuickFormatList)(__props.editor), (style, index) => {
           return openBlock(), createElementBlock("div", {
             class: normalizeClass(["style-item", { "selected": __props.selectedOption === style.id }]),
-            onClick: ($event) => select(style)
+            onClick: ($event) => select(style),
+            onKeydown: (event) => handleKeyDown(event, index, style),
+            ref_for: true,
+            ref_key: "styleRefs",
+            ref: styleRefs
           }, [
             createElementVNode("div", {
               class: "style-name",
               style: normalizeStyle(unref(generateLinkedStyleString)(style, null, false)),
               "data-item": "btn-linkedStyles-option"
             }, toDisplayString(style.definition.attrs.name), 5)
-          ], 10, _hoisted_2$6);
+          ], 42, _hoisted_2$6);
         }), 256))
       ])) : createCommentVNode("", true);
     };
   }
 };
-const LinkedStyle = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-bf5a8c1e"]]);
-const _hoisted_1$7 = ["aria-label", "onClick"];
+const LinkedStyle = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-2cf079a2"]]);
+const _hoisted_1$7 = ["aria-label", "onClick", "onKeydown"];
 const _hoisted_2$5 = ["innerHTML"];
 const _hoisted_3$4 = ["innerHTML"];
+const ROW_SIZE$1 = 7;
 const _sfc_main$8 = {
   __name: "IconGridRow",
   props: {
@@ -649,7 +767,7 @@ const _sfc_main$8 = {
       required: false
     }
   },
-  emits: ["select"],
+  emits: ["select", "clickoutside"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
@@ -665,16 +783,80 @@ const _sfc_main$8 = {
     const handleClick = (option) => {
       emit("select", option.value);
     };
+    const rowRefs = ref([]);
+    const iconRefs = ref([]);
     onMounted(() => {
       const isMatrix = props.icons.every((row) => Array.isArray(row));
       if (!isMatrix) throw new Error("icon props must be 2d array");
+      const firstIcon = iconRefs.value[0];
+      if (firstIcon) {
+        firstIcon.setAttribute("tabindex", "0");
+        firstIcon.focus();
+      }
     });
+    const moveToNextIcon = (rowIndex, optionIndex) => {
+      const iconIndex = ROW_SIZE$1 * rowIndex + optionIndex + 1;
+      const nextIcon = iconRefs.value[iconIndex];
+      if (nextIcon) {
+        nextIcon.setAttribute("tabindex", "0");
+        nextIcon.focus();
+      }
+    };
+    const moveToPreviousIcon = (rowIndex, optionIndex) => {
+      const iconIndex = ROW_SIZE$1 * rowIndex + optionIndex - 1;
+      const previousIcon = iconRefs.value[iconIndex];
+      if (previousIcon) {
+        previousIcon.setAttribute("tabindex", "0");
+        previousIcon.focus();
+      }
+    };
+    const moveToNextRow = (rowIndex, optionIndex) => {
+      const iconIndex = optionIndex + ROW_SIZE$1 * (rowIndex + 1);
+      const nextIcon = iconRefs.value[iconIndex];
+      if (nextIcon) {
+        nextIcon.setAttribute("tabindex", "0");
+        nextIcon.focus();
+      }
+    };
+    const moveToPreviousRow = (rowIndex, optionIndex) => {
+      const iconIndex = optionIndex + ROW_SIZE$1 * (rowIndex - 1);
+      const previousIcon = iconRefs.value[iconIndex];
+      if (previousIcon) {
+        previousIcon.setAttribute("tabindex", "0");
+        previousIcon.focus();
+      }
+    };
+    const handleKeyDown = (event, rowIndex, optionIndex, option) => {
+      switch (event.key) {
+        case "ArrowRight":
+          moveToNextIcon(rowIndex, optionIndex);
+          break;
+        case "ArrowLeft":
+          moveToPreviousIcon(rowIndex, optionIndex);
+          break;
+        case "ArrowDown":
+          moveToNextRow(rowIndex, optionIndex);
+          break;
+        case "ArrowUp":
+          moveToPreviousRow(rowIndex, optionIndex);
+          break;
+        case "Enter":
+          handleClick(option);
+          break;
+        case "Escape":
+          emit("clickoutside");
+          break;
+      }
+    };
     return (_ctx, _cache) => {
       return openBlock(true), createElementBlock(Fragment, null, renderList(__props.icons, (row, rowIndex) => {
         return openBlock(), createElementBlock("div", {
           class: "option-row",
           key: rowIndex,
-          role: "group"
+          role: "group",
+          ref_for: true,
+          ref_key: "rowRefs",
+          ref: rowRefs
         }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(row, (option, optionIndex) => {
             return openBlock(), createElementBlock("div", {
@@ -682,7 +864,11 @@ const _sfc_main$8 = {
               key: optionIndex,
               "aria-label": option.label,
               role: "menuitem",
-              onClick: withModifiers(($event) => handleClick(option), ["stop", "prevent"])
+              ref_for: true,
+              ref_key: "iconRefs",
+              ref: iconRefs,
+              onClick: withModifiers(($event) => handleClick(option), ["stop", "prevent"]),
+              onKeydown: withModifiers((event) => handleKeyDown(event, rowIndex, optionIndex, option), ["prevent"])
             }, [
               createElementVNode("div", {
                 class: "option__icon",
@@ -695,14 +881,14 @@ const _sfc_main$8 = {
                 innerHTML: unref(toolbarIcons).colorOptionCheck,
                 style: normalizeStyle(getCheckStyle(option.value, optionIndex))
               }, null, 12, _hoisted_3$4)) : createCommentVNode("", true)
-            ], 8, _hoisted_1$7);
+            ], 40, _hoisted_1$7);
           }), 128))
         ]);
       }), 128);
     };
   }
 };
-const IconGridRow = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-d96a82fa"]]);
+const IconGridRow = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-e89b7f5f"]]);
 const DropIcon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 512c53.2 0 101.4-21.6 136.1-56.6l-298.3-235C140 257.1 128 292.3 128 320c0 106 86 192 192 192zM505.2 370.7c4.4-16.2 6.8-33.1 6.8-50.7c0-91.2-130.2-262.3-166.6-308.3C339.4 4.2 330.5 0 320.9 0l-1.8 0c-9.6 0-18.5 4.2-24.5 11.7C277.8 33 240.7 81.3 205.8 136L38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L505.2 370.7zM224 336c0 44.2 35.8 80 80 80c8.8 0 16 7.2 16 16s-7.2 16-16 16c-61.9 0-112-50.1-112-112c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg>\n';
 const _hoisted_1$6 = { class: "options-grid-wrap" };
 const _hoisted_2$4 = ["innerHTML"];
@@ -767,7 +953,7 @@ const _sfc_main$7 = {
     };
   }
 };
-const IconGrid = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-9246bdef"]]);
+const IconGrid = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-a00a9a3e"]]);
 const closeDropdown$1 = (dropdown) => {
   dropdown.expand.value = false;
 };
@@ -876,8 +1062,9 @@ const icons = [
 const getAvailableColorOptions = () => {
   return icons.flat().map((item) => item.value);
 };
-const _hoisted_1$5 = ["data-cols", "data-rows", "onClick"];
+const _hoisted_1$5 = ["data-cols", "data-rows", "onKeydown", "onClick"];
 const _hoisted_2$3 = ["aria-valuetext"];
+const ROW_SIZE = 5;
 const _sfc_main$6 = {
   __name: "TableGrid",
   emits: ["select", "clickoutside"],
@@ -886,6 +1073,7 @@ const _sfc_main$6 = {
     const selectedRows = ref(0);
     const selectedCols = ref(0);
     const { isHighContrastMode } = useHighContrastMode();
+    const tableGridItems = ref([]);
     const onTableGridMouseOver = (event) => {
       let target = event.target;
       let isGrid = !!target.dataset.grid;
@@ -896,6 +1084,9 @@ const _sfc_main$6 = {
       let allItems = [...grid.querySelectorAll("[data-item]")];
       let cols = parseInt(target.dataset.cols, 10);
       let rows = parseInt(target.dataset.rows, 10);
+      selectGridItems(allItems, cols, rows);
+    };
+    const selectGridItems = (allItems, cols, rows) => {
       selectedCols.value = cols;
       selectedRows.value = rows;
       for (let i = 0; i < allItems.length; i++) {
@@ -912,6 +1103,61 @@ const _sfc_main$6 = {
     const handleClick = ({ cols, rows }) => {
       emit("select", { cols, rows });
     };
+    const handleKeyDown = (event, cols, rows) => {
+      let normalizedCols = cols - 1;
+      let normalizedRows = rows - 1;
+      switch (event.key) {
+        case "ArrowRight": {
+          if (normalizedCols >= 4) {
+            return;
+          }
+          const currentRow = normalizedRows * ROW_SIZE;
+          tableGridItems.value[currentRow + normalizedCols + 1].setAttribute("tabindex", "0");
+          tableGridItems.value[currentRow + normalizedCols + 1].focus();
+          selectGridItems(tableGridItems.value, cols + 1, rows);
+          break;
+        }
+        case "ArrowLeft": {
+          if (normalizedCols <= 0) {
+            return;
+          }
+          const currentRow = normalizedRows * ROW_SIZE;
+          tableGridItems.value[currentRow + normalizedCols - 1].setAttribute("tabindex", "0");
+          tableGridItems.value[currentRow + normalizedCols - 1].focus();
+          selectGridItems(tableGridItems.value, cols - 1, rows);
+          break;
+        }
+        case "ArrowDown": {
+          if (normalizedRows >= 4) {
+            return;
+          }
+          const nextRow = (normalizedRows + 1) * ROW_SIZE;
+          tableGridItems.value[nextRow + normalizedCols].setAttribute("tabindex", "0");
+          tableGridItems.value[nextRow + normalizedCols].focus();
+          selectGridItems(tableGridItems.value, cols, rows + 1);
+          break;
+        }
+        case "ArrowUp": {
+          if (normalizedRows <= 0) {
+            return;
+          }
+          const previousRow = (normalizedRows - 1) * ROW_SIZE;
+          tableGridItems.value[previousRow + normalizedCols].setAttribute("tabindex", "0");
+          tableGridItems.value[previousRow + normalizedCols].focus();
+          selectGridItems(tableGridItems.value, cols, rows - 1);
+          break;
+        }
+        case "Enter": {
+          handleClick({ cols, rows });
+          break;
+        }
+      }
+    };
+    onMounted(() => {
+      tableGridItems.value[0].setAttribute("tabindex", "0");
+      tableGridItems.value[0].focus();
+      selectGridItems(tableGridItems.value, 1, 1);
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["toolbar-table-grid-wrapper", { "high-contrast": unref(isHighContrastMode) }])
@@ -930,8 +1176,12 @@ const _sfc_main$6 = {
                   "data-cols": n2,
                   "data-rows": i,
                   "data-item": "true",
+                  ref_for: true,
+                  ref_key: "tableGridItems",
+                  ref: tableGridItems,
+                  onKeydown: withModifiers((event) => handleKeyDown(event, n2, i), ["prevent"]),
                   onClick: withModifiers(($event) => handleClick({ cols: n2, rows: i }), ["stop", "prevent"])
-                }, null, 8, _hoisted_1$5);
+                }, null, 40, _hoisted_1$5);
               }), 64))
             ], 64);
           }), 64))
@@ -944,7 +1194,7 @@ const _sfc_main$6 = {
     };
   }
 };
-const TableGrid = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-617bf152"]]);
+const TableGrid = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-3e1154b8"]]);
 const _hoisted_1$4 = { class: "toolbar-table-actions" };
 const _hoisted_2$2 = ["onClick", "data-item", "ariaLabel"];
 const _hoisted_3$2 = { class: "toolbar-table-actions__icon" };
@@ -2075,140 +2325,6 @@ const makeDefaultItems = ({
     overflowItems: overflowItems.filter((item) => item.type !== "separator")
   };
 };
-const ACCEPT_IMAGE_TYPES = [".jpg", ".jpeg", ".png", "image/jpeg", "image/png"];
-const getFileOpener = () => {
-  let fileInput = document.createElement("input");
-  fileInput.type = "file";
-  let acceptTypes = ACCEPT_IMAGE_TYPES;
-  fileInput.accept = acceptTypes.join(",");
-  const openFile = () => {
-    return new Promise((resolve, reject) => {
-      fileInput.onchange = async () => {
-        const files = fileInput.files;
-        if (!files) return resolve(null);
-        const file = files.item(0);
-        if (!file) return resolve(null);
-        return resolve({ file });
-      };
-      fileInput.oncancel = () => resolve(null);
-      fileInput.onerror = reject;
-      fileInput.click();
-    });
-  };
-  return openFile;
-};
-const handleImageUpload = (file) => {
-  return new Promise((resolve, reject) => {
-    let reader = new FileReader();
-    reader.onload = (event) => resolve(event.target.result);
-    reader.onerror = reject;
-    setTimeout(() => reader.readAsDataURL(file), 250);
-  });
-};
-const processUploadedImage = (fileData, editor) => {
-  return new Promise((resolve, reject) => {
-    const img = new window.Image();
-    img.onload = () => {
-      const canvas = document.createElement("canvas");
-      const { width, height } = getAllowedImageDimensions(
-        img.width,
-        img.height,
-        editor
-      );
-      canvas.width = width;
-      canvas.height = height;
-      const ctx = canvas.getContext("2d");
-      ctx.drawImage(img, 0, 0, width, height);
-      if (typeof fileData === "string") {
-        const resizedBase64 = canvas.toDataURL();
-        resolve(resizedBase64);
-      } else {
-        canvas.toBlob((blob) => {
-          const updatedFile = new File([blob], fileData.name, {
-            type: fileData.type,
-            lastModified: Date.now()
-          });
-          resolve({ file: updatedFile, width, height });
-        });
-      }
-    };
-    img.onerror = (error) => reject(error);
-    img.src = typeof fileData === "string" ? fileData : URL.createObjectURL(fileData);
-  });
-};
-const getAllowedImageDimensions = (width, height, editor) => {
-  const { width: maxWidth, height: maxHeight } = editor.getMaxContentSize();
-  if (!maxWidth || !maxHeight) return { width, height };
-  let adjustedWidth = width;
-  let adjustedHeight = height;
-  const aspectRatio = width / height;
-  if (height > maxHeight) {
-    adjustedHeight = maxHeight;
-    adjustedWidth = Math.round(maxHeight * aspectRatio);
-  }
-  if (adjustedWidth > maxWidth) {
-    adjustedWidth = maxWidth;
-    adjustedHeight = Math.round(maxWidth / aspectRatio);
-  }
-  return { width: adjustedWidth, height: adjustedHeight };
-};
-const startImageUpload = async ({ editor, view, file }) => {
-  let imageUploadHandler = typeof editor.options.handleImageUpload === "function" ? editor.options.handleImageUpload : handleImageUpload;
-  let fileSizeMb = (file.size / (1024 * 1024)).toFixed(4);
-  if (fileSizeMb > 5) {
-    window.alert("Image size must be less than 5MB");
-    return;
-  }
-  let width;
-  let height;
-  try {
-    const processedImageResult = await processUploadedImage(file, editor);
-    width = processedImageResult.width;
-    height = processedImageResult.height;
-    file = processedImageResult.file;
-  } catch (err) {
-    console.warn("Error processing image:", err);
-    return;
-  }
-  let id = {};
-  let { tr, schema } = view.state;
-  if (!tr.selection.empty) {
-    tr.deleteSelection();
-  }
-  let imageMeta = {
-    type: "add",
-    pos: tr.selection.from,
-    id
-  };
-  tr.setMeta(ImagePlaceholderPluginKey, imageMeta);
-  view.dispatch(tr);
-  imageUploadHandler(file).then(
-    (url) => {
-      let fileName = file.name.replace(" ", "_");
-      let placeholderPos = findPlaceholder(view.state, id);
-      if (placeholderPos == null) {
-        return;
-      }
-      let removeMeta = { type: "remove", id };
-      let mediaPath = `word/media/${fileName}`;
-      let imageNode = schema.nodes.image.create({
-        src: mediaPath,
-        size: { width, height }
-      });
-      editor.storage.image.media = Object.assign(editor.storage.image.media, { [mediaPath]: url });
-      if (editor.options.ydoc) {
-        editor.commands.addImageToCollaboration({ mediaPath, fileData: url });
-      }
-      view.dispatch(
-        view.state.tr.replaceWith(placeholderPos, placeholderPos, imageNode).setMeta(ImagePlaceholderPluginKey, removeMeta)
-      );
-    },
-    () => {
-      let removeMeta = { type: "remove", id };
-      view.dispatch(tr.setMeta(ImagePlaceholderPluginKey, removeMeta));
-    }
-  );
-};
 const toolbarTexts = {
   bold: "Bold",
   fontFamily: "Font",
@@ -3280,6 +3396,15 @@ const _sfc_main$2 = {
       });
     };
     const handleSuperEditorKeydown = (event) => {
+      if ((event.metaKey || event.ctrlKey) && event.altKey && event.shiftKey) {
+        if (event.code === "KeyM") {
+          const toolbar = document.querySelector(".superdoc-toolbar");
+          if (toolbar) {
+            toolbar.setAttribute("tabindex", "0");
+            toolbar.focus();
+          }
+        }
+      }
       emit("editor-keydown", { editor: editor.value });
     };
     const handleSuperEditorClick = (event) => {
@@ -3385,7 +3510,7 @@ const _sfc_main$2 = {
     };
   }
 };
-const SuperEditor = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-f27b7c30"]]);
+const SuperEditor = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-4b700df1"]]);
 const _sfc_main$1 = {
   __name: "BasicUpload",
   emits: ["file-change"],
@@ -3521,7 +3646,7 @@ export {
   createZip,
   m as fieldAnnotationHelpers,
   getActiveFormatting,
-  getAllowedImageDimensions,
+  q as getAllowedImageDimensions,
   p as getMarksFromSelection,
   getRichTextExtensions,
   getStarterExtensions,