@contentful/field-editor-rich-text 2.1.0 → 2.1.3

package/dist/field-editor-rich-text.esm.js

@@ -577,6 +577,10 @@ var useCommandList = function useCommandList(commandItems, container) {
       selectedItem = _React$useState[0],
       setSelectedItem = _React$useState[1];
 
+  var _React$useState2 = useState(commandItems.length > 0),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
   useEffect(function () {
     if (!(container != null && container.current)) {
       return;
@@ -641,8 +645,21 @@ var useCommandList = function useCommandList(commandItems, container) {
       return window.removeEventListener('keydown', handleKeyDown);
     };
   }, [commandItems, container, selectedItem]);
+  useEffect(function () {
+    var handleClick = function handleClick(event) {
+      if (container.current && !container.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('click', handleClick);
+    return function () {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [container]);
   return {
-    selectedItem: selectedItem
+    selectedItem: selectedItem,
+    isOpen: isOpen
   };
 };
 
@@ -1851,11 +1868,8 @@ var CommandList = function CommandList(_ref5) {
   var commandItems = useCommands(sdk, query, editor);
 
   var _useCommandList = useCommandList(commandItems, container),
-      selectedItem = _useCommandList.selectedItem;
-
-  if (commandItems.length === 0) {
-    return null;
-  }
+      selectedItem = _useCommandList.selectedItem,
+      isOpen = _useCommandList.isOpen;
 
   return /*#__PURE__*/createElement("div", {
     className: styles.container,
@@ -1867,17 +1881,21 @@ var CommandList = function CommandList(_ref5) {
   }, /*#__PURE__*/createElement(ScreenReaderOnly, null, "Richtext commands. Currently focused item: ", selectedItem, ". Press ", /*#__PURE__*/createElement("kbd", null, "enter"), " to select, ", /*#__PURE__*/createElement("kbd", null, "arrows"), " to navigate, ", /*#__PURE__*/createElement("kbd", null, "escape"), " to close.")), /*#__PURE__*/createElement("div", {
     "aria-hidden": true
   }, /*#__PURE__*/createElement(Popover, {
-    isOpen: true,
+    isOpen: isOpen,
     usePortal: false,
+
+    /* eslint-disable-next-line jsx-a11y/no-autofocus -- we want to keep focus on text input*/
     autoFocus: false
   }, /*#__PURE__*/createElement(Popover.Trigger, null, /*#__PURE__*/createElement("span", null)), /*#__PURE__*/createElement(Popover.Content, {
-    className: styles.menuContent
+    className: styles.menuContent,
+    testId: "rich-text-commands"
   }, /*#__PURE__*/createElement("header", {
     className: styles.menuHeader
   }, /*#__PURE__*/createElement(SectionHeading, {
     marginBottom: "none"
   }, "Richtext commands")), /*#__PURE__*/createElement("div", {
-    className: styles.menuList
+    className: styles.menuList,
+    "data-test-id": "rich-text-commands-list"
   }, /*#__PURE__*/createElement(CommandListItems, {
     commandItems: commandItems,
     selectedItem: selectedItem
@@ -7371,24 +7389,13 @@ var StickyToolbarWrapper = function StickyToolbarWrapper(_ref) {
   }, children);
 };
 
-/**
- * Returns whether a given operation is relevant enough to trigger a save.
- */
-
-var isRelevantOperation = function isRelevantOperation(op) {
-  if (op.type === 'set_selection') {
-    return false;
-  }
-
-  return true;
-};
-
+var internalMarks = [COMMAND_PROMPT];
 var removeInternalMarks = function removeInternalMarks(document) {
   return _extends({}, document, {
     content: document.content.map(function (node) {
       if (node.nodeType === 'text') {
         node.marks = node.marks.filter(function (mark) {
-          return mark.type !== COMMAND_PROMPT;
+          return !internalMarks.includes(mark.type);
         });
         return node;
       }
@@ -7398,6 +7405,18 @@ var removeInternalMarks = function removeInternalMarks(document) {
   });
 };
 
+/**
+ * Returns whether a given operation is relevant enough to trigger a save.
+ */
+
+var isRelevantOperation = function isRelevantOperation(op) {
+  if (op.type === 'set_selection') {
+    return false;
+  }
+
+  return true;
+};
+
 var useOnValueChanged = function useOnValueChanged(_ref) {
   var editorId = _ref.editorId,
       handler = _ref.handler,