feat: add multi line decorations

Author: guqiankun

packages/alex/src/core/editor/editor.module.ts

@@ -458,28 +458,54 @@ class EditorSpecialContribution
       )
     );
     let oldClickDecorations: string[] = [];
-    const highlightLine = (lineNumber: number | [number, number]) => {
-      const startLineNumber = typeof lineNumber === 'number' ? lineNumber : lineNumber[0];
-      const endLineNumber = typeof lineNumber === 'number' ? lineNumber : lineNumber[1];
-      // 延迟高亮，否则不居中
-      oldClickDecorations = editor.monacoEditor.deltaDecorations(oldClickDecorations, [
-        {
-          range: new monaco.Range(startLineNumber, 1, endLineNumber, 1),
-          options: {
-            isWholeLine: true,
-            linesDecorationsClassName: styles['line-anchor'],
-            className: styles['line-content'],
+    const highlightLine = (lineNumber: number | [number, number] | Array<[number, number]>) => {
+      let centerLine: number;
+      let newDecorations: monaco.editor.IModelDeltaDecoration[];
+      if (Array.isArray(lineNumber) && Array.isArray(lineNumber[0])) {
+        centerLine = lineNumber[0][0];
+        newDecorations = lineNumber.map((line) => {
+          return {
+            range: new monaco.Range(line[0], 1, line[1], 1),
+            options: {
+              description: 'line-anchor-description',
+              isWholeLine: true,
+              linesDecorationsClassName: styles['line-anchor'],
+              className: styles['line-content'],
+            },
+          };
+        });
+      } else {
+        const startLineNumber =
+          typeof lineNumber === 'number' ? lineNumber : (lineNumber[0] as number);
+        const endLineNumber =
+          typeof lineNumber === 'number' ? lineNumber : (lineNumber[1] as number);
+        centerLine = startLineNumber;
+        newDecorations = [
+          {
+            range: new monaco.Range(startLineNumber, 1, endLineNumber, 1),
+            options: {
+              // @ts-ignore
+              description: 'line-anchor-description',
+              isWholeLine: true,
+              linesDecorationsClassName: styles['line-anchor'],
+              className: styles['line-content'],
+            },
           },
-        },
-      ]);
+        ];
+      }
+      // 延迟高亮，否则不居中
+      oldClickDecorations = editor.monacoEditor.deltaDecorations(
+        oldClickDecorations,
+        newDecorations
+      );
       setTimeout(() => {
         if (this.propsService.props.editorConfig?.stretchHeight) {
           const firstLine = document.querySelector(`.${styles['line-anchor']}`) as HTMLElement;
           if (firstLine) {
             firstLine.scrollIntoView({ block: 'center' });
           }
         } else {
-          editor.monacoEditor.revealLineInCenterIfOutsideViewport(startLineNumber);
+          editor.monacoEditor.revealLineInCenterIfOutsideViewport(centerLine);
         }
       }, 0);
     };
@@ -496,7 +522,9 @@ class EditorSpecialContribution
           let nextLineNumber: number | [number, number] = lineNumber;
           if (event?.event?.shiftKey && lastLineNumber) {
             let startLineNumber = Array.isArray(lastLineNumber)
-              ? lastLineNumber[0]
+              ? Array.isArray(lastLineNumber[0])
+                ? lastLineNumber[0][0]
+                : lastLineNumber[0]
               : lastLineNumber;
             if (startLineNumber > nextLineNumber) {
               nextLineNumber = [nextLineNumber, startLineNumber];

packages/alex/src/core/editor/types.ts

@@ -20,7 +20,7 @@ export interface DocumentModel {
   /**
    * 展示文件行号，如果传入数组，则表示多行
    */
-  lineNumber?: number | [number, number];
+  lineNumber?: number | [number, number] | Array<[number, number]>;
   /**
    * 行号变更事件
    */

packages/integrations/src/editor/index.tsx

@@ -53,7 +53,12 @@ const App = () => {
   const [ref, setRef] = useState('');
   const [filepath, setFilePath] = useState('');
   const [encoding, setEncoding] = useState<'utf8' | 'gbk' | undefined>('utf8');
-  const [lineNumber, setLineNumber] = useState<number | [number, number] | undefined>();
+  const [lineNumber, setLineNumber] = useState<
+    number | [number, number] | Array<[number, number]> | undefined
+  >([
+    [10, 20],
+    [30, 40],
+  ]);
 
   const readFile = async (filepath: string) => {
     const res = await fetch(
@@ -73,6 +78,12 @@ const App = () => {
     setFilePath(filepath);
   };
 
+  function setLineNumberFn(value) {
+    console.log(value);
+
+    setLineNumber(JSON.parse(value));
+  }
+
   return (
     <div style={{ padding: 8 }}>
       <div style={{ display: 'flex', marginBottom: 8 }}>
@@ -102,15 +113,25 @@ const App = () => {
           ))}
         </Select>
         <Select
-          value={lineNumber}
-          onChange={setLineNumber}
+          value={JSON.stringify(lineNumber)}
+          onChange={setLineNumberFn}
           size="small"
           style={{ width: 120, marginRight: 8 }}
           placeholder="更改选中行"
         >
-          {[10, 30, 100].map((line) => (
-            <Select.Option key={line} value={line}>
-              {line}
+          {[
+            10,
+            30,
+            100,
+            [10, 20],
+            [
+              [30, 35],
+              [40, 50],
+              [66, 77],
+            ],
+          ].map((line, index) => (
+            <Select.Option key={index} value={JSON.stringify(line)}>
+              {JSON.stringify(line)}
             </Select.Option>
           ))}
         </Select>