@firecms/editor 3.0.0-tw4.1 → 3.0.0

package/dist/index.es.js

@@ -63,7 +63,7 @@ const EditorBubble = forwardRef((t0, ref) => {
   } = 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) {
@@ -117,7 +117,7 @@ const EditorBubble = forwardRef((t0, ref) => {
   }
   return t6;
 });
-function _temp$1(t0) {
+function _temp$2(t0) {
   const {
     editor: editor_0,
     state
@@ -477,7 +477,7 @@ const TextButtons = () => {
   if ($[0] !== editor) {
     const items2 = [{
       name: "bold",
-      isActive: _temp,
+      isActive: _temp$1,
       command: _temp2,
       icon: FormatBoldIcon
     }, {
@@ -514,7 +514,7 @@ const TextButtons = () => {
   }
   return t0;
 };
-function _temp(editor_0) {
+function _temp$1(editor_0) {
   return editor_0?.isActive("bold") ?? false;
 }
 function _temp2(editor_1) {
@@ -1429,18 +1429,50 @@ const suggestion = (ref, {
       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 ReactRenderer(CommandList, {
           props: {
             ...props,
             upload,
-            aiController
+            aiController,
+            onClose: exit
           },
           editor: props.editor
         });
@@ -1448,6 +1480,7 @@ const suggestion = (ref, {
           return;
         }
         containerEl = document.createElement("div");
+        containerEl.setAttribute("data-suggestion-menu", "true");
         containerEl.style.position = "fixed";
         containerEl.style.left = "0px";
         containerEl.style.top = "0px";
@@ -1499,18 +1532,14 @@ const suggestion = (ref, {
       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();
       }
     };
   }
@@ -1523,10 +1552,12 @@ const CommandList = forwardRef((props, ref) => {
   } = 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,
@@ -1602,17 +1633,17 @@ const CommandList = forwardRef((props, ref) => {
     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;
         }
@@ -1668,7 +1699,7 @@ const CommandList = forwardRef((props, ref) => {
         return;
       }
       itemRefs.current[index] = el;
-    }, onClick: () => selectItem(item_1), tabIndex: index === selectedIndex ? 0 : -1, "aria-selected": index === selectedIndex, className: 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: 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__ */ jsx("div", { className: cls("flex h-10 w-10 items-center justify-center rounded-md border bg-white dark:bg-surface-900", defaultBorderMixin), children: item_1.icon }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("p", { className: "font-medium", children: item_1.title }),
@@ -1871,6 +1902,9 @@ const suggestionItems = [{
     input.click();
   }
 }];
+function _temp(e) {
+  return e.preventDefault();
+}
 const proseClasses = {
   "sm": "prose-sm",
   "base": "prose-base",