bastianallgeier / triptrap

MIT License
5 stars 1 forks source link

[Idea] KirbyTags support #2

Open hdodov opened 5 years ago

hdodov commented 5 years ago

You could add kirbytag support by serializing tags to XML before saving them.

(image: quote.png caption: Caption lorem ipsum dolor sit amet)

to

<kirby image="quote.png" caption="Caption lorem ipsum dolor sit amet"/>

I use that in kirby-exporter and it has worked flawlessly so far. It uses a lot of native Kirby functionality too.

Then, you could configure tiptap's toDOM() method to parse <kriby> tags. You'd have a custom Vue component to handle them - and that's it.

As for the UI, you could add a dropdown similar to those for headings - except it contains all possible kirbytags. Or perhaps those that are allowed in the field's blueprint.

Edit: On second thoughts, tiptap should be able to save Kirbytags as XML tags by itself, as long as you correctly define the parse rules. Then, the only problem would be to convert those tags from XML to the actual HTML output that each tag has in a template. That could be accomplished by:

  1. Parse the field's HTML containing XML kirbytags
  2. After obtaining each tag's properties, generate its output
  3. Replace the initial XML tag with the generated markup
  4. Return the processed field HTML