How can I ensure that the end of my custom quiljs parchment doesn't continue the formatting?

Question

I have a custom parchment that looks like:

import { Quill } from 'react-quill';

const Parchment = Quill.import('parchment');

let config = { scope: Parchment.Scope.INLINE };
let AcceptedPredictionClass = new Parchment.Attributor.Class('accepted', 'ql', config);
Quill.register(AcceptedPredictionClass)

and to use it:

    const delta = new Delta()
      .retain(currentSelection.index)
      .delete(predictionLength)
      .insert(previousPredictionText, { accepted: 'accepted' })

    quill.updateContents(delta)

but the problem is that if I start typing, it keeps the ql-accepted style. I need it to revert back to normal.

Answer 1

How about simply adding one more .insert(' ', {}) after last insert? This should add one normal span after the inserted class.

This is how it will be:

const delta = new Delta()
  .retain(currentSelection.index)
  .delete(predictionLength)
  .insert(previousPredictionText, { accepted: 'accepted' })
  .insert(' ', {})

quill.updateContents(delta)

FYI: I haven't tested it yet but the general idea is that the cursor will be inside new span without the added class.