@seafile/sdoc-editor 0.1.60 → 0.1.62

package/dist/basic-sdk/extension/plugins/table/render/table-root.js

@@ -1,13 +1,15 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import classnames from 'classnames';
-import { TABLE_MAX_WIDTH } from '../constants';
+import { useSlateStatic } from '@seafile/slate-react';
 import { TableRootContext } from './hooks';
 var TableRoot = function TableRoot(_ref) {
   var attributes = _ref.attributes,
     _ref$columns = _ref.columns,
     columns = _ref$columns === void 0 ? [] : _ref$columns,
     children = _ref.children;
+  var editor = useSlateStatic();
   var tableScrollWrapper = useRef(null);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
@@ -16,19 +18,22 @@ var TableRoot = function TableRoot(_ref) {
   var allWidth = columns.reduce(function (pre, cur) {
     return pre + cur.width;
   }, 0);
-  var onScroll = function onScroll(event) {
+  var onScroll = useCallback(function (event) {
     setScrollLeft(event.target.scrollLeft);
-  };
+  }, []);
   return /*#__PURE__*/React.createElement(TableRootContext.Provider, {
     value: tableScrollWrapper.current
-  }, /*#__PURE__*/React.createElement("div", Object.assign({
-    className: classnames('sdoc-table-wrapper', {
-      'scroll position-relative': allWidth > TABLE_MAX_WIDTH
+  }, /*#__PURE__*/React.createElement("div", Object.assign({}, attributes, {
+    className: classnames('sdoc-table-wrapper', attributes.className, {
+      'scroll position-relative': allWidth > editor.width
+    }),
+    style: _objectSpread(_objectSpread({}, attributes.style), {}, {
+      maxWidth: editor.width
     })
-  }, attributes), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: classnames('sdoc-table-scroll-wrapper', {
-      'scroll-at-center': scrollLeft + TABLE_MAX_WIDTH !== allWidth && scrollLeft > 0,
-      'scroll-at-right': scrollLeft + TABLE_MAX_WIDTH === allWidth,
+      'scroll-at-center': scrollLeft + editor.width !== allWidth && scrollLeft > 0,
+      'scroll-at-right': scrollLeft + editor.width === allWidth,
       'scroll-at-left': scrollLeft === 0
     }),
     ref: tableScrollWrapper,

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

@@ -9,6 +9,18 @@ var renderText = function renderText(props, editor) {
   var text = leaf.text,
     rest = _objectWithoutProperties(leaf, _excluded);
   var markedChildren = React.cloneElement(children);
+  var style = {};
+  if (leaf.isCaret) {
+    style['position'] = 'relative';
+    style['display'] = 'inline-block';
+    style['minWidth'] = '2px';
+  }
+  if (leaf.background_color) {
+    style['backgroundColor'] = leaf.background_color;
+  }
+  if (leaf.color) {
+    style['color'] = leaf.color;
+  }
   if (leaf.BOLD) {
     markedChildren = /*#__PURE__*/React.createElement("strong", null, markedChildren);
   }
@@ -36,19 +48,15 @@ var renderText = function renderText(props, editor) {
     markedChildren = /*#__PURE__*/React.createElement("del", null, markedChildren);
   }
   if (leaf.ADD) {
-    markedChildren = /*#__PURE__*/React.createElement("ins", null, markedChildren);
+    markedChildren = /*#__PURE__*/React.createElement("span", null, markedChildren);
   }
   if (leaf.decoration) {
     markedChildren = /*#__PURE__*/React.createElement("span", {
       className: "token ".concat(leaf.type)
     }, markedChildren);
   }
-  var style = {
-    position: 'relative'
-  };
-  if (leaf.isCaret) {
-    style['display'] = 'inline-block';
-    style['minWidth'] = '2px';
+  if (leaf.bg_color) {
+    style['backgroundColor'] = leaf.bg_color;
   }
   return /*#__PURE__*/React.createElement("span", Object.assign({
     "data-id": leaf.id

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

@@ -136,7 +136,22 @@ var CustomElement = function CustomElement(props) {
       }
   }
 };
-var renderElement = function renderElement(props) {
+var RenderElement = function RenderElement(props) {
   return /*#__PURE__*/React.createElement(CustomElement, props);
+
+  // const { element } = props;
+  // const editor = useSlateStatic();
+  // const comments = editor.comments_map?.[element.id] || [];
+  // return (
+  //   <div className='seafile-block-container'>
+  //     <CustomElement {...props} />
+  //     {comments.length > 0 && (
+  //       <div className='comment-count'>
+  //         <span className='comment-count__btn'>{comments.length}</span>
+  //       </div>
+  //     )}
+  //   </div>
+  // );
 };
-export default renderElement;
+
+export default RenderElement;

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

@@ -1,5 +1,5 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useEffect, useState } from 'react';
+import React from 'react';
+import useSelectionUpdate from '../../hooks/use-selection-update';
 import { ORDERED_LIST, UNORDERED_LIST } from '../constants';
 import { MenuGroup } from '../menu';
 import QuoteMenu from '../plugins/blockquote/menu';
@@ -13,22 +13,9 @@ import CodeBlockMenu from '../plugins/code-block/menu';
 import TextAlignMenu from '../plugins/text-align/menu';
 import HistoryMenu from './redo-undo';
 import { TableMenu, ActiveTableMenu } from '../plugins/table/menu';
-import EventBus from '../../utils/event-bus';
 var Toolbar = function Toolbar(_ref) {
   var editor = _ref.editor;
-  var _useState = useState({}),
-    _useState2 = _slicedToArray(_useState, 2),
-    update = _useState2[1];
-  useEffect(function () {
-    var onChange = function onChange() {
-      return update({});
-    };
-    var eventBus = EventBus.getInstance();
-    var unsubscribe = eventBus.subscribe('change', onChange);
-    return function () {
-      unsubscribe();
-    };
-  }, []);
+  useSelectionUpdate();
   return /*#__PURE__*/React.createElement("div", {
     className: "sdoc-editor-toolbar"
   }, /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(HistoryMenu, {

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

@@ -1,22 +1,16 @@
 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) {
+export var highlightDecorate = function highlightDecorate(editor) {
+  return function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
       node = _ref2[0],
       path = _ref2[1];
+    var ranges = [];
     if (Element.isElement(node) && node.type === CODE_LINE) {
-      var ranges = editor.nodeToDecorations.get(node) || [];
+      ranges = (editor === null || editor === void 0 ? void 0 : editor.nodeToDecorations.get(node)) || [];
       return ranges;
     }
-    return [];
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [editor.nodeToDecorations]);
-  return {
-    highlightDecorate: highlightDecorate
+    return ranges;
   };
 };

package/dist/basic-sdk/hooks/use-scroll-context.js

@@ -0,0 +1,10 @@
+import React, { useContext } from "react";
+export var ScrollContext = React.createContext(null);
+export var useScrollContext = function useScrollContext() {
+  var context = useContext(ScrollContext);
+  if (!context) {
+    throw new Error('The \`useScrollContext\` hook must be used inside the <ScrollContext> component\'s context.');
+  }
+  var scrollRef = context.scrollRef;
+  return scrollRef;
+};

package/dist/basic-sdk/hooks/use-selection-element.js

@@ -0,0 +1,20 @@
+import { Editor, Element } from '@seafile/slate';
+import { useSlateStatic } from '@seafile/slate-react';
+import { useMemo } from 'react';
+export var useSelectionElement = function useSelectionElement() {
+  var editor = useSlateStatic();
+  var nodeEntry = useMemo(function () {
+    var nodeEntry = Editor.above(editor, {
+      mode: 'lowest',
+      match: function match(n) {
+        return Element.isElement(n) && Editor.isBlock(editor, n);
+      }
+    });
+    return nodeEntry;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor.selection]);
+  if (nodeEntry && nodeEntry[0]) {
+    return nodeEntry[0];
+  }
+  return null;
+};

package/dist/basic-sdk/hooks/use-selection-position.js

@@ -0,0 +1,34 @@
+import { ReactEditor, useSlateStatic } from '@seafile/slate-react';
+import { Editor, Element } from '@seafile/slate';
+import { useScrollContext } from './use-scroll-context';
+export var useSelectionPosition = function useSelectionPosition() {
+  var editor = useSlateStatic();
+  if (!editor.selection) return {
+    x: 0,
+    y: 0
+  };
+  var node = Editor.above(editor, {
+    mode: 'lowest',
+    match: function match(n) {
+      return Element.isElement(n) && Editor.isBlock(editor, n);
+    }
+  });
+  var domNode = ReactEditor.toDOMNode(editor, node[0]);
+  var rect = domNode.getBoundingClientRect();
+  return rect;
+};
+export var useCommentListPosition = function useCommentListPosition() {
+  var selectionPosition = useSelectionPosition();
+  var headerHeight = 100;
+  var scrollRef = useScrollContext();
+  var _ref = scrollRef.current || {},
+    _ref$scrollTop = _ref.scrollTop,
+    scrollTop = _ref$scrollTop === void 0 ? 0 : _ref$scrollTop;
+  if (selectionPosition.y !== 0) {
+    selectionPosition.y = selectionPosition.y - headerHeight + scrollTop;
+  }
+  return {
+    x: selectionPosition.x,
+    y: selectionPosition.y
+  };
+};

package/dist/basic-sdk/hooks/use-selection-update.js

@@ -0,0 +1,18 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useEffect, useState } from 'react';
+import EventBus from '../utils/event-bus';
+export default function useSelectionUpdate() {
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    update = _useState2[1];
+  useEffect(function () {
+    var onChange = function onChange() {
+      return update({});
+    };
+    var eventBus = EventBus.getInstance();
+    var unsubscribe = eventBus.subscribe('change', onChange);
+    return function () {
+      unsubscribe();
+    };
+  }, []);
+}

package/dist/basic-sdk/utils/diff-text.js

@@ -0,0 +1,255 @@
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import ObjectUtils from './object-utils';
+var buildValues = function buildValues(diff, components, newString, oldString, valueType, useLongestToken) {
+  var componentPos = 0;
+  var componentLen = components.length;
+  var newPos = 0;
+  var oldPos = 0;
+  for (; componentPos < componentLen; componentPos++) {
+    var component = components[componentPos];
+    if (!component.removed) {
+      if (!component.added && useLongestToken) {
+        var value = newString.slice(newPos, newPos + component.count);
+        // eslint-disable-next-line no-loop-func
+        value = value.map(function (value, i) {
+          var oldValue = oldString[oldPos + i];
+          return oldValue.length > value.length ? oldValue : value;
+        });
+        component.value = diff.join(value, valueType);
+      } else {
+        component.value = diff.join(newString.slice(newPos, newPos + component.count), valueType);
+      }
+      newPos += component.count;
+
+      // Common case
+      if (!component.added) {
+        oldPos += component.count;
+      }
+    } else {
+      component.value = diff.join(oldString.slice(oldPos, oldPos + component.count), valueType);
+      oldPos += component.count;
+
+      // Reverse add and remove so removes are output first to match common convention
+      // The diffing algorithm is tied to add then remove output and this is the simplest
+      // route to get the desired output with minimal overhead.
+      if (componentPos && components[componentPos - 1].added) {
+        var tmp = components[componentPos - 1];
+        components[componentPos - 1] = components[componentPos];
+        components[componentPos] = tmp;
+      }
+    }
+  }
+
+  // Special case handle for when one terminal is ignored (i.e. whitespace).
+  // For this case we merge the terminal into the prior string and drop the change.
+  // This is only available for string mode.
+  var lastComponent = components[componentLen - 1];
+  if (componentLen > 1 && typeof lastComponent.value === 'string' && (lastComponent.added || lastComponent.removed) && diff.equals('', lastComponent.value)) {
+    components[componentLen - 2].value += lastComponent.value;
+    components.pop();
+  }
+  return components;
+};
+var clonePath = function clonePath(path) {
+  return {
+    newPos: path.newPos,
+    components: path.components.slice(0)
+  };
+};
+var DiffText = /*#__PURE__*/_createClass(function DiffText(oldValue, newValue) {
+  var _this = this;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  _classCallCheck(this, DiffText);
+  this.done = function (value) {
+    if (_this.callback) {
+      setTimeout(function () {
+        this.callback(undefined, value);
+      }, 0);
+      return true;
+    }
+    return value;
+  };
+  // Main worker method. checks all permutations of a given edit length for acceptance.
+  this.execCompareLength = function (bestPath) {
+    for (var diagonalPath = -1 * _this.comparePath; diagonalPath <= _this.comparePath; diagonalPath += 2) {
+      var basePath = void 0;
+      var addPath = bestPath[diagonalPath - 1];
+      var removePath = bestPath[diagonalPath + 1];
+      var oldPos = (removePath ? removePath.newPos : 0) - diagonalPath;
+      if (addPath) {
+        // No one else is going to attempt to use this value, clear it
+        bestPath[diagonalPath - 1] = undefined;
+      }
+      var canAdd = addPath && addPath.newPos + 1 < _this.newLen;
+      var canRemove = removePath && 0 <= oldPos && oldPos < _this.oldLen;
+      if (!canAdd && !canRemove) {
+        // If this path is a terminal then prune
+        bestPath[diagonalPath] = undefined;
+        continue;
+      }
+
+      // Select the diagonal that we want to branch from. We select the prior
+      // path whose position in the new string is the farthest from the origin
+      // and does not pass the bounds of the diff graph
+      if (!canAdd || canRemove && addPath.newPos < removePath.newPos) {
+        basePath = clonePath(removePath);
+        _this.pushComponent(basePath.components, undefined, true);
+      } else {
+        basePath = addPath; // No need to clone, we've pulled it from the list
+        basePath.newPos++;
+        _this.pushComponent(basePath.components, true, undefined);
+      }
+      oldPos = _this.extractCommon(basePath, _this.newValue, _this.oldValue, diagonalPath);
+
+      // If we have hit the end of both strings, then we are done
+      if (basePath.newPos + 1 >= _this.newLen && oldPos + 1 >= _this.oldLen) {
+        return _this.done(buildValues(_this, basePath.components, _this.newValue, _this.oldValue, _this.valueType, _this.useLongestToken));
+      } else {
+        // Otherwise track this path as a potential candidate and continue.
+        bestPath[diagonalPath] = basePath;
+      }
+    }
+    _this.comparePath++;
+  };
+  this.exec = function (bestPath) {
+    setTimeout(function () {
+      if (this.comparePath > this.maxEditLength) {
+        return this.callback();
+      }
+      if (!this.execCompareLength(bestPath)) {
+        this.exec(bestPath);
+      }
+    }, 0);
+  };
+  this.pushComponent = function (components, added, removed) {
+    var last = components[components.length - 1];
+    if (last && last.added === added && last.removed === removed) {
+      // We need to clone here as the component clone operation is just
+      // as shallow array clone
+      components[components.length - 1] = {
+        count: last.count + 1,
+        added: added,
+        removed: removed
+      };
+    } else {
+      components.push({
+        count: 1,
+        added: added,
+        removed: removed
+      });
+    }
+  };
+  this.extractCommon = function (basePath, newString, oldString, diagonalPath) {
+    var newLen = newString.length;
+    var oldLen = oldString.length;
+    var newPos = basePath.newPos;
+    var oldPos = newPos - diagonalPath;
+    var commonCount = 0;
+    while (newPos + 1 < newLen && oldPos + 1 < oldLen && _this.equals(newString[newPos + 1], oldString[oldPos + 1])) {
+      newPos++;
+      oldPos++;
+      commonCount++;
+    }
+    if (commonCount) {
+      basePath.components.push({
+        count: commonCount
+      });
+    }
+    basePath.newPos = newPos;
+    return oldPos;
+  };
+  this.equals = function (left, right) {
+    if (_this.options.comparator) {
+      return _this.options.comparator(left, right);
+    } else {
+      return left === right || _this.options.ignoreCase && left.toLowerCase() === right.toLowerCase();
+    }
+  };
+  this.removeEmpty = function (array, type) {
+    if (type === 'Array') return array;
+    var ret = [];
+    for (var i = 0; i < array.length; i++) {
+      if (array[i]) {
+        ret.push(array[i]);
+      }
+    }
+    return ret;
+  };
+  this.tokenize = function (value, valueType) {
+    if (valueType === 'Array') return value.slice();
+    return value.split('');
+  };
+  this.join = function (value, valueType) {
+    if (valueType === 'Array') return value;
+    return value.join('');
+  };
+  this.getDiffs = function () {
+    if (!_this.canCompare) {
+      return [{
+        value: _this.oldValue,
+        removed: true
+      }, {
+        value: _this.newValue,
+        added: true
+      }];
+    }
+    var bestPath = [{
+      newPos: -1,
+      components: []
+    }];
+
+    // Seed editLength = 0, i.e. the content starts with the same values
+    var oldPos = _this.extractCommon(bestPath[0], _this.newValue, _this.oldValue, 0);
+    if (bestPath[0].newPos + 1 >= _this.newLen && oldPos + 1 >= _this.oldLen) {
+      // Identity per the equality and tokenizer
+      return _this.done([{
+        value: _this.join(_this.newValue, _this.valueType),
+        count: _this.oldValue.length
+      }]);
+    }
+
+    // Performs the length of edit iteration. Is a bit fugly as this has to support the
+    // sync and async mode which is never fun. Loops over execCompareLength until a value
+    // is produced, or until the edit length exceeds options.maxEditLength (if given),
+    // in which case it will return undefined.
+    if (_this.callback) {
+      _this.exec(bestPath);
+    } else {
+      while (_this.comparePath <= _this.maxEditLength) {
+        var ret = _this.execCompareLength(bestPath);
+        if (ret) {
+          return ret;
+        }
+      }
+    }
+  };
+  this.oldValue = oldValue;
+  this.newValue = newValue;
+  var oldValueType = ObjectUtils.getDataType(oldValue);
+  var newValueType = ObjectUtils.getDataType(newValue);
+  this.canCompare = true;
+  if (oldValueType !== newValueType) {
+    this.canCompare = false;
+    return;
+  }
+  this.valueType = newValueType;
+  this.callback = options.callback;
+  var optionsType = ObjectUtils.getDataType(options);
+  if (optionsType === 'function') {
+    this.callback = options;
+    this.options = {};
+  } else {
+    this.options = {};
+  }
+  this.comparePath = 1;
+  this.oldValue = this.removeEmpty(this.tokenize(oldValue, oldValueType), oldValueType);
+  this.oldLen = this.oldValue.length;
+  this.newValue = this.removeEmpty(this.tokenize(newValue, newValueType), newValueType);
+  this.newLen = this.newValue.length;
+  this.maxEditLength = this.newLen + this.oldLen;
+  if (this.options.maxEditLength) {
+    this.maxEditLength = Math.min(this.maxEditLength, this.options.maxEditLength);
+  }
+});
+export default DiffText;