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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -9,15 +9,17 @@ import noop from 'lodash-es/noop';
9
9
  import { createDeserializeDocxPlugin } from '@udecode/plate-serializer-docx';
10
10
  import { createSoftBreakPlugin as createSoftBreakPlugin$1, createExitBreakPlugin as createExitBreakPlugin$1 } from '@udecode/plate-break';
11
11
  import { createResetNodePlugin as createResetNodePlugin$1, onKeyDownResetNode, SIMULATE_BACKSPACE } from '@udecode/plate-reset-node';
12
- import { Text, Element, Editor, Transforms, Range, Path, Node, Point } from 'slate';
13
- import { ReactEditor, useSelected, useReadOnly, useFocused } from 'slate-react';
12
+ import { usePopper } from 'react-popper';
14
13
  import { ScreenReaderOnly, Popover, SectionHeading, Stack, Flex, AssetCard, EntryCard, Menu, Icon, InlineEntryCard, MenuItem, Text as Text$1, Button, Tooltip, ModalContent, Form, FormControl, TextInput, Select, FormLabel, TextLink, ModalControls, IconButton } from '@contentful/f36-components';
14
+ import { Portal } from '@contentful/f36-utils';
15
15
  import constate from 'constate';
16
16
  import isHotkey from 'is-hotkey';
17
- import tokens from '@contentful/f36-tokens';
17
+ import { Text, Element, Editor, Transforms, Range, Path, Node, Point } from 'slate';
18
+ import { ReactEditor, useSelected, useReadOnly, useFocused } from 'slate-react';
18
19
  import find from 'lodash-es/find';
19
20
  import flow from 'lodash-es/flow';
20
21
  import get from 'lodash-es/get';
22
+ import tokens from '@contentful/f36-tokens';
21
23
  import { AssetIcon, EmbeddedEntryBlockIcon, ClockIcon, EmbeddedEntryInlineIcon, ChevronDownIcon, HorizontalRuleIcon, LinkIcon, ListBulletedIcon, ListNumberedIcon, FormatBoldIcon, CodeIcon, FormatItalicIcon, FormatUnderlinedIcon, QuoteIcon, TableIcon, PlusIcon } from '@contentful/f36-icons';
22
24
  import { getListTypes, ELEMENT_LIC, getListItemEntry, isListNested, moveListItemUp, ELEMENT_LI, unwrapList as unwrapList$1, removeFirstListItem, removeListItem, deleteForwardList, deleteFragmentList, normalizeList, createListPlugin as createListPlugin$1, ELEMENT_UL, ELEMENT_OL } from '@udecode/plate-list';
23
25
  import castArray from 'lodash-es/castArray';
@@ -334,6 +336,131 @@ var createResetNodePlugin = function createResetNodePlugin() {
334
336
  });
335
337
  };
336
338
 
339
+ /**
340
+ * Trim leading slash character if found. Bails otherwise.
341
+ *
342
+ * @example
343
+ * trimLeadingSlash("/my query") // --> "my query"
344
+ */
345
+ function trimLeadingSlash(text) {
346
+ if (!text.startsWith('/')) {
347
+ return text;
348
+ }
349
+
350
+ return text.slice(1);
351
+ }
352
+
353
+ function useSdk(_ref) {
354
+ var sdk = _ref.sdk;
355
+ var sdkMemo = useMemo(function () {
356
+ return sdk;
357
+ }, []); // eslint-disable-line -- TODO: explain this disable
358
+
359
+ return sdkMemo;
360
+ }
361
+
362
+ var _constate = /*#__PURE__*/constate(useSdk),
363
+ SdkProvider = _constate[0],
364
+ useSdkContext = _constate[1];
365
+
366
+ var useCommandList = function useCommandList(commandItems, container) {
367
+ var _React$useState = useState(function () {
368
+ // select the first item on initial render
369
+ if ('group' in commandItems[0]) {
370
+ return commandItems[0].commands[0].id;
371
+ }
372
+
373
+ return commandItems[0].id;
374
+ }),
375
+ selectedItem = _React$useState[0],
376
+ setSelectedItem = _React$useState[1];
377
+
378
+ var _React$useState2 = useState(commandItems.length > 0),
379
+ isOpen = _React$useState2[0],
380
+ setIsOpen = _React$useState2[1];
381
+
382
+ useEffect(function () {
383
+ if (!container.current) {
384
+ return;
385
+ }
386
+
387
+ var buttons = Array.from(container.current.querySelectorAll('button'));
388
+ var currBtn = buttons.find(function (btn) {
389
+ return btn.id === selectedItem;
390
+ });
391
+ var currIndex = currBtn ? buttons.indexOf(currBtn) : 0;
392
+ var shouldSelectFirstBtn = !currBtn && buttons.length;
393
+
394
+ if (shouldSelectFirstBtn) {
395
+ setSelectedItem(buttons[0].id);
396
+ buttons[0].scrollIntoView({
397
+ block: 'nearest',
398
+ inline: 'start'
399
+ });
400
+ }
401
+
402
+ function handleKeyDown(event) {
403
+ if (isHotkey('up', event)) {
404
+ event.preventDefault();
405
+
406
+ if (currIndex === 0) {
407
+ return;
408
+ }
409
+
410
+ setSelectedItem(buttons[currIndex - 1].id);
411
+ buttons[currIndex - 1].scrollIntoView({
412
+ block: 'nearest',
413
+ inline: 'start'
414
+ });
415
+ } else if (isHotkey('down', event)) {
416
+ event.preventDefault();
417
+
418
+ if (currIndex === buttons.length - 1) {
419
+ return;
420
+ }
421
+
422
+ setSelectedItem(buttons[currIndex + 1].id);
423
+ buttons[currIndex + 1].scrollIntoView({
424
+ block: 'nearest',
425
+ inline: 'start'
426
+ });
427
+ } else if (isHotkey('enter', event)) {
428
+ event.preventDefault();
429
+
430
+ if (currBtn) {
431
+ setSelectedItem('');
432
+ currBtn.click();
433
+ }
434
+ } //TODO: handle shift+enter, which must be detected using separate events
435
+
436
+ }
437
+
438
+ if (commandItems.length) {
439
+ window.addEventListener('keydown', handleKeyDown);
440
+ }
441
+
442
+ return function () {
443
+ return window.removeEventListener('keydown', handleKeyDown);
444
+ };
445
+ }, [commandItems, container, selectedItem]);
446
+ useEffect(function () {
447
+ var handleMousedown = function handleMousedown(event) {
448
+ if (container.current && !container.current.contains(event.target)) {
449
+ setIsOpen(false);
450
+ }
451
+ };
452
+
453
+ document.addEventListener('mousedown', handleMousedown);
454
+ return function () {
455
+ document.removeEventListener('mousedown', handleMousedown);
456
+ };
457
+ }, [container]);
458
+ return {
459
+ selectedItem: selectedItem,
460
+ isOpen: isOpen
461
+ };
462
+ };
463
+
337
464
  var IS_SAFARI = typeof navigator !== 'undefined' && /*#__PURE__*/ /Version\/[\d.]+.*Safari/.test(navigator.userAgent);
338
465
  var IS_CHROME = /*#__PURE__*/ /(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9.]+)(:?\s|$)/.test(navigator.userAgent);
339
466
 
@@ -538,129 +665,36 @@ function toggleElement(editor, options, editorOptions) {
538
665
  });
539
666
  }
540
667
 
541
- /**
542
- * Trim leading slash character if found. Bails otherwise.
543
- *
544
- * @example
545
- * trimLeadingSlash("/my query") // --> "my query"
546
- */
547
- function trimLeadingSlash(text) {
548
- if (!text.startsWith('/')) {
549
- return text;
550
- }
551
-
552
- return text.slice(1);
553
- }
554
-
555
- function useSdk(_ref) {
556
- var sdk = _ref.sdk;
557
- var sdkMemo = useMemo(function () {
558
- return sdk;
559
- }, []); // eslint-disable-line -- TODO: explain this disable
560
-
561
- return sdkMemo;
562
- }
563
-
564
- var _constate = /*#__PURE__*/constate(useSdk),
565
- SdkProvider = _constate[0],
566
- useSdkContext = _constate[1];
567
-
568
- var useCommandList = function useCommandList(commandItems, container) {
569
- var _React$useState = useState(function () {
570
- // select the first item on initial render
571
- if ('group' in commandItems[0]) {
572
- return commandItems[0].commands[0].id;
573
- }
574
-
575
- return commandItems[0].id;
576
- }),
577
- selectedItem = _React$useState[0],
578
- setSelectedItem = _React$useState[1];
579
-
580
- var _React$useState2 = useState(commandItems.length > 0),
581
- isOpen = _React$useState2[0],
582
- setIsOpen = _React$useState2[1];
583
-
584
- useEffect(function () {
585
- if (!(container != null && container.current)) {
586
- return;
587
- }
588
-
589
- var buttons = Array.from(container.current.querySelectorAll('button'));
590
- var currBtn = buttons.find(function (btn) {
591
- return btn.id === selectedItem;
592
- });
593
- var currIndex = currBtn ? buttons.indexOf(currBtn) : 0;
594
- var shouldSelectFirstBtn = !currBtn && buttons.length;
595
-
596
- if (shouldSelectFirstBtn) {
597
- setSelectedItem(buttons[0].id);
598
- buttons[0].scrollIntoView({
599
- block: 'nearest',
600
- inline: 'start'
601
- });
602
- }
603
-
604
- function handleKeyDown(event) {
605
- if (isHotkey('up', event)) {
606
- event.preventDefault();
607
-
608
- if (currIndex === 0) {
609
- return;
610
- }
611
-
612
- setSelectedItem(buttons[currIndex - 1].id);
613
- buttons[currIndex - 1].scrollIntoView({
614
- block: 'nearest',
615
- inline: 'start'
616
- });
617
- } else if (isHotkey('down', event)) {
618
- event.preventDefault();
619
-
620
- if (currIndex === buttons.length - 1) {
621
- return;
622
- }
623
-
624
- setSelectedItem(buttons[currIndex + 1].id);
625
- buttons[currIndex + 1].scrollIntoView({
626
- block: 'nearest',
627
- inline: 'start'
628
- });
629
- } else if (isHotkey('enter', event)) {
630
- event.preventDefault();
668
+ var VALIDATIONS = {
669
+ ENABLED_MARKS: 'enabledMarks',
670
+ ENABLED_NODE_TYPES: 'enabledNodeTypes'
671
+ };
672
+ var DEFAULT_ENABLED_NODE_TYPES = [BLOCKS.DOCUMENT, BLOCKS.PARAGRAPH, 'text'];
631
673
 
632
- if (currBtn) {
633
- setSelectedItem('');
634
- currBtn.click();
635
- }
636
- } //TODO: handle shift+enter, which must be detected using separate events
674
+ var getRichTextValidation = function getRichTextValidation(field, validationType) {
675
+ return flow(function (v) {
676
+ return find(v, validationType);
677
+ }, function (v) {
678
+ return get(v, validationType);
679
+ })(field.validations);
680
+ };
637
681
 
638
- }
682
+ var isFormattingOptionEnabled = function isFormattingOptionEnabled(field, validationType, nodeTypeOrMark) {
683
+ var enabledFormattings = getRichTextValidation(field, validationType); // TODO: In the future, validations will always be opt-in. In that case
684
+ // we don't need this step.
639
685
 
640
- if (commandItems.length) {
641
- window.addEventListener('keydown', handleKeyDown);
642
- }
686
+ if (enabledFormattings === undefined) {
687
+ return true;
688
+ }
643
689
 
644
- return function () {
645
- return window.removeEventListener('keydown', handleKeyDown);
646
- };
647
- }, [commandItems, container, selectedItem]);
648
- useEffect(function () {
649
- var handleClick = function handleClick(event) {
650
- if (container.current && !container.current.contains(event.target)) {
651
- setIsOpen(false);
652
- }
653
- };
690
+ return DEFAULT_ENABLED_NODE_TYPES.concat(enabledFormattings).includes(nodeTypeOrMark);
691
+ };
654
692
 
655
- document.addEventListener('click', handleClick);
656
- return function () {
657
- document.removeEventListener('click', handleClick);
658
- };
659
- }, [container]);
660
- return {
661
- selectedItem: selectedItem,
662
- isOpen: isOpen
663
- };
693
+ var isNodeTypeEnabled = function isNodeTypeEnabled(field, nodeType) {
694
+ return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_NODE_TYPES, nodeType);
695
+ };
696
+ var isMarkEnabled = function isMarkEnabled(field, mark) {
697
+ return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_MARKS, mark);
664
698
  };
665
699
 
666
700
  var COMMAND_PROMPT = 'command-prompt';
@@ -1572,38 +1606,124 @@ var removeQuery = function removeQuery(editor) {
1572
1606
 
1573
1607
  var useCommands = function useCommands(sdk, query, editor) {
1574
1608
  var contentTypes = sdk.space.getCachedContentTypes();
1609
+ var canInsertBlocks = !isNodeTypeSelected(editor, BLOCKS.TABLE);
1610
+ var inlineAllowed = isNodeTypeEnabled(sdk.field, INLINES.EMBEDDED_ENTRY);
1611
+ var entriesAllowed = isNodeTypeEnabled(sdk.field, BLOCKS.EMBEDDED_ENTRY) && canInsertBlocks;
1612
+ var assetsAllowed = isNodeTypeEnabled(sdk.field, BLOCKS.EMBEDDED_ASSET) && canInsertBlocks;
1575
1613
 
1576
1614
  var _useState = useState(function () {
1577
- var contentTypeCommands = contentTypes.map(function (contentType) {
1615
+ var getEmbedEntry = function getEmbedEntry(contentType) {
1616
+ return {
1617
+ id: contentType.sys.id,
1618
+ label: "Embed " + contentType.name,
1619
+ callback: function callback() {
1620
+ fetchEntries(sdk, contentType, query).then(function (entries) {
1621
+ removeQuery(editor);
1622
+
1623
+ if (!entries.length) {
1624
+ setCommands([{
1625
+ id: 'no-results',
1626
+ label: 'No results'
1627
+ }]);
1628
+ } else {
1629
+ setCommands(entries.map(function (entry) {
1630
+ return {
1631
+ id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
1632
+ label: entry.displayTitle,
1633
+ callback: function callback() {
1634
+ removeCommand(editor);
1635
+
1636
+ if (editor.selection) {
1637
+ var selection = editor.selection;
1638
+ editor.insertSoftBreak();
1639
+ insertBlock(editor, BLOCKS.EMBEDDED_ENTRY, entry.entry);
1640
+ Transforms.select(editor, selection);
1641
+ editor.tracking.onCommandPaletteAction('insert', {
1642
+ nodeType: BLOCKS.EMBEDDED_ENTRY
1643
+ });
1644
+ }
1645
+ }
1646
+ };
1647
+ }));
1648
+ }
1649
+ });
1650
+ }
1651
+ };
1652
+ };
1653
+
1654
+ var getEmbedInline = function getEmbedInline(contentType) {
1655
+ return {
1656
+ id: contentType.sys.id + "-inline",
1657
+ label: "Embed " + contentType.name + " - Inline",
1658
+ callback: function callback() {
1659
+ fetchEntries(sdk, contentType, query).then(function (entries) {
1660
+ removeQuery(editor);
1661
+
1662
+ if (!entries.length) {
1663
+ setCommands([{
1664
+ id: 'no-results',
1665
+ label: 'No results'
1666
+ }]);
1667
+ } else {
1668
+ setCommands(entries.map(function (entry) {
1669
+ return {
1670
+ id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
1671
+ label: entry.displayTitle,
1672
+ callback: function callback() {
1673
+ var inlineNode = createInlineEntryNode(entry.id);
1674
+ removeCommand(editor);
1675
+ Transforms.insertNodes(editor, inlineNode);
1676
+ editor.insertText('');
1677
+ editor.tracking.onCommandPaletteAction('insert', {
1678
+ nodeType: INLINES.EMBEDDED_ENTRY
1679
+ });
1680
+ }
1681
+ };
1682
+ }));
1683
+ }
1684
+ });
1685
+ }
1686
+ };
1687
+ };
1688
+
1689
+ var contentTypeCommands = entriesAllowed || inlineAllowed ? contentTypes.map(function (contentType) {
1578
1690
  return {
1579
1691
  group: contentType.name,
1692
+ commands: entriesAllowed && inlineAllowed ? [getEmbedEntry(contentType), getEmbedInline(contentType)] : entriesAllowed ? [getEmbedEntry(contentType)] : [getEmbedInline(contentType)]
1693
+ };
1694
+ }) : [];
1695
+
1696
+ if (assetsAllowed) {
1697
+ var assetCommand = {
1698
+ group: 'Assets',
1580
1699
  commands: [{
1581
- id: contentType.sys.id,
1582
- label: "Embed " + contentType.name,
1700
+ id: 'embed-asset',
1701
+ label: 'Embed Asset',
1583
1702
  callback: function callback() {
1584
- fetchEntries(sdk, contentType, query).then(function (entries) {
1703
+ fetchAssets(sdk, query).then(function (assets) {
1585
1704
  removeQuery(editor);
1586
1705
 
1587
- if (!entries.length) {
1706
+ if (!assets.length) {
1588
1707
  setCommands([{
1589
1708
  id: 'no-results',
1590
1709
  label: 'No results'
1591
1710
  }]);
1592
1711
  } else {
1593
- setCommands(entries.map(function (entry) {
1712
+ setCommands(assets.map(function (asset) {
1594
1713
  return {
1595
- id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
1596
- label: entry.displayTitle,
1714
+ id: asset.id + "-" + asset.displayTitle.replace(/\W+/g, '-').toLowerCase(),
1715
+ label: asset.displayTitle,
1716
+ thumbnail: asset.thumbnail,
1597
1717
  callback: function callback() {
1598
1718
  removeCommand(editor);
1599
1719
 
1600
1720
  if (editor.selection) {
1601
1721
  var selection = editor.selection;
1602
1722
  editor.insertSoftBreak();
1603
- insertBlock(editor, BLOCKS.EMBEDDED_ENTRY, entry.entry);
1723
+ insertBlock(editor, BLOCKS.EMBEDDED_ASSET, asset.entity);
1604
1724
  Transforms.select(editor, selection);
1605
1725
  editor.tracking.onCommandPaletteAction('insert', {
1606
- nodeType: BLOCKS.EMBEDDED_ENTRY
1726
+ nodeType: BLOCKS.EMBEDDED_ASSET
1607
1727
  });
1608
1728
  }
1609
1729
  }
@@ -1612,81 +1732,12 @@ var useCommands = function useCommands(sdk, query, editor) {
1612
1732
  }
1613
1733
  });
1614
1734
  }
1615
- }, {
1616
- id: contentType.sys.id + "-inline",
1617
- label: "Embed " + contentType.name + " - Inline",
1618
- callback: function callback() {
1619
- fetchEntries(sdk, contentType, query).then(function (entries) {
1620
- removeQuery(editor);
1621
-
1622
- if (!entries.length) {
1623
- setCommands([{
1624
- id: 'no-results',
1625
- label: 'No results'
1626
- }]);
1627
- } else {
1628
- setCommands(entries.map(function (entry) {
1629
- return {
1630
- id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
1631
- label: entry.displayTitle,
1632
- callback: function callback() {
1633
- var inlineNode = createInlineEntryNode(entry.id);
1634
- removeCommand(editor);
1635
- Transforms.insertNodes(editor, inlineNode);
1636
- editor.insertText('');
1637
- editor.tracking.onCommandPaletteAction('insert', {
1638
- nodeType: INLINES.EMBEDDED_ENTRY
1639
- });
1640
- }
1641
- };
1642
- }));
1643
- }
1644
- });
1645
- }
1646
1735
  }]
1647
1736
  };
1648
- });
1649
- var assetCommand = {
1650
- group: 'Assets',
1651
- commands: [{
1652
- id: 'embed-asset',
1653
- label: 'Embed Asset',
1654
- callback: function callback() {
1655
- fetchAssets(sdk, query).then(function (assets) {
1656
- removeQuery(editor);
1657
-
1658
- if (!assets.length) {
1659
- setCommands([{
1660
- id: 'no-results',
1661
- label: 'No results'
1662
- }]);
1663
- } else {
1664
- setCommands(assets.map(function (asset) {
1665
- return {
1666
- id: asset.id + "-" + asset.displayTitle.replace(/\W+/g, '-').toLowerCase(),
1667
- label: asset.displayTitle,
1668
- thumbnail: asset.thumbnail,
1669
- callback: function callback() {
1670
- removeCommand(editor);
1737
+ return [].concat(contentTypeCommands, [assetCommand]);
1738
+ }
1671
1739
 
1672
- if (editor.selection) {
1673
- var selection = editor.selection;
1674
- editor.insertSoftBreak();
1675
- insertBlock(editor, BLOCKS.EMBEDDED_ASSET, asset.entity);
1676
- Transforms.select(editor, selection);
1677
- editor.tracking.onCommandPaletteAction('insert', {
1678
- nodeType: BLOCKS.EMBEDDED_ASSET
1679
- });
1680
- }
1681
- }
1682
- };
1683
- }));
1684
- }
1685
- });
1686
- }
1687
- }]
1688
- };
1689
- return [].concat(contentTypeCommands, [assetCommand]);
1740
+ return contentTypeCommands;
1690
1741
  }),
1691
1742
  commands = _useState[0],
1692
1743
  setCommands = _useState[1];
@@ -1772,7 +1823,6 @@ var styles = {
1772
1823
  margin: tokens.spacingXs + " 0"
1773
1824
  }),
1774
1825
  menuHeader: /*#__PURE__*/css({
1775
- position: 'sticky',
1776
1826
  zIndex: tokens.zIndexDefault,
1777
1827
  top: 0,
1778
1828
  backgroundColor: tokens.gray100,
@@ -1871,25 +1921,34 @@ var CommandListItems = function CommandListItems(_ref4) {
1871
1921
 
1872
1922
  var CommandList = function CommandList(_ref5) {
1873
1923
  var query = _ref5.query,
1874
- editor = _ref5.editor;
1924
+ editor = _ref5.editor,
1925
+ textContainer = _ref5.textContainer;
1875
1926
  var sdk = useSdkContext();
1876
- var container = useRef(null);
1927
+ var popoverContainer = useRef(null);
1928
+ var popper = usePopper(textContainer, popoverContainer == null ? void 0 : popoverContainer.current, {
1929
+ placement: 'bottom-start'
1930
+ });
1877
1931
  var commandItems = useCommands(sdk, query, editor);
1878
1932
 
1879
- var _useCommandList = useCommandList(commandItems, container),
1933
+ var _useCommandList = useCommandList(commandItems, popoverContainer),
1880
1934
  selectedItem = _useCommandList.selectedItem,
1881
1935
  isOpen = _useCommandList.isOpen;
1882
1936
 
1937
+ if (!commandItems.length) {
1938
+ return null;
1939
+ }
1940
+
1883
1941
  return /*#__PURE__*/createElement("div", {
1884
1942
  className: styles.container,
1885
1943
  tabIndex: -1,
1886
- ref: container,
1887
1944
  contentEditable: false
1888
1945
  }, /*#__PURE__*/createElement("div", {
1889
1946
  role: "alert"
1890
- }, /*#__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", {
1891
- "aria-hidden": true
1892
- }, /*#__PURE__*/createElement(Popover, {
1947
+ }, /*#__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(Portal, null, /*#__PURE__*/createElement("div", Object.assign({
1948
+ "aria-hidden": true,
1949
+ ref: popoverContainer,
1950
+ style: popper.styles.popper
1951
+ }, popper.attributes.popper), /*#__PURE__*/createElement(Popover, {
1893
1952
  isOpen: isOpen,
1894
1953
  usePortal: false,
1895
1954
 
@@ -1916,7 +1975,7 @@ var CommandList = function CommandList(_ref5) {
1916
1975
  padding: "none",
1917
1976
  spacing: "spacingS",
1918
1977
  className: styles.footerList
1919
- }, /*#__PURE__*/createElement("li", null, /*#__PURE__*/createElement("kbd", null, "\u2191"), /*#__PURE__*/createElement("kbd", null, "\u2193"), " to navigate"), /*#__PURE__*/createElement("li", null, /*#__PURE__*/createElement("kbd", null, "\u21B5"), " to confirm"), /*#__PURE__*/createElement("li", null, /*#__PURE__*/createElement("kbd", null, "esc"), " to close")))))));
1978
+ }, /*#__PURE__*/createElement("li", null, /*#__PURE__*/createElement("kbd", null, "\u2191"), /*#__PURE__*/createElement("kbd", null, "\u2193"), " to navigate"), /*#__PURE__*/createElement("li", null, /*#__PURE__*/createElement("kbd", null, "\u21B5"), " to confirm"), /*#__PURE__*/createElement("li", null, /*#__PURE__*/createElement("kbd", null, "esc"), " to close"))))))));
1920
1979
  };
1921
1980
 
1922
1981
  var CommandPrompt = function CommandPrompt(props) {
@@ -1924,10 +1983,19 @@ var CommandPrompt = function CommandPrompt(props) {
1924
1983
  return trimLeadingSlash(props.text.text);
1925
1984
  }, [props.text.text]);
1926
1985
  var editor = props.editor;
1927
- var canInsertBlocks = !isNodeTypeSelected(editor, BLOCKS.TABLE);
1928
- return /*#__PURE__*/createElement("span", Object.assign({}, props.attributes), props.children, canInsertBlocks && /*#__PURE__*/createElement(CommandList, {
1986
+
1987
+ var _React$useState = useState(),
1988
+ textElement = _React$useState[0],
1989
+ setTextElement = _React$useState[1];
1990
+
1991
+ return /*#__PURE__*/createElement("span", Object.assign({
1992
+ ref: function ref(e) {
1993
+ setTextElement(e);
1994
+ }
1995
+ }, props.attributes), props.children, /*#__PURE__*/createElement(CommandList, {
1929
1996
  query: query,
1930
- editor: editor
1997
+ editor: editor,
1998
+ textContainer: textElement
1931
1999
  }));
1932
2000
  };
1933
2001
 
@@ -2970,38 +3038,6 @@ function getWithEmbeddedEntryInlineEvents(sdk) {
2970
3038
  };
2971
3039
  }
2972
3040
 
2973
- var VALIDATIONS = {
2974
- ENABLED_MARKS: 'enabledMarks',
2975
- ENABLED_NODE_TYPES: 'enabledNodeTypes'
2976
- };
2977
- var DEFAULT_ENABLED_NODE_TYPES = [BLOCKS.DOCUMENT, BLOCKS.PARAGRAPH, 'text'];
2978
-
2979
- var getRichTextValidation = function getRichTextValidation(field, validationType) {
2980
- return flow(function (v) {
2981
- return find(v, validationType);
2982
- }, function (v) {
2983
- return get(v, validationType);
2984
- })(field.validations);
2985
- };
2986
-
2987
- var isFormattingOptionEnabled = function isFormattingOptionEnabled(field, validationType, nodeTypeOrMark) {
2988
- var enabledFormattings = getRichTextValidation(field, validationType); // TODO: In the future, validations will always be opt-in. In that case
2989
- // we don't need this step.
2990
-
2991
- if (enabledFormattings === undefined) {
2992
- return true;
2993
- }
2994
-
2995
- return DEFAULT_ENABLED_NODE_TYPES.concat(enabledFormattings).includes(nodeTypeOrMark);
2996
- };
2997
-
2998
- var isNodeTypeEnabled = function isNodeTypeEnabled(field, nodeType) {
2999
- return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_NODE_TYPES, nodeType);
3000
- };
3001
- var isMarkEnabled = function isMarkEnabled(field, mark) {
3002
- return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_MARKS, mark);
3003
- };
3004
-
3005
3041
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _dropdown, _LABELS;
3006
3042
  var styles$5 = {
3007
3043
  dropdown: (_dropdown = {