@seafile/sdoc-editor 1.0.27 → 1.0.29

package/dist/basic-sdk/comment/components/global-comment/index.js

@@ -1,5 +1,5 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import dayjs from 'dayjs';
 import EventBus from '../../../utils/event-bus';
 import useCommentList from '../../hooks/comment-hooks/use-comment-list';

package/dist/basic-sdk/comment/utils/index.js

@@ -31,7 +31,7 @@ export const searchCollaborators = (collaborators, searchValue) => {
 };
 
 // Mailto, file, tel, callto, sms, cid, xmpp, etc. are not support
-const ALLOWED_URL_REG = /((http|https):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])/g;
+// const ALLOWED_URL_REG = /((http|https):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])/g;
 // export const textToHtml = (text) => {
 //   if (!text) return '';
 //   return text.replace(ALLOWED_URL_REG, '<a href="$1" target="_blank" class=' + COMMENT_URL_CLASSNAME + '>$1</a>');

package/dist/basic-sdk/editor/comment-article.js

@@ -1,7 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useCallback, useMemo } from 'react';
 import { Editable, ReactEditor, Slate } from '@seafile/slate-react';
-import { Editor, Node, Range } from '@seafile/slate';
+import { Editor, Node } from '@seafile/slate';
 import isHotkey from 'is-hotkey';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { renderLeaf } from '../extension';

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

@@ -64,7 +64,7 @@ export const MENUS_CONFIG_MAP = {
   [CHECK_LIST_ITEM]: {
     id: CHECK_LIST_ITEM,
     iconClass: 'sdocfont sdoc-check-square',
-    text: 'Check_list_item'
+    text: 'Check_list'
   },
   [CODE_BLOCK]: {
     id: CODE_BLOCK,
@@ -255,7 +255,7 @@ export const SIDE_TRANSFORM_MENUS_CONFIG = [{
   id: CHECK_LIST_ITEM,
   iconClass: 'sdocfont sdoc-check-square',
   type: CHECK_LIST_ITEM,
-  text: 'Check_list_item'
+  text: 'Check_list'
 }, {
   id: BLOCKQUOTE,
   iconClass: 'sdocfont sdoc-quote1',
@@ -315,7 +315,7 @@ export const SIDE_INSERT_MENUS_CONFIG = {
     id: '',
     iconClass: 'sdocfont sdoc-check-square',
     type: CHECK_LIST_ITEM,
-    text: 'Check_list_item'
+    text: 'Check_list'
   },
   [PARAGRAPH]: {
     id: PARAGRAPH,

package/dist/basic-sdk/extension/core/queries/index.js

@@ -451,4 +451,11 @@ export const isCurrentLineEmpty = editor => {
 };
 export const isCurrentLineHasText = node => {
   return Node.string(node).trim() !== '';
+};
+export const isMultiLevelList = listNode => {
+  const {
+    children
+  } = listNode || {};
+  let isMultiLevel = (children === null || children === void 0 ? void 0 : children.find(item => (item === null || item === void 0 ? void 0 : item.children.length) > 1)) ? true : false;
+  return isMultiLevel;
 };

package/dist/basic-sdk/extension/core/utils/index.js

@@ -17,10 +17,10 @@ export const match = (node, path, predicate) => {
   }
   return predicate(node, path);
 };
-export const generateDefaultText = () => {
+export const generateDefaultText = text => {
   return {
     id: slugid.nice(),
-    text: ''
+    text: text || ''
   };
 };
 export const generateDefaultParagraph = () => {
@@ -32,11 +32,12 @@ export const generateDefaultParagraph = () => {
 };
 export const generateEmptyElement = function (type) {
   let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let text = arguments.length > 2 ? arguments[2] : undefined;
   return _objectSpread(_objectSpread({
     id: slugid.nice(),
     type
   }, props), {}, {
-    children: [generateDefaultText()]
+    children: [generateDefaultText(text)]
   });
 };
 export function Placeholder(props) {

package/dist/basic-sdk/extension/plugins/callout/helper.js

@@ -2,6 +2,7 @@ import { Editor, Node, Path, Transforms } from '@seafile/slate';
 import { CALL_OUT, PARAGRAPH } from '../../constants/element-type';
 import { focusEditor, generateEmptyElement, getSelectedElems, isRangeAcrossBlocks } from '../../core';
 import { CALLOUT_ALLOWED_INSIDE_TYPES, CALLOUT_COLOR_MAP } from './constant';
+import { DOCUMENT_PLUGIN_EDITOR } from '../../../constants';
 export const isMenuActive = editor => {
   const {
     selection
@@ -124,4 +125,20 @@ export const insertElementAtNewLineInCallout = (editor, type, currentPath) => {
     at: insertPath
   });
   Transforms.select(editor, insertPath);
+};
+export const getCalloutMenuPosition = (element, editor) => {
+  const {
+    top,
+    left
+  } = element.getBoundingClientRect();
+  const menuTop = top - 42; // top = top distance - menu height
+  const newMenuPosition = {
+    top: menuTop,
+    left: left // left = callout left distance
+  };
+  // 165 is distance with browser top
+  if (editor.editorType === DOCUMENT_PLUGIN_EDITOR && menuTop < 165) {
+    newMenuPosition['display'] = 'none';
+  }
+  return newMenuPosition;
 };

package/dist/basic-sdk/extension/plugins/callout/plugin.js

@@ -17,8 +17,7 @@ const withCallout = editor => {
     insertFragment,
     deleteBackward,
     onHotKeyDown,
-    insertData,
-    onCopy
+    insertData
   } = editor;
   const newEditor = editor;
   newEditor.deleteBackward = unit => {

package/dist/basic-sdk/extension/plugins/callout/render-elem/index.js

@@ -7,6 +7,7 @@ import { CALLOUT_COLOR_MAP, CALLOUT_ICON_MAP } from '../constant';
 import { INTERNAL_EVENT } from '../../../../constants';
 import EventBus from '../../../../utils/event-bus';
 import { useScrollContext } from '../../../../hooks/use-scroll-context';
+import { getCalloutMenuPosition } from '../helper';
 import CalloutHoverMenu from './callout-hover-menu';
 import './index.css';
 const renderCallout = (_ref, editor) => {
@@ -63,22 +64,10 @@ const renderCallout = (_ref, editor) => {
     if (readOnly) return;
     if (!isShowColorSelector) return;
     if (e.currentTarget.scrollTop) {
-      const {
-        top,
-        left
-      } = calloutRef.current.getBoundingClientRect();
-      const menuTop = top - 36; // top = top distance - menu height
-      const newMenuPosition = {
-        top: menuTop,
-        left: left // left = code-block left distance
-      };
-      // 165 is distance with browser top
-      if (menuTop < 165) {
-        newMenuPosition['display'] = 'none';
-      }
-      setPopoverPosition(newMenuPosition);
+      const menuPosition = getCalloutMenuPosition(calloutRef.current, editor);
+      setPopoverPosition(menuPosition);
     }
-  }, [isShowColorSelector, readOnly]);
+  }, [editor, isShowColorSelector, readOnly]);
   useEffect(() => {
     const eventBus = EventBus.getInstance();
     const unsubscribe = eventBus.subscribe(INTERNAL_EVENT.CLOSE_CALLOUT_COLOR_PICKER, handleCloseColorSelector);
@@ -102,22 +91,10 @@ const renderCallout = (_ref, editor) => {
   }, [isSelected]);
   const handleDisplayColorSelector = useCallback(() => {
     if (readOnly) return;
-    const {
-      top,
-      left
-    } = calloutRef.current.getBoundingClientRect();
-    const menuTop = top - 42; // top = top distance - menu height
-    const newMenuPosition = {
-      top: menuTop,
-      left: left // left = callout left distance
-    };
-    // 165 is distance with browser top
-    if (menuTop < 165) {
-      newMenuPosition['display'] = 'none';
-    }
-    setPopoverPosition(newMenuPosition);
+    const menuPosition = getCalloutMenuPosition(calloutRef.current, editor);
+    setPopoverPosition(menuPosition);
     setIsShowColorSelector(true);
-  }, [readOnly]);
+  }, [editor, readOnly]);
   const handleClick = useCallback(e => {
     handleDisplayColorSelector();
   }, [handleDisplayColorSelector]);

package/dist/basic-sdk/extension/plugins/check-list/helpers.js

@@ -1,6 +1,6 @@
-import { Transforms, Editor, Element } from '@seafile/slate';
-import { CHECK_LIST_ITEM, PARAGRAPH, ELEMENT_TYPE, INSERT_POSITION } from '../../constants';
-import { getSelectedNodeByType, generateEmptyElement } from '../../core';
+import { Transforms, Editor, Element, Node } from '@seafile/slate';
+import { CHECK_LIST_ITEM, PARAGRAPH, ELEMENT_TYPE, INSERT_POSITION, ORDERED_LIST, UNORDERED_LIST } from '../../constants';
+import { getSelectedNodeByType, generateEmptyElement, isMultiLevelList } from '../../core';
 export const isMenuDisabled = (editor, readonly) => {
   if (readonly) return true;
   if (editor.selection == null) return true;
@@ -19,7 +19,7 @@ export const isMenuDisabled = (editor, readonly) => {
     } = element;
     if (type === ELEMENT_TYPE.CODE_LINE) return true;
     if (type === ELEMENT_TYPE.CODE_BLOCK) return true;
-    if (type === ELEMENT_TYPE.LIST_ITEM) return true;
+    if ([ORDERED_LIST, UNORDERED_LIST].includes(type) && isMultiLevelList(element)) return true;
     if (type === ELEMENT_TYPE.TABLE) return true;
     if (type === ELEMENT_TYPE.TABLE_ROW) return true;
     if (type === ELEMENT_TYPE.TABLE_CELL) return true;
@@ -33,6 +33,27 @@ export const getCheckListItemType = editor => {
   if (!node) return PARAGRAPH;
   return node.type;
 };
+export const convertToCheck = (editor, listNode, listPath) => {
+  const checkList = [];
+  const {
+    children
+  } = listNode || {};
+  children.forEach(item => {
+    const text = Node.string(item);
+    const checkNode = generateEmptyElement(CHECK_LIST_ITEM, {}, text);
+    checkList.push(checkNode);
+  });
+  Transforms.removeNodes(editor, {
+    at: [listPath[0]]
+  });
+  Transforms.insertNodes(editor, checkList, {
+    at: [listPath[0]]
+  });
+  Transforms.select(editor, {
+    path: [listPath[0], 0],
+    offset: 0
+  });
+};
 export const setCheckListItemType = (editor, newType, insertPosition) => {
   if (insertPosition === INSERT_POSITION.AFTER) {
     const p = generateEmptyElement(PARAGRAPH);
@@ -42,6 +63,14 @@ export const setCheckListItemType = (editor, newType, insertPosition) => {
     });
     Transforms.select(editor, [path[0] + 1]);
   }
+  const path = Editor.path(editor, editor.selection);
+  if (path) {
+    const [targetNode, targetPath] = Editor.node(editor, [path[0]]);
+    if (targetNode && [ORDERED_LIST, UNORDERED_LIST].includes(targetNode === null || targetNode === void 0 ? void 0 : targetNode.type)) {
+      convertToCheck(editor, targetNode, targetPath);
+      return;
+    }
+  }
   Transforms.setNodes(editor, {
     type: newType
   });

package/dist/basic-sdk/extension/plugins/code-block/hover-menu/index.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Input } from 'reactstrap';
 import { useTranslation, withTranslation } from 'react-i18next';
 import Tooltip from '../../../../../components/tooltip';

package/dist/basic-sdk/extension/plugins/link/helpers.js

@@ -183,4 +183,20 @@ export const isWeChat = () => {
   let isWeChat = ua.match(/MicroMessenger/i) === 'micromessenger';
   let isEnterpriseWeChat = ua.match(/MicroMessenger/i) === 'micromessenger' && ua.match(/wxwork/i) === 'wxwork';
   return isEnterpriseWeChat || isWeChat;
+};
+export const getMenuPosition = element => {
+  if (!element) return {};
+  const {
+    top,
+    left,
+    width
+  } = element.getBoundingClientRect();
+  // top = top distance - menu height
+  const menuTop = top - 42;
+  // left = left distance - (menu width / 2) + (link with / 2)
+  const menuLeft = left - 140 / 2 + width / 2;
+  return {
+    top: menuTop,
+    left: menuLeft
+  };
 };

package/dist/basic-sdk/{assets/css/textlink-hovermenu.css → extension/plugins/link/hover/index.css}

@@ -7,7 +7,7 @@
   border: 1px solid #e5e5e5;
   border-radius: 3px;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
-  z-index: 1000;
+  z-index: 101;
 }
 
 .link-op-menu .link-op-menu-triangle {

package/dist/basic-sdk/extension/plugins/link/hover/index.js

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import { useReadOnly } from '@seafile/slate-react';
 import { isWeChat } from '../helpers';
-import '../../../../assets/css/textlink-hovermenu.css';
+import './index.css';
 const LinkHover = _ref => {
   let {
     editor,

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

@@ -1,20 +1,33 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React from 'react';
 import { Range } from '@seafile/slate';
-import { unWrapLinkNode } from './helpers';
+import { getMenuPosition, unWrapLinkNode } from './helpers';
 import LinkHover from './hover';
 import EventBus from '../../../utils/event-bus';
-import { INTERNAL_EVENT } from '../../../constants';
+import { DOCUMENT_PLUGIN_EDITOR, INTERNAL_EVENT } from '../../../constants';
 import { ELEMENT_TYPE } from '../../constants';
 import InlineBugFixer from '../../commons/Inline-bug-fix-wrapper';
-class LinkHoverMenuComponent extends React.Component {
+import { ScrollContext } from '../../../hooks/use-scroll-context';
+class Link extends React.Component {
   constructor(props) {
     super(props);
     _defineProperty(this, "registerEventHandle", () => {
       document.addEventListener('click', this.onHideLinkMenu);
+      const {
+        scrollRef
+      } = this.context;
+      if (scrollRef.current) {
+        scrollRef.current.addEventListener('scroll', this.onScroll);
+      }
     });
     _defineProperty(this, "unregisterEventHandle", () => {
       document.removeEventListener('click', this.onHideLinkMenu);
+      const {
+        scrollRef
+      } = this.context;
+      if (scrollRef.current) {
+        scrollRef.current.addEventListener('scroll', this.onScroll);
+      }
     });
     _defineProperty(this, "onHideLinkMenu", () => {
       this.setState({
@@ -23,22 +36,25 @@ class LinkHoverMenuComponent extends React.Component {
         this.unregisterEventHandle();
       });
     });
-    _defineProperty(this, "onLinkClick", e => {
+    _defineProperty(this, "onScroll", e => {
+      this.setPosition(this.linkRef);
+    });
+    _defineProperty(this, "setPosition", element => {
       const {
-        top,
-        left,
-        width
-      } = e.target.getBoundingClientRect();
-      // top = top distance - menu height
-      const menuTop = top - 42;
-      // left = left distance - (menu width / 2) + (link with / 2)
-      const menuLeft = left - 140 / 2 + width / 2;
+        editor
+      } = this.props;
+      const menuPosition = getMenuPosition(element);
+      if (editor.editorType === DOCUMENT_PLUGIN_EDITOR && menuPosition.top < 165) {
+        menuPosition['display'] = 'none';
+      }
       this.setState({
-        isShowLinkMenu: true,
-        menuPosition: {
-          top: menuTop,
-          left: menuLeft
-        }
+        menuPosition
+      });
+    });
+    _defineProperty(this, "onLinkClick", e => {
+      this.setPosition(e.target);
+      this.setState({
+        isShowLinkMenu: true
       });
       setTimeout(() => {
         this.registerEventHandle();
@@ -59,6 +75,9 @@ class LinkHoverMenuComponent extends React.Component {
         element
       });
     });
+    _defineProperty(this, "setRef", ref => {
+      this.linkRef = ref;
+    });
     this.state = {
       isShowLinkMenu: false,
       menuPosition: null
@@ -94,6 +113,7 @@ class LinkHoverMenuComponent extends React.Component {
     }, attributes, {
       onClick: this.onLinkClick
     }), /*#__PURE__*/React.createElement("span", {
+      ref: this.setRef,
       className: "virtual-link",
       title: element.title
     }, /*#__PURE__*/React.createElement(InlineBugFixer, null), children, /*#__PURE__*/React.createElement(InlineBugFixer, null))), isShowLinkMenu && (this.props.readonly || Range.isCollapsed(editor.selection)) && /*#__PURE__*/React.createElement(LinkHover, {
@@ -105,8 +125,9 @@ class LinkHoverMenuComponent extends React.Component {
     }));
   }
 }
+_defineProperty(Link, "contextType", ScrollContext);
 const renderLink = (props, editor, readonly) => {
-  return /*#__PURE__*/React.createElement(LinkHoverMenuComponent, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(Link, Object.assign({}, props, {
     editor: editor,
     readonly: readonly
   }));

package/dist/basic-sdk/extension/plugins/list/plugin/shortcut.js

@@ -1,5 +1,5 @@
 import { Editor, Path, Range, Transforms } from '@seafile/slate';
-import { INSERT_POSITION, ORDERED_LIST, PARAGRAPH } from '../../../constants';
+import { ORDERED_LIST, PARAGRAPH } from '../../../constants';
 import { getBeforeText, setListType } from '../helpers';
 import { focusEditor, getLastChild, getPreviousPath } from '../../../core';
 import { generateEmptyListItem } from '../model';

package/dist/basic-sdk/extension/plugins/mention/render-elem/participant-popover.js

@@ -136,7 +136,7 @@ const ParticipantPopover = _ref => {
     setActiveCollaboratorIndex(nextActiveCollaboratorIndex);
   }, [searchedCollaborators, activeCollaboratorIndex]);
   const onSelectCollaborator = useCallback(collaborator => {
-    const [node, path] = getMentionTempIptEntry(editor);
+    const [, path] = getMentionTempIptEntry(editor);
     insertMention(editor, collaborator);
     addParticipants(collaborator.username);
     Transforms.removeNodes(editor, {

package/dist/basic-sdk/extension/plugins/table/menu/vertical-align-popover/style.css

@@ -15,7 +15,6 @@
 .sdoc-table-alignment-menu .sdoc-dropdown-menu-item .sdoc-check-mark {
     display: none;
     font-size: 16px !important;
-    color: #6f59ff;
 }
 .sdoc-table-alignment-menu .sdoc-dropdown-menu-item .sdoc-check-mark.active {
     display: inline;

package/dist/basic-sdk/extension/toolbar/side-toolbar/helpers.js

@@ -3,12 +3,13 @@ import slugid from 'slugid';
 import { ReactEditor } from '@seafile/slate-react';
 import copy from 'copy-to-clipboard';
 import { toggleList } from '../../plugins/list/transforms';
-import { generateEmptyElement } from '../../core';
+import { generateEmptyElement, findPath, isMultiLevelList } from '../../core';
 import { generateEmptyList } from '../../plugins/list/model';
 import { setClipboardCodeBlockData } from '../../plugins/code-block/helpers';
 import { ORDERED_LIST, UNORDERED_LIST, PARAGRAPH, CHECK_LIST_ITEM, IMAGE, TABLE, CODE_BLOCK, BLOCKQUOTE, LIST_ITEM_CORRELATION_TYPE, ADD_POSITION_OFFSET_TYPE, INSERT_POSITION, ELEMENT_TYPE, CALL_OUT } from '../../constants';
 import { EMPTY_SELECTED_RANGE } from '../../plugins/table/constants';
 import { unwrapCallout, wrapCallout } from '../../plugins/callout/helper';
+import { convertToCheck } from '../../plugins/check-list/helpers';
 import { getHeaderHeight } from '../../../utils/dom-utils';
 export const onSetNodeType = (editor, element, type) => {
   if (!type) return;
@@ -21,6 +22,12 @@ export const onSetNodeType = (editor, element, type) => {
     return;
   }
   if (type === CHECK_LIST_ITEM) {
+    const path = findPath(editor, element);
+    const [targetNode, targetPath] = Editor.node(editor, [path[0]]) || [];
+    if (targetNode && [ORDERED_LIST, UNORDERED_LIST].includes(targetNode === null || targetNode === void 0 ? void 0 : targetNode.type) && !isMultiLevelList(targetNode)) {
+      convertToCheck(editor, targetNode, targetPath);
+      return;
+    }
     const newType = element.type === CHECK_LIST_ITEM ? PARAGRAPH : CHECK_LIST_ITEM;
     Transforms.setNodes(editor, {
       type: newType

package/dist/basic-sdk/extension/toolbar/side-toolbar/transform-menus.js

@@ -3,8 +3,9 @@ import { UncontrolledPopover } from 'reactstrap';
 import { withTranslation } from 'react-i18next';
 import { ReactEditor, useSlateStatic } from '@seafile/slate-react';
 import { onSetNodeType } from './helpers';
-import { SIDE_TRANSFORM_MENUS_CONFIG, LIST_ITEM_SUPPORTED_TRANSFORMATION, LIST_ITEM_CORRELATION_TYPE, BLOCKQUOTE, CALL_OUT, HEADERS } from '../../constants';
+import { SIDE_TRANSFORM_MENUS_CONFIG, LIST_ITEM_SUPPORTED_TRANSFORMATION, LIST_ITEM_CORRELATION_TYPE, BLOCKQUOTE, CALL_OUT, HEADERS, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST_ITEM } from '../../constants';
 import DropdownMenuItem from '../../commons/dropdown-menu-item';
+import { isMultiLevelList } from '../../core';
 const TransformMenus = _ref => {
   let {
     target,
@@ -37,6 +38,11 @@ const TransformMenus = _ref => {
       if (HEADERS.includes(highestNode.type)) {
         newSideMenusConfig = SIDE_TRANSFORM_MENUS_CONFIG.filter(item => item.type !== BLOCKQUOTE);
       }
+
+      // Multi-level list items cannot be converted to checks
+      if ([ORDERED_LIST, UNORDERED_LIST].includes(highestNode.type) && isMultiLevelList(highestNode)) {
+        newSideMenusConfig = SIDE_TRANSFORM_MENUS_CONFIG.filter(item => item.type !== CHECK_LIST_ITEM);
+      }
     }
     return newSideMenusConfig;
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "1.0.27",
+  "version": "1.0.29",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",

package/public/locales/en/sdoc-editor.json

@@ -16,7 +16,7 @@
   "Quote": "Quote",
   "Ordered_list": "Ordered list",
   "Unordered_list": "Unordered list",
-  "Check_list_item": "Check list item",
+  "Check_list": "Check list",
   "Insert_image": "Insert image",
   "Insert_formula": "Insert formula",
   "Formula": "Formula",

package/public/locales/ru/sdoc-editor.json

@@ -16,7 +16,7 @@
   "Quote": "Цитата",
   "Ordered_list": "Нумерованный список",
   "Unordered_list": "Маркированный список",
-  "Check_list": "Check list",
+  "Check_list": "Контрольный список",
   "Insert_image": "Вставить изображение",
   "Insert_formula": "Вставить формулу",
   "Formula": "Формула",