@seafile/sdoc-editor 0.3.13 → 0.3.15

package/dist/basic-sdk/constants/index.js

@@ -13,7 +13,7 @@ export const INTERNAL_EVENT = {
   UPDATE_TAG_VIEW: 'update_tag_view',
   COMMENT_LIST_CLICK: 'comment_list_click',
   UNSEEN_NOTIFICATIONS_COUNT: 'unseen_notifications_count',
-  DISPLAY_CALLOUT_COLOR_PICKER: 'display_callout_color_picker'
+  CLOSE_CALLOUT_COLOR_PICKER: 'close_callout_color_picker'
 };
 export const REVISION_DIFF_KEY = 'diff';
 export const REVISION_DIFF_VALUE = '1';

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

@@ -1,4 +1,4 @@
-import { Editor, Path, Transforms } from '@seafile/slate';
+import { Editor, Node, Path, Transforms } from '@seafile/slate';
 import { CALL_OUT } from '../../constants/element-type';
 import { findPath, focusEditor, generateEmptyElement, getSelectedElems, isRangeAcrossBlocks } from '../../core';
 import { CALLOUT_ALLOWED_INSIDE_TYPES, CALLOUT_COLOR_MAP } from './constant';
@@ -100,10 +100,10 @@ export const isFocusOnElement = (editor, element) => {
   const isSelectOnElement = Path.isAncestor(elementPath, editor === null || editor === void 0 ? void 0 : (_editor$selection = editor.selection) === null || _editor$selection === void 0 ? void 0 : (_editor$selection$anc = _editor$selection.anchor) === null || _editor$selection$anc === void 0 ? void 0 : _editor$selection$anc.path);
   return isSelectOnElement;
 };
-export const isCalloutContentEmpty = (editor, calloutEntry) => {
-  const [, calloutPath] = calloutEntry;
-  const contentString = Editor.string(editor, calloutPath);
-  return contentString.length === 0;
+export const isCalloutContentEmpty = calloutEntry => {
+  const [calloutNode] = calloutEntry;
+  const contentString = Node.string(calloutNode);
+  return calloutNode.children.length === 1 && contentString.length === 0;
 };
 
 // Insert a new element at new line in callout after current path

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

@@ -1,5 +1,5 @@
 import isHotkey from 'is-hotkey';
-import { PARAGRAPH, INSERT_POSITION } from '../../constants';
+import { PARAGRAPH, INSERT_POSITION, CODE_BLOCK } from '../../constants';
 import { isSelectionAtBlockStart } from '../../core';
 import { getCalloutEntry, isCalloutContentEmpty, unwrapCallout } from './helper';
 import { insertElement } from '../../toolbar/side-toolbar/helpers';
@@ -15,39 +15,50 @@ const withCallout = editor => {
   const {
     insertFragment,
     deleteBackward,
-    onHotKeyDown
+    onHotKeyDown,
+    insertData
   } = editor;
   const newEditor = editor;
   newEditor.deleteBackward = unit => {
     const calloutEntry = getCalloutEntry(editor);
     if (calloutEntry) {
-      if (isSelectionAtBlockStart(editor) && isCalloutContentEmpty(editor, calloutEntry)) return;
+      if (isSelectionAtBlockStart(editor) && isCalloutContentEmpty(calloutEntry)) {
+        unwrapCallout(editor);
+        return;
+      }
     }
     return deleteBackward(unit);
   };
+  newEditor.insertData = data => {
+    if (getCalloutEntry(newEditor)) {
+      if (data.types.includes('text/code-block')) {
+        const eventBus = EventBus.getInstance();
+        eventBus.dispatch(INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, CODE_BLOCK);
+        return;
+      }
+    }
+    return insertData(data);
+  };
   newEditor.insertFragment = data => {
-    var _data$find;
-    const eventBus = EventBus.getInstance();
-    const unsupportType = (_data$find = data.find(node => !CALLOUT_ALLOWED_INSIDE_TYPES.includes(node.type))) === null || _data$find === void 0 ? void 0 : _data$find.type;
-    if (unsupportType) {
-      eventBus.dispatch(INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, unsupportType);
-      return;
+    if (getCalloutEntry(editor)) {
+      var _data$find;
+      const eventBus = EventBus.getInstance();
+      const unsupportType = (_data$find = data.find(node => !CALLOUT_ALLOWED_INSIDE_TYPES.includes(node.type))) === null || _data$find === void 0 ? void 0 : _data$find.type;
+      if (unsupportType) {
+        eventBus.dispatch(INTERNAL_EVENT.DISPLAY_CALLOUT_UNSUPPORT_ALERT, unsupportType);
+        return;
+      }
     }
     return insertFragment(data);
   };
   newEditor.onHotKeyDown = event => {
-    if (isHotkey('mod+enter', event)) {
-      insertElement(newEditor, PARAGRAPH, INSERT_POSITION.AFTER);
-      return true;
-    }
-    if (isHotkey('enter', event)) {
-      const calloutEntry = getCalloutEntry(editor);
-      if (calloutEntry) {
-        if (isCalloutContentEmpty(editor, calloutEntry)) {
-          unwrapCallout(editor);
-          event.preventDefault();
-          return true;
-        }
+    if (getCalloutEntry(editor)) {
+      // Close color picker
+      const eventBus = EventBus.getInstance();
+      eventBus.dispatch(INTERNAL_EVENT.CLOSE_CALLOUT_COLOR_PICKER);
+      if (isHotkey('mod+enter', event)) {
+        insertElement(newEditor, PARAGRAPH, INSERT_POSITION.AFTER);
+        return true;
       }
     }
     return onHotKeyDown && onHotKeyDown(event);

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

@@ -3,11 +3,13 @@ import { Transforms } from '@seafile/slate';
 import { CALLOUT_COLOR_MAP } from '../constant';
 import { findPath } from '../../../core';
 import { changeFillBackgroundColor } from '../helper';
+import { ElementPopover } from '../../../commons';
 import './index.css';
 const ColorSelector = (_ref, ref) => {
   let {
     editor,
-    element
+    element,
+    popoverPosition
   } = _ref;
   const selectorRef = useRef(null);
   const handleClickColor = useCallback((editor, element, background_color) => {
@@ -24,10 +26,14 @@ const ColorSelector = (_ref, ref) => {
     } = element.style;
     return background_color && background_color === currentBackgroundColor;
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: selectorRef,
+  return /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
     className: "sdoc-callout-color-selector-container",
-    contentEditable: false
+    ref: selectorRef,
+    contentEditable: false,
+    style: {
+      top: popoverPosition.top,
+      left: popoverPosition.left
+    }
   }, /*#__PURE__*/React.createElement("ul", {
     className: "sdoc-color-selector-list"
   }, Object.values(CALLOUT_COLOR_MAP).map((_ref2, index) => {
@@ -46,6 +52,6 @@ const ColorSelector = (_ref, ref) => {
     }, isShowCheckedIcon(element, background_color) && /*#__PURE__*/React.createElement("i", {
       className: "sdoc-callout-color-checked-icon sdocfont sdoc-check-mark"
     }));
-  })));
+  }))));
 };
 export default forwardRef(ColorSelector);

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

@@ -21,12 +21,10 @@
 .sdoc-callout-color-selector-container {
   position: absolute;
   padding: 10px;
-  top: -39px;
-  left: 5px;
   background-color: #fff;
-  box-shadow: -2px 0px 8px 2px #d0cfcf;
   border: 1px solid #eee;
   border-radius: 3px;
+  z-index: 100;
 }
 
 .sdoc-callout-color-selector-container .sdoc-color-selector-list {

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

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useReadOnly } from '@seafile/slate-react';
 import { useTranslation } from 'react-i18next';
 import ColorSelector from './color-selector';
 import { CALLOUT_COLOR_MAP } from '../constant';
@@ -8,6 +9,7 @@ import { Editor } from '@seafile/slate';
 import { findPath } from '../../../core';
 import { INTERNAL_EVENT } from '../../../../constants';
 import EventBus from '../../../../utils/event-bus';
+import { useScrollContext } from '../../../../hooks/use-scroll-context';
 import './index.css';
 const renderCallout = (_ref, editor) => {
   let {
@@ -16,8 +18,13 @@ const renderCallout = (_ref, editor) => {
     element
   } = _ref;
   const [isShowColorSelector, setIsShowColorSelector] = useState(false);
-  const [isSelecting, setIsSelecting] = useState(false);
-  const calloutRef = useRef(null);
+  const [popoverPosition, setPopoverPosition] = useState({
+    top: '',
+    left: ''
+  });
+  const readOnly = useReadOnly();
+  const scrollRef = useScrollContext();
+  const calloutRef = useRef();
   const colorSelectorRef = useRef({
     colorSelectorContainer: null
   });
@@ -28,25 +35,60 @@ const renderCallout = (_ref, editor) => {
     background_color
   } = element.style;
   const isFocusOnCallout = isFocusOnElement(editor, element);
-  const handleMouseEnter = useCallback(id => {
-    const isMoveInCurrentCallout = id === element.id;
-    isMoveInCurrentCallout && !isSelecting && setIsShowColorSelector(true);
-  }, [element.id, isSelecting]);
+  const handleCloseColorSelector = useCallback(() => {
+    setIsShowColorSelector(false);
+  }, []);
+  const handleScroll = useCallback(e => {
+    if (readOnly) return;
+    if (!isShowColorSelector) return;
+    if (e.currentTarget.scrollTop) {
+      const {
+        top,
+        left
+      } = calloutRef.current.getBoundingClientRect();
+      const menuTop = top - 42; // top = top distance - menu height
+      const newMenuPosition = {
+        top: menuTop,
+        left: left // left = code-block left distance
+      };
+
+      setPopoverPosition(newMenuPosition);
+    }
+  }, [isShowColorSelector, readOnly]);
   useEffect(() => {
     const eventBus = EventBus.getInstance();
-    const unsubscribe = eventBus.subscribe(INTERNAL_EVENT.DISPLAY_CALLOUT_COLOR_PICKER, handleMouseEnter);
+    const unsubscribe = eventBus.subscribe(INTERNAL_EVENT.CLOSE_CALLOUT_COLOR_PICKER, handleCloseColorSelector);
     return unsubscribe;
-  }, [handleMouseEnter]);
-  const handleMouseLeave = useCallback(e => {
-    setIsShowColorSelector(false);
-    setIsSelecting(false);
-  }, []);
+  }, [handleCloseColorSelector]);
+  useEffect(() => {
+    if (readOnly) return;
+    let observerRefValue = null;
+    if (scrollRef.current) {
+      scrollRef.current.addEventListener('scroll', handleScroll);
+      observerRefValue = scrollRef.current;
+    }
+    return () => {
+      observerRefValue.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll, readOnly, scrollRef]);
+  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
+    };
+
+    setPopoverPosition(newMenuPosition);
+    setIsShowColorSelector(true);
+  }, [readOnly]);
   const handleClick = useCallback(e => {
-    var _colorSelectorRef$cur, _colorSelectorRef$cur2;
-    setIsSelecting(true);
-    const isClickInColorSelector = (_colorSelectorRef$cur = colorSelectorRef.current) === null || _colorSelectorRef$cur === void 0 ? void 0 : (_colorSelectorRef$cur2 = _colorSelectorRef$cur.colorSelectorContainer) === null || _colorSelectorRef$cur2 === void 0 ? void 0 : _colorSelectorRef$cur2.contains(e.target);
-    !isClickInColorSelector && setIsShowColorSelector(false);
-  }, []);
+    handleDisplayColorSelector();
+  }, [handleDisplayColorSelector]);
   const isShowPlaceholder = useCallback(() => {
     if (isFocusOnCallout) return false;
     // If element contains more than one element or element is not paragraph, show placeholder
@@ -56,27 +98,27 @@ const renderCallout = (_ref, editor) => {
     const elementContent = Editor.string(editor, elementPath);
     return !elementContent.length;
   }, [editor, element, isFocusOnCallout]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-callout-white-wrapper"
-  }, /*#__PURE__*/React.createElement("div", Object.assign({
+  return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
     "data-id": element.id,
     "data-root": "true",
-    onMouseLeave: handleMouseLeave,
+    className: "sdoc-callout-white-wrapper",
+    onMouseLeave: handleCloseColorSelector
+  }), /*#__PURE__*/React.createElement("div", {
     onClick: handleClick,
     ref: calloutRef,
+    className: "".concat(attributes.className, " sdoc-callout-container"),
     style: {
       backgroundColor: background_color ? CALLOUT_COLOR_MAP[background_color].background_color : 'transparent',
       borderColor: isFocusOnCallout ? CALLOUT_COLOR_MAP[background_color].border_color : 'transparent'
     }
-  }, attributes, {
-    className: "".concat(attributes.className, " sdoc-callout-container")
-  }), children, isShowPlaceholder() && /*#__PURE__*/React.createElement("div", {
+  }, children, isShowPlaceholder() && /*#__PURE__*/React.createElement("div", {
     contentEditable: false,
     className: "sdoc-callout-placeholder"
   }, t('Please_enter...')), isShowColorSelector && /*#__PURE__*/React.createElement(ColorSelector, {
     ref: colorSelectorRef,
     editor: editor,
-    element: element
+    element: element,
+    popoverPosition: popoverPosition
   })));
 };
 export default renderCallout;

package/dist/basic-sdk/extension/plugins/table/popover/table-size-popover/index.js

@@ -18,9 +18,6 @@ const TableSizePopover = _ref => {
   const [displaySize, setDisplaySize] = useState([5, 10]);
   const [selectedSize, setSelectedSize] = useState([1, 1]);
   const ref = useRef(null);
-  const {
-    t
-  } = useTranslation();
   const onMouseEnter = useCallback(function (event) {
     let cellPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [1, 1];
     let newDisplaySize = displaySize.slice(0);

package/dist/basic-sdk/extension/render/helper.js

@@ -1,8 +1,6 @@
 import { Editor } from '@seafile/slate';
 import { findPath } from '../core';
-import { CALL_OUT, MOUSE_ENTER_EVENT_DISABLED_MAP } from '../constants';
-import { INTERNAL_EVENT } from '../../constants';
-import EventBus from '../../utils/event-bus';
+import { MOUSE_ENTER_EVENT_DISABLED_MAP } from '../constants';
 import { onMouseEnter } from '../toolbar/side-toolbar/event';
 const isNeedAddMouseEnterEvent = (editor, element) => {
   const elementPath = findPath(editor, element);
@@ -20,18 +18,4 @@ const isNeedAddMouseEnterEvent = (editor, element) => {
 export const setMouseEnter = (editor, element, attributes) => {
   if (!isNeedAddMouseEnterEvent(editor, element)) return;
   attributes['onMouseEnter'] = e => onMouseEnter(e, element);
-};
-
-// Element extra event
-export const handleElementMouseEnterEvent = element => {
-  const {
-    id,
-    type
-  } = element;
-  const eventBus = EventBus.getInstance();
-  const elementEventMap = {
-    [CALL_OUT]: eventBus.dispatch(INTERNAL_EVENT.DISPLAY_CALLOUT_COLOR_PICKER, id)
-  };
-  const event = elementEventMap[type];
-  event && event();
 };

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

@@ -1,13 +1,9 @@
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../constants';
-import { CALL_OUT } from '../../constants';
-import { handleElementMouseEnterEvent } from '../../render/helper';
 export const onMouseEnter = (event, element) => {
   event.stopPropagation();
   const eventBus = EventBus.getInstance();
   eventBus.dispatch(INTERNAL_EVENT.ON_MOUSE_ENTER_BLOCK, event);
-  element.type === CALL_OUT && eventBus.dispatch(INTERNAL_EVENT.DISPLAY_CALLOUT_COLOR_PICKER);
-  handleElementMouseEnterEvent(element);
 };
 export const onDragOver = event => {
   event.stopPropagation();

package/package.json

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

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

@@ -414,5 +414,8 @@
   "New": "Nový",
   "Table_template": "Table template",
   "Jump_to_original_doc": "Jump to the original document",
-  "Freezed": "Freezed"
+  "Freezed": "Freezed",
+  "Callout": "Callout",
+  "The_current_location_does_not_support_pasting": "The current location does not support pasting ",
+  "Please_enter...": "Please enter..."
 }

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

@@ -414,5 +414,8 @@
   "New": "Erstellen",
   "Table_template": "Table template",
   "Jump_to_original_doc": "Jump to the original document",
-  "Freezed": "Freezed"
+  "Freezed": "Freezed",
+  "Callout": "Callout",
+  "The_current_location_does_not_support_pasting": "The current location does not support pasting ",
+  "Please_enter...": "Please enter..."
 }

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

@@ -414,5 +414,8 @@
   "New": "Nuevo",
   "Table_template": "Table template",
   "Jump_to_original_doc": "Jump to the original document",
-  "Freezed": "Freezed"
+  "Freezed": "Freezed",
+  "Callout": "Callout",
+  "The_current_location_does_not_support_pasting": "The current location does not support pasting ",
+  "Please_enter...": "Please enter..."
 }

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

@@ -414,5 +414,8 @@
   "New": "Créer",
   "Table_template": "Table template",
   "Jump_to_original_doc": "Jump to the original document",
-  "Freezed": "Freezed"
+  "Freezed": "Freezed",
+  "Callout": "Callout",
+  "The_current_location_does_not_support_pasting": "The current location does not support pasting ",
+  "Please_enter...": "Please enter..."
 }

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

@@ -414,5 +414,8 @@
   "New": "Nuovo",
   "Table_template": "Table template",
   "Jump_to_original_doc": "Jump to the original document",
-  "Freezed": "Freezed"
+  "Freezed": "Freezed",
+  "Callout": "Callout",
+  "The_current_location_does_not_support_pasting": "The current location does not support pasting ",
+  "Please_enter...": "Please enter..."
 }

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

@@ -281,7 +281,7 @@
   "Revision": "Пересмотр",
   "Error": "Ошибка",
   "Start_revise": "Начать пересмотр",
-  "Revise": "Revise",
+  "Revise": "Пересмотр",
   "Failed_to_execute_operation_on_server": "Не удалось выполнить операцию на сервере, текущая операция отменена.",
   "Start_revise_tip": "Создайте временный документ и внесите в него изменения, объедините его обратно после просмотра изменений",
   "Load_doc_content_error": "Ошибка загрузки содержимого документа",
@@ -414,5 +414,8 @@
   "New": "Новый",
   "Table_template": "Шаблон таблицы",
   "Jump_to_original_doc": "Перейти к исходному документу",
-  "Freezed": "Freezed"
+  "Freezed": "Заморожено",
+  "Callout": "Callout",
+  "The_current_location_does_not_support_pasting": "The current location does not support pasting ",
+  "Please_enter...": "Please enter..."
 }