@enso-ui/wysiwyg 3.1.0 → 3.2.0

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,56 @@
 # WYSIWYG
-
-WYSIWYG editor component.
-
-### Features
-
-- TinyMCE-based editing
-- theme-aware styling
-
-### Configuration & Usage
-
-Use the component where rich text editing is needed inside the Enso ecosystem.
-
-### Contributions
-
+[![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:
+
+```bash
+yarn add @enso-ui/wysiwyg
+```
+## Features
+- exports `Wysiwyg` as its public surface
+- supports `tinymce` and `trix` editor engines
+- 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>
+
+<Wysiwyg v-model="content"
+    :has-error="false"/>
+
+<Wysiwyg v-model="content"
+    editor="trix"
+    :has-error="false"/>
+```
+## API
+### `Wysiwyg`
+
+Public export available from `src/bulma/Wysiwyg.vue`.
+
+Props:
+- `hasError`
+- `editor`
+- `menubar`
+- `plugins`
+- `toolbar`
+
+`editor` defaults to `tinymce`. Set it to `trix` to use the Trix editor.
+## 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.
-
-### License
-
-This package is released under the MIT license.
+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,24 +1,30 @@
 {
-  "name": "@enso-ui/wysiwyg",
-  "version": "3.1.0",
-  "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",
-    "vue": "^3.0"
-  }
+    "name": "@enso-ui/wysiwyg",
+    "version": "3.2.0",
+    "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,42 @@
+<template>
+    <input :id="inputId"
+        type="hidden"
+        :value="normalizedValue">
+    <trix-editor :input="inputId"
+        ref="trix"
+        @trix-change="update"/>
+</template>
+
+<script setup>
+
+import 'trix/dist/trix.css';
+import 'trix';
+import { computed, nextTick, ref, watch } from 'vue';
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = defineProps({
+    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);
+    }
+}));
+
+</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>