Implement integrated HTML/WYSIWYG editor

Tekst-Web/src/components/HtmlEditor.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { NTabs, NTabPane, NInput, useDialog } from 'naive-ui';
+import WysiwygEditor from '@/components/WysiwygEditor.vue';
+import { $t } from '@/i18n';
+import { negativeButtonProps, positiveButtonProps } from './dialogButtonProps';
+
+withDefaults(
+  defineProps<{
+    value?: string;
+    toolbarSize?: 'small' | 'medium' | 'large';
+    maxChars?: number;
+    editorMode: 'wysiwyg' | 'html';
+  }>(),
+  {
+    value: '',
+    toolbarSize: 'small',
+    maxChars: undefined,
+    editorMode: 'wysiwyg',
+  }
+);
+
+const emit = defineEmits(['update:value', 'update:editorMode', 'blur', 'focus', 'input']);
+
+const dialog = useDialog();
+
+function handleChangeTab(value: 'wysiwyg' | 'html') {
+  if (value === 'html') {
+    // no harm in switching to HTML
+    emit('update:editorMode', value);
+    return;
+  }
+  // switching to WYSIWYG is a potentially destructive operation
+  dialog.warning({
+    title: $t('general.warning'),
+    content: $t('htmlEditor.warnSwitchToWysiwyg'),
+    positiveText: $t('general.yesAction'),
+    negativeText: $t('general.noAction'),
+    positiveButtonProps: positiveButtonProps,
+    negativeButtonProps: negativeButtonProps,
+    autoFocus: false,
+    closable: false,
+    onPositiveClick: () => emit('update:editorMode', value),
+  });
+}
+</script>
+
+<template>
+  <n-tabs type="segment" :value="editorMode" @update:value="handleChangeTab">
+    <n-tab-pane name="wysiwyg" :tab="$t('htmlEditor.wysiwyg')">
+      <WysiwygEditor
+        :value="value"
+        @update:value="emit('update:value', $event)"
+        @blur="emit('blur')"
+        @focus="emit('focus')"
+        @input="emit('input')"
+      />
+    </n-tab-pane>
+    <n-tab-pane name="html" :tab="$t('htmlEditor.html')">
+      <n-input
+        :value="value"
+        type="textarea"
+        :rows="8"
+        placeholder=""
+        style="font-family: 'Courier New', Courier, monospace"
+        @update:value="emit('update:value', $event)"
+        @blur="emit('blur')"
+        @focus="emit('focus')"
+        @input="emit('input')"
+      />
+    </n-tab-pane>
+  </n-tabs>
+</template>
+
+<style scoped></style>

Tekst-Web/src/components/WysiwygEditor.vue

@@ -34,12 +34,10 @@ const props = withDefaults(
   defineProps<{
     value?: string;
     toolbarSize?: 'small' | 'medium' | 'large';
-    maxChars?: number;
   }>(),
   {
     value: '',
     toolbarSize: 'small',
-    maxChars: undefined,
   }
 );
 

Tekst-Web/src/i18n/translations/deDE.yml

@@ -454,3 +454,10 @@ wysiwyg:
   imagePrompt:
     title: Bild einfügen
     message: Bild-URL
+
+htmlEditor:
+  wysiwyg: Visueller Editor
+  html: HTML-Editor
+  warnSwitchToWysiwyg: |
+    Beim Wechsel vom HTML-Editor zum visuellen Editor gehen alle HTML-Tags verloren,
+    die vom visuellen Editor nicht unterstützt werden. Sind Sie sicher?

Tekst-Web/src/i18n/translations/enUS.yml

@@ -437,3 +437,10 @@ wysiwyg:
   imagePrompt:
     title: Insert image
     message: Image URL
+
+htmlEditor:
+  wysiwyg: Visual Editor
+  html: HTML Editor
+  warnSwitchToWysiwyg: |
+    Switching from the HTML editor to the visual editor will remove all HTML tags
+    the visual editor doesn't support. Are you sure you want to switch?

Tekst-Web/src/views/admin/AdminSystemSegmentsView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { $t } from '@/i18n';
 import HelpButtonWidget from '@/components/HelpButtonWidget.vue';
-import WysiwygEditor from '@/components/WysiwygEditor.vue';
+import HtmlEditor from '@/components/HtmlEditor.vue';
 import { computed, ref } from 'vue';
 import { NIcon, NButton, NSelect, NForm, NFormItem, NInput, type FormInst } from 'naive-ui';
 import { usePlatformData } from '@/platformData';
@@ -84,12 +84,13 @@ const systemSegmentKeyOptions = systemSegmentKeys.map((key) => ({
   value: key,
 }));
 
-function getSegmentModel(segmentId?: string) {
+function getSegmentModel(segmentId?: string): ClientSegmentUpdate {
   if (!segmentId) {
     return {
       key: undefined,
       title: '',
       locale: undefined,
+      editorMode: 'wysiwyg',
       html: '',
     };
   } else {
@@ -258,7 +259,11 @@ async function handleDeleteClick() {
       </n-form-item>
       <!-- HTML -->
       <n-form-item path="html" :label="$t('models.segment.html')" required>
-        <WysiwygEditor v-model:value="segmentModel.html" toolbar-size="medium" />
+        <HtmlEditor
+          v-model:value="segmentModel.html"
+          v-model:editor-mode="segmentModel.editorMode"
+          toolbar-size="medium"
+        />
       </n-form-item>
     </n-form>