refactor: reverts to original code

davidroyer · Aug 18, 2021 · e738762 · e738762
1 parent 97507d7
commit e738762
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 126 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,97 +1,119 @@
 <template>
   <div id="app">
-    <!-- <button @click="deleteImage">Delete</button> -->
-    <button @click="savePost">Save Post</button>
-    <div>new</div>
-    <VueEditor v-model="content" use-markdown-shortcuts />
-    <!-- <NuxtEditor /> -->
-    <br />
-    <hr />
-    <pre>{{ posts }}</pre>
+    <button @click="deleteImage">Delete</button>
+    <VueEditor
+      ref="vEditor"
+      v-model="content"
+      use-custom-image-handler
+      use-markdown-shortcuts
+      @focus="onEditorFocus"
+      @blur="onEditorBlur"
+      @imageAdded="handleImageAdded"
+      @image-removed="handleImageRemoved"
+    />
   </div>
 </template>
 
 <script>
-/* eslint-disable no-undef */
+// import axiosInstance from "@/helpers/axios";
 import axios from "axios";
-// import { NuxtEditor } from "./index";
-// import Quill from 'quill';
-// import { ImageDrop } from 'quill-image-drop-module';
-// import ImageResize from "quill-image-resize-module";
-// Quill.register('modules/imageDrop', ImageDrop);
-// Quill.register("modules/imageResize", ImageResize);
-
-// eslint-disable-next-line no-console
-// console.log('TCL: Quill', Quill);
-export default {
-  // components: { NuxtEditor },
+import Quill from "quill";
+const AlignStyle = Quill.import("attributors/style/align");
+Quill.register(AlignStyle, true);
+
+const BlockEmbed = Quill.import("blots/block/embed");
 
+const CLIENT_ID = "993793b1d8d3e2e";
+
+/**
+ * Customize image so we can add an `id` attribute
+ */
+class ImageBlot extends BlockEmbed {
+  static create(value) {
+    const node = super.create();
+    node.setAttribute("src", value.url);
+    node.setAttribute("id", value.id);
+    return node;
+  }
+
+  static value(node) {
+    return {
+      url: node.getAttribute("src"),
+      id: node.getAttribute("id")
+    };
+  }
+}
+
+ImageBlot.blotName = "image";
+ImageBlot.tagName = "img";
+Quill.register(ImageBlot);
+
+export default {
   data: () => ({
-    content: "<h1>Starting content 3</h1>",
-    posts: [],
-    numberOfPosts: null
+    content: ""
   }),
 
-  mounted() {
-    this.getPosts();
-  },
-
   methods: {
-    async savePost() {
-      const content = JSON.stringify(this.content);
-      console.log("🚀 ~ file: App.vue ~ line 75 ~ savePost ~ content", content);
-      const newPostNumber = this.numberOfPosts + 1;
-
-      const postData = {
-        title: `Post ${newPostNumber}`,
-        slug: `post-${newPostNumber}`,
-        content: this.content
-      };
-
-      const stringifiedData = JSON.stringify(postData);
-
-      console.log(
-        "🚀 ~ file: App.vue ~ line 83 ~ savePost ~ stringifiedData",
-        stringifiedData
-      );
-      var dbConfig = {
-        method: "post",
-        url: "https://devdb-75cc.restdb.io/rest/posts",
-        headers: {
-          "x-apikey": "610201c449cd3a5cfbd22d63",
-          "Content-Type": "application/json"
-        },
-        data: stringifiedData
-      };
+    handleTextChange(obj) {
+      console.log("TCL: handleTextChange -> obj", obj);
+    },
+
+    onEditorBlur(quill) {
+      console.log("editor blur!", quill);
+    },
 
-      const { data } = await axios(dbConfig);
-      console.log("🚀 ~ file: App.vue ~ line 88 ~ savePost ~ data", data);
+    onEditorFocus(quill) {
+      console.log("editor focus!", quill);
     },
-    async getPosts() {
-      var dbConfig = {
-        method: "get",
-        url: "https://devdb-75cc.restdb.io/rest/posts",
-        headers: {
-          "x-apikey": "610201c449cd3a5cfbd22d63"
-        }
-      };
-
-      const { data } = await axios(dbConfig);
-      console.log("🚀 ~ file: App.vue ~ line 79 ~ getPosts ~ data", data);
-      this.posts = data;
-      // this.content = data[2].content;
-      this.numberOfPosts = data.length;
+
+    deleteImage(id) {
+      const ACCESS_TOKEN = "1d3ee7fe34576a55a24ec551061b2365b6ebaf23";
+
+      axios({
+        url: `https://api.imgur.com/3/image/${id}`,
+        method: "DELETE",
+        headers: { Authorization: "Bearer " + ACCESS_TOKEN }
+      }).then(result => console.log("DELETE RESULT: ", result));
+    },
+
+    async handleImageAdded(file, Editor, cursorLocation) {
+      const formData = new FormData();
+      formData.append("image", file);
+
+      const { data } = await axios({
+        url: "https://api.imgur.com/3/image",
+        method: "POST",
+        headers: { Authorization: "Client-ID " + CLIENT_ID },
+        data: formData
+      });
+      console.log("TCL: handleImageAdded -> data", data);
+
+      const { link, id } = data.data;
+      Editor.insertEmbed(
+        cursorLocation,
+        "image",
+        {
+          id,
+          url: link
+        },
+        Quill.sources.USER
+      );
+    },
+
+    handleImageRemoved(image) {
+      console.log("handleImageRemoved -> image", image);
+      this.deleteImage(image.id);
     }
   }
 };
 </script>
 
-<style>
+<style lang="scss">
 #app {
   font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  /* text-align: center; */
+  // text-align: center;
   color: #2c3e50;
   margin-top: 60px;
 }

diff --git a/src/components/NuxtEditor.vue b/src/components/NuxtEditor.vue
diff --git a/src/components/VueEditor.vue b/src/components/VueEditor.vue
@@ -15,14 +15,11 @@
 </template>
 
 <script>
-// import Quill from 'quill'
+import Quill from "quill";
 import defaultToolbar from "@/helpers/default-toolbar";
 import oldApi from "@/helpers/old-api";
 import mergeDeep from "@/helpers/merge-deep";
-// import MarkdownShortcuts from "@/helpers/markdown-shortcuts";
-
-let Quill = {};
-// let MarkdownShortcuts;
+import MarkdownShortcuts from "@/helpers/markdown-shortcuts";
 
 export default {
   name: "VueEditor",
@@ -77,10 +74,7 @@ export default {
     }
   },
 
-  async mounted() {
-    Quill = (await import("quill")).default;
-    // MarkdownShortcuts = (await import("@/helpers/markdown-shortcuts")).default;
-
+  mounted() {
     this.registerCustomModules(Quill);
     this.registerPrototypes();
     this.initializeEditor();
@@ -117,10 +111,10 @@ export default {
       let modules = {
         toolbar: this.editorToolbar.length ? this.editorToolbar : defaultToolbar
       };
-      // if (this.useMarkdownShortcuts) {
-      //   Quill.register("modules/markdownShortcuts", MarkdownShortcuts, true);
-      //   modules["markdownShortcuts"] = {};
-      // }
+      if (this.useMarkdownShortcuts) {
+        Quill.register("modules/markdownShortcuts", MarkdownShortcuts, true);
+        modules["markdownShortcuts"] = {};
+      }
       return modules;
     },
 

diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,4 @@
+import Quill from "quill";
 import VueEditor from "@/components/VueEditor.vue";
 
 const version = "__VERSION__";
@@ -13,6 +14,7 @@ export function install(Vue) {
 const VPlugin = {
   install,
   version,
+  Quill,
   VueEditor
 };
 
@@ -28,6 +30,6 @@ if (GlobalVue) {
 }
 
 export default VPlugin;
-export { VueEditor };
+export { VueEditor, Quill };
 
 /*************************************************/
diff --git a/src/plugin.js b/src/plugin.js
@@ -5,6 +5,11 @@
 
 import Vue from "vue";
 import plugin from "./index";
+const { Quill, version } = plugin;
+
+console.log("TCL: plugin", plugin);
+console.log("TCL: version", version);
+console.log("TCL: Quill", Quill);
 
 Vue.use(plugin);