Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Hide multiple lines

未关闭
  • 哪里不对？
#684 9 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
35/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
停滞
技术栈
react, typescript
领域
frontend

调研方向

该 issue 未提供 repository 文件或测试入口点；请从提供的 TypeScript foldLinesPlugin 及其 CodeMirror 装饰逻辑开始。完成的标准是仅显示匹配的行，同时保留其原始行号，并在编辑器中验证该行为。

由索引模型根据 Issue 内容生成。

描述

Hi 👋

I'm trying to build something like the GitHub code search

Example

image

For now I'm able to highlight words based on start and end index:

image

Code 


const getDecorations = (
  highlights: Array<{ start: number; end: number }> = []
) => {
  const decorations = highlights.map(({ start, end }) =>
    Decoration.mark({
      attributes: { style: "background-color: #dadb1699" },
    }).range(start, end)
  );
  return Decoration.set(decorations);
};

export const highlightPlugin = (
  highlights: Array<{ start: number; end: number }>
) =>
  ViewPlugin.fromClass(
    class {
      decorations: DecorationSet;
      constructor() {
        this.decorations = getDecorations(highlights);
      }

      update(update: ViewUpdate) {
        if (update.docChanged || update.viewportChanged) {
          this.decorations = getDecorations();
        }
      }
    },
    {
      decorations: (v) => v.decorations,
    }
  );

const pointIsInRanges = (point: number, start: number, end: number) => point >= start && point <= end


export const foldLinesPlugin = (
  rangesToKeep: { start: number; end: number }[]
): ViewPlugin<{ decorations: DecorationSet }> => {
   return ViewPlugin.fromClass(
    class {
      decorations: DecorationSet;
      constructor(view: EditorView) {
        this.decorations = this.foldLines(view);
      }

      update(update: ViewUpdate) {
        if (update.docChanged || update.viewportChanged) {
          this.decorations = this.foldLines(update.view);
        }
      }

      foldLines(view: EditorView): DecorationSet {
        const builder = new RangeSetBuilder<Decoration>();
        const lines = view.state.doc.lines;
        for (let i = 1; i <= lines; i++) {
          const line = view.state.doc.line(i);
          let found = false;
          for (const range of rangesToKeep) {
            if (
              pointIsInRanges(range.start, line.from, line.to) ||
              pointIsInRanges(range.end, line.from, line.to)
            ) {
              found = true;
              break;
            }
          }
          if (!found) {
            builder.add(
              line.from,
              line.to,
              Decoration.replace({ widget: new FoldWidget() })
            );
          }
        }
        return builder.finish();
      }
    },
    {
      decorations: (v) => v.decorations,
    }
  );
};

class FoldWidget extends WidgetType {
  toDOM() {
    const span = document.createElement("span");
    span.style.display = "none";
    return span;
  }
}

How can I just show only the match result without all other lines and how can I keep the only the original line number?

主要语言
TypeScript
星标
2.3k
派生
162
平均合并
2 小时 41 分钟
30 天内合并 PR
1

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

uiwjs/react-codemirror 的其他 Issue

查看 uiwjs/react-codemirror 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。