Resolve "Im fromSORM fehlt Eingabename des `templates/forms/wysiwyg_input.php`"

Closes #5627

Merge request studip/studip!4243

5 files changed, 83 insertions, 94 deletions

diff --git a/resources/vue/components/StudipWysiwyg.vue b/resources/vue/components/StudipWysiwyg.vue
index c7de9c7..13e567a 100644
--- a/resources/vue/components/StudipWysiwyg.vue
+++ b/resources/vue/components/StudipWysiwyg.vue
@@ -1,78 +1,62 @@
-<script>
+<script setup>
+import { ref, computed, onMounted } from 'vue';
 import { ClassicEditor, BalloonEditor } from '../../assets/javascripts/chunks/wysiwyg.js';
-import {h, resolveComponent} from "vue";
 
-export default {
-    name: 'studip-wysiwyg',
-    emits: ['update:modelValue'],
-    props: {
-        modelValue: {
-            type: String,
-            required: true,
-        },
-        editorType: {
-            type: String,
-            validator(value) {
-                return ['classic', 'balloon'].includes(value);
-            },
-            default: 'classic',
-        },
-        autofocus: Boolean,
+const props = defineProps({
+    editorType: {
+        type: String,
+        validator: value => ['classic', 'balloon'].includes(value),
+        default: 'classic'
     },
-    data() {
-        return {
-            currentText: '',
-            editorConfig: {},
-
-            createdEditor: null,
-            shouldFocus: this.autofocus,
-        };
-    },
-    computed: {
-        editor() {
-            switch (this.editorType) {
-                case 'classic':
-                    return ClassicEditor;
-                case 'balloon':
-                    return BalloonEditor;
-            }
-            throw new Error('Unknown `editorType`');
-        },
+    name: {
+        type: String,
+        default: 'content'
     },
-    methods: {
-        onReady(editor) {
-            this.createdEditor = editor;
-            this.currentText = this.modelValue;
+    autofocus: Boolean
+});
 
-            if (this.shouldFocus) {
-                this.focus();
-            }
+const content = defineModel({ type: String, default: '' });
 
-            STUDIP.eventBus.emit('editor-loaded', this.createdEditor);
-        },
-        onInput(value) {
-            this.currentText = value;
-            this.$emit('update:modelValue', value);
-        },
-        focus() {
-            if (this.createdEditor) {
-                this.createdEditor.focus();
-            } else {
-                this.shouldFocus = true;
-            }
-        }
-    },
-    created() {
-        STUDIP.loadChunk('mathjax');
-    },
-    render() {
-        return h(resolveComponent('ckeditor'), {
-            editor: this.editor,
-            config: this.editorConfig,
-            modelValue: this.modelValue,
-            onInput: this.onInput,
-            onReady: this.onReady,
-        })
+const createdEditor = ref(null);
+const shouldFocus = ref(props.autofocus);
+
+const editor = computed(() => {
+    switch (props.editorType) {
+        case 'classic':
+            return ClassicEditor;
+        case 'balloon':
+            return BalloonEditor;
+    }
+
+    throw new Error('Unknown `editorType`');
+});
+
+const focus = () => {
+    if (createdEditor.value && typeof createdEditor.value.focus === 'function') {
+        createdEditor.value.focus();
+    } else {
+        shouldFocus.value = true;
+    }
+}
+
+const onReady = editorInstance => {
+    createdEditor.value = editorInstance;
+    if (shouldFocus.value) {
+        focus();
     }
-};
+    STUDIP.eventBus.emit('editor-loaded', createdEditor.value);
+}
+
+onMounted(() => STUDIP.loadChunk('mathjax'));
 </script>
+
+<template>
+    <Ckeditor
+        :editor="editor"
+        :key="editorType"
+        v-model="content"
+        :onReady="onReady"
+        v-bind="$attrs"
+    />
+    <textarea :name="name" :value="content" style="display:none;"></textarea>
+</template>
diff --git a/templates/forms/i18n_formatted_input.php b/templates/forms/i18n_formatted_input.php
index bef667c..51d7148 100644
--- a/templates/forms/i18n_formatted_input.php
+++ b/templates/forms/i18n_formatted_input.php
@@ -7,12 +7,14 @@
             <span class="asterisk" title="<?= _('Dies ist ein Pflichtfeld') ?>" aria-hidden="true">*</span>
         <? endif ?>
     </label>
-    <i18n-textarea type="wysiwyg"
-                   id="<?= $id ?>"
-                   name="<?= htmlReady($name) ?>"
-                   value="<?= htmlReady($value) ?>"
-                   @allinputs="setInputs"
-                   @selectlanguage="(language_id) => selectLanguage('<?= htmlReady($this->name) ?>', language_id)"
-                   <?= $required ? 'required' : '' ?>>
+    <i18n-textarea
+        type="wysiwyg"
+        id="<?= $id ?>"
+        name="<?= htmlReady($name) ?>"
+        value="<?= htmlReady($value) ?>"
+        @allinputs="setInputs"
+        @selectlanguage="(language_id) => selectLanguage('<?= htmlReady($this->name) ?>', language_id)"
+        <?= $required ? 'required' : '' ?>
+    >
     </i18n-textarea>
     </div>
diff --git a/templates/forms/i18n_text_input.php b/templates/forms/i18n_text_input.php
index b518962..67d9445 100644
--- a/templates/forms/i18n_text_input.php
+++ b/templates/forms/i18n_text_input.php
@@ -7,11 +7,12 @@
             <span class="asterisk" title="<?= _('Dies ist ein Pflichtfeld') ?>" aria-hidden="true">*</span>
         <? endif ?>
     </label>
-    <i18n-textarea type="text"
-                   id="<?= $id ?>"
-                   name="<?= htmlReady($this->name) ?>"
-                   value="<?= htmlReady($value) ?>"
-                   <?= $required ? 'required' : '' ?>
-                   @allinputs="setInputs">
+    <i18n-textarea
+        type="text"
+        id="<?= $id ?>"
+        name="<?= htmlReady($this->name) ?>"
+        value="<?= htmlReady($value) ?>"
+        <?= $required ? 'required' : '' ?>
+        @allinputs="setInputs">
     </i18n-textarea>
 </div>
diff --git a/templates/forms/i18n_textarea_input.php b/templates/forms/i18n_textarea_input.php
index 01110c6..9b53e38 100644
--- a/templates/forms/i18n_textarea_input.php
+++ b/templates/forms/i18n_textarea_input.php
@@ -7,12 +7,13 @@
             <span class="asterisk" title="<?= _('Dies ist ein Pflichtfeld') ?>" aria-hidden="true">*</span>
         <? endif ?>
     </label>
-    <i18n-textarea type="textarea"
-                   id="<?= $id ?>"
-                   name="<?= htmlReady($this->name) ?>"
-                   value="<?= htmlReady($value) ?>"
-                   <?= $required ? 'required' : '' ?>
-                   @selectlanguage="(language_id) => selectLanguage('<?= htmlReady($this->name) ?>', language_id)"
-                   @allinputs="setInputs">
+    <i18n-textarea
+        type="textarea"
+        id="<?= $id ?>"
+        name="<?= htmlReady($this->name) ?>"
+        value="<?= htmlReady($value) ?>"
+        <?= $required ? 'required' : '' ?>
+        @selectlanguage="(language_id) => selectLanguage('<?= htmlReady($this->name) ?>', language_id)"
+        @allinputs="setInputs">
     </i18n-textarea>
 </div>
diff --git a/templates/forms/wysiwyg_input.php b/templates/forms/wysiwyg_input.php
index 2fd0c90..48f507e 100644
--- a/templates/forms/wysiwyg_input.php
+++ b/templates/forms/wysiwyg_input.php
@@ -8,9 +8,10 @@
         <? endif ?>
     </label>
     <studip-wysiwyg
-                   id="<?= $id ?>"
-                   v-model="<?= htmlReady($name) ?>"
-                   value="<?= htmlReady($value) ?>"
-                   <?= $required ? 'required' : '' ?>>
+       id="<?= $id ?>"
+       v-model="<?= htmlReady($name) ?>"
+       name="<?= htmlReady($this->name) ?>"
+       value="<?= htmlReady($value) ?>"
+       <?= $required ? 'required' : '' ?>>
     </studip-wysiwyg>
     </div>