Completely ignores style attribute

[sergey-shablenko]

I have following delta, image has style attribute which gets completely ignored when I try to convert to html. I have enabled inline style, did not help. How to solve?

{"ops":[{"insert":"This is the "},{"attributes":{"bold":true},"insert":"VERY F"},{"attributes":{"style":"display: block; margin: auto;"},"insert":{"image":"data:image/png;base64,INSERT_ANY_IMAGE_HERE"}},{"attributes":{"bold":true},"insert":"IRST"},{"insert":" test of help text\n\n\n\n"}]}

[volser]

quill delta does not have such attribute, but you can implement own handler using renderCustomWith

[wceolin]

Hi @volser. Do you have an example of how to use renderCustomWith to get this style attribute?

I'm using quill-blot-formatter to allow image resizing/alignment. It adds a style attribute to my Delta:

The width attribute works fine but the style one is ignored when using the converter:

I've tried using the renderCustomWith example mentioned in the docs, but it doesn't seem to be called.

converter.renderCustomWith(function(customOp, contextOp) {
  console.log('called'); // never called
  return 'Unmanaged custom blot!';
});

[tarkh]

Same issue here! I've implemented custom styling for images in Quill. So deltas looks like

"attributes": {
    "height": "274.54809766973534",
    "width": "403",
    "style": "display: inline; float: left; margin: 0px 1em 1em 0px;"
},
"insert": {
    "image": "/upload/news/img/1606957984882-nym50m.jpg"
}

I've tried to implement renderCustomWith, but it did not trigger on image... Please, could you point me any way to solve this?

[tarkh]

Ok, for those who facing same problem, I've managed this hack to pass through style to image:

// Quill data object
const quillData = {
    "ops": [
        ...
    ]
};
// Alter image op in quillData.ops
for(let op in quillData.ops) {
    // If we have image op
    if(quillData.ops[op].insert.image) {
        // Set it as custom op and copy original data
        quillData.ops[op].insert.customImage = quillData.ops[op].insert.image;
        // Delete original image op
        delete quillData.ops[op].insert.image;
    }
}
// Init converter
const converter = new QuillDeltaToHtmlConverter(quillData.ops);
// Custom image style tag processing
converter.renderCustomWith(function(customOp, contextOp){
    if(customOp.insert.type === 'customImage') {
        return `<img src="${customOp.insert.value}"
                     width="${customOp.attributes.width}"
                     height="${customOp.attributes.height}"
                     style="${customOp.attributes.style}">`;
    } else {
        return 'Unmanaged custom blot!';
    }
});
// Convert
resultHTML = converter.convert();

[Benny739]

Had the same problem and found the thread. The most simple solution:

const converter = new QuillDeltaToHtmlConverter(deltaOps, {
        customTagAttributes: (op) => {
          if (op.insert.type === 'image') {
            return {
              style: op.attributes.style,
            };
          }
        },
      });

[zoujiuming]

ignores customStyle attribute use in Quill , but [ op.insert.type ] was same 'text' ? then you can:

const converter = new QuillDeltaToHtmlConverter(deltaOps, {
        inlineStyles: true,
        customCssStyles: op => {
          if (op.attributes.lineHeight) {
            return "line-height" + ":" + op.attributes.lineHeight;
          }
        }
      })