add text align example

examples/Components/Routes/TextAlign/Paragraph.js

@@ -0,0 +1,34 @@
+import { setBlockType } from 'tiptap-commands'
+import { Node } from 'tiptap'
+
+export default class ParagraphNode extends Node {
+
+	get name() {
+		return 'paragraph'
+	}
+
+	get schema() {
+		return {
+			attrs: {
+				textAlign: {
+					default: 'left',
+				},
+			},
+			content: 'inline*',
+			group: 'block',
+			draggable: false,
+			parseDOM: [{
+				tag: 'p',
+				getAttrs: node => ({
+					textAlign: node.style.textAlign,
+				}),
+			}],
+			toDOM: node => ['p', { style: `text-align: ${node.attrs.textAlign}` }, 0],
+		}
+	}
+
+	command({ type, attrs }) {
+		return setBlockType(type, attrs)
+	}
+
+}

examples/Components/Routes/TextAlign/index.vue

@@ -0,0 +1,90 @@
+<template>
+	<div>
+		<editor class="editor" :extensions="extensions">
+
+			<div class="menubar" slot="menubar" slot-scope="{ nodes, marks }">
+				<div v-if="nodes && marks">
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'left' }) }"
+						@click="nodes.paragraph.command({ textAlign: 'left' })"
+					>
+						<icon name="align-left" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'center' }) }"
+						@click="nodes.paragraph.command({ textAlign: 'center' })"
+					>
+						<icon name="align-center" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'right' }) }"
+						@click="nodes.paragraph.command({ textAlign: 'right' })"
+					>
+						<icon name="align-right" />
+					</button>
+
+				</div>
+			</div>
+
+			<div class="editor__content" slot="content" slot-scope="props">
+				<p style="text-align: left">
+					Maybe you want to implement text alignment. If so, you're able to overwrite the default <code>ParagraphNode</code>. You can define some classes oder inline styles in your schema to achive that.
+				</p>
+				<p style="text-align: right">
+					Have fun! 🙌
+				</p>
+			</div>
+
+		</editor>
+	</div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor } from 'tiptap'
+import {
+	HardBreakNode,
+	CodeMark,
+} from 'tiptap-extensions'
+import ParagraphAlignmentNode from './Paragraph.js'
+
+export default {
+	components: {
+		Editor,
+		Icon,
+	},
+	data() {
+		return {
+			extensions: [
+				new HardBreakNode(),
+				new CodeMark(),
+				new ParagraphAlignmentNode(),
+			],
+		}
+	},
+}
+</script>
+
+<style lang="scss">
+.text-align {
+
+	&--left {
+		text-align: left;
+	}
+
+	&--center {
+		text-align: center;
+	}
+
+	&--right {
+		text-align: right;
+	}
+
+}
+</style>

examples/Components/Subnavigation/index.vue

@@ -12,6 +12,9 @@
 		<router-link class="subnavigation__link" to="/images">
 			Images
 		</router-link>
+		<router-link class="subnavigation__link" to="/text-align">
+			Text Align
+		</router-link>
 		<router-link class="subnavigation__link" to="/hiding-menu-bar">
 			Hiding Menu Bar
 		</router-link>

examples/assets/images/icons/align-center.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>paragraph-center-align-alternate</title><path d="M23,22H1a1,1,0,1,0,0,2H23a1,1,0,0,0,0-2Z"/><path d="M19,18.5a1,1,0,0,0,0-2H4.5a1,1,0,1,0,0,2Z"/><path d="M23,11H1a1,1,0,0,0,0,2H23a1,1,0,0,0,0-2Z"/><path d="M4.5,5.5a1,1,0,1,0,0,2H19a1,1,0,0,0,0-2Z"/><path d="M1,2H23a1,1,0,0,0,0-2H1A1,1,0,0,0,1,2Z"/></svg>

examples/assets/images/icons/align-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>paragraph-left-align-alternate</title><path d="M23,22H1a1,1,0,1,0,0,2H23a1,1,0,0,0,0-2Z"/><path d="M1,18.5H19a1,1,0,0,0,0-2H1a1,1,0,1,0,0,2Z"/><path d="M23,11H1a1,1,0,0,0,0,2H23a1,1,0,0,0,0-2Z"/><path d="M1,7.5H19a1,1,0,0,0,0-2H1a1,1,0,0,0,0,2Z"/><path d="M1,2H23a1,1,0,0,0,0-2H1A1,1,0,0,0,1,2Z"/></svg>

examples/assets/images/icons/align-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>paragraph-right-align-alternate</title><path d="M23,22H1a1,1,0,1,0,0,2H23a1,1,0,0,0,0-2Z"/><path d="M23,16.5H4.5a1,1,0,1,0,0,2H23a1,1,0,0,0,0-2Z"/><path d="M23,11H1a1,1,0,0,0,0,2H23a1,1,0,0,0,0-2Z"/><path d="M23,5.5H4.5a1,1,0,1,0,0,2H23a1,1,0,0,0,0-2Z"/><path d="M1,2H23a1,1,0,0,0,0-2H1A1,1,0,0,0,1,2Z"/></svg>

examples/main.js

@@ -40,6 +40,13 @@ const routes = [
       githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/Images',
     },
   },
+  {
+    path: '/text-align',
+    component: () => import('Components/Routes/TextAlign'),
+    meta: {
+      githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/TextAlign',
+    },
+  },
   {
     path: '/hiding-menu-bar',
     component: () => import('Components/Routes/HidingMenuBar'),