为Monaco-Editor添加行书签功能的技术实现问询

Monaco Editor本身确实没有内置类似VSCode的行书签功能，但可以通过**自定义装饰器（Decorations）**实现完全等效的效果，包括行首标记（类似断点的样式也支持）。以下是具体实现方案：

核心实现思路 #

利用Monaco提供的createTextEditorDecorationType创建自定义装饰规则，结合deltaDecorations将标记应用到指定行，再通过CSS控制行首标记的样式，同时可绑定快捷键实现书签的添加/移除操作。

1. 创建装饰器类型 #

先定义用于书签的装饰器，指定行首 gutter 区域的样式、右侧缩略图的标记效果：

// 创建书签装饰器类型
const bookmarkDecorationType = monaco.editor.createTextEditorDecorationType({
  gutterClassName: 'bookmark-gutter', // 关联自定义CSS类
  overviewRulerColor: 'rgba(255, 165, 0, 0.7)', // 右侧缩略图标记颜色
  overviewRulerLane: monaco.editor.OverviewRulerLane.Left // 缩略图标记位置
});

2. 编写CSS样式控制行首标记 #

通过自定义类定义行首标记的外观，支持自定义图标（SVG或图片），以下是两种常见样式：

书签样式

.bookmark-gutter {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="orange" d="M6 0v16l5-4-5-4z"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

断点式圆形标记样式

.bookmark-gutter {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="5" fill="red"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

3. 实现书签的添加/移除逻辑 #

维护一个数组存储书签行号（注意Monaco行索引从0开始），并编写函数更新编辑器中的装饰：

// 存储书签行的0-based索引
let bookmarkLines = [];

// 添加书签
function addBookmark(editor, lineNumber) {
  const lineIdx = lineNumber - 1;
  if (!bookmarkLines.includes(lineIdx)) {
    bookmarkLines.push(lineIdx);
    updateBookmarkDecorations(editor);
  }
}

// 移除书签
function removeBookmark(editor, lineNumber) {
  const lineIdx = lineNumber - 1;
  bookmarkLines = bookmarkLines.filter(idx => idx !== lineIdx);
  updateBookmarkDecorations(editor);
}

// 更新编辑器中的书签装饰
function updateBookmarkDecorations(editor) {
  const decorations = bookmarkLines.map(lineIdx => ({
    range: new monaco.Range(lineIdx + 1, 1, lineIdx + 1, 1), // 定位到目标行
    decorationType: bookmarkDecorationType
  }));
  // 清空旧装饰，应用新装饰
  editor.deltaDecorations([], decorations);
}

4. 绑定快捷键（可选） #

为书签操作绑定快捷键，比如Ctrl+Shift+K切换当前行的书签状态：

editor.addCommand(
  monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyK,
  () => {
    const currentLine = editor.getPosition().lineNumber;
    const lineIdx = currentLine - 1;
    if (bookmarkLines.includes(lineIdx)) {
      removeBookmark(editor, currentLine);
    } else {
      addBookmark(editor, currentLine);
    }
  }
);

内容的提问来源于stack exchange，提问作者Hamid Reza Hex