feat(v-editor): v-editor now support quill

gitsindonesia · Sep 27, 2021 · cdac415 · cdac415
1 parent 22405b7
commit cdac415
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 20 deletions.
diff --git a/src/components/VEditor/VEditor.stories.ts b/src/components/VEditor/VEditor.stories.ts
@@ -6,27 +6,37 @@ export default {
   argTypes: {},
   args: {
     modelValue: '',
+    value: '',
+    name: 'editor',
+    theme: 'ckeditor',
+    error: false,
+    errorMessages: [],
   },
 };
 
-// const Template = (args) => ({
-//   // Components used in your story `template` are defined in the `components` object
-//   components: {MyEditor},
-//   // The story's `args` need to be mapped into the template through the `setup()` method
-//   setup() {
-//     return {args};
-//   },
-//   // And then the `args` are bound to your component with `v-bind="args"`
-//   template: `<my-input v-bind='args'/>`,
-// });
-//
-// export const Default = Template.bind({});
-// Default.args = {};
-
-export const Editor = (args) => ({
+const Template = (args) => ({
+  // Components used in your story `template` are defined in the `components` object
   components: {MyEditor},
+  // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
     return {args};
   },
-  template: '<MyEditor v-bind="args" />',
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: `<my-editor v-bind='args'/>`,
 });
+
+export const CKEditor = Template.bind({});
+CKEditor.args = {
+  theme: 'ckeditor',
+};
+CKEditor.storyName = 'CKEditor';
+
+export const Quill = Template.bind({});
+Quill.args = {
+  theme: 'quill',
+};
+
+export const BasicTextarea = Template.bind({});
+BasicTextarea.args = {
+  theme: 'textarea',
+};
diff --git a/src/components/VEditor/VEditor.vue b/src/components/VEditor/VEditor.vue
@@ -4,6 +4,11 @@ import {ErrorMessage} from 'vee-validate';
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 import {component as ckeditor} from '@ckeditor/ckeditor5-vue';
 
+import {QuillEditor} from '@vueup/vue-quill';
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
+
+import VTextarea from '../VTextarea/VTextarea.vue';
+
 const props = defineProps({
   modelValue: {
     type: String,
@@ -25,6 +30,11 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  theme: {
+    type: String,
+    default: 'quill',
+    validator: (v: string) => ['quill', 'ckeditor', 'textarea'].includes(v),
+  },
 });
 
 const emit = defineEmits([
@@ -35,10 +45,10 @@ const emit = defineEmits([
   'blur',
 ]);
 
-const {value, modelValue, name, error, errorMessages} = toRefs(props);
+const {value, modelValue, name, errorMessages} = toRefs(props);
 
 const content = ref(value.value || modelValue.value);
-const editor = ref(ClassicEditor);
+const classicEditor = ref(ClassicEditor);
 const editorConfig = {
   toolbar: [
     'heading',
@@ -88,8 +98,19 @@ watch(content, (value) => {
 
 <template>
   <div>
-    <ckeditor v-model="content" :editor="editor" :config="editorConfig" />
-
+    <template v-if="theme === 'ckeditor'">
+      <ckeditor
+        v-model="content"
+        :editor="classicEditor"
+        :config="editorConfig"
+      />
+    </template>
+    <template v-else-if="theme === 'quill'">
+      <QuillEditor v-model:content="content" theme="snow" />
+    </template>
+    <template v-else>
+      <v-textarea v-model="content" />
+    </template>
     <ErrorMessage
       v-if="errorMessages.length"
       class="text-error text-sm"