如何在Codemirror 6中搜索并突出显示子字符串？

Question

我正在构建一个简单的代码编辑器来帮助孩子们学习 HTML。我试图添加的一项功能是，当用户将鼠标悬停在渲染的代码（在 iframe 中）上时，编辑器中相应的 HTML 代码会突出显示。因此，例如，如果用户将鼠标悬停在小猫的图像上，则实际代码 将会在编辑器中突出显示。

将鼠标悬停在 iframe 上以获取该元素的 html 源是很简单的部分，我已经完成了（document.elementFromPoint(e.clientX, e.clientY在 iframe 本身中使用，并将其发布到父级） - 所以这不是我需要帮助的部分。我不明白的部分是如何在代码编辑器中搜索并突出显示所选代码的字符串。

我在这个项目中使用 Codemirror 6，因为它似乎会给我最大的灵活性来创建这样的功能。然而，作为 Codemirror 6 的新手，我正在努力阅读文档来找出应该从哪里开始。看来我需要完成的步骤是：

1. 在编辑器文本中搜索与字符串匹配的范围（即“<img src="kittens.gif"”）。
2. 在编辑器中突出显示该范围。

任何人都可以给我一些关于我应该在 Codemirror 6 API 中的何处开始实现此功能的建议吗？看起来应该很简单，但我对 Codemirror API 和简洁文档的不熟悉使这变得困难。

Answer 1

1. 在编辑器文本中搜索与字符串匹配的范围（即“<img src="kittens.gif"”）。

您可以使用 SearchCursor 类（迭代器）来获取编辑器中 DOM 元素所在的字符范围。

// the import for SearchCursor class
import {SearchCursor} from "@codemirror/search"

// your editor's view
let main_view = new EditorView({ /* your code */ });

// will create a cursor based on the doc content and the DOM element as a string (outerHTML)
let cursor = new SearchCursor(main_view.state.doc, element.outerHTML); 

// will search the first match of the string element.outerHTML in the editor view main_view.state.doc
cursor.next() 

// display the range where is located your DOM element in your editor
console.log(cursor.value); 

2. 在编辑器中突出显示该范围。

正如此处的迁移文档中所述，标记的文本将被装饰替换。要使用 codemirror 6 在编辑器中突出显示某个范围，您需要创建一个装饰并将其应用到视图的调度中。这种装饰需要由您在编辑器视图的扩展中添加的扩展来提供。

// the import for the 3 new classes
import {StateEffect, StateField} from "@codemirror/state"
import {Decoration} from "@codemirror/view"

// code mirror effect that you will use to define the effect you want (the decoration)
const highlight_effect = StateEffect.define(); 

// define a new field that will be attached to your view state as an extension, update will be called at each editor's change
const highlight_extension = StateField.define({
  create() { return Decoration.none },
  update(value, transaction) {
    value = value.map(transaction.changes)

    for (let effect of transaction.effects) {
      if (effect.is(highlight_effect)) value = value.update({add: effect.value, sort: true})
    }

    return value
  },
  provide: f => EditorView.decorations.from(f)
});

// this is your decoration where you can define the change you want : a css class or directly css attributes
const highlight_decoration = Decoration.mark({
  // attributes: {style: "background-color: red"}
  class: 'red_back'
});

// your editor's view
let main_view = new EditorView({ 
  extensions: [highlight_extension]
});

// this is where the change takes effect by the dispatch. The of method instanciate the effect. You need to put this code where you want the change to take place
main_view.dispatch({
  effects: highlight_effect.of([highlight_decoration.range(cursor.value.from, cursor.value.to)])
});

希望它能帮助您实现您想要的；）