From cca52e0518b1324c1d05c14d3f689066aa07f56c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 27 Sep 2018 09:17:11 +0200
Subject: [PATCH] add text align example

---
 .../Components/Routes/TextAlign/Paragraph.js  | 34 +++++++
 .../Components/Routes/TextAlign/index.vue     | 90 +++++++++++++++++++
 examples/Components/Subnavigation/index.vue   |  3 +
 examples/assets/images/icons/align-center.svg |  1 +
 examples/assets/images/icons/align-left.svg   |  1 +
 examples/assets/images/icons/align-right.svg  |  1 +
 examples/main.js                              |  7 ++
 7 files changed, 137 insertions(+)
 create mode 100644 examples/Components/Routes/TextAlign/Paragraph.js
 create mode 100644 examples/Components/Routes/TextAlign/index.vue
 create mode 100644 examples/assets/images/icons/align-center.svg
 create mode 100644 examples/assets/images/icons/align-left.svg
 create mode 100644 examples/assets/images/icons/align-right.svg

diff --git a/examples/Components/Routes/TextAlign/Paragraph.js b/examples/Components/Routes/TextAlign/Paragraph.js
new file mode 100644
index 00000000..a026295a
--- /dev/null
+++ b/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)
+	}
+
+}
diff --git a/examples/Components/Routes/TextAlign/index.vue b/examples/Components/Routes/TextAlign/index.vue
new file mode 100644
index 00000000..64317196
--- /dev/null
+++ b/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>
diff --git a/examples/Components/Subnavigation/index.vue b/examples/Components/Subnavigation/index.vue
index 1297a4de..c984ae34 100644
--- a/examples/Components/Subnavigation/index.vue
+++ b/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>
diff --git a/examples/assets/images/icons/align-center.svg b/examples/assets/images/icons/align-center.svg
new file mode 100644
index 00000000..707ceb54
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/examples/assets/images/icons/align-left.svg b/examples/assets/images/icons/align-left.svg
new file mode 100644
index 00000000..5a679484
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/examples/assets/images/icons/align-right.svg b/examples/assets/images/icons/align-right.svg
new file mode 100644
index 00000000..8e70ec39
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/examples/main.js b/examples/main.js
index 90037df9..7491bdc9 100644
--- a/examples/main.js
+++ b/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'),