@contentful/field-editor-rich-text 3.15.0 → 3.15.1

package/dist/esm/helpers/editor.js

@@ -67,7 +67,11 @@ export function insertEmptyParagraph(editor, options) {
 export function getElementFromCurrentSelection(editor) {
     if (!editor.selection) return [];
     return Array.from(getNodeEntries(editor, {
-        at: editor.selection,
+        /**
+       * editor.select is a Range, which includes anchor and focus, the beginning and the end of a selection
+       * when using only editor.selection.focus, we might get only the end of the selection, or where the text cursor is
+       * and in some cases getting the next element instead of the one we want
+       **/ at: editor.selection,
         match: (node)=>isElement(node)
     })).flat();
 }
@@ -88,11 +92,13 @@ export function getTableSize(table) {
         numColumns
     };
 }
+// TODO: move to hyperlink plugin
 export function insertLink(editor, options) {
     if (editor.selection) {
         wrapLink(editor, options);
     }
 }
+// TODO: move to hyperlink plugin
 export function isLinkActive(editor) {
     if (!editor) {
         return false;
@@ -102,16 +108,18 @@ export function isLinkActive(editor) {
     }));
     return !!link;
 }
+// TODO: move to hyperlink plugin
 export function unwrapLink(editor) {
     unwrapNodes(editor, {
         match: (node)=>!isEditor(node) && isElement(node) && LINK_TYPES.includes(node.type)
     });
 }
-export function wrapLink(editor, { text , url , target , type , path  }) {
+// TODO: move to hyperlink plugin
+export function wrapLink(editor, { text, url, target, type, path }) {
     if (isLinkActive(editor) && !path) {
         unwrapLink(editor);
     }
-    const { selection  } = editor;
+    const { selection } = editor;
     const isCollapsed = selection && isSelectionCollapsed(selection);
     const link = {
         type,
@@ -132,6 +140,7 @@ export function wrapLink(editor, { text , url , target , type , path  }) {
             target
         };
     }
+    // TODO: always set the selection to the end of the inserted link
     if (path) {
         setNodes(editor, link, {
             at: path
@@ -158,15 +167,19 @@ export function getAncestorPathFromSelection(editor) {
     return getPathLevels(editor.selection.focus.path).find((level)=>level.length === 1);
 }
 export const isAtEndOfTextSelection = (editor)=>editor.selection?.focus.offset === getText(editor, editor.selection?.focus.path).length;
-export function getNextNode(editor) {
+/**
+ * This traversal strategy is unfortunately necessary because Slate doesn't
+ * expose something like Node.next(editor).
+ */ export function getNextNode(editor) {
     if (!editor.selection) {
         return null;
     }
     const descendants = getNodeDescendants(editor, {
         from: editor.selection.focus.path
     });
+    // eslint-disable-next-line no-constant-condition -- TODO: explain this disable
     while(true){
-        const { done , value  } = descendants.next();
+        const { done, value } = descendants.next();
         if (done) {
             return null;
         }
@@ -179,20 +192,23 @@ export function getNextNode(editor) {
 }
 export const INLINE_TYPES = Object.values(INLINES);
 export const isInlineOrText = (node)=>{
+    // either text or inline elements
     return isText(node) || isElement(node) && INLINE_TYPES.includes(node.type);
 };
 export const focus = (editor)=>{
     const x = window.scrollX;
     const y = window.scrollY;
     focusEditor(editor);
+    // Safari has issues with `editor.focus({ preventScroll: true })`, it ignores the option `preventScroll`
     if (IS_SAFARI) {
         setTimeout(function() {
-            window.scrollTo(x, y);
+            window.scrollTo(x, y); // restore position
         }, 0);
     }
 };
 export function toggleElement(editor, options, editorOptions) {
     toggleNodeType(editor, options, editorOptions);
+    // We must reset `data` from one element to another
     setNodes(editor, {
         data: {}
     });

package/dist/esm/helpers/extractNodes.js

@@ -7,7 +7,9 @@ function extractNodes(editor, path, match) {
         mode: 'lowest'
     })).map(([node])=>node);
 }
-export function extractParagraphs(editor, path) {
+/**
+ * It filters out all paragraphs and headings from a path and convert them into paragraphs.
+ */ export function extractParagraphs(editor, path) {
     return extractNodes(editor, path, {
         type: TEXT_CONTAINERS
     }).map((node)=>({

package/dist/esm/helpers/formatDateAndTime.js

@@ -1,5 +1,9 @@
+// eslint-disable-next-line no-restricted-imports -- TODO: explain this disable
 import moment from 'moment';
-export const formatDate = (date, short)=>{
+/**
+ * @param {Date|string} date A valid constructor argument for moment()
+ * @param {boolean=} short Render only Today/Tomorrow/Yesterday if valid. Defaults to false
+ */ export const formatDate = (date, short)=>{
     switch(moment().startOf('day').diff(moment(date).startOf('day'), 'days')){
         case 0:
             return short ? 'Today' : `Today, ${moment(date).format('DD MMM YYYY')}`;
@@ -11,7 +15,12 @@ export const formatDate = (date, short)=>{
             return moment(date).format('ddd, DD MMM YYYY');
     }
 };
-export const formatTime = (date)=>{
+/**
+ * Returns the time portion of a date in the local time in the format H:MM AM/PM
+ *
+ * == Examples
+ * * `T15:36:45.000Z` => 3:36 PM (if in +0:00 offset)
+ */ export const formatTime = (date)=>{
     return moment.utc(date).local().format('h:mm A');
 };
 export const formatDateAndTime = (date, short)=>{

package/dist/esm/helpers/getAllowedResourcesForNodeType.js

@@ -1,7 +1,24 @@
-import find from 'lodash/find';
+/* eslint-disable you-dont-need-lodash-underscore/find */ import find from 'lodash/find';
 import flow from 'lodash/flow';
 import get from 'lodash/get';
-export default function getAllowedResourcesForNodeType(field, nodeType) {
+/**
+ * Given a field object and a rich text node type, return a list of allowed
+ * resources associated with the node type, based on that node type's
+ * `allowedResources` property.
+ *
+ * The navigation here is explained by the `nodes` validation having signature:
+ * { nodes: { [nodeType]: { allowedResources: AllowedResource[] } } }
+ *
+ * We defensively navigate through this object because
+ * 1) the field may not have a `validations` array,
+ * 2) the `validations` array may be empty,
+ * 3) the `validations` array may not have a `nodes` validation, and
+ * 4) the `nodes` validation may not validate the `nodeType`.
+ *
+ * @param {object} field
+ * @param {string} nodeType
+ * @returns {AllowedResource[]}
+ */ export default function getAllowedResourcesForNodeType(field, nodeType) {
     return flow((validations)=>find(validations, 'nodes'), (validations)=>get(validations, [
             'nodes',
             nodeType,

package/dist/esm/helpers/getLinkedContentTypeIdsForNodeType.js

@@ -1,7 +1,31 @@
-import find from 'lodash/find';
+/* eslint-disable you-dont-need-lodash-underscore/find */ import find from 'lodash/find';
 import flow from 'lodash/flow';
 import get from 'lodash/get';
-export default function getLinkedContentTypeIdsForNodeType(field, nodeType) {
+/**
+ * Given a field object and a rich text node type, return a list of valid
+ * content type IDs associated with the node type, based on that node type's
+ * `linkContentType` validation.
+ *
+ * If there is no such validation or the validation is empty, return an empty
+ * array.
+ *
+ * The navigation here is explained by the `nodes` validation having signature:
+ * { nodes: { [nodeType]: validationObject[] } }
+ *
+ * We defensively navigate through this object because
+ * 1) the field may not have a `validations` array,
+ * 2) the `validations` array may be empty,
+ * 3) the `validations` array may not have a `nodes` validation,
+ * 4) the `nodes` validation may not validate the `nodeType`, and
+ * 5) the `nodeType` validations may not have a `linkContentType` validation.
+ *
+ * Note that passing an empty array will result in all possible content types
+ * being whitelisted.
+ *
+ * @param {object} field
+ * @param {string} nodeType
+ * @returns {string[]}
+ */ export default function getLinkedContentTypeIdsForNodeType(field, nodeType) {
     return flow((v)=>find(v, 'nodes'), (v)=>get(v, [
             'nodes',
             nodeType

package/dist/esm/helpers/sdkNavigatorSlideIn.js

@@ -1,5 +1,11 @@
 import noop from 'lodash/noop';
-export function watchCurrentSlide(navigator) {
+/**
+ * Allows to observe when the current slide-in navigation slide gets e.g.
+ * re-activated after opening another slide on top. This is useful as the sdk
+ * does not give full insights into e.g. whether sdk.dialogs.selectSingleEntry()
+ * with `withCreate: true` option opens the slide-in navigation to edit the
+ * created entry after returning it.
+ */ export function watchCurrentSlide(navigator) {
     const onActiveCallbacks = new Set();
     let wasSlideClosed = false;
     let initialSlideLevel;
@@ -8,26 +14,34 @@ export function watchCurrentSlide(navigator) {
             wasClosed: wasSlideClosed,
             isActive: !wasSlideClosed && lastSlideLevel === initialSlideLevel
         });
-    const off = navigator.onSlideInNavigation(({ oldSlideLevel , newSlideLevel  })=>{
+    const off = navigator.onSlideInNavigation(({ oldSlideLevel, newSlideLevel })=>{
         if (initialSlideLevel === undefined) {
             initialSlideLevel = oldSlideLevel;
         }
         lastSlideLevel = newSlideLevel;
         if (newSlideLevel < initialSlideLevel) {
             wasSlideClosed = true;
-            off();
+            off(); // No more point in watching, slide got closed.
             onActiveCallbacks.clear();
         }
         if (status().isActive && newSlideLevel !== oldSlideLevel) {
             onActiveCallbacks.forEach((cb)=>cb());
         }
     });
-    function unwatch() {
+    /**
+   * Call to unsubscribe from navigator events when the watcher is no longer
+   * needed.
+   */ function unwatch() {
         off();
         onActiveCallbacks.clear();
     }
-    function onActive(cb) {
-        if (wasSlideClosed) return noop;
+    /**
+   * Fires immediately when the slide is currently active, or at the point when
+   * it becomes active again, if there are slides on top that get closed. Does not
+   * fire when the observed slide gets closed, and then re-opened through browser
+   * back, as this technically opens a new slide and editor instance.
+   */ function onActive(cb) {
+        if (wasSlideClosed) return noop; // Can't re-activate already closed slide.
         if (status().isActive) {
             cb();
         }

package/dist/esm/helpers/sdkNavigatorSlideIn.spec.js

@@ -195,6 +195,7 @@ describe('watchCurrentSlide().unwatch()', ()=>{
             newSlideLevel: 0
         });
         expect(spy).toHaveBeenCalledTimes(0);
+        // Demonstrate that normally this would fire an event if it wasn't for the unwatch()
         expect(spy2).toHaveBeenCalledTimes(1);
     });
 });

package/dist/esm/helpers/toSlateValue.js

@@ -2,7 +2,10 @@ import { toSlatejsDocument } from '@contentful/contentful-slatejs-adapter';
 import { EMPTY_DOCUMENT } from '@contentful/rich-text-types';
 import schema from '../constants/Schema';
 const isTextElement = (node)=>'text' in node;
-function sanitizeIncomingSlateDoc(nodes = []) {
+/**
+ * Ensures all nodes have a child leaf text element. This should be handled by
+ * Slate but its behavior has proven to be buggy and unpredictable.
+ */ function sanitizeIncomingSlateDoc(nodes = []) {
     return nodes.map((node)=>{
         if (isTextElement(node)) {
             return node;
@@ -24,12 +27,23 @@ function sanitizeIncomingSlateDoc(nodes = []) {
         };
     });
 }
-export const toSlateValue = (doc)=>{
-    const hasContent = (doc)=>{
+/**
+ * Converts a Contentful rich text document to the corresponding slate editor
+ * value
+ */ export const toSlateValue = (doc)=>{
+    /**
+   * For legacy reasons, a document may not have any content at all
+   * e.g:
+   *
+   * {nodeType: document, data: {}, content: []}
+   *
+   * Rendering such document will break the Slate editor
+   */ const hasContent = (doc)=>{
         return (doc?.content || []).length > 0;
     };
     const slateDoc = toSlatejsDocument({
         document: doc && hasContent(doc) ? doc : EMPTY_DOCUMENT,
+        // TODO: get rid of schema, https://github.com/contentful/field-editors/pull/1065#discussion_r826723248
         schema
     });
     return sanitizeIncomingSlateDoc(slateDoc);

package/dist/esm/helpers/validations.js

@@ -1,7 +1,8 @@
-import { BLOCKS, INLINES, TOP_LEVEL_BLOCKS } from '@contentful/rich-text-types';
+/* eslint-disable you-dont-need-lodash-underscore/find */ import { BLOCKS, INLINES, TOP_LEVEL_BLOCKS } from '@contentful/rich-text-types';
 import find from 'lodash/find';
 import flow from 'lodash/flow';
 import get from 'lodash/get';
+// TODO: Move these into separate package (maybe rich-text-types) and share with FE.
 export const VALIDATIONS = {
     ENABLED_MARKS: 'enabledMarks',
     ENABLED_NODE_TYPES: 'enabledNodeTypes'
@@ -12,9 +13,12 @@ export const DEFAULT_ENABLED_NODE_TYPES = [
     'text'
 ];
 export const VALIDATABLE_NODE_TYPES = [].concat(TOP_LEVEL_BLOCKS).filter((type)=>type !== BLOCKS.PARAGRAPH).concat(Object.values(INLINES));
+// TODO: Memoize
 const getRichTextValidation = (field, validationType)=>flow((v)=>find(v, validationType), (v)=>get(v, validationType))(field.validations);
 const isFormattingOptionEnabled = (field, validationType, nodeTypeOrMark)=>{
     const enabledFormattings = getRichTextValidation(field, validationType);
+    // TODO: In the future, validations will always be opt-in. In that case
+    // we don't need this step.
     if (enabledFormattings === undefined) {
         return true;
     }

package/dist/esm/internal/misc.js

@@ -3,7 +3,27 @@ import { normalize } from './transforms';
 export const createPlateEditor = (options = {})=>{
     return p.createPlateEditor(options);
 };
-export const normalizeInitialValue = (options, initialValue)=>{
+/**
+ * The only reason for this helper to exist is to run the initial normalization
+ * before mounting the Plate editor component which in turn avoids the false
+ * trigger of `onChange`.
+ *
+ * Background:
+ *
+ * Due to legacy behavior, it's possible to have "valid" RT document (based on
+ * the schema from rich-text-types) that doesn't make sense. For example, links
+ * with no text nodes?[1]. Solving that requires an initial normalization pass
+ * which modifies the slate tree by definition -> triggering onChange.
+ *
+ * The initial onChange trigger is undesirable as the user may not have touched
+ * the RT content yet or the editor is rendered as readonly.
+ *
+ * Ideally, we should not initialize the editor twice but that's the only
+ * way that I could get this to work. Improvements are welcome.
+ *
+ * [1]: See cypress/e2e/rich-text/.../invalidDocumentNormalizable.js for more
+ *      examples.
+ */ export const normalizeInitialValue = (options, initialValue)=>{
     const editor = createPlateEditor(options);
     if (initialValue) {
         editor.children = initialValue;
@@ -29,5 +49,6 @@ export const fromDOMPoint = (editor, domPoint, opts = {
     return p.toSlatePoint(editor, domPoint, opts);
 };
 export const mockPlugin = (plugin)=>{
-    return p.mockPlugin(plugin);
+    return p.mockPlugin(// TODO check if there is a way around this ugly casting
+    plugin);
 };

package/dist/esm/internal/queries.js

@@ -1,6 +1,11 @@
-import * as p from '@udecode/plate-common';
+/**
+ * Re-exporting Plate/Slate queries (aka selectors) to reduce
+ * the blast radius of version upgrades
+ */ import * as p from '@udecode/plate-common';
 import * as s from 'slate';
-export const getText = (editor, at)=>{
+/**
+ * Get text content at location
+ */ export const getText = (editor, at)=>{
     return p.getEditorString(editor, at);
 };
 export const isText = (value)=>{
@@ -30,6 +35,7 @@ export const getNodeEntry = (editor, at, options)=>{
 export const getNodeEntries = (editor, options)=>{
     return p.getNodeEntries(editor, options);
 };
+// TODO: Ancestor may not be the correct type for root
 export const getNodeChildren = (root, path, options)=>{
     return p.getNodeChildren(root, path, options);
 };
@@ -40,6 +46,7 @@ export const someNode = (editor, options)=>{
     return p.someNode(editor, options);
 };
 export const getChildren = (entry)=>{
+    // Node.children crashes when given a text node
     if (s.Text.isText(entry[0])) {
         return [];
     }
@@ -49,6 +56,7 @@ export const isFirstChild = (path)=>{
     return p.isFirstChild(path);
 };
 export const getDescendantNodeByPath = (root, path)=>{
+    // @ts-expect-error
     return s.Node.get(root, path);
 };
 export const getNodeDescendants = (root, options)=>{
@@ -60,6 +68,7 @@ export const getNodeDescendants = (root, options)=>{
 export const isRangeCollapsed = (range)=>{
     return p.isCollapsed(range);
 };
+// TODO: simplify
 export const isRangeAcrossBlocks = (editor, options)=>{
     return p.isRangeAcrossBlocks(editor, options);
 };

package/dist/esm/internal/transforms.js

@@ -1,6 +1,8 @@
 import * as p from '@udecode/plate-common';
 import { getEndPoint, isNode } from './queries';
-export const normalize = (editor, options = {
+/**
+ * Apply editor normalization rules
+ */ export const normalize = (editor, options = {
     force: true
 })=>{
     return p.normalizeEditor(editor, options);
@@ -8,7 +10,9 @@ export const normalize = (editor, options = {
 export const withoutNormalizing = (editor, fn)=>{
     return p.withoutNormalizing(editor, fn);
 };
-export const setSelection = (editor, props)=>{
+/**
+ * Set the selection to a location
+ */ export const setSelection = (editor, props)=>{
     return p.setSelection(editor, props);
 };
 export const select = (editor, location)=>{
@@ -77,7 +81,14 @@ export const moveNodes = (editor, opts)=>{
 export const deleteFragment = (editor, options)=>{
     return p.deleteFragment(editor, options);
 };
-export const setEditorValue = (editor, nodes)=>{
+/**
+ * Plate api doesn't allow to modify (easily) the editor value
+ * programmatically after the editor instance is created.
+ *
+ * This function is inspired by:
+ * https://github.com/udecode/plate/issues/1269#issuecomment-1057643622
+ */ export const setEditorValue = (editor, nodes)=>{
+    // Replaces editor content while keeping change history
     withoutNormalizing(editor, ()=>{
         const children = [
             ...editor.children

package/dist/esm/internal/types/editor.js

@@ -1 +1,3 @@
-export { };
+/**
+ * https://plate.udecode.io/docs/typescript
+ */ export { };

package/dist/esm/plugins/Break/createExitBreakPlugin.test.js

@@ -1,9 +1,10 @@
-import { KEY_EXIT_BREAK } from '@udecode/plate-break';
+/** @jsx jsx */ import { KEY_EXIT_BREAK } from '@udecode/plate-break';
 import { jsx, createTestEditor, mockPlugin } from '../../test-utils';
 import { createExitBreakPlugin } from './createExitBreakPlugin';
 describe('Exit Break', ()=>{
+    // https://slate-js.slack.com/archives/C013QHXSCG1/p1640853996467300
     it('derives its config from other plugins', ()=>{
-        const input = jsx("editor", null, jsx("hp", null, jsx("htext", null)));
+        const input = /*#__PURE__*/ jsx("editor", null, /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null)));
         const rules = [
             {
                 hotkey: 'enter',
@@ -14,7 +15,7 @@ describe('Exit Break', ()=>{
                 }
             }
         ];
-        const { editor  } = createTestEditor({
+        const { editor } = createTestEditor({
             input,
             plugins: [
                 mockPlugin({}),

package/dist/esm/plugins/Break/createResetNodePlugin.js

@@ -8,6 +8,7 @@ export const createResetNodePlugin = ()=>createDefaultResetNodePlugin({
             const rules = editor.plugins.flatMap((p)=>{
                 return p.resetNode || [];
             });
+            // set defaultType to Paragraph if not set
             for (const rule of rules){
                 if (!rule.defaultType) {
                     rule.defaultType = BLOCKS.PARAGRAPH;

package/dist/esm/plugins/Break/createSoftBreakPlugin.test.js

@@ -1,9 +1,9 @@
-import { KEY_SOFT_BREAK } from '@udecode/plate-break';
+/** @jsx jsx */ import { KEY_SOFT_BREAK } from '@udecode/plate-break';
 import { jsx, createTestEditor, mockPlugin } from '../../test-utils';
 import { createSoftBreakPlugin } from './createSoftBreakPlugin';
 describe('Soft Break', ()=>{
     it('derives its config from other plugins', ()=>{
-        const input = jsx("editor", null, jsx("hp", null, jsx("htext", null)));
+        const input = /*#__PURE__*/ jsx("editor", null, /*#__PURE__*/ jsx("hp", null, /*#__PURE__*/ jsx("htext", null)));
         const rules = [
             {
                 hotkey: 'ctrl+enter',
@@ -18,7 +18,7 @@ describe('Soft Break', ()=>{
                 }
             }
         ];
-        const { editor  } = createTestEditor({
+        const { editor } = createTestEditor({
             input,
             plugins: [
                 mockPlugin({

package/dist/esm/plugins/CommandPalette/components/CommandList.js

@@ -7,47 +7,47 @@ import { useSdkContext } from '../../../SdkProvider';
 import { useCommandList } from '../hooks/useCommandList';
 import { useCommands } from '../useCommands';
 import styles from './CommandList.styles';
-const Group = ({ commandGroup , selectedItem  })=>React.createElement("section", {
+const Group = ({ commandGroup, selectedItem })=>/*#__PURE__*/ React.createElement("section", {
         key: commandGroup.group
-    }, React.createElement(SectionHeading, {
+    }, /*#__PURE__*/ React.createElement(SectionHeading, {
         as: "h3",
         marginBottom: "spacingS",
         marginTop: "spacingS",
         marginLeft: "spacingM",
         marginRight: "spacingM"
-    }, commandGroup.group), commandGroup.commands.map((command)=>React.createElement("button", {
+    }, commandGroup.group), commandGroup.commands.map((command)=>/*#__PURE__*/ React.createElement("button", {
             key: command.id,
             id: command.id,
             className: cx(styles.menuItem, {
                 [styles.menuItemSelected]: command.id === selectedItem
             }),
             onClick: command.callback
-        }, command.label)), React.createElement("hr", {
+        }, command.label)), /*#__PURE__*/ React.createElement("hr", {
         className: styles.menuDivider,
         "aria-orientation": "horizontal"
     }));
-const Asset = ({ command , selectedItem  })=>React.createElement("button", {
+const Asset = ({ command, selectedItem })=>/*#__PURE__*/ React.createElement("button", {
         key: command.id,
         id: command.id,
         className: cx(styles.menuItem, {
             [styles.menuItemSelected]: command.id === selectedItem
         }),
         onClick: command.callback
-    }, React.createElement(Flex, {
+    }, /*#__PURE__*/ React.createElement(Flex, {
         alignItems: "center",
         gap: "spacingS"
-    }, command.thumbnail ? React.createElement("img", {
+    }, command.thumbnail ? /*#__PURE__*/ React.createElement("img", {
         width: "30",
         height: "30",
         src: command.thumbnail,
         alt: "",
         className: styles.thumbnail
-    }) : React.createElement(AssetIcon, {
+    }) : /*#__PURE__*/ React.createElement(AssetIcon, {
         width: "30",
         height: "30",
         className: styles.thumbnail
-    }), React.createElement("span", null, command.label)));
-const Item = ({ command , selectedItem  })=>React.createElement("button", {
+    }), /*#__PURE__*/ React.createElement("span", null, command.label)));
+const Item = ({ command, selectedItem })=>/*#__PURE__*/ React.createElement("button", {
         key: command.id,
         id: command.id,
         className: cx(styles.menuItem, {
@@ -55,70 +55,70 @@ const Item = ({ command , selectedItem  })=>React.createElement("button", {
         }),
         onClick: command.callback
     }, command.label);
-const CommandListItems = ({ commandItems , selectedItem  })=>{
-    return React.createElement(React.Fragment, null, commandItems.map((command)=>{
-        return 'group' in command ? React.createElement(Group, {
+const CommandListItems = ({ commandItems, selectedItem })=>{
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, commandItems.map((command)=>{
+        return 'group' in command ? /*#__PURE__*/ React.createElement(Group, {
             key: command.group,
             commandGroup: command,
             selectedItem: selectedItem
-        }) : command.asset ? React.createElement(Asset, {
+        }) : command.asset ? /*#__PURE__*/ React.createElement(Asset, {
             key: command.id,
             command: command,
             selectedItem: selectedItem
-        }) : React.createElement(Item, {
+        }) : /*#__PURE__*/ React.createElement(Item, {
             key: command.id,
             command: command,
             selectedItem: selectedItem
         });
     }));
 };
-export const CommandList = ({ query , editor , textContainer  })=>{
+export const CommandList = ({ query, editor, textContainer })=>{
     const sdk = useSdkContext();
     const popoverContainer = React.useRef(null);
     const popper = usePopper(textContainer, popoverContainer?.current, {
         placement: 'bottom-start'
     });
     const commandItems = useCommands(sdk, query, editor);
-    const { selectedItem , isOpen  } = useCommandList(commandItems, popoverContainer);
+    const { selectedItem, isOpen } = useCommandList(commandItems, popoverContainer);
     if (!commandItems.length) {
         return null;
     }
-    return React.createElement("div", {
+    return /*#__PURE__*/ React.createElement("div", {
         className: styles.container,
         tabIndex: -1,
         contentEditable: false
-    }, React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement("div", {
         role: "alert"
-    }, React.createElement(ScreenReaderOnly, null, "Richtext commands. Currently focused item: ", selectedItem, ". Press ", React.createElement("kbd", null, "enter"), " to select, ", React.createElement("kbd", null, "arrows"), " to navigate, ", React.createElement("kbd", null, "escape"), " to close.")), React.createElement(Portal, null, React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(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(Portal, null, /*#__PURE__*/ React.createElement("div", {
         "aria-hidden": true,
         ref: popoverContainer,
         className: styles.menuPoper,
         style: popper.styles.popper,
         ...popper.attributes.popper
-    }, React.createElement(Popover, {
+    }, /*#__PURE__*/ React.createElement(Popover, {
         isOpen: isOpen,
         usePortal: false,
-        autoFocus: false
-    }, React.createElement(Popover.Trigger, null, React.createElement("span", null)), React.createElement(Popover.Content, {
+        /* eslint-disable-next-line jsx-a11y/no-autofocus -- we want to keep focus on text input*/ autoFocus: false
+    }, /*#__PURE__*/ React.createElement(Popover.Trigger, null, /*#__PURE__*/ React.createElement("span", null)), /*#__PURE__*/ React.createElement(Popover.Content, {
         className: styles.menuContent,
         testId: "rich-text-commands"
-    }, React.createElement("header", {
+    }, /*#__PURE__*/ React.createElement("header", {
         className: styles.menuHeader
-    }, React.createElement(SectionHeading, {
+    }, /*#__PURE__*/ React.createElement(SectionHeading, {
         marginBottom: "none"
-    }, "Richtext commands")), React.createElement("div", {
+    }, "Richtext commands")), /*#__PURE__*/ React.createElement("div", {
         className: styles.menuList,
         "data-test-id": "rich-text-commands-list"
-    }, React.createElement(CommandListItems, {
+    }, /*#__PURE__*/ React.createElement(CommandListItems, {
         commandItems: commandItems,
         selectedItem: selectedItem
-    })), React.createElement("footer", {
+    })), /*#__PURE__*/ React.createElement("footer", {
         className: styles.menuFooter
-    }, React.createElement(Stack, {
+    }, /*#__PURE__*/ React.createElement(Stack, {
         as: "ul",
         margin: "none",
         padding: "none",
         spacing: "spacingS",
         className: styles.footerList
-    }, React.createElement("li", null, React.createElement("kbd", null, "↑"), React.createElement("kbd", null, "↓"), " to navigate"), React.createElement("li", null, React.createElement("kbd", null, "↵"), " to confirm"), React.createElement("li", null, React.createElement("kbd", null, "esc"), " to close"))))))));
+    }, /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("kbd", null, "↑"), /*#__PURE__*/ React.createElement("kbd", null, "↓"), " to navigate"), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("kbd", null, "↵"), " to confirm"), /*#__PURE__*/ React.createElement("li", null, /*#__PURE__*/ React.createElement("kbd", null, "esc"), " to close"))))))));
 };