-
Notifications
You must be signed in to change notification settings - Fork 3.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Question: Creating a completely immutable Embed/BlockEmbed #1337
Comments
Just a followup: It is technically possible to do this, but it gets really complicated, and this is mainly due to contenteditable. I'll document some of the stuff I did though in case anyone finds this useful:
So this logic got me pretty far: I could click on the form to select it, and I could use the arrow keys to cursor around, and depending on where it was the form might get selected and unselected automatically. The problem arose when I wanted to implement dragging and dropping for the form. It just does not seem that contenteditable was not built for embedding HTML and treating that HTML as an indivisible, immutable unit. I started going down the route of implementing my own drag and drop logic, and I quickly realized that it was completely buggy. And I think it's all because we are working within a contenteditable. I think if you wanted to do this sort of thing right, you'd have to get rid of contenteditable completely and implement it from scratch using plain JavaScript just like Google Docs does (cursor, selections, dragging and dropping, everything). It's a real shame and I wish there were better support for this in the browser. |
Having tried something like this a few times, ultimately it's easier to create a meta-layout that contains a series of different node types (rich text/form/gallery) than to try to hook into the editor directly. You can still make it appear as one document canvas visually. |
@alexkrolick I'm making something similar. How do I make that 'meta-layout' thing? Using an iframe? Can I get a demo on this? |
No iframe, just something like this:
And manually manage the navigation/focus of the different types of nodes. |
@mcmire I´m trying to embed a form in the quill editor. Seems like you´ve done similar maybe you can help me After reading over the documentation I created an formBlot by also subclassing BlockEmbed. // formBlock.js file: import * as Quill from 'quill'; const formEmbed = Quill.import('blots/block/embed'); export class CustomBlock extends BlockEmbed { CustomBlock.blotName = 'custom'; Would like to know how you set the fields for your form, in case you also have done it. |
So here is what I am trying to do.
I would like to embed a form in the editor. The use case in my app is that users are able to build a page by adding text and images, and in addition, they are also able to create a form (in a sort of modal, which is separate) and then add that to the page as well.
The route I have gone so far is to create a FormBlot by subclassing BlockEmbed. This almost works, but there are two issues I am facing:
label
orinput
tag) and pressing keys changes the form, when it should not.So, has anyone figured out a way to accomplish both of these things? I have tried rooting around in the Quill and Parchment codebases and have not had much luck so far.
The text was updated successfully, but these errors were encountered: