@firecms/editor 3.0.0-tw4.2 → 3.0.0

package/dist/index.umd.js

@@ -31,7 +31,7 @@
     } = react.useCurrentEditor();
     tippyOptions?.placement;
     let t1;
-    const shouldShow = _temp$1;
+    const shouldShow = _temp$2;
     const t2 = tippyOptions?.placement ?? options?.placement;
     let t3;
     if ($[5] !== options || $[6] !== t2) {
@@ -85,7 +85,7 @@
     }
     return t6;
   });
-  function _temp$1(t0) {
+  function _temp$2(t0) {
     const {
       editor: editor_0,
       state: state$1
@@ -445,7 +445,7 @@
     if ($[0] !== editor) {
       const items2 = [{
         name: "bold",
-        isActive: _temp,
+        isActive: _temp$1,
         command: _temp2,
         icon: ui.FormatBoldIcon
       }, {
@@ -482,7 +482,7 @@
     }
     return t0;
   };
-  function _temp(editor_0) {
+  function _temp$1(editor_0) {
     return editor_0?.isActive("bold") ?? false;
   }
   function _temp2(editor_1) {
@@ -1397,18 +1397,50 @@
         return item.searchTerms?.some((term) => term.toLowerCase().startsWith(query.toLowerCase()));
       });
     },
+    allow: ({
+      editor,
+      range
+    }) => {
+      return editor.can().insertContentAt(range, {
+        type: "command"
+      });
+    },
     render: () => {
       let component;
       let containerEl = null;
       let cleanupAutoUpdate = null;
       let reference = null;
+      let escapeListener = null;
+      function exit() {
+        if (cleanupAutoUpdate) cleanupAutoUpdate();
+        if (containerEl && containerEl.parentNode) {
+          containerEl.parentNode.removeChild(containerEl);
+        }
+        if (escapeListener) {
+          document.removeEventListener("keydown", escapeListener, true);
+          escapeListener = null;
+        }
+        containerEl = null;
+        reference = null;
+        component?.destroy();
+      }
       return {
         onStart: (props) => {
+          escapeListener = (e) => {
+            if (e.key === "Escape") {
+              e.preventDefault();
+              e.stopPropagation();
+              e.stopImmediatePropagation();
+              exit();
+            }
+          };
+          document.addEventListener("keydown", escapeListener, true);
           component = new react.ReactRenderer(CommandList, {
             props: {
               ...props,
               upload,
-              aiController
+              aiController,
+              onClose: exit
             },
             editor: props.editor
           });
@@ -1416,6 +1448,7 @@
             return;
           }
           containerEl = document.createElement("div");
+          containerEl.setAttribute("data-suggestion-menu", "true");
           containerEl.style.position = "fixed";
           containerEl.style.left = "0px";
           containerEl.style.top = "0px";
@@ -1467,18 +1500,14 @@
         onKeyDown(props) {
           if (props.event.key === "Escape") {
             props.event.preventDefault();
+            props.event.stopPropagation();
+            exit();
             return true;
           }
           return component.ref?.onKeyDown(props);
         },
         onExit() {
-          if (cleanupAutoUpdate) cleanupAutoUpdate();
-          if (containerEl && containerEl.parentNode) {
-            containerEl.parentNode.removeChild(containerEl);
-          }
-          containerEl = null;
-          reference = null;
-          component?.destroy();
+          exit();
         }
       };
     }
@@ -1491,10 +1520,12 @@
     } = react.useCurrentEditor();
     let t0;
     if ($[0] !== editor || $[1] !== props.aiController || $[2] !== props.range || $[3] !== props.upload) {
-      t0 = (item) => {
+      t0 = (item, event) => {
         if (!editor) {
           return;
         }
+        event?.preventDefault();
+        event?.stopPropagation();
         item?.command?.({
           editor,
           range: props.range,
@@ -1570,17 +1601,17 @@
       t6 = () => ({
         onKeyDown: (t72) => {
           const {
-            event
+            event: event_0
           } = t72;
-          if (event.key === "ArrowUp") {
+          if (event_0.key === "ArrowUp") {
             upHandler();
             return true;
           }
-          if (event.key === "ArrowDown") {
+          if (event_0.key === "ArrowDown") {
             downHandler();
             return true;
           }
-          if (event.key === "Enter") {
+          if (event_0.key === "Enter") {
             enterHandler();
             return true;
           }
@@ -1636,7 +1667,7 @@
           return;
         }
         itemRefs.current[index] = el;
-      }, onClick: () => selectItem(item_1), tabIndex: index === selectedIndex ? 0 : -1, "aria-selected": index === selectedIndex, className: ui.cls("flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-blue-50 hover:dark:bg-surface-700 aria-selected:bg-blue-50 aria-selected:dark:bg-surface-700", index === selectedIndex ? "bg-blue-100 dark:bg-surface-accent-950" : ""), children: [
+      }, onMouseDown: _temp, onClick: (e_0) => selectItem(item_1, e_0), tabIndex: index === selectedIndex ? 0 : -1, "aria-selected": index === selectedIndex, className: ui.cls("flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm hover:bg-blue-50 hover:dark:bg-surface-700 aria-selected:bg-blue-50 aria-selected:dark:bg-surface-700", index === selectedIndex ? "bg-blue-100 dark:bg-surface-accent-950" : ""), children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("flex h-10 w-10 items-center justify-center rounded-md border bg-white dark:bg-surface-900", ui.defaultBorderMixin), children: item_1.icon }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: item_1.title }),
@@ -1839,6 +1870,9 @@
       input.click();
     }
   }];
+  function _temp(e) {
+    return e.preventDefault();
+  }
   const proseClasses = {
     "sm": "prose-sm",
     "base": "prose-base",