@contentful/field-editor-rich-text 2.1.2 → 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,112 +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
- useEffect(function () {
581
- if (!(container != null && container.current)) {
582
- return;
583
- }
584
-
585
- var buttons = Array.from(container.current.querySelectorAll('button'));
586
- var currBtn = buttons.find(function (btn) {
587
- return btn.id === selectedItem;
588
- });
589
- var currIndex = currBtn ? buttons.indexOf(currBtn) : 0;
590
- var shouldSelectFirstBtn = !currBtn && buttons.length;
591
-
592
- if (shouldSelectFirstBtn) {
593
- setSelectedItem(buttons[0].id);
594
- buttons[0].scrollIntoView({
595
- block: 'nearest',
596
- inline: 'start'
597
- });
598
- }
599
-
600
- function handleKeyDown(event) {
601
- if (isHotkey('up', event)) {
602
- event.preventDefault();
603
-
604
- if (currIndex === 0) {
605
- return;
606
- }
607
-
608
- setSelectedItem(buttons[currIndex - 1].id);
609
- buttons[currIndex - 1].scrollIntoView({
610
- block: 'nearest',
611
- inline: 'start'
612
- });
613
- } else if (isHotkey('down', event)) {
614
- event.preventDefault();
615
-
616
- if (currIndex === buttons.length - 1) {
617
- return;
618
- }
668
+ var VALIDATIONS = {
669
+ ENABLED_MARKS: 'enabledMarks',
670
+ ENABLED_NODE_TYPES: 'enabledNodeTypes'
671
+ };
672
+ var DEFAULT_ENABLED_NODE_TYPES = [BLOCKS.DOCUMENT, BLOCKS.PARAGRAPH, 'text'];
619
673
 
620
- setSelectedItem(buttons[currIndex + 1].id);
621
- buttons[currIndex + 1].scrollIntoView({
622
- block: 'nearest',
623
- inline: 'start'
624
- });
625
- } else if (isHotkey('enter', event)) {
626
- event.preventDefault();
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
+ };
627
681
 
628
- if (currBtn) {
629
- setSelectedItem('');
630
- currBtn.click();
631
- }
632
- } //TODO: handle shift+enter, which must be detected using separate events
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.
633
685
 
634
- }
686
+ if (enabledFormattings === undefined) {
687
+ return true;
688
+ }
635
689
 
636
- if (commandItems.length) {
637
- window.addEventListener('keydown', handleKeyDown);
638
- }
690
+ return DEFAULT_ENABLED_NODE_TYPES.concat(enabledFormattings).includes(nodeTypeOrMark);
691
+ };
639
692
 
640
- return function () {
641
- return window.removeEventListener('keydown', handleKeyDown);
642
- };
643
- }, [commandItems, container, selectedItem]);
644
- return {
645
- selectedItem: selectedItem
646
- };
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);
647
698
  };
648
699
 
649
700
  var COMMAND_PROMPT = 'command-prompt';
@@ -1555,36 +1606,125 @@ var removeQuery = function removeQuery(editor) {
1555
1606
 
1556
1607
  var useCommands = function useCommands(sdk, query, editor) {
1557
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;
1558
1613
 
1559
1614
  var _useState = useState(function () {
1560
- 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) {
1561
1690
  return {
1562
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',
1563
1699
  commands: [{
1564
- id: contentType.sys.id,
1565
- label: "Embed " + contentType.name,
1700
+ id: 'embed-asset',
1701
+ label: 'Embed Asset',
1566
1702
  callback: function callback() {
1567
- fetchEntries(sdk, contentType, query).then(function (entries) {
1703
+ fetchAssets(sdk, query).then(function (assets) {
1568
1704
  removeQuery(editor);
1569
1705
 
1570
- if (!entries.length) {
1706
+ if (!assets.length) {
1571
1707
  setCommands([{
1572
1708
  id: 'no-results',
1573
1709
  label: 'No results'
1574
1710
  }]);
1575
1711
  } else {
1576
- setCommands(entries.map(function (entry) {
1712
+ setCommands(assets.map(function (asset) {
1577
1713
  return {
1578
- id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
1579
- label: entry.displayTitle,
1714
+ id: asset.id + "-" + asset.displayTitle.replace(/\W+/g, '-').toLowerCase(),
1715
+ label: asset.displayTitle,
1716
+ thumbnail: asset.thumbnail,
1580
1717
  callback: function callback() {
1581
1718
  removeCommand(editor);
1582
1719
 
1583
1720
  if (editor.selection) {
1584
1721
  var selection = editor.selection;
1585
1722
  editor.insertSoftBreak();
1586
- insertBlock(editor, BLOCKS.EMBEDDED_ENTRY, entry.entry);
1723
+ insertBlock(editor, BLOCKS.EMBEDDED_ASSET, asset.entity);
1587
1724
  Transforms.select(editor, selection);
1725
+ editor.tracking.onCommandPaletteAction('insert', {
1726
+ nodeType: BLOCKS.EMBEDDED_ASSET
1727
+ });
1588
1728
  }
1589
1729
  }
1590
1730
  };
@@ -1592,75 +1732,12 @@ var useCommands = function useCommands(sdk, query, editor) {
1592
1732
  }
1593
1733
  });
1594
1734
  }
1595
- }, {
1596
- id: contentType.sys.id + "-inline",
1597
- label: "Embed " + contentType.name + " - Inline",
1598
- callback: function callback() {
1599
- fetchEntries(sdk, contentType, query).then(function (entries) {
1600
- removeQuery(editor);
1601
-
1602
- if (!entries.length) {
1603
- setCommands([{
1604
- id: 'no-results',
1605
- label: 'No results'
1606
- }]);
1607
- } else {
1608
- setCommands(entries.map(function (entry) {
1609
- return {
1610
- id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
1611
- label: entry.displayTitle,
1612
- callback: function callback() {
1613
- var inlineNode = createInlineEntryNode(entry.id);
1614
- removeCommand(editor);
1615
- Transforms.insertNodes(editor, inlineNode);
1616
- editor.insertText('');
1617
- }
1618
- };
1619
- }));
1620
- }
1621
- });
1622
- }
1623
1735
  }]
1624
1736
  };
1625
- });
1626
- var assetCommand = {
1627
- group: 'Assets',
1628
- commands: [{
1629
- id: 'embed-asset',
1630
- label: 'Embed Asset',
1631
- callback: function callback() {
1632
- fetchAssets(sdk, query).then(function (assets) {
1633
- removeQuery(editor);
1634
-
1635
- if (!assets.length) {
1636
- setCommands([{
1637
- id: 'no-results',
1638
- label: 'No results'
1639
- }]);
1640
- } else {
1641
- setCommands(assets.map(function (asset) {
1642
- return {
1643
- id: asset.id + "-" + asset.displayTitle.replace(/\W+/g, '-').toLowerCase(),
1644
- label: asset.displayTitle,
1645
- thumbnail: asset.thumbnail,
1646
- callback: function callback() {
1647
- removeCommand(editor);
1737
+ return [].concat(contentTypeCommands, [assetCommand]);
1738
+ }
1648
1739
 
1649
- if (editor.selection) {
1650
- var selection = editor.selection;
1651
- editor.insertSoftBreak();
1652
- insertBlock(editor, BLOCKS.EMBEDDED_ASSET, asset.entity);
1653
- Transforms.select(editor, selection);
1654
- }
1655
- }
1656
- };
1657
- }));
1658
- }
1659
- });
1660
- }
1661
- }]
1662
- };
1663
- return [].concat(contentTypeCommands, [assetCommand]);
1740
+ return contentTypeCommands;
1664
1741
  }),
1665
1742
  commands = _useState[0],
1666
1743
  setCommands = _useState[1];
@@ -1746,7 +1823,6 @@ var styles = {
1746
1823
  margin: tokens.spacingXs + " 0"
1747
1824
  }),
1748
1825
  menuHeader: /*#__PURE__*/css({
1749
- position: 'sticky',
1750
1826
  zIndex: tokens.zIndexDefault,
1751
1827
  top: 0,
1752
1828
  backgroundColor: tokens.gray100,
@@ -1845,29 +1921,35 @@ var CommandListItems = function CommandListItems(_ref4) {
1845
1921
 
1846
1922
  var CommandList = function CommandList(_ref5) {
1847
1923
  var query = _ref5.query,
1848
- editor = _ref5.editor;
1924
+ editor = _ref5.editor,
1925
+ textContainer = _ref5.textContainer;
1849
1926
  var sdk = useSdkContext();
1850
- 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
+ });
1851
1931
  var commandItems = useCommands(sdk, query, editor);
1852
1932
 
1853
- var _useCommandList = useCommandList(commandItems, container),
1854
- selectedItem = _useCommandList.selectedItem;
1933
+ var _useCommandList = useCommandList(commandItems, popoverContainer),
1934
+ selectedItem = _useCommandList.selectedItem,
1935
+ isOpen = _useCommandList.isOpen;
1855
1936
 
1856
- if (commandItems.length === 0) {
1937
+ if (!commandItems.length) {
1857
1938
  return null;
1858
1939
  }
1859
1940
 
1860
1941
  return /*#__PURE__*/createElement("div", {
1861
1942
  className: styles.container,
1862
1943
  tabIndex: -1,
1863
- ref: container,
1864
1944
  contentEditable: false
1865
1945
  }, /*#__PURE__*/createElement("div", {
1866
1946
  role: "alert"
1867
- }, /*#__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", {
1868
- "aria-hidden": true
1869
- }, /*#__PURE__*/createElement(Popover, {
1870
- isOpen: true,
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, {
1952
+ isOpen: isOpen,
1871
1953
  usePortal: false,
1872
1954
 
1873
1955
  /* eslint-disable-next-line jsx-a11y/no-autofocus -- we want to keep focus on text input*/
@@ -1893,7 +1975,7 @@ var CommandList = function CommandList(_ref5) {
1893
1975
  padding: "none",
1894
1976
  spacing: "spacingS",
1895
1977
  className: styles.footerList
1896
- }, /*#__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"))))))));
1897
1979
  };
1898
1980
 
1899
1981
  var CommandPrompt = function CommandPrompt(props) {
@@ -1901,10 +1983,19 @@ var CommandPrompt = function CommandPrompt(props) {
1901
1983
  return trimLeadingSlash(props.text.text);
1902
1984
  }, [props.text.text]);
1903
1985
  var editor = props.editor;
1904
- var canInsertBlocks = !isNodeTypeSelected(editor, BLOCKS.TABLE);
1905
- 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, {
1906
1996
  query: query,
1907
- editor: editor
1997
+ editor: editor,
1998
+ textContainer: textElement
1908
1999
  }));
1909
2000
  };
1910
2001
 
@@ -1915,6 +2006,7 @@ var createOnKeyDown = function createOnKeyDown() {
1915
2006
  var _setMarks;
1916
2007
 
1917
2008
  setMarks(editor, (_setMarks = {}, _setMarks[COMMAND_PROMPT] = true, _setMarks));
2009
+ editor.tracking.onCommandPaletteAction('openRichTextCommandPalette');
1918
2010
  }
1919
2011
 
1920
2012
  var isActive = isMarkActive(editor, COMMAND_PROMPT);
@@ -1944,6 +2036,7 @@ var createOnKeyDown = function createOnKeyDown() {
1944
2036
  key: COMMAND_PROMPT,
1945
2037
  at: _range
1946
2038
  });
2039
+ editor.tracking.onCommandPaletteAction('cancelRichTextCommandPalette');
1947
2040
  }
1948
2041
  }
1949
2042
  };
@@ -2945,38 +3038,6 @@ function getWithEmbeddedEntryInlineEvents(sdk) {
2945
3038
  };
2946
3039
  }
2947
3040
 
2948
- var VALIDATIONS = {
2949
- ENABLED_MARKS: 'enabledMarks',
2950
- ENABLED_NODE_TYPES: 'enabledNodeTypes'
2951
- };
2952
- var DEFAULT_ENABLED_NODE_TYPES = [BLOCKS.DOCUMENT, BLOCKS.PARAGRAPH, 'text'];
2953
-
2954
- var getRichTextValidation = function getRichTextValidation(field, validationType) {
2955
- return flow(function (v) {
2956
- return find(v, validationType);
2957
- }, function (v) {
2958
- return get(v, validationType);
2959
- })(field.validations);
2960
- };
2961
-
2962
- var isFormattingOptionEnabled = function isFormattingOptionEnabled(field, validationType, nodeTypeOrMark) {
2963
- var enabledFormattings = getRichTextValidation(field, validationType); // TODO: In the future, validations will always be opt-in. In that case
2964
- // we don't need this step.
2965
-
2966
- if (enabledFormattings === undefined) {
2967
- return true;
2968
- }
2969
-
2970
- return DEFAULT_ENABLED_NODE_TYPES.concat(enabledFormattings).includes(nodeTypeOrMark);
2971
- };
2972
-
2973
- var isNodeTypeEnabled = function isNodeTypeEnabled(field, nodeType) {
2974
- return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_NODE_TYPES, nodeType);
2975
- };
2976
- var isMarkEnabled = function isMarkEnabled(field, mark) {
2977
- return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_MARKS, mark);
2978
- };
2979
-
2980
3041
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _dropdown, _LABELS;
2981
3042
  var styles$5 = {
2982
3043
  dropdown: (_dropdown = {