add setNodeAttributes command

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>
       `,
     })
   },

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'

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,
+  }
+}

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}`,
             }),
           },
         },