@seafile/sdoc-editor 0.4.7 → 0.4.9

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

@@ -7,7 +7,9 @@
 
 .sdoc-editor-container .sdoc-editor-toolbar {
   display: flex;
+  flex: 1;
   justify-content: center;
+  position: relative;
   height: 44px;
   align-items: center;
   padding: 0 10px;
@@ -18,6 +20,14 @@
   z-index: 102;
 }
 
+.sdoc-editor-container .sdoc-editor-toolbar .sdoc-editor-toolbar-right-menu {
+  display: flex;
+  flex-direction: row-reverse;
+  position: absolute;
+  right: 20px;
+  border-right: none;
+}
+
 .sdoc-editor-container .sdoc-editor-content {
   width: 100%;
   height: calc(100% - 44px);
@@ -64,7 +74,7 @@
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);
 }
 
-.sdoc-editor-container .sdoc-editor-content .article > div {
+.sdoc-editor-container .sdoc-editor-content .article>div {
   caret-color: blue;
 }
 
@@ -77,7 +87,7 @@
 }
 
 .sdoc-editor-container .sdoc-editor-content .article .sdoc-draging {
-  border-bottom: 2px solid rgba(35,131,226);
+  border-bottom: 2px solid rgba(35, 131, 226);
 }
 
 .sdoc-editor-container .seafile-block-container {

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

@@ -14,7 +14,9 @@ export const INTERNAL_EVENT = {
   UPDATE_TAG_VIEW: 'update_tag_view',
   COMMENT_LIST_CLICK: 'comment_list_click',
   UNSEEN_NOTIFICATIONS_COUNT: 'unseen_notifications_count',
-  CLOSE_CALLOUT_COLOR_PICKER: 'close_callout_color_picker'
+  CLOSE_CALLOUT_COLOR_PICKER: 'close_callout_color_picker',
+  OPEN_SEARCH_REPLACE_MODAL: 'open_search_replace_modal',
+  UPDATE_SEARCH_REPLACE_HIGHLIGHT: 'update_search_replace_highlight'
 };
 export const REVISION_DIFF_KEY = 'diff';
 export const REVISION_DIFF_VALUE = '1';

package/dist/basic-sdk/editor/sdoc-editor.js

@@ -4,7 +4,7 @@ import { Editor } from '@seafile/slate';
 import deepCopy from 'deep-copy';
 import context from '../../context';
 import CommonLoading from '../../components/common-loading';
-import { PAGE_EDIT_AREA_WIDTH } from '../constants';
+import { INTERNAL_EVENT, PAGE_EDIT_AREA_WIDTH } from '../constants';
 import { createDefaultEditor } from '../extension';
 import withNodeId from '../node-id';
 import { withSocketIO } from '../socket';
@@ -143,6 +143,11 @@ const SdocEditor = forwardRef((_ref, ref) => {
       isShowComment: true
     })))));
   }
+  const onValueChange = value => {
+    const eventBus = EventBus.getInstance();
+    eventBus.dispatch(INTERNAL_EVENT.UPDATE_SEARCH_REPLACE_HIGHLIGHT, value);
+    setSlateValue(value);
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorContainer, {
     editor: validEditor
   }, /*#__PURE__*/React.createElement(CollaboratorsProvider, null, /*#__PURE__*/React.createElement(ColorProvider, null, /*#__PURE__*/React.createElement(HeaderToolbar, {
@@ -153,7 +158,7 @@ const SdocEditor = forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React.createElement(EditableArticle, {
     editor: validEditor,
     slateValue: slateValue,
-    updateSlateValue: setSlateValue
+    updateSlateValue: onValueChange
   }))))), /*#__PURE__*/React.createElement(InsertElementDialog, {
     editor: validEditor
   }));

package/dist/basic-sdk/extension/constants/menus-config.js

@@ -5,6 +5,7 @@ export const REDO = 'redo';
 export const CLEAR_FORMAT = 'clear_format';
 export const REMOVE_TABLE = 'remove_table';
 export const COMBINE_CELL = 'combine_cell';
+export const SEARCH_REPLACE = 'search_replace';
 
 // text style
 export const TEXT_STYLE = 'text_style';
@@ -195,6 +196,11 @@ export const MENUS_CONFIG_MAP = {
     id: "sdoc_".concat(CALL_OUT),
     iconClass: 'sdocfont sdoc-callout',
     text: 'Callout'
+  },
+  [SEARCH_REPLACE]: {
+    id: "sdoc_".concat(SEARCH_REPLACE),
+    iconClass: 'sdocfont sdoc-find-replace',
+    text: 'Search_and_replace'
   }
 };
 

package/dist/basic-sdk/extension/plugins/code-block/render-elem.js

@@ -130,6 +130,9 @@ const CodeBlock = _ref => {
     eventBus.subscribe(INTERNAL_EVENT.HIDDEN_CODE_BLOCK_HOVER_MENU, onHiddenHoverMenu);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  const handleScroll = () => {
+    EventBus.getInstance().dispatch(INTERNAL_EVENT.UPDATE_SEARCH_REPLACE_HIGHLIGHT);
+  };
   return /*#__PURE__*/React.createElement("div", Object.assign({
     "data-id": element.id,
     "data-root": "true"
@@ -138,6 +141,7 @@ const CodeBlock = _ref => {
     onClick: onFocusCodeBlock,
     onMouseLeave: onMouseLeave
   }), /*#__PURE__*/React.createElement("pre", {
+    onScroll: handleScroll,
     className: 'sdoc-code-block-pre',
     ref: codeBlockRef
   }, /*#__PURE__*/React.createElement("code", {

package/dist/basic-sdk/extension/plugins/image/hover-menu/index.js

@@ -18,6 +18,7 @@ const ImageHoverMenu = _ref => {
     menuPosition,
     element,
     parentNodeEntry,
+    imageCaptionInputRef,
     onHideImageHoverMenu,
     t
   } = _ref;
@@ -130,6 +131,11 @@ const ImageHoverMenu = _ref => {
         }, {
           at: path
         });
+        queueMicrotask(() => {
+          if (imageCaptionInputRef.current) {
+            imageCaptionInputRef.current.focus();
+          }
+        });
         return;
       }
     }

package/dist/basic-sdk/extension/plugins/image/plugin.js

@@ -1,9 +1,9 @@
-import { Transforms, Path, Editor, Element } from '@seafile/slate';
+import { Transforms, Path, Editor, Element, Range } from '@seafile/slate';
 import toaster from '../../../../components/toast';
 import context from '../../../../context';
 import EventBus from '../../../utils/event-bus';
 import { insertImage, hasSdocImages, getImageData, queryCopyMoveProgressView, resetCursor, isSingleImage } from './helpers';
-import { focusEditor, generateEmptyElement } from '../../core';
+import { focusEditor, generateEmptyElement, isBlockAboveEmpty } from '../../core';
 import { getErrorMsg } from '../../../../utils';
 import { getSlateFragmentAttribute } from '../../../utils/document-utils';
 import { INSERT_POSITION, CLIPBOARD_FORMAT_KEY, CLIPBOARD_ORIGIN_SDOC_KEY, IMAGE, IMAGE_BLOCK, PARAGRAPH } from '../../constants';
@@ -110,10 +110,16 @@ const withImage = editor => {
     const {
       selection
     } = editor;
+    const focusPoint = Editor.before(editor, selection);
     const point = Editor.before(editor, selection, {
       distance: 2
     });
     const [node, path] = Editor.node(editor, [point.path[0], point.path[1]]);
+    if (Range.isCollapsed(selection) && isBlockAboveEmpty(editor) && !Path.isCommon(path, selection.anchor.path)) {
+      deleteBackward(unit);
+      focusEditor(newEditor, Editor.end(newEditor, focusPoint));
+      return;
+    }
     if (Element.isElement(node) && node.type === IMAGE) {
       // If the wrapping element is image_block, delete the wrapping element
       const [parentNode, p] = Editor.node(editor, [path[0]]);

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

@@ -39,6 +39,7 @@ const Image = _ref => {
   const readOnly = useReadOnly();
   const imageRef = useRef(null);
   const resizerRef = useRef(null);
+  const imageCaptionInputRef = useRef(null);
   const scrollRef = useScrollContext();
   const [movingWidth, setMovingWidth] = useState(null);
   const [isResizing, setIsResizing] = useState(false);
@@ -231,15 +232,17 @@ const Image = _ref => {
     contentEditable: false
   }, /*#__PURE__*/React.createElement("span", null, t('Width'), ':', parseInt(movingWidth || ((_imageRef$current = imageRef.current) === null || _imageRef$current === void 0 ? void 0 : _imageRef$current.clientWidth))), /*#__PURE__*/React.createElement("span", null, "\xA0\xA0"), /*#__PURE__*/React.createElement("span", null, t('Height'), ':', imageRef.current.clientHeight))), nodeEntry[0].type === IMAGE_BLOCK && show_caption && /*#__PURE__*/React.createElement("input", {
     id: "sdoc-image-caption-input",
+    ref: imageCaptionInputRef,
     className: "sdoc-image-caption-input-wrapper",
     style: {
       width: (data === null || data === void 0 ? void 0 : data.width) || ((_imageRef$current2 = imageRef.current) === null || _imageRef$current2 === void 0 ? void 0 : _imageRef$current2.clientWidth)
     },
     placeholder: t('Insert_caption'),
+    autoComplete: "off",
     value: caption,
     onBlur: onSetCaption,
     onChange: e => {
-      setCaption(e.target.value.trim());
+      setCaption(e.target.value);
     },
     onCompositionStart: e => {
       e.stopPropagation();
@@ -249,6 +252,7 @@ const Image = _ref => {
     menuPosition: menuPosition,
     element: element,
     parentNodeEntry: nodeEntry,
+    imageCaptionInputRef: imageCaptionInputRef,
     onHideImageHoverMenu: () => {
       setIsShowImageHoverMenu(false);
     }

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

@@ -15,6 +15,7 @@ import SdocLinkPlugin from './sdoc-link';
 import FileLinkPlugin from './file-link';
 import ParagraphPlugin from './paragraph';
 import CalloutPlugin from './callout';
-const Plugins = [MarkDownPlugin, HtmlPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, FileLinkPlugin, CalloutPlugin];
+import SearchReplacePlugin from './search-replace';
+const Plugins = [MarkDownPlugin, HtmlPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin, SearchReplacePlugin];
 export default Plugins;
-export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, HtmlPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin };
+export { MarkDownPlugin, HeaderPlugin, LinkPlugin, BlockquotePlugin, ListPlugin, CheckListPlugin, CodeBlockPlugin, ImagePlugin, TablePlugin, TextPlugin, HtmlPlugin, TextAlignPlugin, FontPlugin, SdocLinkPlugin, ParagraphPlugin, FileLinkPlugin, CalloutPlugin, SearchReplacePlugin };

package/dist/basic-sdk/extension/plugins/list/transforms/move-list-items.js

@@ -39,7 +39,7 @@ export const moveListItems = function (editor) {
     const licPath = licPathRef.unref();
     if (!licPath) return;
     const listItem = Editor.parent(editor, licPath);
-    if (!listItem) return;
+    if (!listItem || listItem[1].length === 0) return;
     const parentList = Editor.parent(editor, listItem[1]);
     if (!parentList) return;
     let _moved = false;

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

@@ -1,6 +1,8 @@
+import withParagraph from './plugin';
 import { PARAGRAPH } from '../../constants';
 import { renderParagraph } from './render-elem';
 const ParagraphPlugin = {
+  editorPlugin: withParagraph,
   type: PARAGRAPH,
   renderElements: [renderParagraph]
 };

package/dist/basic-sdk/extension/plugins/paragraph/plugin/index.js

@@ -0,0 +1,75 @@
+import isHotkey from 'is-hotkey';
+import { Editor, Range, Transforms } from '@seafile/slate';
+import { PARAGRAPH } from '../../../constants';
+const withParagraph = editor => {
+  const {
+    handleTab,
+    insertText,
+    deleteBackward
+  } = editor;
+  const newEditor = editor;
+  newEditor.handleTab = event => {
+    var _selectedNode$;
+    const {
+      selection
+    } = newEditor;
+    if (!selection) return;
+    if (!Range.isCollapsed(selection)) return;
+    const selectedNode = Editor.node(newEditor, selection, {
+      depth: 1
+    });
+    if ((selectedNode === null || selectedNode === void 0 ? void 0 : (_selectedNode$ = selectedNode[0]) === null || _selectedNode$ === void 0 ? void 0 : _selectedNode$.type) === PARAGRAPH) {
+      event.preventDefault();
+      const path = Editor.path(newEditor, selection);
+      const point = Editor.point(newEditor, selection);
+      const isStart = Editor.isStart(newEditor, point, [path[0]]);
+      if (isStart) {
+        let indent;
+        if (isHotkey('shift+tab', event)) {
+          indent = false;
+        }
+        if (isHotkey('tab', event)) {
+          indent = true;
+        }
+        Transforms.setNodes(newEditor, {
+          indent: indent
+        }, {
+          at: [path[0]]
+        });
+      } else {
+        if (isHotkey('tab', event)) insertText('  ');
+      }
+      return;
+    }
+    return handleTab(event);
+  };
+  newEditor.deleteBackward = unit => {
+    const {
+      selection
+    } = newEditor;
+    if (!selection) return;
+    const [selectedNode = {}] = Editor.node(newEditor, selection, {
+      depth: 1
+    });
+    const {
+      type,
+      indent
+    } = selectedNode;
+    if (Range.isCollapsed(selection) && type === PARAGRAPH && indent) {
+      const path = Editor.path(newEditor, selection);
+      const point = Editor.point(newEditor, selection);
+      const isStart = Editor.isStart(newEditor, point, [path[0]]);
+      if (isStart) {
+        Transforms.setNodes(newEditor, {
+          indent: false
+        }, {
+          at: [path[0]]
+        });
+        return;
+      }
+    }
+    return deleteBackward(unit);
+  };
+  return newEditor;
+};
+export default withParagraph;

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

@@ -10,6 +10,9 @@ const Paragraph = _ref => {
     attributes,
     children
   } = _ref;
+  const {
+    indent
+  } = element;
   const editor = useSlateStatic();
   let isShowPlaceHolder = false;
   if (editor.children.length === 1) {
@@ -20,7 +23,8 @@ const Paragraph = _ref => {
     isShowPlaceHolder = Node.string(element) === '' && (node === null || node === void 0 ? void 0 : node.id) === (element === null || element === void 0 ? void 0 : element.id) && !isComposing;
   }
   const style = {
-    textAlign: element.align
+    textAlign: element.align,
+    paddingLeft: indent ? '28px' : ''
   };
   const newAttributes = _objectSpread(_objectSpread({}, attributes), typeof attributes.onMouseEnter === 'function' && {
     'data-root': 'true'

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

@@ -0,0 +1,2 @@
+export const FOCUSSED_SEARCH_HIGHLIGHT_FILL_COLOR = '#f19d38';
+export const DEFAULT_SEARCH_HIGHLIGHT_FILL_COLOR = '#fef500';

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

@@ -0,0 +1,331 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { Editor, Element, Node, Text, Transforms } from '@seafile/slate';
+import { ReactEditor } from '@seafile/slate-react';
+import { CODE_BLOCK, IMAGE } from '../../constants';
+import { DEFAULT_SEARCH_HIGHLIGHT_FILL_COLOR, FOCUSSED_SEARCH_HIGHLIGHT_FILL_COLOR } from './constant';
+
+// Check the node iff contains text or inline node
+const isInlineContainer = (editor, node) => {
+  if (Text.isText(node)) return false;
+  if (node.children) {
+    return node.children.every(child => Text.isText(child) || 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 === IMAGE) {
+      pre.push(_objectSpread(_objectSpread({}, node), {}, {
+        children: []
+      }));
+    } else {
+      pre[pre.length - 1].children.push(cur);
+    }
+    return pre;
+  }, [_objectSpread(_objectSpread({}, node), {}, {
+    children: []
+  })]);
+};
+const matchSearchWordPosition = (node, searchWord) => {
+  const content = 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(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: ReactEditor.findPath(editor, textEntry[0]),
+                offset: position - passedNodeLength
+              };
+            }
+            if (passedLength >= position + keyword.length) {
+              const range = {
+                anchor,
+                focus: {
+                  path: 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 = ReactEditor.toDOMRange(editor, subSplitRange);
+    if (subRange.getBoundingClientRect().height === 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 = [...Editor.nodes(editor, {
+    match: n => {
+      if (Element.isElement(n) && Editor.isBlock(editor, n)) {
+        try {
+          const blockString = 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
+    }
+  };
+  return ReactEditor.toDOMRange(editor, subRange).getBoundingClientRect().height;
+};
+export 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 = 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
+    if (rangeInfo.height > baseHeight) return generateRangeWhenWrapLine(editor, range.anchor.path, range.anchor.offset, keyword.length, domRange, baseHeight);
+    return [{
+      rangeInfo,
+      domRange
+    }];
+  });
+  return rangeList;
+};
+export 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 = ReactEditor.toSlateRange(editor, domRange, {
+      exactMatch: true
+    });
+    Transforms.insertText(editor, replacedContent, {
+      at: Editor.end(editor, slateRange)
+    });
+    Transforms.delete(editor, {
+      at: slateRange
+    });
+  });
+};
+export const clearCanvas = canvases => {
+  canvases.forEach(canvas => canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height));
+};
+export 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
+    });
+  }
+};
+const getNowrapCodeBlockInfos = editor => {
+  const codeBlockEntries = Editor.nodes(editor, {
+    match: n => n.type === CODE_BLOCK && n.style['white_space'] === 'nowrap',
+    at: []
+  }) || [];
+
+  // Get code block dom and range info
+  const codeBlockInfos = Array.from(codeBlockEntries).map(_ref2 => {
+    let [codeBlockNode] = _ref2;
+    const codeBlockRange = 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 = 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
+  };
+};
+export 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 ? FOCUSSED_SEARCH_HIGHLIGHT_FILL_COLOR : 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/basic-sdk/extension/plugins/search-replace/index.js

@@ -0,0 +1,10 @@
+import { SEARCH_REPLACE } from '../../constants/menus-config';
+import SearchReplaceMenu from './menu';
+import withSearchReplace from './plugin';
+const SearchReplacePlugin = {
+  type: SEARCH_REPLACE,
+  editorMenus: [SearchReplaceMenu],
+  editorPlugin: withSearchReplace,
+  renderElements: []
+};
+export default SearchReplacePlugin;