nozer/quill-delta-to-html

Provide a way to properly apply standard attributes to custom blots

Opened this issue · 1 comments

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