@contentful/field-editor-rich-text 3.1.12 → 3.2.1

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

@@ -20,10 +20,10 @@ import find from 'lodash-es/find';
 import flow from 'lodash-es/flow';
 import get from 'lodash-es/get';
 import tokens from '@contentful/f36-tokens';
-import { AssetIcon, EmbeddedEntryBlockIcon, ClockIcon, EmbeddedEntryInlineIcon, ChevronDownIcon, HorizontalRuleIcon, LinkIcon, ListBulletedIcon, ListNumberedIcon, FormatBoldIcon, CodeIcon, FormatItalicIcon, FormatUnderlinedIcon, QuoteIcon, TableIcon, PlusIcon } from '@contentful/f36-icons';
+import { AssetIcon, EmbeddedEntryBlockIcon, ClockIcon, EmbeddedEntryInlineIcon, ChevronDownIcon, HorizontalRuleIcon, LinkIcon, ListBulletedIcon, ListNumberedIcon, FormatBoldIcon, CodeIcon, FormatItalicIcon, FormatUnderlinedIcon, SuperscriptIcon, SubscriptIcon, QuoteIcon, TableIcon, PlusIcon } from '@contentful/f36-icons';
 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';
 import castArray from 'lodash-es/castArray';
-import { createBoldPlugin as createBoldPlugin$1, createCodePlugin as createCodePlugin$1, createItalicPlugin as createItalicPlugin$1, createUnderlinePlugin as createUnderlinePlugin$1 } from '@udecode/plate-basic-marks';
+import { createBoldPlugin as createBoldPlugin$1, createCodePlugin as createCodePlugin$1, createItalicPlugin as createItalicPlugin$1, createUnderlinePlugin as createUnderlinePlugin$1, createSuperscriptPlugin as createSuperscriptPlugin$1, createSubscriptPlugin as createSubscriptPlugin$1 } from '@udecode/plate-basic-marks';
 import isPlainObject from 'is-plain-obj';
 import { createParagraphPlugin as createParagraphPlugin$1 } from '@udecode/plate-paragraph';
 import { createSelectOnBackspacePlugin as createSelectOnBackspacePlugin$1 } from '@udecode/plate-select';
@@ -5089,6 +5089,30 @@ function ToolbarListButton(props) {
   }, /*#__PURE__*/createElement(ListNumberedIcon, null)));
 }
 
+var toggleMarkAndDeactivateConflictingMarks = function toggleMarkAndDeactivateConflictingMarks(editor, mark) {
+  var subs = [MARKS.SUPERSCRIPT, MARKS.SUBSCRIPT];
+  var clear = subs.includes(mark) ? subs : [];
+  toggleMark(editor, {
+    key: mark,
+    clear: clear
+  });
+};
+var buildMarkEventHandler = function buildMarkEventHandler(type) {
+  return function (editor, _ref) {
+    var hotkey = _ref.options.hotkey;
+    return function (event) {
+      if (editor.selection && hotkey && isHotkey(hotkey, event)) {
+        event.preventDefault();
+        var isActive = isMarkActive(editor, type);
+        editor.tracking.onShortcutAction(isActive ? 'unmark' : 'mark', {
+          markType: type
+        });
+        toggleMarkAndDeactivateConflictingMarks(editor, type);
+      }
+    };
+  };
+};
+
 var createMarkToolbarButton = function createMarkToolbarButton(_ref) {
   var mark = _ref.mark,
       title = _ref.title,
@@ -5103,9 +5127,7 @@ var createMarkToolbarButton = function createMarkToolbarButton(_ref) {
       editor.tracking.onToolbarAction(isActive ? 'unmark' : 'mark', {
         markType: mark
       });
-      toggleMark(editor, {
-        key: mark
-      });
+      toggleMarkAndDeactivateConflictingMarks(editor, mark);
       focus(editor);
     }, [editor]);
     if (!editor) return null;
@@ -5122,24 +5144,6 @@ var createMarkToolbarButton = function createMarkToolbarButton(_ref) {
   return Mark;
 };
 
-var buildMarkEventHandler = function buildMarkEventHandler(type) {
-  return function (editor, _ref) {
-    var hotkey = _ref.options.hotkey;
-    return function (event) {
-      if (editor.selection && hotkey && isHotkey(hotkey, event)) {
-        event.preventDefault();
-        var isActive = isMarkActive(editor, type);
-        editor.tracking.onShortcutAction(isActive ? 'unmark' : 'mark', {
-          markType: type
-        });
-        toggleMark(editor, {
-          key: type
-        });
-      }
-    };
-  };
-};
-
 var ToolbarBoldButton = /*#__PURE__*/createMarkToolbarButton({
   title: 'Bold',
   mark: MARKS.BOLD,
@@ -5302,10 +5306,74 @@ 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, {
+    className: styles$f.superscript
+  }), props.children);
+}
+var createSuperscriptPlugin = function createSuperscriptPlugin() {
+  return createSuperscriptPlugin$1({
+    type: MARKS.SUPERSCRIPT,
+    component: Superscript,
+    handlers: {
+      onKeyDown: buildMarkEventHandler(MARKS.SUPERSCRIPT)
+    },
+    deserializeHtml: {
+      rules: [{
+        validNodeName: ['SUP']
+      }]
+    }
+  });
+};
+
+var styles$g = {
+  subscript: /*#__PURE__*/css({
+    verticalAlign: 'sub',
+    fontSize: 'smaller'
+  })
+};
+var ToolbarSubscriptButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Subscript',
+  mark: MARKS.SUBSCRIPT,
+  icon: /*#__PURE__*/createElement(SubscriptIcon, {
+    viewBox: "0 0 23 18"
+  })
+});
+function Subscript(props) {
+  return /*#__PURE__*/createElement("sub", _extends({}, props.attributes, {
+    className: styles$g.subscript
+  }), props.children);
+}
+var createSubscriptPlugin = function createSubscriptPlugin() {
+  return createSubscriptPlugin$1({
+    type: MARKS.SUBSCRIPT,
+    component: Subscript,
+    handlers: {
+      onKeyDown: buildMarkEventHandler(MARKS.SUBSCRIPT)
+    },
+    deserializeHtml: {
+      rules: [{
+        validNodeName: ['SUB']
+      }]
+    }
+  });
+};
+
 var createMarksPlugin = function createMarksPlugin() {
   return {
     key: 'Marks',
-    plugins: [createBoldPlugin(), createCodePlugin(), createItalicPlugin(), createUnderlinePlugin()]
+    plugins: [createBoldPlugin(), createCodePlugin(), createItalicPlugin(), createUnderlinePlugin(), createSuperscriptPlugin(), createSubscriptPlugin()]
   };
 };
 
@@ -5513,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);
 }
 
@@ -6158,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',
@@ -6247,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"
@@ -7177,7 +7245,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'
   }),
@@ -7294,7 +7362,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,
@@ -7339,28 +7407,32 @@ 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, {
     isDisabled: isDisabled
+  }), isMarkEnabled(sdk.field, MARKS.SUPERSCRIPT) && /*#__PURE__*/React__default.createElement(ToolbarSuperscriptButton, {
+    isDisabled: isDisabled
+  }), isMarkEnabled(sdk.field, MARKS.SUBSCRIPT) && /*#__PURE__*/React__default.createElement(ToolbarSubscriptButton, {
+    isDisabled: isDisabled
   }), isMarkEnabled(sdk.field, MARKS.UNDERLINE) && /*#__PURE__*/React__default.createElement(ToolbarUnderlineButton, {
     isDisabled: isDisabled
   }), 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, {
@@ -7370,7 +7442,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
@@ -7395,7 +7467,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  "])))
 };
 
@@ -7403,7 +7475,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);
 };
 
@@ -7516,9 +7588,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;
@@ -7534,7 +7606,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,