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

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

@@ -16,15 +16,17 @@ var noop = _interopDefault(require('lodash/noop'));
 var plateSerializerDocx = require('@udecode/plate-serializer-docx');
 var plateBreak = require('@udecode/plate-break');
 var plateResetNode = require('@udecode/plate-reset-node');
-var slate = require('slate');
-var Slate = require('slate-react');
+var reactPopper = require('react-popper');
 var f36Components = require('@contentful/f36-components');
+var f36Utils = require('@contentful/f36-utils');
 var constate = _interopDefault(require('constate'));
 var isHotkey = _interopDefault(require('is-hotkey'));
-var tokens = _interopDefault(require('@contentful/f36-tokens'));
+var slate = require('slate');
+var Slate = require('slate-react');
 var find = _interopDefault(require('lodash/find'));
 var flow = _interopDefault(require('lodash/flow'));
 var get = _interopDefault(require('lodash/get'));
+var tokens = _interopDefault(require('@contentful/f36-tokens'));
 var f36Icons = require('@contentful/f36-icons');
 var plateList = require('@udecode/plate-list');
 var castArray = _interopDefault(require('lodash/castArray'));
@@ -341,6 +343,131 @@ var createResetNodePlugin = function createResetNodePlugin() {
   });
 };
 
+/**
+ * Trim leading slash character if found. Bails otherwise.
+ *
+ * @example
+ * trimLeadingSlash("/my query") // --> "my query"
+ */
+function trimLeadingSlash(text) {
+  if (!text.startsWith('/')) {
+    return text;
+  }
+
+  return text.slice(1);
+}
+
+function useSdk(_ref) {
+  var sdk = _ref.sdk;
+  var sdkMemo = React.useMemo(function () {
+    return sdk;
+  }, []); // eslint-disable-line -- TODO: explain this disable
+
+  return sdkMemo;
+}
+
+var _constate = /*#__PURE__*/constate(useSdk),
+    SdkProvider = _constate[0],
+    useSdkContext = _constate[1];
+
+var useCommandList = function useCommandList(commandItems, container) {
+  var _React$useState = React.useState(function () {
+    // select the first item on initial render
+    if ('group' in commandItems[0]) {
+      return commandItems[0].commands[0].id;
+    }
+
+    return commandItems[0].id;
+  }),
+      selectedItem = _React$useState[0],
+      setSelectedItem = _React$useState[1];
+
+  var _React$useState2 = React.useState(commandItems.length > 0),
+      isOpen = _React$useState2[0],
+      setIsOpen = _React$useState2[1];
+
+  React.useEffect(function () {
+    if (!container.current) {
+      return;
+    }
+
+    var buttons = Array.from(container.current.querySelectorAll('button'));
+    var currBtn = buttons.find(function (btn) {
+      return btn.id === selectedItem;
+    });
+    var currIndex = currBtn ? buttons.indexOf(currBtn) : 0;
+    var shouldSelectFirstBtn = !currBtn && buttons.length;
+
+    if (shouldSelectFirstBtn) {
+      setSelectedItem(buttons[0].id);
+      buttons[0].scrollIntoView({
+        block: 'nearest',
+        inline: 'start'
+      });
+    }
+
+    function handleKeyDown(event) {
+      if (isHotkey('up', event)) {
+        event.preventDefault();
+
+        if (currIndex === 0) {
+          return;
+        }
+
+        setSelectedItem(buttons[currIndex - 1].id);
+        buttons[currIndex - 1].scrollIntoView({
+          block: 'nearest',
+          inline: 'start'
+        });
+      } else if (isHotkey('down', event)) {
+        event.preventDefault();
+
+        if (currIndex === buttons.length - 1) {
+          return;
+        }
+
+        setSelectedItem(buttons[currIndex + 1].id);
+        buttons[currIndex + 1].scrollIntoView({
+          block: 'nearest',
+          inline: 'start'
+        });
+      } else if (isHotkey('enter', event)) {
+        event.preventDefault();
+
+        if (currBtn) {
+          setSelectedItem('');
+          currBtn.click();
+        }
+      } //TODO: handle shift+enter, which must be detected using separate events
+
+    }
+
+    if (commandItems.length) {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+
+    return function () {
+      return window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [commandItems, container, selectedItem]);
+  React.useEffect(function () {
+    var handleMousedown = function handleMousedown(event) {
+      if (container.current && !container.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleMousedown);
+    return function () {
+      document.removeEventListener('mousedown', handleMousedown);
+    };
+  }, [container]);
+  return {
+    selectedItem: selectedItem,
+    isOpen: isOpen
+  };
+};
+
 var IS_SAFARI = typeof navigator !== 'undefined' && /*#__PURE__*/ /Version\/[\d.]+.*Safari/.test(navigator.userAgent);
 var IS_CHROME = /*#__PURE__*/ /(?!Chrom.*OPR)Chrom(?:e|ium)\/([0-9.]+)(:?\s|$)/.test(navigator.userAgent);
 
@@ -545,129 +672,36 @@ function toggleElement(editor, options, editorOptions) {
   });
 }
 
-/**
- * Trim leading slash character if found. Bails otherwise.
- *
- * @example
- * trimLeadingSlash("/my query") // --> "my query"
- */
-function trimLeadingSlash(text) {
-  if (!text.startsWith('/')) {
-    return text;
-  }
-
-  return text.slice(1);
-}
-
-function useSdk(_ref) {
-  var sdk = _ref.sdk;
-  var sdkMemo = React.useMemo(function () {
-    return sdk;
-  }, []); // eslint-disable-line -- TODO: explain this disable
-
-  return sdkMemo;
-}
-
-var _constate = /*#__PURE__*/constate(useSdk),
-    SdkProvider = _constate[0],
-    useSdkContext = _constate[1];
-
-var useCommandList = function useCommandList(commandItems, container) {
-  var _React$useState = React.useState(function () {
-    // select the first item on initial render
-    if ('group' in commandItems[0]) {
-      return commandItems[0].commands[0].id;
-    }
-
-    return commandItems[0].id;
-  }),
-      selectedItem = _React$useState[0],
-      setSelectedItem = _React$useState[1];
-
-  var _React$useState2 = React.useState(commandItems.length > 0),
-      isOpen = _React$useState2[0],
-      setIsOpen = _React$useState2[1];
-
-  React.useEffect(function () {
-    if (!(container != null && container.current)) {
-      return;
-    }
-
-    var buttons = Array.from(container.current.querySelectorAll('button'));
-    var currBtn = buttons.find(function (btn) {
-      return btn.id === selectedItem;
-    });
-    var currIndex = currBtn ? buttons.indexOf(currBtn) : 0;
-    var shouldSelectFirstBtn = !currBtn && buttons.length;
-
-    if (shouldSelectFirstBtn) {
-      setSelectedItem(buttons[0].id);
-      buttons[0].scrollIntoView({
-        block: 'nearest',
-        inline: 'start'
-      });
-    }
-
-    function handleKeyDown(event) {
-      if (isHotkey('up', event)) {
-        event.preventDefault();
-
-        if (currIndex === 0) {
-          return;
-        }
-
-        setSelectedItem(buttons[currIndex - 1].id);
-        buttons[currIndex - 1].scrollIntoView({
-          block: 'nearest',
-          inline: 'start'
-        });
-      } else if (isHotkey('down', event)) {
-        event.preventDefault();
-
-        if (currIndex === buttons.length - 1) {
-          return;
-        }
-
-        setSelectedItem(buttons[currIndex + 1].id);
-        buttons[currIndex + 1].scrollIntoView({
-          block: 'nearest',
-          inline: 'start'
-        });
-      } else if (isHotkey('enter', event)) {
-        event.preventDefault();
+var VALIDATIONS = {
+  ENABLED_MARKS: 'enabledMarks',
+  ENABLED_NODE_TYPES: 'enabledNodeTypes'
+};
+var DEFAULT_ENABLED_NODE_TYPES = [Contentful.BLOCKS.DOCUMENT, Contentful.BLOCKS.PARAGRAPH, 'text'];
 
-        if (currBtn) {
-          setSelectedItem('');
-          currBtn.click();
-        }
-      } //TODO: handle shift+enter, which must be detected using separate events
+var getRichTextValidation = function getRichTextValidation(field, validationType) {
+  return flow(function (v) {
+    return find(v, validationType);
+  }, function (v) {
+    return get(v, validationType);
+  })(field.validations);
+};
 
-    }
+var isFormattingOptionEnabled = function isFormattingOptionEnabled(field, validationType, nodeTypeOrMark) {
+  var enabledFormattings = getRichTextValidation(field, validationType); // TODO: In the future, validations will always be opt-in. In that case
+  // we don't need this step.
 
-    if (commandItems.length) {
-      window.addEventListener('keydown', handleKeyDown);
-    }
+  if (enabledFormattings === undefined) {
+    return true;
+  }
 
-    return function () {
-      return window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [commandItems, container, selectedItem]);
-  React.useEffect(function () {
-    var handleClick = function handleClick(event) {
-      if (container.current && !container.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
+  return DEFAULT_ENABLED_NODE_TYPES.concat(enabledFormattings).includes(nodeTypeOrMark);
+};
 
-    document.addEventListener('click', handleClick);
-    return function () {
-      document.removeEventListener('click', handleClick);
-    };
-  }, [container]);
-  return {
-    selectedItem: selectedItem,
-    isOpen: isOpen
-  };
+var isNodeTypeEnabled = function isNodeTypeEnabled(field, nodeType) {
+  return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_NODE_TYPES, nodeType);
+};
+var isMarkEnabled = function isMarkEnabled(field, mark) {
+  return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_MARKS, mark);
 };
 
 var COMMAND_PROMPT = 'command-prompt';
@@ -1579,38 +1613,124 @@ var removeQuery = function removeQuery(editor) {
 
 var useCommands = function useCommands(sdk, query, editor) {
   var contentTypes = sdk.space.getCachedContentTypes();
+  var canInsertBlocks = !isNodeTypeSelected(editor, Contentful.BLOCKS.TABLE);
+  var inlineAllowed = isNodeTypeEnabled(sdk.field, Contentful.INLINES.EMBEDDED_ENTRY);
+  var entriesAllowed = isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.EMBEDDED_ENTRY) && canInsertBlocks;
+  var assetsAllowed = isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.EMBEDDED_ASSET) && canInsertBlocks;
 
   var _useState = React.useState(function () {
-    var contentTypeCommands = contentTypes.map(function (contentType) {
+    var getEmbedEntry = function getEmbedEntry(contentType) {
+      return {
+        id: contentType.sys.id,
+        label: "Embed " + contentType.name,
+        callback: function callback() {
+          fetchEntries(sdk, contentType, query).then(function (entries) {
+            removeQuery(editor);
+
+            if (!entries.length) {
+              setCommands([{
+                id: 'no-results',
+                label: 'No results'
+              }]);
+            } else {
+              setCommands(entries.map(function (entry) {
+                return {
+                  id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
+                  label: entry.displayTitle,
+                  callback: function callback() {
+                    removeCommand(editor);
+
+                    if (editor.selection) {
+                      var selection = editor.selection;
+                      editor.insertSoftBreak();
+                      insertBlock(editor, Contentful.BLOCKS.EMBEDDED_ENTRY, entry.entry);
+                      slate.Transforms.select(editor, selection);
+                      editor.tracking.onCommandPaletteAction('insert', {
+                        nodeType: Contentful.BLOCKS.EMBEDDED_ENTRY
+                      });
+                    }
+                  }
+                };
+              }));
+            }
+          });
+        }
+      };
+    };
+
+    var getEmbedInline = function getEmbedInline(contentType) {
+      return {
+        id: contentType.sys.id + "-inline",
+        label: "Embed " + contentType.name + " - Inline",
+        callback: function callback() {
+          fetchEntries(sdk, contentType, query).then(function (entries) {
+            removeQuery(editor);
+
+            if (!entries.length) {
+              setCommands([{
+                id: 'no-results',
+                label: 'No results'
+              }]);
+            } else {
+              setCommands(entries.map(function (entry) {
+                return {
+                  id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
+                  label: entry.displayTitle,
+                  callback: function callback() {
+                    var inlineNode = createInlineEntryNode(entry.id);
+                    removeCommand(editor);
+                    slate.Transforms.insertNodes(editor, inlineNode);
+                    editor.insertText('');
+                    editor.tracking.onCommandPaletteAction('insert', {
+                      nodeType: Contentful.INLINES.EMBEDDED_ENTRY
+                    });
+                  }
+                };
+              }));
+            }
+          });
+        }
+      };
+    };
+
+    var contentTypeCommands = entriesAllowed || inlineAllowed ? contentTypes.map(function (contentType) {
       return {
         group: contentType.name,
+        commands: entriesAllowed && inlineAllowed ? [getEmbedEntry(contentType), getEmbedInline(contentType)] : entriesAllowed ? [getEmbedEntry(contentType)] : [getEmbedInline(contentType)]
+      };
+    }) : [];
+
+    if (assetsAllowed) {
+      var assetCommand = {
+        group: 'Assets',
         commands: [{
-          id: contentType.sys.id,
-          label: "Embed " + contentType.name,
+          id: 'embed-asset',
+          label: 'Embed Asset',
           callback: function callback() {
-            fetchEntries(sdk, contentType, query).then(function (entries) {
+            fetchAssets(sdk, query).then(function (assets) {
               removeQuery(editor);
 
-              if (!entries.length) {
+              if (!assets.length) {
                 setCommands([{
                   id: 'no-results',
                   label: 'No results'
                 }]);
               } else {
-                setCommands(entries.map(function (entry) {
+                setCommands(assets.map(function (asset) {
                   return {
-                    id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
-                    label: entry.displayTitle,
+                    id: asset.id + "-" + asset.displayTitle.replace(/\W+/g, '-').toLowerCase(),
+                    label: asset.displayTitle,
+                    thumbnail: asset.thumbnail,
                     callback: function callback() {
                       removeCommand(editor);
 
                       if (editor.selection) {
                         var selection = editor.selection;
                         editor.insertSoftBreak();
-                        insertBlock(editor, Contentful.BLOCKS.EMBEDDED_ENTRY, entry.entry);
+                        insertBlock(editor, Contentful.BLOCKS.EMBEDDED_ASSET, asset.entity);
                         slate.Transforms.select(editor, selection);
                         editor.tracking.onCommandPaletteAction('insert', {
-                          nodeType: Contentful.BLOCKS.EMBEDDED_ENTRY
+                          nodeType: Contentful.BLOCKS.EMBEDDED_ASSET
                         });
                       }
                     }
@@ -1619,81 +1739,12 @@ var useCommands = function useCommands(sdk, query, editor) {
               }
             });
           }
-        }, {
-          id: contentType.sys.id + "-inline",
-          label: "Embed " + contentType.name + " - Inline",
-          callback: function callback() {
-            fetchEntries(sdk, contentType, query).then(function (entries) {
-              removeQuery(editor);
-
-              if (!entries.length) {
-                setCommands([{
-                  id: 'no-results',
-                  label: 'No results'
-                }]);
-              } else {
-                setCommands(entries.map(function (entry) {
-                  return {
-                    id: entry.id + "-" + entry.displayTitle.replace(/\W+/g, '-').toLowerCase(),
-                    label: entry.displayTitle,
-                    callback: function callback() {
-                      var inlineNode = createInlineEntryNode(entry.id);
-                      removeCommand(editor);
-                      slate.Transforms.insertNodes(editor, inlineNode);
-                      editor.insertText('');
-                      editor.tracking.onCommandPaletteAction('insert', {
-                        nodeType: Contentful.INLINES.EMBEDDED_ENTRY
-                      });
-                    }
-                  };
-                }));
-              }
-            });
-          }
         }]
       };
-    });
-    var assetCommand = {
-      group: 'Assets',
-      commands: [{
-        id: 'embed-asset',
-        label: 'Embed Asset',
-        callback: function callback() {
-          fetchAssets(sdk, query).then(function (assets) {
-            removeQuery(editor);
-
-            if (!assets.length) {
-              setCommands([{
-                id: 'no-results',
-                label: 'No results'
-              }]);
-            } else {
-              setCommands(assets.map(function (asset) {
-                return {
-                  id: asset.id + "-" + asset.displayTitle.replace(/\W+/g, '-').toLowerCase(),
-                  label: asset.displayTitle,
-                  thumbnail: asset.thumbnail,
-                  callback: function callback() {
-                    removeCommand(editor);
+      return [].concat(contentTypeCommands, [assetCommand]);
+    }
 
-                    if (editor.selection) {
-                      var selection = editor.selection;
-                      editor.insertSoftBreak();
-                      insertBlock(editor, Contentful.BLOCKS.EMBEDDED_ASSET, asset.entity);
-                      slate.Transforms.select(editor, selection);
-                      editor.tracking.onCommandPaletteAction('insert', {
-                        nodeType: Contentful.BLOCKS.EMBEDDED_ASSET
-                      });
-                    }
-                  }
-                };
-              }));
-            }
-          });
-        }
-      }]
-    };
-    return [].concat(contentTypeCommands, [assetCommand]);
+    return contentTypeCommands;
   }),
       commands = _useState[0],
       setCommands = _useState[1];
@@ -1779,7 +1830,6 @@ var styles = {
     margin: tokens.spacingXs + " 0"
   }),
   menuHeader: /*#__PURE__*/emotion.css({
-    position: 'sticky',
     zIndex: tokens.zIndexDefault,
     top: 0,
     backgroundColor: tokens.gray100,
@@ -1878,25 +1928,34 @@ var CommandListItems = function CommandListItems(_ref4) {
 
 var CommandList = function CommandList(_ref5) {
   var query = _ref5.query,
-      editor = _ref5.editor;
+      editor = _ref5.editor,
+      textContainer = _ref5.textContainer;
   var sdk = useSdkContext();
-  var container = React.useRef(null);
+  var popoverContainer = React.useRef(null);
+  var popper = reactPopper.usePopper(textContainer, popoverContainer == null ? void 0 : popoverContainer.current, {
+    placement: 'bottom-start'
+  });
   var commandItems = useCommands(sdk, query, editor);
 
-  var _useCommandList = useCommandList(commandItems, container),
+  var _useCommandList = useCommandList(commandItems, popoverContainer),
       selectedItem = _useCommandList.selectedItem,
       isOpen = _useCommandList.isOpen;
 
+  if (!commandItems.length) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: styles.container,
     tabIndex: -1,
-    ref: container,
     contentEditable: false
   }, /*#__PURE__*/React.createElement("div", {
     role: "alert"
-  }, /*#__PURE__*/React.createElement(f36Components.ScreenReaderOnly, null, "Richtext commands. Currently focused item: ", selectedItem, ". Press ", /*#__PURE__*/React.createElement("kbd", null, "enter"), " to select, ", /*#__PURE__*/React.createElement("kbd", null, "arrows"), " to navigate, ", /*#__PURE__*/React.createElement("kbd", null, "escape"), " to close.")), /*#__PURE__*/React.createElement("div", {
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(f36Components.Popover, {
+  }, /*#__PURE__*/React.createElement(f36Components.ScreenReaderOnly, null, "Richtext commands. Currently focused item: ", selectedItem, ". Press ", /*#__PURE__*/React.createElement("kbd", null, "enter"), " to select, ", /*#__PURE__*/React.createElement("kbd", null, "arrows"), " to navigate, ", /*#__PURE__*/React.createElement("kbd", null, "escape"), " to close.")), /*#__PURE__*/React.createElement(f36Utils.Portal, null, /*#__PURE__*/React.createElement("div", Object.assign({
+    "aria-hidden": true,
+    ref: popoverContainer,
+    style: popper.styles.popper
+  }, popper.attributes.popper), /*#__PURE__*/React.createElement(f36Components.Popover, {
     isOpen: isOpen,
     usePortal: false,
 
@@ -1923,7 +1982,7 @@ var CommandList = function CommandList(_ref5) {
     padding: "none",
     spacing: "spacingS",
     className: styles.footerList
-  }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("kbd", null, "\u2191"), /*#__PURE__*/React.createElement("kbd", null, "\u2193"), " to navigate"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("kbd", null, "\u21B5"), " to confirm"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("kbd", null, "esc"), " to close")))))));
+  }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("kbd", null, "\u2191"), /*#__PURE__*/React.createElement("kbd", null, "\u2193"), " to navigate"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("kbd", null, "\u21B5"), " to confirm"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("kbd", null, "esc"), " to close"))))))));
 };
 
 var CommandPrompt = function CommandPrompt(props) {
@@ -1931,10 +1990,19 @@ var CommandPrompt = function CommandPrompt(props) {
     return trimLeadingSlash(props.text.text);
   }, [props.text.text]);
   var editor = props.editor;
-  var canInsertBlocks = !isNodeTypeSelected(editor, Contentful.BLOCKS.TABLE);
-  return /*#__PURE__*/React.createElement("span", Object.assign({}, props.attributes), props.children, canInsertBlocks && /*#__PURE__*/React.createElement(CommandList, {
+
+  var _React$useState = React.useState(),
+      textElement = _React$useState[0],
+      setTextElement = _React$useState[1];
+
+  return /*#__PURE__*/React.createElement("span", Object.assign({
+    ref: function ref(e) {
+      setTextElement(e);
+    }
+  }, props.attributes), props.children, /*#__PURE__*/React.createElement(CommandList, {
     query: query,
-    editor: editor
+    editor: editor,
+    textContainer: textElement
   }));
 };
 
@@ -2085,8 +2153,8 @@ function useFetchedEntity(_ref) {
   var _useEntities = fieldEditorReference.useEntities(),
       entries = _useEntities.entries,
       assets = _useEntities.assets,
-      getOrLoadEntry = _useEntities.getOrLoadEntry,
-      getOrLoadAsset = _useEntities.getOrLoadAsset;
+      getEntry = _useEntities.getEntry,
+      getAsset = _useEntities.getAsset;
 
   var store = type === 'Entry' ? entries : assets;
 
@@ -2104,7 +2172,7 @@ function useFetchedEntity(_ref) {
   }, [store, entity, id]); // Fetch the entity if needed
 
   React.useEffect(function () {
-    (type === 'Entry' ? getOrLoadEntry : getOrLoadAsset)(id); // "getOrLoadEntry" and "getOrLoadAsset" instances change with every
+    (type === 'Entry' ? getEntry : getAsset)(id); // "getEntry" and "getAsset" instances change with every
     // entity store update causing page lag on initial load
     // TODO: consider rewriting useEntities() hook to avoid that happening in
     // first place.
@@ -2657,7 +2725,7 @@ var styles$3 = {
 };
 function FetchingWrappedInlineEntryCard(props) {
   var _useEntities = fieldEditorReference.useEntities(),
-      getOrLoadEntry = _useEntities.getOrLoadEntry,
+      getEntry = _useEntities.getEntry,
       loadEntityScheduledActions = _useEntities.loadEntityScheduledActions,
       entries = _useEntities.entries;
 
@@ -2691,7 +2759,7 @@ function FetchingWrappedInlineEntryCard(props) {
   }, [entry, contentType, props.sdk.field.locale, props.sdk.locales["default"]]);
   React__default.useEffect(function () {
     if (!props.entryId) return;
-    getOrLoadEntry(props.entryId); // We don't include getOrLoadEntry below because it's part of the constate-derived
+    getEntry(props.entryId); // We don't include getEntry below because it's part of the constate-derived
     // useEntities(), not props.
     // eslint-disable-next-line -- TODO: explain this disable
   }, [props.entryId]);
@@ -2977,38 +3045,6 @@ function getWithEmbeddedEntryInlineEvents(sdk) {
   };
 }
 
-var VALIDATIONS = {
-  ENABLED_MARKS: 'enabledMarks',
-  ENABLED_NODE_TYPES: 'enabledNodeTypes'
-};
-var DEFAULT_ENABLED_NODE_TYPES = [Contentful.BLOCKS.DOCUMENT, Contentful.BLOCKS.PARAGRAPH, 'text'];
-
-var getRichTextValidation = function getRichTextValidation(field, validationType) {
-  return flow(function (v) {
-    return find(v, validationType);
-  }, function (v) {
-    return get(v, validationType);
-  })(field.validations);
-};
-
-var isFormattingOptionEnabled = function isFormattingOptionEnabled(field, validationType, nodeTypeOrMark) {
-  var 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;
-  }
-
-  return DEFAULT_ENABLED_NODE_TYPES.concat(enabledFormattings).includes(nodeTypeOrMark);
-};
-
-var isNodeTypeEnabled = function isNodeTypeEnabled(field, nodeType) {
-  return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_NODE_TYPES, nodeType);
-};
-var isMarkEnabled = function isMarkEnabled(field, mark) {
-  return isFormattingOptionEnabled(field, VALIDATIONS.ENABLED_MARKS, mark);
-};
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _dropdown, _LABELS;
 var styles$5 = {
   dropdown: (_dropdown = {