text color and background color is not getting patched when in editing mode

[Virus35]

<quill-editor
        #quillEditor
        [(ngModel)]="text"
        [modules]="quillToolbar"
        [maxLength]="100">
</quill-editor>

quillToolbar: any = {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // Toggle formatting buttons
            [{ header: 1 }, { header: 2 }], // Custom button values for headers
            [{ list: 'ordered' }, { list: 'bullet' }], // List formatting
            [{ script: 'sub' }, { script: 'super' }], // Superscript/subscript
            [{ indent: '-1' }, { indent: '+1' }], // Outdent/indent
            [{ direction: 'rtl' }], // Text direction
            [{ size: ['small', false, 'large', 'huge'] }], // Font size dropdown
            [{ color: [] }, { background: [] }], // Color dropdown
            [{ font: [] }], // Font dropdown
            [{ align: [] }], // Text alignment
            ['clean'], // Remove formatting button
            ['link', 'image'] // Insert link and image buttons
        ]
};
@Input() text: string =  `<blockquote><em style="color: rgb(255, 255, 102);"><u>vishal Rikhi</u></em></blockquote>`;

when i see in Dom, the style gets disappears.

[KillerCodeMonkey]

keep in mind quilljs will not allow everything. it only allows tags/classes and styles it knows.

just checkout my demo repo https://killercodemonkey.github.io/ngx-quill-example/ try to reproduce your "html" with the editor and check how it is formatted. e.g. changing the color of something is using "spans" and so on.

[Virus35]

this is the delta's html produced by the ngx-quill-editor:-

{
    "html": "<p><strong class=\"ql-size-huge\" style=\"color: rgb(102, 163, 224);\"><em><s><u>vishal</u></s></em></strong></p>",
    "delta": {
        "ops": [
            {
                "attributes": {
                    "underline": true,
                    "strike": true,
                    "italic": true,
                    "size": "huge",
                    "color": "#66a3e0",
                    "bold": true
                },
                "insert": "vishal"
            },
            {
                "insert": "\n"
            }
        ]
    }
}, 

When i patch the value again, everything got patched except the color styling and same is the case for background color

[KillerCodeMonkey]

because, i guess your content of the patch is not valid quilljs content. As i said, quilljs is not allowing everything what you can to with html.

Stylings and format classes need to be at the correct dom nodes and so on.

[KillerCodeMonkey]

Just try it out with plain quilljs: https://quilljs.com/playground/snow use the quilljs api to set the content programmatically

ngx-quill is using

const content = quill.clipboard.convert({ html: YOUR_HTML }) quill.setContents(content, 'silent')

you can even just try to log, what quill.clipboard.convert({ html: YOUR_HTML }) does with your html.

[Virus35]

the color gets applied when i apply the color the bgColor gets applied when i apply the bgColor,

but when i patch the value again , the bgcolor and the color gets disappeared, but i apply the color/bgcolor again while editing, again it starts working fine, the issue arises when we patch the value again then the inline stylings gets disappeared.

[KillerCodeMonkey]

i updated my demo repo.

check the "Reactive Forms and patch value" i changed the patched value with something with color and background. you can change the colors and click patch. All previously colors stay applied and the new "patched" is added.

So i see no problem when patching the value with valid quilljs html.

https://killercodemonkey.github.io/ngx-quill-example/ - "Reactive Forms and patch value" - click "patchValue". This uses the current html of the editor and just adds something. nothing is lost or gets removed. SO as i said. if you patch you control with custom html you need to make sure your html is valid html for quilljs.

and please try my approach by using quilljs playground and call quill.clipboard.convert({ html: YOUR_HTML }) with you html you want to patch, so you can check if it is valid quilljs html

[Virus35]

thanks ill check and im using angular 13 and ngx-quill version 16.1.2, your solution remains the same for this as well?

[KillerCodeMonkey]

in general i am not supporting that such old versions.

but in that case your need to use:

https://v1.quilljs.com/playground/ and if i remember it correctly: https://quilljs.com/docs/modules/clipboard/#dangerouslypastehtml

But in general i have to say sorry, because angular support for v13 ended a long time ago so it is for ngx-quill v16