Comments (9)
What's the use case?
from delta.
The use case is the following. When someone adds an image via a toolbar button, it shows a window where the user can pick an image from its hard drive. When the user selects one or more images. The editor first inserts a div (BlockEmbed), with the filename as text and a unique sequence identifier as dataset.
<div class="editor-uploading" data-sequence="123421">IMG_1.jpeg</div>
This div corresponds to a certain delta like:
message: {"sequence":123421, text:"IMG_1.jpeg"}
Afther this div is added, the image or images are being uploaded to the server including the sequence number. When the upload is finished, the server responds with the actual url and the sequence number. The image should now be shown to the user at the position of the div with that sequence number. So the div should be replaced with:
<img src="http://some_image.jpg" class="editor-uploaded" alt="some text" />
This img-tag corresponds with the following delta:
image: {src: "http://some_image.jpg", alt="some text", "sequence":123421}
Somehow I need to modify the delta of the complete text and delete the div and replace it with an image tag. How can I accomplish this?
Currently I have the following solution:
replaceSequenceWithImage(image) {
let delta = quill.getContents();
let range = quill.getSelection(true);
for (let i = 0; i < delta.ops.length; i++) {
let insert = delta.ops[i].insert;
if (insert.hasOwnProperty('message') && insert.message.sequence == image.sequence) {
delete insert.message;
insert.image = image;
}
}
quill.setContents(delta, Quill.sources.USER);
quill.setSelection(range, Quill.sources.USER);
}
This solution feels bad, because at every update I use setContents while a better solution would be to use updateContents. But I don't know how to get to the index for retain().
from delta.
I think this is the wrong layer of abstraction for what you are trying to accomplish, which is why best practice is to not generate Deltas yourself.
It sounds like you are using Quill and Parchment and it would be less error prone to have blockembed replace itself with the real image blot instead.
from delta.
Yes, I am trying to build a custom editor based on the "cloning medium with parchment" tutorial. I've built some blots and now I need to replace a blot with another blot.
Now your advice is to let the blockembed replace itself with another blot. Now I have two questions:
- Which function inside the blockembed class should be overriden to do the replacement and how can I replace it?
- When the upload is finished an event is triggered. At that moment I don't have a reference to the blot I need to replace, so how do I get a reference to the right blot, depending on the sequence number?
from delta.
Are you using just Parchment or Quill as well?
from delta.
I am also using Quill. It would be great to see some examples, because for now I only see insertText and insertEmbed functions. I think I have to use Parchment.find to find the corresponding blot by a node. But if I have the blot, how do I delete it properly?
from delta.
I think I've found a solution, correct me if I am wrong:
let node = document.querySelectorAll(`[data-sequence="${sequence}"]`);
let blot = Parchment.find(node);
let image = {src, alt, class, type, sequence};
blot.replaceWith('image', image);
Thanks for your feedback and wonderful editor!
from delta.
Well after some testing, if I do
let node = document.querySelectorAll(`[data-sequence="${sequence}"]`);
let blot = Parchment.find(node);
let image = {src, alt, class, type, sequence};
blot.replaceWith('image', image);
console.log(quill.getContents());
after the replace, the content in the editor is updated, but the delta isn't.
from delta.
Closing inactive issue.
from delta.
Related Issues (20)
- Validity checking insert/delete/retain operations HOT 1
- Release the package as es6 module HOT 1
- Format of a multi-line block quote?
- How to find the effective length of a Delta
- Quill delta / Angular 13 / Webpack error HOT 3
- Supporting nested quotes and lists HOT 1
- Question: how to convert Delta to DeltaStatic? HOT 1
- Definition of "document" vs "non-document" delta HOT 1
- Any plans for the ES version? HOT 5
- Delta `alignment` attribute is ambiguous and doesn't have the right value HOT 1
- Word-level diff behavior HOT 3
- Get incorrect delta by Delta.transform HOT 1
- Generic `Delta<T>`? HOT 5
- Delta doesn't insert empty line
- Bug in production from using Esnext + vite HOT 2
- can't diff embed bolt
- RFC:Nested combinations
- Feature request: an operation to convert Delta format to html HOT 2
- Request support for ESM HOT 3
- I packed quill-delta with a webpack but can't use new Delta() HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from delta.