@seafile/sdoc-editor 3.0.76 → 3.0.78

package/dist/constants/index.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "KeyCodes", {
     return _keyCodes["default"];
   }
 });
-exports.PAGE_EDIT_AREA_WIDTH = exports.MODIFY_TYPE = exports.LEFT_OUTLINE_WIDTH = void 0;
+exports.PAGE_EDIT_AREA_WIDTH = exports.MODIFY_TYPE = exports.MAXTH_JAX_SOURCE_RUL = exports.LEFT_OUTLINE_WIDTH = void 0;
 Object.defineProperty(exports, "PLUGIN_BTN_POSITION", {
   enumerable: true,
   get: function get() {
@@ -127,4 +127,7 @@ var LEFT_OUTLINE_WIDTH = exports.LEFT_OUTLINE_WIDTH = 280;
 var ARTICLE_DEFAULT_WIDTH = exports.ARTICLE_DEFAULT_WIDTH = '794px';
 // Width in full width mode
 var ARTICLE_FULL_WIDTH = exports.ARTICLE_FULL_WIDTH = 'calc(100% - 50px - 50px)'; // The left and right sides are 50
-var ARTICLE_FULL_MIN_WIDTH = exports.ARTICLE_FULL_MIN_WIDTH = '400px';
+var ARTICLE_FULL_MIN_WIDTH = exports.ARTICLE_FULL_MIN_WIDTH = '400px';
+
+// formula display mathjax url
+var MAXTH_JAX_SOURCE_RUL = exports.MAXTH_JAX_SOURCE_RUL = '/media/js/mathjax/text-svg.js';

package/dist/editor/sdoc-editor.js

@@ -28,6 +28,7 @@ var _constants2 = require("../extension/constants");
 var _core = require("../extension/core");
 var _helpers = require("../extension/plugins/ai/ai-module/helpers");
 var _useColorContext = require("../hooks/use-color-context");
+var _useMathjax = _interopRequireDefault(require("../hooks/use-mathjax"));
 var _layout = require("../layout");
 var _nodeId = _interopRequireDefault(require("../node-id"));
 var _socket = require("../socket");
@@ -44,7 +45,9 @@ var SdocEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _ref$isShowHeaderTool = _ref.isShowHeaderToolbar,
     isShowHeaderToolbar = _ref$isShowHeaderTool === void 0 ? true : _ref$isShowHeaderTool,
     _ref$showOutline = _ref.showOutline,
-    showOutline = _ref$showOutline === void 0 ? true : _ref$showOutline;
+    showOutline = _ref$showOutline === void 0 ? true : _ref$showOutline,
+    _ref$mathJaxSource = _ref.mathJaxSource,
+    mathJaxSource = _ref$mathJaxSource === void 0 ? _constants.MAXTH_JAX_SOURCE_RUL : _ref$mathJaxSource;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     showFullScreen = _useState2[0],
@@ -72,6 +75,8 @@ var SdocEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     isEdit = _useState6[0],
     setIsEdit = _useState6[1];
+  var _useMathJax = (0, _useMathjax["default"])(mathJaxSource),
+    isLoadingMathJax = _useMathJax.isLoadingMathJax;
 
   // Fix: The editor's children are not updated when the document is updated in revision
   // In revision mode, the document is updated, but the editor's children are not updated,as onValueChange override the new document.elements. This unexpected action cause the editor to display the old content
@@ -248,7 +253,7 @@ var SdocEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   };
   var isFreezed = _context["default"].getSetting('isFreezed');
-  if (isReloading) {
+  if (isReloading || isLoadingMathJax) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "h-100 w-100 d-flex align-items-center justify-content-center"
     }, /*#__PURE__*/_react["default"].createElement(_fileLoading["default"], null));

package/dist/editor/wiki-editor.js

@@ -21,6 +21,7 @@ var _insertElementDialog = _interopRequireDefault(require("../extension/commons/
 var _constants2 = require("../extension/constants");
 var _helpers = require("../extension/plugins/ai/ai-module/helpers");
 var _useColorContext = require("../hooks/use-color-context");
+var _useMathjax = _interopRequireDefault(require("../hooks/use-mathjax"));
 var _useScrollContext = require("../hooks/use-scroll-context");
 var _layout = require("../layout");
 var _nodeId = _interopRequireDefault(require("../node-id"));
@@ -38,7 +39,8 @@ var WikiEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     isWikiReadOnly = _ref.isWikiReadOnly,
     scrollRef = _ref.scrollRef,
     showComment = _ref.showComment,
-    isShowRightPanel = _ref.isShowRightPanel;
+    _ref$mathJaxSource = _ref.mathJaxSource,
+    mathJaxSource = _ref$mathJaxSource === void 0 ? _constants.MAXTH_JAX_SOURCE_RUL : _ref$mathJaxSource;
   var validEditor = (0, _react.useMemo)(function () {
     if (propsEditor) return propsEditor;
     var defaultEditor = (0, _extension.createDefaultEditor)();
@@ -58,6 +60,8 @@ var WikiEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     slateValue = _useState2[0],
     _setSlateValue = _useState2[1];
+  var _useMathJax = (0, _useMathjax["default"])(mathJaxSource),
+    isLoadingMathJax = _useMathJax.isLoadingMathJax;
 
   // Fix: The editor's children are not updated when the document is updated in revision
   // In revision mode, the document is updated, but the editor's children are not updated,as onValueChange override the new document.elements. This unexpected action cause the editor to display the old content
@@ -139,7 +143,7 @@ var WikiEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }, 0);
     _setSlateValue(value);
   };
-  if (isReloading) {
+  if (isReloading || isLoadingMathJax) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "h-100 w-100 d-flex align-items-center justify-content-center"
     }, /*#__PURE__*/_react["default"].createElement(_fileLoading["default"], null));

package/dist/extension/commons/insert-element-dialog/index.js

@@ -16,6 +16,7 @@ var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
 var _constants2 = require("../../constants");
 var _index = _interopRequireDefault(require("../../plugins/ai/ai-module/index.js"));
 var _index2 = _interopRequireDefault(require("../../plugins/file-view/insert-view-dialog/index.js"));
+var _formulaModal = _interopRequireDefault(require("../../plugins/formula/menu/formula-modal.js"));
 var _helpers = require("../../plugins/image/helpers");
 var _addLinkDialog = _interopRequireDefault(require("../../plugins/link/dialog/add-link-dialog"));
 var _dialogs = require("../../plugins/table/dialogs");
@@ -73,6 +74,10 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
     _useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
     data = _useState20[0],
     setData = _useState20[1];
+  var _useState21 = (0, _react.useState)(''),
+    _useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
+    formula = _useState22[0],
+    setFormula = _useState22[1];
   var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
     t = _useTranslation.t;
   var uploadLocalImageInputRef = (0, _react.useRef)();
@@ -109,28 +114,41 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [validEditor, uploadLocalImageInputRef, insertPosition, slateNode]);
+  var handleOpenLinkModal = (0, _react.useCallback)(function (_ref2) {
+    var formulaElement = _ref2.element,
+      editor = _ref2.editor;
+    if (formulaElement && editor) {
+      var _ref3 = formulaElement.data || {},
+        _formula = _ref3.formula;
+      setFormula(_formula);
+      setDialogType(_constants2.FORMULA);
+      setValidEditor(editor);
+    }
+  }, []);
   (0, _react.useEffect)(function () {
     var eventBus = _eventBus["default"].getInstance();
     var toggleDialogSubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.INSERT_ELEMENT, toggleDialog);
+    var unsubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.ON_OPEN_FORMULA_DIALOG, handleOpenLinkModal);
     return function () {
       toggleDialogSubscribe();
+      unsubscribe();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  var toggleDialog = (0, _react.useCallback)(function (_ref2) {
-    var type = _ref2.type,
-      element = _ref2.element,
-      _ref2$insertPosition = _ref2.insertPosition,
-      insertPosition = _ref2$insertPosition === void 0 ? _constants2.INSERT_POSITION.CURRENT : _ref2$insertPosition,
-      slateNode = _ref2.slateNode,
-      insertFileLinkCallback = _ref2.insertFileLinkCallback,
-      insertSdocFileLinkCallback = _ref2.insertSdocFileLinkCallback,
-      insertVideo = _ref2.insertVideo,
-      insertWhiteboard = _ref2.insertWhiteboard,
-      paramEditor = _ref2.editor,
-      linkTitle = _ref2.linkTitle,
-      handleSubmit = _ref2.handleSubmit,
-      data = _ref2.data;
+  var toggleDialog = (0, _react.useCallback)(function (_ref4) {
+    var type = _ref4.type,
+      element = _ref4.element,
+      _ref4$insertPosition = _ref4.insertPosition,
+      insertPosition = _ref4$insertPosition === void 0 ? _constants2.INSERT_POSITION.CURRENT : _ref4$insertPosition,
+      slateNode = _ref4.slateNode,
+      insertFileLinkCallback = _ref4.insertFileLinkCallback,
+      insertSdocFileLinkCallback = _ref4.insertSdocFileLinkCallback,
+      insertVideo = _ref4.insertVideo,
+      insertWhiteboard = _ref4.insertWhiteboard,
+      paramEditor = _ref4.editor,
+      linkTitle = _ref4.linkTitle,
+      handleSubmit = _ref4.handleSubmit,
+      data = _ref4.data;
     setInsertPosition(insertPosition);
     setSlateNode(slateNode);
     setElement(element);
@@ -147,6 +165,7 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
     });
     setLinkTitle(linkTitle);
     setHandleSubmit(handleSubmit);
+    setFormula('');
     // Apply for comment editor, as it has a different editor instance
     setValidEditor(paramEditor || editor);
     setData(data);
@@ -252,6 +271,14 @@ var InsertElementDialog = function InsertElementDialog(_ref) {
         };
         return /*#__PURE__*/_react["default"].createElement(_index2["default"], _props);
       }
+    case _constants2.ELEMENT_TYPE.FORMULA:
+      {
+        return /*#__PURE__*/_react["default"].createElement(_formulaModal["default"], {
+          onCloseModal: closeDialog,
+          editor: validEditor,
+          formula: formula
+        });
+      }
     case _constants2.LOCAL_IMAGE:
       {
         return /*#__PURE__*/_react["default"].createElement("input", {

package/dist/extension/constants/element-type.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WIKI_LINK = exports.WHITEBOARD = exports.VIDEO_LINK = exports.VIDEO = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.GROUP = exports.FOUR_COLUMN = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_VIEW = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CALL_OUT = exports.BLOCKQUOTE = exports.ASK_AI = void 0;
+exports.WIKI_LINK = exports.WHITEBOARD = exports.VIDEO_LINK = exports.VIDEO = exports.UNORDERED_LIST = exports.TWO_COLUMN = exports.TOP_LEVEL_TYPES = exports.TITLE = exports.THREE_COLUMN = exports.TABLE_ROW = exports.TABLE_CELL = exports.TABLE = exports.SUBTITLE = exports.SDOC_LINK = exports.QUICK_INSERT = exports.PARAGRAPH = exports.ORDERED_LIST = exports.MULTI_COLUMN = exports.MENTION_TEMP = exports.MENTION = exports.LIST_ITEM = exports.LINK = exports.INLINE_LEVEL_TYPES = exports.IMAGE_BLOCK = exports.IMAGE = exports.HEADER6 = exports.HEADER5 = exports.HEADER4 = exports.HEADER3 = exports.HEADER2 = exports.HEADER1 = exports.HEADER = exports.GROUP = exports.FOUR_COLUMN = exports.FORMULA = exports.FONT_SIZE_REDUCE = exports.FONT_SIZE_INCREASE = exports.FONT_SIZE = exports.FIVE_COLUMN = exports.FILE_VIEW = exports.FILE_LINK_INSET_INPUT_TEMP = exports.FILE_LINK = exports.COLUMN = exports.CODE_LINE = exports.CODE_BLOCK = exports.CHECK_LIST_ITEM = exports.CALL_OUT = exports.BLOCKQUOTE = exports.ASK_AI = void 0;
 var BLOCKQUOTE = exports.BLOCKQUOTE = 'blockquote';
 var TITLE = exports.TITLE = 'title';
 var SUBTITLE = exports.SUBTITLE = 'subtitle';
@@ -45,6 +45,7 @@ var QUICK_INSERT = exports.QUICK_INSERT = 'quick_insert';
 var VIDEO_LINK = exports.VIDEO_LINK = 'video_link';
 var WHITEBOARD = exports.WHITEBOARD = 'whiteboard';
 var FILE_VIEW = exports.FILE_VIEW = 'file_view';
+var FORMULA = exports.FORMULA = 'formula';
 var ASK_AI = exports.ASK_AI = 'ask_ai';
 
 // font

package/dist/extension/constants/index.js

@@ -147,6 +147,12 @@ Object.defineProperty(exports, "FONT_SIZE", {
     return _font.FONT_SIZE;
   }
 });
+Object.defineProperty(exports, "FORMULA", {
+  enumerable: true,
+  get: function get() {
+    return _elementType.FORMULA;
+  }
+});
 Object.defineProperty(exports, "FOUR_COLUMN", {
   enumerable: true,
   get: function get() {
@@ -550,6 +556,6 @@ var FILEEXT_TYPE_MAP = exports.FILEEXT_TYPE_MAP = {
   EXCALIDRAW: 'draw',
   DOCUMENT: 'word'
 };
-var SUPPORTED_SIDE_OPERATION_TYPE = exports.SUPPORTED_SIDE_OPERATION_TYPE = [_elementType.PARAGRAPH, _elementType.SUBTITLE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CHECK_LIST_ITEM, _elementType.CODE_BLOCK, _elementType.TABLE, _elementType.BLOCKQUOTE, _elementType.CALL_OUT, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.WHITEBOARD];
+var SUPPORTED_SIDE_OPERATION_TYPE = exports.SUPPORTED_SIDE_OPERATION_TYPE = [_elementType.PARAGRAPH, _elementType.SUBTITLE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CHECK_LIST_ITEM, _elementType.CODE_BLOCK, _elementType.TABLE, _elementType.BLOCKQUOTE, _elementType.CALL_OUT, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.WHITEBOARD, _elementType.FORMULA];
 var MOUSE_ENTER_EVENT_DISABLED_MAP = exports.MOUSE_ENTER_EVENT_DISABLED_MAP = (_MOUSE_ENTER_EVENT_DI = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_MOUSE_ENTER_EVENT_DI, _elementType.PARAGRAPH, [_elementType.CALL_OUT]), _elementType.TITLE, [_elementType.CALL_OUT]), _elementType.SUBTITLE, [_elementType.CALL_OUT]), _elementType.CHECK_LIST_ITEM, [_elementType.CALL_OUT]), _elementType.ORDERED_LIST, [_elementType.CALL_OUT]), _elementType.UNORDERED_LIST, [_elementType.CALL_OUT]), _elementType.LIST_ITEM, [_elementType.CALL_OUT]), _elementType.BLOCKQUOTE, [_elementType.CALL_OUT]), _elementType.HEADER1, [_elementType.CALL_OUT]), _elementType.HEADER2, [_elementType.CALL_OUT]), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_MOUSE_ENTER_EVENT_DI, _elementType.HEADER3, [_elementType.CALL_OUT]), _elementType.HEADER4, [_elementType.CALL_OUT]), _elementType.HEADER5, [_elementType.CALL_OUT]), _elementType.HEADER6, [_elementType.CALL_OUT]), _elementType.CALL_OUT, [_elementType.CALL_OUT]));
-var ROOT_ELEMENT_TYPES = exports.ROOT_ELEMENT_TYPES = [_elementType.PARAGRAPH, _elementType.TITLE, _elementType.SUBTITLE, _elementType.CHECK_LIST_ITEM, _elementType.ORDERED_LIST, _elementType.UNORDERED_LIST, _elementType.BLOCKQUOTE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CALL_OUT, _elementType.TABLE, _elementType.CODE_BLOCK, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.WHITEBOARD];
+var ROOT_ELEMENT_TYPES = exports.ROOT_ELEMENT_TYPES = [_elementType.PARAGRAPH, _elementType.TITLE, _elementType.SUBTITLE, _elementType.CHECK_LIST_ITEM, _elementType.ORDERED_LIST, _elementType.UNORDERED_LIST, _elementType.BLOCKQUOTE, _elementType.HEADER1, _elementType.HEADER2, _elementType.HEADER3, _elementType.HEADER4, _elementType.HEADER5, _elementType.HEADER6, _elementType.CALL_OUT, _elementType.TABLE, _elementType.CODE_BLOCK, _elementType.IMAGE_BLOCK, _elementType.VIDEO, _elementType.WHITEBOARD, _elementType.FORMULA];

package/dist/extension/constants/menus-config.js

@@ -97,7 +97,11 @@ var MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, (0, _
   id: "sdoc_".concat(_elementType.TABLE),
   iconClass: 'sdocfont sdoc-table',
   text: 'Table'
-}), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_MENUS_CONFIG_MAP, TEXT_STYLE, [{
+}), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_MENUS_CONFIG_MAP, _elementType.FORMULA, {
+  id: "seafile_".concat(_elementType.FORMULA),
+  iconClass: 'sdocfont sdoc-formula',
+  text: 'Formula'
+}), TEXT_STYLE, [{
   id: ITALIC,
   iconClass: 'sdocfont sdoc-italic',
   text: 'Italic',
@@ -201,7 +205,7 @@ var MENUS_CONFIG_MAP = exports.MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, (0, _
   id: "sdoc_".concat(_elementType.CALL_OUT),
   iconClass: 'sdocfont sdoc-callout',
   text: 'Callout'
-}), SEARCH_REPLACE, {
+}), (0, _defineProperty2["default"])(_MENUS_CONFIG_MAP, SEARCH_REPLACE, {
   id: "sdoc_".concat(SEARCH_REPLACE),
   iconClass: 'sdocfont sdoc-find-replace',
   text: 'Search_and_replace'
@@ -336,7 +340,7 @@ var SIDE_INSERT_MENUS_CONFIG = exports.SIDE_INSERT_MENUS_CONFIG = (_SIDE_INSERT_
   iconClass: 'sdocfont sdoc-text',
   type: _elementType.PARAGRAPH,
   text: 'Paragraph'
-}), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_SIDE_INSERT_MENUS_CO, _elementType.HEADER, [{
+}), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_SIDE_INSERT_MENUS_CO, _elementType.HEADER, [{
   id: _elementType.HEADER1,
   iconClass: 'sdocfont sdoc-header1',
   type: _elementType.HEADER1,
@@ -376,9 +380,14 @@ var SIDE_INSERT_MENUS_CONFIG = exports.SIDE_INSERT_MENUS_CONFIG = (_SIDE_INSERT_
   iconClass: 'sdocfont sdoc-file-view',
   type: _elementType.FILE_VIEW,
   text: 'File_view'
+}), _elementType.FORMULA, {
+  id: 'sdoc-side-menu-item-formula',
+  iconClass: 'sdocfont sdoc-formula',
+  type: _elementType.FORMULA,
+  text: 'Formula'
 }));
 var SIDE_INSERT_MENUS_SEARCH_MAP = exports.SIDE_INSERT_MENUS_SEARCH_MAP = (_SIDE_INSERT_MENUS_SE = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_SIDE_INSERT_MENUS_SE, _elementType.IMAGE, 'Image'), _elementType.VIDEO, 'Video'), _elementType.TABLE, 'Table'), _elementType.COLUMN, 'Column'), _elementType.TWO_COLUMN, 'Two_column'), _elementType.THREE_COLUMN, 'Three_column'), _elementType.FOUR_COLUMN, 'Four_column'), _elementType.LINK, 'Link'), _elementType.CODE_BLOCK, 'Code_block'), _elementType.CALL_OUT, 'Callout'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_SIDE_INSERT_MENUS_SE, _elementType.UNORDERED_LIST, 'Unordered_list'), _elementType.ORDERED_LIST, 'Ordered_list'), _elementType.CHECK_LIST_ITEM, 'Check_list'), _elementType.PARAGRAPH, 'Paragraph'), _elementType.HEADER1, 'Header_one'), _elementType.HEADER2, 'Header_two'), _elementType.HEADER3, 'Header_three'), _elementType.HEADER4, 'Header_four'), _elementType.FILE_VIEW, 'File_view'));
-var SIDE_QUICK_INSERT_MENUS_SEARCH_MAP = exports.SIDE_QUICK_INSERT_MENUS_SEARCH_MAP = (_SIDE_QUICK_INSERT_ME = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_SIDE_QUICK_INSERT_ME, _elementType.IMAGE, 'Image'), _elementType.VIDEO, 'Video'), _elementType.TABLE, 'Table'), _elementType.COLUMN, 'Column'), _elementType.TWO_COLUMN, 'Two_column'), _elementType.THREE_COLUMN, 'Three_column'), _elementType.FOUR_COLUMN, 'Four_column'), _elementType.LINK, 'Link'), _elementType.CODE_BLOCK, 'Code_block'), _elementType.CALL_OUT, 'Callout'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_SIDE_QUICK_INSERT_ME, _elementType.UNORDERED_LIST, 'Unordered_list'), _elementType.ORDERED_LIST, 'Ordered_list'), _elementType.CHECK_LIST_ITEM, 'Check_list'), _elementType.PARAGRAPH, 'Paragraph'), _elementType.HEADER1, 'Header_one'), _elementType.HEADER2, 'Header_two'), _elementType.HEADER3, 'Header_three'), _elementType.HEADER4, 'Header_four'), _elementType.FILE_VIEW, 'File_view'));
+var SIDE_QUICK_INSERT_MENUS_SEARCH_MAP = exports.SIDE_QUICK_INSERT_MENUS_SEARCH_MAP = (_SIDE_QUICK_INSERT_ME = {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_SIDE_QUICK_INSERT_ME, _elementType.IMAGE, 'Image'), _elementType.VIDEO, 'Video'), _elementType.TABLE, 'Table'), _elementType.COLUMN, 'Column'), _elementType.TWO_COLUMN, 'Two_column'), _elementType.THREE_COLUMN, 'Three_column'), _elementType.FOUR_COLUMN, 'Four_column'), _elementType.LINK, 'Link'), _elementType.CODE_BLOCK, 'Code_block'), _elementType.CALL_OUT, 'Callout'), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])(_SIDE_QUICK_INSERT_ME, _elementType.UNORDERED_LIST, 'Unordered_list'), _elementType.ORDERED_LIST, 'Ordered_list'), _elementType.CHECK_LIST_ITEM, 'Check_list'), _elementType.PARAGRAPH, 'Paragraph'), _elementType.HEADER1, 'Header_one'), _elementType.HEADER2, 'Header_two'), _elementType.HEADER3, 'Header_three'), _elementType.HEADER4, 'Header_four'), _elementType.FILE_VIEW, 'File_view'), _elementType.FORMULA, 'Formula'));
 
 // Other operations menu config
 var SIDE_OTHER_OPERATIONS_MENUS_SEARCH_MAP = exports.SIDE_OTHER_OPERATIONS_MENUS_SEARCH_MAP = {

package/dist/extension/plugins/callout/menu/index.js

@@ -25,6 +25,7 @@ var CalloutMenu = function CalloutMenu(_ref) {
     t = _useTranslation.t;
   var handleDisplayAlert = (0, _react.useCallback)(function (type) {
     setTimeout(function () {
+      if (typeof type !== 'string') return;
       _toast["default"].warning("".concat(t('The_current_location_does_not_support_pasting')).concat(t(type && type.at(0).toUpperCase() + type.slice(1))));
     }, 0);
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/dist/extension/plugins/formula/formula.css

@@ -0,0 +1,32 @@
+/* formula */
+.sdoc-selected-formula {
+  display: block;
+  user-select: none;
+  outline: 2px solid #007bff;
+  cursor: pointer;
+}
+
+.sdoc-block-formula {
+  margin: 5px 0;
+}
+
+.sdoc-block-formula svg,
+.sdoc-block-formula svg * {
+  pointer-events: none;
+}
+
+
+.sdoc-selected-formula .MathJax {
+  margin: 0;
+}
+
+.formula-dialog-wrapper .form-check-label {
+  margin-bottom: 4px;
+}
+
+.formula-dialog-wrapper .formula-preview {
+  padding: 10px;
+  border: 2px dashed #ebebeb;
+  min-height: 40px;
+  overflow-x: auto;
+}

package/dist/extension/plugins/formula/helper.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateFormula = exports.onCopyFormulaNode = exports.insertFormula = void 0;
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));
+var _slugid = _interopRequireDefault(require("slugid"));
+var _elementType = require("../../constants/element-type");
+var _core = require("../../core");
+var insertFormula = exports.insertFormula = function insertFormula(editor, data) {
+  var formula = {
+    id: _slugid["default"].nice(),
+    type: _elementType.FORMULA,
+    data: {
+      formula: data.formula
+    },
+    children: [(0, _core.generateDefaultText)()]
+  };
+  _slate.Transforms.insertNodes(editor, formula, {
+    at: data.at,
+    "void": true
+  });
+  (0, _core.focusEditor)(editor);
+};
+var updateFormula = exports.updateFormula = function updateFormula(editor, data) {
+  var formula = data.formula,
+    at = data.at;
+  _slate.Transforms.setNodes(editor, {
+    data: {
+      formula: formula
+    }
+  }, {
+    at: at,
+    "void": true
+  });
+  (0, _core.focusEditor)(editor);
+};
+var onCopyFormulaNode = exports.onCopyFormulaNode = function onCopyFormulaNode(editor, element) {
+  if (editor.selection == null || _slate.Range.isExpanded(editor.selection)) return;
+  var p = _slateReact.ReactEditor.findPath(editor, element);
+  _slate.Transforms.select(editor, p);
+  var newData = editor.setFragmentData(new DataTransfer());
+  (0, _copyToClipboard["default"])('copy', {
+    onCopy: function onCopy(clipboardData) {
+      newData.types.forEach(function (type) {
+        var data = newData.getData(type);
+        clipboardData.setData(type, data);
+      });
+    }
+  });
+};

package/dist/extension/plugins/formula/hover-menu/index.css

@@ -0,0 +1,79 @@
+.sdoc-formula-hover-menu-container {
+  position: absolute;
+  height: 42px;
+  z-index: 101;
+  width: fit-content;
+  max-width: 250px;
+}
+
+.sdoc-formula-hover-menu-container .hover-menu-container {
+  height: 36px;
+  width: 100%;
+  padding: 7px 8px;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
+  border: 1px solid #e8e8e8;
+  color: #212529;
+}
+
+.sdoc-formula-hover-menu-container .sdocfont {
+  line-height: 1;
+  font-size: 14px;
+  color: #666;
+}
+
+.sdoc-formula-hover-menu-container .hover-menu-container .active {
+  text-decoration: none;
+}
+
+.sdoc-formula-hover-menu-container .hover-menu-container .op-item {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  font-size: 12px;
+  border-radius: 2px;
+  text-align: center;
+  line-height: 20px;
+}
+
+.sdoc-formula-hover-menu-container .sdoc-formula-hover-operation-item.sdoc-formula-hover-operation-lang .op-item {
+  padding: 0 5px;
+}
+
+.sdoc-formula-hover-menu-container .hover-menu-container .sdoc-formula-hover-operation-lang .sdocfont {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+}
+
+.sdoc-formula-hover-menu-container .sdoc-formula-hover-operation-item {
+  height: 20px;
+  width: 20px;
+  text-align: center;
+  justify-content: center;
+}
+
+.sdoc-formula-hover-menu-container .sdoc-formula-hover-operation-item.sdoc-formula-hover-operation-lang {
+  width: fit-content;
+}
+
+.sdoc-formula-hover-menu-container .sdoc-formula-hover-operation-lang .sdoc-arrow-down {
+  font-size: 12px;
+}
+
+.sdoc-formula-hover-menu-container .sdoc-formula-hover-operation-divider {
+  height: 20px;
+  width: 1px;
+  background-color: #e5e5e5;
+  margin: 0 8px;
+}
+
+.sdoc-formula-hover-menu-container .hover-menu-container .op-item:hover {
+  text-decoration: none;
+  background: #F5F5F5;
+}

package/dist/extension/plugins/formula/hover-menu/index.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _toast = _interopRequireDefault(require("../../../../components/toast"));
+var _tooltip = _interopRequireDefault(require("../../../../components/tooltip"));
+var _commons = require("../../../commons/");
+var _helper = require("../helper");
+require("./index.css");
+var FormulaHoverMenu = function FormulaHoverMenu(_ref) {
+  var editor = _ref.editor,
+    element = _ref.element,
+    menuPosition = _ref.menuPosition,
+    onDeleteFormula = _ref.onDeleteFormula,
+    t = _ref.t,
+    onHideInsertHoverMenu = _ref.onHideInsertHoverMenu,
+    onEditFormula = _ref.onEditFormula;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isShowTooltip = _useState2[0],
+    setIsShowTooltip = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setIsShowTooltip(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onDelete = (0, _react.useCallback)(function () {
+    onDeleteFormula();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onCopy = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
+    (0, _helper.onCopyFormulaNode)(editor, element);
+    _toast["default"].success(t('Copied'), {
+      hasCloseButton: false,
+      duration: 2
+    });
+    onHideInsertHoverMenu();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_commons.ElementPopover, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-formula-hover-menu-container",
+    style: menuPosition
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "hover-menu-container"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    id: "sdoc_formula_edit",
+    className: "sdoc-formula-hover-operation-item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    role: "button",
+    className: "op-item",
+    onClick: onEditFormula
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-rename"
+  })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "sdoc_formula_edit",
+    placement: "top",
+    fade: true
+  }, t('Edit_formula'))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-formula-hover-operation-divider"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    id: "sdoc_formula_copy",
+    className: "sdoc-formula-hover-operation-item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    role: "button",
+    className: "op-item",
+    onClick: onCopy
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-copy"
+  })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "sdoc_formula_copy",
+    placement: "top",
+    fade: true
+  }, t('Copy'))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "sdoc-formula-hover-operation-divider"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    id: "sdoc_formula_delete",
+    className: "sdoc-formula-hover-operation-item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    role: "button",
+    className: "op-item",
+    onClick: onDelete
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "sdocfont sdoc-delete"
+  })), isShowTooltip && /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    target: "sdoc_formula_delete",
+    placement: "top",
+    fade: true
+  }, t('Delete'))))));
+};
+var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(FormulaHoverMenu);

package/dist/extension/plugins/formula/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _elementType = require("../../constants/element-type");
+var _menu = _interopRequireDefault(require("./menu"));
+var _plugin = _interopRequireDefault(require("./plugin"));
+var _renderElement = _interopRequireDefault(require("./render-element"));
+var FormulaPlugin = {
+  type: _elementType.FORMULA,
+  nodeType: 'element',
+  editorMenus: [_menu["default"]],
+  editorPlugin: _plugin["default"],
+  renderElements: [_renderElement["default"]]
+};
+var _default = exports["default"] = FormulaPlugin;

package/dist/extension/plugins/formula/menu/formula-modal.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _core = require("../../../core");
+var _helper = require("../helper");
+var FormulaModal = function FormulaModal(_ref) {
+  var editor = _ref.editor,
+    formula = _ref.formula,
+    onCloseModal = _ref.onCloseModal;
+  var oldFormulaRef = (0, _react.useRef)(formula);
+  var _useState = (0, _react.useState)(formula),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    newFormula = _useState2[0],
+    setNewFormula = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    modifyPath = _useState4[0],
+    setModifyPath = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    isDisabled = _useState6[0],
+    setIsDisabled = _useState6[1];
+  var formulaPreviewRef = (0, _react.useRef)(null);
+  var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
+    t = _useTranslation.t;
+
+  // record current selection position
+  (0, _react.useEffect)(function () {
+    var node = (0, _core.getAboveBlockNode)(editor);
+    if (node) {
+      setModifyPath(node[1]);
+      return;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (formulaPreviewRef.current) {
+      formulaPreviewRef.current.innerHTML = '';
+      var dom = window.MathJax.tex2svg(newFormula);
+      formulaPreviewRef.current.appendChild(dom);
+    }
+  });
+  var onFormulaChange = (0, _react.useCallback)(function (event) {
+    setIsDisabled(false);
+    setNewFormula(event.target.value);
+  }, []);
+  var handleUpdateFormula = (0, _react.useCallback)(function () {
+    var data = {
+      formula: newFormula,
+      at: modifyPath
+    };
+    if (oldFormulaRef.current) {
+      (0, _helper.updateFormula)(editor, data);
+    } else {
+      (0, _helper.insertFormula)(editor, data);
+    }
+    onCloseModal();
+  }, [editor, modifyPath, newFormula, onCloseModal]);
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.Modal, {
+    isOpen: true,
+    toggle: onCloseModal,
+    autoFocus: false,
+    wrapClassName: "formula-dialog-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement(_reactstrap.ModalHeader, {
+    toggle: onCloseModal
+  }, t('Insert_formula')), /*#__PURE__*/_react["default"].createElement(_reactstrap.ModalBody, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "form-group"
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    className: "form-check-label"
+  }, t('Formula')), /*#__PURE__*/_react["default"].createElement(_reactstrap.Input, {
+    type: "textarea",
+    className: "form-control",
+    value: newFormula,
+    autoFocus: true,
+    onChange: onFormulaChange
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    ref: formulaPreviewRef,
+    className: "formula-preview"
+  })), /*#__PURE__*/_react["default"].createElement(_reactstrap.ModalFooter, null, /*#__PURE__*/_react["default"].createElement(_reactstrap.Button, {
+    color: "secondary",
+    onClick: onCloseModal
+  }, t('Cancel')), /*#__PURE__*/_react["default"].createElement(_reactstrap.Button, {
+    color: "primary",
+    disabled: isDisabled,
+    onClick: handleUpdateFormula
+  }, t('Insert_formula'))));
+};
+var _default = exports["default"] = FormulaModal;

package/dist/extension/plugins/formula/menu/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("../../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _dropdownMenuItem = _interopRequireDefault(require("../../../commons/dropdown-menu-item"));
+var _constants2 = require("../../../constants");
+var FormulaMenu = function FormulaMenu(_ref) {
+  var editor = _ref.editor,
+    readonly = _ref.readonly,
+    toggle = _ref.toggle;
+  var menuConfig = _constants2.MENUS_CONFIG_MAP[_constants2.ELEMENT_TYPE.FORMULA];
+  var OpenFormulaModal = function OpenFormulaModal() {
+    toggle && toggle();
+    var eventBus = _eventBus["default"].getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants2.ELEMENT_TYPE.FORMULA,
+      editor: editor
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+    disabled: readonly,
+    menuConfig: menuConfig,
+    onClick: OpenFormulaModal
+  });
+};
+var _default = exports["default"] = FormulaMenu;

package/dist/extension/plugins/formula/plugin.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _slate = require("@seafile/slate");
+var _constants = require("../../constants");
+var _core = require("../../core");
+var withFormula = function withFormula(editor) {
+  var isVoid = editor.isVoid,
+    normalizeNode = editor.normalizeNode;
+  var newEditor = editor;
+  newEditor.isVoid = function (element) {
+    var type = element.type;
+    if (type === _constants.ELEMENT_TYPE.FORMULA) return true;
+    return isVoid(element);
+  };
+  newEditor.normalizeNode = function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+      node = _ref2[0],
+      path = _ref2[1];
+    var type = (0, _core.getNodeType)(node);
+    if (type !== _constants.ELEMENT_TYPE.FORMULA) {
+      return normalizeNode([node, path]);
+    }
+
+    // insert empty node，continue editor
+    var isLast = (0, _core.isLastNode)(newEditor, node);
+    if (isLast) {
+      var p = (0, _core.generateEmptyElement)(_constants.PARAGRAPH);
+      _slate.Transforms.insertNodes(newEditor, p, {
+        at: [path[0] + 1]
+      });
+    }
+  };
+  return newEditor;
+};
+var _default = exports["default"] = withFormula;

package/dist/extension/plugins/formula/render-element.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createForOfIteratorHelper"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _constants = require("../../../constants");
+var _useScrollContext = require("../../../hooks/use-scroll-context");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var _core = require("../../core");
+var _hoverMenu = _interopRequireDefault(require("./hover-menu"));
+require("./formula.css");
+var Formula = function Formula(_ref) {
+  var attributes = _ref.attributes,
+    element = _ref.element,
+    children = _ref.children,
+    editor = _ref.editor;
+  var readOnly = (0, _slateReact.useReadOnly)();
+  var isSelected = (0, _slateReact.useSelected)();
+  var scrollRef = (0, _useScrollContext.useScrollContext)();
+  var formulaContainerRef = (0, _react.useRef)(null);
+  // const [mathJaxReady, setMathJaxReady] = useState(false);
+  var _useState = (0, _react.useState)({
+      top: '',
+      left: ''
+    }),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    menuPosition = _useState2[0],
+    setMenuPosition = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    showHoverMenu = _useState4[0],
+    setShowHoverMenu = _useState4[1];
+  var formulaBlockRef = (0, _react.useRef)(null);
+  var setPosition = (0, _react.useCallback)(function (elem) {
+    if (readOnly) return;
+    if (elem) {
+      var _elem$getBoundingClie = elem.getBoundingClientRect(),
+        top = _elem$getBoundingClie.top,
+        left = _elem$getBoundingClie.left;
+      var menuTop = top - 42; // top = top distance - menu height
+      var newMenuPosition = {
+        top: menuTop,
+        left: left // left = code-block left distance
+      };
+      setMenuPosition(newMenuPosition);
+    }
+    setShowHoverMenu(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var handleClick = (0, _react.useCallback)(function (e) {
+    if (showHoverMenu) {
+      e.stopPropagation();
+    } else {
+      formulaBlockRef.current && setPosition(formulaBlockRef.current);
+      setShowHoverMenu(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onDeleteFormula = (0, _react.useCallback)(function () {
+    var path = _slateReact.ReactEditor.findPath(editor, element);
+    _slate.Transforms.removeNodes(editor, {
+      at: path
+    });
+    (0, _core.focusEditor)(editor);
+    _slate.Transforms.select(editor, editor.selection);
+  }, [editor, element]);
+  var toggleFormulaEditor = (0, _react.useCallback)(function () {
+    var eventBus = _eventBus["default"].getInstance();
+    eventBus.dispatch(_constants.INTERNAL_EVENT.ON_OPEN_FORMULA_DIALOG, {
+      element: element,
+      editor: editor
+    });
+  }, [element, editor]);
+  var onHideInsertHoverMenu = (0, _react.useCallback)(function (e) {
+    setShowHoverMenu(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onScroll = (0, _react.useCallback)(function (e) {
+    if (!formulaBlockRef.current) return;
+    setPosition(formulaBlockRef.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(function () {
+    var observerRefValue = null;
+    var resizeObserver = null;
+    if (showHoverMenu) {
+      scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
+      observerRefValue = scrollRef.current;
+      resizeObserver = new ResizeObserver(function (entries) {
+        var _iterator = (0, _createForOfIteratorHelper2["default"])(entries),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var entry = _step.value;
+            if (resizeObserver) {
+              onScroll();
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      });
+      resizeObserver.observe(scrollRef.current);
+    } else {
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
+    }
+    return function () {
+      if (observerRefValue) {
+        observerRefValue.removeEventListener('scroll', onScroll);
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showHoverMenu]);
+  (0, _react.useEffect)(function () {
+    var _ref2 = element.data || {},
+      _ref2$formula = _ref2.formula,
+      formula = _ref2$formula === void 0 ? '' : _ref2$formula;
+    if (!formula) return;
+    if (typeof window.MathJax.tex2svg !== 'function') return;
+    if (formulaContainerRef.current && window.MathJax) {
+      var domHtml = window.MathJax.tex2svg(formula).outerHTML;
+      formulaContainerRef.current.innerHTML = domHtml;
+    }
+  }, [element]);
+  return /*#__PURE__*/_react["default"].createElement("div", Object.assign({}, attributes, {
+    "data-id": element.id,
+    onDoubleClick: toggleFormulaEditor,
+    onClick: handleClick,
+    className: 'sdoc-block-formula' + (isSelected ? ' sdoc-selected-formula' : '')
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    ref: formulaBlockRef
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    contentEditable: false,
+    ref: formulaContainerRef
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    contentEditable: "false",
+    suppressContentEditableWarning: true
+  }, children)), isSelected && showHoverMenu && /*#__PURE__*/_react["default"].createElement(_hoverMenu["default"], {
+    editor: editor,
+    element: element,
+    menuPosition: menuPosition,
+    onDeleteFormula: onDeleteFormula,
+    onEditFormula: toggleFormulaEditor,
+    onHideInsertHoverMenu: onHideInsertHoverMenu
+  }));
+};
+var renderFormula = function renderFormula(props, editor) {
+  return /*#__PURE__*/_react["default"].createElement(Formula, Object.assign({}, props, {
+    editor: editor
+  }));
+};
+var _default = exports["default"] = renderFormula;

package/dist/extension/plugins/index.js

@@ -47,6 +47,12 @@ Object.defineProperty(exports, "FontPlugin", {
     return _font["default"];
   }
 });
+Object.defineProperty(exports, "FormulaPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _formula["default"];
+  }
+});
 Object.defineProperty(exports, "GroupPlugin", {
   enumerable: true,
   get: function get() {
@@ -169,6 +175,7 @@ var _codeBlock = _interopRequireDefault(require("./code-block"));
 var _fileLink = _interopRequireDefault(require("./file-link"));
 var _fileView = _interopRequireDefault(require("./file-view"));
 var _font = _interopRequireDefault(require("./font"));
+var _formula = _interopRequireDefault(require("./formula"));
 var _group = _interopRequireDefault(require("./group"));
 var _header = _interopRequireDefault(require("./header"));
 var _html = _interopRequireDefault(require("./html"));
@@ -188,7 +195,7 @@ var _textStyle = _interopRequireDefault(require("./text-style"));
 var _video = _interopRequireDefault(require("./video"));
 var _whiteboard = _interopRequireDefault(require("./whiteboard"));
 var _wikiLink = _interopRequireDefault(require("./wiki-link"));
-var Plugins = [_markdown["default"], _html["default"], _header["default"], _link["default"], _blockquote["default"], _list["default"], _checkList["default"], _codeBlock["default"], _image["default"], _video["default"], _table["default"], _multiColumn["default"], _textStyle["default"], _textAlign["default"], _font["default"], _sdocLink["default"], _paragraph["default"], _fileLink["default"], _callout["default"], _searchReplace["default"], _quickInsert["default"], _group["default"], _whiteboard["default"], _fileView["default"]];
+var Plugins = [_markdown["default"], _html["default"], _header["default"], _link["default"], _blockquote["default"], _list["default"], _checkList["default"], _codeBlock["default"], _image["default"], _video["default"], _table["default"], _multiColumn["default"], _textStyle["default"], _textAlign["default"], _font["default"], _sdocLink["default"], _paragraph["default"], _fileLink["default"], _callout["default"], _searchReplace["default"], _quickInsert["default"], _group["default"], _whiteboard["default"], _fileView["default"], _formula["default"]];
 var WikiPlugins = exports.WikiPlugins = [].concat(Plugins, [_wikiLink["default"], _fileView["default"]]);
 var CommentPlugins = exports.CommentPlugins = [_markdown["default"], _html["default"], _paragraph["default"], _textStyle["default"], _list["default"], _image["default"], _link["default"], _mention["default"], _blockquote["default"]];
 var _default = exports["default"] = Plugins;

package/dist/extension/plugins/link/hover/index.js

@@ -39,7 +39,7 @@ var LinkHover = function LinkHover(_ref) {
   var onMouseDown = (0, _react.useCallback)(function (event) {
     if (!(0, _isUrl["default"])(element.href)) {
       event.preventDefault();
-      _toast["default"].danger('The_link_is_invalid');
+      _toast["default"].danger(t('The_link_is_invalid'));
       return;
     }
     event.stopPropagation();

package/dist/extension/plugins/link/render-elem.js

@@ -12,6 +12,7 @@ var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/cal
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
 var _slate = require("@seafile/slate");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _isUrl = _interopRequireDefault(require("is-url"));
@@ -114,10 +115,12 @@ var Link = /*#__PURE__*/function (_React$Component) {
       (0, _helpers.unWrapLinkNode)(editor);
     });
     (0, _defineProperty2["default"])(_this, "onOpenLink", function (event) {
-      var element = _this.props.element;
+      var _this$props = _this.props,
+        element = _this$props.element,
+        t = _this$props.t;
       if (!(0, _isUrl["default"])(element.href)) {
         event.preventDefault();
-        _toast["default"].danger('The_link_is_invalid');
+        _toast["default"].danger(t('The_link_is_invalid'));
         return;
       }
       if (!(0, _helpers.isWeChat)()) {
@@ -154,12 +157,12 @@ var Link = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _element$children$2;
-      var _this$props = this.props,
-        attributes = _this$props.attributes,
-        children = _this$props.children,
-        element = _this$props.element,
-        editor = _this$props.editor,
-        readonly = _this$props.readonly;
+      var _this$props2 = this.props,
+        attributes = _this$props2.attributes,
+        children = _this$props2.children,
+        element = _this$props2.element,
+        editor = _this$props2.editor,
+        readonly = _this$props2.readonly;
       var _this$state = this.state,
         isShowLinkMenu = _this$state.isShowLinkMenu,
         menuPosition = _this$state.menuPosition;
@@ -195,8 +198,9 @@ var Link = /*#__PURE__*/function (_React$Component) {
   }]);
 }(_react["default"].Component);
 (0, _defineProperty2["default"])(Link, "contextType", _useScrollContext.ScrollContext);
+var SdocLink = (0, _reactI18next.withTranslation)('sdoc-editor')(Link);
 var renderLink = function renderLink(props, editor, readonly) {
-  return /*#__PURE__*/_react["default"].createElement(Link, Object.assign({}, props, {
+  return /*#__PURE__*/_react["default"].createElement(SdocLink, Object.assign({}, props, {
     editor: editor,
     readonly: readonly
   }));

package/dist/extension/render/custom-element.js

@@ -246,6 +246,12 @@ var CustomRenderElement = function CustomRenderElement(props) {
           renderFileView = _FileViewPlugin$rende[0];
         return renderFileView((0, _objectSpread2["default"])({}, props));
       }
+    case _elementType.FORMULA:
+      {
+        var _FormulaPlugin$render = (0, _slicedToArray2["default"])(_plugins.FormulaPlugin.renderElements, 1),
+          renderFormula = _FormulaPlugin$render[0];
+        return renderFormula((0, _objectSpread2["default"])({}, props), editor);
+      }
     default:
       {
         var _ParagraphPlugin$rend3 = (0, _slicedToArray2["default"])(_plugins.ParagraphPlugin.renderElements, 1),

package/dist/extension/toolbar/header-toolbar/insert-toolbar/index.js

@@ -15,12 +15,13 @@ var _tooltip = _interopRequireDefault(require("../../../../components/tooltip"))
 var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
 var _menu = _interopRequireDefault(require("../../../plugins/code-block/menu"));
 var _menu2 = _interopRequireDefault(require("../../../plugins/file-link/menu"));
-var _menu3 = _interopRequireDefault(require("../../../plugins/image/menu"));
-var _menu4 = _interopRequireDefault(require("../../../plugins/link/menu"));
-var _menu5 = _interopRequireDefault(require("../../../plugins/sdoc-link/menu"));
+var _menu3 = _interopRequireDefault(require("../../../plugins/formula/menu"));
+var _menu4 = _interopRequireDefault(require("../../../plugins/image/menu"));
+var _menu5 = _interopRequireDefault(require("../../../plugins/link/menu"));
+var _menu6 = _interopRequireDefault(require("../../../plugins/sdoc-link/menu"));
 var _tableMenu = _interopRequireDefault(require("../../../plugins/table/menu/table-menu"));
-var _menu6 = _interopRequireDefault(require("../../../plugins/video/menu"));
-var _menu7 = _interopRequireDefault(require("../../../plugins/whiteboard/menu"));
+var _menu7 = _interopRequireDefault(require("../../../plugins/video/menu"));
+var _menu8 = _interopRequireDefault(require("../../../plugins/whiteboard/menu"));
 require("./index.css");
 var InsertToolbar = function InsertToolbar(_ref) {
   var _ref$isRichEditor = _ref.isRichEditor,
@@ -102,8 +103,8 @@ var InsertToolbar = function InsertToolbar(_ref) {
     style: {
       maxHeight: window.innerHeight - bottom - 100
     }
-  }, /*#__PURE__*/_react["default"].createElement(_menu3["default"], props), /*#__PURE__*/_react["default"].createElement(_tableMenu["default"], props), /*#__PURE__*/_react["default"].createElement(_menu6["default"], props), /*#__PURE__*/_react["default"].createElement(_menu7["default"], props), /*#__PURE__*/_react["default"].createElement(_menu4["default"], props), /*#__PURE__*/_react["default"].createElement(_menu["default"], props), /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement(_menu4["default"], props), /*#__PURE__*/_react["default"].createElement(_tableMenu["default"], props), /*#__PURE__*/_react["default"].createElement(_menu7["default"], props), /*#__PURE__*/_react["default"].createElement(_menu8["default"], props), /*#__PURE__*/_react["default"].createElement(_menu5["default"], props), /*#__PURE__*/_react["default"].createElement(_menu["default"], props), /*#__PURE__*/_react["default"].createElement(_menu3["default"], props), /*#__PURE__*/_react["default"].createElement("div", {
     className: "sdoc-dropdown-menu-divider"
-  }), /*#__PURE__*/_react["default"].createElement(_menu5["default"], props), /*#__PURE__*/_react["default"].createElement(_menu2["default"], props))));
+  }), /*#__PURE__*/_react["default"].createElement(_menu6["default"], props), /*#__PURE__*/_react["default"].createElement(_menu2["default"], props))));
 };
 var _default = exports["default"] = InsertToolbar;

package/dist/extension/toolbar/insert-element-toolbar/index.js

@@ -70,6 +70,19 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editor, insertPosition]);
+  var onInsertFormula = (0, _react.useCallback)(function () {
+    callback && callback();
+    var eventBus = _eventBus["default"].getInstance();
+    if (insertPosition === _constants2.INSERT_POSITION.CURRENT) {
+      _slate.Transforms.select(editor, editor.selection.focus);
+    }
+    eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants2.FORMULA,
+      insertPosition: insertPosition,
+      slateNode: slateNode
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, insertPosition]);
   var onInsertVideoToggle = (0, _react.useCallback)(function () {
     callback && callback();
     var eventBus = _eventBus["default"].getInstance();
@@ -170,6 +183,16 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
     return !!callout;
   }, [editor]);
 
+  // Disable images in list elements
+  var isDisableFormula = (0, _react.useMemo)(function () {
+    var callout = (0, _core.getAboveBlockNode)(editor, {
+      match: function match(n) {
+        return [_constants2.ELEMENT_TYPE.ORDERED_LIST, _constants2.ELEMENT_TYPE.UNORDERED_LIST, _constants2.ELEMENT_TYPE.CHECK_LIST_ITEM, _constants2.ELEMENT_TYPE.BLOCKQUOTE, _constants2.ELEMENT_TYPE.CALL_OUT].includes(n.type);
+      }
+    });
+    return !!callout;
+  }, [editor]);
+
   // Disable images in list elements
   var isDisableImage = (0, _react.useMemo)(function () {
     var callout = (0, _core.getAboveBlockNode)(editor, {
@@ -321,7 +344,7 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
     }, t('Add_video_link')), editor.editorType !== _constants.WIKI_EDITOR && /*#__PURE__*/_react["default"].createElement("div", {
       className: "sdoc-dropdown-menu-item",
       onClick: openSelectVideoFileDialog
-    }, t('Link_video_file'))))))), {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _constants2.TABLE,
+    }, t('Link_video_file'))))))), {}, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _constants2.TABLE,
     /*#__PURE__*/
     // eslint-disable-next-line react/jsx-indent
     _react["default"].createElement(_dropdownMenuItem["default"], {
@@ -361,6 +384,12 @@ var QuickInsertBlockMenu = function QuickInsertBlockMenu(_ref) {
       onClick: function onClick() {
         return onInsertCallout(_constants2.PARAGRAPH);
       }
+    })), _constants2.FORMULA, /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {
+      isHidden: !quickInsertMenuSearchMap[_constants2.FORMULA],
+      disabled: isDisableFormula,
+      key: "sdoc-insert-menu-formula",
+      menuConfig: (0, _objectSpread6["default"])({}, _constants2.SIDE_INSERT_MENUS_CONFIG[_constants2.ELEMENT_TYPE.FORMULA]),
+      onClick: onInsertFormula
     })));
     if (_commonUtils.isMobile) {
       items = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _constants2.PARAGRAPH, /*#__PURE__*/_react["default"].createElement(_dropdownMenuItem["default"], {

package/dist/hooks/use-mathjax.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = require("react");
+var useMathJax = function useMathJax(mathJaxSource) {
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (!mathJaxSource) {
+      setIsLoading(false);
+      return;
+    }
+    window.MathJax = {
+      options: {
+        enableMenu: false
+      },
+      tex: {
+        inlineMath: [['$', '$']],
+        displayMath: [['$$', '$$']]
+      },
+      svg: {
+        fontCache: 'global'
+      }
+    };
+    if (!document.querySelector('#mathjax')) {
+      var script = document.createElement('script');
+      script.src = mathJaxSource;
+      script.id = 'mathjax';
+      document.body.appendChild(script);
+      script.onload = function () {
+        setIsLoading(false);
+      };
+    }
+    return function () {
+      var script = document.getElementById('mathjax');
+      script && script.parentNode.removeChild(script);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    isLoadingMathJax: isLoading
+  };
+};
+var _default = exports["default"] = useMathJax;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "3.0.76",
+  "version": "3.0.78",
   "main": "dist/index.js",
   "scripts": {
     "test": "jest",
@@ -17,7 +17,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@seafile/comment-editor": "~1.0.15",
+    "@seafile/comment-editor": "~1.0.16",
     "@seafile/print-js": "1.6.6",
     "@seafile/react-image-lightbox": "5.0.4",
     "@seafile/seafile-database": "0.0.19",
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "505f9405730c95e54e8b47fc131ad5a3bf959eeb"
+  "gitHead": "bbda01e681bef4b6ffc952f145768951ef6025cf"
 }