Replacing indentation classes with inline styles -- RTL support

See original GitHub issue

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?

Issue Analytics

State:
Created 6 years ago
Reactions:5
Comments:7

Top GitHub Comments

7reactions

kaziupircommented, Jan 11, 2019

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();
  }

2reactions

nancyvgbcommented, Mar 10, 2019

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!!!

Top Results From Across the Web

direction - CSS-Tricks

The direction property in CSS sets the direction of of content flow within a block-level element. This applies to text, inline, and inline-block ......

inset-inline - CSS: Cascading Style Sheets - MDN Web Docs

The inset-inline CSS property defines the logical start and end offsets of an element in the inline direction, which maps to physical ...

Alignment, font styles, and horizontal rules in HTML documents

You could reduce the scope of the style by setting the class attribute on the ... With CSS, the text-align property is inherited...

How can I direct React-Quill to apply inline styles instead of ...

This helps get inline styles for font-sizes, indent, text direction etc. Align & Direction: Easiest of the lot--just needs registering: //Text ...

Tailwind CSS v3.0

Tons of other utilities — including support for touch-action, will-change, flex-basis, text-indent, scroll-behavior, and more. Plus a beautiful, ...