quill-delta-to-html
quill-delta-to-html copied to clipboard
Provide a way to properly apply standard attributes to custom blots
It would be nice to have a way to apply the normal attribute styles (bold, size, etc) to blots.
The example below is a round-about-way to do it for the placeholder plugin:
const surroundHtmlWithQuillAttributesApplied = (html, attributes) => {
const replaceMe = "____replace__me____";
const injectOpsInsert = [{ insert: replaceMe, attributes }];
const converter = new qdthtml.QuillDeltaToHtmlConverter(injectOpsInsert);
const rawHtml = converter.convert();
const injectedHtml = rawHtml.replace(replaceMe, html);
return injectedHtml;
};
const quillDeltaToHtml = deltaOps => {
const cfg = {};
const converter = new qdthtml.QuillDeltaToHtmlConverter(deltaOps, cfg);
converter.renderCustomWith(function (customOp, contextOp) {
const insert = customOp.insert;
if (insert.type === "placeholder") {
let placeHolderText = (
`<span class="ql-placeholder-content" data-id="${insert.value.id}" data-label="${insert.value.label}" spellcheck="false">` +
`<span contenteditable="false">{${insert.value.label}}</span>` +
`</span>`
);
if (customOp.attributes) {
placeHolderText = surroundHtmlWithQuillAttributesApplied(placeHolderText, customOp.attributes);
}
return placeHolderText;
}
});
const html = converter.convert();
return html;
};
It would be nice if there was an inbuilt plugin to do this, basically what my surroundHtmlWithQuillAttributesApplied method does. Even if it just sat on contextOp, something like:
const quillDeltaToHtml = deltaOps => {
const cfg = {};
const converter = new qdthtml.QuillDeltaToHtmlConverter(deltaOps, cfg);
converter.renderCustomWith(function (customOp, contextOp) {
const insert = customOp.insert;
if (insert.type === "placeholder") {
let placeHolderText = (
`<span class="ql-placeholder-content" data-id="${insert.value.id}" data-label="${insert.value.label}" spellcheck="false">` +
`<span contenteditable="false">{${insert.value.label}}</span>` +
`</span>`
);
if (customOp.attributes) {
placeHolderText = contextOp.applyAttributesToHtml(customOp.attributes, placeHolderText);
}
return placeHolderText;
}
});
const html = converter.convert();
return html;
};
+1, must have for custom blots