A dedicated frontend component will be created to safely render Z89/HTML Fragment in the Wikifunctions interface. This component will be similar to some existing components, but tailored for HTML output.

This task is for the development of a dedicated Z89/HTML Fragment Frontend Vue component to render the returned HTML. It will be similar to how Z6 strings are handled, but with specific handling for HTML fragments.

Initial details derived from PRD

• Build a dedicated frontend component for displaying Z89 content safely as HTML.
• It should cover read and edit mode of a type Z89
• Add test cases with complex HTML examples using Compositions and Code (JS/Python) and document the test results.

Acceptance criteria

• A new Vue component is created specifically to render Z89 (HTML Fragment) values in the Wikifunctions UI.
• The component is integrated into the ZObjectKeyValue for ZObjects of type Z89.
• The component supports both read and edit mode
• The component displays the raw HTML string.
• In collapsed read mode, the component renders no raw HTML content but just a CdxIconMarkup + the name of the type (Html Fragment)
• In expanded read mode, the component renders a disabled/readyonly code editor (e.g., Ace Editor) with HTML syntax highlighting.
• In edit mode, the component uses a code editor (e.g., Ace Editor) with HTML syntax highlighting.
• The edit view handles both new entries and pre-filled values for Z89 fields.
• If submitting an zobject with Z89 returns errors, they are shown in the publish modal.
• We warn the user about unclosed tags and invalid tags but up to the capabilities of what ace-editor can do. This is just a POC. Nice to have would be:
  • We warn the user when using unsafe HTML elements (e.g. <script>, on* attributes) . (<script>, <style>, <iframe>, <object>, <embed>, <form>, <input>, <button>, <link>, <meta>)
  • Event handler attributes like onclick, onmouseover, etc.
  • JavaScript URLs in attributes (e.g., href="javascript:...").
  • Inline CSS that contains dangerous properties or expressions.
• (optional) User input is validated async on blur

Tech specs

• The component is integrated into the ZObjectKeyValue for ZObjects of type Z89.
• A new component in 'default-view-types' folder called HTMLFragment.vue (or similar)
• Ace editor possibilities should be checked for helping the user fill in correct HTML

Test Coverage 🧪

• Test cases are written using compositions and code (JS and Python) that return complex Z89 HTML values.
• Examples include tables, lists, styled elements, nested tags, and edge cases (e.g., unclosed tags).
• Rendering is verified visually (in read mode) and structurally (via unit tests).
• Edit mode is tested for user interaction, input validation, and data binding

Next quarter work

Some things we noted as out of scope for the POC but might be worth considering for the next iteration are listed below.

• Guide the user even better in inserting valid HTML:
  • User input in code editor validation async on blur (earlier error messages than in publish dialog)
  • I currently warn the user about unclosed tags and invalid tags and such as mentioned above but only when ace editor is in HTML mode. You can obviously also return html like this in JS code implementation:

Currently we don't warn the user that the script is not allowed here.

return {
   "Z1K1": "Z89",
  "Z89K1": `<strong>${Z23781K1}</strong><script>setTimeout(function(){window.alert('I killed visual editor')},1000);</script>`
}

• There is no preview of what the outputted HTML would look like rendering, not in wikifunctions nor in the Preview of VisualEditor
• What is tricky is indentation. If you try to make it look good in JS it might add extra /t tags or such and indent the result in a strange way.
  
  Its valuable to fix this.
• Design should spend some time on this. The POC just uses whatever we have out of the box. UX could potentially be improved for this. See initial design ticket