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

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,36 +1606,125 @@ 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);
1725
+ editor.tracking.onCommandPaletteAction('insert', {
1726
+ nodeType: BLOCKS.EMBEDDED_ASSET
1727
+ });
1605
1728
  }
1606
1729
  }
1607
1730
  };
@@ -1609,75 +1732,12 @@ var useCommands = function useCommands(sdk, query, editor) {
1609
1732
  }
1610
1733
  });
1611
1734
  }
1612
- }, {
1613
- id: contentType.sys.id + "-inline",
1614
- label: "Embed " + contentType.name + " - Inline",
1615
- callback: function callback() {
1616
- fetchEntries(sdk, contentType, query).then(function (entries) {
1617
- removeQuery(editor);
1618
-
1619
- if (!entries.length) {
1620
- setCommands([{
1621
- id: 'no-results',
1622
- label: 'No results'
1623
- }]);
1624
- } else {
1625
- setCommands(entries.map(function (entry) {
1626
- return {
1627
- id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
1628
- label: entry.displayTitle,
1629
- callback: function callback() {
1630
- var inlineNode = createInlineEntryNode(entry.id);
1631
- removeCommand(editor);
1632
- Transforms.insertNodes(editor, inlineNode);
1633
- editor.insertText('');
1634
- }
1635
- };
1636
- }));
1637
- }
1638
- });
1639
- }
1640
1735
  }]
1641
1736
  };
1642
- });
1643
- var assetCommand = {
1644
- group: 'Assets',
1645
- commands: [{
1646
- id: 'embed-asset',
1647
- label: 'Embed Asset',
1648
- callback: function callback() {
1649
- fetchAssets(sdk, query).then(function (assets) {
1650
- removeQuery(editor);
1651
-
1652
- if (!assets.length) {
1653
- setCommands([{
1654
- id: 'no-results',
1655
- label: 'No results'
1656
- }]);
1657
- } else {
1658
- setCommands(assets.map(function (asset) {
1659
- return {
1660
- id: asset.id + "-" + asset.displayTitle.replace(/\W+/g, '-').toLowerCase(),
1661
- label: asset.displayTitle,
1662
- thumbnail: asset.thumbnail,
1663
- callback: function callback() {
1664
- removeCommand(editor);
1737
+ return [].concat(contentTypeCommands, [assetCommand]);
1738
+ }
1665
1739
 
1666
- if (editor.selection) {
1667
- var selection = editor.selection;
1668
- editor.insertSoftBreak();
1669
- insertBlock(editor, BLOCKS.EMBEDDED_ASSET, asset.entity);
1670
- Transforms.select(editor, selection);
1671
- }
1672
- }
1673
- };
1674
- }));
1675
- }
1676
- });
1677
- }
1678
- }]
1679
- };
1680
- return [].concat(contentTypeCommands, [assetCommand]);
1740
+ return contentTypeCommands;
1681
1741
  }),
1682
1742
  commands = _useState[0],
1683
1743
  setCommands = _useState[1];
@@ -1763,7 +1823,6 @@ var styles = {
1763
1823
  margin: tokens.spacingXs + " 0"
1764
1824
  }),
1765
1825
  menuHeader: /*#__PURE__*/css({
1766
- position: 'sticky',
1767
1826
  zIndex: tokens.zIndexDefault,
1768
1827
  top: 0,
1769
1828
  backgroundColor: tokens.gray100,
@@ -1862,25 +1921,34 @@ var CommandListItems = function CommandListItems(_ref4) {
1862
1921
 
1863
1922
  var CommandList = function CommandList(_ref5) {
1864
1923
  var query = _ref5.query,
1865
- editor = _ref5.editor;
1924
+ editor = _ref5.editor,
1925
+ textContainer = _ref5.textContainer;
1866
1926
  var sdk = useSdkContext();
1867
- 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
+ });
1868
1931
  var commandItems = useCommands(sdk, query, editor);
1869
1932
 
1870
- var _useCommandList = useCommandList(commandItems, container),
1933
+ var _useCommandList = useCommandList(commandItems, popoverContainer),
1871
1934
  selectedItem = _useCommandList.selectedItem,
1872
1935
  isOpen = _useCommandList.isOpen;
1873
1936
 
1937
+ if (!commandItems.length) {
1938
+ return null;
1939
+ }
1940
+
1874
1941
  return /*#__PURE__*/createElement("div", {
1875
1942
  className: styles.container,
1876
1943
  tabIndex: -1,
1877
- ref: container,
1878
1944
  contentEditable: false
1879
1945
  }, /*#__PURE__*/createElement("div", {
1880
1946
  role: "alert"
1881
- }, /*#__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", {
1882
- "aria-hidden": true
1883
- }, /*#__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, {
1884
1952
  isOpen: isOpen,
1885
1953
  usePortal: false,
1886
1954
 
@@ -1907,7 +1975,7 @@ var CommandList = function CommandList(_ref5) {
1907
1975
  padding: "none",
1908
1976
  spacing: "spacingS",
1909
1977
  className: styles.footerList
1910
- }, /*#__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"))))))));
1911
1979
  };
1912
1980
 
1913
1981
  var CommandPrompt = function CommandPrompt(props) {
@@ -1915,10 +1983,19 @@ var CommandPrompt = function CommandPrompt(props) {
1915
1983
  return trimLeadingSlash(props.text.text);
1916
1984
  }, [props.text.text]);
1917
1985
  var editor = props.editor;
1918
- var canInsertBlocks = !isNodeTypeSelected(editor, BLOCKS.TABLE);
1919
- 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, {
1920
1996
  query: query,
1921
- editor: editor
1997
+ editor: editor,
1998
+ textContainer: textElement
1922
1999
  }));
1923
2000
  };
1924
2001
 
@@ -1929,6 +2006,7 @@ var createOnKeyDown = function createOnKeyDown() {
1929
2006
  var _setMarks;
1930
2007
 
1931
2008
  setMarks(editor, (_setMarks = {}, _setMarks[COMMAND_PROMPT] = true, _setMarks));
2009
+ editor.tracking.onCommandPaletteAction('openRichTextCommandPalette');
1932
2010
  }
1933
2011
 
1934
2012
  var isActive = isMarkActive(editor, COMMAND_PROMPT);
@@ -1958,6 +2036,7 @@ var createOnKeyDown = function createOnKeyDown() {
1958
2036
  key: COMMAND_PROMPT,
1959
2037
  at: _range
1960
2038
  });
2039
+ editor.tracking.onCommandPaletteAction('cancelRichTextCommandPalette');
1961
2040
  }
1962
2041
  }
1963
2042
  };
@@ -2067,8 +2146,8 @@ function useFetchedEntity(_ref) {
2067
2146
  var _useEntities = useEntities(),
2068
2147
  entries = _useEntities.entries,
2069
2148
  assets = _useEntities.assets,
2070
- getOrLoadEntry = _useEntities.getOrLoadEntry,
2071
- getOrLoadAsset = _useEntities.getOrLoadAsset;
2149
+ getEntry = _useEntities.getEntry,
2150
+ getAsset = _useEntities.getAsset;
2072
2151
 
2073
2152
  var store = type === 'Entry' ? entries : assets;
2074
2153
 
@@ -2086,7 +2165,7 @@ function useFetchedEntity(_ref) {
2086
2165
  }, [store, entity, id]); // Fetch the entity if needed
2087
2166
 
2088
2167
  useEffect(function () {
2089
- (type === 'Entry' ? getOrLoadEntry : getOrLoadAsset)(id); // "getOrLoadEntry" and "getOrLoadAsset" instances change with every
2168
+ (type === 'Entry' ? getEntry : getAsset)(id); // "getEntry" and "getAsset" instances change with every
2090
2169
  // entity store update causing page lag on initial load
2091
2170
  // TODO: consider rewriting useEntities() hook to avoid that happening in
2092
2171
  // first place.
@@ -2639,7 +2718,7 @@ var styles$3 = {
2639
2718
  };
2640
2719
  function FetchingWrappedInlineEntryCard(props) {
2641
2720
  var _useEntities = useEntities(),
2642
- getOrLoadEntry = _useEntities.getOrLoadEntry,
2721
+ getEntry = _useEntities.getEntry,
2643
2722
  loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
2644
2723
  entries = _useEntities.entries;
2645
2724
 
@@ -2673,7 +2752,7 @@ function FetchingWrappedInlineEntryCard(props) {
2673
2752
  }, [entry, contentType, props.sdk.field.locale, props.sdk.locales["default"]]);
2674
2753
  React__default.useEffect(function () {
2675
2754
  if (!props.entryId) return;
2676
- getOrLoadEntry(props.entryId); // We don't include getOrLoadEntry below because it's part of the constate-derived
2755
+ getEntry(props.entryId); // We don't include getEntry below because it's part of the constate-derived
2677
2756
  // useEntities(), not props.
2678
2757
  // eslint-disable-next-line -- TODO: explain this disable
2679
2758
  }, [props.entryId]);
@@ -2959,38 +3038,6 @@ function getWithEmbeddedEntryInlineEvents(sdk) {
2959
3038
  };
2960
3039
  }
2961
3040
 
2962
- var VALIDATIONS = {
2963
- ENABLED_MARKS: 'enabledMarks',
2964
- ENABLED_NODE_TYPES: 'enabledNodeTypes'
2965
- };
2966
- var DEFAULT_ENABLED_NODE_TYPES = [BLOCKS.DOCUMENT, BLOCKS.PARAGRAPH, 'text'];
2967
-
2968
- var getRichTextValidation = function getRichTextValidation(field, validationType) {
2969
- return flow(function (v) {
2970
- return find(v, validationType);
2971
- }, function (v) {
2972
- return get(v, validationType);
2973
- })(field.validations);
2974
- };
2975
-
2976
- var isFormattingOptionEnabled = function isFormattingOptionEnabled(field, validationType, nodeTypeOrMark) {
2977
- var enabledFormattings = getRichTextValidation(field, validationType); // TODO: In the future, validations will always be opt-in. In that case
2978
- // we don't need this step.
2979
-
2980
- if (enabledFormattings === undefined) {
2981
- return true;
2982
- }
2983
-
2984
- return DEFAULT_ENABLED_NODE_TYPES.concat(enabledFormattings).includes(nodeTypeOrMark);
2985
- };
2986
-
2987
- var isNodeTypeEnabled = function isNodeTypeEnabled(field, nodeType) {
2988
- return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_NODE_TYPES, nodeType);
2989
- };
2990
- var isMarkEnabled = function isMarkEnabled(field, mark) {
2991
- return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_MARKS, mark);
2992
- };
2993
-
2994
3041
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _dropdown, _LABELS;
2995
3042
  var styles$5 = {
2996
3043
  dropdown: (_dropdown = {