@seafile/sdoc-editor 2.0.82 → 2.0.83

package/dist/extension/plugins/search-replace/helper.js

@@ -0,0 +1,347 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scrollIntoView = exports.handleReplaceKeyword = exports.getHighlightInfos = exports.drawHighlights = exports.clearCanvas = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _constants = require("../../constants");
+var _constant = require("./constant");
+// Check the node iff contains text or inline node
+var isInlineContainer = function isInlineContainer(editor, node) {
+  if (_slate.Text.isText(node)) return false;
+  if (node.children) {
+    return node.children.every(function (child) {
+      return _slate.Text.isText(child) || _slate.Editor.isInline(editor, child);
+    });
+  }
+  return false;
+};
+var formatTextEntries = function formatTextEntries(textEntries) {
+  return textEntries.reduce(function (pre, cur) {
+    var _pre$passedLength, _pre;
+    var currentLength = cur[0].text.length;
+    var previousLength = (_pre$passedLength = (_pre = pre[pre.length - 1]) === null || _pre === void 0 ? void 0 : _pre.passedLength) !== null && _pre$passedLength !== void 0 ? _pre$passedLength : 0;
+    var currentItem = {
+      passedLength: previousLength + currentLength,
+      textEntry: (0, _toConsumableArray2["default"])(cur)
+    };
+    return pre.concat(currentItem);
+  }, []);
+};
+var splitTextNode = function splitTextNode(node) {
+  return node.children.reduce(function (pre, cur) {
+    if (cur.type === _constants.IMAGE) {
+      pre.push((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, node), {}, {
+        children: []
+      }));
+    } else {
+      pre[pre.length - 1].children.push(cur);
+    }
+    return pre;
+  }, [(0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, node), {}, {
+    children: []
+  })]);
+};
+var matchSearchWordPosition = function matchSearchWordPosition(node, searchWord) {
+  var content = _slate.Node.string(node);
+  var regex = new RegExp(searchWord, 'gi');
+  var matches = (0, _toConsumableArray2["default"])(content.matchAll(regex));
+  return matches.map(function (match) {
+    return match.index;
+  }) || [];
+};
+var getMatchedTextInfos = function getMatchedTextInfos(editor, node, keyword) {
+  var matchedTextNodeEntires = [];
+  if (node.children) {
+    // If node is text container, match keyword in text
+    if (isInlineContainer(editor, node)) {
+      var splitNodes = splitTextNode(node);
+      splitNodes.forEach(function (node) {
+        var textEntries = Array.from(_slate.Node.texts(node));
+        if (!textEntries) return;
+        var newTextEntries = formatTextEntries(textEntries);
+        var positions = matchSearchWordPosition(node, keyword);
+        var res = positions.reduce(function (pre, position) {
+          var ranges = pre.ranges,
+            startMatchIndex = pre.startMatchIndex;
+          var anchor;
+          for (var index = startMatchIndex; index < newTextEntries.length; index++) {
+            var _newTextEntries$index = newTextEntries[index],
+              passedLength = _newTextEntries$index.passedLength,
+              textEntry = _newTextEntries$index.textEntry;
+            var passedNodeLength = passedLength - textEntry[0].text.length;
+            if (!anchor && passedLength > position) {
+              anchor = {
+                path: _slateReact.ReactEditor.findPath(editor, textEntry[0]),
+                offset: position - passedNodeLength
+              };
+            }
+            if (passedLength >= position + keyword.length) {
+              var range = {
+                anchor: anchor,
+                focus: {
+                  path: _slateReact.ReactEditor.findPath(editor, textEntry[0]),
+                  offset: position + keyword.length - passedNodeLength
+                }
+              };
+              return {
+                ranges: [].concat((0, _toConsumableArray2["default"])(ranges), [range]),
+                startMatchIndex: index
+              };
+            }
+          }
+          return pre;
+        }, {
+          ranges: [],
+          startMatchIndex: 0
+        });
+        matchedTextNodeEntires.push(res.ranges);
+      });
+    }
+  }
+  return matchedTextNodeEntires;
+};
+var generateRangeWhenWrapLine = function generateRangeWhenWrapLine(editor, path, index, count, domRange, baseHeight) {
+  var i = 0;
+  var j = 1;
+  var isOverrideForwardRange = true;
+  var subHighlightInfos = [];
+  while (j <= count) {
+    var subSplitRange = {
+      anchor: {
+        path: path,
+        offset: index + i
+      },
+      focus: {
+        path: path,
+        offset: index + j
+      }
+    };
+    var subRange = _slateReact.ReactEditor.toDOMRange(editor, subSplitRange);
+    var subRangeHeight = Math.round(subRange.getBoundingClientRect().height);
+    if (subRangeHeight === baseHeight) {
+      isOverrideForwardRange && subHighlightInfos.pop();
+      if (!isOverrideForwardRange) isOverrideForwardRange = true;
+      subHighlightInfos.push({
+        rangeInfo: subRange.getBoundingClientRect(),
+        domRange: domRange
+      });
+      j++;
+    } else {
+      i = j - 1;
+      isOverrideForwardRange = false;
+    }
+  }
+  return subHighlightInfos;
+};
+var findHighlightTextInfos = function findHighlightTextInfos(editor, keyword) {
+  var matchedBlockEntries = (0, _toConsumableArray2["default"])(_slate.Editor.nodes(editor, {
+    match: function match(n) {
+      if (_slate.Element.isElement(n) && _slate.Editor.isBlock(editor, n)) {
+        try {
+          var blockString = _slate.Node.string(n);
+          return blockString.toLowerCase().includes(keyword.toLowerCase());
+        } catch (error) {
+          return false;
+        }
+      }
+    },
+    mode: 'lowest',
+    at: []
+  }));
+  var matchedTextEntriesList = Array.from(matchedBlockEntries).reduce(function (pre, _ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 1),
+      node = _ref2[0];
+    return [].concat((0, _toConsumableArray2["default"])(pre), (0, _toConsumableArray2["default"])(getMatchedTextInfos(editor, node, keyword.toLowerCase())));
+  }, []).flat();
+  return matchedTextEntriesList;
+};
+var getBaseHeight = function getBaseHeight(editor, range) {
+  var path = range.anchor.path;
+  var subRange = {
+    anchor: {
+      path: path,
+      offset: 0
+    },
+    focus: {
+      path: path,
+      offset: 1
+    }
+  };
+  var letterHeight = _slateReact.ReactEditor.toDOMRange(editor, subRange).getBoundingClientRect().height;
+  var baseHeight = Math.round(letterHeight);
+  return baseHeight;
+};
+var getHighlightInfos = exports.getHighlightInfos = function getHighlightInfos(editor, keyword) {
+  if (keyword === '') return [];
+  var highlightTextInfos = findHighlightTextInfos(editor, keyword);
+  var rangeList = highlightTextInfos === null || highlightTextInfos === void 0 ? void 0 : highlightTextInfos.map(function (range) {
+    var domRange = _slateReact.ReactEditor.toDOMRange(editor, range);
+    var rangeInfo = domRange.getBoundingClientRect();
+    var baseHeight = getBaseHeight(editor, range);
+    // highlight word wrap line, assume line height is more then letter height
+    // Windows systems may have precision issues. truncate decimal to avoid this problem
+    var currentRangeHeight = Math.round(rangeInfo.height);
+    if (currentRangeHeight > baseHeight) return generateRangeWhenWrapLine(editor, range.anchor.path, range.anchor.offset, keyword.length, domRange, baseHeight);
+    return [{
+      rangeInfo: rangeInfo,
+      domRange: domRange
+    }];
+  });
+  return rangeList;
+};
+var handleReplaceKeyword = exports.handleReplaceKeyword = function handleReplaceKeyword(editor, highlightInfos, replacedContent) {
+  if (!highlightInfos || !highlightInfos.length) return;
+  // Delete from backward avoiding the range changed
+  highlightInfos.reverse().forEach(function (highlightInfo) {
+    var domRange = highlightInfo[highlightInfo.length - 1].domRange;
+    var slateRange = _slateReact.ReactEditor.toSlateRange(editor, domRange, {
+      exactMatch: true
+    });
+    _slate.Transforms.insertText(editor, replacedContent, {
+      at: _slate.Editor.end(editor, slateRange)
+    });
+    _slate.Transforms["delete"](editor, {
+      at: slateRange
+    });
+  });
+};
+var clearCanvas = exports.clearCanvas = function clearCanvas(canvases) {
+  canvases.forEach(function (canvas) {
+    return canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
+  });
+};
+var scrollIntoView = exports.scrollIntoView = function scrollIntoView(articleContainerTop, highlightX, highlightY, codeBlockDom, width) {
+  if (!articleContainerTop) return;
+  var scrollContainer = document.getElementById('sdoc-scroll-container');
+  // Scroll into view when highlight block overflow y
+  var scrollTop = highlightY - articleContainerTop - 20;
+  var isOverflowY = scrollContainer.scrollTop > scrollTop || scrollContainer.scrollTop + scrollContainer.clientHeight < scrollTop;
+  isOverflowY && scrollContainer.scrollTo({
+    top: scrollTop
+  });
+  // Scroll into view when code block overflow x
+  if (codeBlockDom) {
+    var isOverflowX = false;
+    var codeBlockDomLeft = codeBlockDom.getBoundingClientRect().left;
+    var leftDistance = codeBlockDomLeft + 50;
+    var rightDistance = leftDistance + codeBlockDom.clientWidth - 50;
+    isOverflowX = leftDistance > highlightX + width || rightDistance < highlightX + width;
+    isOverflowX && codeBlockDom.scrollTo({
+      left: highlightX - leftDistance + width
+    });
+  }
+};
+var getNowrapCodeBlockInfos = function getNowrapCodeBlockInfos(editor) {
+  var codeBlockEntries = _slate.Editor.nodes(editor, {
+    match: function match(n) {
+      var _n$style;
+      var isCodeBlock = _slate.Element.isElement(n) && n.type === _constants.CODE_BLOCK;
+      if (!isCodeBlock) return false;
+      // To compatible with old version,which has no style property with white_space, by default, it is 'nowrap'
+      var nodeWhiteSpace = (n === null || n === void 0 ? void 0 : (_n$style = n.style) === null || _n$style === void 0 ? void 0 : _n$style['white_space']) || 'nowrap';
+      if (nodeWhiteSpace === 'nowrap') return true;
+      return false;
+    },
+    at: []
+  }) || [];
+
+  // Get code block dom and range info
+  var codeBlockInfos = Array.from(codeBlockEntries).map(function (_ref3) {
+    var _ref4 = (0, _slicedToArray2["default"])(_ref3, 1),
+      codeBlockNode = _ref4[0];
+    var codeBlockRange = _slateReact.ReactEditor.toDOMNode(editor, codeBlockNode).getBoundingClientRect();
+    return {
+      codeBlockRange: codeBlockRange,
+      codeBlockNode: codeBlockNode
+    };
+  });
+  return codeBlockInfos;
+};
+
+// Hide highlight block when overflow article container
+var updateInfoAsMatchedInCodeBlock = function updateInfoAsMatchedInCodeBlock(editor, codeBlockInfos, highlightX, highlightY, highlightHeight, highlightWidth) {
+  if (!codeBlockInfos.length) return;
+  var codeBlockDom = null;
+  codeBlockInfos.some(function (_ref5) {
+    var codeBlockRange = _ref5.codeBlockRange,
+      codeBlockNode = _ref5.codeBlockNode;
+    var isInCodeBlockArea = codeBlockRange.y <= highlightY && codeBlockRange.y + codeBlockRange.height > highlightY + highlightHeight;
+    if (isInCodeBlockArea) {
+      codeBlockDom = _slateReact.ReactEditor.toDOMNode(editor, codeBlockNode).querySelector('.sdoc-code-block-pre');
+      var codeBlockRightSidePosition = codeBlockRange.x + codeBlockRange.width;
+      var isOverflowX = codeBlockRange.x > highlightX || codeBlockRightSidePosition < highlightX + highlightWidth;
+      if (isOverflowX) {
+        // Calculate forward and backward hidden width
+        var overflowForward = codeBlockRange.x - highlightX > 0 ? codeBlockRange.x - highlightX : 0;
+        var overflowBackward = highlightX + highlightWidth - codeBlockRightSidePosition > 0 ? highlightX + highlightWidth - codeBlockRightSidePosition : 0;
+        highlightWidth = highlightWidth - overflowForward - overflowBackward;
+      }
+      if (highlightWidth < 0) highlightWidth = 0;
+      if (highlightX < codeBlockRange.x) highlightX = codeBlockRange.x;
+      return true;
+    }
+    return false;
+  });
+  return {
+    codeBlockDom: codeBlockDom,
+    highlightX: highlightX,
+    highlightWidth: highlightWidth
+  };
+};
+var drawHighlights = exports.drawHighlights = function drawHighlights(editor, ranges, selectIndex) {
+  var isMoveIntoView = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var canvases = document.querySelectorAll('.sdoc-find-search-highlight-canvas');
+  clearCanvas(canvases);
+  if (ranges.length === 0) return;
+  var articleContainer = document.querySelector('.sdoc-article-container');
+  var _articleContainer$get = articleContainer.getBoundingClientRect(),
+    top = _articleContainer$get.top,
+    left = _articleContainer$get.left;
+  var rangeIndex = 0;
+  var splitRangeIndex = 0;
+  var canvasIndex = 0;
+  var codeBlockInfos = getNowrapCodeBlockInfos(editor);
+  do {
+    var canvas = canvases[canvasIndex];
+    if (!canvas) return;
+    var ctx = canvas.getContext('2d');
+    var splitRanges = ranges[rangeIndex];
+    for (var j = splitRangeIndex; j < splitRanges.length; j++) {
+      var isFocussedHighlight = rangeIndex === selectIndex;
+      var _splitRanges$j$rangeI = splitRanges[j].rangeInfo,
+        x = _splitRanges$j$rangeI.x,
+        y = _splitRanges$j$rangeI.y,
+        width = _splitRanges$j$rangeI.width,
+        height = _splitRanges$j$rangeI.height;
+      var codeBlockDom = null;
+      if (y - top < (canvasIndex + 1) * 5000) {
+        // Hide highlight block when overflow article container
+        var updateInfo = updateInfoAsMatchedInCodeBlock(editor, codeBlockInfos, x, y, height, width);
+        if (updateInfo) {
+          x = updateInfo.highlightX;
+          width = updateInfo.highlightWidth;
+          if (isFocussedHighlight) codeBlockDom = updateInfo.codeBlockDom;
+        }
+
+        // Draw highlight block
+        ctx.fillStyle = isFocussedHighlight ? _constant.FOCUSSED_SEARCH_HIGHLIGHT_FILL_COLOR : _constant.DEFAULT_SEARCH_HIGHLIGHT_FILL_COLOR;
+        ctx.fillRect(x - left, y - top - canvasIndex * 5000, width, height);
+
+        // Scroll into view
+        isMoveIntoView && isFocussedHighlight && scrollIntoView(top, x, y, codeBlockDom, width);
+        if (j === splitRanges.length - 1) rangeIndex++;
+        splitRangeIndex = 0;
+      } else {
+        splitRangeIndex = j;
+        canvasIndex = Math.ceil((y - top) / 5000 - 1);
+      }
+    }
+  } while (rangeIndex < ranges.length);
+};

package/dist/extension/plugins/search-replace/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _menusConfig = require("../../constants/menus-config");
+var _menu = _interopRequireDefault(require("./menu"));
+var _plugin = _interopRequireDefault(require("./plugin"));
+var SearchReplacePlugin = {
+  type: _menusConfig.SEARCH_REPLACE,
+  editorMenus: [_menu["default"]],
+  editorPlugin: _plugin["default"],
+  renderElements: []
+};
+var _default = exports["default"] = SearchReplacePlugin;

package/dist/extension/plugins/search-replace/menu/index.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _constants = require("../../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _commons = require("../../../commons");
+var _constants2 = require("../../../constants");
+var _menusConfig = require("../../../constants/menus-config");
+var _popover = _interopRequireDefault(require("../popover"));
+require("./index.css");
+var menuConfig = _constants2.MENUS_CONFIG_MAP[_menusConfig.SEARCH_REPLACE];
+var SearchReplaceMenu = function SearchReplaceMenu(_ref) {
+  var isRichEditor = _ref.isRichEditor,
+    className = _ref.className,
+    editor = _ref.editor,
+    readonly = _ref.readonly;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isOpenPopover = _useState2[0],
+    setIsOpenPopover = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var eventBus = _eventBus["default"].getInstance();
+    var unsubscribe = eventBus.subscribe(_constants.INTERNAL_EVENT.OPEN_SEARCH_REPLACE_MODAL, function () {
+      return setIsOpenPopover(true);
+    });
+    return function () {
+      return unsubscribe();
+    };
+  }, [isOpenPopover]);
+  var onMouseDown = (0, _react.useCallback)(function () {
+    setIsOpenPopover(!isOpenPopover);
+  }, [isOpenPopover]);
+  var articleContainer = document.querySelector('.sdoc-article-container');
+  var articleContainerSize = (0, _react.useMemo)(function () {
+    var articleContainer = document.querySelector('.sdoc-article-container');
+    if (!articleContainer) return null;
+    var offsetHeight = articleContainer.offsetHeight,
+      offsetWidth = articleContainer.offsetWidth,
+      clientHeight = articleContainer.clientHeight;
+    return {
+      offsetHeight: offsetHeight,
+      offsetWidth: offsetWidth,
+      clientHeight: clientHeight
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpenPopover]);
+  var renderCanvasses = (0, _react.useMemo)(function () {
+    if (!isOpenPopover) return false;
+    var generateCount = Math.ceil(articleContainerSize.offsetHeight / 5000);
+    var canvasList = [];
+    for (var index = 0; index < generateCount; index++) {
+      var top = index * 5000;
+      canvasList.push(/*#__PURE__*/_react["default"].createElement("canvas", {
+        key: 'sdoc-find-search-' + index,
+        id: "sdoc-find-search-".concat(index),
+        className: "sdoc-find-search-highlight-canvas",
+        width: articleContainerSize.offsetWidth,
+        height: 5000,
+        style: {
+          top: top
+        }
+      }));
+    }
+    return canvasList;
+  }, [articleContainerSize, isOpenPopover]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_commons.MenuItem, Object.assign({
+    isRichEditor: isRichEditor,
+    className: className,
+    ariaLabel: "search",
+    disabled: false,
+    isActive: isOpenPopover,
+    onMouseDown: onMouseDown
+  }, menuConfig)), isOpenPopover && /*#__PURE__*/_react["default"].createElement(_popover["default"], {
+    editor: editor,
+    readonly: readonly,
+    isOpen: isOpenPopover,
+    closePopover: onMouseDown
+  }), isOpenPopover && /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      height: articleContainerSize.clientHeight
+    },
+    className: "sdoc-search-highlight-container"
+  }, renderCanvasses), articleContainer));
+};
+var _default = exports["default"] = SearchReplaceMenu;

package/dist/extension/plugins/search-replace/plugin.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _isHotkey = _interopRequireDefault(require("is-hotkey"));
+var _constants = require("../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../utils/event-bus"));
+var withSearchReplace = function withSearchReplace(editor) {
+  var onHotKeyDown = editor.onHotKeyDown;
+  var newEditor = editor;
+  newEditor.onHotKeyDown = function (event) {
+    if ((0, _isHotkey["default"])('mod+f', event)) {
+      event.preventDefault();
+      event.stopPropagation();
+      var eventBus = _eventBus["default"].getInstance();
+      eventBus.dispatch(_constants.INTERNAL_EVENT.OPEN_SEARCH_REPLACE_MODAL);
+      return false;
+    }
+    return onHotKeyDown && onHotKeyDown(event);
+  };
+  return newEditor;
+};
+var _default = exports["default"] = withSearchReplace;