Simple Text Alignment

1

I am trying to implement a very basic text align. I just need to add a text-align style to each root node on the content, so it will align all the content instead of just the selection.

I am using tip-tap so that might be why I’m having difficulties. But this is what I’ve go so far, I’m sure the “command” code is not best practice but it’s what I could get to work. For this code to work I just need to figure out how to all text-align style on all root nodes, but whatever I tried it didn’t work.

import { Node } from 'tiptap';

export default class Align extends Node {
  get name() {
    return 'align';
  }

  get schema() {
    return {
      attrs: {
        textAlign: {
          default: 'left',
        },
      },
      inline: true,
      group: 'inline',
      marks: '_',
      parseDOM: [
        {
          style: 'text-align',
          getAttrs: (dom) => {
            return {
              textAlign: dom.styles.textAlign,
            };
          },
        },
      ],
      toDOM: mark => [
        '_', // <-- I want it to be all nodes not just one.
        {
          style: `text-align: ${mark.attrs.textAlign};`,
        },
        0,
      ],
    };
  }

  commands() {
    return attrs => (state, dispatch, view) => {
      Array.from(view.dom.children).forEach((node) => {
        node.style.textAlign = attrs.textAlign;
      });
    };
  }
}