first draft of new RTE powered by Quill.js

zero.Web.UI/App/pages/spaces/spaces.vue

@@ -15,7 +15,7 @@
       <div class="spaces-tree-resizable ui-resizable"></div>
     </div>
 
-    <component v-if="!isOverview && loaded && component" ref="comp" :is="component" :space="space" :config="spaceConfig"></component>
+    <component class="spaces-main" v-if="!isOverview && loaded && component" ref="comp" :is="component" :space="space" :config="spaceConfig"></component>
   </div>
 </template>
 
@@ -146,6 +146,12 @@
     height: 100vh;
   }
 
+  .spaces-main
+  {
+    min-height: 100vh;
+    overflow-y: auto;
+  }
+
   .spaces-overview
   {
     padding: 95px 0 0 60px;

zero.Web.UI/app/components/all.js

@@ -14,6 +14,7 @@ import uiForm from './forms/form.vue';
 import uiInputList from './forms/input-list.vue';
 import uiProperty from './forms/property.vue';
 import uiRte from './forms/rte.vue';
+import uiQuill from './forms/quill.vue';
 import uiSearch from './forms/search.vue';
 import uiTags from './forms/tags.vue';
 import uiToggle from './forms/toggle.vue';
@@ -77,6 +78,7 @@ export default {
   uiInputList,
   uiProperty,
   uiRte,
+  uiQuill,
   uiSearch,
   uiTags,
   uiToggle,

zero.Web.UI/app/components/forms/quill.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="ui-quill" :disabled="disabled">
+    <div ref="editor" :id="id" v-show="!raw"></div>
+  </div>
+</template>
+
+
+<script>
+  import Strings from 'zero/helpers/strings.js';
+  import Pell from './rte.pell.dependency.js';
+  import Quill from 'quill';
+  import 'quill/dist/quill.bubble.css';
+
+  export default {
+    name: 'uiQuill',
+
+    props: {
+      value: {
+        type: String,
+        default: ''
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+    },
+
+    data: () => ({
+      raw: false,
+      editor: null,
+      id: 'quill-' + Strings.guid(),
+      blocked: false
+    }),
+
+    watch: {
+      value()
+      {
+        this.setValue();
+      }
+    },
+
+    created()
+    {
+      
+    },
+
+    mounted()
+    {
+      this.initialize();
+    },
+
+    methods: {
+
+      initialize()
+      {
+        this.quill = new Quill(this.$refs.editor, {
+          theme: 'bubble',
+          placeholder: 'Write something...',
+          modules: {
+            toolbar: [
+              ['bold', 'italic', 'underline', 'strike', 'code', 'link'],
+              ['clean']
+            ]
+          },
+          formats: ['bold','italic','underline','strike','code','link']
+        });
+
+        this.$refs.editor.querySelector('.ql-tooltip').classList.add('theme-dark');
+      },
+
+
+      setValue()
+      {
+        
+      },
+
+
+      onLinkCreate()
+      {
+
+      },
+
+
+      acceptHtml()
+      {
+        
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-quill
+  {
+    font-size: var(--font-size);
+  }
+
+  .ui-quill .ql-editor
+  {
+    line-height: 1.5;
+    padding: 10px 12px 8px;
+  }
+
+  .ui-quill .ql-editor.ql-blank::before
+  {
+    left: 12px;
+    color: var(--color-input-placeholder);
+    font-style: normal;
+  }
+
+  .ui-quill .ql-container
+  {
+    background: var(--color-input);
+    max-width: 800px;
+    min-height: 42px;
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    font-size: var(--font-size);
+    display: inline-block;
+    line-height: 1.5;
+    color: var(--color-text);
+    border-radius: var(--radius);
+    border: 1px solid transparent;
+    font-family: var(--font);
+  }
+
+  .ui-quill .ql-container:focus, .ui-quill .ql-container:focus-within
+  {
+    background-color: var(--color-input-focus-bg);
+    border: var(--color-input-focus-border);
+    box-shadow: var(--color-input-focus-shadow);
+    outline: none;
+  }
+
+  .ui-quill .ql-tooltip
+  {
+    color: var(--color-text);
+    background-color: var(--color-dropdown);
+    border-radius: var(--radius);
+  }
+
+  .ui-quill .ql-toolbar
+  {
+    padding: 3px 6px;
+  }
+
+  .ui-quill .ql-tooltip-arrow
+  {
+    border-bottom-color: var(--color-dropdown) !important;
+  }
+
+  .ui-quill .ql-toolbar button
+  {
+    height: 36px;
+    width: 36px;
+    padding: 8px 10px;  
+  }
+
+  .ui-quill .ql-toolbar button svg
+  {
+    height: 85%;
+  }
+
+  .ui-quill .ql-toolbar .ql-formats
+  {
+    margin: 0 !important;
+  }
+
+  .ui-quill .ql-bubble .ql-fill
+  {
+    fill: var(--color-text);
+  }
+  .ui-quill .ql-bubble .ql-stroke
+  {
+    stroke: var(--color-text);
+  }
+</style>

zero.Web.UI/app/core/editor-field.ts

@@ -3,6 +3,7 @@ import Text from '../editor/fields/text.vue';
 import Currency from '../editor/fields/currency.vue';
 import Number from '../editor/fields/number.vue';
 import Rte from '../editor/fields/rte.vue';
+import QuillRte from '../editor/fields/quill.vue';
 import Select from '../editor/fields/select.vue';
 import Textarea from '../editor/fields/textarea.vue';
 import Toggle from '../editor/fields/toggle.vue';
@@ -200,6 +201,16 @@ class EditorField
   }
 
 
+  /**
+   * Render a rich-text editor (powered by Quill) field
+   * @returns {EditorField}
+   */
+  quill()
+  {
+    return this._setComponent(QuillRte);
+  }
+
+
   /**
    * @typedef {object} EditorSelectItem
    * @param {object} key - Key/Id of the item

zero.Web.UI/app/editor/fields/quill.vue

@@ -0,0 +1,20 @@
+<template>
+  <ui-quill :value="value" @input="$emit('input', $event)" :disabled="disabled" />
+</template>
+
+
+<script>
+  export default {
+    props: {
+      value: {
+        type: String,
+        default: null
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      config: Object
+    }
+  }
+</script>

zero.Web.UI/package.json

@@ -11,6 +11,7 @@
     "dayjs": "^1.8.26",
     "flatpickr": "^4.6.3",
     "qs": "^6.9.4",
+    "quill": "^1.3.7",
     "sortablejs": "^1.10.2",
     "underscore": "^1.10.2",
     "vue": "^2.6.12",