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

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.3.0](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@3.2.2...@contentful/field-editor-rich-text@3.3.0) (2022-12-09)
+
+### Features
+
+- dropdown toolbar rich text [TOL-764] ([#1287](https://github.com/contentful/field-editors/issues/1287)) ([bfcc3d1](https://github.com/contentful/field-editors/commit/bfcc3d1f2a0da46877c0f35f53e13a3c79abca3b))
+
 ## [3.2.2](https://github.com/contentful/field-editors/compare/@contentful/field-editor-rich-text@3.2.1...@contentful/field-editor-rich-text@3.2.2) (2022-12-08)
 
 ### Bug Fixes

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

@@ -5120,6 +5120,12 @@ var buildMarkEventHandler = function buildMarkEventHandler(type) {
   };
 };
 
+var styles$c = {
+  isActive: /*#__PURE__*/emotion.css({
+    backgroundColor: tokens.blue100,
+    color: tokens.blue600
+  })
+};
 var createMarkToolbarButton = function createMarkToolbarButton(_ref) {
   var mark = _ref.mark,
       title = _ref.title,
@@ -5138,6 +5144,18 @@ var createMarkToolbarButton = function createMarkToolbarButton(_ref) {
       focus(editor);
     }, [editor]);
     if (!editor) return null;
+
+    if (!icon) {
+      var _cx;
+
+      return /*#__PURE__*/React.createElement(f36Components.Menu.Item, {
+        onClick: handleClick,
+        disabled: isDisabled,
+        className: emotion.cx((_cx = {}, _cx[styles$c.isActive] = plateCore.isMarkActive(editor, mark), _cx)),
+        testId: mark + "-toolbar-button"
+      }, title);
+    }
+
     return /*#__PURE__*/React.createElement(ToolbarButton, {
       title: title,
       testId: mark + "-toolbar-button",
@@ -5156,14 +5174,14 @@ var ToolbarBoldButton = /*#__PURE__*/createMarkToolbarButton({
   mark: Contentful.MARKS.BOLD,
   icon: /*#__PURE__*/React.createElement(f36Icons.FormatBoldIcon, null)
 });
-var styles$c = {
+var styles$d = {
   bold: /*#__PURE__*/emotion.css({
     fontWeight: 600
   })
 };
 function Bold(props) {
   return /*#__PURE__*/React.createElement("strong", _extends({}, props.attributes, {
-    className: styles$c.bold
+    className: styles$d.bold
   }), props.children);
 }
 
@@ -5203,7 +5221,11 @@ var ToolbarCodeButton = /*#__PURE__*/createMarkToolbarButton({
   mark: Contentful.MARKS.CODE,
   icon: /*#__PURE__*/React.createElement(f36Icons.CodeIcon, null)
 });
-var styles$d = {
+var ToolbarDropdownCodeButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Code',
+  mark: Contentful.MARKS.CODE
+});
+var styles$e = {
   code: /*#__PURE__*/emotion.css({
     fontFamily: 'monospace',
     fontSize: '.9em'
@@ -5211,7 +5233,7 @@ var styles$d = {
 };
 function Code(props) {
   return /*#__PURE__*/React.createElement("code", _extends({}, props.attributes, {
-    className: styles$d.code
+    className: styles$e.code
   }), props.children);
 }
 var createCodePlugin = function createCodePlugin() {
@@ -5241,14 +5263,14 @@ var ToolbarItalicButton = /*#__PURE__*/createMarkToolbarButton({
   mark: Contentful.MARKS.ITALIC,
   icon: /*#__PURE__*/React.createElement(f36Icons.FormatItalicIcon, null)
 });
-var styles$e = {
+var styles$f = {
   italic: /*#__PURE__*/emotion.css({
     fontStyle: 'italic'
   })
 };
 function Italic(props) {
   return /*#__PURE__*/React.createElement("em", _extends({}, props.attributes, {
-    className: styles$e.italic
+    className: styles$f.italic
   }), props.children);
 }
 var createItalicPlugin = function createItalicPlugin() {
@@ -5313,7 +5335,7 @@ var createUnderlinePlugin = function createUnderlinePlugin() {
   });
 };
 
-var styles$f = {
+var styles$g = {
   superscript: /*#__PURE__*/emotion.css({
     verticalAlign: 'super',
     fontSize: 'smaller'
@@ -5324,9 +5346,13 @@ var ToolbarSuperscriptButton = /*#__PURE__*/createMarkToolbarButton({
   mark: Contentful.MARKS.SUPERSCRIPT,
   icon: /*#__PURE__*/React.createElement(f36Icons.SuperscriptIcon, null)
 });
+var ToolbarDropdownSuperscriptButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Superscript',
+  mark: Contentful.MARKS.SUPERSCRIPT
+});
 function Superscript(props) {
   return /*#__PURE__*/React.createElement("sup", _extends({}, props.attributes, {
-    className: styles$f.superscript
+    className: styles$g.superscript
   }), props.children);
 }
 var createSuperscriptPlugin = function createSuperscriptPlugin() {
@@ -5344,7 +5370,7 @@ var createSuperscriptPlugin = function createSuperscriptPlugin() {
   });
 };
 
-var styles$g = {
+var styles$h = {
   subscript: /*#__PURE__*/emotion.css({
     verticalAlign: 'sub',
     fontSize: 'smaller'
@@ -5357,9 +5383,13 @@ var ToolbarSubscriptButton = /*#__PURE__*/createMarkToolbarButton({
     viewBox: "0 0 23 18"
   })
 });
+var ToolbarDropdownSubscriptButton = /*#__PURE__*/createMarkToolbarButton({
+  title: 'Subscript',
+  mark: Contentful.MARKS.SUBSCRIPT
+});
 function Subscript(props) {
   return /*#__PURE__*/React.createElement("sub", _extends({}, props.attributes, {
-    className: styles$g.subscript
+    className: styles$h.subscript
   }), props.children);
 }
 var createSubscriptPlugin = function createSubscriptPlugin() {
@@ -5588,10 +5618,10 @@ var createNormalizerPlugin = function createNormalizerPlugin() {
 };
 
 var _templateObject$6, _styles$1;
-var styles$h = (_styles$1 = {}, _styles$1[Contentful.BLOCKS.PARAGRAPH] = /*#__PURE__*/emotion.css(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    margin-bottom: 1.5em;\n  "])), tokens.lineHeightDefault), _styles$1);
+var styles$i = (_styles$1 = {}, _styles$1[Contentful.BLOCKS.PARAGRAPH] = /*#__PURE__*/emotion.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__*/React.createElement("div", _extends({}, props.attributes, {
-    className: styles$h[Contentful.BLOCKS.PARAGRAPH]
+    className: styles$i[Contentful.BLOCKS.PARAGRAPH]
   }), props.children);
 }
 
@@ -6233,7 +6263,7 @@ var isTable = function isTable(node) {
   return slate.Element.isElement(node) && node.type === Contentful.BLOCKS.TABLE;
 };
 
-var styles$i = {
+var styles$j = {
   topRight: /*#__PURE__*/emotion.css({
     position: 'absolute',
     top: '6px',
@@ -6322,7 +6352,7 @@ var TableActions = function TableActions() {
     size: "small",
     variant: "transparent",
     tabIndex: -1,
-    className: styles$i.topRight,
+    className: styles$j.topRight,
     icon: /*#__PURE__*/React__default.createElement(f36Icons.ChevronDownIcon, null),
     "aria-label": "Open table menu",
     testId: "cf-table-actions-button"
@@ -7271,7 +7301,7 @@ var normalizeEditorValue = function normalizeEditorValue(value, options) {
 };
 
 var STYLE_EDITOR_BORDER = "1px solid " + tokens.gray400;
-var styles$j = {
+var styles$k = {
   root: /*#__PURE__*/emotion.css({
     position: 'relative'
   }),
@@ -7388,13 +7418,19 @@ var EmbedEntityWidget = function EmbedEntityWidget(_ref) {
   }, actions) : null;
 };
 
-var styles$k = {
+var styles$l = {
   toolbar: /*#__PURE__*/emotion.css({
     border: "1px solid " + tokens.gray400,
     backgroundColor: tokens.gray100,
     padding: tokens.spacingXs,
     borderRadius: tokens.borderRadiusMedium + " " + tokens.borderRadiusMedium + " 0 0"
   }),
+  toolbarBtn: /*#__PURE__*/emotion.css({
+    height: '30px',
+    width: '30px',
+    marginLeft: tokens.spacing2Xs,
+    marginRight: tokens.spacing2Xs
+  }),
   divider: /*#__PURE__*/emotion.css({
     display: 'inline-block',
     height: '21px',
@@ -7420,8 +7456,30 @@ var styles$k = {
   })
 };
 
-var Toolbar = function Toolbar(_ref) {
-  var isDisabled = _ref.isDisabled;
+var Dropdown = function Dropdown(_ref) {
+  var sdk = _ref.sdk,
+      isDisabled = _ref.isDisabled;
+  var editor = useContentfulEditor();
+  var isActive = plateCore.isMarkActive(editor, Contentful.MARKS.SUPERSCRIPT) || plateCore.isMarkActive(editor, Contentful.MARKS.SUBSCRIPT) || plateCore.isMarkActive(editor, Contentful.MARKS.CODE);
+  return /*#__PURE__*/React__default.createElement(f36Components.Menu, null, /*#__PURE__*/React__default.createElement(f36Components.Menu.Trigger, null, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(f36Components.IconButton, {
+    size: "small",
+    className: styles$l.toolbarBtn,
+    variant: isActive ? 'secondary' : 'transparent',
+    icon: /*#__PURE__*/React__default.createElement(f36Icons.MoreHorizontalIcon, null),
+    "aria-label": "toggle menu",
+    isDisabled: isDisabled,
+    testId: "dropdown-toolbar-button"
+  }))), /*#__PURE__*/React__default.createElement(f36Components.Menu.List, null, isMarkEnabled(sdk.field, Contentful.MARKS.SUPERSCRIPT) && /*#__PURE__*/React__default.createElement(ToolbarDropdownSuperscriptButton, {
+    isDisabled: isDisabled
+  }), isMarkEnabled(sdk.field, Contentful.MARKS.SUBSCRIPT) && /*#__PURE__*/React__default.createElement(ToolbarDropdownSubscriptButton, {
+    isDisabled: isDisabled
+  }), isMarkEnabled(sdk.field, Contentful.MARKS.CODE) && /*#__PURE__*/React__default.createElement(ToolbarDropdownCodeButton, {
+    isDisabled: isDisabled
+  })));
+};
+
+var Toolbar = function Toolbar(_ref2) {
+  var isDisabled = _ref2.isDisabled;
   var sdk = useSdkContext();
   var editor = useContentfulEditor();
   var canInsertBlocks = !isNodeTypeSelected(editor, Contentful.BLOCKS.TABLE);
@@ -7430,35 +7488,42 @@ var Toolbar = function Toolbar(_ref) {
   }, [sdk.field]);
   var isListSelected = isNodeTypeSelected(editor, Contentful.BLOCKS.UL_LIST) || isNodeTypeSelected(editor, Contentful.BLOCKS.OL_LIST);
   var isBlockquoteSelected = isNodeTypeSelected(editor, Contentful.BLOCKS.QUOTE);
-  var shouldDisableTables = isDisabled || !canInsertBlocks || isListSelected || isBlockquoteSelected;
+  var shouldDisableTables = isDisabled || !canInsertBlocks || isListSelected || isBlockquoteSelected; // We only show the dropdown when: whenever at least bold , italic and underline are available; If nothing that would go inside the dropdown is available, we hide it
+
+  var boldItalicUnderlineAvailable = isMarkEnabled(sdk.field, Contentful.MARKS.BOLD) || isMarkEnabled(sdk.field, Contentful.MARKS.ITALIC) || isMarkEnabled(sdk.field, Contentful.MARKS.UNDERLINE);
+  var dropdownItemsAvailable = isMarkEnabled(sdk.field, Contentful.MARKS.SUPERSCRIPT) || isMarkEnabled(sdk.field, Contentful.MARKS.SUBSCRIPT) || isMarkEnabled(sdk.field, Contentful.MARKS.CODE);
+  var shouldShowDropdown = boldItalicUnderlineAvailable && dropdownItemsAvailable;
   return /*#__PURE__*/React__default.createElement(f36Components.Flex, {
     testId: "toolbar",
-    className: styles$k.toolbar,
+    className: styles$l.toolbar,
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$k.formattingOptionsWrapper
+    className: styles$l.formattingOptionsWrapper
   }, /*#__PURE__*/React__default.createElement(ToolbarHeadingButton, {
     isDisabled: isDisabled || !canInsertBlocks
   }), validationInfo.isAnyMarkEnabled && /*#__PURE__*/React__default.createElement("span", {
-    className: styles$k.divider
+    className: styles$l.divider
   }), isMarkEnabled(sdk.field, Contentful.MARKS.BOLD) && /*#__PURE__*/React__default.createElement(ToolbarBoldButton, {
     isDisabled: isDisabled
   }), isMarkEnabled(sdk.field, Contentful.MARKS.ITALIC) && /*#__PURE__*/React__default.createElement(ToolbarItalicButton, {
     isDisabled: isDisabled
-  }), isMarkEnabled(sdk.field, Contentful.MARKS.SUPERSCRIPT) && /*#__PURE__*/React__default.createElement(ToolbarSuperscriptButton, {
+  }), isMarkEnabled(sdk.field, Contentful.MARKS.UNDERLINE) && /*#__PURE__*/React__default.createElement(ToolbarUnderlineButton, {
     isDisabled: isDisabled
-  }), isMarkEnabled(sdk.field, Contentful.MARKS.SUBSCRIPT) && /*#__PURE__*/React__default.createElement(ToolbarSubscriptButton, {
+  }), !boldItalicUnderlineAvailable && isMarkEnabled(sdk.field, Contentful.MARKS.SUPERSCRIPT) && /*#__PURE__*/React__default.createElement(ToolbarSuperscriptButton, {
     isDisabled: isDisabled
-  }), isMarkEnabled(sdk.field, Contentful.MARKS.UNDERLINE) && /*#__PURE__*/React__default.createElement(ToolbarUnderlineButton, {
+  }), !boldItalicUnderlineAvailable && isMarkEnabled(sdk.field, Contentful.MARKS.SUBSCRIPT) && /*#__PURE__*/React__default.createElement(ToolbarSubscriptButton, {
     isDisabled: isDisabled
-  }), isMarkEnabled(sdk.field, Contentful.MARKS.CODE) && /*#__PURE__*/React__default.createElement(ToolbarCodeButton, {
+  }), !boldItalicUnderlineAvailable && isMarkEnabled(sdk.field, Contentful.MARKS.CODE) && /*#__PURE__*/React__default.createElement(ToolbarCodeButton, {
+    isDisabled: isDisabled
+  }), shouldShowDropdown && /*#__PURE__*/React__default.createElement(Dropdown, {
+    sdk: sdk,
     isDisabled: isDisabled
   }), validationInfo.isAnyHyperlinkEnabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-    className: styles$k.divider
+    className: styles$l.divider
   }), /*#__PURE__*/React__default.createElement(ToolbarHyperlinkButton, {
     isDisabled: isDisabled
   })), validationInfo.isAnyBlockFormattingEnabled && /*#__PURE__*/React__default.createElement("span", {
-    className: styles$k.divider
+    className: styles$l.divider
   }), /*#__PURE__*/React__default.createElement(ToolbarListButton, {
     isDisabled: isDisabled || !canInsertBlocks
   }), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.QUOTE) && /*#__PURE__*/React__default.createElement(ToolbarQuoteButton, {
@@ -7468,7 +7533,7 @@ var Toolbar = function Toolbar(_ref) {
   }), isNodeTypeEnabled(sdk.field, Contentful.BLOCKS.TABLE) && /*#__PURE__*/React__default.createElement(ToolbarTableButton, {
     isDisabled: shouldDisableTables
   })), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$k.embedActionsWrapper
+    className: styles$l.embedActionsWrapper
   }, /*#__PURE__*/React__default.createElement(EmbedEntityWidget, {
     isDisabled: isDisabled,
     canInsertBlocks: canInsertBlocks
@@ -7493,7 +7558,7 @@ function getValidationInfo(field) {
 }
 
 var _templateObject$b;
-var styles$l = {
+var styles$m = {
   nativeSticky: /*#__PURE__*/emotion.css(_templateObject$b || (_templateObject$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n    position: -webkit-sticky;\n    position: sticky;\n    top: -1px;\n    z-index: 2;\n  "])))
 };
 
@@ -7501,7 +7566,7 @@ var StickyToolbarWrapper = function StickyToolbarWrapper(_ref) {
   var isDisabled = _ref.isDisabled,
       children = _ref.children;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: isDisabled ? '' : styles$l.nativeSticky
+    className: isDisabled ? '' : styles$m.nativeSticky
   }, children);
 };
 
@@ -7614,9 +7679,9 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
     setPendingExternalUpdate(true);
     setEditorContent(editor, documentToEditorValue(props.value));
   }, [props.value, id]);
-  var classNames = emotion.cx(styles$j.editor, props.minHeight !== undefined ? emotion.css({
+  var classNames = emotion.cx(styles$k.editor, props.minHeight !== undefined ? emotion.css({
     minHeight: props.minHeight
-  }) : undefined, props.isDisabled ? styles$j.disabled : styles$j.enabled, props.isToolbarHidden && styles$j.hiddenToolbar);
+  }) : undefined, props.isDisabled ? styles$k.disabled : styles$k.enabled, props.isToolbarHidden && styles$k.hiddenToolbar);
   React.useEffect(function () {
     if (!isFirstRender) {
       return;
@@ -7632,7 +7697,7 @@ var ConnectedRichTextEditor = function ConnectedRichTextEditor(props) {
   }, /*#__PURE__*/React__default.createElement(ContentfulEditorIdProvider, {
     value: id
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: styles$j.root,
+    className: styles$k.root,
     "data-test-id": "rich-text-editor"
   }, /*#__PURE__*/React__default.createElement(plateCore.Plate, {
     id: id,