how to set the style text-indent

i want to set the line-style as text-indent just for the head of the line，and if i click the default indent-button will change into add class and the style is padding-left: 3em; but it is not my want of course i try this solution https://github.com/quilljs/quill/issues/1930#issue-290759881

but it will occur this error

Uncaught TypeError: BlotClass.create is not a function

[danielmhair]

Yes, we did solve it. I must not have hit send in my last message.

Here is what our solution looks like. Before looking, please keep in mind that we needed to add a little bit of hackery because of typescript. I will show our original code, then change it to show the important thing that needs to be changed.

declare const Quill: any

export const Parchment = Quill.import("parchment")
const pixelLevels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
const TAB_MULTIPLIER = 30

export class IndentAttributor extends (Parchment.Attributor.Style as { 
  new(formatName: any, styleProperty: any, attributorOptions: any): any;}) {
  constructor(formatName: any, styleProperty: any, attributorOptions: any) {
    super(formatName, styleProperty, attributorOptions)
  }

  public add(node: HTMLElement, value: string): boolean {
    return super.add(node, `${+value * TAB_MULTIPLIER}px`)
  }

  public value(node: HTMLElement): number | undefined {
    return parseFloat(super.value(node)) / TAB_MULTIPLIER || undefined // Don't return NaN
  }
}

export const IndentStyle = new IndentAttributor("indent", "margin-left", {
  scope: Parchment.Scope.BLOCK,
  whitelist: pixelLevels.map(value => `${value * TAB_MULTIPLIER}px`),
})

In the code, the most import part was:

export const Parchment = Quill.import("parchment")

Before we did the following two ways:

// This import simply does not work and this was the line that caused the error
import * as Parchment from "parchment"

// Our typescript tslint wouldn't allow this, because it thought of the const variable as private, so we needed to export it. For those without Typescript, you only need this one.
const Parchment = Quill.import("parchment")

Also, in that code, you might have seen that the extend has a constructor type (new(formatName, ...)). For simplicity, I’m going to show the code as if I didn’t use Typescript:

const Parchment = Quill.import("parchment")
const pixelLevels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
const TAB_MULTIPLIER = 30

export class IndentAttributor extends Parchment.Attributor.Style {
  add(node, value) {
    return super.add(node, `${+value * TAB_MULTIPLIER}px`)
  }

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

export const IndentStyle = new IndentAttributor("indent", "margin-left", {
  scope: Parchment.Scope.BLOCK,
  whitelist: pixelLevels.map(value => `${value * TAB_MULTIPLIER}px`),
})

It might be important to know how I register it with Quill:

Quill.register({ "formats/indent": IndentStyle }, true)

[omerson]

You can transform the content.

        prepareIndent(editor: HTMLElement) {
            const indents: NodeList = editor.querySelectorAll('[class^=ql-indent-]');
            for (let i = 0; i < indents.length; i++) {
                const node: HTMLElement = indents[i] as HTMLElement;
                const indentClass = node.classList.toString().split(' ').filter(c => c.startsWith('ql-indent-'))[0];
                let tab = 0;
                const destructClass = indentClass.split('-');
                if (destructClass) {
                    const indentIndex = destructClass.pop();
                    if (indentIndex) {
                        tab = Number(indentIndex);
                    }
                }
                const indentValue = 3 * tab;
                node.style.paddingLeft = indentValue + 'em';
            }
        }