@seafile/sdoc-editor 0.1.57 → 0.1.59

package/dist/assets/css/simple-editor.css

@@ -12,6 +12,8 @@
   margin-left: 0.5rem;
   color: #999;
   cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
 }
 
 .sdoc-editor-page-header .doc-info .doc-icon:hover {

package/dist/basic-sdk/assets/css/code-block.css

@@ -1,22 +1,116 @@
-.code-block-container {
+.sdoc-code-block-container {
   position: relative;
 }
 
-.language-type {
-  font-size: 12px;
+.sdoc-code-block-pre {
+  border: 1px solid #ccc;
+}
+
+.sdoc-code-block-pre .sdoc-code-no-wrap {
+  white-space: nowrap;
+}
+
+.sdoc-code-block-pre .sdoc-code-no-wrap .sdoc-code-line > span {
+  white-space: pre;
+}
+
+.sdoc-code-block-code .sdoc-code-line {
+  position: relative;
+  padding-left: 5px;
+}
+
+.sdoc-code-block-code .sdoc-code-line .sdoc-code-line-index {
   position: absolute;
-  right: 0;
-  top: 0; 
-}
-
-.language-type select {
-  background-color: #eeeeee;
-  cursor: pointer;
-  appearance: none;
-  outline: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  border: none;
-  border-radius: 4px;
-  padding: 0 5px; 
+  left: -10px;
+  color: #ccc;
+  width: 10px;
+  height: 10px;
+  caret-color: transparent;
+  pointer-events: none;
+}
+
+.sdoc-code-line
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.sdoc-code-line
+.token.punctuation {
+  color: #999;
+}
+
+.sdoc-code-line
+.token.namespace {
+  opacity: .7;
+}
+
+.sdoc-code-line
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+  padding: 0rem;
+}
+
+.sdoc-code-line
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.sdoc-code-line
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+}
+
+.sdoc-code-line
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.sdoc-code-line
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.sdoc-code-line
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.sdoc-code-line
+.sdoc-code-line
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.sdoc-code-line
+.token.italic {
+  font-style: italic;
+}
+
+.sdoc-code-line
+.token.entity {
+  cursor: help;
 }

package/dist/basic-sdk/editor.js

@@ -9,9 +9,11 @@ import withNodeId from './node-id';
 import SDocOutline from './outline';
 import EventProxy from './utils/event-handler';
 import { useCursors } from './cursor/use-cursors';
+import { useHighlightDecorate } from './highlight-decorate';
 import EventBus from './utils/event-bus';
 import { EXTERNAL_EVENT } from '../constants';
 import { isAllInTable } from './extension/plugins/table/helpers';
+import { SetNodeToDecorations } from './highlight-decorate/setNodeToDecorations';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 var SDocEditor = function SDocEditor(_ref) {
@@ -42,6 +44,8 @@ var SDocEditor = function SDocEditor(_ref) {
     setMenuPosition = _useState6[1];
   var _useCursors = useCursors(editor),
     cursors = _useCursors.cursors;
+  var _useHighlightDecorate = useHighlightDecorate(editor),
+    highlightDecorate = _useHighlightDecorate.highlightDecorate;
 
   // init eventHandler
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -100,20 +104,22 @@ var SDocEditor = function SDocEditor(_ref) {
     doc: slateValue,
     docUuid: config.docUuid
   }), /*#__PURE__*/React.createElement("div", {
-    className: "flex-fill o-auto sdoc-editor-article-container"
+    className: "flex-fill o-auto sdoc-editor-article-container",
+    id: "sdoc-editor-article-container"
   }, /*#__PURE__*/React.createElement(Slate, {
     editor: editor,
     value: slateValue,
     onChange: onChange
   }, /*#__PURE__*/React.createElement("div", {
     className: "article"
-  }, /*#__PURE__*/React.createElement(Editable, {
+  }, /*#__PURE__*/React.createElement(SetNodeToDecorations, null), /*#__PURE__*/React.createElement(Editable, {
     renderElement: renderElement,
     renderLeaf: renderLeaf,
     onKeyDown: eventProxy.onKeyDown,
     cursors: cursors,
     onContextMenu: onContextMenu,
-    onMouseDown: onMouseDown
+    onMouseDown: onMouseDown,
+    decorate: highlightDecorate
   })))))), isShowContextMenu && /*#__PURE__*/React.createElement(ContextMenu, {
     editor: editor,
     contextMenuPosition: menuPosition

package/dist/basic-sdk/extension/menu/menu.css

@@ -11,7 +11,6 @@
   height: 100%;
   margin-right: 10px;
   border: 1px solid transparent;
-  line-height: 30px;
   color: #555555;
   background-color: #fff;
 }

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

@@ -1,7 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
 import { Transforms, Editor, Node } from '@seafile/slate';
-import { CODE_BLOCK, PARAGRAPH } from '../../constants';
+import slugid from 'slugid';
+import { CODE_BLOCK, CODE_LINE, PARAGRAPH } from '../../constants';
 import { getNodeType, getSelectedNodeByType, getSelectedElems } from '../../core';
 export var isMenuDisabled = function isMenuDisabled(editor) {
   var selection = editor.selection;
@@ -25,13 +26,6 @@ export var getSelectCodeElem = function getSelectCodeElem(editor) {
   if (codeNode == null) return null;
   return codeNode;
 };
-export var updateLanguageSetting = function updateLanguageSetting(editor, language) {
-  Transforms.setNodes(editor, {
-    language: language
-  }, {
-    mode: 'highest'
-  });
-};
 export var changeToCodeBlock = function changeToCodeBlock(editor, language) {
   // Summarizes the strings for the selected highest-level node
   var strArr = [];
@@ -65,16 +59,21 @@ export var changeToCodeBlock = function changeToCodeBlock(editor, language) {
   // Insert the codeBlockNode node
   var newCodeBlockNode = {
     type: CODE_BLOCK,
+    language: language,
+    style: {
+      white_space: 'nowrap' // default nowrap
+    },
+
     children: [{
-      type: 'code-line',
+      id: slugid.nice(),
+      type: CODE_LINE,
       children: [{
         text: strArr.join('\n')
       } // Select the plain text of the node
       ]
-    }],
-
-    language: language
+    }]
   };
+
   Transforms.insertNodes(editor, newCodeBlockNode, {
     mode: 'highest'
   });

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

@@ -36,7 +36,7 @@ var CodeBlockMenu = /*#__PURE__*/function (_React$Component) {
         changeToPlainText(editor);
       } else {
         // It is not currently in code-block, so it needs to be converted to code-block
-        changeToCodeBlock(editor, 'text');
+        changeToCodeBlock(editor, 'plaintext');
       }
       focusEditor(editor);
     };

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

@@ -1,46 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Transforms, Node } from '@seafile/slate';
-import { getSelectedNodeByType, getNodeType, isLastNode, genEmptyParagraph } from '../../core';
+import { Transforms } from '@seafile/slate';
+import { getNodeType, isLastNode, genEmptyParagraph } from '../../core';
 import { CODE_BLOCK } from '../../constants';
-var getLastTextLineBeforeSelection = function getLastTextLineBeforeSelection(codeNode, editor) {
-  var selection = editor.selection;
-  if (selection == null) return '';
-  var codeText = Node.string(codeNode);
-  var anchorOffset = selection.anchor.offset;
-  var textBeforeAnchor = codeText.slice(0, anchorOffset); // The text before the selection
-  var arr = textBeforeAnchor.split('\n'); // text before selection, split by line break
-  var length = arr.length;
-  if (length === 0) return '';
-  return arr[length - 1];
-};
 var withCodeBlock = function withCodeBlock(editor) {
-  var insertBreak = editor.insertBreak,
-    normalizeNode = editor.normalizeNode;
+  var normalizeNode = editor.normalizeNode;
   var newEditor = editor;
 
-  // Rewrite insertBreak
-  newEditor.insertBreak = function () {
-    var codeNode = getSelectedNodeByType(newEditor, CODE_BLOCK);
-    if (codeNode == null) {
-      insertBreak(); // Perform the default line feed
-      return;
-    }
-
-    // When press Enter, the space is automatically inserted according to the space in the current line
-    var lastLineBeforeSelection = getLastTextLineBeforeSelection(codeNode, newEditor);
-    if (lastLineBeforeSelection) {
-      var arr = lastLineBeforeSelection.match(/^\s+/); // The space at the beginning of a line
-      if (arr != null && arr[0] != null) {
-        var spaces = arr[0];
-        newEditor.insertText("\n".concat(spaces)); // Insert a space after a newline
-        return;
-      }
-    }
-
-    // Normal line feed
-    newEditor.insertText('\n');
-  };
-
   // Rewrite normalizeNode
   newEditor.normalizeNode = function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),

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

@@ -1,104 +1,128 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-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 { updateLanguageSetting } from './helpers';
-import { getSelectedNodeByType } from '../../core';
-import { CODE_BLOCK } from '../../constants';
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import { ReactEditor, useSlateStatic } from '@seafile/slate-react';
+import { Transforms } from '@seafile/slate';
+import CodeBlockHoverMenu from '../../../../components/code-block-hover-menu';
 import '../../../assets/css/code-block.css';
-var LanguageSet = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(LanguageSet, _React$PureComponent);
-  var _super = _createSuper(LanguageSet);
-  function LanguageSet() {
-    var _this;
-    _classCallCheck(this, LanguageSet);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+var CodeBlock = function CodeBlock(_ref) {
+  var codeBlockProps = _ref.codeBlockProps;
+  var codeBlockRef = useRef();
+  var attributes = codeBlockProps.attributes,
+    children = codeBlockProps.children,
+    element = codeBlockProps.element;
+  var _element$style = element.style,
+    style = _element$style === void 0 ? {
+      white_space: 'nowrap'
+    } : _element$style;
+  var white_space = style.white_space;
+  var editor = useSlateStatic();
+  var _useState = useState({
+      top: '',
+      left: ''
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    menuPosition = _useState2[0],
+    setMenuPosition = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showHoverMenu = _useState4[0],
+    setShowHoverMenu = _useState4[1];
+  var onChangeLanguage = useCallback(function (lang) {
+    var language = lang.value;
+    var path = ReactEditor.findPath(editor, element);
+    Transforms.setNodes(editor, {
+      language: language
+    }, {
+      at: path
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onChangeAutoLineWrap = useCallback(function (autoWrap) {
+    var path = ReactEditor.findPath(editor, element);
+    var newStyle = _objectSpread(_objectSpread({}, style), {}, {
+      white_space: autoWrap
+    });
+    Transforms.setNodes(editor, {
+      style: newStyle
+    }, {
+      at: path
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onDeleteCodeBlock = useCallback(function () {
+    var path = ReactEditor.findPath(editor, element);
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onMouseEnter = useCallback(function (e) {
+    if (codeBlockRef.current) {
+      var _codeBlockRef$current = codeBlockRef.current.getBoundingClientRect(),
+        top = _codeBlockRef$current.top,
+        left = _codeBlockRef$current.left;
+      var menuTop = top - 42; // top = top distance - menu height
+      var newMenuPosition = {
+        top: menuTop,
+        left: left // left = code-block left distance
+      };
+
+      setMenuPosition(newMenuPosition);
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _this.stopPropagation = function (event) {
-      event.stopPropagation();
-    };
-    return _this;
-  }
-  _createClass(LanguageSet, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // Compat chrome browser in windows, stop propagation to prevent emit the click event added to document
-      this.selector.addEventListener('click', this.stopPropagation);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.selector.removeEventListener('click', this.stopPropagation);
+    setShowHoverMenu(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onMouseLeave = useCallback(function (e) {
+    setShowHoverMenu(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var onScroll = useCallback(function (e) {
+    if (e.currentTarget.scrollTop) {
+      var _codeBlockRef$current2 = codeBlockRef.current.getBoundingClientRect(),
+        top = _codeBlockRef$current2.top,
+        left = _codeBlockRef$current2.left;
+      var menuTop = top - 42; // top = top distance - menu height
+      var newMenuPosition = {
+        top: menuTop,
+        left: left // left = code-block left distance
+      };
+
+      setMenuPosition(newMenuPosition);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        language = _this$props.language,
-        onChange = _this$props.onChange;
-      return /*#__PURE__*/React.createElement("div", {
-        contentEditable: false,
-        className: "language-type"
-      }, /*#__PURE__*/React.createElement("select", {
-        ref: function ref(_ref) {
-          return _this2.selector = _ref;
-        },
-        value: language,
-        name: "language",
-        onInput: function onInput(event) {
-          return event.stopPropagation();
-        },
-        onChange: onChange
-      }, /*#__PURE__*/React.createElement("option", {
-        value: "none"
-      }, "Text")));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    if (showHoverMenu) {
+      document.getElementById('sdoc-editor-article-container').addEventListener('scroll', onScroll);
+    } else {
+      document.getElementById('sdoc-editor-article-container').removeEventListener('scroll', onScroll);
     }
-  }]);
-  return LanguageSet;
-}(React.PureComponent);
-var CodeBlock = /*#__PURE__*/function (_React$PureComponent2) {
-  _inherits(CodeBlock, _React$PureComponent2);
-  var _super2 = _createSuper(CodeBlock);
-  function CodeBlock() {
-    var _this3;
-    _classCallCheck(this, CodeBlock);
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    _this3 = _super2.call.apply(_super2, [this].concat(args));
-    _this3.onChange = function (event) {
-      var editor = _this3.props.editor;
-      var language = event.target.value;
-      updateLanguageSetting(editor, language);
+    return function () {
+      document.getElementById('sdoc-editor-article-container').removeEventListener('scroll', onScroll);
     };
-    return _this3;
-  }
-  _createClass(CodeBlock, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        codeBlockProps = _this$props2.codeBlockProps,
-        editor = _this$props2.editor;
-      var attributes = codeBlockProps.attributes,
-        children = codeBlockProps.children,
-        element = codeBlockProps.element;
-      var language = element.language;
-      var codeNode = getSelectedNodeByType(editor, CODE_BLOCK);
-      return /*#__PURE__*/React.createElement("div", {
-        className: 'code-block-container'
-      }, /*#__PURE__*/React.createElement("pre", attributes, children), (codeNode === null || codeNode === void 0 ? void 0 : codeNode.id) === (element === null || element === void 0 ? void 0 : element.id) && /*#__PURE__*/React.createElement(LanguageSet, {
-        language: language,
-        onChange: this.onChange
-      }));
-    }
-  }]);
-  return CodeBlock;
-}(React.PureComponent);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showHoverMenu]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: codeBlockRef,
+    className: 'sdoc-code-block-container',
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React.createElement("pre", Object.assign({
+    className: 'sdoc-code-block-pre'
+  }, attributes), /*#__PURE__*/React.createElement("code", {
+    className: "sdoc-code-block-code ".concat(white_space === 'nowrap' ? 'sdoc-code-no-wrap' : '')
+  }, children)), showHoverMenu && /*#__PURE__*/React.createElement(CodeBlockHoverMenu, {
+    menuPosition: menuPosition,
+    onChangeLanguage: onChangeLanguage,
+    language: element.language,
+    style: element.style || {
+      white_space: 'nowrap'
+    },
+    onChangeAutoLineWrap: onChangeAutoLineWrap,
+    onDeleteCodeBlock: onDeleteCodeBlock
+  }));
+};
 export var renderCodeBlock = function renderCodeBlock(props, editor) {
   return /*#__PURE__*/React.createElement(CodeBlock, {
     codeBlockProps: _objectSpread({}, props),

package/dist/basic-sdk/extension/plugins/text-align/menu/style.css

@@ -21,7 +21,6 @@
 }
 
 .align-menu .align-toggle .sdocfont {
-  height: 30px;
   display: inline-flex;
   justify-content: center;
   align-items: center;

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

@@ -1,9 +1,13 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["text"];
 import React from 'react';
 import Caret from './caret';
 var renderText = function renderText(props, editor) {
   var attributes = props.attributes,
     children = props.children,
     leaf = props.leaf;
+  var text = leaf.text,
+    rest = _objectWithoutProperties(leaf, _excluded);
   var markedChildren = React.cloneElement(children);
   if (leaf.BOLD) {
     markedChildren = /*#__PURE__*/React.createElement("strong", null, markedChildren);
@@ -49,7 +53,8 @@ var renderText = function renderText(props, editor) {
   return /*#__PURE__*/React.createElement("span", Object.assign({
     "data-id": leaf.id
   }, attributes, {
-    style: style
+    style: style,
+    className: Object.keys(rest).join(' ')
   }), leaf.isCaret ? /*#__PURE__*/React.createElement(Caret, leaf) : null, markedChildren);
 };
 export default renderText;

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

@@ -3,9 +3,9 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import React from 'react';
 import { Node } from '@seafile/slate';
 import { useSlateStatic } from '@seafile/slate-react';
-import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, IMAGE, ELEMENT_TYPE } from '../constants';
+import { BLOCKQUOTE, LINK, CHECK_LIST_ITEM, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, LIST_ITEM, LIST_LIC, ORDERED_LIST, PARAGRAPH, UNORDERED_LIST, CODE_BLOCK, CODE_LINE, IMAGE, ELEMENT_TYPE } from '../constants';
 import { BlockquotePlugin, LinkPlugin, CheckListPlugin, HeaderPlugin, ListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin } from '../plugins';
-import { Placeholder } from '../core';
+import { Placeholder, findPath } from '../core';
 var CustomElement = function CustomElement(props) {
   var editor = useSlateStatic();
   var attributes = props.attributes,
@@ -92,6 +92,16 @@ var CustomElement = function CustomElement(props) {
           renderCodeBlock = _CodeBlockPlugin$rend[0];
         return renderCodeBlock(props, editor);
       }
+    case CODE_LINE:
+      {
+        var path = findPath(editor, element);
+        var lineNumber = path.at(-1) + 1;
+        return /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
+          className: 'sdoc-code-line'
+        }), lineNumber && /*#__PURE__*/React.createElement("span", {
+          className: "sdoc-code-line-index"
+        }, lineNumber), children);
+      }
     case IMAGE:
       {
         var _ImagePlugin$renderEl = _slicedToArray(ImagePlugin.renderElements, 1),

package/dist/basic-sdk/highlight-decorate/index.js

@@ -0,0 +1,22 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useCallback } from 'react';
+import { Element } from '@seafile/slate';
+import { CODE_LINE } from '../extension/constants';
+import { SetNodeToDecorations } from './setNodeToDecorations';
+export var useHighlightDecorate = function useHighlightDecorate(editor) {
+  var highlightDecorate = useCallback(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      node = _ref2[0],
+      path = _ref2[1];
+    if (Element.isElement(node) && node.type === CODE_LINE) {
+      var ranges = editor.nodeToDecorations.get(node) || [];
+      return ranges;
+    }
+    return [];
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [editor.nodeToDecorations]);
+  return {
+    highlightDecorate: highlightDecorate
+  };
+};