Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide a way to properly apply standard attributes to custom blots #92

Open
Jezternz opened this issue Sep 10, 2020 · 1 comment
Open

Comments

@Jezternz
Copy link

Jezternz commented Sep 10, 2020

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;
};
@f1nality
Copy link

f1nality commented Jan 9, 2023

+1, must have for custom blots

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants