Hi,
Recently I tried building the text-align feature in the Wax editor but there were some problems with my implementation.
The main problem with my approach is that the contents get aligned by wrapping it with a div element with a style attribute. But it would be a lot better if I could just update or add a style attribute to the current node.
Is there a way to resolve this issue?
This is how I implemented the service:
//rightAlignService.js
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,
},
);
}
}
export default RightAlignService;
//rightAlignNode.js
const rightAlignNode = {
content: 'block*',
group: 'block',
code: true,
defining: true,
// marks: 'comment insertion deletion',
attrs: { params: { default: '' } },
parseDOM: [
{
tag: 'div',
preserveWhitespace: 'full',
getAttrs(dom) {
return {
params: dom.dataset.params,
};
},
},
],
toDOM(node) {
return ['div', { 'style': 'text-align: right' }, 0];
},
};
export default rightAlignNode;
//RightAlign.js
import { injectable } from 'inversify';
import { wrapIn } from 'prosemirror-commands';
import { Tools } from 'wax-prosemirror-core';
@Injectable()
export default class RightAlign extends Tools {
title = 'Right Align';
icon = 'rightAlign';
name = 'rightAlign';
get run() {
return (state, dispatch) => {
wrapIn(state.config.schema.nodes.rightAlign)(state, dispatch);
};
}
select = (state, activeViewId, activeView) => {
const { disallowedTools } = activeView.props;
if (disallowedTools.includes('rightAlign')) return false;
return true;
};
get enable() {
return state => {
return wrapIn(state.config.schema.nodes.rightAlign)(state);
};
}
}