Dropkiq + CKEditor 5 -> Caretposition issue

[pawel-krysiak]

Hey!

I've tried using Dropkiq with CKEditor 5, as i need the markdown output which is not supported by CKEditor 4.

I've manage to come up with the solution how to integrate those 2 here:
https://codepen.io/pawel-krysiak/pen/eYezwgQ

BUT there is an issue with the caret position. When typing the {, the } is automatically added ( autocompleted ), but the caret is being placed after parenthesis {}| each time, which makes Dropkiq not functional.

Am I missing some configuration that would fix the issue or is it related to some issue with setCaretPosition method?

[akdarrah]

Hi @pawel-krysiak, I started looking into this last night. I have a branch open that fixes the carriage return problem with Ckeditor 5 and I am able to replicate the bug: https://github.com/akdarrah/dropkiq-ui/pull/43/files

I think the problem is that they have their own "Selection" API. My suspicion is that they are overriding where Dropkiq UI places the caret with their own system based on where they think the caret should be. I think the solution here is that we'll need to use their Selection API to place the caret (similar to CodeMirror) rather than using the standard code for contenteditable.

I'll probably be able to dig in more this weekend.

[pawel-krysiak]

@akdarrah I've tried to compile this branch with gulp, and tried your workaround but it does not seem to work for me. Would you be able to prepare a small codepen with your workaround?

[akdarrah]

Hi @pawel-krysiak, Unfortunately, I haven't been able to figure out CK Editor 5's selection API. I'll need to spend more time with it for the full integration, but if you're in need of something quicker my recommendation would be to disable the autocomplete functionality for the curly braces. It would be up to the user to type the braces correctly, but at least after that Dropkiq would be helpful. Is that something you would be interested in for the short term?

[pawel-krysiak]

@akdarrah I could give it a shot as for now. How to disable the autocomplete?

P.S How much time do you think the whole integration with the CkEditor5 is going to take?

[akdarrah]

Hi @pawel-krysiak, Please take a look at #48 and let me know your thoughts. Basically, it adds a new option so that we can disable the auto-completion for the braces. To test:

1. Checkout the branch
2. Run gulp
3. In console, open demo/ckeditor5.html to open the demo page

[pawel-krysiak]

@akdarrah Thank you. It does indeed stop the braces autocompletion but it only shows the dropkiq dropdown when i type {{}} and go back to the middle of the braces with the cursor like that {{|}}. In the demo ckeditor.html it works like it's supposed to. If that would be fixed then I think it would start to be usable. When do you plan to have fully-fledged ckeditor5 support running?

[akdarrah]

Hi @pawel-krysiak,

Thanks for your reply.

To be completely honest, this is as far as I was planning to take CKEditor5 integration for now. The way that I look at it is that without Dropkiq, to write a Liquid statement you still need to type all braces {{}}, then put your cursor back in the middle to write your expression {{|}}. So, with this in mind, Dropkiq without the autocompletion is still only enhancing the user experience at the point they position their cursor and takes nothing away from the existing experience.

If you agree, I'd be happy to push the PR that I have open currently and release a new version of DropkiqUI with that level of support for CKEditor5.

Of course, if you have some time you're welcome to dig in also and see if you can get it working. I believe the issue lies in the Selection model of CKEditor5 around this line. Following their documentation, I was not able to get it to behave as it was documented.

With full transparency, I've spent multiple hours attempting to solve this issue already. I'm sure this could be accomplished given enough time, but I just can't justify spending this time right now (with other work commitments I have) unless your company would be willing to purchase a Dropkiq Pro subscription and pay for the integration development. If you're interested in this option, please email me at [email protected] to discuss it.

Thanks,
Adam