WYSIWYG-Editor und Upload-Feld

[tumidi]

hängt ab von #253

Upload-Feld

8d4a1d3

Fügt dem StateManager die Methoden hinzu, OptionsFiles zu speichern und abzurufen.

eceac6f

Fügt Endpunkte hinzu, OptionsFiles hinzuzufügen und abzurufen.

Es gibt keinen Endpunkt, um Dateien zu "löschen". Wenn eine Datei von einer Frage entfernt wurde, verbleiben die Daten erst mal. Da das System content-addressable ist, ist es nicht möglich zu wissen, ob eine andere Frage einen Inhalt referenziert, ohne alle Dateien in allen Feldern in allen Fragen in allen Packages zu scannen, also einen Garbage Collector zu implementieren. Ich habe das erst mal ausgeklammert, könnte aber durch questionpy-sdk prune o.ä. aufgerufen werden, ggf. sogar automatisch nach dem Entfernen einer Datei laufen.

78541bd

Fügt <FileUploadElement> im Frontend hinzu, inkl. einer Mini-Vorschau der hochgeladenen Dateien und die Möglichkeit einzelne Dateien zu entfernen.

Hochgeladene Dateien werden dem zentralen Datei-Repository hinzugefügt. Das macht es sehr einfach Dateien hochzuladen, wenn die Frage noch gar nicht existiert (ohne Draft-Questions o.ä. temporäre Strukturen hinzuzufügen, die die Implementierung komplizierter machen würden).

WYSIWYG-Editor

5e767d4

Fügt <WysiwygEditorElement> und <TinyMCE> hinzu.

Basiert vor allem auf folgenden Inspirationen:

• https://www.tiny.cloud/docs/tinymce/latest/vite-es6-npm/
• https://github.com/tinymce/tinymce-vue

Ich hatte gehofft, einfach die Official TinyMCE Vue component zu verwenden, aber die scheint vor allem auf die Verwendung mit der TinyMCE Cloud™ optimiert zu sein, und kein Bundling und self-hosting zu unterstützen.

• <WysiwygEditorElement> ist das FormElement für QuestionOptions.
• <TinyMCE> kapselt die Editor-Instanz und bietet eine v-model-Schnittstelle
  • useTinyMCEInstance managt den Lebenszyklus der Editor-Instanz und Editor-Events
  • TinyMCE hat das Konzept von UI- und Content-CSS
    • UI-CSS (TinyMCEUI.scss):
      • Editor-Widgets, Pop-ups, Modals, etc.
      • lebt in der Host-Anwendung
      • benutzt das Standard-Theme und überschreibe bloß die relevanten CSS Properties mit den Werten aus Bootstrap.
    • Content-CSS (useContentCss/TinyMCEContent.css): Die Styles im iframe (eigentlicher Editor-Bereich). Auch hier habe ich auf das Default-Theme aufgebaut. Die dynamischen Werte müssen aber geupdatet und injiziert werden. Dafür bietet TinyMCE eine API, die ich verwende. Ich nutze dafür
      • ein Base-CSS-Snippet, welches mit CSS-Variablen arbeitet und unveränderlich ist, und
      • ein dynamisches Snippet, welches ganz kurz ist und nur die CSS-Variablen, je nach color mode setzt.
    • Hier würde sich intuitiv evtl. anbieten, beide Varianten zur Build Time mit SCSS vorzurendern, und mit einer einfachen CSS-Klasse o.ä. umzuschalten, allerdings sind die kompilierten SCSS-Snippets durch Vue immer an Components gebunden. Man käme zwar durch ?raw auch so an die SCSS-Datei, dann ist die allerdings nicht kompiliert. Das ganze ist also nicht möglich, ohne Vite's Build Pipeline zu hacken. Ich fand die gewählte Variante wesentlich einfacher und intuitiver, und vor allem sauberer, weil so die Logik in der Komponente steckt.