@enso-ui/wysiwyg 3.2.0 → 3.2.2

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+## 3.2.0
+
+### Added
+
+- added optional Trix editor support through the `editor` prop
+- kept TinyMCE as the default editor for backward compatibility
+- added Trix styling aligned with the Bulma theme tokens used by the existing WYSIWYG field
+

package/README.md

@@ -19,6 +19,7 @@ yarn add @enso-ui/wysiwyg
 ## Features
 - exports `Wysiwyg` as its public surface
 - supports `tinymce` and `trix` editor engines
+- keeps TinyMCE as the default editor for backward compatibility
 - keeps the Bulma presentation layer separate from the renderless/stateful layer where applicable
 ## Usage
 ```vue
@@ -46,6 +47,23 @@ Props:
 - `toolbar`
 
 `editor` defaults to `tinymce`. Set it to `trix` to use the Trix editor.
+
+### Trix
+
+Trix uses the same `v-model` contract as TinyMCE:
+
+```vue
+<Wysiwyg v-model="content"
+    editor="trix"
+    :has-error="false"/>
+```
+
+Form renderers may pass this through backend metadata as `meta.editor: 'trix'`.
+
+## Changelog
+
+See [CHANGELOG.md](CHANGELOG.md).
+
 ## Depends On
 - No additional Enso UI package dependencies.
 - [`trix`](https://github.com/basecamp/trix)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@enso-ui/wysiwyg",
-    "version": "3.2.0",
+    "version": "3.2.2",
     "description": "TinyMCE-based WYSIWYG field for Enso UI.",
     "main": "index.js",
     "repository": {

package/src/bulma/TrixEditor.vue

@@ -1,42 +1,53 @@
-<template>
-    <input :id="inputId"
-        type="hidden"
-        :value="normalizedValue">
-    <trix-editor :input="inputId"
-        ref="trix"
-        @trix-change="update"/>
-</template>
-
-<script setup>
+<script>
 
 import 'trix/dist/trix.css';
 import 'trix';
-import { computed, nextTick, ref, watch } from 'vue';
+import {
+    computed, h, nextTick, ref, watch,
+} from 'vue';
+
+export default {
+    name: 'EnsoTrixEditor',
 
-defineOptions({
     inheritAttrs: false,
-});
 
-const props = defineProps({
-    modelValue: {
-        type: [String, null],
-        default: '',
+    props: {
+        modelValue: {
+            type: [String, null],
+            default: '',
+        },
     },
-});
-
-const emit = defineEmits(['update:modelValue']);
-const inputId = `trix-${Math.random().toString(36).slice(2)}`;
-const trix = ref(null);
-const normalizedValue = computed(() => props.modelValue ?? '');
 
-const update = event => emit('update:modelValue', event.target.value);
-
-watch(() => props.modelValue, value => nextTick(() => {
-    const html = value ?? '';
-
-    if (trix.value && trix.value.value !== html) {
-        trix.value.editor.loadHTML(html);
-    }
-}));
+    emits: ['update:modelValue'],
+
+    setup(props, { emit }) {
+        const inputId = `trix-${Math.random().toString(36).slice(2)}`;
+        const trix = ref(null);
+        const normalizedValue = computed(() => props.modelValue ?? '');
+
+        const update = event => emit('update:modelValue', event.target.value);
+
+        watch(() => props.modelValue, value => nextTick(() => {
+            const html = value ?? '';
+
+            if (trix.value && trix.value.value !== html) {
+                trix.value.editor.loadHTML(html);
+            }
+        }));
+
+        return () => [
+            h('input', {
+                id: inputId,
+                type: 'hidden',
+                value: normalizedValue.value,
+            }),
+            h('trix-editor', {
+                input: inputId,
+                ref: trix,
+                onTrixChange: update,
+            }),
+        ];
+    },
+};
 
 </script>