UI - Wysiwig Editor

[mstanton1]

• replace tiptapvuetify with tiptap vue2
• replacing ahead of time so we can upgrade to vue3 - as there is a vue3 version
• must be backwards compatible so formatting from previous PPR registrations that were done using the tiptapvuetify wysiwig can be retained
• include some data sanitization, in an effort to secure all data sent to the server.
• See package: https://www.npmjs.com/package/v-sanitize

https://tiptap.dev/installation/vue2

Note: Goal is to replace the Wysiwig as is. However, if there are features that can be addressed from design that were not originally included, and scope is minimal, those should be tackled. Original UI Design is below.

https://app.zenhub.com/workspaces/assets-team-space-61426544e7e2ea001d079597/issues/gh/bcgov/entity/12018

[saragunnarsson]

Hey @cameron-eyds Just a couple things noted below:

• Double check the font-sizes for the headings. H1 is too big, and H3 has too much line-height...H2 seems good, but since it’s in rem I can’t say for sure

• The hairline needs 20px padding top and bottom

• The little corner icon for the user to drag the box bigger and make it bigger is not there
  

[cameron-eyds]

@saragunnarsson Sounds good, thanks for the review!
The only thing i'm not sure is possible with the current tool is the ability to drag/collapse it for resize.
I can look into if/how this might be supported.

[saragunnarsson]

@cameron-eyds Ok sounds good! If it works, great, if not, that should be fine. I'll pop this back in progress

[saragunnarsson]

Looks good @cameron-eyds ! Moving along

[saragunnarsson]

@cameron-eyds Sorry, one more thing!

Set H1, H2, H3 icons to: font-size: 17px, color : #495057
Set the rest of the icon font-sizes to: 21px - color : #495057

[cameron-eyds]

@saragunnarsson Sounds great, thank you!
Adjustments are done and currently in code review :)

[saragunnarsson]

@cameron-eyds Nice one, thank you!

[chdivyareddy]

As we have 16136 for testing Wysiwig editor, moving this ticket to Done.