Text Align Feature about wax-prosemirror HOT 9 OPEN

import { Service } from 'wax-prosemirror-core';
import rightAlignNode from '../schema/rightAlignNode';
import RightAlign from './RightAlign';

class RightAlignService extends Service {
  register() {
    this.container.bind('RightAlign').to(RightAlign);
    const createNode = this.container.get('CreateNode');
    createNode(
      {
        rightAlign: rightAlignNode,
      },
      {toWaxSchema: true},
    );
  }
}

export default RightAlignService;

const rightAlignNode = {
  content: 'inline*',
  group: 'block',
  priority: 0,
  defining: true,
  attrs: {
    style: { default: 'text-align: right' },
  },
  parseDOM: [
    {
      tag: 'p',
      getAttrs(hook, next) {
        
        Object.assign(hook, {
          style: hook.dom.getAttribute('style'),
        });
        next();
      },
    },
  ],
  toDOM(hook, next) {
    console.log(hook);
    const attrs = { style: hook.node.attrs.style };
    hook.value = ['p', attrs, 0];
    next();
  },
};

export default rightAlignNode;

import { injectable } from 'inversify';
import { Tools, Commands } from 'wax-prosemirror-core';

@injectable()
export default class RightAlign extends Tools {
  title = 'Right Align';
  icon = 'rightAlign';
  name = 'rightAlign';

  get run() {
    return (state, dispatch) => {
      console.log(state.config.schema.nodes)
      Commands.setBlockType(state.config.schema.nodes.centerAlign, {
        class: 'paragraph', style: 'text-align: right'
      })(state, dispatch);
    };
  }

  select = (state, activeViewId, activeView) => {
    const { disallowedTools } = activeView.props;
    if (disallowedTools.includes('rightAlign')) return false;
    return true;
  };

  get enable() {
    return state => {
      Commands.setBlockType(state.config.schema.nodes.centerAlign, {
        class: 'paragraph', style: 'text-align: right'
      })(state, dispatch);
    };
  }
}

import { Service } from 'wax-prosemirror-core';
import CenterAlign from './CenterAlign';

class CenterAlignService extends Service {
  register() {
    this.container.bind('CenterAlign').to(CenterAlign);
  }
}

export default CenterAlignService;

import { injectable } from 'inversify';
import { Tools, Commands } from 'wax-prosemirror-core';

@injectable()
export default class CenterAlign extends Tools {
  title = 'Center Align';
  icon = 'centerAlign';
  name = 'centerAlign';

  get run() {
    return (state, dispatch) => {
      Commands.setAttr({style: "text-align: center"})(state, dispatch)
    };
  }

  select = (state, activeViewId, activeView) => {
    const { disallowedTools } = activeView.props;
    if (disallowedTools.includes('centerAlign')) return false;
    return true;
  };

  get enable() {
    return state => {
      Commands.setAttr({style: "text-align: center"})(state, dispatch)
    };
  }
}

const setAttr = (attrs= {}) => {
  return (state, dispatch) => {
    const { from, to } = state.selection;
    let { tr } = state;
    state.doc.nodesBetween(from, to, (node, pos) => {
      
      if (node.isTextblock){
        const index = state.doc.resolve(pos);
        const currentNode = state.tr.doc.nodeAt(pos);
        
        // console.log(currentNode);
        let node = state.tr.doc.nodeAt(index.before(1));
        let nodePos = index.before(1)
        if((currentNode.type.name == 'paragraph' && node.type.name == 'orderedlist') || (currentNode.type.name == 'paragraph' && node.type.name == 'bulletlist') || (currentNode.type.name == 'paragraph' && node.type.name == 'table')){
          node = currentNode;
          nodePos = pos;
        }
        tr.setNodeMarkup(nodePos, node.type, {...node.attrs, ...attrs}, node.marks);
      }
    });
    dispatch(tr);
    return true;
  };
}

paragraph: {
      group: 'block',
      content: 'inline*',
      attrs: {
        id: { default: '' },
        class: { default: '' },
        style: {default: null},
        track: { default: [] },
        group: { default: '' },
        viewid: { default: '' },
      },
      parseDOM: [
        {
          tag: 'p.paragraph',
          getAttrs(dom) {
            return {
              id: dom.dataset.id,
              class: dom.getAttribute('class'),
              style: dom.getAttribute('style'),
              track: SchemaHelpers.parseTracks(dom.dataset.track),
              group: dom.dataset.group,
              viewid: dom.dataset.viewid,
            };
          },
        },
      ],
      toDOM(node) {
        const attrs = SchemaHelpers.blockLevelToDOM(node);
        return ['p', {...attrs, style: node.attrs.style}, 0];
      },
    },