@seafile/sdoc-editor 0.3.14 → 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/plugin.js

@@ -52,9 +52,14 @@ const withCallout = editor => {
     return insertFragment(data);
   };
   newEditor.onHotKeyDown = event => {
-    if (isHotkey('mod+enter', event)) {
-      insertElement(newEditor, PARAGRAPH, INSERT_POSITION.AFTER);
-      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,12 +26,14 @@ const ColorSelector = (_ref, ref) => {
     } = element.style;
     return background_color && background_color === currentBackgroundColor;
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(ElementPopover, null, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-callout-color-selector-container",
     ref: selectorRef,
-    className: "sdoc-selector-gap-filler",
-    contentEditable: false
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "sdoc-callout-color-selector-container"
+    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) => {

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

@@ -18,23 +18,13 @@
   pointer-events: none;
 }
 
-.sdoc-selector-gap-filler {
-  position: absolute;
-  left: 0;
-  top: -40px;
-  width: 300px;
-  height: 100%;
-  z-index: 100;
-}
-
-.sdoc-selector-gap-filler .sdoc-callout-color-selector-container {
+.sdoc-callout-color-selector-container {
   position: absolute;
   padding: 10px;
-  top: -5px;
-  left: 5px;
   background-color: #fff;
   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.14",
+  "version": "0.3.15",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",