@bigbinary/neeto-editor 1.47.13 → 1.47.14

package/dist/cjs/Editor.cjs.js

@@ -5,7 +5,7 @@ var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
-var Menu$3 = require('./chunk-DnuP-Z6c.cjs.js');
+var Menu$3 = require('./chunk-26e51eTo.cjs.js');
 var classnames = require('classnames');
 var constants = require('./chunk-C2JDXWdK.cjs.js');
 var neetoCist = require('@bigbinary/neeto-cist');
@@ -65,6 +65,12 @@ var Video = require('@bigbinary/neeto-icons/Video');
 var Notes = require('@bigbinary/neeto-icons/Notes');
 var MediaVideo = require('@bigbinary/neeto-icons/MediaVideo');
 var Column = require('@bigbinary/neeto-icons/Column');
+var TextBold = require('@bigbinary/neeto-icons/TextBold');
+var TextItalic = require('@bigbinary/neeto-icons/TextItalic');
+var Underline$1 = require('@bigbinary/neeto-icons/Underline');
+var Link$2 = require('@bigbinary/neeto-icons/Link');
+var Attachment = require('@bigbinary/neeto-icons/Attachment');
+var MessageSquare = require('@bigbinary/neeto-icons/MessageSquare');
 var Tooltip = require('@bigbinary/neetoui/Tooltip');
 var DeleteRow = require('@bigbinary/neeto-icons/DeleteRow');
 var DeleteColumn = require('@bigbinary/neeto-icons/DeleteColumn');
@@ -78,16 +84,11 @@ var Form = require('@bigbinary/neetoui/formik/Form');
 var Input$1 = require('@bigbinary/neetoui/formik/Input');
 var Attachments = require('./chunk-DrD8BaMo.cjs.js');
 require('tippy.js/dist/svg-arrow.css');
-require('@bigbinary/neeto-icons/Link');
 require('@bigbinary/neeto-commons-frontend/utils');
 require('@bigbinary/neeto-icons/Check');
 require('@bigbinary/neeto-icons/Quote');
-require('@bigbinary/neeto-icons/Attachment');
 require('@bigbinary/neeto-icons/Code');
-require('@bigbinary/neeto-icons/TextBold');
 require('@bigbinary/neeto-icons/TextCross');
-require('@bigbinary/neeto-icons/TextItalic');
-require('@bigbinary/neeto-icons/Underline');
 require('@bigbinary/neeto-icons/Undo');
 require('@bigbinary/neeto-icons/Redo');
 require('@bigbinary/neeto-icons/Email');
@@ -13948,8 +13949,7 @@ var Menu = /*#__PURE__*/function (_React$Component) {
         range = _this$props.range;
       var selectedItem = items[index];
       var hasCommand = selectedItem && selectedItem.command;
-      var isLeafNode = neetoCist.isNotPresent(selectedItem.items);
-      if (hasCommand && isLeafNode) selectedItem.command({
+      if (hasCommand) selectedItem.command({
         editor: editor,
         range: range
       });
@@ -14050,7 +14050,7 @@ var Menu = /*#__PURE__*/function (_React$Component) {
             item: item,
             key: item.optionName,
             selectItem: function selectItem() {
-              return isLeafNode && _this2.selectItem(index);
+              return _this2.selectItem(index);
             },
             selectedIndex: isCurrentMenuActive ? selectedIndex : -1,
             onHover: function onHover() {
@@ -14063,6 +14063,7 @@ var Menu = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/jsxRuntime.jsx(Tippy, {
             interactive: true,
             placement: "right",
+            theme: "light neeto-editor-slash-commands-tippy",
             visible: selectedIndex === index,
             content: /*#__PURE__*/jsxRuntime.jsx(Menu, _objectSpread$7(_objectSpread$7({}, _this2.props), {}, {
               items: item.items,
@@ -14163,14 +14164,44 @@ var MENU_ITEMS = [{
       range = _ref.range;
     editor.chain().focus().deleteRange(range).setNode("paragraph").run();
   }
+}, {
+  optionName: constants.EDITOR_OPTIONS.BOLD,
+  title: i18n.t("neetoEditor.menu.bold"),
+  description: i18n.t("neetoEditor.menu.boldDescription"),
+  Icon: TextBold,
+  command: function command(_ref2) {
+    var editor = _ref2.editor,
+      range = _ref2.range;
+    editor.chain().focus().deleteRange(range).toggleBold().run();
+  }
+}, {
+  optionName: constants.EDITOR_OPTIONS.ITALIC,
+  title: i18n.t("neetoEditor.menu.italic"),
+  description: i18n.t("neetoEditor.menu.italicDescription"),
+  Icon: TextItalic,
+  command: function command(_ref3) {
+    var editor = _ref3.editor,
+      range = _ref3.range;
+    editor.chain().focus().deleteRange(range).toggleItalic().run();
+  }
+}, {
+  optionName: constants.EDITOR_OPTIONS.UNDERLINE,
+  title: i18n.t("neetoEditor.menu.underline"),
+  description: i18n.t("neetoEditor.menu.underlineDescription"),
+  Icon: Underline$1,
+  command: function command(_ref4) {
+    var editor = _ref4.editor,
+      range = _ref4.range;
+    editor.chain().focus().deleteRange(range).toggleUnderline().run();
+  }
 }, {
   optionName: constants.EDITOR_OPTIONS.H1,
   title: i18n.t("neetoEditor.menu.heading1"),
   description: i18n.t("neetoEditor.menu.h1Description"),
   Icon: TextH1,
-  command: function command(_ref2) {
-    var editor = _ref2.editor,
-      range = _ref2.range;
+  command: function command(_ref5) {
+    var editor = _ref5.editor,
+      range = _ref5.range;
     editor.chain().focus().deleteRange(range).setNode("heading", {
       level: 1
     }).run();
@@ -14180,9 +14211,9 @@ var MENU_ITEMS = [{
   title: i18n.t("neetoEditor.menu.heading2"),
   description: i18n.t("neetoEditor.menu.h2Description"),
   Icon: TextH2,
-  command: function command(_ref3) {
-    var editor = _ref3.editor,
-      range = _ref3.range;
+  command: function command(_ref6) {
+    var editor = _ref6.editor,
+      range = _ref6.range;
     editor.chain().focus().deleteRange(range).setNode("heading", {
       level: 2
     }).run();
@@ -14192,9 +14223,9 @@ var MENU_ITEMS = [{
   title: i18n.t("neetoEditor.menu.heading3"),
   description: i18n.t("neetoEditor.menu.h3Description"),
   Icon: TextH3,
-  command: function command(_ref4) {
-    var editor = _ref4.editor,
-      range = _ref4.range;
+  command: function command(_ref7) {
+    var editor = _ref7.editor,
+      range = _ref7.range;
     editor.chain().focus().deleteRange(range).setNode("heading", {
       level: 3
     }).run();
@@ -14204,9 +14235,9 @@ var MENU_ITEMS = [{
   title: i18n.t("neetoEditor.menu.heading4"),
   description: i18n.t("neetoEditor.menu.h4Description"),
   Icon: TextH4,
-  command: function command(_ref5) {
-    var editor = _ref5.editor,
-      range = _ref5.range;
+  command: function command(_ref8) {
+    var editor = _ref8.editor,
+      range = _ref8.range;
     editor.chain().focus().deleteRange(range).setNode("heading", {
       level: 4
     }).run();
@@ -14216,9 +14247,9 @@ var MENU_ITEMS = [{
   title: i18n.t("neetoEditor.menu.heading5"),
   description: i18n.t("neetoEditor.menu.h5Description"),
   Icon: TextH5,
-  command: function command(_ref6) {
-    var editor = _ref6.editor,
-      range = _ref6.range;
+  command: function command(_ref9) {
+    var editor = _ref9.editor,
+      range = _ref9.range;
     editor.chain().focus().deleteRange(range).setNode("heading", {
       level: 5
     }).run();
@@ -14228,9 +14259,9 @@ var MENU_ITEMS = [{
   title: i18n.t("neetoEditor.menu.numberedList"),
   description: i18n.t("neetoEditor.menu.numberedListDescription"),
   Icon: ListNumber,
-  command: function command(_ref7) {
-    var editor = _ref7.editor,
-      range = _ref7.range;
+  command: function command(_ref10) {
+    var editor = _ref10.editor,
+      range = _ref10.range;
     editor.chain().focus().deleteRange(range).toggleOrderedList().run();
   }
 }, {
@@ -14238,19 +14269,31 @@ var MENU_ITEMS = [{
   title: i18n.t("neetoEditor.menu.bulletList"),
   description: i18n.t("neetoEditor.menu.bulletListDescription"),
   Icon: ListDot,
-  command: function command(_ref8) {
-    var editor = _ref8.editor,
-      range = _ref8.range;
+  command: function command(_ref11) {
+    var editor = _ref11.editor,
+      range = _ref11.range;
     editor.chain().focus().deleteRange(range).toggleBulletList().run();
   }
+}, {
+  optionName: constants.EDITOR_OPTIONS.LINK,
+  title: i18n.t("neetoEditor.menu.link"),
+  description: i18n.t("neetoEditor.menu.linkDescription"),
+  Icon: Link$2,
+  command: neetoCist.noop
+}, {
+  optionName: constants.EDITOR_OPTIONS.ATTACHMENTS,
+  title: i18n.t("neetoEditor.menu.file"),
+  description: i18n.t("neetoEditor.menu.attachmentsDescription"),
+  Icon: Attachment,
+  command: neetoCist.noop
 }, {
   optionName: constants.EDITOR_OPTIONS.TODO_LIST,
   title: i18n.t("neetoEditor.menu.todoList"),
   description: i18n.t("neetoEditor.menu.todoListDescription"),
   Icon: Checkbox,
-  command: function command(_ref9) {
-    var editor = _ref9.editor,
-      range = _ref9.range;
+  command: function command(_ref12) {
+    var editor = _ref12.editor,
+      range = _ref12.range;
     editor.chain().focus().deleteRange(range).toggleTaskList().run();
   }
 }, {
@@ -14270,9 +14313,9 @@ var MENU_ITEMS = [{
   title: i18n.t("neetoEditor.menu.blockQuote"),
   description: i18n.t("neetoEditor.menu.blockQuoteDescription"),
   Icon: Blockquote$1,
-  command: function command(_ref10) {
-    var editor = _ref10.editor,
-      range = _ref10.range;
+  command: function command(_ref13) {
+    var editor = _ref13.editor,
+      range = _ref13.range;
     editor.chain().focus().deleteRange(range).toggleBlockquote().run();
   }
 }, {
@@ -14280,9 +14323,9 @@ var MENU_ITEMS = [{
   title: i18n.t("neetoEditor.menu.codeBlock"),
   description: i18n.t("neetoEditor.menu.codeDescription"),
   Icon: CodeBlock$2,
-  command: function command(_ref11) {
-    var editor = _ref11.editor,
-      range = _ref11.range;
+  command: function command(_ref14) {
+    var editor = _ref14.editor,
+      range = _ref14.range;
     editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
   }
 }, {
@@ -14290,9 +14333,9 @@ var MENU_ITEMS = [{
   title: i18n.t("neetoEditor.menu.emoji"),
   description: i18n.t("neetoEditor.menu.emojiDescription"),
   Icon: Smiley,
-  command: function command(_ref12) {
-    var editor = _ref12.editor,
-      range = _ref12.range;
+  command: function command(_ref15) {
+    var editor = _ref15.editor,
+      range = _ref15.range;
     editor.chain().focus().deleteRange(range).insertContent("::").run();
   }
 }, {
@@ -14300,9 +14343,9 @@ var MENU_ITEMS = [{
   title: i18n.t("neetoEditor.menu.divider"),
   description: i18n.t("neetoEditor.menu.dividerDescription"),
   Icon: Minus,
-  command: function command(_ref13) {
-    var editor = _ref13.editor,
-      range = _ref13.range;
+  command: function command(_ref16) {
+    var editor = _ref16.editor,
+      range = _ref16.range;
     editor.chain().focus().deleteRange(range).setHorizontalRule().run();
   }
 }, {
@@ -14316,9 +14359,9 @@ var MENU_ITEMS = [{
   title: i18n.t("neetoEditor.menu.pasteUnformatted"),
   description: i18n.t("neetoEditor.menu.pasteUnformattedDescription"),
   Icon: Notes,
-  command: function command(_ref14) {
-    var editor = _ref14.editor,
-      range = _ref14.range;
+  command: function command(_ref17) {
+    var editor = _ref17.editor,
+      range = _ref17.range;
     return editor.chain().focus().deleteRange(range).pasteUnformatted().run();
   }
 }, {
@@ -14326,21 +14369,95 @@ var MENU_ITEMS = [{
   title: i18n.t("neetoEditor.menu.table"),
   description: i18n.t("neetoEditor.menu.tableDescription"),
   Icon: Column,
-  command: function command(_ref15) {
-    var editor = _ref15.editor,
-      range = _ref15.range;
+  command: function command(_ref18) {
+    var editor = _ref18.editor,
+      range = _ref18.range;
     return editor.chain().focus().deleteRange(range).insertTable({
       rows: 3,
       cols: 3,
       withHeaderRow: true
     }).run();
   }
+}, {
+  optionName: constants.EDITOR_OPTIONS.CALLOUT,
+  title: i18n.t("neetoEditor.menu.callout"),
+  description: i18n.t("neetoEditor.menu.calloutDescription"),
+  Icon: MessageSquare,
+  command: function command(_ref19) {
+    var editor = _ref19.editor,
+      range = _ref19.range;
+    editor.chain().focus().deleteRange(range).setCallout({
+      type: "default",
+      emoji: "💬"
+    }).run();
+  },
+  items: [{
+    optionName: "".concat(constants.EDITOR_OPTIONS.CALLOUT, "_default"),
+    title: i18n.t("neetoEditor.menu.calloutDefault"),
+    description: i18n.t("neetoEditor.menu.calloutDescription"),
+    command: function command(_ref20) {
+      var editor = _ref20.editor,
+        range = _ref20.range;
+      editor.chain().focus().deleteRange(range).setCallout({
+        type: "default",
+        emoji: "💬"
+      }).run();
+    }
+  }, {
+    optionName: "".concat(constants.EDITOR_OPTIONS.CALLOUT, "_info"),
+    title: i18n.t("neetoEditor.menu.calloutInfo"),
+    description: i18n.t("neetoEditor.menu.calloutDescription"),
+    command: function command(_ref21) {
+      var editor = _ref21.editor,
+        range = _ref21.range;
+      editor.chain().focus().deleteRange(range).setCallout({
+        type: "info",
+        emoji: "ℹ️"
+      }).run();
+    }
+  }, {
+    optionName: "".concat(constants.EDITOR_OPTIONS.CALLOUT, "_warning"),
+    title: i18n.t("neetoEditor.menu.calloutWarning"),
+    description: i18n.t("neetoEditor.menu.calloutDescription"),
+    command: function command(_ref22) {
+      var editor = _ref22.editor,
+        range = _ref22.range;
+      editor.chain().focus().deleteRange(range).setCallout({
+        type: "warning",
+        emoji: "⚠️"
+      }).run();
+    }
+  }, {
+    optionName: "".concat(constants.EDITOR_OPTIONS.CALLOUT, "_error"),
+    title: i18n.t("neetoEditor.menu.calloutError"),
+    description: i18n.t("neetoEditor.menu.calloutDescription"),
+    command: function command(_ref23) {
+      var editor = _ref23.editor,
+        range = _ref23.range;
+      editor.chain().focus().deleteRange(range).setCallout({
+        type: "error",
+        emoji: "❌"
+      }).run();
+    }
+  }, {
+    optionName: "".concat(constants.EDITOR_OPTIONS.CALLOUT, "_success"),
+    title: i18n.t("neetoEditor.menu.calloutSuccess"),
+    description: i18n.t("neetoEditor.menu.calloutDescription"),
+    command: function command(_ref24) {
+      var editor = _ref24.editor,
+        range = _ref24.range;
+      editor.chain().focus().deleteRange(range).setCallout({
+        type: "success",
+        emoji: "✅"
+      }).run();
+    }
+  }]
 }];
 var NO_RESULT_MENU_ITEM = {
   title: i18n.t("neetoEditor.menu.noResults"),
-  command: function command(_ref16) {
-    var editor = _ref16.editor,
-      range = _ref16.range;
+  command: function command(_ref25) {
+    var editor = _ref25.editor,
+      range = _ref25.range;
     editor.chain().focus().deleteRange(range).run();
   }
 };
@@ -14371,11 +14488,29 @@ var videoCommand = function videoCommand(setMediaUploader) {
     editor.chain().focus().deleteRange(range).run();
   };
 };
-var buildCommandItems = function buildCommandItems(_ref4) {
-  var options = _ref4.options,
-    addonCommands = _ref4.addonCommands,
-    setMediaUploader = _ref4.setMediaUploader,
-    setIsEmbedModalOpen = _ref4.setIsEmbedModalOpen;
+var linkCommand = function linkCommand(setIsAddLinkActive) {
+  return function (_ref4) {
+    var editor = _ref4.editor,
+      range = _ref4.range;
+    setIsAddLinkActive(true);
+    editor.chain().focus().deleteRange(range).run();
+  };
+};
+var attachmentCommand = function attachmentCommand(attachmentProps) {
+  return function (_ref5) {
+    var editor = _ref5.editor,
+      range = _ref5.range;
+    attachmentProps === null || attachmentProps === void 0 || attachmentProps.handleUploadAttachments();
+    editor.chain().focus().deleteRange(range).run();
+  };
+};
+var buildCommandItems = function buildCommandItems(_ref6) {
+  var options = _ref6.options,
+    addonCommands = _ref6.addonCommands,
+    setMediaUploader = _ref6.setMediaUploader,
+    setIsEmbedModalOpen = _ref6.setIsEmbedModalOpen,
+    setIsAddLinkActive = _ref6.setIsAddLinkActive,
+    attachmentProps = _ref6.attachmentProps;
   var commandItems = MENU_ITEMS.map(function (item) {
     if (item.optionName === constants.EDITOR_OPTIONS.IMAGE_UPLOAD) {
       return ramda.assoc("command", imageCommand(setMediaUploader), item);
@@ -14383,11 +14518,15 @@ var buildCommandItems = function buildCommandItems(_ref4) {
       return ramda.assoc("command", videoCommand(setMediaUploader), item);
     } else if (item.optionName === constants.EDITOR_OPTIONS.VIDEO_EMBED) {
       return ramda.assoc("command", embedCommand(setIsEmbedModalOpen), item);
+    } else if (item.optionName === constants.EDITOR_OPTIONS.LINK) {
+      return ramda.assoc("command", linkCommand(setIsAddLinkActive), item);
+    } else if (item.optionName === constants.EDITOR_OPTIONS.ATTACHMENTS) {
+      return ramda.assoc("command", attachmentCommand(attachmentProps), item);
     }
     return item;
   });
-  var permittedCommandItems = commandItems.filter(function (_ref5) {
-    var optionName = _ref5.optionName;
+  var permittedCommandItems = commandItems.filter(function (_ref7) {
+    var optionName = _ref7.optionName;
     return options.includes(optionName);
   });
   var adddonCommandItems = addonCommands.map(function (command) {
@@ -14407,12 +14546,16 @@ var SlashCommands = {
     var addonCommands = _ref.addonCommands,
       options = _ref.options,
       setMediaUploader = _ref.setMediaUploader,
-      setIsEmbedModalOpen = _ref.setIsEmbedModalOpen;
+      setIsEmbedModalOpen = _ref.setIsEmbedModalOpen,
+      setIsAddLinkActive = _ref.setIsAddLinkActive,
+      attachmentProps = _ref.attachmentProps;
     var commandItems = buildCommandItems({
       options: options,
       addonCommands: addonCommands,
       setMediaUploader: setMediaUploader,
-      setIsEmbedModalOpen: setIsEmbedModalOpen
+      setIsEmbedModalOpen: setIsEmbedModalOpen,
+      setIsAddLinkActive: setIsAddLinkActive,
+      attachmentProps: attachmentProps
     });
     return Menu$3.Extension.create({
       name: "slash-commands",
@@ -19858,6 +20001,8 @@ var useCustomExtensions = function useCustomExtensions(_ref) {
     isVideoEmbedActive = _ref.isVideoEmbedActive,
     setMediaUploader = _ref.setMediaUploader,
     setIsEmbedModalOpen = _ref.setIsEmbedModalOpen,
+    setIsAddLinkActive = _ref.setIsAddLinkActive,
+    attachmentProps = _ref.attachmentProps,
     openImageInNewTab = _ref.openImageInNewTab,
     openLinkInNewTab = _ref.openLinkInNewTab,
     enableReactNodeViewOptimization = _ref.enableReactNodeViewOptimization,
@@ -19918,7 +20063,9 @@ var useCustomExtensions = function useCustomExtensions(_ref) {
       options: options,
       addonCommands: addonCommands,
       setMediaUploader: setMediaUploader,
-      setIsEmbedModalOpen: setIsEmbedModalOpen
+      setIsEmbedModalOpen: setIsEmbedModalOpen,
+      setIsAddLinkActive: setIsAddLinkActive,
+      attachmentProps: attachmentProps
     }));
   }
   if (!ramda.isEmpty(mentions)) {
@@ -20334,7 +20481,7 @@ var Editor = function Editor(_ref, ref) {
     _ref$extensions = _ref.extensions,
     extensions = _ref$extensions === void 0 ? [] : _ref$extensions,
     _ref$hideSlashCommand = _ref.hideSlashCommands,
-    hideSlashCommands = _ref$hideSlashCommand === void 0 ? true : _ref$hideSlashCommand,
+    hideSlashCommands = _ref$hideSlashCommand === void 0 ? false : _ref$hideSlashCommand,
     _ref$initialValue = _ref.initialValue,
     initialValue = _ref$initialValue === void 0 ? "" : _ref$initialValue,
     _ref$isCharacterCount = _ref.isCharacterCountActive,
@@ -20394,13 +20541,17 @@ var Editor = function Editor(_ref, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isEmbedModalOpen = _useState4[0],
     setIsEmbedModalOpen = _useState4[1];
-  var _useState5 = React.useState({
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isAddLinkActive = _useState6[0],
+    setIsAddLinkActive = _useState6[1];
+  var _useState7 = React.useState({
       image: false,
       video: false
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    mediaUploader = _useState6[0],
-    setMediaUploader = _useState6[1];
+    _useState8 = _slicedToArray(_useState7, 2),
+    mediaUploader = _useState8[0],
+    setMediaUploader = _useState8[1];
   var addAttachmentsRef = React.useRef(null);
   var attachmentProps = {
     handleUploadAttachments: function handleUploadAttachments() {
@@ -20433,6 +20584,8 @@ var Editor = function Editor(_ref, ref) {
     isVideoEmbedActive: isVideoEmbedActive,
     setMediaUploader: setMediaUploader,
     setIsEmbedModalOpen: setIsEmbedModalOpen,
+    setIsAddLinkActive: setIsAddLinkActive,
+    attachmentProps: attachmentProps,
     openImageInNewTab: openImageInNewTab,
     openLinkInNewTab: openLinkInNewTab,
     enableReactNodeViewOptimization: enableReactNodeViewOptimization,
@@ -20568,6 +20721,11 @@ var Editor = function Editor(_ref, ref) {
           onChange: onChangeAttachments
         }), (editor === null || editor === void 0 ? void 0 : editor.isActive("link")) && /*#__PURE__*/jsxRuntime.jsx(LinkPopOver, {
           editor: editor
+        }), isAddLinkActive && /*#__PURE__*/jsxRuntime.jsx(Menu$3.LinkAddPopOver, {
+          editor: editor,
+          isAddLinkActive: isAddLinkActive,
+          openLinkInNewTab: openLinkInNewTab,
+          setIsAddLinkActive: setIsAddLinkActive
         }), /*#__PURE__*/jsxRuntime.jsx(TableActionMenu, {
           editor: editor,
           appendTo: wrapperRef