Dynamically add styles to text

[vijayk1989]

Is your feature request related to a problem? Please describe. I want to auto underline text after typing based on a criteria. For example. I have an array with the names: [Jane, John]. Now when I type the word Jane or John I want that text to be underlined after I finish typing them. I know its possible to add styles to selected text so I tried something similar with a debounced function to add an underline to a word dyanmically but I have been unable to make it work.

Describe the solution you'd like I want to be able to add styles to text (not selected text) any text in the document.

Describe alternatives you've considered I have tried scanning the full document and applying styles but I am not able to make it work.

[matthewlipski]

Technically this is currently possible to do by parsing the whole document in the onChange handler of BlockNoteView, and applying styles where you find content between [] brackets, but this is extremely tedious.

TipTap, the underlying editor used by BlockNote, has a feature called input rules which is made for this exact use case. However, we don't have a wrapper for this in the current BlockNote API, so you would have to create a TipTap extension and pass it to the editor via the _extensions option, smth like this:

const editor = useCreateBlockNote({
  _extensions: {
    dynamicUnderline: Extension.create({
      name: "dynamicUnderline",
      addInputRules() {
        ...
      }
    })
  }
});

[YousefED]

There's an example of this here: https://www.blocknotejs.org/examples/extensions/tiptap-arrow-conversion

[nperez0111]

BlockNote Extensions now support input rules https://www.blocknotejs.org/docs/features/extensions