Dynamic highlighter while typing

[LuizPelegrini]

Hi there,

I am trying to create a tiptap feature that while the user is typing, it applies a custom style (change the text color or background color) until certain length of the text (suppose 10 chars). After that length, the text is displayed normally.

I created a custom mark

const DynamicHighlighter = Mark.create({
  name: "dynamicHighlighter",

  defaultOptions: {
    HTMLAttributes: {
      class: 'dynamic-highlighter'
    }
  },

  parseHTML(){
    return [
      {
        tag: 'span',
        getAttrs: elem => elem.classList.contains('dynamic-highlighter')
      }
    ];
  },

  renderHTML({ HTMLAttributes }){
    return ['span', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
  }
});

And this is how I use it in my component

<script>

...

  mounted() {
    this.editor = new Editor({
      extensions: [
        StarterKit,
        DynamicHighlighter
      ],

      content: this.value,

      onUpdate: ({ editor }) => {
        // checking if the limit has been reached...
        const end = editor.state.doc.textContent.length + 1;
        if(editor.state.doc.textContent.length <= 10){
          // create my custom mark and wrap in a <span class="dynamic-highlighter">
          const mark = editor.schema.marks.dynamicHighlighter.create();
          const transaction = editor.state.tr;
          transaction.addMark(1, end, mark);
          editor.view.dispatch(transaction);
        }else{
          const transaction = editor.state.tr;
          transaction.removeMark(11, end, editor.schema.marks.dynamicHighlighter);
          editor.view.dispatch(transaction);
        }

        // HTML
        this.$emit("input", editor.getHTML());
      },
     });
  }
</script>
 
<style>
.ProseMirror span.dynamic-highlighter{
  color: rgb(219, 219, 219);
  background-color: blue;
  padding: 2px;
}
</style>

Everything works fine if I start typing from the first line

the problem comes if I start typing on a new line (after pressing enter)

I am trying to accomplish this task for quite some time. If there is an easier way on how to accomplish this with tiptap, I'd be more than happy to know it, as I have a feeling the way I'm doing is quite hacky and inefficient.

[philippkuehn]

You could also solve this with decorations. Read about it in the ProseMirror guide. The linter experiment is maybe a good reference.

Another way is to dynamically add a class to the editor based on its content:

new Plugin({
  props: {
    attributes: state => {
      if (state.doc.textContent.length <= 10) {
        return {
          class: 'your-custom-class',
        }
      }
    },
  },
})