@comet/cms-admin 9.0.0-beta.3 → 9.0.0-beta.4

package/lib/blocks/tipTap/TipTapToolbar.js

@@ -0,0 +1,611 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { greyPalette, Tooltip } from "@comet/admin";
+import { MoreHorizontal, RteBold, RteClearLink, RteIndentDecrease, RteIndentIncrease, RteItalic, RteLink, RteNonBreakingSpace, RteOl, RteRedo, RteSoftHyphen, RteStrikethrough, RteSub, RteSup, RteUl, RteUndo } from "@comet/admin-icons";
+import { Box, FormControl, inputBaseClasses, ListItemIcon, Menu, MenuItem, Select, selectClasses } from "@mui/material";
+import { grey as muiGreyPalette } from "@mui/material/colors";
+import { useEditorState } from "@tiptap/react";
+import { useState } from "react";
+import { FormattedMessage } from "react-intl";
+import { TipTapLinkDialog } from "./TipTapLinkDialog";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var toolbarButtonSx = {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  height: 24,
+  width: 24,
+  padding: 0,
+  backgroundColor: "transparent",
+  border: "1px solid transparent",
+  boxSizing: "border-box",
+  transition: "background-color 200ms, border-color 200ms, color 200ms",
+  color: muiGreyPalette[600],
+  "&:hover": {
+    backgroundColor: muiGreyPalette[200],
+    borderColor: muiGreyPalette[400]
+  },
+  "&:disabled": {
+    color: muiGreyPalette[300],
+    "&, &:hover": {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
+    }
+  }
+};
+var toolbarButtonSelectedSx = {
+  "&:not(:disabled), &:not(:disabled):hover": {
+    borderColor: muiGreyPalette[400],
+    backgroundColor: "white"
+  }
+};
+var ToolbarButton = function ToolbarButton(_ref) {
+  var editor = _ref.editor,
+    Icon = _ref.icon,
+    tooltip = _ref.tooltip,
+    isActive = _ref.isActive,
+    disabled = _ref.disabled,
+    onToggle = _ref.onToggle;
+  return /*#__PURE__*/_jsx(Tooltip, {
+    title: tooltip,
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "button",
+      type: "button",
+      disabled: disabled,
+      onMouseDown: function onMouseDown(e) {
+        e.preventDefault();
+        onToggle();
+      },
+      sx: _objectSpread(_objectSpread({}, toolbarButtonSx), isActive && editor.isActive(isActive) ? toolbarButtonSelectedSx : {}),
+      children: /*#__PURE__*/_jsx(Icon, {
+        sx: {
+          fontSize: 15
+        },
+        color: "inherit"
+      })
+    })
+  });
+};
+var toolbarSlotSx = {
+  display: "flex",
+  alignItems: "center",
+  flexShrink: 0,
+  flexGrow: 0,
+  height: 34,
+  boxSizing: "border-box",
+  py: "5px",
+  pr: "6px",
+  mr: "5px",
+  borderRight: "1px solid ".concat(greyPalette[100]),
+  "&:last-child": {
+    mr: 0,
+    pr: 0,
+    borderRight: "none"
+  }
+};
+var ToolbarGroup = function ToolbarGroup(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_jsx(Box, {
+    sx: toolbarSlotSx,
+    children: children
+  });
+};
+var selectFormControlSx = _defineProperty(_defineProperty({}, "& .".concat(inputBaseClasses.root), {
+  backgroundColor: "transparent",
+  height: "auto",
+  border: "none",
+  "&, &:hover": {
+    "&:before, &:after": {
+      borderBottomWidth: 0
+    }
+  }
+}), "& .".concat(selectClasses.icon), {
+  top: "auto",
+  color: "inherit"
+});
+var selectSx = _defineProperty({}, "& .".concat(selectClasses.select, ".").concat(inputBaseClasses.input), {
+  minHeight: 0,
+  color: muiGreyPalette[600],
+  minWidth: 180,
+  lineHeight: "24px",
+  fontSize: 14,
+  p: 0
+});
+export var TipTapToolbar = function TipTapToolbar(_ref3) {
+  var editor = _ref3.editor,
+    supports = _ref3.supports,
+    blockStyles = _ref3.blockStyles,
+    inlineStyles = _ref3.inlineStyles,
+    linkBlock = _ref3.linkBlock,
+    listLevelMax = _ref3.listLevelMax;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    moreAnchorEl = _useState2[0],
+    setMoreAnchorEl = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    linkDialogOpen = _useState4[0],
+    setLinkDialogOpen = _useState4[1];
+  var hasInlineFormatButtons = ["bold", "italic", "strike"].some(function (s) {
+    return supports.includes(s);
+  });
+  var moreOptions = ["sub", "sup"].some(function (s) {
+    return supports.includes(s);
+  });
+  var lists = ["ordered-list", "unordered-list"].some(function (s) {
+    return supports.includes(s);
+  });
+  var specialChars = ["non-breaking-space", "soft-hyphen"].some(function (s) {
+    return supports.includes(s);
+  });
+  var hasLink = supports.includes("link") && !!linkBlock;
+  var hasInlineStyles = inlineStyles.length > 0;
+  var editorState = useEditorState({
+    editor: editor,
+    selector: function selector(_ref4) {
+      var _ref6;
+      var e = _ref4.editor;
+      var activeBlockType = function () {
+        for (var level = 1; level <= 6; level++) {
+          if (e.isActive("heading", {
+            level: level
+          })) {
+            return String(level);
+          }
+        }
+        return "paragraph";
+      }();
+      var activeTipTapBlockType = function () {
+        if (e.isActive("orderedList")) {
+          return "ordered-list";
+        }
+        if (e.isActive("bulletList")) {
+          return "unordered-list";
+        }
+        for (var level = 1; level <= 6; level++) {
+          if (e.isActive("heading", {
+            level: level
+          })) {
+            return "heading-".concat(level);
+          }
+        }
+        return "paragraph";
+      }();
+      var attrs = e.isActive("heading") ? e.getAttributes("heading") : e.getAttributes("paragraph");
+      var activeInlineStyle = function (_ref5) {
+        if (!hasInlineStyles) {
+          return "";
+        }
+        var inlineStyleAttrs = e.getAttributes("inlineStyle");
+        return (_ref5 = inlineStyleAttrs.type) !== null && _ref5 !== void 0 ? _ref5 : "";
+      }();
+
+      // Calculate current list nesting depth for listLevelMax enforcement
+      var canIndent = e.can().sinkListItem("listItem");
+      if (canIndent && listLevelMax !== undefined) {
+        var $from = e.state.selection.$from;
+        var listDepth = 0;
+        for (var d = 0; d <= $from.depth; d++) {
+          var node = $from.node(d);
+          if (node.type.name === "bulletList" || node.type.name === "orderedList") {
+            listDepth++;
+          }
+        }
+        if (listDepth >= listLevelMax) {
+          canIndent = false;
+        }
+      }
+      return {
+        activeBlockType: activeBlockType,
+        activeTipTapBlockType: activeTipTapBlockType,
+        activeBlockStyle: (_ref6 = attrs.blockStyle) !== null && _ref6 !== void 0 ? _ref6 : "",
+        activeInlineStyle: activeInlineStyle,
+        canUndo: e.can().undo(),
+        canRedo: e.can().redo(),
+        canIndent: canIndent,
+        canDedent: e.can().liftListItem("listItem"),
+        isBoldActive: e.isActive("bold"),
+        isItalicActive: e.isActive("italic"),
+        isStrikeActive: e.isActive("strike"),
+        isSuperscriptActive: e.isActive("superscript"),
+        isSubscriptActive: e.isActive("subscript"),
+        isOrderedListActive: e.isActive("orderedList"),
+        isBulletListActive: e.isActive("bulletList"),
+        isLinkActive: e.isActive("link"),
+        selectionEmpty: e.state.selection.empty
+      };
+    }
+  });
+  var handleMoreClose = function handleMoreClose() {
+    setMoreAnchorEl(null);
+    setTimeout(function () {
+      return editor.commands.focus();
+    }, 0);
+  };
+  var applicableBlockStyles = blockStyles.filter(function (style) {
+    return !style.appliesTo || style.appliesTo.includes(editorState.activeTipTapBlockType);
+  });
+  var applicableInlineStyles = inlineStyles.filter(function (style) {
+    return !style.appliesTo || style.appliesTo.includes(editorState.activeTipTapBlockType);
+  });
+  var handleBlockTypeChange = function handleBlockTypeChange(e) {
+    var value = e.target.value;
+    if (value === "paragraph") {
+      editor.chain().focus().setParagraph().run();
+    } else {
+      editor.chain().focus().setHeading({
+        level: Number(value)
+      }).run();
+    }
+
+    // Clear blockStyle if it's not applicable to the new block type
+    if (blockStyles.length > 0) {
+      var activeBlockStyle = editorState.activeBlockStyle;
+      if (activeBlockStyle) {
+        var newType = value === "paragraph" ? "paragraph" : "heading-".concat(value);
+        var styleConfig = blockStyles.find(function (s) {
+          return s.name === activeBlockStyle;
+        });
+        if (styleConfig !== null && styleConfig !== void 0 && styleConfig.appliesTo && !styleConfig.appliesTo.includes(newType)) {
+          var nodeType = value === "paragraph" ? "paragraph" : "heading";
+          editor.chain().updateAttributes(nodeType, {
+            blockStyle: null
+          }).run();
+        }
+      }
+    }
+  };
+  var handleBlockStyleChange = function handleBlockStyleChange(e) {
+    var value = e.target.value || null;
+    var nodeType = editor.isActive("heading") ? "heading" : "paragraph";
+    editor.chain().focus().updateAttributes(nodeType, {
+      blockStyle: value
+    }).run();
+  };
+  var handleInlineStyleChange = function handleInlineStyleChange(e) {
+    var value = e.target.value;
+    if (value) {
+      editor.chain().focus().setInlineStyle({
+        type: value
+      }).run();
+    } else {
+      editor.chain().focus().unsetInlineStyle().run();
+    }
+  };
+  return /*#__PURE__*/_jsxs(Box, {
+    sx: {
+      display: "flex",
+      flexWrap: "wrap",
+      borderTop: "1px solid ".concat(greyPalette[100]),
+      backgroundColor: muiGreyPalette[100],
+      px: "6px"
+    },
+    children: [supports.includes("history") && /*#__PURE__*/_jsxs(ToolbarGroup, {
+      children: [/*#__PURE__*/_jsx(ToolbarButton, {
+        editor: editor,
+        icon: RteUndo,
+        tooltip: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "comet.blocks.tipTapRichText.undo.tooltip",
+          defaultMessage: "Undo"
+        }),
+        disabled: !editorState.canUndo,
+        onToggle: function onToggle() {
+          return editor.chain().focus().undo().run();
+        }
+      }), /*#__PURE__*/_jsx(ToolbarButton, {
+        editor: editor,
+        icon: RteRedo,
+        tooltip: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "comet.blocks.tipTapRichText.redo.tooltip",
+          defaultMessage: "Redo"
+        }),
+        disabled: !editorState.canRedo,
+        onToggle: function onToggle() {
+          return editor.chain().focus().redo().run();
+        }
+      })]
+    }), supports.includes("heading") && /*#__PURE__*/_jsx(ToolbarGroup, {
+      children: /*#__PURE__*/_jsx(FormControl, {
+        sx: selectFormControlSx,
+        children: /*#__PURE__*/_jsxs(Select, {
+          value: editorState.activeBlockType,
+          onChange: handleBlockTypeChange,
+          displayEmpty: true,
+          variant: "filled",
+          MenuProps: {
+            elevation: 1
+          },
+          sx: selectSx,
+          children: [/*#__PURE__*/_jsx(MenuItem, {
+            value: "paragraph",
+            dense: true,
+            children: /*#__PURE__*/_jsx(FormattedMessage, {
+              id: "comet.blocks.tipTapRichText.blockType.default",
+              defaultMessage: "Default"
+            })
+          }), [1, 2, 3, 4, 5, 6].map(function (level) {
+            return /*#__PURE__*/_jsx(MenuItem, {
+              value: String(level),
+              dense: true,
+              children: /*#__PURE__*/_jsx(FormattedMessage, {
+                id: "comet.blocks.tipTapRichText.blockType.heading",
+                defaultMessage: "Heading {level}",
+                values: {
+                  level: level
+                }
+              })
+            }, level);
+          })]
+        })
+      })
+    }), applicableBlockStyles.length > 0 && /*#__PURE__*/_jsx(ToolbarGroup, {
+      children: /*#__PURE__*/_jsx(FormControl, {
+        sx: selectFormControlSx,
+        children: /*#__PURE__*/_jsxs(Select, {
+          value: editorState.activeBlockStyle,
+          onChange: handleBlockStyleChange,
+          displayEmpty: true,
+          variant: "filled",
+          MenuProps: {
+            elevation: 1
+          },
+          sx: selectSx,
+          children: [/*#__PURE__*/_jsx(MenuItem, {
+            value: "",
+            dense: true,
+            children: /*#__PURE__*/_jsx(FormattedMessage, {
+              id: "comet.blocks.tipTapRichText.blockStyle.default",
+              defaultMessage: "Default"
+            })
+          }), applicableBlockStyles.map(function (style) {
+            return /*#__PURE__*/_jsx(MenuItem, {
+              value: style.name,
+              dense: true,
+              children: style.label
+            }, style.name);
+          })]
+        })
+      })
+    }), applicableInlineStyles.length > 0 && /*#__PURE__*/_jsx(ToolbarGroup, {
+      children: /*#__PURE__*/_jsx(FormControl, {
+        sx: selectFormControlSx,
+        children: /*#__PURE__*/_jsxs(Select, {
+          value: editorState.activeInlineStyle,
+          onChange: handleInlineStyleChange,
+          displayEmpty: true,
+          variant: "filled",
+          MenuProps: {
+            elevation: 1
+          },
+          sx: selectSx,
+          disabled: editorState.selectionEmpty,
+          children: [/*#__PURE__*/_jsx(MenuItem, {
+            value: "",
+            dense: true,
+            children: /*#__PURE__*/_jsx(FormattedMessage, {
+              id: "comet.blocks.tipTapRichText.inlineStyle.default",
+              defaultMessage: "Default"
+            })
+          }), applicableInlineStyles.map(function (style) {
+            return /*#__PURE__*/_jsx(MenuItem, {
+              value: style.name,
+              dense: true,
+              children: style.label
+            }, style.name);
+          })]
+        })
+      })
+    }), (hasInlineFormatButtons || moreOptions) && /*#__PURE__*/_jsxs(ToolbarGroup, {
+      children: [supports.includes("bold") && /*#__PURE__*/_jsx(ToolbarButton, {
+        editor: editor,
+        icon: RteBold,
+        tooltip: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "comet.blocks.tipTapRichText.bold.tooltip",
+          defaultMessage: "Bold"
+        }),
+        isActive: "bold",
+        onToggle: function onToggle() {
+          return editor.chain().focus().toggleBold().run();
+        }
+      }), supports.includes("italic") && /*#__PURE__*/_jsx(ToolbarButton, {
+        editor: editor,
+        icon: RteItalic,
+        tooltip: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "comet.blocks.tipTapRichText.italic.tooltip",
+          defaultMessage: "Italic"
+        }),
+        isActive: "italic",
+        onToggle: function onToggle() {
+          return editor.chain().focus().toggleItalic().run();
+        }
+      }), supports.includes("strike") && /*#__PURE__*/_jsx(ToolbarButton, {
+        editor: editor,
+        icon: RteStrikethrough,
+        tooltip: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "comet.blocks.tipTapRichText.strike.tooltip",
+          defaultMessage: "Strikethrough"
+        }),
+        isActive: "strike",
+        onToggle: function onToggle() {
+          return editor.chain().focus().toggleStrike().run();
+        }
+      }), moreOptions && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Tooltip, {
+          title: /*#__PURE__*/_jsx(FormattedMessage, {
+            id: "comet.blocks.tipTapRichText.moreOptions.tooltip",
+            defaultMessage: "More options"
+          }),
+          children: /*#__PURE__*/_jsx(Box, {
+            component: "button",
+            type: "button",
+            onMouseDown: function onMouseDown(e) {
+              e.preventDefault();
+              setMoreAnchorEl(e.currentTarget);
+            },
+            sx: toolbarButtonSx,
+            children: /*#__PURE__*/_jsx(MoreHorizontal, {
+              sx: {
+                fontSize: 15
+              },
+              color: "inherit"
+            })
+          })
+        }), /*#__PURE__*/_jsxs(Menu, {
+          open: Boolean(moreAnchorEl),
+          anchorEl: moreAnchorEl,
+          onClose: handleMoreClose,
+          children: [supports.includes("sup") && /*#__PURE__*/_jsxs(MenuItem, {
+            selected: editor.isActive("superscript"),
+            onMouseDown: function onMouseDown(e) {
+              handleMoreClose();
+              e.persist();
+              setTimeout(function () {
+                return editor.chain().focus().toggleSuperscript().run();
+              }, 0);
+            },
+            children: [/*#__PURE__*/_jsx(FormattedMessage, {
+              id: "comet.blocks.tipTapRichText.superscript.label",
+              defaultMessage: "Superscript"
+            }), /*#__PURE__*/_jsx(ListItemIcon, {
+              sx: {
+                justifyContent: "flex-end"
+              },
+              children: /*#__PURE__*/_jsx(RteSup, {})
+            })]
+          }), supports.includes("sub") && /*#__PURE__*/_jsxs(MenuItem, {
+            selected: editor.isActive("subscript"),
+            onMouseDown: function onMouseDown(e) {
+              handleMoreClose();
+              e.persist();
+              setTimeout(function () {
+                return editor.chain().focus().toggleSubscript().run();
+              }, 0);
+            },
+            children: [/*#__PURE__*/_jsx(FormattedMessage, {
+              id: "comet.blocks.tipTapRichText.subscript.label",
+              defaultMessage: "Subscript"
+            }), /*#__PURE__*/_jsx(ListItemIcon, {
+              sx: {
+                justifyContent: "flex-end"
+              },
+              children: /*#__PURE__*/_jsx(RteSub, {})
+            })]
+          })]
+        })]
+      })]
+    }), lists && /*#__PURE__*/_jsxs(ToolbarGroup, {
+      children: [supports.includes("ordered-list") && /*#__PURE__*/_jsx(ToolbarButton, {
+        editor: editor,
+        icon: RteOl,
+        tooltip: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "comet.blocks.tipTapRichText.orderedList.tooltip",
+          defaultMessage: "Ordered list"
+        }),
+        isActive: "orderedList",
+        onToggle: function onToggle() {
+          return editor.chain().focus().toggleOrderedList().run();
+        }
+      }), supports.includes("unordered-list") && /*#__PURE__*/_jsx(ToolbarButton, {
+        editor: editor,
+        icon: RteUl,
+        tooltip: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "comet.blocks.tipTapRichText.bulletList.tooltip",
+          defaultMessage: "Bullet list"
+        }),
+        isActive: "bulletList",
+        onToggle: function onToggle() {
+          return editor.chain().focus().toggleBulletList().run();
+        }
+      }), /*#__PURE__*/_jsx(ToolbarButton, {
+        editor: editor,
+        icon: RteIndentIncrease,
+        tooltip: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "comet.blocks.tipTapRichText.indent.tooltip",
+          defaultMessage: "Increase indent"
+        }),
+        disabled: !editorState.canIndent,
+        onToggle: function onToggle() {
+          return editor.chain().focus().sinkListItem("listItem").run();
+        }
+      }), /*#__PURE__*/_jsx(ToolbarButton, {
+        editor: editor,
+        icon: RteIndentDecrease,
+        tooltip: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "comet.blocks.tipTapRichText.dedent.tooltip",
+          defaultMessage: "Decrease indent"
+        }),
+        disabled: !editorState.canDedent,
+        onToggle: function onToggle() {
+          return editor.chain().focus().liftListItem("listItem").run();
+        }
+      })]
+    }), specialChars && /*#__PURE__*/_jsxs(ToolbarGroup, {
+      children: [supports.includes("non-breaking-space") && /*#__PURE__*/_jsx(ToolbarButton, {
+        editor: editor,
+        icon: RteNonBreakingSpace,
+        tooltip: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "comet.blocks.tipTapRichText.nonBreakingSpace.tooltip",
+          defaultMessage: "Insert a non-breaking space"
+        }),
+        onToggle: function onToggle() {
+          return editor.chain().focus().insertContent({
+            type: "nonBreakingSpace"
+          }).run();
+        }
+      }), supports.includes("soft-hyphen") && /*#__PURE__*/_jsx(ToolbarButton, {
+        editor: editor,
+        icon: RteSoftHyphen,
+        tooltip: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "comet.blocks.tipTapRichText.softHyphen.tooltip",
+          defaultMessage: "Insert a soft hyphen"
+        }),
+        onToggle: function onToggle() {
+          return editor.chain().focus().insertContent({
+            type: "softHyphen"
+          }).run();
+        }
+      })]
+    }), hasLink && linkBlock && /*#__PURE__*/_jsxs(ToolbarGroup, {
+      children: [/*#__PURE__*/_jsx(ToolbarButton, {
+        editor: editor,
+        icon: RteLink,
+        tooltip: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "comet.blocks.tipTapRichText.link.tooltip",
+          defaultMessage: "Link"
+        }),
+        isActive: "link",
+        disabled: editorState.selectionEmpty && !editorState.isLinkActive,
+        onToggle: function onToggle() {
+          return setLinkDialogOpen(true);
+        }
+      }), /*#__PURE__*/_jsx(ToolbarButton, {
+        editor: editor,
+        icon: RteClearLink,
+        tooltip: /*#__PURE__*/_jsx(FormattedMessage, {
+          id: "comet.blocks.tipTapRichText.removeLink.tooltip",
+          defaultMessage: "Remove link"
+        }),
+        disabled: !editorState.isLinkActive,
+        onToggle: function onToggle() {
+          return editor.chain().focus().extendMarkRange("link").unsetCmsLink().run();
+        }
+      })]
+    }), linkDialogOpen && linkBlock && /*#__PURE__*/_jsx(TipTapLinkDialog, {
+      editor: editor,
+      linkBlock: linkBlock,
+      onClose: function onClose() {
+        return setLinkDialogOpen(false);
+      }
+    })]
+  });
+};