Alignment not working

[devcaco]

Hello.

I added this library to my react app. I'm using React 19, Quill 2.0.3, and react-quilljs 2.0.5..

I can register the module just fine, and the image resizing does work, however the alignment doesn't. Any particular setting I need to configure to make it work?

Thanks

[enzedonline]

Hi,

Did you add the relevant alignment CSS to your site?
https://github.com/enzedonline/quill-blot-formatter2?tab=readme-ov-file#css

The alignment in formatter2 is all handled by css classes/selectors rather than hard-coding the styles into the elements as it was with the original. It's left that way to leave the formatting in the hands of the developer.

[devcaco]

Hi @enzedonline, thanks for the quick response.

I thought about that, and I did include the CSS file.. Here is a codesandbox I created to showcase the alignment issue. Am I importing the wrong css?

https://codesandbox.io/p/sandbox/quill-blot-formatter2-xj6ld4

Let me know if you can't open or access the sandbox.

Thanks.

[enzedonline]

Ah, ok. It's not css - the align formats are not being applied at all.

I tried creating the Quill instance with more blotFormatter options:

  const { quill, quillRef, Quill } = useQuill({
    placeholder: "123",
    modules: {
      blotFormatter: {
        video: {
          registerCustomVideoBlot: true,
        },
        resize: {
          useRelativeSize: true,
          allowResizeModeChange: true,
          imageOversizeProtection: true,
        },
        image: {
          registerImageTitleBlot: true,
          allowCompressor: true,
          compressorOptions: {
            jpegQuality: 0.7,
            maxWidth: 1000,
          },
        },
      },
    },
  });

and also tweaking the module registration:

  if (Quill && !quill) {
    const blotFormatter = require("@enzedonline/quill-blot-formatter2").default;
    Quill.register("modules/blotFormatter", blotFormatter);
  }

I found that everything works, including registering the custom image and video blots, except for the align formats.

There are reports that this used to effect the old quill-react module - custom formats needed to be registered with the Quill class from quill-react and not with the Quill object directly (as happens in the BlotFormatter2 code). It seems the problem has likely carried over into quill-reactjs.

It's odd though since the blots are registered directly:

    // register image bot with title attribute support
    if (this.options.image.registerImageTitleBlot) {
      Quill.register(Image, true);
    }
    // register custom video blot with initial width 100% & aspect ratio from options
    if (this.options.video.registerCustomVideoBlot) {
      VideoResponsive.aspectRatio = this.options.video.defaultAspectRatio;
      Quill.register(VideoResponsive, true);
    }

Unfortunately, the align formats are not currently exported (found in src/actions/align/AlignFormats.ts). I'll try with exporting and registering the formats and see if that makes a difference.

I'll need to put this away for a while though sorry, got a lot on at the moment.

[devcaco]

Oh wao, ok a bit more complicated than I thought. Lol..

I wish I had the proper knowledge to help you out with this, but I'm pretty new to this. I'll try and see if I can figure it out.

Thanks

[devcaco]

Hi @enzedonline

Just wondering if you have had the time to re-visit this issue. Looking forward to see if this issue can be solved.

I have been trying but unfortunately haven't find a solution.

[enzedonline]

No, sorry. Long project soaking up all my time.