Indent not working at ckeditor5-build-classic

[MahediSabuj]

📝 Provide detailed reproduction steps (if any)

1. Clone ckeditor5-build-classic from GitHub repository
2. Open sample/index.html
3. 'Indent' toolbar not activated when I put the cursor on Sample.

✔️ Expected result

❌ Actual result

📃 Other details

• Browser: Google Chrome
• OS: Windows 10
• CKEditor version: 15.0.0
• Installed CKEditor plugins: …

---

After looking into indentation docs, I updated app.js with the following snippet, then it works as expected.

// Other Imports
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';

ClassicEditor.builtinPlugins = [
  // Other Plugins
  IndentBlock 
];

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[mlewand]

This is actually by design. There are 2 implementations for indent plugin: one for lists (only) and the other for text blocks.

We decided to enable both implementations only for the document editor build, while all other builds have only list indentation implementation. Meaning that indenting block is unavailable.

The proper solution is add IndentBlock plugin just like you have proposed.

It's early after the release, I'll leave this ticket open for a while to ensure whether this is not confusing for more users.

For anyone else seeing this a s a problem, please add a 👍 reaction to the main post.

[peppies]

The proper solution is to be able to indent a simple paragraph by default... This isn't worthy of a plugin, it is worthy of basic English writing format...

Definition of "indent" - to set in or back from the margin, as the first line of a PARAGRAPH.
https://www.dictionary.com/browse/indent

This post was in October of 2019, it is now March 2020. Time to do the work and get the proper solution finished.

[Reinmar]

I gratefully accept the rebuke.

The default builds of CKEditor 5 are focused on semantic content. Using indentation is not semantical – it's purely presentational. Also, you actually confused line and block indentation. This ticket is about block indentation, while you refer to first line indentation.

Perhaps someone may correct me, but the latter (first line indentation) is exactly the thing that should be achieved with stylesheets because it's a matter of style. And that'd be true for both in the web and in web processors. And you can do that too – just add p { text-indent: 1em } to your stylesheet.

A side note about first line indentation – while it's common in print, it's not common in web typography.

Finally, I understand that there will be many people who will miss the indent feature in the default builds (well, 4 of them, because it's present in the document build). But:

• Same thing will be true for fonts (colors, sizes, family), alignment, horizontal lines and many others. They are all popular features. Should we add them all?
• The editor is configurable and everyone can adjust it to their needs. While I understand it may be work one wants to avoid, you'll likely have to add some other features yourself anyway. We may try to have sane defaults, but there will be usually something missing for a particular case.

[Subhra264]

@Reinmar Sorry, I am little confused if it is a ckeditor5-react issue or a ckeditor5-build-classic issue, but as my issue is somewhat similar to this one, so I am commenting here.

I followed the react-integration quick start guide, and everything is working fine except the lists, When I create a list, it looks like the following ---

That is, it is creating an ordered list, but the digits get cut off. Similarly for unordered lists, the bullet markers can not be even seen.

Neither do nested lists work. But I could not find any related fix for it as if no one else has encountered this problem. That's why I am confused, here is my code ( totally copied from the documentation ) ---

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

export default function Editor (props) {

  return (
    <div className="editor-container">
      <CKEditor
        editor={ ClassicEditor }
        data="<p>Hello from CKEditor 5!</p>"
        onReady={ editor => {
          // You can store the "editor" and use when it is needed.
          console.log( 'Editor is ready to use!', editor );
        }}
        onChange={( event, editor ) => {
          const data = editor.getData();
          console.log( { event, editor, data } );
        }}
        onBlur={( event, editor ) => {
          console.log( 'Blur.', editor );
        }}
        onFocus={( event, editor ) => {
          console.log( 'Focus.', editor );
        }}
      />
    </div>
  );
}

Thanks in advance for any help...

[coderrohanpahwa]

How to get working the indent feature with vanilla javascript?

[evanness]

I've not been able to get indent to work in React. It doesn't just work with the buttons, which seems like a really bad design. I've not been able to import the Indent or IndentBlock plugins without getting the CKEditorError: ckeditor-duplicated-modules error.

[FilipTokarski]

@evanness That's most probably because you are trying to add a plugin to a predefined build, which will not work. Please check the docs on customising editor in React.

[evanness]

@FilipTokarski Thanks for the link. I had already explored with that no luck. I've done custom builds with and without the online builder and I keep running into issues. I tried many options including customizing my webpack as suggested (and with other variations). I've decided that Quill is the better option for me. It works with very little setup.

[azizrosyid]

if you use nextjs and have styling
* { padding: 0; margin: 0; }

remove this from your global css

[maldimz]

Thanks man, it works for me, i use nextjs and CkEditor Classic

Before

After

[Witoso]

Hello everyone, happy to report that we finished the looong work in #15502, and the new installation methods shipped in v42.0.0 allow seamless dynamic extension of the editor's plugins in npm and CDN setups.

Predefined builds will still be released in new versions for some time, but they are put on the deprecation path and we don't plan to update them.

Test the new setup (migration docs and quick start), and let us know what you think!