@seafile/sdoc-editor 0.1.47 → 0.1.49

package/dist/basic-sdk/assets/css/sdoc-editor-plugins.css

@@ -69,3 +69,12 @@
   font-size: 12px;
 }
 
+/* caret */
+.sdoc-editor-container .article .caret-item .caret-name {
+  display: none;
+}
+
+.sdoc-editor-container .article .caret-item:hover .caret-name {
+  display: block;
+}
+

package/dist/basic-sdk/cursor/decorate-cursors.js

@@ -0,0 +1,32 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { Text, Path, Range } from '@seafile/slate';
+export var decorateCursors = function decorateCursors(nodeEntry, storageCursors) {
+  var ranges = [];
+  var _nodeEntry = _slicedToArray(nodeEntry, 2),
+    node = _nodeEntry[0],
+    path = _nodeEntry[1];
+  var cursors = Object.values(storageCursors || {});
+  if (Text.isText(node) && (cursors === null || cursors === void 0 ? void 0 : cursors.length)) {
+    cursors.forEach(function (cursor) {
+      if (Range.includes(cursor, path)) {
+        var focus = cursor.focus,
+          anchor = cursor.anchor;
+        var isFocusNode = Path.equals(focus.path, path);
+        var isAnchorNode = Path.equals(anchor.path, path);
+        ranges.push(_objectSpread(_objectSpread({}, cursor), {}, {
+          isCaret: isFocusNode,
+          anchor: {
+            path: path,
+            offset: isAnchorNode ? anchor.offset : node.text.length
+          },
+          focus: {
+            path: path,
+            offset: isFocusNode ? focus.offset : 0
+          }
+        }));
+      }
+    });
+  }
+  return ranges;
+};

package/dist/basic-sdk/cursor/helper.js

@@ -1,5 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import { Range } from '@seafile/slate';
 import randomColor from 'randomcolor';
 
 // selection: { anchor, focus }
@@ -15,9 +14,7 @@ export var setCursor = function setCursor(editor, operations, user, selection, c
   var lastCursorOp = cursorOps[cursorOps.length - 1];
   if (selection) {
     var newCursor = lastCursorOp && lastCursorOp.newProperties || {};
-    var newCursorData = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, oldCursor), newCursor), selection), _objectSpread(_objectSpread({}, cursorData), {}, {
-      isForward: Range.isForward(selection)
-    }));
+    var newCursorData = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, oldCursor), newCursor), selection), cursorData);
     editor.cursors[clientId] = newCursorData;
   } else {
     delete editor.cursors[clientId];
@@ -37,7 +34,6 @@ export var generateCursorData = function generateCursorData(config) {
   var color = randomColor(options);
   return {
     name: user.name,
-    color: color,
-    alphaColor: color.slice(0, -2) + '0.2)'
+    color: color
   };
 };

package/dist/basic-sdk/decorates/index.js

@@ -0,0 +1,25 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { useCallback } from 'react';
+import { decorateCursors } from '../cursor/decorate-cursors';
+export var useDecorate = function useDecorate(editor) {
+  var cursors = editor.cursors;
+  var decorate = useCallback(function (nodeEntry) {
+    var ranges = [];
+    var addRanges = function addRanges(newRanges) {
+      if (newRanges.length) {
+        ranges = [].concat(_toConsumableArray(ranges), _toConsumableArray(newRanges));
+      }
+    };
+    console.log('eeee');
+    // useCursor
+    addRanges(decorateCursors(nodeEntry, cursors));
+
+    // others decorate
+    // ...
+
+    return ranges;
+  }, [cursors]);
+  return {
+    decorate: decorate
+  };
+};

package/dist/basic-sdk/editor.js

@@ -7,13 +7,13 @@ import React from 'react';
 import { Node } from '@seafile/slate';
 import { Editable, Slate, ReactEditor } from '@seafile/slate-react';
 import { Editor } from '@seafile/slate';
-import editor, { renderLeaf as _renderLeaf, renderElement as _renderElement, Toolbar } from './extension';
+import editor, { renderLeaf, renderElement, Toolbar } from './extension';
 import { withSocketIO } from './socket';
 import withNodeId from './node-id';
 import SDocOutline from './outline';
 import EventProxy from './utils/event-handler';
 import { focusEditor } from './extension/core';
-import { getDecorate } from './cursor/decorate';
+import { uiDecorate } from './decorates';
 import './assets/css/layout.css';
 import './assets/css/sdoc-editor-plugins.css';
 var SDocEditor = /*#__PURE__*/function (_React$Component) {
@@ -65,6 +65,13 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
     }
     _this.editor.cursors = cursors;
     _this.eventProxy = new EventProxy(_this.editor);
+    _this.renderElement = function (props) {
+      return renderElement(props, _this.editor);
+    };
+    _this.renderLeaf = function (props) {
+      return renderLeaf(props, _this.editor);
+    };
+    _this.decorate = uiDecorate(_this.editor);
     return _this;
   }
   _createClass(SDocEditor, [{
@@ -84,11 +91,9 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
       var slateValue = this.state.slateValue;
       var config = this.props.config;
       var docUuid = config.docUuid;
-      var decorate = getDecorate(this.editor);
       return /*#__PURE__*/React.createElement("div", {
         className: "sdoc-editor-container"
       }, /*#__PURE__*/React.createElement(Toolbar, {
@@ -107,15 +112,11 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("div", {
         className: "article"
       }, /*#__PURE__*/React.createElement(Editable, {
-        renderElement: function renderElement(props) {
-          return _renderElement(props, _this2.editor);
-        },
-        renderLeaf: function renderLeaf(props) {
-          return _renderLeaf(props, _this2.editor);
-        },
+        renderElement: this.renderElement,
+        renderLeaf: this.renderLeaf,
         onKeyDown: this.eventProxy.onKeyDown,
         onDOMBeforeInput: this.onDOMBeforeInput,
-        decorate: decorate
+        decorate: this.decorate
       }))))));
     }
   }]);

package/dist/basic-sdk/editor2.js

@@ -0,0 +1,107 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _this = this;
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Node } from '@seafile/slate';
+import { Editable, Slate, ReactEditor } from '@seafile/slate-react';
+import { Editor } from '@seafile/slate';
+import { useUpdate } from 'ahooks';
+import editor2, { renderLeaf, renderElement, Toolbar } from './extension';
+import { withSocketIO } from './socket';
+import withNodeId from './node-id';
+import SDocOutline from './outline';
+import EventProxy from './utils/event-handler';
+import { focusEditor } from './extension/core';
+import './assets/css/layout.css';
+import './assets/css/sdoc-editor-plugins.css';
+import { useDecorate } from './decorates';
+var SDocEditor = function SDocEditor(_ref) {
+  var document = _ref.document,
+    config = _ref.config;
+  var _useState = useState(document.children),
+    _useState2 = _slicedToArray(_useState, 2),
+    slateValue = _useState2[0],
+    setSlateValue = _useState2[1];
+
+  // init editor
+  var editor = useMemo(function () {
+    var newEditor = withNodeId(withSocketIO(editor2, {
+      document: document,
+      config: config
+    }));
+    var cursors = document.cursors;
+    newEditor.cursors = cursors || {};
+    return newEditor;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var eventProxy = useMemo(function () {
+    return new EventProxy(editor);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // useMount: init socket connection
+  useEffect(function () {
+    editor.openConnection();
+    return function () {
+      editor.closeConnection();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // useMount: focus editor
+  useEffect(function () {
+    if (Node.string(editor) === '') {
+      var firstNodePath = ReactEditor.findPath(editor, editor.children[0]);
+      focusEditor(_this.editor, firstNodePath);
+    }
+  }, []);
+  var _renderElement = useCallback(function (props) {
+    return renderElement(props, editor);
+  }, []);
+  var _renderLeaf = useCallback(function (props) {
+    return renderLeaf(props, editor);
+  }, []);
+  var onChange = useCallback(function (slateValue) {
+    setSlateValue(_toConsumableArray(slateValue));
+  }, []);
+  var update = useUpdate();
+  var onDOMBeforeInput = useCallback(function (e) {
+    if (e.data && e.data !== '') {
+      var _node$;
+      var node = Editor.parent(editor, editor.selection);
+      editor.onDOMBeforeInputId = (_node$ = node[0]) === null || _node$ === void 0 ? void 0 : _node$.id;
+      update();
+    } else {
+      editor.onDOMBeforeInputId = null;
+      update();
+    }
+  }, []);
+  var _useDecorate = useDecorate(editor),
+    decorate = _useDecorate.decorate;
+  console.log('dadadihuaile');
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-editor-container"
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    editor: editor
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-editor-content"
+  }, /*#__PURE__*/React.createElement(SDocOutline, {
+    doc: slateValue,
+    docUuid: config.docUuid
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex-fill o-auto"
+  }, /*#__PURE__*/React.createElement(Slate, {
+    editor: editor,
+    value: slateValue,
+    onChange: onChange
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "article"
+  }, /*#__PURE__*/React.createElement(Editable, {
+    renderElement: _renderElement,
+    renderLeaf: _renderLeaf,
+    onKeyDown: eventProxy.onKeyDown,
+    onDOMBeforeInput: onDOMBeforeInput,
+    decorate: decorate
+  }))))));
+};
+export default SDocEditor;

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

@@ -6,12 +6,12 @@ import renderElement from './render/render-element';
 import renderLeaf from './render/render-leaf';
 import Toolbar from './toolbar';
 var baseEditor = withHistory(withReact(createEditor()));
-var editor = Plugins.reduce(function (editor, pluginItem) {
+var editor2 = Plugins.reduce(function (editor, pluginItem) {
   var withPlugin = pluginItem.editorPlugin;
   if (withPlugin) {
     return withPlugin(editor);
   }
   return editor;
 }, baseEditor);
-export default editor;
+export default editor2;
 export { renderLeaf, renderElement, Toolbar };

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

@@ -13,7 +13,7 @@ var cursorStyleBase = {
 };
 var caretStyleBase = {
   position: 'absolute',
-  pointerEvents: 'none',
+  // pointerEvents: 'none',
   userSelect: 'none',
   height: '1.2em',
   width: 2,
@@ -21,18 +21,19 @@ var caretStyleBase = {
 };
 var Caret = function Caret(_ref) {
   var color = _ref.color,
-    isForward = _ref.isForward,
     name = _ref.name;
   var cursorStyles = _objectSpread(_objectSpread({}, cursorStyleBase), {}, {
     background: color,
-    left: isForward ? '100%' : '0%'
+    left: '0%',
+    cursor: 'default'
   });
   var caretStyles = _objectSpread(_objectSpread({}, caretStyleBase), {}, {
     background: color,
-    left: isForward ? '100%' : '0%'
+    left: '0%'
   });
-  caretStyles[isForward ? 'bottom' : 'top'] = 0;
+  caretStyles['top'] = 1;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: "caret-item",
     contentEditable: false,
     style: caretStyles
   }, /*#__PURE__*/React.createElement("span", {
@@ -40,6 +41,7 @@ var Caret = function Caret(_ref) {
       position: 'relative'
     }
   }, /*#__PURE__*/React.createElement("span", {
+    className: "caret-name",
     contentEditable: false,
     style: cursorStyles
   }, name))));

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

@@ -39,12 +39,17 @@ var renderText = function renderText(props, editor) {
       className: "token ".concat(leaf.type)
     }, markedChildren);
   }
+  var style = {
+    position: 'relative'
+  };
+  if (leaf.isCaret) {
+    style['display'] = 'inline-block';
+    style['minWidth'] = '2px';
+  }
   return /*#__PURE__*/React.createElement("span", Object.assign({
     "data-id": leaf.id
   }, attributes, {
-    style: {
-      position: 'relative'
-    }
+    style: style
   }), leaf.isCaret ? /*#__PURE__*/React.createElement(Caret, leaf) : null, markedChildren);
 };
 export default renderText;

package/dist/basic-sdk/index.js

@@ -1,4 +1,4 @@
-import SDocEditor from './editor';
+import SDocEditor from './editor2';
 import SDocViewer from './viewer';
 import SDocOutline from './outline';
 import EventBus from './utils/event-bus';

package/dist/basic-sdk/outline.js

@@ -115,7 +115,9 @@ var OutlineItem = /*#__PURE__*/function (_React$PureComponent2) {
         onClick: this.onItemClick,
         onMouseOver: this.onMouseOver,
         onMouseOut: this.onMouseOut
-      }, children[0].text);
+      }, children.map(function (child) {
+        return child.text;
+      }).join(''));
     }
   }]);
   return OutlineItem;

package/dist/basic-sdk/socket/helpers.js

@@ -262,8 +262,8 @@ export var syncRemoteOperations = function syncRemoteOperations(editor, remoteOp
       }
       editor.apply(op);
     }
-    var username = context.getSetting('username');
-    if (user && user.username !== username) {
+    var currentUser = editor.user;
+    if (user && user.username !== currentUser.username) {
       setCursor(editor, remoteOperations, user, selection, cursorData);
       // sync cursor position
       editor.onChange();

package/dist/basic-sdk/socket/with-socket-io.js

@@ -4,11 +4,13 @@ import SocketManager from './socket-manager';
 var withSocketIO = function withSocketIO(editor, options) {
   var onChange = editor.onChange;
   var newEditor = editor;
-  var cursorData = generateCursorData(options.config);
   var socketManager = null;
+  var user = options.config.user;
+  newEditor.user = user;
   newEditor.openConnection = function () {
     var document = options.document,
       config = options.config;
+    var cursorData = generateCursorData(options.config);
     config['cursorData'] = cursorData;
     socketManager = SocketManager.getInstance(newEditor, document, config);
   };

package/dist/components/doc-operations/style.css

@@ -6,6 +6,7 @@
 .doc-ops .op-item {
   margin-left: 1rem;
   display: flex;
+  align-items: center;
   position: relative;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seafile/sdoc-editor",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "private": false,
   "description": "This is a sdoc editor",
   "main": "dist/index.js",
@@ -10,6 +10,7 @@
     "@seafile/slate-history": "0.86.2",
     "@seafile/slate-hyperscript": "0.81.7",
     "@seafile/slate-react": "0.92.2",
+    "ahooks": "3.7.7",
     "classnames": "2.3.2",
     "deep-copy": "1.4.2",
     "is-hotkey": "0.2.0",

package/dist/basic-sdk/cursor/decorate.js

@@ -1,35 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Text, Path, Range } from '@seafile/slate';
-export var getDecorate = function getDecorate(editor) {
-  return function (nodeEntry) {
-    var ranges = [];
-    var _nodeEntry = _slicedToArray(nodeEntry, 2),
-      node = _nodeEntry[0],
-      path = _nodeEntry[1];
-    var cursors = Object.values(editor.cursors || {});
-    if (Text.isText(node) && (cursors === null || cursors === void 0 ? void 0 : cursors.length)) {
-      cursors.forEach(function (cursor) {
-        if (Range.includes(cursor, path)) {
-          var focus = cursor.focus,
-            anchor = cursor.anchor,
-            isForward = cursor.isForward;
-          var isFocusNode = Path.equals(focus.path, path);
-          var isAnchorNode = Path.equals(anchor.path, path);
-          ranges.push(_objectSpread(_objectSpread({}, cursor), {}, {
-            isCaret: isFocusNode,
-            anchor: {
-              path: path,
-              offset: isAnchorNode ? anchor.offset : isForward ? 0 : node.text.length
-            },
-            focus: {
-              path: path,
-              offset: isFocusNode ? focus.offset : isForward ? node.text.length : 0
-            }
-          }));
-        }
-      });
-    }
-    return ranges;
-  };
-};