@seafile/sdoc-editor 1.0.5 → 1.0.6-1

package/dist/basic-sdk/editor/wiki-editor.js

@@ -2,6 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React, { useEffect, useState, useImperativeHandle, forwardRef, useMemo, useCallback } from 'react';
 import { Editor } from '@seafile/slate';
 import deepCopy from 'deep-copy';
+import classNames from 'classnames';
 import context from '../../context';
 import CommonLoading from '../../components/common-loading';
 import { INTERNAL_EVENT, PAGE_EDIT_AREA_WIDTH } from '../constants';
@@ -10,20 +11,21 @@ import withNodeId from '../node-id';
 import { withSocketIO } from '../socket';
 import { focusEditor } from '../extension/core';
 import InsertElementDialog from '../extension/commons/insert-element-dialog';
-import { EditorContainer, EditorContent } from '../layout';
+import { EditorContainer } from '../layout';
 import EditableArticle from './editable-article';
 import { ColorProvider } from '../hooks/use-color-context';
 import ReadOnlyArticle from '../views/readonly-article';
 import { isMobile } from '../../utils';
 import { EventBus } from '../../basic-sdk';
 import { EXTERNAL_EVENT } from '../../constants';
+import { ScrollContext } from '../hooks/use-scroll-context';
 const WikiEditor = forwardRef((_ref, ref) => {
   let {
     editor: propsEditor,
     document,
     isReloading,
     isWikiReadOnly,
-    topSlot
+    scrollRef
   } = _ref;
   const validEditor = propsEditor || useMemo(() => {
     const defaultEditor = createDefaultEditor();
@@ -87,6 +89,11 @@ const WikiEditor = forwardRef((_ref, ref) => {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  useEffect(() => {
+    if (scrollRef) {
+      scrollRef.current.id = 'sdoc-scroll-container';
+    }
+  }, [scrollRef]);
   const onRefreshDocument = useCallback(() => {
     window.location.reload();
   }, []);
@@ -130,31 +137,38 @@ const WikiEditor = forwardRef((_ref, ref) => {
     return /*#__PURE__*/React.createElement(EditorContainer, {
       editor: validEditor,
       readonly: true
-    }, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement(EditorContent, {
-      docValue: slateValue,
-      readonly: true,
-      showOutline: false,
-      editor: validEditor,
-      showComment: false
-    }, topSlot, /*#__PURE__*/React.createElement(ReadOnlyArticle, {
+    }, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-content-wrapper"
+    }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
+      value: {
+        scrollRef
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-editor-content readonly"
+    }, /*#__PURE__*/React.createElement(ReadOnlyArticle, {
       editor: validEditor,
       slateValue: slateValue,
       showComment: false
-    }))));
+    }))))));
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorContainer, {
     editor: validEditor
-  }, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement(EditorContent, {
-    docValue: slateValue,
-    showOutline: false,
-    editor: validEditor,
-    showComment: false
-  }, topSlot, /*#__PURE__*/React.createElement(EditableArticle, {
+  }, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-content-wrapper"
+  }, /*#__PURE__*/React.createElement(ScrollContext.Provider, {
+    value: {
+      scrollRef
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('sdoc-editor-content', {
+      'readonly': isWikiReadOnly
+    })
+  }, /*#__PURE__*/React.createElement(EditableArticle, {
     editor: validEditor,
     slateValue: slateValue,
     updateSlateValue: onValueChange,
     showComment: false
-  })))), /*#__PURE__*/React.createElement(InsertElementDialog, {
+  })))))), /*#__PURE__*/React.createElement(InsertElementDialog, {
     editor: validEditor
   }));
 });

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

@@ -343,5 +343,10 @@ export const SIDE_INSERT_MENUS_CONFIG = {
     iconClass: 'sdocfont sdoc-header4',
     type: HEADER4,
     text: 'Header_four'
+  }, {
+    id: BLOCKQUOTE,
+    iconClass: 'sdocfont sdoc-quote1',
+    type: BLOCKQUOTE,
+    text: 'Quote'
   }]
 };

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

@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { Editor, Transforms, Element, Node } from '@seafile/slate';
 import slugid from 'slugid';
 import { BLOCKQUOTE, CHECK_LIST_ITEM, IMAGE, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, TABLE, CALL_OUT } from '../../constants';
-import { getNodeType } from '../../core';
+import { focusEditor, getNodeType } from '../../core';
 export const isMenuDisabled = (editor, readonly) => {
   if (readonly) return true;
   if (editor.selection == null) return true;
@@ -41,7 +41,7 @@ export const getBlockQuoteType = editor => {
   return getNodeType(n);
 };
 
-// If cursor is in  callout, insert block quote in callout, otherwise wrap block quote directly
+// If cursor is in callout, insert block quote in callout, otherwise wrap block quote directly
 export const setBlockQuoteType = (editor, active) => {
   if (!active) {
     const blockquoteNode = {
@@ -108,4 +108,8 @@ export const getFormattedRestElements = data => {
     }
   });
   return restElements;
+};
+export const insertBlockQuote = (editor, active) => {
+  setBlockQuoteType(editor, active);
+  focusEditor(editor);
 };

package/dist/basic-sdk/extension/plugins/blockquote/menu/index.js

@@ -3,8 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import React from 'react';
 import { BLOCKQUOTE, MENUS_CONFIG_MAP } from '../../../constants';
 import { MenuItem } from '../../../commons';
-import { getBlockQuoteType, isMenuDisabled, setBlockQuoteType } from '../helpers';
-import { focusEditor } from '../../../core';
+import { getBlockQuoteType, insertBlockQuote, isMenuDisabled } from '../helpers';
 class QuoteMenu extends React.Component {
   constructor() {
     super(...arguments);
@@ -26,8 +25,7 @@ class QuoteMenu extends React.Component {
         editor
       } = this.props;
       const active = this.isActive(editor);
-      setBlockQuoteType(editor, active);
-      focusEditor(editor);
+      insertBlockQuote(editor, active);
     });
   }
   render() {

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

@@ -8,7 +8,7 @@ import TableSizePopover from '../../plugins/table/popover/table-size-popover';
 import { changeToCodeBlock } from '../../plugins/code-block/helpers';
 import { toggleList } from '../../plugins/list/transforms';
 import { setCheckListItemType } from '../../plugins/check-list/helpers';
-import { ELEMENT_TYPE, IMAGE, INSERT_POSITION, LINK, LOCAL_IMAGE, PARAGRAPH, SIDE_INSERT_MENUS_CONFIG, TABLE, CODE_BLOCK, CALL_OUT, UNORDERED_LIST, ORDERED_LIST, CHECK_LIST_ITEM, QUICK_INSERT } from '../../constants';
+import { ELEMENT_TYPE, IMAGE, INSERT_POSITION, LINK, LOCAL_IMAGE, PARAGRAPH, SIDE_INSERT_MENUS_CONFIG, TABLE, CODE_BLOCK, CALL_OUT, UNORDERED_LIST, ORDERED_LIST, CHECK_LIST_ITEM, QUICK_INSERT, BLOCKQUOTE } from '../../constants';
 import EventBus from '../../../utils/event-bus';
 import { INTERNAL_EVENT } from '../../../constants';
 import DropdownMenuItem from '../../commons/dropdown-menu-item';
@@ -16,6 +16,7 @@ import { wrapCallout } from '../../plugins/callout/helper';
 import keyCodes from '../../../../constants/key-codes';
 import { SELECTED_ITEM_CLASS_NAME, SHORT_INSERT_ELEMENT_USER_INPUT_MAP } from './const';
 import { getAboveBlockNode } from '../../core';
+import { insertBlockQuote } from '../../plugins/blockquote/helpers';
 import './style.css';
 const QuickInsertBlockMenu = _ref => {
   let {
@@ -97,6 +98,10 @@ const QuickInsertBlockMenu = _ref => {
     });
     return !!callout;
   }, [editor]);
+  const onInsertBlockQuote = useCallback(() => {
+    callback && callback();
+    insertBlockQuote(editor, false);
+  }, [callback, editor]);
   const dropDownItems = useMemo(() => {
     let items = {
       [IMAGE]: /*#__PURE__*/React.createElement(DropdownMenuItem, {
@@ -126,6 +131,11 @@ const QuickInsertBlockMenu = _ref => {
         menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.LINK]),
         onClick: openLinkDialog
       }),
+      [BLOCKQUOTE]: /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        key: "sdoc-insert-menu-blockquote",
+        menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.BLOCKQUOTE]),
+        onClick: onInsertBlockQuote
+      }),
       [CODE_BLOCK]: /*#__PURE__*/React.createElement(DropdownMenuItem, {
         key: "sdoc-insert-menu-code-block",
         menuConfig: _objectSpread({}, SIDE_INSERT_MENUS_CONFIG[ELEMENT_TYPE.CODE_BLOCK]),
@@ -171,7 +181,7 @@ const QuickInsertBlockMenu = _ref => {
       });
     });
     return items;
-  }, [createTable, editor, isDisableCallout, isEmptyNode, onInsert, onInsertCallout, onInsertCheckList, onInsertCodeBlock, onInsertImageToggle, onInsertList, openLinkDialog]);
+  }, [createTable, editor, isDisableCallout, isEmptyNode, onInsert, onInsertBlockQuote, onInsertCallout, onInsertCheckList, onInsertCodeBlock, onInsertImageToggle, onInsertList, openLinkDialog]);
   const getSelectItemDom = selectIndex => {
     const dropDownItemWrapper = downDownWrapperRef.current;
     const currentSelectItem = dropDownItemWrapper.children[selectIndex];

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

@@ -8,7 +8,7 @@ import { useScrollContext } from '../../../hooks/use-scroll-context';
 import { focusEditor } from '../../core';
 import { getDomTopHeight, setSelection, isVoidNode, getNodeEntry, isBlockquote, isList, onWrapListItem } from './helpers';
 import { insertImageFiles } from '../../plugins/image/helpers';
-import { INTERNAL_EVENT } from '../../../constants';
+import { INTERNAL_EVENT, WIKI_EDITOR } from '../../../constants';
 import { CODE_BLOCK, TABLE, BLOCKQUOTE, CHECK_LIST_ITEM, CALL_OUT, TABLE_DRAG_KEY } from '../../constants';
 import { getCalloutEntry } from '../../plugins/callout/helper';
 import './index.css';
@@ -77,11 +77,21 @@ const SideToolbar = () => {
       const offsetY = !editor.editorType ? -1 : 0; // editorType is undefined means sdoc editor
       const topValue = top + scrollRef.current.scrollTop + offsetY;
       if (topValue !== sidePosition.top) setIsMoving(true);
+      let left = 20;
+      if (editor.editorType === WIKI_EDITOR) {
+        const {
+          left: editorLeft
+        } = document.querySelector('#sdoc-editor').getBoundingClientRect();
+        const {
+          left: containerLeft
+        } = document.querySelector('.sdoc-editor-container').getBoundingClientRect();
+        left = editorLeft - containerLeft - 40;
+      }
       setTimeout(() => {
         // wait animation
         setSidePosition({
           top: topValue,
-          left: 20
+          left: left
         });
       }, 150);
       setSlateNode(node);

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

@@ -1,4 +1,4 @@
-import { WIKI_EDITOR, DOCUMENT_PLUGIN_EDITOR } from '../constants';
+import { DOCUMENT_PLUGIN_EDITOR, WIKI_EDITOR } from '../constants';
 export const getDomHeight = dom => {
   const styles = window.getComputedStyle(dom);
   const rect = dom.getBoundingClientRect();
@@ -58,7 +58,9 @@ export const getHeaderHeight = editor => {
   } = editor;
   switch (editorType) {
     case WIKI_EDITOR:
-      return 113.2;
+      const headerHeight = document.querySelector('.sdoc-editor-container').offsetTop; // async height in wiki
+      const headerBarHeight = 44;
+      return headerHeight + headerBarHeight;
     case DOCUMENT_PLUGIN_EDITOR:
       return 67 + 48 + 49 + 37;
     default:

package/dist/pages/sdoc-wiki-viewer.js

@@ -14,7 +14,7 @@ const SdocWikiViewer = _ref => {
     document,
     docUuid,
     isWikiReadOnly,
-    topSlot
+    scrollRef
   } = _ref;
   context.initApi();
 
@@ -51,7 +51,7 @@ const SdocWikiViewer = _ref => {
     docUuid: docUuid,
     editor: validEditor,
     isWikiReadOnly: isWikiReadOnly,
-    topSlot: topSlot
+    scrollRef: scrollRef
   }));
 };
 export default withTranslation('sdoc-editor')(SdocWikiViewer);

package/package.json

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