From 9f908b2cbf91bd47d98c15bcd1fe80caa06bcdf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 23 Oct 2020 17:19:12 +0200
Subject: [PATCH] add setNodeAttributes command

---
 docs/src/demos/Extensions/TextAlign/index.vue | 13 +++++----
 packages/core/src/extensions/index.ts         |  1 +
 .../core/src/extensions/setNodeAttributes.ts  | 27 +++++++++++++++++++
 packages/extension-text-align/index.ts        | 14 +++++++---
 4 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 packages/core/src/extensions/setNodeAttributes.ts

diff --git a/docs/src/demos/Extensions/TextAlign/index.vue b/docs/src/demos/Extensions/TextAlign/index.vue
index 5c204f49..615eed4b 100644
--- a/docs/src/demos/Extensions/TextAlign/index.vue
+++ b/docs/src/demos/Extensions/TextAlign/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().setAttributes({ align: 'left' }).run()">
+    <button @click="editor.chain().focus().setNodeAttributes({ textAlign: 'left' }).run()">
       left
     </button>
-    <button @click="editor.chain().focus().setAttributes({ align: 'center' }).run()">
+    <button @click="editor.chain().focus().setNodeAttributes({ textAlign: 'center' }).run()">
       center
     </button>
-    <button @click="editor.chain().focus().setAttributes({ align: 'right' }).run()">
+    <button @click="editor.chain().focus().setNodeAttributes({ textAlign: 'right' }).run()">
       right
     </button>
     <editor-content :editor="editor" />
@@ -18,6 +18,7 @@ import { Editor } from '@tiptap/core'
 import { EditorContent } from '@tiptap/vue'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
+import Heading from '@tiptap/extension-heading'
 import Text from '@tiptap/extension-text'
 import TextAlign from '@tiptap/extension-text-align'
 
@@ -38,11 +39,13 @@ export default {
         Document(),
         Paragraph(),
         Text(),
+        Heading(),
         TextAlign(),
       ],
       content: `
-        <p>first paragraph</p>
-        <p>second paragraph</p>
+        <h1>Heading</h1>
+        <p style="text-align: center">first paragraph</p>
+        <p style="text-align: right">second paragraph</p>
       `,
     })
   },
diff --git a/packages/core/src/extensions/index.ts b/packages/core/src/extensions/index.ts
index 45f4b5a9..d626fdc4 100644
--- a/packages/core/src/extensions/index.ts
+++ b/packages/core/src/extensions/index.ts
@@ -10,6 +10,7 @@ export { RemoveMarks } from './removeMarks'
 export { ScrollIntoView } from './scrollIntoView'
 export { SelectAll } from './selectAll'
 export { SelectParentNode } from './selectParentNode'
+export { SetNodeAttributes } from './setNodeAttributes'
 export { SetBlockType } from './setBlockType'
 export { SetContent } from './setContent'
 export { SinkListItem } from './sinkListItem'
diff --git a/packages/core/src/extensions/setNodeAttributes.ts b/packages/core/src/extensions/setNodeAttributes.ts
new file mode 100644
index 00000000..d049ba3b
--- /dev/null
+++ b/packages/core/src/extensions/setNodeAttributes.ts
@@ -0,0 +1,27 @@
+import { Command } from '../Editor'
+import { createExtension } from '../Extension'
+
+export const SetNodeAttributes = createExtension({
+  addCommands() {
+    return {
+      setNodeAttributes: (attributes: {}): Command => ({ tr, state }) => {
+        const { selection } = tr
+        const { from, to } = selection
+
+        state.doc.nodesBetween(from, to, (node, pos) => {
+          if (!node.type.isText) {
+            tr.setNodeMarkup(pos, undefined, attributes)
+          }
+        })
+
+        return true
+      },
+    }
+  },
+})
+
+declare module '../Editor' {
+  interface AllExtensions {
+    SetNodeAttributes: typeof SetNodeAttributes,
+  }
+}
diff --git a/packages/extension-text-align/index.ts b/packages/extension-text-align/index.ts
index c99bf49a..3cdf800b 100644
--- a/packages/extension-text-align/index.ts
+++ b/packages/extension-text-align/index.ts
@@ -1,15 +1,23 @@
 import { createExtension } from '@tiptap/core'
 
+type TextAlignOptions = {
+  types: string[],
+}
+
 const TextAlign = createExtension({
+  defaultOptions: <TextAlignOptions>{
+    types: ['heading', 'paragraph'],
+  },
+
   addGlobalAttributes() {
     return [
       {
-        types: ['paragraph'],
+        types: this.options.types,
         attributes: {
-          align: {
+          textAlign: {
             default: 'left',
             renderHTML: attributes => ({
-              style: `text-align: ${attributes.align}`,
+              style: `text-align: ${attributes.textAlign}`,
             }),
           },
         },