1

While working with Quill in my application, I'm trying to add functionality to dynamically link to resources - i.e. if the user types a username or page name, it will wrap it in a link that leads to that resource. The catch is, I don't want these changes committed to the delta or saved back to the server1.

Is there any way to mask / filter Quill's editor content, without sending the masked changes back to the delta? Or is there another approach that achieves the same result? All it needs to be is an <a> tag that doesn't get saved to the delta.

I've successfully written a Quill plugin to identify resources and wrap them in links as the user types, but it seems that any kind of modification to the editor content prompts the changes being absorbed into the delta. Hell, if I modify the element via the dev console, Quill picks up the changes.

I thought about just letting the links live in the delta, and removing the formatting before saving to the server - but my implementation left the delta increasingly fractured, and after a few reloads / sessions it increasingly broke my code's ability to detect new links.

My next thought is to create a second / cloned editor window, and somehow selectively sync input back to the main editor window. The logistics of keeping the content synced between the two windows seems like a nightmare though, especially when using the toolbar buttons.

1The reason I don't want these changes in the delta is that resources are very dynamic - hundreds could be added or deleted between sessions, and having thousands of files each save hundreds of references to long-dead resources adds up to a lot of overhead. It's ideal for the links to be client-side-only.

CodeMoose
  • 2,964
  • 4
  • 31
  • 56

1 Answers1

0

Quill content IS Delta. You can't put something in the editor that doesn't end up being filtered (in some way) or inserted into Delta. What appears in the editor is a reflection of the Delta.

I thought about just letting the links live in the delta, and removing the formatting before saving to the server - but my implementation left the delta increasingly fractured, and after a few reloads / sessions it increasingly broke my code's ability to detect new links.

As you mentioned, your idea of altering Delta before it is sent to the server seems to me to be the most viable solution. You should remember that Delta is simply a JSON object with a single property (ops), which is a vector of objects that represent the operations required to reflect Quill content, and because of this there are two ways to change it:

  1. Get the Delta object and change its properties as desired via JavaScript.
  2. Use regular expressions to selectively remove or change the desired portion of content.

I suggest you take the first approach as there is a API ready to do this kind of procedure. Also, probably you can find help in the utility section. As an example, see if this link can give you an idea.

Keep in mind that, ideally, you should not change Quill Delta (from the editor) as this would change what the user sees in it. You must work with a copy of it. This way you keep the content intact, and produce the desired result at the moment you need to persist.

Be aware that depending on the result of the change you made, you may need to reverse the process when data needs to be read from the database. After all, Quill may end up not understanding it, and the content may end up being filtered out. With that in mind, we might think that you would be creating a type of translator, responsible for reading and saving from two different "languages".

So that the server is not burdened with the responsibility of translating each Delta sent and received, I suggest that you define the translation code on client-side, written in JavaScript.

As an additional point, if you need more information about Quill, you can find everything you need on its website, and some more here.

If you still need help, I ask you for an example of how you think your Delta should look.

Loa
  • 2,117
  • 3
  • 21
  • 45