@contentful/field-editor-rich-text 3.2.0 → 3.2.2

package/dist/field-editor-rich-text.esm.js

@@ -2,7 +2,7 @@ import React__default, { createContext, useContext, useMemo, useState, useEffect
 import { MissingEntityCard, WrappedAssetCard, useEntity, useEntityLoader, WrappedEntryCard, ScheduledIconWithTooltip, EntityProvider, getScheduleTooltipContent } from '@contentful/field-editor-reference';
 import { entityHelpers, ModalDialogLauncher, FieldConnector } from '@contentful/field-editor-shared';
 import { BLOCKS, INLINES, TEXT_CONTAINERS, HEADINGS, LIST_ITEM_BLOCKS, MARKS, CONTAINERS, TOP_LEVEL_BLOCKS, VOID_BLOCKS, EMPTY_DOCUMENT } from '@contentful/rich-text-types';
-import { usePlateEditorRef, usePlateEditorState, toggleNodeType, getText, getAbove, removeMark, setMarks, isMarkActive, getNodes, setNodes, isAncestorEmpty, match, getLastChildPath, wrapNodes, getPluginType, unwrapNodes, isCollapsed, isRangeAcrossBlocks, ELEMENT_DEFAULT, findNode, getParent, getBlockAbove, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, deleteFragment, toggleMark, someHtmlElement, KEY_DESERIALIZE_HTML, hasSingleChild, isLastChild, someNode, getChildren as getChildren$1, queryNode, createDeserializeHtmlPlugin, createDeserializeAstPlugin, createPlateEditor, getPlateSelectors, getPlateActions, Plate } from '@udecode/plate-core';
+import { usePlateEditorRef, usePlateEditorState, toggleNodeType, getText, getAbove, removeMark, setMarks, isMarkActive, getNodes, setNodes, isAncestorEmpty, match, getLastChildPath, wrapNodes, getPluginType, unwrapNodes, isCollapsed, isRangeAcrossBlocks, ELEMENT_DEFAULT, findNode, getParent, getBlockAbove, isSelectionAtBlockStart, isSelectionAtBlockEnd, isFirstChild, insertNodes, moveChildren, isBlockAboveEmpty, mockPlugin, deleteFragment, toggleMark, someHtmlElement, KEY_DESERIALIZE_HTML, hasSingleChild, isLastChild, someNode, getChildren as getChildren$1, unsetNodes, queryNode, createDeserializeHtmlPlugin, createDeserializeAstPlugin, createPlateEditor, getPlateSelectors, getPlateActions, Plate } from '@udecode/plate-core';
 import { css, cx } from 'emotion';
 import areEqual from 'fast-deep-equal';
 import noop from 'lodash-es/noop';
@@ -5306,13 +5306,21 @@ var createUnderlinePlugin = function createUnderlinePlugin() {
   });
 };
 
+var styles$f = {
+  superscript: /*#__PURE__*/css({
+    verticalAlign: 'super',
+    fontSize: 'smaller'
+  })
+};
 var ToolbarSuperscriptButton = /*#__PURE__*/createMarkToolbarButton({
   title: 'Superscript',
   mark: MARKS.SUPERSCRIPT,
   icon: /*#__PURE__*/createElement(SuperscriptIcon, null)
 });
 function Superscript(props) {
-  return /*#__PURE__*/createElement("sup", _extends({}, props.attributes), props.children);
+  return /*#__PURE__*/createElement("sup", _extends({}, props.attributes, {
+    className: styles$f.superscript
+  }), props.children);
 }
 var createSuperscriptPlugin = function createSuperscriptPlugin() {
   return createSuperscriptPlugin$1({
@@ -5329,6 +5337,12 @@ var createSuperscriptPlugin = function createSuperscriptPlugin() {
   });
 };
 
+var styles$g = {
+  subscript: /*#__PURE__*/css({
+    verticalAlign: 'sub',
+    fontSize: 'smaller'
+  })
+};
 var ToolbarSubscriptButton = /*#__PURE__*/createMarkToolbarButton({
   title: 'Subscript',
   mark: MARKS.SUBSCRIPT,
@@ -5337,7 +5351,9 @@ var ToolbarSubscriptButton = /*#__PURE__*/createMarkToolbarButton({
   })
 });
 function Subscript(props) {
-  return /*#__PURE__*/createElement("sub", _extends({}, props.attributes), props.children);
+  return /*#__PURE__*/createElement("sub", _extends({}, props.attributes, {
+    className: styles$g.subscript
+  }), props.children);
 }
 var createSubscriptPlugin = function createSubscriptPlugin() {
   return createSubscriptPlugin$1({
@@ -5565,10 +5581,10 @@ var createNormalizerPlugin = function createNormalizerPlugin() {
 };
 
 var _templateObject$6, _styles$1;
-var styles$f = (_styles$1 = {}, _styles$1[BLOCKS.PARAGRAPH] = /*#__PURE__*/css(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    margin-bottom: 1.5em;\n  "])), tokens.lineHeightDefault), _styles$1);
+var styles$h = (_styles$1 = {}, _styles$1[BLOCKS.PARAGRAPH] = /*#__PURE__*/css(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    margin-bottom: 1.5em;\n  "])), tokens.lineHeightDefault), _styles$1);
 function Paragraph(props) {
   return /*#__PURE__*/createElement("div", _extends({}, props.attributes, {
-    className: styles$f[BLOCKS.PARAGRAPH]
+    className: styles$h[BLOCKS.PARAGRAPH]
   }), props.children);
 }
 
@@ -6210,7 +6226,7 @@ var isTable = function isTable(node) {
   return Element.isElement(node) && node.type === BLOCKS.TABLE;
 };
 
-var styles$g = {
+var styles$i = {
   topRight: /*#__PURE__*/css({
     position: 'absolute',
     top: '6px',
@@ -6299,7 +6315,7 @@ var TableActions = function TableActions() {
     size: "small",
     variant: "transparent",
     tabIndex: -1,
-    className: styles$g.topRight,
+    className: styles$i.topRight,
     icon: /*#__PURE__*/React__default.createElement(ChevronDownIcon, null),
     "aria-label": "Open table menu",
     testId: "cf-table-actions-button"
@@ -6903,7 +6919,11 @@ function ToolbarTableButton(props) {
   }, /*#__PURE__*/createElement(TableIcon, null));
 }
 
-function createTextPlugin() {
+function createTextPlugin(restrictedMarks) {
+  if (restrictedMarks === void 0) {
+    restrictedMarks = [];
+  }
+
   return {
     key: 'TextPlugin',
     handlers: {
@@ -6968,7 +6988,22 @@ function createTextPlugin() {
 
       fixPasteAsPlainText(editor);
       return editor;
-    }
+    },
+    normalizer: [{
+      match: Text.isText,
+      transform: function transform(editor, _ref) {
+        var path = _ref[1];
+        unsetNodes(editor, restrictedMarks, {
+          at: path
+        });
+      },
+      validNode: function validNode(_editor, _ref2) {
+        var node = _ref2[0];
+        return !restrictedMarks.some(function (mark) {
+          return mark in node;
+        });
+      }
+    }]
   };
 }
 
@@ -7098,7 +7133,7 @@ var createVoidsPlugin = function createVoidsPlugin() {
   };
 };
 
-var getPlugins = function getPlugins(sdk, onAction) {
+var getPlugins = function getPlugins(sdk, onAction, restrictedMarks) {
   return [// AST must come after the HTML deserializer
   createDeserializeHtmlPlugin(), createDeserializeAstPlugin(), createDeserializeDocxPlugin(), // Tracking - This should come first so all plugins below will have access to `editor.tracking`
   createTrackingPlugin(onAction), // Global / Global shortcuts
@@ -7106,7 +7141,7 @@ var getPlugins = function getPlugins(sdk, onAction) {
   createParagraphPlugin(), createListPlugin(), createHrPlugin(), createHeadingPlugin(), createQuotePlugin(), createTablePlugin(), createEmbeddedEntryBlockPlugin(sdk), createEmbeddedAssetBlockPlugin(sdk), // Inline elements
   createHyperlinkPlugin(sdk), createEmbeddedEntityInlinePlugin(sdk), // Marks
   createMarksPlugin(), // Other
-  createTrailingParagraphPlugin(), createTextPlugin(), createVoidsPlugin(), createSelectOnBackspacePlugin(), // Pasting content from other sources
+  createTrailingParagraphPlugin(), createTextPlugin(restrictedMarks), createVoidsPlugin(), createSelectOnBackspacePlugin(), // Pasting content from other sources
   createPasteHTMLPlugin(), // These plugins drive their configurations from the list of plugins
   // above. They MUST come last.
   createSoftBreakPlugin(), createExitBreakPlugin(), createResetNodePlugin(), createNormalizerPlugin()];
@@ -7229,7 +7264,7 @@ var normalizeEditorValue = function normalizeEditorValue(value, options) {
 };
 
 var STYLE_EDITOR_BORDER = "1px solid " + tokens.gray400;
-var styles$h = {
+var styles$j = {
   root: /*#__PURE__*/css({
     position: 'relative'
   }),
@@ -7346,7 +7381,7 @@ var EmbedEntityWidget = function EmbedEntityWidget(_ref) {
   }, actions) : null;
 };
 
-var styles$i = {
+var styles$k = {
   toolbar: /*#__PURE__*/css({
     border: "1px solid " + tokens.gray400,
     backgroundColor: tokens.gray100,
@@ -7391,14 +7426,14 @@ var Toolbar = function Toolbar(_ref) {
   var shouldDisableTables = isDisabled || !canInsertBlocks || isListSelected || isBlockquoteSelected;
   return /*#__PURE__*/React__default.createElement(Flex, {
     testId: "toolbar",
-    className: styles$i.toolbar,
+    className: styles$k.toolbar,
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$i.formattingOptionsWrapper
+    className: styles$k.formattingOptionsWrapper
   }, /*#__PURE__*/React__default.createElement(ToolbarHeadingButton, {
     isDisabled: isDisabled || !canInsertBlocks
   }), validationInfo.isAnyMarkEnabled && /*#__PURE__*/React__default.createElement("span", {
-    className: styles$i.divider
+    className: styles$k.divider
   }), isMarkEnabled(sdk.field, MARKS.BOLD) && /*#__PURE__*/React__default.createElement(ToolbarBoldButton, {
     isDisabled: isDisabled
   }), isMarkEnabled(sdk.field, MARKS.ITALIC) && /*#__PURE__*/React__default.createElement(ToolbarItalicButton, {
@@ -7412,11 +7447,11 @@ var Toolbar = function Toolbar(_ref) {
   }), isMarkEnabled(sdk.field, MARKS.CODE) && /*#__PURE__*/React__default.createElement(ToolbarCodeButton, {
     isDisabled: isDisabled
   }), validationInfo.isAnyHyperlinkEnabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-    className: styles$i.divider
+    className: styles$k.divider
   }), /*#__PURE__*/React__default.createElement(ToolbarHyperlinkButton, {
     isDisabled: isDisabled
   })), validationInfo.isAnyBlockFormattingEnabled && /*#__PURE__*/React__default.createElement("span", {
-    className: styles$i.divider
+    className: styles$k.divider
   }), /*#__PURE__*/React__default.createElement(ToolbarListButton, {
     isDisabled: isDisabled || !canInsertBlocks
   }), isNodeTypeEnabled(sdk.field, BLOCKS.QUOTE) && /*#__PURE__*/React__default.createElement(ToolbarQuoteButton, {
@@ -7426,7 +7461,7 @@ var Toolbar = function Toolbar(_ref) {
   }), isNodeTypeEnabled(sdk.field, BLOCKS.TABLE) && /*#__PURE__*/React__default.createElement(ToolbarTableButton, {
     isDisabled: shouldDisableTables
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$i.embedActionsWrapper
+    className: styles$k.embedActionsWrapper
   }, /*#__PURE__*/React__default.createElement(EmbedEntityWidget, {
     isDisabled: isDisabled,
     canInsertBlocks: canInsertBlocks
@@ -7451,7 +7486,7 @@ function getValidationInfo(field) {
 }
 
 var _templateObject$b;
-var styles$j = {
+var styles$l = {
   nativeSticky: /*#__PURE__*/css(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    position: -webkit-sticky;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n  "])))
 };
 
@@ -7459,7 +7494,7 @@ var StickyToolbarWrapper = function StickyToolbarWrapper(_ref) {
   var isDisabled = _ref.isDisabled,
       children = _ref.children;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: isDisabled ? '' : styles$j.nativeSticky
+    className: isDisabled ? '' : styles$l.nativeSticky
   }, children);
 };
 
@@ -7526,14 +7561,14 @@ var useOnValueChanged = function useOnValueChanged(_ref) {
   }, [editorId, onChange, skip, onSkip]);
 };
 
-var _excluded = ["sdk", "isInitiallyDisabled", "onAction"];
+var _excluded = ["sdk", "isInitiallyDisabled", "onAction", "restrictedMarks"];
 var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
   var id = getContentfulEditorId(props.sdk);
   var plugins = React__default.useMemo(function () {
     var _props$onAction;
 
-    return getPlugins(props.sdk, (_props$onAction = props.onAction) != null ? _props$onAction : noop);
-  }, [props.sdk, props.onAction]);
+    return getPlugins(props.sdk, (_props$onAction = props.onAction) != null ? _props$onAction : noop, props.restrictedMarks);
+  }, [props.sdk, props.onAction, props.restrictedMarks]);
 
   var _useState = useState(true),
       isFirstRender = _useState[0],
@@ -7572,9 +7607,9 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
     setPendingExternalUpdate(true);
     setEditorContent(editor, documentToEditorValue(props.value));
   }, [props.value, id]);
-  var classNames = cx(styles$h.editor, props.minHeight !== undefined ? css({
+  var classNames = cx(styles$j.editor, props.minHeight !== undefined ? css({
     minHeight: props.minHeight
-  }) : undefined, props.isDisabled ? styles$h.disabled : styles$h.enabled, props.isToolbarHidden && styles$h.hiddenToolbar);
+  }) : undefined, props.isDisabled ? styles$j.disabled : styles$j.enabled, props.isToolbarHidden && styles$j.hiddenToolbar);
   useEffect(function () {
     if (!isFirstRender) {
       return;
@@ -7590,7 +7625,7 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
   }, /*#__PURE__*/React__default.createElement(ContentfulEditorIdProvider, {
     value: id
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$h.root,
+    className: styles$j.root,
     "data-test-id": "rich-text-editor"
   }, /*#__PURE__*/React__default.createElement(Plate, {
     id: id,
@@ -7612,6 +7647,7 @@ var RichTextEditor = function RichTextEditor(props) {
   var sdk = props.sdk,
       isInitiallyDisabled = props.isInitiallyDisabled,
       onAction = props.onAction,
+      restrictedMarks = props.restrictedMarks,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   var isEmptyValue = useCallback(function (value) {
@@ -7636,7 +7672,8 @@ var RichTextEditor = function RichTextEditor(props) {
       sdk: sdk,
       onAction: onAction,
       isDisabled: disabled,
-      onChange: setValue
+      onChange: setValue,
+      restrictedMarks: restrictedMarks
     }));
   }));
 };