chore: 🎨 add and update demo editor

Author: luthfimasruri

demo/package-lock.json

@@ -7,6 +7,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "quill-blot-formatter": "^1.0.5",
     "vue": "^3.0.5"
   },
   "devDependencies": {

demo/package.json

@@ -1,15 +1,21 @@
 <template>
   <BasicExample />
+  <AddModules />
+  <ContentType />
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
-import BasicExample from './components/BasicExample.vue'
+import BasicExample from './examples/BasicExample.vue'
+import AddModules from './examples/AddModules.vue'
+import ContentType from './examples/ContentType.vue'
 
 export default defineComponent({
   name: 'App',
   components: {
     BasicExample,
+    AddModules,
+    ContentType,
   },
 })
 </script>

demo/src/App.vue

@@ -0,0 +1,36 @@
+<template>
+  <h1>Add Modules</h1>
+  <QuillEditor v-model:content="content" :modules="modules" toolbar="full" />
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from 'vue'
+import { QuillEditor, Delta, Module } from '@vueup/vue-quill'
+import BlotFormatter from 'quill-blot-formatter'
+import '@vueup/vue-quill/../dist/vue-quill.snow.css'
+
+export default defineComponent({
+  components: {
+    QuillEditor,
+  },
+  setup: () => {
+    const modules: Module = [
+      'blotFormatter',
+      BlotFormatter,
+      {
+        /* options */
+      },
+    ]
+    const content = ref<Delta>(
+      new Delta([
+        { insert: 'Gandalf', attributes: { bold: true } },
+        { insert: ' the ' },
+        { insert: 'Grey', attributes: { color: '#ccc' } },
+      ])
+    )
+
+    return { content, modules }
+  },
+})
+</script>
+

demo/src/examples/AddModules.vue

@@ -0,0 +1,28 @@
+<template>
+  <h1>Basic Example</h1>
+  <QuillEditor v-model:content="content" />
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from 'vue'
+import { QuillEditor, Delta } from '@vueup/vue-quill'
+import '@vueup/vue-quill/../dist/vue-quill.snow.css'
+
+export default defineComponent({
+  components: {
+    QuillEditor,
+  },
+  setup: () => {
+    const content = ref<Delta>(
+      new Delta([
+        { insert: 'Gandalf', attributes: { bold: true } },
+        { insert: ' the ' },
+        { insert: 'Grey', attributes: { color: '#ccc' } },
+      ])
+    )
+
+    return { content }
+  },
+})
+</script>
+

demo/src/examples/BasicExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1>BasicEditor</h1>
+  <h1>Content Type</h1>
   <QuillEditor v-model:content="contentDelta" contentType="delta" />
   <pre>{{ contentDelta }}</pre>
   <QuillEditor v-model:content="contentHTML" contentType="html" />
@@ -27,9 +27,7 @@ export default defineComponent({
     )
     const contentHTML = ref('<h1>This is html header</h1>')
     const contentText = ref('This is just plain text')
-    setTimeout(() => {
-      contentText.value = 'COOOOOOOK'
-    }, 3000)
+
     return { contentDelta, contentHTML, contentText }
   },
 })

demo/src/components/BasicExample.vue renamed to demo/src/examples/ContentType.vue

@@ -13,7 +13,8 @@
     }
   ],
   "workspaces": [
-    "packages/*"
+    "packages/*",
+    "demo"
   ],
   "repository": {
     "type": "git",