@seafile/sdoc-editor 0.1.75 → 0.1.77

package/dist/basic-sdk/editor.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Editable, ReactEditor, Slate } from '@seafile/slate-react';
 import defaultEditor, { renderLeaf, renderElement, Toolbar, ContextMenu } from './extension';
-import { focusEditor, getNextNode, getPrevNode, isSelectionAtBlockEnd, isSelectionAtBlockStart } from './extension/core';
+import { focusEditor, getAboveBlockNode, getNextNode, getPrevNode, isSelectionAtBlockEnd, isSelectionAtBlockStart } from './extension/core';
 import { withSocketIO } from './socket';
 import withNodeId from './node-id';
 import SDocOutline from './outline';
@@ -16,7 +16,7 @@ import { ScrollContext } from './hooks/use-scroll-context';
 import CommentContextProvider from './comment/comment-context-provider';
 import CommentWrapper from './comment';
 import { usePipDecorate } from './decorates';
-import { getCursorPosition, getDomHeight } from './utils/dom-utils';
+import { getCursorPosition, getDomHeight, getDomMarginTop } from './utils/dom-utils';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 var SDocEditor = function SDocEditor(_ref) {
@@ -148,7 +148,11 @@ var SDocEditor = function SDocEditor(_ref) {
           if (!_prevNode) return;
           var _domNode2 = ReactEditor.toDOMNode(editor, _prevNode[0]);
           var _domHeight2 = getDomHeight(_domNode2);
-          scrollRef.current.scroll(0, Math.max(0, scrollTop - (newY + _domHeight2)));
+          var node = getAboveBlockNode(editor);
+          if (!node) return;
+          var currentDomNode = ReactEditor.toDOMNode(editor, node[0]);
+          var marginTop = getDomMarginTop(currentDomNode);
+          scrollRef.current.scroll(0, Math.max(0, scrollTop - (newY + _domHeight2 + marginTop)));
         } else {
           scrollRef.current.scroll(0, Math.max(0, scrollTop - newY));
         }

package/dist/basic-sdk/extension/plugins/code-block/helpers.js

@@ -1,5 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import copy from 'copy-to-clipboard';
 import { Transforms, Editor, Node } from '@seafile/slate';
 import slugid from 'slugid';
 import { CODE_BLOCK, CODE_LINE, PARAGRAPH } from '../../constants';
@@ -106,4 +107,20 @@ export var changeToPlainText = function changeToPlainText(editor) {
   Transforms.insertNodes(editor, pList, {
     mode: 'highest'
   });
+};
+export var setClipboardData = function setClipboardData(value) {
+  // Insert text into the clipboard for use on other pages
+  var text = value.children.map(function (line) {
+    return Node.string(line);
+  }).join('\n');
+  copy(text, {
+    format: 'text/plain'
+  });
+
+  // Store the code block data
+  var clipboardData = {
+    text: text,
+    codeBlockNode: value
+  };
+  sessionStorage.setItem('clipboardData', JSON.stringify(clipboardData));
 };

package/dist/basic-sdk/extension/plugins/code-block/plugin.js

@@ -9,7 +9,9 @@ var withCodeBlock = function withCodeBlock(editor) {
   var normalizeNode = editor.normalizeNode,
     insertFragment = editor.insertFragment,
     insertText = editor.insertText,
-    insertBreak = editor.insertBreak;
+    insertBreak = editor.insertBreak,
+    insertData = editor.insertData,
+    insertNode = editor.insertNode;
   var newEditor = editor;
 
   // If you enter two Spaces in quick succession, a period and a space appear （Default Settings for mac）
@@ -19,6 +21,16 @@ var withCodeBlock = function withCodeBlock(editor) {
     }
     return insertText(data);
   };
+  newEditor.insertData = function (data) {
+    var text = data.getData('text/plain');
+    var _ref = JSON.parse(sessionStorage.getItem('clipboardData')) || {},
+      storageText = _ref.text,
+      codeBlockNode = _ref.codeBlockNode;
+    if (codeBlockNode && text === storageText && !getSelectedNodeByType(editor, CODE_BLOCK)) {
+      return insertNode(codeBlockNode);
+    }
+    return insertData(data);
+  };
   newEditor.insertFragment = function (data) {
     // only selected code block content
     if (data.length === 1 && data[0].type === CODE_BLOCK && !getSelectedNodeByType(editor, CODE_BLOCK)) {
@@ -83,10 +95,10 @@ var withCodeBlock = function withCodeBlock(editor) {
   };
 
   // Rewrite normalizeNode
-  newEditor.normalizeNode = function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      node = _ref2[0],
-      path = _ref2[1];
+  newEditor.normalizeNode = function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      node = _ref3[0],
+      path = _ref3[1];
     var type = getNodeType(node);
     if (type === CODE_BLOCK) {
       // code-block is the last node in the editor and needs to be followed by a p node

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

@@ -5,6 +5,7 @@ import { ReactEditor, useSlateStatic, useReadOnly } from '@seafile/slate-react';
 import { Transforms } from '@seafile/slate';
 import { useScrollContext } from '../../../hooks/use-scroll-context';
 import CodeBlockHoverMenu from '../../../../components/code-block-hover-menu';
+import { setClipboardData } from './helpers';
 import '../../../assets/css/code-block.css';
 var CodeBlock = function CodeBlock(_ref) {
   var codeBlockProps = _ref.codeBlockProps;
@@ -53,6 +54,10 @@ var CodeBlock = function CodeBlock(_ref) {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  var onCopyCodeBlock = useCallback(function () {
+    setClipboardData(element);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [element]);
   var onDeleteCodeBlock = useCallback(function () {
     var path = ReactEditor.findPath(editor, element);
     Transforms.removeNodes(editor, {
@@ -124,6 +129,7 @@ var CodeBlock = function CodeBlock(_ref) {
       white_space: 'nowrap'
     },
     onChangeAutoLineWrap: onChangeAutoLineWrap,
+    onCopyCodeBlock: onCopyCodeBlock,
     onDeleteCodeBlock: onDeleteCodeBlock
   }));
 };

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

@@ -7,6 +7,11 @@ export var getDomHeight = function getDomHeight(dom) {
   var height = rect.height;
   return height + parseInt(marginTop);
 };
+export var getDomMarginTop = function getDomMarginTop(dom) {
+  var styles = window.getComputedStyle(dom);
+  var marginTop = styles['marginTop'];
+  return parseInt(marginTop);
+};
 export var getSelectionRange = function getSelectionRange() {
   if (window.getSelection) {
     var sel = window.getSelection();

package/dist/components/code-block-hover-menu/index.css

@@ -26,10 +26,14 @@
 .sdoc-code-block-hover-menu-container .hover-menu-container .op-item {
   font-size: 12px;
   color: #212529;
-  padding: 0 3px;
+  padding: 0 5px;
   border-radius: 2px;
 }
 
+.sdoc-code-block-hover-menu-container .hover-menu-container .op-item:not(:last-child) {
+  border-right: 1px solid #e5e5e5;
+}
+
 .sdoc-code-block-hover-menu-container .hover-menu-container .op-item:hover {
   color: #212529;
   text-decoration: none;

package/dist/components/code-block-hover-menu/index.js

@@ -10,6 +10,7 @@ var CodeBlockHoverMenu = function CodeBlockHoverMenu(_ref) {
     menuPosition = _ref.menuPosition,
     onChangeLanguage = _ref.onChangeLanguage,
     onChangeAutoLineWrap = _ref.onChangeAutoLineWrap,
+    onCopyCodeBlock = _ref.onCopyCodeBlock,
     onDeleteCodeBlock = _ref.onDeleteCodeBlock,
     t = _ref.t;
   var _style$white_space = style.white_space,
@@ -83,6 +84,10 @@ var CodeBlockHoverMenu = function CodeBlockHoverMenu(_ref) {
     className: "op-item ".concat(white_space === 'normal' ? 'active' : ''),
     onClick: onAutoLineWrap
   }, /*#__PURE__*/React.createElement("span", null, t('Auto_wrap'))), /*#__PURE__*/React.createElement("span", {
+    role: "button",
+    className: "op-item",
+    onClick: onCopyCodeBlock
+  }, /*#__PURE__*/React.createElement("span", null, t('Copy'))), /*#__PURE__*/React.createElement("span", {
     role: "button",
     className: 'op-item',
     onClick: onDelete

package/dist/components/more-dropdown/index.js

@@ -3,22 +3,21 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React from 'react';
-import { withTranslation } from 'react-i18next';
 import './style.css';
-var TextAlignMenu = /*#__PURE__*/function (_React$Component) {
-  _inherits(TextAlignMenu, _React$Component);
-  var _super = _createSuper(TextAlignMenu);
-  function TextAlignMenu(props) {
+var MoreDropdownMenu = /*#__PURE__*/function (_React$Component) {
+  _inherits(MoreDropdownMenu, _React$Component);
+  var _super = _createSuper(MoreDropdownMenu);
+  function MoreDropdownMenu(props) {
     var _this;
-    _classCallCheck(this, TextAlignMenu);
+    _classCallCheck(this, MoreDropdownMenu);
     _this = _super.call(this, props);
     _this.registerEventHandler = function () {
-      document.addEventListener('click', _this.onHideTextAlignMenu);
+      document.addEventListener('click', _this.onHideMoreDropdownMenu);
     };
     _this.unregisterEventHandler = function () {
-      document.removeEventListener('click', _this.onHideTextAlignMenu);
+      document.removeEventListener('click', _this.onHideMoreDropdownMenu);
     };
-    _this.onHideTextAlignMenu = function () {
+    _this.onHideMoreDropdownMenu = function () {
       _this.setState({
         isDropdownMenuOpen: false
       }, function () {
@@ -48,7 +47,7 @@ var TextAlignMenu = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
-  _createClass(TextAlignMenu, [{
+  _createClass(MoreDropdownMenu, [{
     key: "render",
     value: function render() {
       var isDropdownMenuOpen = this.state.isDropdownMenuOpen;
@@ -64,6 +63,6 @@ var TextAlignMenu = /*#__PURE__*/function (_React$Component) {
       }, this.props.children));
     }
   }]);
-  return TextAlignMenu;
+  return MoreDropdownMenu;
 }(React.Component);
-export default withTranslation('sdoc-editor')(TextAlignMenu);
+export default MoreDropdownMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.75",
+  "version": "0.1.77",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -12,6 +12,7 @@
     "@seafile/slate-react": "0.92.6",
     "ahooks": "3.7.7",
     "classnames": "2.3.2",
+    "copy-to-clipboard": "^3.3.3",
     "deep-copy": "1.4.2",
     "is-hotkey": "0.2.0",
     "is-url": "^1.2.4",