add starter kit

content/posts/extensions.md

@@ -0,0 +1,8 @@
+---
+title: Handle Extensions
+slug: handle-extensions
+---
+
+Use a custom list of extensions.
+
+<demo name="HandleExtensions" />

packages/tiptap-starter-kit/index.ts

@@ -0,0 +1,13 @@
+import Document from '@tiptap/document-extension'
+import History from '@tiptap/history-extension'
+import Paragraph from '@tiptap/paragraph-extension'
+import Text from '@tiptap/text-extension'
+
+export default function extensions() {
+  return [
+    new Document(),
+    new History(),
+    new Paragraph(),
+    new Text(),
+  ]
+}

packages/tiptap-starter-kit/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@tiptap/starter-kit",
+  "version": "1.0.0",
+  "source": "index.ts",
+  "main": "dist/tiptap-starter-kit.js",
+  "umd:main": "dist/tiptap-starter-kit.umd.js",
+  "module": "dist/tiptap-starter-kit.mjs", 
+  "unpkg": "dist/tiptap-starter-kit.js",
+  "jsdelivr": "dist/tiptap-starter-kit.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "@tiptap/document-extension": "1.x",
+    "@tiptap/history-extension": "1.x",
+    "@tiptap/paragraph-extension": "1.x",
+    "@tiptap/text-extension": "1.x"
+  }
+}

src/demos/Basic/index.vue

@@ -1,23 +1,10 @@
 <template>
-  <div>
-    <div v-if="editor">
-      <button @click="editor.undo().focus()">
-        undo
-      </button>
-      <button @click="editor.redo().focus()">
-        redo
-      </button>
-    </div>
-    <div ref="editor"></div>
-  </div>
+  <div ref="editor"></div>
 </template>
 
 <script>
 import Editor from '@tiptap/core'
-import Document from '@tiptap/document-extension'
-import Paragraph from '@tiptap/paragraph-extension'
-import Text from '@tiptap/text-extension'
-import History from '@tiptap/history-extension'
+import extensions from '@tiptap/starter-kit'
 
 export default {
   data() {
@@ -30,12 +17,7 @@ export default {
     this.editor = new Editor({
       element: this.$refs.editor,
       content: '<p>foo</p>',
-      extensions: [
-        new Document(),
-        new Paragraph(),
-        new Text(),
-        new History(),
-      ],
+      extensions: extensions(),
     })
   },
 

src/demos/HandleExtensions/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <div v-if="editor">
+      <button @click="editor.undo().focus()">
+        undo
+      </button>
+      <button @click="editor.redo().focus()">
+        redo
+      </button>
+    </div>
+    <div ref="editor"></div>
+  </div>
+</template>
+
+<script>
+import Editor from '@tiptap/core'
+import Document from '@tiptap/document-extension'
+import Paragraph from '@tiptap/paragraph-extension'
+import Text from '@tiptap/text-extension'
+import History from '@tiptap/history-extension'
+
+export default {
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      element: this.$refs.editor,
+      content: '<p>foo</p>',
+      extensions: [
+        new Document(),
+        new Paragraph(),
+        new Text(),
+        new History(),
+      ],
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>