Editor View implementation > tibtab editor 익스텐션 버그 패치

components/editor/EditorView.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="editor editor-squished">
+    <editor-content
+      class="editor__content"
+      :editor="editor"
+    />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from 'tiptap'
+import {
+  Heading,
+  Bold,
+  Code,
+  Italic,
+  Strike,
+  Underline,
+  Blockquote,
+  HorizontalRule,
+  OrderedList,
+  BulletList,
+  ListItem,
+  CodeBlockHighlight
+} from 'tiptap-extensions'
+import Title from '~/components/editor/components/Title'
+import Subtitle from '~/components/editor/components/Subtitle'
+import Doc from '~/components/editor/components/Doc'
+import javascript from 'highlight.js/lib/languages/javascript'
+import css from 'highlight.js/lib/languages/css'
+export default {
+  components: {
+    EditorContent
+  },
+  props: {
+    initialContent: {
+      required: true,
+      type: String
+    }
+  },
+  data() {
+    return {
+      editor: null
+    }
+  },
+  // This is called only on client (in browser)
+  mounted() {
+    this.editor = new Editor({
+      editable: false,
+      extensions: [
+        new Doc(),
+        new Title(),
+        new Subtitle(),
+        new Heading({ levels: [1, 2, 3]}),
+        new Bold(),
+        new Code(),
+        new Italic(),
+        new Strike(),
+        new Underline(),
+        new Blockquote(),
+        new HorizontalRule(),
+        new OrderedList(),
+        new BulletList(),
+        new ListItem(),
+        new CodeBlockHighlight({
+          languages: {
+            javascript,
+            css,
+          }
+        })
+      ]
+    })
+    this.initialContent && this.editor.setContent(this.initialContent)
+  },
+  beforeDestroy() {
+    // Always destroy your editor instance when it's no longer needed
+    this.editor && this.editor.destroy()
+  }
+}
+</script>

package-lock.json

@@ -10272,21 +10272,153 @@
       }
     },
     "tiptap-extensions": {
-      "version": "1.24.3",
-      "resolved": "https://registry.npmjs.org/tiptap-extensions/-/tiptap-extensions-1.24.3.tgz",
-      "integrity": "sha512-pOPdIeE6sG6rTBSoZnPsX0Muc86BH6qQy73Uc7jRnSHQg91BKRDu3lo0tlINlLmvl3Ktinb4NmfLw5pZ4qIQ2g==",
+      "version": "1.28.4",
+      "resolved": "https://registry.npmjs.org/tiptap-extensions/-/tiptap-extensions-1.28.4.tgz",
+      "integrity": "sha512-UAtxngKifjrMtJFmi3D9RCNC5LJutq4yn1Np0cqJ4dTnvhWR49PqN6gKjlMYyzyutiLLQk+/3GM/E6EfVwmHOA==",
       "requires": {
         "lowlight": "^1.12.1",
         "prosemirror-collab": "^1.1.2",
         "prosemirror-history": "^1.0.4",
-        "prosemirror-model": "^1.7.1",
-        "prosemirror-state": "^1.2.3",
-        "prosemirror-tables": "^0.8.1",
-        "prosemirror-transform": "^1.1.3",
-        "prosemirror-utils": "^0.9.4",
-        "prosemirror-view": "^1.9.12",
-        "tiptap": "^1.23.3",
-        "tiptap-commands": "^1.10.10"
+        "prosemirror-model": "^1.7.4",
+        "prosemirror-state": "^1.2.4",
+        "prosemirror-tables": "^0.9.5",
+        "prosemirror-transform": "^1.1.5",
+        "prosemirror-utils": "^0.9.6",
+        "prosemirror-view": "^1.11.7",
+        "tiptap": "^1.26.4",
+        "tiptap-commands": "^1.12.3"
+      },
+      "dependencies": {
+        "prosemirror-dropcursor": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.2.0.tgz",
+          "integrity": "sha512-D7JrvOgN32PmOgfimdDMKCuYp4tGyCulpsd39/Nzvn9A+tCJmM8XY1PB07zkr2vjrjF09WYD3Ifer7Z3pk/YRw==",
+          "requires": {
+            "prosemirror-state": "^1.0.0",
+            "prosemirror-transform": "^1.1.0",
+            "prosemirror-view": "^1.1.0"
+          }
+        },
+        "prosemirror-model": {
+          "version": "1.7.4",
+          "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.7.4.tgz",
+          "integrity": "sha512-yxdpPh9Uv5vAOZvmbhg4fsGUK1oHuQs69iX7cFZ0A4Y+AyMMWRCNKUt21uv84HbXb4I180l4pJE8ibaH/SwYiw==",
+          "requires": {
+            "orderedmap": "^1.0.0"
+          }
+        },
+        "prosemirror-schema-list": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.0.4.tgz",
+          "integrity": "sha512-7Y0b6FIG6ATnCcDSLrZfU9yIfOG5Yad3DMNZ9W7GGfMSzdIl0aHExrsIUgviJZjovO2jtLJVbxWGjMR3OrTupA==",
+          "requires": {
+            "prosemirror-model": "^1.0.0",
+            "prosemirror-transform": "^1.0.0"
+          }
+        },
+        "prosemirror-state": {
+          "version": "1.2.4",
+          "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.2.4.tgz",
+          "integrity": "sha512-ViXpXond3BbSL12ENARQGq3Y8igwFMbTcy96xUNK8kfIcfQRlYlgYrBPXIkHC5+QZtbPrYlpuJ2+QyeSlSX9Cw==",
+          "requires": {
+            "prosemirror-model": "^1.0.0",
+            "prosemirror-transform": "^1.0.0"
+          }
+        },
+        "prosemirror-tables": {
+          "version": "0.9.5",
+          "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-0.9.5.tgz",
+          "integrity": "sha512-RlAF/D7OvnDCOL8B6Qt6KuBkb0w3SedTdrou7wH7Nn2ml7+M5xUalW/h1f7dMD3wjsU47/Cn8zTbEkCDIpIggw==",
+          "requires": {
+            "prosemirror-keymap": "^1.0.0",
+            "prosemirror-model": "^1.0.0",
+            "prosemirror-state": "^1.0.0",
+            "prosemirror-transform": "^1.0.0",
+            "prosemirror-view": "^1.0.0"
+          }
+        },
+        "prosemirror-transform": {
+          "version": "1.1.5",
+          "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.1.5.tgz",
+          "integrity": "sha512-hJyRcwykLrAAj/ziNbVK1P/ensiszWJ2fNwNiDM8ZWYiMPwM4cAd2jptj/znxJfIvaj0S0psWL1+VhKwPNJDSQ==",
+          "requires": {
+            "prosemirror-model": "^1.0.0"
+          }
+        },
+        "prosemirror-utils": {
+          "version": "0.9.6",
+          "resolved": "https://registry.npmjs.org/prosemirror-utils/-/prosemirror-utils-0.9.6.tgz",
+          "integrity": "sha512-UC+j9hQQ1POYfMc5p7UFxBTptRiGPR7Kkmbl3jVvU8VgQbkI89tR/GK+3QYC8n+VvBZrtAoCrJItNhWSxX3slA=="
+        },
+        "prosemirror-view": {
+          "version": "1.12.0",
+          "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.12.0.tgz",
+          "integrity": "sha512-PcG2yGW75530a2DMrRPaFLvy83DUUSj0vImAILWUQQ77Rxhl6NnCVSrU8Pk6HooADOAyqDxxToPRoIz97aeZIA==",
+          "requires": {
+            "prosemirror-model": "^1.1.0",
+            "prosemirror-state": "^1.0.0",
+            "prosemirror-transform": "^1.1.0"
+          }
+        },
+        "tiptap": {
+          "version": "1.26.4",
+          "resolved": "https://registry.npmjs.org/tiptap/-/tiptap-1.26.4.tgz",
+          "integrity": "sha512-UCH0wufjGdKMuCUydL896sFYXEUWC3bE20h/oONABSf0gull+pqBEm7J1yCl7j50eYa9FiLgUBGPqPTzKLluxQ==",
+          "requires": {
+            "prosemirror-commands": "^1.0.8",
+            "prosemirror-dropcursor": "^1.2.0",
+            "prosemirror-gapcursor": "^1.0.4",
+            "prosemirror-inputrules": "^1.0.4",
+            "prosemirror-keymap": "^1.0.2",
+            "prosemirror-model": "^1.7.4",
+            "prosemirror-state": "^1.2.4",
+            "prosemirror-view": "^1.11.7",
+            "tiptap-commands": "^1.12.3",
+            "tiptap-utils": "^1.8.2"
+          },
+          "dependencies": {
+            "prosemirror-keymap": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.0.2.tgz",
+              "integrity": "sha512-aq3fBT3WMbwGNacUtMbS/mxd87hjJyjtUx5/h3q/P3FiVqHxmeA9snxQsZHYe0cWRziZePun8zw6kHFKLp/DAQ==",
+              "requires": {
+                "prosemirror-state": "^1.0.0",
+                "w3c-keyname": "^2.0.0"
+              }
+            }
+          }
+        },
+        "tiptap-commands": {
+          "version": "1.12.3",
+          "resolved": "https://registry.npmjs.org/tiptap-commands/-/tiptap-commands-1.12.3.tgz",
+          "integrity": "sha512-Dck51lePBwuHmkvkJ6+8V3DbInxAhZwtS2mPvVwz74pDUIcy17tCFw1eHUN50JoXIAci7acuxPKO/weVO1JAyw==",
+          "requires": {
+            "prosemirror-commands": "^1.0.8",
+            "prosemirror-inputrules": "^1.0.4",
+            "prosemirror-model": "^1.7.4",
+            "prosemirror-schema-list": "^1.0.4",
+            "prosemirror-state": "^1.2.4",
+            "prosemirror-tables": "^0.9.5",
+            "prosemirror-utils": "^0.9.6",
+            "tiptap-utils": "^1.8.2"
+          }
+        },
+        "tiptap-utils": {
+          "version": "1.8.2",
+          "resolved": "https://registry.npmjs.org/tiptap-utils/-/tiptap-utils-1.8.2.tgz",
+          "integrity": "sha512-pyx+3p4fICGM7JU1mcsnRx5jXvLrCL8Nm/9yjeWEZXpAC85L/btY0eFo2Oz4+dKg39+1EGNHheodujx3ngw4lQ==",
+          "requires": {
+            "prosemirror-model": "^1.7.4",
+            "prosemirror-state": "^1.2.4",
+            "prosemirror-tables": "^0.9.5",
+            "prosemirror-utils": "^0.9.6"
+          }
+        },
+        "w3c-keyname": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.1.1.tgz",
+          "integrity": "sha512-8kSrsGClLiL4kb5/pTxglejUlEAPk3GXtkBblSMrQDxKz0NkMRTVTPBZm6QCNqPOCPsdNvae5XfV+RJZgeGXEA=="
+        }
       }
     },
     "tiptap-utils": {

package.json

@@ -31,7 +31,7 @@
     "portal-vue": "^2.1.5",
     "slugify": "^1.3.4",
     "tiptap": "^1.23.0",
-    "tiptap-extensions": "^1.24.0",
+    "tiptap-extensions": "^1.26.1",
     "vue-toasted": "^1.1.27",
     "vuejs-paginate": "^2.1.0",
     "vuelidate": "^0.7.4"

pages/blogs/_slug.vue

@@ -8,17 +8,19 @@
           :date="blog.createdAt | formatDate"
          />
       </div>
-      <div class="blog-content" v-html="blog.content">
-      </div>
+      <!-- <div class="blog-content" v-html="blog.content"></div> -->
+      <editor-view :initialContent="blog.content" />
     </div>
   </div>
 </template>
 
 <script>
 import UserTile from '~/components/shared/UserTile'
+import EditorView from "~/components/editor/EditorView";
 export default {
   components: {
-    UserTile
+    UserTile,
+    EditorView
   },
   computed: {
     blog() {