Image size

[tonydtran]

Hi Nozer,

You did a great job, your module is very useful to me and simple to use. But I have some troubles with images, as you know the images are save in base64 with the width attribute. When I resize it, it works, but when I'm saving then displaying it out of Quill the image is displayed with its original size. But when I come back to Quill the image is displayed properly.

I saw that you've just pushed a commit one day ago about supporting width image attribute. What a luck! Can you please release it so I can use it on my prod server by installing it with npm?

Thank you very much

[nozer]

Thank you. Done

[tonydtran]

Sorry to bother you again, but do you know how long it takes to see your updated module on npm?

[nozer]

I am so sorry I forgot to push to npm. I just did that. Don't hesitate to bother again if I forgot something else:)

[tonydtran]

Thank you very much, this is your Christmas present to me! Have great holidays with your family :)

[nozer]

:) Thanks a lot and I wish you happy holidays too.

[tonydtran]

Hi Nozer, hope you had a good time for Christmas.

I use quill-image-resize-module (v.3.0.0) to resize uploaded image into Quill. When I save the delta, I have an inline-group like this:

myDelta = {
  ops: [
    0: {
      attributes: { width: "100" },
      insert: { image: "data:image/png;base64,..." }
    },
    1: {
      insert: "my image\n"
    }
  ]
}

No problem until now. But when I try to convert the delta, it seems like I'm loosing the image attribute in the process:

const converter = new DeltaToHTML(myDelta.ops, {});
converter.beforeRender(function (groupType, data) {
  console.log(data);
  // console.log(data):
  // {
  //   ops: [
  //     0: {
  //       attributes: {},
  //       insert: { type: "image", value: "data:image/png;base64,..." }
  //     },
  //     1: {
  //       attributes: {},
  //       insert: { type: "text", value: "my image" }
  //     },
  //     2: {
  //       attributes: {},
  //       insert: { type: "text", value: "\n" }
  //     }
  //   ]
  // }
});
const html = converter.convert();

Any idea? Maybe I'm using quill-delta-to-html in a wring way?

Thanks for your help :)

[nozer]

This converter changes attribute ..., insert: {image|video|formula|text: 'value'}, ... to ...,insert:{type: 'image|video|formula|text', value:'value'},... So you can get your original image attribute value via insert.value

[tonydtran]

Thank you for your quick answer, but I'm sorry I don't understand what you mean (I'm junior, please be patient :)). Can you be more precise?

[nozer]

To get your image value in original data, you would do insert.image; now, you would need to do insert.value when insert.type is image.

[tonydtran]

Yes I get it, but what I don't get is how could I keep the width attribute from the original delta? I did not find the image width in insert.value :(

[tonydtran]

Ok I found a way but I think there is a better to do that:

const converter = new DeltaToHTML(myDelta.ops, {})
converter.beforeRender(function (groupType, data) {
  data.ops.forEach(e => {
     if (e.insert.type === 'image') {
       myDelta.ops.forEach(el => {
         if (el.insert.image && el.insert.image === e.insert.value) {
           e.attributes.width = el.attributes.width
         }
       })
     }
  })
})
html = converter.convert()

[nozer]

Hi again,
You found a bug and I just fixed and pushed it (v0.5.5). width attribute was not sanitized and thus not kept. Now, you can access the width via e.attributes.width without having to re-set it. Thanks for catching that.

[tonydtran]

Thanks a lot for being so reactive!

[nozer]

Welcome