@seafile/sdoc-editor 0.1.45 → 0.1.47

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

@@ -19,6 +19,6 @@
   color: #333;
 }
 
-.sdoc-editor-page-header .doc-info .sdocfont {
-  font-size: 18px;
+.sdoc-editor-page-header .doc-info .sdoc-link {
+  font-size: 14px;
 }

package/dist/basic-sdk/assets/css/layout.css

@@ -32,3 +32,7 @@
   border: 1px solid #e5e6e8;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
 }
+
+.sdoc-editor-container .sdoc-editor-content .article > div {
+  caret-color: blue;
+}

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

@@ -5,25 +5,28 @@ import randomColor from 'randomcolor';
 // selection: { anchor, focus }
 // cursor: { anchor, focus }
 
-export var setCursor = function setCursor(id, editor, operations, cursorData) {
+export var setCursor = function setCursor(editor, operations, user, selection, cursorData) {
+  var clientId = user.username;
   var cursorOps = operations.filter(function (operation) {
     return operation.type === 'set_selection';
   });
   if (!editor.cursors) editor.cursors = {};
-  var oldCursor = editor.cursors[id] ? editor.cursors[id] : {};
+  var oldCursor = editor.cursors[clientId] ? editor.cursors[clientId] : {};
   var lastCursorOp = cursorOps[cursorOps.length - 1];
-  var selection = editor.selection;
   if (selection) {
     var newCursor = lastCursorOp && lastCursorOp.newProperties || {};
     var newCursorData = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, oldCursor), newCursor), selection), _objectSpread(_objectSpread({}, cursorData), {}, {
       isForward: Range.isForward(selection)
     }));
-    editor.cursors[id] = newCursorData;
+    editor.cursors[clientId] = newCursorData;
   } else {
-    delete editor.cursors[id];
+    delete editor.cursors[clientId];
   }
   return editor;
 };
+export var deleteCursor = function deleteCursor(editor, username) {
+  delete editor.cursors[username];
+};
 export var generateCursorData = function generateCursorData(config) {
   var user = config.user;
   var options = {

package/dist/basic-sdk/editor.js

@@ -46,7 +46,9 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
         });
       }
     };
-    var children = props.document.children;
+    var _props$document = props.document,
+      children = _props$document.children,
+      cursors = _props$document.cursors;
     _this.state = {
       slateValue: children,
       isLoading: true
@@ -61,6 +63,7 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
         config: config
       });
     }
+    _this.editor.cursors = cursors;
     _this.eventProxy = new EventProxy(_this.editor);
     return _this;
   }
@@ -85,7 +88,7 @@ var SDocEditor = /*#__PURE__*/function (_React$Component) {
       var slateValue = this.state.slateValue;
       var config = this.props.config;
       var docUuid = config.docUuid;
-      var decorate = getDecorate(editor);
+      var decorate = getDecorate(this.editor);
       return /*#__PURE__*/React.createElement("div", {
         className: "sdoc-editor-container"
       }, /*#__PURE__*/React.createElement(Toolbar, {

package/dist/basic-sdk/extension/constants/element-type.js

@@ -1,6 +1,8 @@
 export var BLOCKQUOTE = 'blockquote';
 export var BOLD = 'bold';
 export var ITALIC = 'italic';
+export var UNDERLINE = 'underline';
+export var STRIKETHROUGH = 'strikethrough';
 export var HEADER = 'header';
 export var HEADER1 = 'header1';
 export var HEADER2 = 'header2';

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _MENUS_CONFIG_MAP, _HEADER_TITLE_MAP;
 // extension plugin
 import * as ELEMENT_TYPE from './element-type';
-import { BLOCKQUOTE, BOLD, ITALIC, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, PARAGRAPH, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, BOLD_ITALIC } from './element-type';
+import { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, BOLD_ITALIC } from './element-type';
 import KEYBOARD from './keyboard';
 
 // history
@@ -59,6 +59,16 @@ export var MENUS_CONFIG_MAP = (_MENUS_CONFIG_MAP = {}, _defineProperty(_MENUS_CO
   iconClass: 'sdocfont sdoc-bold',
   text: 'bold',
   type: 'BOLD'
+}, {
+  id: UNDERLINE,
+  iconClass: 'sdocfont sdoc-underline',
+  text: 'underline',
+  type: 'UNDERLINE'
+}, {
+  id: STRIKETHROUGH,
+  iconClass: 'sdocfont sdoc-strikethrough',
+  text: 'strikethrough',
+  type: 'STRIKETHROUGH'
 }]), _defineProperty(_MENUS_CONFIG_MAP, UNDO, {
   id: UNDO,
   iconClass: 'sdocfont sdoc-revoke',
@@ -90,4 +100,4 @@ export var TABLE_ELEMENT_POSITION = {
   AFTER: 'after',
   BEFORE: 'before'
 };
-export { BLOCKQUOTE, BOLD, ITALIC, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, PARAGRAPH, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, BOLD_ITALIC, ELEMENT_TYPE, KEYBOARD };
+export { BLOCKQUOTE, HEADER, HEADER1, HEADER2, HEADER3, HEADER4, HEADER5, HEADER6, PARAGRAPH, BOLD, ITALIC, UNDERLINE, STRIKETHROUGH, ORDERED_LIST, UNORDERED_LIST, LIST_ITEM, LIST_LIC, CHECK_LIST, CHECK_LIST_ITEM, LINK, HTML, CODE_BLOCK, CODE_LINE, IMAGE, TABLE, TABLE_CELL, TABLE_ROW, FORMULA, COLUMN, TEXT_STYLE, BOLD_ITALIC, ELEMENT_TYPE, KEYBOARD };

package/dist/basic-sdk/extension/plugins/table/menu/active-table-menu/index.css

@@ -2,6 +2,7 @@
   padding: 8px 0;
 }
 
-.sdoc-table-menu-group .sdocfont {
+.sdoc-table-menu-group .sdoc-drop-down,
+.sdoc-table-menu-group .sdoc-caret-up {
   transform: scale(.8);
 }

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

@@ -11,10 +11,13 @@ import { getValue, isMenuDisabled, addMark, removeMark } from '../helpers';
 var TextStyleMenuList = /*#__PURE__*/function (_React$Component) {
   _inherits(TextStyleMenuList, _React$Component);
   var _super = _createSuper(TextStyleMenuList);
-  function TextStyleMenuList(props) {
+  function TextStyleMenuList() {
     var _this;
     _classCallCheck(this, TextStyleMenuList);
-    _this = _super.call(this, props);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
     _this.isActive = function (editor, type) {
       var isMark = getValue(editor, type);
       return !!isMark;
@@ -36,43 +39,36 @@ var TextStyleMenuList = /*#__PURE__*/function (_React$Component) {
       }
       focusEditor(editor);
     };
-    _this.state = {
-      isShowLinkDialog: false
-    };
     return _this;
   }
   _createClass(TextStyleMenuList, [{
     key: "getTextStyleMenuList",
     value: function getTextStyleMenuList() {
+      var _this2 = this;
       var _this$props = this.props,
         isRichEditor = _this$props.isRichEditor,
         className = _this$props.className,
         editor = _this$props.editor;
-      var textStyleMenuList = [{
-        isRichEditor: isRichEditor,
-        className: className,
-        disabled: this.isDisabled(),
-        isActive: this.isActive(editor, 'ITALIC'),
-        onMouseDown: this.onMouseDown
-      }, {
-        isRichEditor: isRichEditor,
-        className: className,
-        disabled: this.isDisabled(),
-        isActive: this.isActive(editor, 'BOLD'),
-        onMouseDown: this.onMouseDown
-      }];
-      return textStyleMenuList;
+      var list = MENUS_CONFIG_MAP[TEXT_STYLE].map(function (item) {
+        var itemProps = {
+          isRichEditor: isRichEditor,
+          className: className,
+          disabled: _this2.isDisabled(),
+          isActive: _this2.isActive(editor, item.type),
+          onMouseDown: _this2.onMouseDown
+        };
+        return _objectSpread(_objectSpread({}, itemProps), item);
+      });
+      return list;
     }
   }, {
     key: "render",
     value: function render() {
       var textStyleMenuList = this.getTextStyleMenuList();
-      return /*#__PURE__*/React.createElement(React.Fragment, null, textStyleMenuList.map(function (menuItem, index) {
-        var menuItemConfig = MENUS_CONFIG_MAP[TEXT_STYLE][index];
-        var menuItemProps = _objectSpread(_objectSpread({}, menuItem), menuItemConfig);
+      return /*#__PURE__*/React.createElement(React.Fragment, null, textStyleMenuList.map(function (itemProps, index) {
         return /*#__PURE__*/React.createElement(MenuItem, Object.assign({
           key: index
-        }, menuItemProps));
+        }, itemProps));
       }));
     }
   }]);

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

@@ -8,12 +8,26 @@ var renderText = function renderText(props, editor) {
   if (leaf.BOLD) {
     markedChildren = /*#__PURE__*/React.createElement("strong", null, markedChildren);
   }
-  if (leaf.CODE) {
-    markedChildren = /*#__PURE__*/React.createElement("code", null, markedChildren);
-  }
   if (leaf.ITALIC) {
     markedChildren = /*#__PURE__*/React.createElement("i", null, markedChildren);
   }
+  if (leaf.UNDERLINE) {
+    markedChildren = /*#__PURE__*/React.createElement("span", {
+      style: {
+        textDecoration: 'underline'
+      }
+    }, markedChildren);
+  }
+  if (leaf.STRIKETHROUGH) {
+    markedChildren = /*#__PURE__*/React.createElement("span", {
+      style: {
+        textDecoration: 'line-through'
+      }
+    }, markedChildren);
+  }
+  if (leaf.CODE) {
+    markedChildren = /*#__PURE__*/React.createElement("code", null, markedChildren);
+  }
   if (leaf.DELETE) {
     markedChildren = /*#__PURE__*/React.createElement("del", null, markedChildren);
   }

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

@@ -4,6 +4,7 @@ import { Editor, Operation } from '@seafile/slate';
 import { getNode } from '../extension/core';
 import * as OPERATION from '../node-id/constants';
 import { setCursor } from '../cursor/helper';
+import context from '../../context';
 export var getNodePathById = function getNodePathById(rootNode, nodeId) {
   var path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   if (rootNode.id === nodeId) return path;
@@ -251,7 +252,7 @@ export var reExecRevertOperationList = function reExecRevertOperationList(editor
     _loop2();
   }
 };
-export var syncRemoteOperations = function syncRemoteOperations(editor, remoteOperations, user) {
+export var syncRemoteOperations = function syncRemoteOperations(editor, remoteOperations, user, selection, cursorData) {
   if (remoteOperations.length === 0) return;
   Editor.withoutNormalizing(editor, function () {
     for (var i = 0; i < remoteOperations.length; i++) {
@@ -261,6 +262,11 @@ export var syncRemoteOperations = function syncRemoteOperations(editor, remoteOp
       }
       editor.apply(op);
     }
-    setCursor(user.username, editor, remoteOperations);
+    var username = context.getSetting('username');
+    if (user && user.username !== username) {
+      setCursor(editor, remoteOperations, user, selection, cursorData);
+      // sync cursor position
+      editor.onChange();
+    }
   });
 };

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

@@ -78,13 +78,14 @@ var SocketClient = /*#__PURE__*/_createClass(function SocketClient(config) {
     var socketManager = SocketManager.getInstance();
     socketManager.dispatchConnectState('leave-room', username);
   };
-  this.sendOperations = function (operations, version, callback) {
+  this.sendOperations = function (operations, version, selection, callback) {
     debug('=========== send operations ==========');
     debug('%O', operations);
     debug('======================================');
     _this.socket.emit('update-document', _this.getParams({
       operations: operations,
-      version: version
+      version: version,
+      selection: selection
     }), function (result) {
       callback && callback(result);
     });

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

@@ -4,6 +4,7 @@ import EventBus from '../utils/event-bus';
 import { syncRemoteOperations, reExecRevertOperationList, revertOperationList } from './helpers';
 import SocketClient from './socket-client';
 import debug from '../utils/debug';
+import { deleteCursor } from '../cursor/helper';
 var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, document, config) {
   var _this = this;
   _classCallCheck(this, SocketManager);
@@ -28,7 +29,8 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
     _this.dispatchConnectState('is-saving');
     var version = _this.document.version;
     var operations = _this.pendingOperationList.shift();
-    _this.socketClient.sendOperations(operations, version, _this.sendOperationsCallback);
+    var selection = _this.editor.selection;
+    _this.socketClient.sendOperations(operations, version, selection, _this.sendOperationsCallback);
   };
   this.sendOperationsCallback = function (result) {
     if (result && result.success) {
@@ -84,10 +86,12 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
 
         // 2. execute operations
         var operations = params.operations,
-          user = params.user;
+          user = params.user,
+          selection = params.selection,
+          cursorData = params.cursor_data;
         // 2.1 Update content & version
         debug('execute remote operations: %O', operations);
-        syncRemoteOperations(_this.editor, operations, user);
+        syncRemoteOperations(_this.editor, operations, user, selection, cursorData);
 
         // 2.2 Update document
         _this.document.version = serverVersion;
@@ -158,6 +162,10 @@ var SocketManager = /*#__PURE__*/_createClass(function SocketManager(editor, doc
     });
   };
   this.dispatchConnectState = function (type, message) {
+    if (type === 'leave-room') {
+      deleteCursor(_this.editor, message);
+      _this.editor.onChange();
+    }
     _this.eventBus.dispatch(type, message);
   };
   this.closeSocketConnect = function () {

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

@@ -1,5 +1,5 @@
 var _this = this;
-import { generateCursorData, setCursor } from '../cursor/helper';
+import { generateCursorData } from '../cursor/helper';
 import SocketManager from './socket-manager';
 var withSocketIO = function withSocketIO(editor, options) {
   var onChange = editor.onChange;
@@ -21,9 +21,6 @@ var withSocketIO = function withSocketIO(editor, options) {
     if (!newEditor.isRemote && operations.length > 0) {
       var _socketManager = SocketManager.getInstance();
       _socketManager.addOperations && _socketManager.addOperations(operations);
-      var config = options.config;
-      var clientId = config.user.username;
-      setCursor(clientId, editor, operations, cursorData);
     }
     onChange();
   };

package/dist/pages/simple-editor.js

@@ -68,7 +68,8 @@ var SimpleEditor = /*#__PURE__*/function (_React$Component) {
               if (result && !result.children) {
                 result = {
                   version: 0,
-                  children: result.content
+                  children: result.content,
+                  cursors: result.cursors || {}
                 };
               }
               this.setState({

package/package.json

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

package/public/locales/en/sdoc-editor.json

@@ -1,6 +1,8 @@
 {
   "bold": "Bold",
   "italic": "Italic",
+  "underline": "Underline",
+  "strikethrough": "Strikethrough",
   "inline_code": "Code",
   "header_one": "Heading 1",
   "header_two": "Heading 2",