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

Question

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

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

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

1. 在编辑器的文本中搜索与字符串匹配的范围(即'
2. 在编辑器中突出显示该范围。

有人能给我一些建议，告诉我应该在 Codemirror 6 API 中的什么地方开始实现它吗？看起来应该很容易，但我对 Codemirror API 和简洁文档的不熟悉使这变得困难。

Answer 1

<强>1。在编辑器的文本中搜索与字符串匹配的范围(即。'

您可以使用 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。在编辑器中突出显示该范围。

如迁移文档中所述here , 标记的文字被装饰取代。要使用 codemirror 6 在编辑器中突出显示一个范围，您需要创建一个装饰并将其应用到 View 的调度中。此装饰需要由您在编辑器 View 的扩展中添加的扩展提供。

// 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)])
});

希望它能帮助你实现你想要的;)