@enso-ui/wysiwyg 3.1.1 → 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/LICENSE

@@ -1,17 +1,13 @@
 MIT License
-
-Copyright (c) 2026 laravel-enso
-
+Copyright (c) 2026 Laravel Enso
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
-
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
-
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

package/README.md

@@ -1,20 +1,74 @@
 # WYSIWYG
+[![License](https://img.shields.io/badge/license-MIT-10b981.svg)](https://github.com/enso-ui/wysiwyg/blob/master/LICENSE)
+[![Stable](https://img.shields.io/badge/stable-3.1.1-2563eb.svg)](https://www.npmjs.com/package/@enso-ui/wysiwyg)
+[![Downloads](https://img.shields.io/npm/dm/@enso-ui/wysiwyg.svg)](https://www.npmjs.com/package/@enso-ui/wysiwyg)
+[![Vue](https://img.shields.io/badge/vue-3.x-42b883.svg)](https://vuejs.org/)
+[![JavaScript](https://img.shields.io/badge/javascript-ES2020-f7df1e.svg)](https://developer.mozilla.org/docs/Web/JavaScript)
+[![SCSS](https://img.shields.io/badge/scss-supported-c6538c.svg)](https://sass-lang.com/)
+[![npm](https://img.shields.io/badge/npm-package-cb3837.svg)](https://www.npmjs.com/package/@enso-ui/wysiwyg)
+[![Issues](https://img.shields.io/github/issues/enso-ui/wysiwyg.svg)](https://github.com/enso-ui/wysiwyg/issues)
+[![Merge Requests](https://img.shields.io/github/issues-pr/enso-ui/wysiwyg.svg)](https://github.com/enso-ui/wysiwyg/pulls)
+## Description
+WYSIWYG field for Enso UI, with TinyMCE as the default editor and optional Trix support.
+## Installation
+Install the package:
 
-WYSIWYG editor component.
+```bash
+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
+<script setup>
+import Wysiwyg from '@enso-ui/wysiwyg/bulma';
+</script>
 
-### Features
+<Wysiwyg v-model="content"
+    :has-error="false"/>
 
-- TinyMCE-based editing
-- theme-aware styling
+<Wysiwyg v-model="content"
+    editor="trix"
+    :has-error="false"/>
+```
+## API
+### `Wysiwyg`
 
-### Configuration & Usage
+Public export available from `src/bulma/Wysiwyg.vue`.
 
-Use the component where rich text editing is needed inside the Enso ecosystem.
+Props:
+- `hasError`
+- `editor`
+- `menubar`
+- `plugins`
+- `toolbar`
 
-### Contributions
+`editor` defaults to `tinymce`. Set it to `trix` to use the Trix editor.
 
-are welcome. Pull requests are great, but issues are good too.
+### Trix
+
+Trix uses the same `v-model` contract as TinyMCE:
+
+```vue
+<Wysiwyg v-model="content"
+    editor="trix"
+    :has-error="false"/>
+```
 
-### License
+Form renderers may pass this through backend metadata as `meta.editor: 'trix'`.
 
-This package is released under the MIT license.
+## Changelog
+
+See [CHANGELOG.md](CHANGELOG.md).
+
+## Depends On
+- No additional Enso UI package dependencies.
+- [`trix`](https://github.com/basecamp/trix)
+## Contributions
+are welcome. Pull requests are great, but issues are good too.
+Thank you to all the people who already contributed to Enso!
+## License
+[MIT](https://github.com/enso-ui/wysiwyg/blob/master/LICENSE)

package/package.json

@@ -1,29 +1,30 @@
 {
-  "name": "@enso-ui/wysiwyg",
-  "version": "3.1.1",
-  "description": "WYSIWYG",
-  "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/enso-ui/wysiwyg.git"
-  },
-  "keywords": [
-    "wysiwyg",
-    "vue"
-  ],
-  "author": "Adrian Ocneanu <aocneanu@gmail.com>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/enso-ui/wysiwyg/issues"
-  },
-  "homepage": "https://github.com/enso-ui/wysiwyg#readme",
-  "dependencies": {
-    "@tinymce/tinymce-vue": "^4.0.0"
-  },
-  "peerDependencies": {
-    "vue": "^3.5.0"
-  },
-  "devDependencies": {
-    "vue": "^3.5.0"
-  }
+    "name": "@enso-ui/wysiwyg",
+    "version": "3.2.2",
+    "description": "TinyMCE-based WYSIWYG field for Enso UI.",
+    "main": "index.js",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/enso-ui/wysiwyg.git"
+    },
+    "keywords": [
+        "wysiwyg",
+        "vue"
+    ],
+    "author": "Adrian Ocneanu <aocneanu@gmail.com>",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/enso-ui/wysiwyg/issues"
+    },
+    "homepage": "https://github.com/enso-ui/wysiwyg#readme",
+    "dependencies": {
+        "@tinymce/tinymce-vue": "^4.0.0",
+        "trix": "^2.1.19"
+    },
+    "peerDependencies": {
+        "vue": "^3.5.0"
+    },
+    "devDependencies": {
+        "vue": "^3.5.0"
+    }
 }

package/src/bulma/TrixEditor.vue

@@ -0,0 +1,53 @@
+<script>
+
+import 'trix/dist/trix.css';
+import 'trix';
+import {
+    computed, h, nextTick, ref, watch,
+} from 'vue';
+
+export default {
+    name: 'EnsoTrixEditor',
+
+    inheritAttrs: false,
+
+    props: {
+        modelValue: {
+            type: [String, null],
+            default: '',
+        },
+    },
+
+    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>

package/src/bulma/Wysiwyg.vue

@@ -1,21 +1,18 @@
 <template>
     <div :class="['wysiwyg-wrapper', {'has-error': hasError}, $attrs.class]">
-        <editor v-bind="$attrs"
-            :key="editorKey"
-            :toolbar="toolbar"
-            :plugins="plugins"
-            :init="editorInit"/>
+        <component :is="editorComponent"
+            :key="componentKey"
+            v-bind="editorBindings"/>
     </div>
 </template>
 
 <script>
+import { defineAsyncComponent } from 'vue';
 import Editor from '@tinymce/tinymce-vue';
 
 export default {
     name: 'Wysiwyg',
 
-    components: { Editor },
-
     inheritAttrs: false,
 
     data: () => ({
@@ -30,6 +27,11 @@ export default {
             type: Boolean,
             required: true,
         },
+        editor: {
+            type: String,
+            default: 'tinymce',
+            validator: value => ['tinymce', 'trix'].includes(value),
+        },
         menubar: {
             type: [String, Boolean],
             default: false,
@@ -45,6 +47,29 @@ export default {
     },
 
     computed: {
+        editorComponent() {
+            return this.editor === 'trix'
+                ? defineAsyncComponent(() => import('./TrixEditor.vue'))
+                : Editor;
+        },
+        componentKey() {
+            return this.editor === 'tinymce'
+                ? this.editorKey
+                : this.editor;
+        },
+        editorBindings() {
+            if (this.editor === 'trix') {
+                return Object.fromEntries(Object.entries(this.$attrs)
+                    .filter(([key]) => key !== 'apiKey'));
+            }
+
+            return {
+                ...this.$attrs,
+                toolbar: this.toolbar,
+                plugins: this.plugins,
+                init: this.editorInit,
+            };
+        },
         isDarkTheme() {
             return this.theme === 'dark';
         },
@@ -217,4 +242,50 @@ export default {
 .wysiwyg-wrapper.has-error {
     border: 1px solid var(--bulma-danger);
 }
+
+.wysiwyg-wrapper {
+    trix-toolbar {
+        .trix-button-row {
+            flex-wrap: wrap;
+        }
+
+        .trix-button-group {
+            background-color: var(--bulma-scheme-main-ter);
+            border-color: var(--bulma-border);
+        }
+
+        .trix-button {
+            border-color: var(--bulma-border);
+        }
+
+        .trix-button:not(:disabled) {
+            color: var(--bulma-text);
+        }
+
+        .trix-button.trix-active {
+            background-color: var(--bulma-scheme-main-bis);
+            color: var(--bulma-text-strong);
+        }
+    }
+
+    trix-editor {
+        background-color: var(--bulma-scheme-main);
+        border-color: var(--bulma-border);
+        border-radius: var(--bulma-radius);
+        color: var(--bulma-text);
+        min-height: 10rem;
+
+        &:focus {
+            border-color: var(--bulma-input-focus-border-color);
+            box-shadow: var(--bulma-input-focus-box-shadow-size)
+                var(--bulma-input-focus-box-shadow-color);
+        }
+    }
+
+    &.has-error {
+        trix-editor {
+            border-color: var(--bulma-danger);
+        }
+    }
+}
 </style>