move extensions to own package

build/examples/webpack.config.js

@@ -42,6 +42,7 @@ export default {
 			'tiptap-commands': path.resolve(rootPath, '../packages/tiptap-commands/src'),
 			'tiptap-utils': path.resolve(rootPath, '../packages/tiptap-utils/src'),
 			'tiptap-models': path.resolve(rootPath, '../packages/tiptap-models/src'),
+			'tiptap-extensions': path.resolve(rootPath, '../packages/tiptap-extensions/src'),
 		},
 		modules: [
 			srcPath,

examples/Components/Routes/Embeds/Iframe.js

@@ -1,4 +1,4 @@
-import { Node } from 'tiptap-models'
+import { Node } from 'tiptap'
 
 export default class IframeNode extends Node {
 

examples/Components/Routes/Embeds/index.vue

@@ -19,6 +19,21 @@
 <script>
 import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
+import {
+	Blockquote,
+	BulletList,
+	CodeBlock,
+	HardBreak,
+	Heading,
+	ListItem,
+	OrderedList,
+	TodoItem,
+	TodoList,
+	Bold,
+	Code,
+	Italic,
+	Link,
+} from 'tiptap-extensions'
 import Iframe from './Iframe.js'
 
 export default {
@@ -28,7 +43,23 @@ export default {
 	},
 	data() {
 		return {
-			extensions: [new Iframe()],
+			extensions: [
+				new Blockquote(),
+				new BulletList(),
+				new CodeBlock(),
+				new HardBreak(),
+				new Heading(),
+				new ListItem(),
+				new OrderedList(),
+				new TodoItem(),
+				new TodoList(),
+				new Bold(),
+				new Code(),
+				new Italic(),
+				new Link(),
+				// custom extension
+				new Iframe(),
+			],
 		}
 	},
 	methods: {

examples/Components/Routes/HidingMenuBar/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor class="editor" @update="onUpdate">
+		<editor class="editor" :extensions="extensions" @update="onUpdate">
 
 			<div class="menubar is-hidden" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }">
 				<div v-if="nodes && marks">
@@ -104,12 +104,46 @@
 <script>
 import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
+import {
+	Blockquote,
+	BulletList,
+	CodeBlock,
+	HardBreak,
+	Heading,
+	ListItem,
+	OrderedList,
+	TodoItem,
+	TodoList,
+	Bold,
+	Code,
+	Italic,
+	Link,
+} from 'tiptap-extensions'
 
 export default {
 	components: {
 		Editor,
 		Icon,
 	},
+	data() {
+		return {
+			extensions: [
+				new Blockquote(),
+				new BulletList(),
+				new CodeBlock(),
+				new HardBreak(),
+				new Heading(),
+				new ListItem(),
+				new OrderedList(),
+				new TodoItem(),
+				new TodoList(),
+				new Bold(),
+				new Code(),
+				new Italic(),
+				new Link(),
+			],
+		}
+	},
 	methods: {
 		onUpdate(state) {
 			// console.log(state.doc.toJSON())

examples/Components/Routes/Links/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor class="editor" @update="onUpdate">
+		<editor class="editor" :extensions="extensions" @update="onUpdate">
 			<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
 				<template v-if="marks">
 
@@ -39,6 +39,21 @@
 <script>
 import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
+import {
+	Blockquote,
+	BulletList,
+	CodeBlock,
+	HardBreak,
+	Heading,
+	ListItem,
+	OrderedList,
+	TodoItem,
+	TodoList,
+	Bold,
+	Code,
+	Italic,
+	Link,
+} from 'tiptap-extensions'
 
 export default {
 	components: {
@@ -47,6 +62,21 @@ export default {
 	},
 	data() {
 		return {
+			extensions: [
+				new Blockquote(),
+				new BulletList(),
+				new CodeBlock(),
+				new HardBreak(),
+				new Heading(),
+				new ListItem(),
+				new OrderedList(),
+				new TodoItem(),
+				new TodoList(),
+				new Bold(),
+				new Code(),
+				new Italic(),
+				new Link(),
+			],
 			linkUrl: null,
 			linkMenuIsActive: false,
 		}

examples/Components/Routes/MarkdownShortcuts/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor class="editor" @update="onUpdate">
+		<editor class="editor" :extensions="extensions" @update="onUpdate">
 
 			<div class="editor__content" slot="content" slot-scope="props">
 				<h2>
@@ -21,12 +21,46 @@
 <script>
 import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
+import {
+	Blockquote,
+	BulletList,
+	CodeBlock,
+	HardBreak,
+	Heading,
+	ListItem,
+	OrderedList,
+	TodoItem,
+	TodoList,
+	Bold,
+	Code,
+	Italic,
+	Link,
+} from 'tiptap-extensions'
 
 export default {
 	components: {
 		Editor,
 		Icon,
 	},
+	data() {
+		return {
+			extensions: [
+				new Blockquote(),
+				new BulletList(),
+				new CodeBlock(),
+				new HardBreak(),
+				new Heading(),
+				new ListItem(),
+				new OrderedList(),
+				new TodoItem(),
+				new TodoList(),
+				new Bold(),
+				new Code(),
+				new Italic(),
+				new Link(),
+			],
+		}
+	},
 	methods: {
 		onUpdate(state) {
 			// console.log(state.doc.toJSON())

examples/Components/Routes/MenuBar/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor class="editor" @update="onUpdate">
+		<editor class="editor" :extensions="extensions" @update="onUpdate">
 
 			<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
 				<div v-if="nodes && marks">
@@ -118,12 +118,46 @@
 <script>
 import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
+import {
+	Blockquote,
+	BulletList,
+	CodeBlock,
+	HardBreak,
+	Heading,
+	ListItem,
+	OrderedList,
+	TodoItem,
+	TodoList,
+	Bold,
+	Code,
+	Italic,
+	Link,
+} from 'tiptap-extensions'
 
 export default {
 	components: {
 		Editor,
 		Icon,
 	},
+	data() {
+		return {
+			extensions: [
+				new Blockquote(),
+				new BulletList(),
+				new CodeBlock(),
+				new HardBreak(),
+				new Heading(),
+				new ListItem(),
+				new OrderedList(),
+				new TodoItem(),
+				new TodoList(),
+				new Bold(),
+				new Code(),
+				new Italic(),
+				new Link(),
+			],
+		}
+	},
 	methods: {
 		onUpdate(state) {
 			// console.log(state.doc.toJSON())

examples/Components/Routes/MenuBubble/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor class="editor" @update="onUpdate">
+		<editor class="editor" :extensions="extensions" @update="onUpdate">
 
 			<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
 				<template v-if="marks">
@@ -48,6 +48,21 @@
 <script>
 import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
+import {
+	Blockquote,
+	BulletList,
+	CodeBlock,
+	HardBreak,
+	Heading,
+	ListItem,
+	OrderedList,
+	TodoItem,
+	TodoList,
+	Bold,
+	Code,
+	Italic,
+	Link,
+} from 'tiptap-extensions'
 
 export default {
 	components: {
@@ -56,8 +71,21 @@ export default {
 	},
 	data() {
 		return {
-			linkUrl: null,
-			linkMenuIsActive: false,
+			extensions: [
+				new Blockquote(),
+				new BulletList(),
+				new CodeBlock(),
+				new HardBreak(),
+				new Heading(),
+				new ListItem(),
+				new OrderedList(),
+				new TodoItem(),
+				new TodoList(),
+				new Bold(),
+				new Code(),
+				new Italic(),
+				new Link(),
+			],
 		}
 	},
 	methods: {

examples/Components/Routes/ReadOnly/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor :editable="false" class="editor" @update="onUpdate">
+		<editor :editable="false" :extensions="extensions" class="editor" @update="onUpdate">
 
 			<div class="editor__content" slot="content" slot-scope="props">
 				<h2>
@@ -18,12 +18,46 @@
 <script>
 import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
+import {
+	Blockquote,
+	BulletList,
+	CodeBlock,
+	HardBreak,
+	Heading,
+	ListItem,
+	OrderedList,
+	TodoItem,
+	TodoList,
+	Bold,
+	Code,
+	Italic,
+	Link,
+} from 'tiptap-extensions'
 
 export default {
 	components: {
 		Editor,
 		Icon,
 	},
+	data() {
+		return {
+			extensions: [
+				new Blockquote(),
+				new BulletList(),
+				new CodeBlock(),
+				new HardBreak(),
+				new Heading(),
+				new ListItem(),
+				new OrderedList(),
+				new TodoItem(),
+				new TodoList(),
+				new Bold(),
+				new Code(),
+				new Italic(),
+				new Link(),
+			],
+		}
+	},
 	methods: {
 		onUpdate(state) {
 			// console.log(state.doc.toJSON())

examples/Components/Routes/TodoList/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<editor :editable="true" class="editor" @update="onUpdate">
+		<editor :extensions="extensions" class="editor" @update="onUpdate">
 
 			<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
 				<div v-if="nodes && marks">
@@ -67,12 +67,46 @@
 <script>
 import Icon from 'Components/Icon'
 import { Editor } from 'tiptap'
+import {
+	Blockquote,
+	BulletList,
+	CodeBlock,
+	HardBreak,
+	Heading,
+	ListItem,
+	OrderedList,
+	TodoItem,
+	TodoList,
+	Bold,
+	Code,
+	Italic,
+	Link,
+} from 'tiptap-extensions'
 
 export default {
 	components: {
 		Editor,
 		Icon,
 	},
+	data() {
+		return {
+			extensions: [
+				new Blockquote(),
+				new BulletList(),
+				new CodeBlock(),
+				new HardBreak(),
+				new Heading(),
+				new ListItem(),
+				new OrderedList(),
+				new TodoItem(),
+				new TodoList(),
+				new Bold(),
+				new Code(),
+				new Italic(),
+				new Link(),
+			],
+		}
+	},
 	methods: {
 		onUpdate(state) {
 			// console.log(state.doc.toJSON())

packages/tiptap-extensions/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "tiptap-extensions",
+  "version": "0.1.0",
+  "description": "Extensions for tiptap",
+  "homepage": "https://tiptap.scrumpy.io",
+  "license": "MIT",
+  "main": "dist/extensions.common.js",
+  "module": "dist/extensions.esm.js",
+  "unpkg": "dist/extensions.js",
+  "jsdelivr": "dist/extensions.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/heyscrumpy/tiptap.git"
+  },
+  "bugs": {
+    "url": "https://github.com/heyscrumpy/tiptap/issues"
+  },
+  "dependencies": {
+    "tiptap": "^0.2.1",
+    "tiptap-commands": "^0.1.1"
+  }
+}

packages/tiptap-extensions/src/index.js

@@ -0,0 +1,14 @@
+export { default as Blockquote } from './nodes/Blockquote'
+export { default as BulletList } from './nodes/BulletList'
+export { default as CodeBlock } from './nodes/CodeBlock'
+export { default as HardBreak } from './nodes/HardBreak'
+export { default as Heading } from './nodes/Heading'
+export { default as ListItem } from './nodes/ListItem'
+export { default as OrderedList } from './nodes/OrderedList'
+export { default as TodoItem } from './nodes/TodoItem'
+export { default as TodoList } from './nodes/TodoList'
+
+export { default as Bold } from './marks/Bold'
+export { default as Code } from './marks/Code'
+export { default as Italic } from './marks/Italic'
+export { default as Link } from './marks/Link'

packages/tiptap-extensions/src/marks/Bold.js

@@ -1,4 +1,4 @@
-import { Mark } from 'tiptap-models'
+import { Mark } from 'tiptap'
 import { toggleMark } from 'tiptap-commands'
 
 export default class BoldMark extends Mark {

packages/tiptap-extensions/src/marks/Code.js

@@ -1,4 +1,4 @@
-import { Mark } from 'tiptap-models'
+import { Mark } from 'tiptap'
 import { toggleMark } from 'tiptap-commands'
 
 export default class CodeMark extends Mark {

packages/tiptap-extensions/src/marks/Italic.js

@@ -1,4 +1,4 @@
-import { Mark } from 'tiptap-models'
+import { Mark } from 'tiptap'
 import { toggleMark } from 'tiptap-commands'
 
 export default class ItalicMark extends Mark {

packages/tiptap-extensions/src/marks/Link.js

@@ -1,4 +1,4 @@
-import { Mark } from 'tiptap-models'
+import { Mark } from 'tiptap'
 import { updateMark, removeMark } from 'tiptap-commands'
 
 export default class LinkMark extends Mark {

packages/tiptap-extensions/src/nodes/Blockquote.js

@@ -1,4 +1,4 @@
-import { Node } from 'tiptap-models'
+import { Node } from 'tiptap'
 import { wrappingInputRule, setBlockType, wrapIn } from 'tiptap-commands'
 
 export default class BlockquoteNode extends Node {

packages/tiptap-extensions/src/nodes/BulletList.js

@@ -1,4 +1,4 @@
-import { Node } from 'tiptap-models'
+import { Node } from 'tiptap'
 import { wrappingInputRule, wrapInList, toggleList } from 'tiptap-commands'
 
 export default class BulletNode extends Node {

packages/tiptap-extensions/src/nodes/CodeBlock.js

@@ -1,4 +1,4 @@
-import { Node } from 'tiptap-models'
+import { Node } from 'tiptap'
 import { toggleBlockType, setBlockType, textblockTypeInputRule } from 'tiptap-commands'
 
 export default class CodeBlockNode extends Node {

packages/tiptap-extensions/src/nodes/HardBreak.js

@@ -1,4 +1,4 @@
-import { Node } from 'tiptap-models'
+import { Node } from 'tiptap'
 import { chainCommands, exitCode } from 'tiptap-commands'
 
 export default class HardBreakNode extends Node {

packages/tiptap-extensions/src/nodes/Heading.js

@@ -1,4 +1,4 @@
-import { Node } from 'tiptap-models'
+import { Node } from 'tiptap'
 import { setBlockType, textblockTypeInputRule, toggleBlockType } from 'tiptap-commands'
 
 export default class HeadingNode extends Node {

packages/tiptap-extensions/src/nodes/ListItem.js

@@ -1,4 +1,4 @@
-import { Node } from 'tiptap-models'
+import { Node } from 'tiptap'
 import { splitListItem, liftListItem, sinkListItem } from 'tiptap-commands'
 
 export default class OrderedListNode extends Node {

packages/tiptap-extensions/src/nodes/OrderedList.js

@@ -1,4 +1,4 @@
-import { Node } from 'tiptap-models'
+import { Node } from 'tiptap'
 import { wrappingInputRule, wrapInList, toggleList } from 'tiptap-commands'
 
 export default class OrderedListNode extends Node {

packages/tiptap-extensions/src/nodes/TodoItem.js

@@ -1,4 +1,4 @@
-import { Node } from 'tiptap-models'
+import { Node } from 'tiptap'
 import { splitListItem, liftListItem } from 'tiptap-commands'
 
 export default class TodoItemNode extends Node {

packages/tiptap-extensions/src/nodes/TodoList.js

@@ -1,4 +1,4 @@
-import { Node } from 'tiptap-models'
+import { Node } from 'tiptap'
 import { wrapInList, wrappingInputRule } from 'tiptap-commands'
 
 export default class BulletNode extends Node {

packages/tiptap/src/components/editor.js

@@ -16,7 +16,6 @@ import {
 	builtInKeymap,
 } from '../utils'
 import builtInNodes from '../nodes'
-import builtInMarks from '../marks'
 
 export default {
 
@@ -40,7 +39,6 @@ export default {
 	data() {
 		const plugins = new PluginManager([
 			...builtInNodes,
-			...builtInMarks,
 			...this.extensions,
 		])
 		const { nodes, marks, views } = plugins

packages/tiptap/src/index.js

@@ -1,3 +1,5 @@
 import Editor from './components/editor'
+import Node from './utils/node'
+import Mark from './utils/mark'
 
-export { Editor }
+export { Editor, Node, Mark }

packages/tiptap/src/marks/index.js

@@ -1,11 +0,0 @@
-import Code from './Code'
-import Italic from './Italic'
-import Link from './Link'
-import Bold from './Bold'
-
-export default [
-	new Code(),
-	new Italic(),
-	new Link(),
-	new Bold(),
-]

packages/tiptap/src/nodes/Paragraph.js

@@ -23,10 +23,4 @@ export default class ParagraphNode extends Node {
 		return setBlockType(type)
 	}
 
-	keys({ type }) {
-		return {
-			'Shift-Ctrl-0': setBlockType(type),
-		}
-	}
-
 }

packages/tiptap/src/nodes/index.js

@@ -1,29 +1,9 @@
-import Blockquote from './Blockquote'
-import BulletList from './BulletList'
-import CodeBlock from './CodeBlock'
 import Doc from './Doc'
-import HardBreak from './HardBreak'
-import Heading from './Heading'
-import ListItem from './ListItem'
-import OrderedList from './OrderedList'
 import Paragraph from './Paragraph'
 import Text from './Text'
-import TodoList from './TodoList'
-import TodoItem from './TodoItem'
 
 export default [
-	// essentials
 	new Doc(),
-	new Paragraph(),
 	new Text(),
-
-	new Blockquote(),
-	new CodeBlock(),
-	new Heading({ maxLevel: 3 }),
-	new HardBreak(),
-	new OrderedList(),
-	new BulletList(),
-	new ListItem(),
-	new TodoList(),
-	new TodoItem(),
+	new Paragraph(),
 ]

packages/tiptap/src/utils/mark.js

@@ -0,0 +1,46 @@
+export default class Mark {
+
+	constructor(options = {}) {
+		this.options = {
+			...this.defaultOptions,
+			...options,
+		}
+	}
+
+	get name() {
+		return null
+	}
+
+	get defaultOptions() {
+		return {}
+	}
+
+	get type() {
+		return 'mark'
+	}
+
+	get view() {
+		return null
+	}
+
+	get schema() {
+		return null
+	}
+
+	get plugins() {
+		return []
+	}
+
+	command() {
+		return () => {}
+	}
+
+	keys() {
+		return {}
+	}
+
+	inputRules() {
+		return []
+	}
+
+}

packages/tiptap/src/utils/node.js

@@ -0,0 +1,46 @@
+export default class Node {
+
+	constructor(options = {}) {
+		this.options = {
+			...this.defaultOptions,
+			...options,
+		}
+	}
+
+	get name() {
+		return null
+	}
+
+	get defaultOptions() {
+		return {}
+	}
+
+	get type() {
+		return 'node'
+	}
+
+	get view() {
+		return null
+	}
+
+	get schema() {
+		return null
+	}
+
+	get plugins() {
+		return []
+	}
+
+	command() {
+		return () => {}
+	}
+
+	keys() {
+		return {}
+	}
+
+	inputRules() {
+		return []
+	}
+
+}