@contentful/field-editor-rich-text 2.1.1 → 2.2.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@2.1.3...@contentful/field-editor-rich-text@2.2.0) (2022-07-06)
+
+### Features
+
+- add tracking for rich-text-commands ([#1174](https://github.com/contentful/field-editors/issues/1174)) ([75fc492](https://github.com/contentful/field-editors/commit/75fc49210a5789bf029ddb81413349d74f441f28))
+
+## [2.1.3](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@2.1.2...@contentful/field-editor-rich-text@2.1.3) (2022-07-06)
+
+### Bug Fixes
+
+- rt-commands palette closes on click outside ([#1175](https://github.com/contentful/field-editors/issues/1175)) ([b9dd434](https://github.com/contentful/field-editors/commit/b9dd43497a874b35318230074d7de411012c7eee))
+
+## [2.1.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@2.1.1...@contentful/field-editor-rich-text@2.1.2) (2022-07-06)
+
+**Note:** Version bump only for package @contentful/field-editor-rich-text
+
 ## [2.1.1](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@2.1.0...@contentful/field-editor-rich-text@2.1.1) (2022-07-05)
 
 **Note:** Version bump only for package @contentful/field-editor-rich-text

package/dist/field-editor-rich-text.cjs.development.js

@@ -584,6 +584,10 @@ var useCommandList = function useCommandList(commandItems, container) {
       selectedItem = _React$useState[0],
       setSelectedItem = _React$useState[1];
 
+  var _React$useState2 = React.useState(commandItems.length > 0),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
   React.useEffect(function () {
     if (!(container != null && container.current)) {
       return;
@@ -648,8 +652,21 @@ var useCommandList = function useCommandList(commandItems, container) {
       return window.removeEventListener('keydown', handleKeyDown);
     };
   }, [commandItems, container, selectedItem]);
+  React.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
   };
 };
 
@@ -1592,6 +1609,9 @@ var useCommands = function useCommands(sdk, query, editor) {
                         editor.insertSoftBreak();
                         insertBlock(editor, Contentful.BLOCKS.EMBEDDED_ENTRY, entry.entry);
                         slate.Transforms.select(editor, selection);
+                        editor.tracking.onCommandPaletteAction('insert', {
+                          nodeType: Contentful.BLOCKS.EMBEDDED_ENTRY
+                        });
                       }
                     }
                   };
@@ -1621,6 +1641,9 @@ var useCommands = function useCommands(sdk, query, editor) {
                       removeCommand(editor);
                       slate.Transforms.insertNodes(editor, inlineNode);
                       editor.insertText('');
+                      editor.tracking.onCommandPaletteAction('insert', {
+                        nodeType: Contentful.INLINES.EMBEDDED_ENTRY
+                      });
                     }
                   };
                 }));
@@ -1658,6 +1681,9 @@ var useCommands = function useCommands(sdk, query, editor) {
                       editor.insertSoftBreak();
                       insertBlock(editor, Contentful.BLOCKS.EMBEDDED_ASSET, asset.entity);
                       slate.Transforms.select(editor, selection);
+                      editor.tracking.onCommandPaletteAction('insert', {
+                        nodeType: Contentful.BLOCKS.EMBEDDED_ASSET
+                      });
                     }
                   }
                 };
@@ -1858,11 +1884,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__*/React.createElement("div", {
     className: styles.container,
@@ -1874,7 +1897,7 @@ var CommandList = function CommandList(_ref5) {
   }, /*#__PURE__*/React.createElement(f36Components.ScreenReaderOnly, null, "Richtext commands. Currently focused item: ", selectedItem, ". Press ", /*#__PURE__*/React.createElement("kbd", null, "enter"), " to select, ", /*#__PURE__*/React.createElement("kbd", null, "arrows"), " to navigate, ", /*#__PURE__*/React.createElement("kbd", null, "escape"), " to close.")), /*#__PURE__*/React.createElement("div", {
     "aria-hidden": true
   }, /*#__PURE__*/React.createElement(f36Components.Popover, {
-    isOpen: true,
+    isOpen: isOpen,
     usePortal: false,
 
     /* eslint-disable-next-line jsx-a11y/no-autofocus -- we want to keep focus on text input*/
@@ -1922,6 +1945,7 @@ var createOnKeyDown = function createOnKeyDown() {
         var _setMarks;
 
         plateCore.setMarks(editor, (_setMarks = {}, _setMarks[COMMAND_PROMPT] = true, _setMarks));
+        editor.tracking.onCommandPaletteAction('openRichTextCommandPalette');
       }
 
       var isActive = plateCore.isMarkActive(editor, COMMAND_PROMPT);
@@ -1951,6 +1975,7 @@ var createOnKeyDown = function createOnKeyDown() {
             key: COMMAND_PROMPT,
             at: _range
           });
+          editor.tracking.onCommandPaletteAction('cancelRichTextCommandPalette');
         }
       }
     };