@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/extension/plugins/sdoc-link/render/render-elem.css

@@ -0,0 +1,68 @@
+.sdoc-file-link-selected,
+.sdoc-file-render:hover {
+  background-color: #e5e5e5 !important;
+  padding: 3px 0;
+}
+
+.sdoc-file-card-link {
+  position: relative;
+  background-color: #f3f3f3;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-block;
+  height: 50px;
+  width: 420px;
+  margin-bottom: -3px;
+}
+
+.sdoc-file-render .sdoc-file-link-icon {
+  padding-right: 5px;
+  color: #ff9800;
+}
+
+.sdoc-file-card-link .sdoc-file-link-icon :first-child {
+  font-size: 24px;
+}
+
+.sdoc-file-card-link .sdoc-file-link-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.sdoc-file-render .sdoc-file-link-icon .file-link-img {
+  width: 20px;
+}
+
+.sdoc-file-card-link .sdoc-file-link-icon .file-link-img {
+  width: 28px;
+}
+
+.sdoc-file-render .sdoc-file-text-link.sdoc-no-file-link-icon a {
+  font-weight: bold;
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  color: #ff9800;
+}
+
+.sdoc-file-card-link .sdoc-file-text-link {
+  position: absolute;
+  left: 42px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 330px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sdoc-file-card-link .sdoc-file-text-link a {
+  text-decoration: none;
+  color: #333;
+}
+
+.sdoc-file-name-insert-collector {
+  padding: 0 .25em;
+}

package/dist/basic-sdk/extension/plugins/sdoc-link/render/render-elem.js

@@ -0,0 +1,180 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useScrollContext = require("../../../../hooks/use-scroll-context");
+var _constants = require("../../../constants");
+var _elementType = require("../../../constants/element-type");
+var _core = require("../../../core");
+var _helpers = require("../../wiki-link/helpers");
+var _constants2 = require("../constants");
+var _helpers2 = require("../helpers");
+var _hoverMenu = _interopRequireDefault(require("../hover-menu"));
+require("./render-elem.css");
+const SdocFileLink = _ref => {
+  let {
+    editor,
+    element,
+    children,
+    attributes
+  } = _ref;
+  const {
+    icon,
+    isDir
+  } = element;
+  const sdocFileRef = (0, _react.useRef)(null);
+  const scrollRef = (0, _useScrollContext.useScrollContext)();
+  const [isShowInsertHoverMenu, setIsShowInsertHoverMenu] = (0, _react.useState)(false);
+  const [menuPosition, setMenuPosition] = (0, _react.useState)({});
+  const readOnly = (0, _slateReact.useReadOnly)();
+  const isSelected = (0, _slateReact.useSelected)();
+  const registerEventHandle = (0, _react.useCallback)(() => {
+    document.addEventListener('click', onHideInsertHoverMenu);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const unregisterEventHandle = (0, _react.useCallback)(() => {
+    document.removeEventListener('click', onHideInsertHoverMenu);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    return () => {
+      unregisterEventHandle();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const setPosition = (0, _react.useCallback)(elem => {
+    if (elem) {
+      const {
+        top,
+        left
+      } = elem.getBoundingClientRect();
+      const menuTop = top - 42; // top = top distance - menu height
+      const menuLeft = left - 18; // left = left distance - (menu width / 2)
+      const newMenuPosition = {
+        top: menuTop,
+        left: menuLeft
+      };
+      setMenuPosition(newMenuPosition);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onScroll = (0, _react.useCallback)(e => {
+    setPosition(sdocFileRef.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(() => {
+    let observerRefValue = null;
+    if (isShowInsertHoverMenu) {
+      scrollRef.current && scrollRef.current.addEventListener('scroll', onScroll);
+      observerRefValue = scrollRef.current;
+    } else {
+      scrollRef.current && scrollRef.current.removeEventListener('scroll', onScroll);
+    }
+    return () => {
+      if (observerRefValue) {
+        observerRefValue.removeEventListener('scroll', onScroll);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowInsertHoverMenu]);
+  const onClickFile = (0, _react.useCallback)(e => {
+    if (readOnly) {
+      if (element.type === _elementType.WIKI_LINK) {
+        window.open((0, _helpers.getWikiUrl)(element.wiki_repo_id, element.page_id, readOnly));
+        return;
+      } else {
+        window.open((0, _helpers2.getUrl)(element.doc_uuid));
+        return;
+      }
+    }
+    if (isShowInsertHoverMenu) {
+      e.stopPropagation();
+    }
+    const path = _slateReact.ReactEditor.findPath(editor, element);
+    const focusPoint = _slate.Editor.end(editor, path);
+    (0, _core.focusEditor)(editor, focusPoint);
+    setPosition(e.currentTarget);
+    setIsShowInsertHoverMenu(true);
+    setTimeout(() => {
+      registerEventHandle();
+    }, 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isShowInsertHoverMenu]);
+  const onHideInsertHoverMenu = (0, _react.useCallback)(e => {
+    setIsShowInsertHoverMenu(false);
+    unregisterEventHandle();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const onUnwrapFileLinkNode = (0, _react.useCallback)(event => {
+    event.stopPropagation();
+    (0, _helpers2.unwrapLinkNode)(editor, element);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  let style = {};
+  if (element.add) {
+    style = {
+      ..._constants.ADDED_STYLE
+    };
+  } else if (element.delete) {
+    style = {
+      ..._constants.DELETED_STYLE
+    };
+  }
+  if (style.computed_background_color) {
+    style['backgroundColor'] = style.computed_background_color;
+  }
+  const url = (0, _react.useMemo)(() => {
+    return element.type === _elementType.WIKI_LINK ? (0, _helpers.getWikiUrl)(element.wiki_repo_id, element.page_id, readOnly) : (0, _helpers2.getUrl)(element.doc_uuid);
+  }, [element.doc_uuid, element.page_id, element.type, element.wiki_repo_id, readOnly]);
+  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, attributes, {
+    "data-id": element.id,
+    contentEditable: false,
+    className: `sdoc-file-render ${isSelected ? 'sdoc-file-link-selected' : ''} ${element.display_type === _constants2.SDOC_LINK_TYPE.CARD_LINK ? 'sdoc-file-card-link' : ''}`,
+    onClick: onClickFile,
+    style: element.display_type === _constants2.SDOC_LINK_TYPE.CARD_LINK ? style : {}
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    ref: sdocFileRef
+  }, [_constants2.SDOC_LINK_TYPE.ICON_LINK, _constants2.SDOC_LINK_TYPE.CARD_LINK].includes(element.display_type) && /*#__PURE__*/_react.default.createElement("span", {
+    className: "sdoc-file-link-icon",
+    style: style
+  }, element.type !== _elementType.WIKI_LINK && /*#__PURE__*/_react.default.createElement("img", {
+    className: "file-link-img",
+    src: (0, _helpers2.getSdocFileIcon)(),
+    alt: ""
+  }), element.type === _elementType.WIKI_LINK && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.createElement("span", null, icon), !icon && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDir ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "sf3-font sf3-font-files2"
+  }) : /*#__PURE__*/_react.default.createElement("span", {
+    className: "sf3-font sf3-font-file"
+  })))), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)('sdoc-file-text-link', {
+      'sdoc-no-file-link-icon': ![_constants2.SDOC_LINK_TYPE.ICON_LINK, _constants2.SDOC_LINK_TYPE.CARD_LINK].includes(element.display_type)
+    }),
+    style: style
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: url,
+    onClick: e => e.preventDefault(),
+    onDragStart: e => e.preventDefault(),
+    title: element.title
+  }, children))), isShowInsertHoverMenu && !readOnly && editor.selection && _slate.Range.isCollapsed(editor.selection) && /*#__PURE__*/_react.default.createElement(_hoverMenu.default, {
+    url: url,
+    editor: editor,
+    menuPosition: menuPosition,
+    element: element,
+    onUnwrapFileLinkNode: onUnwrapFileLinkNode,
+    onHideInsertHoverMenu: onHideInsertHoverMenu
+  }));
+};
+const renderSdocLink = (props, editor) => {
+  return /*#__PURE__*/_react.default.createElement(SdocFileLink, Object.assign({}, props, {
+    editor: editor
+  }));
+};
+var _default = exports.default = renderSdocLink;

package/dist/basic-sdk/extension/plugins/sdoc-link/render/render-file-link-temp-input.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../../../../constants");
+var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
+var _constants2 = require("../../../constants");
+require("./render-elem.css");
+const RenderFileLinkTempInput = _ref => {
+  let {
+    element,
+    attributes,
+    children
+  } = _ref;
+  const eventBus = _eventBus.default.getInstance();
+  (0, _react.useEffect)(() => {
+    eventBus.dispatch(_constants.INTERNAL_EVENT.INSERT_ELEMENT, {
+      type: _constants2.FILE_LINK_INSET_INPUT_TEMP,
+      slateNode: element
+    });
+    return () => {
+      eventBus.dispatch(_constants.INTERNAL_EVENT.CLOSE_FILE_INSET_DIALOG);
+    };
+  }, [element, eventBus]);
+  return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, attributes, {
+    className: "sdoc-file-name-insert-collector"
+  }), children);
+};
+var _default = exports.default = RenderFileLinkTempInput;

package/dist/basic-sdk/extension/plugins/search-replace/constant.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FOCUSSED_SEARCH_HIGHLIGHT_FILL_COLOR = exports.DEFAULT_SEARCH_HIGHLIGHT_FILL_COLOR = void 0;
+const FOCUSSED_SEARCH_HIGHLIGHT_FILL_COLOR = exports.FOCUSSED_SEARCH_HIGHLIGHT_FILL_COLOR = '#f19d38';
+const DEFAULT_SEARCH_HIGHLIGHT_FILL_COLOR = exports.DEFAULT_SEARCH_HIGHLIGHT_FILL_COLOR = '#fef500';

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

@@ -0,0 +1,355 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scrollIntoView = exports.handleReplaceKeyword = exports.getHighlightInfos = exports.drawHighlights = exports.clearCanvas = void 0;
+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
+const isInlineContainer = (editor, node) => {
+  if (_slate.Text.isText(node)) return false;
+  if (node.children) {
+    return node.children.every(child => _slate.Text.isText(child) || _slate.Editor.isInline(editor, child));
+  }
+  return false;
+};
+const formatTextEntries = textEntries => {
+  return textEntries.reduce((pre, cur) => {
+    var _pre$passedLength, _pre;
+    const currentLength = cur[0].text.length;
+    const previousLength = (_pre$passedLength = (_pre = pre[pre.length - 1]) === null || _pre === void 0 ? void 0 : _pre.passedLength) !== null && _pre$passedLength !== void 0 ? _pre$passedLength : 0;
+    const currentItem = {
+      passedLength: previousLength + currentLength,
+      textEntry: [...cur]
+    };
+    return pre.concat(currentItem);
+  }, []);
+};
+const splitTextNode = node => {
+  return node.children.reduce((pre, cur) => {
+    if (cur.type === _constants.IMAGE) {
+      pre.push({
+        ...node,
+        children: []
+      });
+    } else {
+      pre[pre.length - 1].children.push(cur);
+    }
+    return pre;
+  }, [{
+    ...node,
+    children: []
+  }]);
+};
+const matchSearchWordPosition = (node, searchWord) => {
+  const content = _slate.Node.string(node);
+  const regex = new RegExp(searchWord, 'gi');
+  const matches = [...content.matchAll(regex)];
+  return matches.map(match => match.index) || [];
+};
+const getMatchedTextInfos = (editor, node, keyword) => {
+  const matchedTextNodeEntires = [];
+  if (node.children) {
+    // If node is text container, match keyword in text
+    if (isInlineContainer(editor, node)) {
+      const splitNodes = splitTextNode(node);
+      splitNodes.forEach(node => {
+        const textEntries = Array.from(_slate.Node.texts(node));
+        if (!textEntries) return;
+        const newTextEntries = formatTextEntries(textEntries);
+        const positions = matchSearchWordPosition(node, keyword);
+        const res = positions.reduce((pre, position) => {
+          const {
+            ranges,
+            startMatchIndex
+          } = pre;
+          let anchor;
+          for (let index = startMatchIndex; index < newTextEntries.length; index++) {
+            const {
+              passedLength,
+              textEntry
+            } = newTextEntries[index];
+            const 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) {
+              const range = {
+                anchor,
+                focus: {
+                  path: _slateReact.ReactEditor.findPath(editor, textEntry[0]),
+                  offset: position + keyword.length - passedNodeLength
+                }
+              };
+              return {
+                ranges: [...ranges, range],
+                startMatchIndex: index
+              };
+            }
+          }
+          return pre;
+        }, {
+          ranges: [],
+          startMatchIndex: 0
+        });
+        matchedTextNodeEntires.push(res.ranges);
+      });
+    }
+  }
+  return matchedTextNodeEntires;
+};
+const generateRangeWhenWrapLine = (editor, path, index, count, domRange, baseHeight) => {
+  let i = 0;
+  let j = 1;
+  let isOverrideForwardRange = true;
+  const subHighlightInfos = [];
+  while (j <= count) {
+    const subSplitRange = {
+      anchor: {
+        path,
+        offset: index + i
+      },
+      focus: {
+        path,
+        offset: index + j
+      }
+    };
+    const subRange = _slateReact.ReactEditor.toDOMRange(editor, subSplitRange);
+    const subRangeHeight = Math.round(subRange.getBoundingClientRect().height);
+    if (subRangeHeight === baseHeight) {
+      isOverrideForwardRange && subHighlightInfos.pop();
+      if (!isOverrideForwardRange) isOverrideForwardRange = true;
+      subHighlightInfos.push({
+        rangeInfo: subRange.getBoundingClientRect(),
+        domRange
+      });
+      j++;
+    } else {
+      i = j - 1;
+      isOverrideForwardRange = false;
+    }
+  }
+  return subHighlightInfos;
+};
+const findHighlightTextInfos = (editor, keyword) => {
+  const matchedBlockEntries = [..._slate.Editor.nodes(editor, {
+    match: n => {
+      if (_slate.Element.isElement(n) && _slate.Editor.isBlock(editor, n)) {
+        try {
+          const blockString = _slate.Node.string(n);
+          return blockString.toLowerCase().includes(keyword.toLowerCase());
+        } catch (error) {
+          return false;
+        }
+      }
+    },
+    mode: 'lowest',
+    at: []
+  })];
+  const matchedTextEntriesList = Array.from(matchedBlockEntries).reduce((pre, _ref) => {
+    let [node] = _ref;
+    return [...pre, ...getMatchedTextInfos(editor, node, keyword.toLowerCase())];
+  }, []).flat();
+  return matchedTextEntriesList;
+};
+const getBaseHeight = (editor, range) => {
+  const {
+    anchor: {
+      path
+    }
+  } = range;
+  const subRange = {
+    anchor: {
+      path,
+      offset: 0
+    },
+    focus: {
+      path,
+      offset: 1
+    }
+  };
+  const letterHeight = _slateReact.ReactEditor.toDOMRange(editor, subRange).getBoundingClientRect().height;
+  const baseHeight = Math.round(letterHeight);
+  return baseHeight;
+};
+const getHighlightInfos = (editor, keyword) => {
+  if (keyword === '') return [];
+  const highlightTextInfos = findHighlightTextInfos(editor, keyword);
+  const rangeList = highlightTextInfos === null || highlightTextInfos === void 0 ? void 0 : highlightTextInfos.map(range => {
+    const domRange = _slateReact.ReactEditor.toDOMRange(editor, range);
+    const rangeInfo = domRange.getBoundingClientRect();
+    const 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
+    const currentRangeHeight = Math.round(rangeInfo.height);
+    if (currentRangeHeight > baseHeight) return generateRangeWhenWrapLine(editor, range.anchor.path, range.anchor.offset, keyword.length, domRange, baseHeight);
+    return [{
+      rangeInfo,
+      domRange
+    }];
+  });
+  return rangeList;
+};
+exports.getHighlightInfos = getHighlightInfos;
+const handleReplaceKeyword = (editor, highlightInfos, replacedContent) => {
+  if (!highlightInfos || !highlightInfos.length) return;
+  // Delete from backward avoiding the range changed
+  highlightInfos.reverse().forEach(highlightInfo => {
+    const {
+      domRange
+    } = highlightInfo[highlightInfo.length - 1];
+    const 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
+    });
+  });
+};
+exports.handleReplaceKeyword = handleReplaceKeyword;
+const clearCanvas = canvases => {
+  canvases.forEach(canvas => canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height));
+};
+exports.clearCanvas = clearCanvas;
+const scrollIntoView = (articleContainerTop, highlightX, highlightY, codeBlockDom, width) => {
+  if (!articleContainerTop) return;
+  const scrollContainer = document.getElementById('sdoc-scroll-container');
+  // Scroll into view when highlight block overflow y
+  const scrollTop = highlightY - articleContainerTop - 20;
+  const isOverflowY = scrollContainer.scrollTop > scrollTop || scrollContainer.scrollTop + scrollContainer.clientHeight < scrollTop;
+  isOverflowY && scrollContainer.scrollTo({
+    top: scrollTop
+  });
+  // Scroll into view when code block overflow x
+  if (codeBlockDom) {
+    let isOverflowX = false;
+    const codeBlockDomLeft = codeBlockDom.getBoundingClientRect().left;
+    const leftDistance = codeBlockDomLeft + 50;
+    const rightDistance = leftDistance + codeBlockDom.clientWidth - 50;
+    isOverflowX = leftDistance > highlightX + width || rightDistance < highlightX + width;
+    isOverflowX && codeBlockDom.scrollTo({
+      left: highlightX - leftDistance + width
+    });
+  }
+};
+exports.scrollIntoView = scrollIntoView;
+const getNowrapCodeBlockInfos = editor => {
+  const codeBlockEntries = _slate.Editor.nodes(editor, {
+    match: n => {
+      var _n$style;
+      const 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'
+      const 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
+  const codeBlockInfos = Array.from(codeBlockEntries).map(_ref2 => {
+    let [codeBlockNode] = _ref2;
+    const codeBlockRange = _slateReact.ReactEditor.toDOMNode(editor, codeBlockNode).getBoundingClientRect();
+    return {
+      codeBlockRange,
+      codeBlockNode
+    };
+  });
+  return codeBlockInfos;
+};
+
+// Hide highlight block when overflow article container
+const updateInfoAsMatchedInCodeBlock = (editor, codeBlockInfos, highlightX, highlightY, highlightHeight, highlightWidth) => {
+  if (!codeBlockInfos.length) return;
+  let codeBlockDom = null;
+  codeBlockInfos.some(_ref3 => {
+    let {
+      codeBlockRange,
+      codeBlockNode
+    } = _ref3;
+    const isInCodeBlockArea = codeBlockRange.y <= highlightY && codeBlockRange.y + codeBlockRange.height > highlightY + highlightHeight;
+    if (isInCodeBlockArea) {
+      codeBlockDom = _slateReact.ReactEditor.toDOMNode(editor, codeBlockNode).querySelector('.sdoc-code-block-pre');
+      const codeBlockRightSidePosition = codeBlockRange.x + codeBlockRange.width;
+      const isOverflowX = codeBlockRange.x > highlightX || codeBlockRightSidePosition < highlightX + highlightWidth;
+      if (isOverflowX) {
+        // Calculate forward and backward hidden width
+        const overflowForward = codeBlockRange.x - highlightX > 0 ? codeBlockRange.x - highlightX : 0;
+        const 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,
+    highlightX,
+    highlightWidth
+  };
+};
+const drawHighlights = function (editor, ranges, selectIndex) {
+  let isMoveIntoView = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  const canvases = document.querySelectorAll('.sdoc-find-search-highlight-canvas');
+  clearCanvas(canvases);
+  if (ranges.length === 0) return;
+  const articleContainer = document.querySelector('.sdoc-article-container');
+  const {
+    top,
+    left
+  } = articleContainer.getBoundingClientRect();
+  let rangeIndex = 0;
+  let splitRangeIndex = 0;
+  let canvasIndex = 0;
+  const codeBlockInfos = getNowrapCodeBlockInfos(editor);
+  do {
+    let canvas = canvases[canvasIndex];
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    const splitRanges = ranges[rangeIndex];
+    for (let j = splitRangeIndex; j < splitRanges.length; j++) {
+      const isFocussedHighlight = rangeIndex === selectIndex;
+      let {
+        x,
+        y,
+        width,
+        height
+      } = splitRanges[j].rangeInfo;
+      let codeBlockDom = null;
+      if (y - top < (canvasIndex + 1) * 5000) {
+        // Hide highlight block when overflow article container
+        const 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);
+};
+exports.drawHighlights = drawHighlights;

package/dist/basic-sdk/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"));
+const SearchReplacePlugin = {
+  type: _menusConfig.SEARCH_REPLACE,
+  editorMenus: [_menu.default],
+  editorPlugin: _plugin.default,
+  renderElements: []
+};
+var _default = exports.default = SearchReplacePlugin;

package/dist/basic-sdk/extension/plugins/search-replace/menu/index.css

@@ -0,0 +1,14 @@
+.sdoc-search-highlight-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+  overflow: hidden;
+  mix-blend-mode: multiply;
+  pointer-events: none;
+}
+
+.sdoc-find-search-highlight-canvas {
+  position: absolute;
+}