Replacing indentation classes with inline styles -- RTL support

I’m trying to rewrite the indentation attributor to to use styles instead of classes, i.e. style="margin-left: 2em" instead of class="ql-indent-1".

This is what I’ve come up with:

import Parchment from 'parchment';

const levels = [1, 2, 3, 4, 5];
const multiplier = 2;

class IndentAttributor extends Parchment.Attributor.Style {
	add(node, value) {
		return super.add(node, `${value * multiplier}em`);
	}

	value(node) {
		return parseFloat(super.value(node)) / multiplier || undefined; // Don't return NaN
	}
}

const IndentStyle = new IndentAttributor('indent', 'margin-left', {
	scope: Parchment.Scope.BLOCK,
	whitelist: levels.map(value => `${value * multiplier}em`)
});

export default IndentStyle;

This is working nicely, but I need to support right text alignment, and so I need to switch margin-left with margin-right when the current line is right aligned or when the line direction attribute is 'rtl`.

How can I do it?

[kaziupir]

For angular 2+:

Create file quill.d.ts: (you can try using @types/quill module, but it doesn’t work for me because getting some error) declare module 'quill';

Add import in your component: import * as Quill from 'quill';

Add class:

class IndentAttributor extends Quill.import('parchment').Attributor.Style {
  multiplier = 2;

  constructor(name: string, style: string, params: any) {
    super(name, style, params);
  }

  add(node, value) {
    return super.add(node, `${value * this.multiplier}rem`);
  }

  value(node) {
    return parseFloat(super.value(node)) / this.multiplier || undefined;
  }
}

Add function in your component:

  createCustomIndent(): void {
    const levels = [1, 2, 3, 4, 5];
    const multiplier = 2;
    const indentStyle = new IndentAttributor('indent', 'margin-left', {
      scope: Quill.import('parchment').Scope.BLOCK,
      whitelist: levels.map(value => `${value * multiplier}rem`),
    });

    Quill.register(indentStyle);
  }

And run it in constructor for example:

  constructor() {
    this.createCustomIndent();
  }

[nancyvgb]

For angular 2+:

Create file quill.d.ts: (you can try using @types/quill module, but it doesn’t work for me because getting some error) declare module 'quill';

Add import in your component: import * as Quill from 'quill';

Add class:

class IndentAttributor extends Quill.import('parchment').Attributor.Style {
  multiplier = 2;

  constructor(name: string, style: string, params: any) {
    super(name, style, params);
  }

  add(node, value) {
    return super.add(node, `${value * this.multiplier}rem`);
  }

  value(node) {
    return parseFloat(super.value(node)) / this.multiplier || undefined;
  }
}

Add function in your component:

  createCustomIndent(): void {
    const levels = [1, 2, 3, 4, 5];
    const multiplier = 2;
    const indentStyle = new IndentAttributor('indent', 'margin-left', {
      scope: Quill.import('parchment').Scope.BLOCK,
      whitelist: levels.map(value => `${value * multiplier}rem`),
    });

    Quill.register(indentStyle);
  }

And run it in constructor for example:

  constructor() {
    this.createCustomIndent();
  }

Wow I spend like two days looking for this solution in angular, Thanks!!!