@seafile/sdoc-editor 0.5.42 → 0.5.43

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

@@ -9,7 +9,7 @@ import { useCursors } from '../cursor/use-cursors';
 import { INTERNAL_EVENT } from '../constants';
 import { usePipDecorate } from '../decorates';
 import EventBus from '../utils/event-bus';
-import { IMAGE } from '../extension/constants';
+import { IMAGE, IMAGE_BLOCK } from '../extension/constants';
 import RenderCommentEditorCustomRenderElement from '../extension/render/render-comment-editor-element';
 import EventProxy from '../utils/event-handler';
 const CommentArticle = _ref => {
@@ -40,14 +40,12 @@ const CommentArticle = _ref => {
       const {
         selection
       } = editor;
-      if (Range.isCollapsed(selection)) {
-        // Do not scroll into view, when focus on image
-        const [imageNodeEntry] = Editor.nodes(editor, {
-          match: n => n.type === IMAGE,
-          at: selection
-        });
-        if (imageNodeEntry) return;
-      }
+      // Do not scroll into view, when focus on image
+      const [imageNodeEntry] = Editor.nodes(editor, {
+        match: n => [IMAGE, IMAGE_BLOCK].includes(n.type),
+        at: selection
+      });
+      if (imageNodeEntry) return;
       const focusedNode = Node.get(editor, selection.focus.path);
       const domNode = ReactEditor.toDOMNode(editor, focusedNode);
       if (!domNode) return;

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

@@ -14,7 +14,7 @@ import EventBus from '../utils/event-bus';
 import { ArticleContainer } from '../layout';
 import { useScrollContext } from '../hooks/use-scroll-context';
 import { SetNodeToDecorations } from '../highlight';
-import { IMAGE } from '../extension/constants';
+import { IMAGE, IMAGE_BLOCK } from '../extension/constants';
 import { isPreventResetTableSelectedRange } from '../extension/plugins/table/helpers';
 const EditableArticle = _ref => {
   let {
@@ -144,14 +144,12 @@ const EditableArticle = _ref => {
       const {
         selection
       } = editor;
-      if (Range.isCollapsed(selection)) {
-        // Do not scroll into view, when focus on image
-        const [imageNodeEntry] = Editor.nodes(editor, {
-          match: n => n.type === IMAGE,
-          at: selection
-        });
-        if (imageNodeEntry) return;
-      }
+      // Do not scroll into view, when focus on image
+      const [imageNodeEntry] = Editor.nodes(editor, {
+        match: n => [IMAGE, IMAGE_BLOCK].includes(n.type),
+        at: selection
+      });
+      if (imageNodeEntry) return;
       const focusedNode = Node.get(editor, selection.focus.path);
       const domNode = ReactEditor.toDOMNode(editor, focusedNode);
       if (!domNode) return;

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

@@ -1,12 +1,13 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import urlJoin from 'url-join';
 import { Editor, Range, Transforms, Path, Node } from '@seafile/slate';
+import { ReactEditor } from '@seafile/slate-react';
 import context from '../../../../context';
 import EventBus from '../../../utils/event-bus';
-import { generateEmptyElement, getNodeType, isTextNode, getParentNode, focusEditor } from '../../core';
+import { generateEmptyElement, getNodeType, isTextNode, getParentNode, focusEditor, getSelectedElems } from '../../core';
 import { isList } from '../../toolbar/side-toolbar/helpers';
 import { COMMENT_EDITOR, INTERNAL_EVENT } from '../../../constants';
-import { CODE_BLOCK, ELEMENT_TYPE, IMAGE, INSERT_POSITION } from '../../constants';
+import { CODE_BLOCK, ELEMENT_TYPE, IMAGE, IMAGE_BLOCK, INSERT_POSITION } from '../../constants';
 export const isInsertImageMenuDisabled = (editor, readonly) => {
   if (readonly) return true;
   const {
@@ -154,4 +155,27 @@ export const insertImageFiles = (files, editor, targetPath) => {
   context.uploadLocalImage(files).then(fileUrl => {
     insertImage(editor, fileUrl, targetPath, INSERT_POSITION.AFTER);
   });
+};
+export const selectImageWhenSelectPartial = (event, editor, imageNode, isImageSelected) => {
+  if (isImageSelected) return;
+  const isMouseLeftDown = event.buttons === 1;
+  if (!isMouseLeftDown) return;
+  const {
+    selection
+  } = editor;
+  if (Range.isCollapsed(selection)) return;
+  let imagePath = ReactEditor.findPath(editor, imageNode);
+  if (imageNode.type === IMAGE_BLOCK) {
+    const imageIndex = imageNode.children.findIndex(item => item.type === IMAGE);
+    imagePath = imagePath.concat([imageIndex]);
+  }
+  const isIncludedSelection = Range.includes(selection, imagePath);
+  if (isIncludedSelection) return;
+  const focusRange = _objectSpread(_objectSpread({}, selection), {}, {
+    focus: {
+      offset: 0,
+      path: imagePath
+    }
+  });
+  focusEditor(editor, focusRange);
 };

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

@@ -4,7 +4,7 @@ import { ReactEditor, useSelected, useReadOnly } from '@seafile/slate-react';
 import { Transforms, Editor } from '@seafile/slate';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
-import { getImageURL, updateImage } from './helpers';
+import { getImageURL, selectImageWhenSelectPartial, updateImage } from './helpers';
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../constants';
 import ImageHoverMenu from './hover-menu';
@@ -195,7 +195,8 @@ const Image = _ref => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, isShowImagePlaceholder && /*#__PURE__*/React.createElement("span", Object.assign({
     className: classNames('sdoc-image-wrapper', className)
   }, attributes, {
-    style: _objectSpread({}, style)
+    style: _objectSpread({}, style),
+    onMouseOver: e => selectImageWhenSelectPartial(e, editor, element, isSelected)
   }), /*#__PURE__*/React.createElement("img", {
     ref: imageRef,
     src: imagePlaceholder,
@@ -206,7 +207,8 @@ const Image = _ref => {
     "data-id": element.id,
     className: classNames('sdoc-image-wrapper', className)
   }, attributes, {
-    style: _objectSpread({}, style)
+    style: _objectSpread({}, style),
+    onMouseOver: e => selectImageWhenSelectPartial(e, editor, element, isSelected)
   }), /*#__PURE__*/React.createElement("span", {
     className: "sdoc-image-inner"
   }, /*#__PURE__*/React.createElement("span", {
@@ -294,6 +296,8 @@ export function renderImageBlock(props, editor) {
   const {
     align
   } = element;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const isSelected = useSelected();
   let justifyContent = '';
   if (align) {
     justifyContent = align === 'left' ? 'start' : align === 'right' ? 'end' : align;
@@ -305,5 +309,7 @@ export function renderImageBlock(props, editor) {
       padding: '5px 0px',
       justifyContent: "".concat(justifyContent)
     }
-  }, attributes), children);
+  }, attributes, {
+    onMouseOver: e => selectImageWhenSelectPartial(e, editor, element, isSelected)
+  }), children);
 }

package/dist/basic-sdk/extension/toolbar/context-toolbar/index.js

@@ -47,10 +47,18 @@ const ContextToolbar = () => {
   const onMouseDown = useCallback(event => {
     event.preventDefault(); // prevent toolbar from taking focus away from editor
   }, []);
+  const onMouseMove = useCallback(e => {
+    const isMouseLeftDown = e.buttons === 1;
+    if (isMouseLeftDown) {
+      const el = ref.current;
+      el.removeAttribute('style');
+    }
+  }, []);
   return createPortal( /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: "sdoc-context-toolbar",
-    onMouseDown: onMouseDown
+    onMouseDown: onMouseDown,
+    onMouseOver: onMouseMove
   }, /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(TextStyleMenuList, {
     editor: editor,
     idPrefix: 'sdoc_context_toolbar'

package/dist/basic-sdk/utils/diff.js

@@ -37,6 +37,30 @@ export const getTopLevelChanges = changes => {
   return Array.from(new Set(topLevelChanges));
 };
 
+// Merge consecutive added areas or deleted areas
+export const getMergedChanges = (topLevelChanges, diffValue) => {
+  const topLevelChangesValue = [];
+  const changes = [];
+  diffValue.forEach(item => {
+    if (topLevelChanges.includes(item.id)) {
+      const obj = {
+        id: item.id,
+        value: item
+      };
+      topLevelChangesValue.push(obj);
+    }
+  });
+  topLevelChangesValue.forEach(item => {
+    var _changes;
+    const preChange = (_changes = changes[changes.length - 1]) === null || _changes === void 0 ? void 0 : _changes.value;
+    const curChange = item.value;
+    if ((curChange === null || curChange === void 0 ? void 0 : curChange.add) && (preChange === null || preChange === void 0 ? void 0 : preChange.add)) return;
+    if ((curChange === null || curChange === void 0 ? void 0 : curChange.delete) && (preChange === null || preChange === void 0 ? void 0 : preChange.delete)) return;
+    changes.push(item);
+  });
+  return changes.map(item => item.id);
+};
+
 // Depth facilitates each child node, adding diffType to each end node
 const generatorDiffElement = function (element, diffType) {
   let style = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

package/dist/components/doc-operations/revision-operations/changes-count/index.js

@@ -1,17 +1,17 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Tooltip from '../../../tooltip';
-import { getTopLevelChanges } from '../../../../basic-sdk/utils/diff';
+import { getTopLevelChanges, getMergedChanges } from '../../../../basic-sdk/utils/diff';
 import './index.css';
 const ChangesCount = _ref => {
   let {
-    changes
+    allChanges
   } = _ref;
   const {
     t
   } = useTranslation();
   const [currentDiffIndex, setDiffIndex] = useState(0);
-  const [topLevelChanges, setTopLevelChanges] = useState([]);
+  const [changes, setChanges] = useState([]);
   const intervalRef = useRef();
   useEffect(() => {
     // Article rendering is delayed, so we need to wait for the Article to render before we can get the changes
@@ -25,18 +25,19 @@ const ChangesCount = _ref => {
         }
       }, 100);
     }).then(() => {
-      if (changes.length !== 0) {
-        const topLevelChanges = getTopLevelChanges(changes);
-        setTopLevelChanges([...topLevelChanges]);
+      if (allChanges.changes.length !== 0) {
+        const topLevelChanges = getTopLevelChanges(allChanges.changes);
+        const changes = getMergedChanges(topLevelChanges, allChanges.value);
+        setChanges(changes);
       }
     });
     return () => {
       intervalRef.current && clearInterval(intervalRef.current);
     };
-  }, [changes]);
+  }, [allChanges]);
   const jumpToElement = useCallback(currentDiffIndex => {
     setDiffIndex(currentDiffIndex);
-    const change = topLevelChanges[currentDiffIndex];
+    const change = changes[currentDiffIndex];
     const changeElement = document.querySelectorAll("[data-id=\"".concat(change, "\"]"))[0];
     if (changeElement) {
       const scrollContainer = document.getElementById('sdoc-scroll-container');
@@ -46,31 +47,31 @@ const ChangesCount = _ref => {
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [topLevelChanges, currentDiffIndex]);
+  }, [changes, currentDiffIndex]);
   const lastChange = useCallback(() => {
     if (currentDiffIndex === 0) {
-      jumpToElement(topLevelChanges.length - 1);
+      jumpToElement(changes.length - 1);
       return;
     }
     jumpToElement(currentDiffIndex - 1);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [topLevelChanges, currentDiffIndex]);
+  }, [changes, currentDiffIndex]);
   const nextChange = useCallback(() => {
-    if (currentDiffIndex === topLevelChanges.length - 1) {
+    if (currentDiffIndex === changes.length - 1) {
       jumpToElement(0);
       return;
     }
     jumpToElement(currentDiffIndex + 1);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [topLevelChanges, currentDiffIndex]);
-  if (!Array.isArray(topLevelChanges) || topLevelChanges.length === 0) {
+  }, [changes, currentDiffIndex]);
+  if (!Array.isArray(changes) || changes.length === 0) {
     return /*#__PURE__*/React.createElement("div", {
       className: "sdoc-revision-changes-container d-flex align-items-center pl-2 pr-2 ml-4"
     }, t('No_changes'));
   }
-  const changesCount = topLevelChanges.length;
+  const changesCount = changes.length;
   return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-revision-changes-container d-flex align-items-center ml-4"
   }, /*#__PURE__*/React.createElement("div", {

package/dist/components/doc-operations/revision-operations/index.js

@@ -192,7 +192,7 @@ const RevisionOperations = _ref => {
     setShowTip(false);
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, !isSdocRevision && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MoreRevisionOperations, null), /*#__PURE__*/React.createElement(Revisions, null)), isSdocRevision && isShowChanges && /*#__PURE__*/React.createElement(ChangesCount, {
-    changes: changes
+    allChanges: changes
   }), isSdocRevision && /*#__PURE__*/React.createElement(ViewChanges, {
     isShowChanges: isShowChanges,
     onViewChangesToggle: onViewChangesToggle

package/dist/pages/published-revision-viewer.js

@@ -50,7 +50,7 @@ const PublishedRevisionViewer = () => {
     });
   }, []);
   const setDiffChanges = useCallback(diff => {
-    setChanges((diff === null || diff === void 0 ? void 0 : diff.changes) || []);
+    setChanges(diff);
   }, []);
   const handleViewChangesToggle = useCallback(isShowChanges => {
     setShowChanges(isShowChanges);

package/dist/pages/simple-editor.js

@@ -40,7 +40,7 @@ const SimpleEditor = _ref => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const setDiffChanges = useCallback(diff => {
-    setChanges(diff.changes);
+    setChanges(diff);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isShowChanges]);
   const handleViewChangesToggle = useCallback(isShowChanges => {

package/package.json

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