#326 Editor base setup

.storybook/preview-head.html

@@ -0,0 +1 @@
+<script src="/node_modules/tinymce/tinymce.min.js"></script>

package.json

@@ -75,9 +75,11 @@
     "pinia": "^2.1.7",
     "proj4": "^2.9.0",
     "pyoes": "https://gitpkg.now.sh/OnroerendErfgoed/pyoes/npm-packages/pyoes?0.21.1",
+    "quill-html-edit-button": "^3.0.0",
     "uuid": "^9.0.0",
-    "vue": "^3.3.4",
-    "vue-i18n": "9"
+    "vue": "^3.5.10",
+    "vue-i18n": "9",
+    "vue-quilly": "^1.0.5"
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^0.10.0",

src/components/dumb/OeEditor.vue

@@ -0,0 +1,132 @@
+<template>
+  <div id="toolbar">
+    <button class="ql-undo" title="Undo">
+      <font-awesome-icon :icon="['fas', 'rotate-left']" />
+    </button>
+    <button class="ql-redo" title="Redo">
+      <font-awesome-icon :icon="['fas', 'rotate-right']" />
+    </button>
+    <!-- Add headings dropdown -->
+    <span class="ql-formats">
+      <select class="ql-header">
+        <option value="">Normal</option>
+        <option value="1">Heading 1</option>
+        <option value="2">Heading 2</option>
+        <option value="3">Heading 3</option>
+        <option value="4">Heading 4</option>
+        <option value="5">Heading 5</option>
+        <option value="6">Heading 6</option>
+      </select>
+    </span>
+    <!-- Add a bold button -->
+    <button class="ql-bold"></button>
+    <!-- Add subscript and superscript buttons -->
+    <button class="ql-private" title="Prive">
+      <font-awesome-icon :icon="['fas', 'lock']" />
+    </button>
+
+    <button class="ql-list" value="ordered"></button>
+    <button class="ql-list" value="bullet"></button>
+  </div>
+
+  <QuillyEditor ref="editor" v-model="model" style="height: 400px" :options="options" />
+</template>
+
+<script setup lang="ts">
+import 'quill/dist/quill.snow.css';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import Quill from 'quill';
+import { htmlEditButton } from 'quill-html-edit-button';
+import Block from 'quill/blots/block';
+import { onMounted, ref } from 'vue';
+import { QuillyEditor } from 'vue-quilly';
+
+class PrivateBlock extends Block {
+  static tagName = 'DIV';
+  static className = 'prive';
+  static blotName = 'private';
+}
+
+Quill.register(PrivateBlock, true);
+
+const editor = ref<InstanceType<typeof QuillyEditor>>();
+let quill: Quill | null = null;
+
+Quill.register('modules/htmlEditButton', htmlEditButton);
+
+const model = ref('<p>Hello Quilly!</p>');
+const options = {
+  theme: 'snow',
+  modules: {
+    toolbar: {
+      container: '#toolbar',
+      handlers: {
+        private: (checked: boolean) => {
+          quill?.format('private', checked);
+        },
+        undo: () => {
+          return quill?.history.undo();
+        },
+        redo: () => {
+          return quill?.history.redo();
+        },
+      },
+    },
+
+    // toolbar: {
+    //   container: [
+    //     [{ header: '1' }, { header: '2' }, { font: [] }],
+    //     [{ size: [] }],
+    //     ['bold', 'italic', 'underline', 'strike', 'blockquote'],
+    //     [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
+    //     ['link', 'image', 'video'],
+    //     ['undo', 'redo'],
+    //     ['clean'],
+    //     ['lock'],
+    //   ],
+    //   handlers: {
+    //     undo: () => {
+    //       return quill!.history.undo();
+    //     },
+    //     redo: () => {
+    //       return quill!.history.redo();
+    //     },
+    //   },
+    // },
+    history: {
+      delay: 2000,
+      maxStack: 500,
+      userOnly: true,
+    },
+    htmlEditButton: {},
+  },
+  placeholder: 'Compose an epic...',
+  readOnly: false,
+};
+
+onMounted(() => {
+  quill = editor.value?.initialize(Quill) as Quill;
+});
+</script>
+
+<style lang="scss" scoped>
+.ql-container {
+  font-size: 16px;
+
+  :deep(strong) {
+    font-weight: bolder;
+  }
+
+  :deep(em) {
+    font-style: italic;
+  }
+
+  :deep(.prive) {
+    color: grey;
+  }
+
+  :deep(p) {
+    margin: 1rem 0;
+  }
+}
+</style>

src/stories/dumb-components/editor.stories.ts

@@ -0,0 +1,31 @@
+import '@/scss/main.scss';
+import OeEditor from '@components/dumb/OeEditor.vue';
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+// More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
+const meta: Meta<typeof OeEditor> = {
+  title: 'Dumb components/Editor',
+  component: OeEditor,
+  render: (args) => ({
+    components: {
+      OeEditor,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <oe-editor/>
+    `,
+  }),
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof OeEditor>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const Default: Story = {};