@contentful/field-editor-rich-text 4.11.2 → 4.11.3

package/dist/cjs/Toolbar/components/ButtonRedo.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "ButtonRedo", {
 });
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _f36components = require("@contentful/f36-components");
+const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
 const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
 const _ToolbarButton = require("../../plugins/shared/ToolbarButton");
 function _interop_require_default(obj) {
@@ -29,7 +30,7 @@ const ButtonRedo = ()=>{
         isActive: false,
         isDisabled: editor.history.redos.length === 0
     }, /*#__PURE__*/ _react.default.createElement(_f36components.Icon, {
-        variant: "secondary"
+        color: _f36tokens.default.gray900
     }, /*#__PURE__*/ _react.default.createElement("path", {
         d: "M18.4,10.6C16.55,9 14.15,8 11.5,8C6.85,8 2.92,11.03 1.54,15.22L3.9,16C4.95,12.81 7.95,10.5 11.5,10.5C13.45,10.5 15.23,11.22 16.62,12.38L13,16H22V7L18.4,10.6Z"
     })));

package/dist/cjs/Toolbar/components/ButtonUndo.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "ButtonUndo", {
 });
 const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _f36components = require("@contentful/f36-components");
+const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
 const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
 const _ToolbarButton = require("../../plugins/shared/ToolbarButton");
 function _interop_require_default(obj) {
@@ -29,7 +30,7 @@ const ButtonUndo = ()=>{
         isActive: false,
         isDisabled: editor.history.undos.length === 0
     }, /*#__PURE__*/ _react.default.createElement(_f36components.Icon, {
-        variant: "secondary"
+        color: _f36tokens.default.gray900
     }, /*#__PURE__*/ _react.default.createElement("path", {
         d: "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z"
     })));

package/dist/cjs/Toolbar/components/EmbeddedEntityDropdownButton.js

@@ -59,7 +59,7 @@ function EmbeddedEntityDropdownButton({ children, isDisabled, isOpen, onClose, o
         onClose: onClose,
         onOpen: onToggle
     }, /*#__PURE__*/ _react.createElement(_f36components.Menu.Trigger, null, /*#__PURE__*/ _react.createElement(_f36components.Button, {
-        endIcon: /*#__PURE__*/ _react.createElement(_f36icons.ChevronDownIcon, null),
+        endIcon: /*#__PURE__*/ _react.createElement(_f36icons.CaretDownIcon, null),
         testId: "toolbar-entity-dropdown-toggle",
         variant: "secondary",
         size: "small",

package/dist/cjs/Toolbar/index.js

@@ -138,7 +138,7 @@ const Dropdown = ({ sdk, isDisabled })=>{
         size: "small",
         className: styles.toolbarBtn,
         variant: isActive ? 'secondary' : 'transparent',
-        icon: /*#__PURE__*/ _react.createElement(_f36icons.MoreHorizontalIcon, null),
+        icon: /*#__PURE__*/ _react.createElement(_f36icons.DotsThreeIcon, null),
         "aria-label": "toggle menu",
         isDisabled: isDisabled,
         testId: "dropdown-toolbar-button"

package/dist/cjs/plugins/EmbeddedEntityInline/FetchingWrappedInlineEntryCard.js

@@ -107,14 +107,16 @@ function InternalFetchingWrappedInlineEntryCard({ entry, allContentTypes, locale
                 disabled: isDisabled,
                 testId: "delete"
             }, "Remove")
-        ]
+        ].map((item, i)=>/*#__PURE__*/ _react.createElement(_f36components.Menu, {
+                key: i
+            }, item))
     }, /*#__PURE__*/ _react.createElement(_fieldeditorreference.ScheduledIconWithTooltip, {
         getEntityScheduledActions: getEntityScheduledActions,
         entityType: "Entry",
         entityId: entry.sys.id
     }, /*#__PURE__*/ _react.createElement(_f36icons.ClockIcon, {
         className: styles.scheduledIcon,
-        variant: "muted",
+        color: _f36tokens.default.gray600,
         testId: "scheduled-icon"
     })), /*#__PURE__*/ _react.createElement(_f36components.Text, null, title));
 }
@@ -155,7 +157,9 @@ function FetchingWrappedInlineEntryCard(props) {
                     onClick: props.onRemove,
                     testId: "delete"
                 }, "Remove")
-            ]
+            ].map((item, i)=>/*#__PURE__*/ _react.createElement(_f36components.Menu, {
+                    key: i
+                }, item))
         });
     }
     return /*#__PURE__*/ _react.createElement(InternalFetchingWrappedInlineEntryCard, {

package/dist/cjs/plugins/EmbeddedResourceInline/FetchingWrappedResourceInlineCard.js

@@ -103,6 +103,8 @@ function FetchingWrappedResourceInlineCard(props) {
                 disabled: props.isDisabled,
                 testId: "delete"
             }, "Remove")
-        ]
+        ].map((item, i)=>/*#__PURE__*/ _react.createElement(_f36components.Menu, {
+                key: i
+            }, item))
     }, /*#__PURE__*/ _react.createElement(_f36components.Text, null, title));
 }

package/dist/cjs/plugins/Heading/components/ToolbarHeadingButton.js

@@ -173,7 +173,7 @@ function ToolbarHeadingButton(props) {
         size: "small",
         testId: "toolbar-heading-toggle",
         variant: "transparent",
-        endIcon: /*#__PURE__*/ _react.createElement(_f36icons.ChevronDownIcon, null),
+        endIcon: /*#__PURE__*/ _react.createElement(_f36icons.CaretDownIcon, null),
         isDisabled: props.isDisabled,
         onClick: ()=>someHeadingsEnabled && setOpen(!isOpen),
         className: styles.button

package/dist/cjs/plugins/Hr/index.js

@@ -152,7 +152,7 @@ function ToolbarHrButton(props) {
         onClick: handleOnClick,
         testId: "hr-toolbar-button",
         isActive: (0, _editor.isBlockSelected)(editor, _richtexttypes.BLOCKS.HR)
-    }, /*#__PURE__*/ _react.createElement(_f36icons.HorizontalRuleIcon, null));
+    }, /*#__PURE__*/ _react.createElement(_f36icons.MinusIcon, null));
 }
 function Hr(props) {
     const isSelected = _slatereact.useSelected();

package/dist/cjs/plugins/Hyperlink/components/LinkPopover.js

@@ -94,7 +94,7 @@ const LinkPopover = ({ isLinkFocused, popoverText, handleEditLink, handleRemoveL
         size: "small",
         variant: "transparent",
         "aria-label": "Copy link",
-        icon: /*#__PURE__*/ _react.createElement(_f36icons.CopyIcon, {
+        icon: /*#__PURE__*/ _react.createElement(_f36icons.CopySimpleIcon, {
             size: "tiny"
         })
     })), /*#__PURE__*/ _react.createElement(_f36components.Tooltip, {
@@ -107,7 +107,7 @@ const LinkPopover = ({ isLinkFocused, popoverText, handleEditLink, handleRemoveL
         size: "small",
         variant: "transparent",
         "aria-label": "Edit link",
-        icon: /*#__PURE__*/ _react.createElement(_f36icons.EditIcon, {
+        icon: /*#__PURE__*/ _react.createElement(_f36icons.PencilSimpleIcon, {
             size: "tiny"
         })
     })), /*#__PURE__*/ _react.createElement(_f36components.Tooltip, {

package/dist/cjs/plugins/Hyperlink/components/ToolbarHyperlinkButton.js

@@ -76,5 +76,5 @@ function ToolbarHyperlinkButton(props) {
         onClick: handleClick,
         isActive: isActive,
         isDisabled: props.isDisabled
-    }, /*#__PURE__*/ _react.createElement(_f36icons.LinkIcon, null));
+    }, /*#__PURE__*/ _react.createElement(_f36icons.LinkSimpleIcon, null));
 }

package/dist/cjs/plugins/List/components/ToolbarListButton.js

@@ -78,11 +78,11 @@ function ToolbarListButton(props) {
         onClick: handleClick(_richtexttypes.BLOCKS.UL_LIST),
         isActive: (0, _utils.isListTypeActive)(editor, _richtexttypes.BLOCKS.UL_LIST),
         isDisabled: props.isDisabled
-    }, /*#__PURE__*/ _react.createElement(_f36icons.ListBulletedIcon, null)), (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.BLOCKS.OL_LIST) && /*#__PURE__*/ _react.createElement(_ToolbarButton.ToolbarButton, {
+    }, /*#__PURE__*/ _react.createElement(_f36icons.ListBulletsIcon, null)), (0, _validations.isNodeTypeEnabled)(sdk.field, _richtexttypes.BLOCKS.OL_LIST) && /*#__PURE__*/ _react.createElement(_ToolbarButton.ToolbarButton, {
         title: "OL",
         testId: "ol-toolbar-button",
         onClick: handleClick(_richtexttypes.BLOCKS.OL_LIST),
         isActive: (0, _utils.isListTypeActive)(editor, _richtexttypes.BLOCKS.OL_LIST),
         isDisabled: props.isDisabled
-    }, /*#__PURE__*/ _react.createElement(_f36icons.ListNumberedIcon, null)));
+    }, /*#__PURE__*/ _react.createElement(_f36icons.ListNumbersIcon, null)));
 }

package/dist/cjs/plugins/Marks/Bold.js

@@ -71,7 +71,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 const ToolbarBoldButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
     title: 'Bold',
     mark: _richtexttypes.MARKS.BOLD,
-    icon: /*#__PURE__*/ _react.createElement(_f36icons.FormatBoldIcon, null)
+    icon: /*#__PURE__*/ _react.createElement(_f36icons.TextBIcon, null)
 });
 const styles = {
     bold: (0, _emotion.css)({

package/dist/cjs/plugins/Marks/Code.js

@@ -73,7 +73,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 const ToolbarCodeButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
     title: 'Code',
     mark: _richtexttypes.MARKS.CODE,
-    icon: /*#__PURE__*/ _react.createElement(_f36icons.CodeIcon, null)
+    icon: /*#__PURE__*/ _react.createElement(_f36icons.CodeSimpleIcon, null)
 });
 const ToolbarDropdownCodeButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
     title: 'Code',

package/dist/cjs/plugins/Marks/Italic.js

@@ -71,7 +71,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 const ToolbarItalicButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
     title: 'Italic',
     mark: _richtexttypes.MARKS.ITALIC,
-    icon: /*#__PURE__*/ _react.createElement(_f36icons.FormatItalicIcon, null)
+    icon: /*#__PURE__*/ _react.createElement(_f36icons.TextItalicIcon, null)
 });
 const styles = {
     italic: (0, _emotion.css)({

package/dist/cjs/plugins/Marks/Subscript.js

@@ -79,7 +79,7 @@ const styles = {
 const ToolbarSubscriptButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
     title: 'Subscript',
     mark: _richtexttypes.MARKS.SUBSCRIPT,
-    icon: /*#__PURE__*/ _react.createElement(_f36icons.SubscriptIcon, {
+    icon: /*#__PURE__*/ _react.createElement(_f36icons.TextSubscriptIcon, {
         viewBox: "0 0 23 18"
     })
 });

package/dist/cjs/plugins/Marks/Superscript.js

@@ -79,7 +79,7 @@ const styles = {
 const ToolbarSuperscriptButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
     title: 'Superscript',
     mark: _richtexttypes.MARKS.SUPERSCRIPT,
-    icon: /*#__PURE__*/ _react.createElement(_f36icons.SuperscriptIcon, null)
+    icon: /*#__PURE__*/ _react.createElement(_f36icons.TextSuperscriptIcon, null)
 });
 const ToolbarDropdownSuperscriptButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
     title: 'Superscript',

package/dist/cjs/plugins/Marks/Underline.js

@@ -70,7 +70,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 const ToolbarUnderlineButton = (0, _MarkToolbarButton.createMarkToolbarButton)({
     title: 'Underline',
     mark: _richtexttypes.MARKS.UNDERLINE,
-    icon: /*#__PURE__*/ _react.createElement(_f36icons.FormatUnderlinedIcon, null)
+    icon: /*#__PURE__*/ _react.createElement(_f36icons.TextUnderlineIcon, null)
 });
 function Underline(props) {
     return /*#__PURE__*/ _react.createElement("u", props.attributes, props.children);

package/dist/cjs/plugins/Marks/components/MarkToolbarButton.js

@@ -85,14 +85,14 @@ const createMarkToolbarButton = ({ mark, title, icon })=>{
         ]);
         if (!editor) return null;
         if (!icon) {
-            return /*#__PURE__*/ _react.createElement(_f36components.Menu.Item, {
+            return /*#__PURE__*/ _react.createElement(_f36components.Menu, null, /*#__PURE__*/ _react.createElement(_f36components.Menu.Item, {
                 onClick: handleClick,
                 disabled: isDisabled,
                 className: (0, _emotion.cx)({
                     [styles.isActive]: (0, _queries.isMarkActive)(editor, mark)
                 }),
                 testId: `${mark}-toolbar-button`
-            }, title);
+            }, title));
         }
         return /*#__PURE__*/ _react.createElement(_ToolbarButton.ToolbarButton, {
             title: title,

package/dist/cjs/plugins/Quote/components/ToolbarQuoteButton.js

@@ -70,5 +70,5 @@ function ToolbarQuoteButton(props) {
         testId: "quote-toolbar-button",
         isDisabled: props.isDisabled,
         isActive: (0, _editor.isBlockSelected)(editor, _richtexttypes.BLOCKS.QUOTE)
-    }, /*#__PURE__*/ _react.createElement(_f36icons.QuoteIcon, null));
+    }, /*#__PURE__*/ _react.createElement(_f36icons.QuotesIcon, null));
 }

package/dist/cjs/plugins/Table/components/TableActions.js

@@ -153,7 +153,7 @@ const TableActions = ()=>{
         variant: "transparent",
         tabIndex: -1,
         className: styles.topRight,
-        icon: /*#__PURE__*/ _react.createElement(_f36icons.ChevronDownIcon, null),
+        icon: /*#__PURE__*/ _react.createElement(_f36icons.CaretDownIcon, null),
         "aria-label": "Open table menu",
         testId: "cf-table-actions-button"
     })), /*#__PURE__*/ _react.createElement(_f36components.Menu.List, null, /*#__PURE__*/ _react.createElement(_f36components.Menu.Item, {

package/dist/cjs/plugins/shared/EmbeddedBlockToolbarIcon.js

@@ -19,12 +19,18 @@ _export(exports, {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _f36components = require("@contentful/f36-components");
 const _f36icons = require("@contentful/f36-icons");
+const _f36tokens = /*#__PURE__*/ _interop_require_default(require("@contentful/f36-tokens"));
 const _richtexttypes = require("@contentful/rich-text-types");
 const _emotion = require("emotion");
 const _ContentfulEditorProvider = require("../../ContentfulEditorProvider");
 const _SdkProvider = require("../../SdkProvider");
 const _EmbeddedBlockUtil = require("../shared/EmbeddedBlockUtil");
 const _ResourceNewBadge = require("./ResourceNewBadge");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -88,7 +94,7 @@ function EmbeddedBlockToolbarIcon({ isDisabled, nodeType, onClose }) {
     };
     const type = getEntityTypeFromNodeType(nodeType);
     const baseClass = `rich-text__${nodeType}`;
-    return /*#__PURE__*/ _react.createElement(_f36components.Menu.Item, {
+    return /*#__PURE__*/ _react.createElement(_f36components.Menu, null, /*#__PURE__*/ _react.createElement(_f36components.Menu.Item, {
         disabled: isDisabled,
         className: `${baseClass}-list-item`,
         onClick: handleClick,
@@ -97,10 +103,10 @@ function EmbeddedBlockToolbarIcon({ isDisabled, nodeType, onClose }) {
         alignItems: "center",
         flexDirection: "row"
     }, /*#__PURE__*/ _react.createElement(_f36components.Icon, {
-        as: type === 'Asset' ? _f36icons.AssetIcon : _f36icons.EmbeddedEntryBlockIcon,
+        as: type === 'Asset' ? _f36icons.ImageSquareIcon : _f36icons.EmbeddedBlockIcon,
         className: `rich-text__embedded-entry-list-icon ${styles.icon}`,
-        variant: "secondary"
-    }), /*#__PURE__*/ _react.createElement("span", null, type, nodeType == _richtexttypes.BLOCKS.EMBEDDED_RESOURCE && /*#__PURE__*/ _react.createElement(_ResourceNewBadge.ResourceNewBadge, null))));
+        color: _f36tokens.default.gray900
+    }), /*#__PURE__*/ _react.createElement("span", null, type, nodeType == _richtexttypes.BLOCKS.EMBEDDED_RESOURCE && /*#__PURE__*/ _react.createElement(_ResourceNewBadge.ResourceNewBadge, null)))));
 }
 function getEntityTypeFromNodeType(nodeType) {
     const words = nodeType.toLowerCase().split('-');

package/dist/cjs/plugins/shared/EmbeddedInlineToolbarIcon.js

@@ -92,7 +92,7 @@ function EmbeddedInlineToolbarIcon({ onClose, nodeType, isDisabled }) {
         }
         (0, _editor.moveToTheNextChar)(editor);
     }
-    return /*#__PURE__*/ _react.createElement(_f36components.Menu.Item, {
+    return /*#__PURE__*/ _react.createElement(_f36components.Menu, null, /*#__PURE__*/ _react.createElement(_f36components.Menu.Item, {
         disabled: isDisabled,
         className: "rich-text__entry-link-block-button",
         testId: `toolbar-toggle-${nodeType}`,
@@ -100,8 +100,8 @@ function EmbeddedInlineToolbarIcon({ onClose, nodeType, isDisabled }) {
     }, /*#__PURE__*/ _react.createElement(_f36components.Flex, {
         alignItems: "center",
         flexDirection: "row"
-    }, /*#__PURE__*/ _react.createElement(_f36icons.EmbeddedEntryInlineIcon, {
-        variant: "secondary",
+    }, /*#__PURE__*/ _react.createElement(_f36icons.EmbeddedLineIcon, {
+        color: _f36tokens.default.gray900,
         className: `rich-text__embedded-entry-list-icon ${styles.icon}`
-    }), /*#__PURE__*/ _react.createElement("span", null, "Inline entry", nodeType == _richtexttypes.INLINES.EMBEDDED_RESOURCE && /*#__PURE__*/ _react.createElement(_ResourceNewBadge.ResourceNewBadge, null))));
+    }), /*#__PURE__*/ _react.createElement("span", null, "Inline entry", nodeType == _richtexttypes.INLINES.EMBEDDED_RESOURCE && /*#__PURE__*/ _react.createElement(_ResourceNewBadge.ResourceNewBadge, null)))));
 }

package/dist/esm/Toolbar/components/ButtonRedo.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Icon } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
 import { useContentfulEditor } from '../../ContentfulEditorProvider';
 import { ToolbarButton } from '../../plugins/shared/ToolbarButton';
 export const ButtonRedo = ()=>{
@@ -14,7 +15,7 @@ export const ButtonRedo = ()=>{
         isActive: false,
         isDisabled: editor.history.redos.length === 0
     }, /*#__PURE__*/ React.createElement(Icon, {
-        variant: "secondary"
+        color: tokens.gray900
     }, /*#__PURE__*/ React.createElement("path", {
         d: "M18.4,10.6C16.55,9 14.15,8 11.5,8C6.85,8 2.92,11.03 1.54,15.22L3.9,16C4.95,12.81 7.95,10.5 11.5,10.5C13.45,10.5 15.23,11.22 16.62,12.38L13,16H22V7L18.4,10.6Z"
     })));

package/dist/esm/Toolbar/components/ButtonUndo.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Icon } from '@contentful/f36-components';
+import tokens from '@contentful/f36-tokens';
 import { useContentfulEditor } from '../../ContentfulEditorProvider';
 import { ToolbarButton } from '../../plugins/shared/ToolbarButton';
 export const ButtonUndo = ()=>{
@@ -14,7 +15,7 @@ export const ButtonUndo = ()=>{
         isActive: false,
         isDisabled: editor.history.undos.length === 0
     }, /*#__PURE__*/ React.createElement(Icon, {
-        variant: "secondary"
+        color: tokens.gray900
     }, /*#__PURE__*/ React.createElement("path", {
         d: "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z"
     })));

package/dist/esm/Toolbar/components/EmbeddedEntityDropdownButton.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button, Menu } from '@contentful/f36-components';
-import { PlusIcon, ChevronDownIcon } from '@contentful/f36-icons';
+import { CaretDownIcon, PlusIcon } from '@contentful/f36-icons';
 export function EmbeddedEntityDropdownButton({ children, isDisabled, isOpen, onClose, onToggle }) {
     return /*#__PURE__*/ React.createElement(Menu, {
         placement: "bottom-end",
@@ -8,7 +8,7 @@ export function EmbeddedEntityDropdownButton({ children, isDisabled, isOpen, onC
         onClose: onClose,
         onOpen: onToggle
     }, /*#__PURE__*/ React.createElement(Menu.Trigger, null, /*#__PURE__*/ React.createElement(Button, {
-        endIcon: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),
+        endIcon: /*#__PURE__*/ React.createElement(CaretDownIcon, null),
         testId: "toolbar-entity-dropdown-toggle",
         variant: "secondary",
         size: "small",

package/dist/esm/Toolbar/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Flex, IconButton, Menu } from '@contentful/f36-components';
-import { MoreHorizontalIcon } from '@contentful/f36-icons';
+import { DotsThreeIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { BLOCKS, INLINES, MARKS } from '@contentful/rich-text-types';
 import { css } from 'emotion';
@@ -82,7 +82,7 @@ const Dropdown = ({ sdk, isDisabled })=>{
         size: "small",
         className: styles.toolbarBtn,
         variant: isActive ? 'secondary' : 'transparent',
-        icon: /*#__PURE__*/ React.createElement(MoreHorizontalIcon, null),
+        icon: /*#__PURE__*/ React.createElement(DotsThreeIcon, null),
         "aria-label": "toggle menu",
         isDisabled: isDisabled,
         testId: "dropdown-toolbar-button"

package/dist/esm/plugins/EmbeddedEntityInline/FetchingWrappedInlineEntryCard.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { InlineEntryCard, MenuItem, Text } from '@contentful/f36-components';
+import { InlineEntryCard, Menu, MenuItem, Text } from '@contentful/f36-components';
 import { ClockIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { ScheduledIconWithTooltip, useEntity, useEntityLoader } from '@contentful/field-editor-reference';
@@ -51,14 +51,16 @@ function InternalFetchingWrappedInlineEntryCard({ entry, allContentTypes, locale
                 disabled: isDisabled,
                 testId: "delete"
             }, "Remove")
-        ]
+        ].map((item, i)=>/*#__PURE__*/ React.createElement(Menu, {
+                key: i
+            }, item))
     }, /*#__PURE__*/ React.createElement(ScheduledIconWithTooltip, {
         getEntityScheduledActions: getEntityScheduledActions,
         entityType: "Entry",
         entityId: entry.sys.id
     }, /*#__PURE__*/ React.createElement(ClockIcon, {
         className: styles.scheduledIcon,
-        variant: "muted",
+        color: tokens.gray600,
         testId: "scheduled-icon"
     })), /*#__PURE__*/ React.createElement(Text, null, title));
 }
@@ -99,7 +101,9 @@ export function FetchingWrappedInlineEntryCard(props) {
                     onClick: props.onRemove,
                     testId: "delete"
                 }, "Remove")
-            ]
+            ].map((item, i)=>/*#__PURE__*/ React.createElement(Menu, {
+                    key: i
+                }, item))
         });
     }
     return /*#__PURE__*/ React.createElement(InternalFetchingWrappedInlineEntryCard, {

package/dist/esm/plugins/EmbeddedResourceInline/FetchingWrappedResourceInlineCard.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { InlineEntryCard, MenuItem, Text } from '@contentful/f36-components';
+import { InlineEntryCard, Menu, MenuItem, Text } from '@contentful/f36-components';
 import { useResource } from '@contentful/field-editor-reference';
 import { entityHelpers } from '@contentful/field-editor-shared';
 import { INLINES } from '@contentful/rich-text-types';
@@ -52,6 +52,8 @@ export function FetchingWrappedResourceInlineCard(props) {
                 disabled: props.isDisabled,
                 testId: "delete"
             }, "Remove")
-        ]
+        ].map((item, i)=>/*#__PURE__*/ React.createElement(Menu, {
+                key: i
+            }, item))
     }, /*#__PURE__*/ React.createElement(Text, null, title));
 }

package/dist/esm/plugins/Heading/components/ToolbarHeadingButton.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Menu, Button } from '@contentful/f36-components';
-import { ChevronDownIcon } from '@contentful/f36-icons';
+import { CaretDownIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { BLOCKS } from '@contentful/rich-text-types';
 import { css, cx } from 'emotion';
@@ -117,7 +117,7 @@ export function ToolbarHeadingButton(props) {
         size: "small",
         testId: "toolbar-heading-toggle",
         variant: "transparent",
-        endIcon: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),
+        endIcon: /*#__PURE__*/ React.createElement(CaretDownIcon, null),
         isDisabled: props.isDisabled,
         onClick: ()=>someHeadingsEnabled && setOpen(!isOpen),
         className: styles.button

package/dist/esm/plugins/Hr/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HorizontalRuleIcon } from '@contentful/f36-icons';
+import { MinusIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { BLOCKS } from '@contentful/rich-text-types';
 import { css, cx } from 'emotion';
@@ -82,7 +82,7 @@ export function ToolbarHrButton(props) {
         onClick: handleOnClick,
         testId: "hr-toolbar-button",
         isActive: isBlockSelected(editor, BLOCKS.HR)
-    }, /*#__PURE__*/ React.createElement(HorizontalRuleIcon, null));
+    }, /*#__PURE__*/ React.createElement(MinusIcon, null));
 }
 export function Hr(props) {
     const isSelected = Slate.useSelected();

package/dist/esm/plugins/Hyperlink/components/LinkPopover.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Popover, IconButton, Tooltip, Flex } from '@contentful/f36-components';
-import { EditIcon, CopyIcon } from '@contentful/f36-icons';
+import { CopySimpleIcon, PencilSimpleIcon } from '@contentful/f36-icons';
 import { styles } from './styles';
 export const LinkPopover = ({ isLinkFocused, popoverText, handleEditLink, handleRemoveLink, children, handleCopyLink, isEditorFocused })=>{
     const popoverContent = React.useRef(null);
@@ -43,7 +43,7 @@ export const LinkPopover = ({ isLinkFocused, popoverText, handleEditLink, handle
         size: "small",
         variant: "transparent",
         "aria-label": "Copy link",
-        icon: /*#__PURE__*/ React.createElement(CopyIcon, {
+        icon: /*#__PURE__*/ React.createElement(CopySimpleIcon, {
             size: "tiny"
         })
     })), /*#__PURE__*/ React.createElement(Tooltip, {
@@ -56,7 +56,7 @@ export const LinkPopover = ({ isLinkFocused, popoverText, handleEditLink, handle
         size: "small",
         variant: "transparent",
         "aria-label": "Edit link",
-        icon: /*#__PURE__*/ React.createElement(EditIcon, {
+        icon: /*#__PURE__*/ React.createElement(PencilSimpleIcon, {
             size: "tiny"
         })
     })), /*#__PURE__*/ React.createElement(Tooltip, {

package/dist/esm/plugins/Hyperlink/components/ToolbarHyperlinkButton.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LinkIcon } from '@contentful/f36-icons';
+import { LinkSimpleIcon } from '@contentful/f36-icons';
 import { useContentfulEditor } from '../../../ContentfulEditorProvider';
 import { isLinkActive, unwrapLink } from '../../../helpers/editor';
 import { useSdkContext } from '../../../SdkProvider';
@@ -25,5 +25,5 @@ export function ToolbarHyperlinkButton(props) {
         onClick: handleClick,
         isActive: isActive,
         isDisabled: props.isDisabled
-    }, /*#__PURE__*/ React.createElement(LinkIcon, null));
+    }, /*#__PURE__*/ React.createElement(LinkSimpleIcon, null));
 }

package/dist/esm/plugins/List/components/ToolbarListButton.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ListBulletedIcon, ListNumberedIcon } from '@contentful/f36-icons';
+import { ListBulletsIcon, ListNumbersIcon } from '@contentful/f36-icons';
 import { BLOCKS } from '@contentful/rich-text-types';
 import { useContentfulEditor } from '../../../ContentfulEditorProvider';
 import { focus } from '../../../helpers/editor';
@@ -27,11 +27,11 @@ export function ToolbarListButton(props) {
         onClick: handleClick(BLOCKS.UL_LIST),
         isActive: isListTypeActive(editor, BLOCKS.UL_LIST),
         isDisabled: props.isDisabled
-    }, /*#__PURE__*/ React.createElement(ListBulletedIcon, null)), isNodeTypeEnabled(sdk.field, BLOCKS.OL_LIST) && /*#__PURE__*/ React.createElement(ToolbarButton, {
+    }, /*#__PURE__*/ React.createElement(ListBulletsIcon, null)), isNodeTypeEnabled(sdk.field, BLOCKS.OL_LIST) && /*#__PURE__*/ React.createElement(ToolbarButton, {
         title: "OL",
         testId: "ol-toolbar-button",
         onClick: handleClick(BLOCKS.OL_LIST),
         isActive: isListTypeActive(editor, BLOCKS.OL_LIST),
         isDisabled: props.isDisabled
-    }, /*#__PURE__*/ React.createElement(ListNumberedIcon, null)));
+    }, /*#__PURE__*/ React.createElement(ListNumbersIcon, null)));
 }

package/dist/esm/plugins/Marks/Bold.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormatBoldIcon } from '@contentful/f36-icons';
+import { TextBIcon } from '@contentful/f36-icons';
 import { MARKS } from '@contentful/rich-text-types';
 import { createBoldPlugin as createDefaultBoldPlugin } from '@udecode/plate-basic-marks';
 import { css } from 'emotion';
@@ -9,7 +9,7 @@ import { buildMarkEventHandler } from './helpers';
 export const ToolbarBoldButton = createMarkToolbarButton({
     title: 'Bold',
     mark: MARKS.BOLD,
-    icon: /*#__PURE__*/ React.createElement(FormatBoldIcon, null)
+    icon: /*#__PURE__*/ React.createElement(TextBIcon, null)
 });
 const styles = {
     bold: css({

package/dist/esm/plugins/Marks/Code.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CodeIcon } from '@contentful/f36-icons';
+import { CodeSimpleIcon } from '@contentful/f36-icons';
 import { MARKS } from '@contentful/rich-text-types';
 import { createCodePlugin as createDefaultCodePlugin } from '@udecode/plate-basic-marks';
 import { css } from 'emotion';
@@ -8,7 +8,7 @@ import { buildMarkEventHandler } from './helpers';
 export const ToolbarCodeButton = createMarkToolbarButton({
     title: 'Code',
     mark: MARKS.CODE,
-    icon: /*#__PURE__*/ React.createElement(CodeIcon, null)
+    icon: /*#__PURE__*/ React.createElement(CodeSimpleIcon, null)
 });
 export const ToolbarDropdownCodeButton = createMarkToolbarButton({
     title: 'Code',

package/dist/esm/plugins/Marks/Italic.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormatItalicIcon } from '@contentful/f36-icons';
+import { TextItalicIcon } from '@contentful/f36-icons';
 import { MARKS } from '@contentful/rich-text-types';
 import { createItalicPlugin as createDefaultItalicPlugin } from '@udecode/plate-basic-marks';
 import { css } from 'emotion';
@@ -9,7 +9,7 @@ import { buildMarkEventHandler } from './helpers';
 export const ToolbarItalicButton = createMarkToolbarButton({
     title: 'Italic',
     mark: MARKS.ITALIC,
-    icon: /*#__PURE__*/ React.createElement(FormatItalicIcon, null)
+    icon: /*#__PURE__*/ React.createElement(TextItalicIcon, null)
 });
 const styles = {
     italic: css({

package/dist/esm/plugins/Marks/Subscript.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SubscriptIcon } from '@contentful/f36-icons';
+import { TextSubscriptIcon } from '@contentful/f36-icons';
 import { MARKS } from '@contentful/rich-text-types';
 import { createSubscriptPlugin as createDefaultSubscriptPlugin } from '@udecode/plate-basic-marks';
 import { css } from 'emotion';
@@ -14,7 +14,7 @@ const styles = {
 export const ToolbarSubscriptButton = createMarkToolbarButton({
     title: 'Subscript',
     mark: MARKS.SUBSCRIPT,
-    icon: /*#__PURE__*/ React.createElement(SubscriptIcon, {
+    icon: /*#__PURE__*/ React.createElement(TextSubscriptIcon, {
         viewBox: "0 0 23 18"
     })
 });

package/dist/esm/plugins/Marks/Superscript.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SuperscriptIcon } from '@contentful/f36-icons';
+import { TextSuperscriptIcon } from '@contentful/f36-icons';
 import { MARKS } from '@contentful/rich-text-types';
 import { createSuperscriptPlugin as createDefaultSuperscriptPlugin } from '@udecode/plate-basic-marks';
 import { css } from 'emotion';
@@ -14,7 +14,7 @@ const styles = {
 export const ToolbarSuperscriptButton = createMarkToolbarButton({
     title: 'Superscript',
     mark: MARKS.SUPERSCRIPT,
-    icon: /*#__PURE__*/ React.createElement(SuperscriptIcon, null)
+    icon: /*#__PURE__*/ React.createElement(TextSuperscriptIcon, null)
 });
 export const ToolbarDropdownSuperscriptButton = createMarkToolbarButton({
     title: 'Superscript',

package/dist/esm/plugins/Marks/Underline.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormatUnderlinedIcon } from '@contentful/f36-icons';
+import { TextUnderlineIcon } from '@contentful/f36-icons';
 import { MARKS } from '@contentful/rich-text-types';
 import { createUnderlinePlugin as createDefaultUnderlinePlugin } from '@udecode/plate-basic-marks';
 import { someHtmlElement } from '../../internal/queries';
@@ -8,7 +8,7 @@ import { buildMarkEventHandler } from './helpers';
 export const ToolbarUnderlineButton = createMarkToolbarButton({
     title: 'Underline',
     mark: MARKS.UNDERLINE,
-    icon: /*#__PURE__*/ React.createElement(FormatUnderlinedIcon, null)
+    icon: /*#__PURE__*/ React.createElement(TextUnderlineIcon, null)
 });
 export function Underline(props) {
     return /*#__PURE__*/ React.createElement("u", props.attributes, props.children);

package/dist/esm/plugins/Marks/components/MarkToolbarButton.js

@@ -29,14 +29,14 @@ export const createMarkToolbarButton = ({ mark, title, icon })=>{
         ]);
         if (!editor) return null;
         if (!icon) {
-            return /*#__PURE__*/ React.createElement(Menu.Item, {
+            return /*#__PURE__*/ React.createElement(Menu, null, /*#__PURE__*/ React.createElement(Menu.Item, {
                 onClick: handleClick,
                 disabled: isDisabled,
                 className: cx({
                     [styles.isActive]: isMarkActive(editor, mark)
                 }),
                 testId: `${mark}-toolbar-button`
-            }, title);
+            }, title));
         }
         return /*#__PURE__*/ React.createElement(ToolbarButton, {
             title: title,

package/dist/esm/plugins/Quote/components/ToolbarQuoteButton.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { QuoteIcon } from '@contentful/f36-icons';
+import { QuotesIcon } from '@contentful/f36-icons';
 import { BLOCKS } from '@contentful/rich-text-types';
 import { useContentfulEditor } from '../../../ContentfulEditorProvider';
 import { isBlockSelected, focus } from '../../../helpers/editor';
@@ -19,5 +19,5 @@ export function ToolbarQuoteButton(props) {
         testId: "quote-toolbar-button",
         isDisabled: props.isDisabled,
         isActive: isBlockSelected(editor, BLOCKS.QUOTE)
-    }, /*#__PURE__*/ React.createElement(QuoteIcon, null));
+    }, /*#__PURE__*/ React.createElement(QuotesIcon, null));
 }

package/dist/esm/plugins/Table/components/TableActions.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IconButton, Menu } from '@contentful/f36-components';
-import { ChevronDownIcon } from '@contentful/f36-icons';
+import { CaretDownIcon } from '@contentful/f36-icons';
 import { BLOCKS } from '@contentful/rich-text-types';
 import { deleteColumn, deleteRow, deleteTable } from '@udecode/plate-table';
 import { css } from 'emotion';
@@ -94,7 +94,7 @@ export const TableActions = ()=>{
         variant: "transparent",
         tabIndex: -1,
         className: styles.topRight,
-        icon: /*#__PURE__*/ React.createElement(ChevronDownIcon, null),
+        icon: /*#__PURE__*/ React.createElement(CaretDownIcon, null),
         "aria-label": "Open table menu",
         testId: "cf-table-actions-button"
     })), /*#__PURE__*/ React.createElement(Menu.List, null, /*#__PURE__*/ React.createElement(Menu.Item, {

package/dist/esm/plugins/shared/EmbeddedBlockToolbarIcon.js

@@ -1,6 +1,8 @@
 import * as React from 'react';
-import { Flex, Icon, Menu } from '@contentful/f36-components';
-import { AssetIcon, EmbeddedEntryBlockIcon } from '@contentful/f36-icons';
+import { Flex, Menu } from '@contentful/f36-components';
+import { Icon } from '@contentful/f36-components';
+import { ImageSquareIcon, EmbeddedBlockIcon } from '@contentful/f36-icons';
+import tokens from '@contentful/f36-tokens';
 import { BLOCKS } from '@contentful/rich-text-types';
 import { css } from 'emotion';
 import { useContentfulEditor } from '../../ContentfulEditorProvider';
@@ -29,7 +31,7 @@ export function EmbeddedBlockToolbarIcon({ isDisabled, nodeType, onClose }) {
     };
     const type = getEntityTypeFromNodeType(nodeType);
     const baseClass = `rich-text__${nodeType}`;
-    return /*#__PURE__*/ React.createElement(Menu.Item, {
+    return /*#__PURE__*/ React.createElement(Menu, null, /*#__PURE__*/ React.createElement(Menu.Item, {
         disabled: isDisabled,
         className: `${baseClass}-list-item`,
         onClick: handleClick,
@@ -38,10 +40,10 @@ export function EmbeddedBlockToolbarIcon({ isDisabled, nodeType, onClose }) {
         alignItems: "center",
         flexDirection: "row"
     }, /*#__PURE__*/ React.createElement(Icon, {
-        as: type === 'Asset' ? AssetIcon : EmbeddedEntryBlockIcon,
+        as: type === 'Asset' ? ImageSquareIcon : EmbeddedBlockIcon,
         className: `rich-text__embedded-entry-list-icon ${styles.icon}`,
-        variant: "secondary"
-    }), /*#__PURE__*/ React.createElement("span", null, type, nodeType == BLOCKS.EMBEDDED_RESOURCE && /*#__PURE__*/ React.createElement(ResourceNewBadge, null))));
+        color: tokens.gray900
+    }), /*#__PURE__*/ React.createElement("span", null, type, nodeType == BLOCKS.EMBEDDED_RESOURCE && /*#__PURE__*/ React.createElement(ResourceNewBadge, null)))));
 }
 function getEntityTypeFromNodeType(nodeType) {
     const words = nodeType.toLowerCase().split('-');

package/dist/esm/plugins/shared/EmbeddedInlineToolbarIcon.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Menu, Flex } from '@contentful/f36-components';
-import { EmbeddedEntryInlineIcon } from '@contentful/f36-icons';
+import { EmbeddedLineIcon } from '@contentful/f36-icons';
 import tokens from '@contentful/f36-tokens';
 import { INLINES } from '@contentful/rich-text-types';
 import { css } from 'emotion';
@@ -36,7 +36,7 @@ export function EmbeddedInlineToolbarIcon({ onClose, nodeType, isDisabled }) {
         }
         moveToTheNextChar(editor);
     }
-    return /*#__PURE__*/ React.createElement(Menu.Item, {
+    return /*#__PURE__*/ React.createElement(Menu, null, /*#__PURE__*/ React.createElement(Menu.Item, {
         disabled: isDisabled,
         className: "rich-text__entry-link-block-button",
         testId: `toolbar-toggle-${nodeType}`,
@@ -44,8 +44,8 @@ export function EmbeddedInlineToolbarIcon({ onClose, nodeType, isDisabled }) {
     }, /*#__PURE__*/ React.createElement(Flex, {
         alignItems: "center",
         flexDirection: "row"
-    }, /*#__PURE__*/ React.createElement(EmbeddedEntryInlineIcon, {
-        variant: "secondary",
+    }, /*#__PURE__*/ React.createElement(EmbeddedLineIcon, {
+        color: tokens.gray900,
         className: `rich-text__embedded-entry-list-icon ${styles.icon}`
-    }), /*#__PURE__*/ React.createElement("span", null, "Inline entry", nodeType == INLINES.EMBEDDED_RESOURCE && /*#__PURE__*/ React.createElement(ResourceNewBadge, null))));
+    }), /*#__PURE__*/ React.createElement("span", null, "Inline entry", nodeType == INLINES.EMBEDDED_RESOURCE && /*#__PURE__*/ React.createElement(ResourceNewBadge, null)))));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentful/field-editor-rich-text",
-  "version": "4.11.2",
+  "version": "4.11.3",
   "source": "./src/index.tsx",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -41,12 +41,12 @@
   "dependencies": {
     "@contentful/app-sdk": "^4.29.0",
     "@contentful/contentful-slatejs-adapter": "^15.16.5",
-    "@contentful/f36-components": "^4.70.0",
-    "@contentful/f36-icons": "^4.29.0",
-    "@contentful/f36-tokens": "^4.0.5",
+    "@contentful/f36-components": "5.1.1",
+    "@contentful/f36-icons": "5.1.1",
+    "@contentful/f36-tokens": "5.1.0",
     "@contentful/f36-utils": "^4.24.3",
-    "@contentful/field-editor-reference": "^6.10.7",
-    "@contentful/field-editor-shared": "^2.11.1",
+    "@contentful/field-editor-reference": "^6.10.8",
+    "@contentful/field-editor-shared": "^2.11.2",
     "@contentful/rich-text-plain-text-renderer": "^17.0.0",
     "@contentful/rich-text-types": "^17.0.0",
     "@popperjs/core": "^2.11.5",
@@ -78,7 +78,7 @@
     "react-dom": ">=16.14.0"
   },
   "devDependencies": {
-    "@contentful/field-editor-test-utils": "^1.6.0",
+    "@contentful/field-editor-test-utils": "^1.6.1",
     "@contentful/rich-text-react-renderer": "^16.0.0",
     "@lingui/core": "5.3.0",
     "@types/is-hotkey": "^0.1.6",
@@ -89,5 +89,5 @@
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"
   },
-  "gitHead": "f1cb85110b2358bffa0aba4596a6d5c637e8a04e"
+  "gitHead": "8ab6bd7a3ce2979634ab53673c6b122a6b1b5efb"
 }