v3 beta is available - testers welcome!

[enzedonline]

I've made a significant rewrite of much of the code to address an issue when the build is consumed directly in environments such as vite, angular, react, vue ...

Before I release this, I'd welcome any feedback from people using these environments willing to test the beta.

Install path for the beta is @enzedonline/quill-blot-formatter2@beta - see the readme for more info (yes, I committed the beta repository ahead of time 🙈).

Please add any feedback (+/-) below.

[devcaco]

Hi!, thanks for doing all this. I was planning to test it out, but can't install the beta version, npm is giving me an error.

Error: Cannot find module '/.../node_modules/@enzedonline/quill-blot-formatter2/check-upgrade.js'

Thanks

[enzedonline]

All that work and tripped over at the finish line ;)
I'd missed adding the script to the files attribute in package.json.
New beta up now.
Thanks.

[devcaco]

Thank you for updating the beta.

I tried it but for some reason still can't make the image alignment work. Here is an updated codesandbox with the beta version.

https://codesandbox.io/p/sandbox/ym5344

Let me know if I'm doing something wrong.

Thanks.

[enzedonline]

@devcaco Well, that's confusing - I added some extra debug into beta 4. I can see that the imageAlign and iframeAlign formats are there. If I use the following at the console with an image selected on standard Quill run on Vite:

blot=blotFormatter.currentSpec.getTargetBlot() 
blotFormatter.ImageAlign.add(blot.domNode, 'center') 

I see the debug messages from the imageAlign format and the image is aligned.
If I do that on your Quill setup (I forked and updated the blotformatter) it just returns false, not even the first debug message that runs before anything in blotFormatter.ImageAlign.add(), yet blotFormatter.ImageAlign is the correct instance of the attributor class.

Same if I run blotFormatter.actions[0].aligner.setAlignment(blot, 'right') - the debug code from blotFormatter.actions[0].aligner.setAlignment() prints to the console, but nothing from the format. I can;t see anything that makes the difference.

I also tried blot.format('imageAlign', {align: 'right', title: ''}) - this should also work but no dice with React.

Incidentally, you're not loading the css the alignments. I can see you import it, but it's not loaded on the demo page. I'm not a react developer, not sure where you need to add this. I just pasted the styles into styles.css on my fork.

I tried re-adding the formats to the global Quill as well as the quill.constructor - neither make any difference. For some reason, when using React, Quill doesn't run those formats even though they're registered.

You can enable verbose mode with debug; true in the blotFormatter options. I prints out to the debug console and creates a window.blotFormatter instance variable.

I'll have to give it more thought tomorrow.

[devcaco]

Hi @enzedonline
Yes its really confusing I haven't been able to figure this out either. I believe the way I'm importing the css is the correct way of importing css into a component in React. That shouldn't be the issue.

Furthermore regarding the logs not logging I think it might be and issue with that particular CodeSandbox project that I quickly created for demonstration purposes. I say this because I enabled the debug option in my local development server (running react with Vite) and I can see the logs logging just fine when clicking the alignments buttons in the image. It just doesn't align for some reason.

[enzedonline]

No, I realise the missing css isn't the issue, it's just that if we manage to get the code working on react, you might not realise without the classes being loaded. I pasted in some formatted html and had to add the css.

I'm running the fork locally on my machine. The debug console logs in your screenshot don't have the debug from the formats which is what I'm referring to. There should be logs from ImageAlign.add for example. This is what I see also.

[devcaco]

I'm starting to think that maybe the issue is with the react-quilljs wrapper library.

One interesting point though, is that I was playing around with the codepen you provide in the readme file, and with the debug: true option added I can see the logs you are referring to, however, I don't know why but at one point although the alignment was working fine, the logging was very similar to the one I provided in the screenshot, and there where no log messages from ImageAlign.add, ImageAlign.remove, ImageAlign.value... etc... I reloaded the codepen and the logs started appearing again. Very confusing indeed.

[enzedonline]

@devcaco Yes, exactly that. Not being familiar with React, I went on the Quill site to see how they do it. They don't use the react-quilljs wrapper library at all (maybe this is only for Quill 1.x??). I created an Editor app following their methodology and now it's up and running. I also updated all the dependencies, some of them were pretty old and past support date, maybe this was also needed to get it working.

  "dependencies": {
    "@enzedonline/quill-blot-formatter2": "3.0.0-beta.4",
    "quill": "2.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-quilljs": "2.0.5"
  },
  "devDependencies": {
    "@types/react": "^19.1.9",
    "@types/react-dom": "^19.1.7",
    "@vitejs/plugin-react": "^4.2.1",
    "typescript": "5.9.2",
    "vite": "^5.2.10"
  },

I'll reduce it down to a minimum working example and post here later on.

[enzedonline]

Here's a minimum working example - try with the code from that on your own site, hopefully this is the right path.
https://codesandbox.io/p/devbox/quill-blot-formatter-beta-forked-m7cx7p

[devcaco]

Hi!
Yes I can also confirm that the culprit was with the wrapper library (react-quilljs) 😡😡😡. Can't believe I didn't catch this earlier.

I updated the CodeSandbox I provided earlier to only use the Native Quill Library and the image alignment worked like a charm!!!

The good news is that we can now confirm it works with React 😀

FYI I tried the CodeSandbox link you provided but got a DevBox Not found error. Maybe its a permission issue..

Thanks.

[enzedonline]

Ok, great news!!! 🎉

I don't know what happened with that sandbox - I had it running latest versions of react & vite. I went back in and it refused to work, throwing BADENG errors. I downgraded both again, and it works now. Pfft. Horrible environment to work in 😂

[enzedonline]

This setup is a much simpler approach. Less mess getting the project up and running.
https://playcode.io/2492969

I finally learnt some react today 😂

[devcaco]

Hi @enzedonline,

Great setup — it’s working perfectly, thanks!

I did notice one thing: when inserting an image, there’s no drag functionality to reposition it within the editor content. Do you know if this is intentional, or should drag-and-drop be supported?

From what I’ve found, Quill 2 blocks drag events by default, but this can be overridden by importing the Scroll blot and extending its class. It also seems the original blot-formatter library supports this, likely because it was built for Quill 1.

I’ll experiment with adding this feature myself, but I wanted to flag it in case you have any thoughts or suggestions.

Thanks,
Carlos

[enzedonline]

Hmmm, I don't think that's something I would want to include. That'll get very messy very quickly when dragging formatted images, especially the float styles. Quill has a nasty habit of removing or corrupting formats as I have found in this project, leading to a surprisingly large amount of code to do simple things. It's really quite buggy under the hood. It will get into a spin if you drag a formatted image into a block of formatted text for example.

You would also need to live update the editor as you drag leading to content jumping around all over the place - even Word and Office Libre handle this very badly.

[enzedonline]

If you go down this route, maybe look at using the clipboard API so that on mouse up, the image is cut/paste into position. Quill is a bit better at that. And maybe try it with freezing the editor during drag - it might simplify things, though it won't give a preview of what the result would be.

[devcaco]

Hehehe I see what you mean. I extended the Scroll blot class and was able to get the dragging to work however when trying to drag an aligned image, it duplicates the image on the editor 🥴

With no alignment it kind of works ok.

Ill keep working at it and will update you if I somehow make it work

[enzedonline]

I think you'd need to test if the image has a format and move the span wrapper with it (or just reformat the image). I can;t say for sure, there's so many bugs in Quill it's hard to predict how it will behave.

I wouldn't include drag/drop in this project though - it's out of scope for the use for this module. Better to do it as a separate module, trap the pointer down event and pass it through if it's not a drag operation. I'd predict the draggable module would generate a lot of issues for all those unforeseen fringe cases ... 😉

[enzedonline]

Something else to think of ... there are transparent proxy images overlaying iframes with Blotformatter2. If you drag one of those, it'll just leave the iframe where it is then the proxy will snap back to the iframe on quill update event. The proxy image has a red border when debug: true is used in the options.

[enzedonline]

beta 6 is published - this one removed all direct imports of the Quill global (bare import) which caused the ESM build to fail when used in a script module without an import map. It meant needing to use factory methods to create the custom blots using the quill instance constructor, and for a few remaining methods also. Both factory methods for the image & video blots are exported. A couple of extra tweaks to default styles also.

Hopefully the last iteration before v3.0.0 production release.