New feature: paragraphs with "text-indent" style

[felipegiotto]

🆕 Feature request

💻 Version of CKEditor5: v11

I'd like to have the option to use a "text-indent" style on the texts. The default behavior is to always use a <p> tag. I want to be able to use (for example) <p style="text-indent: 3cm"> and, after pressing "enter", the new paragraph also should have the "text-indent" property.

As a workaround, I tried to use a heading (translated to <p style="text-indent: 3cm">), but when I press ENTER it goes back to <p>.

I also tried making a new plugin based on BlockQuote. It worked, but only wrapping the <p> tags in <div style="text-indent: 3cm"> tags. It doesn't seem to be the best option.

Is there any better (easier) way to do this?

Thanks and congratulations for the great product!

---

If you'd like to see this feature implemented, add a 👍 reaction to this post.

[Reinmar]

Hi! The closest to text-indent will be text-alignment feature: https://github.com/ckeditor/ckeditor5-alignment. If you'd like to try implementing it, that would be the best inspiration.

Regarding how we'd approach implementing the "indentation" feature... This is a bit tricky. There are at least 3 separate features that could be build for that.

First, we'd consider implementing a block style dropdown which would apply classes to blocks (paragraphs, headings, perhaps images, etc). You could configure it to contain styles like "Indented paragraph" which would apply an indented class to paragraphs. That's similar to CKEditor 4's "Styles" dropdown. And it sounds quite well because it keeps the output clean (no inline styles, portable, stylable content).

The other, separate feature would be a block indent feature which would apply margins/classes to paragraphs. It would allow indenting a paragraph e.g. 3 times. Just like the CKEditor 4's indentblock feature.

Finally, there's also the question what should Tab do: https://github.com/ckeditor/ckeditor5/issues/1197. It may change block indentation (via the previous feature) or insert some characters into paragraphs.

I describe what kind of "indentation" related features one can imagine because from my experience developers have different needs and imagine/understand this feature differently. Also, I'm not sure which of these options we'll implement and when. We'll certainly need to have more feedback to make some decisions.

[felipegiotto]

Thanks for your feedback, @Reinmar! I'll take a look at the alignment plugin.

You're right. There's really a lot of ways of doing it, each of them with some "pros" and "cons"...

[limengning]

In the Chinese article, a paragraph usually 2 character indent in first line. It is a very useful feature for Chinese editor. For example: I hope this can help you to simplify the requirement as set the paragraph with a text-indent: 2em css style.

[antoniolucasnobar]

Hello @Reinmar ,

I am trying to build a styles dropdown with styles that does not get transformed to paragraphs after an ENTER. I followed your idea in previous comment:

Regarding how we'd approach implementing the "indentation" feature... This is a bit tricky. There are at least 3 separate features that could be build for that.

First, we'd consider implementing a block style dropdown which would apply classes to blocks (paragraphs, headings, perhaps images, etc). You could configure it to contain styles like "Indented paragraph" which would apply an indented class to paragraphs. That's similar to CKEditor 4's "Styles" dropdown. And it sounds quite well because it keeps the output clean (no inline styles, portable, stylable content).

For my users need, I just commented out the afterInit() method of HeadingEditing and voilá, it worked just like I expected. Below you can see the method:

https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-heading/src/headingediting.js#L88-L105

This method seems responsible to transform the headings in paragraph (just like @felipegiotto pointed in first comment).

Now, if a user is on a style, it stays in that style until the user manually changes it.

The ENTER makes it create a new node of the same type in the model.

Do you see any problem in creating a plugin just like Heading, just commenting that method? Are there anything I should worry about? Any sideeffects, maybe?

EDIT: after writing this comment, I just had an idea: add a field to the heading configuration where we define if the style should be transformed to a paragraph or not. Something like continueStyleOnEnter (I accept suggestions for a better name).

Heading option:

{
    model: 'corpo',
    view: {
        name: 'p',
        classes: 'corpo'
    },
    title: 'Corpo',
    class: 'ck-paragraph_corpo',
    // It needs to be converted before the standard 'paragraph'.
    converterPriority: 'high',
    continueStyleOnEnter: true
}

In after init, just changed the isHeading definition from:

const isHeading = options.some( option => positionParent.is( 'element', option.model ) );

to

const isHeading = options.some( option => positionParent.is( option.model ) && !option.continueStyleOnEnter );

This way we have the Headings with default behavior (changed to paragraph after ENTER) and we can define new styles which persist after ENTER (my users need).

What do you think of this strategy? Is there any implications of not changing back to paragraphs?

thanks in advance.

PS.: I thought about creating a form to let the users create their own styles. I wonder if we can load styles (or headings) dynamically in the editor. AFAIK we need to load the CSS to the new styles and add the new heading options to the array of options. But I do not know if this can be done without reload the editor.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[aliciafaye]

I'm having a similar issue where my users need first line indentation and we're having a hard time implementing it.

[spacelist-ca]

@Reinmar Any updates on this option for text-indent?

Importing from Word retains the inline style, but it would be great if there was a way to create a custom plugin to do this on the fly within the editor (either globally or per each selection).

[basil]

The IndentBlock plugin currently extends the schema for block objects with a blockIndent attribute that maps to e.g. the CSS margin-left property. How do the developers feel about adding a textIndent attribute that maps to the CSS text-indent property. This could be set to e.g. 1em to indent a paragraph or to -0.5in for a hanging indent. A corresponding textIndent command could be added whose argument is the amount by which to indent (could be negative). I'm not sure how such a command would be exposed in the UI, but let's start with discussing what I wrote above.

[spacelist-ca]

The IndentBlock plugin currently extends the schema for block objects with a blockIndent attribute that maps to e.g. the CSS margin-left property. How do the developers feel about adding a textIndent attribute that maps to the CSS text-indent property. This could be set to e.g. 1em to indent a paragraph or to -0.5in for a hanging indent. A corresponding textIndent command could be added whose argument is the amount by which to indent (could be negative). I'm not sure how such a command would be exposed in the UI, but let's start with discussing what I wrote above.

This would be amazing, and we've already prototyped a solution and there are not too many conflicts. The two ways we've found to make the UI is (1) to simply have the user enter the number for the size of the indent (can add input logic to constrain as well to avoid causing under/oversize issues) or (2) have an increased/decrease Text indent button (its a little confusing to the block indent but that can be cured with text helper and icons).

This is extremely common feature in Word. We've also prototyped a 'ruler' to adjust the text indent as well, which is how Word works, but it's quite complicated to make work without conflicts.

[basil]

@spacelist-ca Are you a CKEditor maintainer, or just another interested end user? I'm just an interested end user. I've been trying to write a custom plugin to do this, but it seems you're much further along than I am.

[spacelist-ca]

We're a larger CKE Premium licensed user that have built a number of advanced/sophisticated plugins on top of CKE for our own internal platforms use.