simpo-component-library 3.6.847 → 3.6.848

package/esm2022/lib/styles/text-size.extension.mjs

@@ -8,37 +8,36 @@ export const FontSize = Extension.create({
                 attributes: {
                     fontSize: {
                         default: null,
-                        parseHTML: element => element.style.fontSize,
+                        parseHTML: element => element.style.fontSize || null,
                         renderHTML: attributes => {
                             if (!attributes['fontSize']) {
                                 return {};
                             }
                             return {
-                                style: `font-size:${attributes['fontSize']}`,
+                                style: `font-size: ${attributes['fontSize']}`
                             };
-                        },
-                    },
-                },
-            },
+                        }
+                    }
+                }
+            }
         ];
     },
     addCommands() {
         return {
             setFontSize: (fontSize) => ({ chain }) => {
                 return chain()
-                    .setMark('textStyle', {
-                    fontSize,
-                })
+                    .setMark('textStyle', { fontSize })
                     .run();
             },
             unsetFontSize: () => ({ chain }) => {
                 return chain()
                     .setMark('textStyle', {
-                    fontSize: null,
+                    fontSize: null
                 })
+                    .removeEmptyTextStyle()
                     .run();
-            },
+            }
         };
-    },
+    }
 });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1zaXplLmV4dGVuc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpbXBvLXVpL3NyYy9saWIvc3R5bGVzL3RleHQtc2l6ZS5leHRlbnNpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQVd6QyxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsU0FBUyxDQUFDLE1BQU0sQ0FBQztJQUVyQyxJQUFJLEVBQUUsVUFBVTtJQUVoQixtQkFBbUI7UUFFZixPQUFPO1lBQ0g7Z0JBQ0ksS0FBSyxFQUFFLENBQUMsV0FBVyxDQUFDO2dCQUNwQixVQUFVLEVBQUU7b0JBRVIsUUFBUSxFQUFFO3dCQUVOLE9BQU8sRUFBRSxJQUFJO3dCQUViLFNBQVMsRUFBRSxPQUFPLENBQUMsRUFBRSxDQUNqQixPQUFPLENBQUMsS0FBSyxDQUFDLFFBQVE7d0JBRTFCLFVBQVUsRUFBRSxVQUFVLENBQUMsRUFBRTs0QkFFckIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxVQUFVLENBQUMsRUFBRSxDQUFDO2dDQUMxQixPQUFPLEVBQUUsQ0FBQzs0QkFDZCxDQUFDOzRCQUVELE9BQU87Z0NBQ0gsS0FBSyxFQUNELGFBQWEsVUFBVSxDQUFDLFVBQVUsQ0FBQyxFQUFFOzZCQUM1QyxDQUFDO3dCQUVOLENBQUM7cUJBRUo7aUJBRUo7YUFDSjtTQUNKLENBQUM7SUFFTixDQUFDO0lBRUQsV0FBVztRQUVQLE9BQU87WUFFSCxXQUFXLEVBQ1AsQ0FBQyxRQUFnQixFQUFFLEVBQUUsQ0FDakIsQ0FBQyxFQUFFLEtBQUssRUFBRSxFQUFFLEVBQUU7Z0JBRVYsT0FBTyxLQUFLLEVBQUU7cUJBQ1QsT0FBTyxDQUFDLFdBQVcsRUFBRTtvQkFDbEIsUUFBUTtpQkFDWCxDQUFDO3FCQUNELEdBQUcsRUFBRSxDQUFDO1lBRWYsQ0FBQztZQUVULGFBQWEsRUFDVCxHQUFHLEVBQUUsQ0FDRCxDQUFDLEVBQUUsS0FBSyxFQUFFLEVBQUUsRUFBRTtnQkFFVixPQUFPLEtBQUssRUFBRTtxQkFDVCxPQUFPLENBQUMsV0FBVyxFQUFFO29CQUNsQixRQUFRLEVBQUUsSUFBSTtpQkFDakIsQ0FBQztxQkFDRCxHQUFHLEVBQUUsQ0FBQztZQUVmLENBQUM7U0FFWixDQUFDO0lBRU4sQ0FBQztDQUVKLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEV4dGVuc2lvbiB9IGZyb20gJ0B0aXB0YXAvY29yZSc7XHJcblxyXG5kZWNsYXJlIG1vZHVsZSAnQHRpcHRhcC9jb3JlJyB7XHJcbiAgICBpbnRlcmZhY2UgQ29tbWFuZHM8UmV0dXJuVHlwZT4ge1xyXG4gICAgICAgIGZvbnRTaXplOiB7XHJcbiAgICAgICAgICAgIHNldEZvbnRTaXplOiAoc2l6ZTogc3RyaW5nKSA9PiBSZXR1cm5UeXBlO1xyXG4gICAgICAgICAgICB1bnNldEZvbnRTaXplOiAoKSA9PiBSZXR1cm5UeXBlO1xyXG4gICAgICAgIH07XHJcbiAgICB9XHJcbn1cclxuXHJcbmV4cG9ydCBjb25zdCBGb250U2l6ZSA9IEV4dGVuc2lvbi5jcmVhdGUoe1xyXG5cclxuICAgIG5hbWU6ICdmb250U2l6ZScsXHJcblxyXG4gICAgYWRkR2xvYmFsQXR0cmlidXRlcygpIHtcclxuXHJcbiAgICAgICAgcmV0dXJuIFtcclxuICAgICAgICAgICAge1xyXG4gICAgICAgICAgICAgICAgdHlwZXM6IFsndGV4dFN0eWxlJ10sXHJcbiAgICAgICAgICAgICAgICBhdHRyaWJ1dGVzOiB7XHJcblxyXG4gICAgICAgICAgICAgICAgICAgIGZvbnRTaXplOiB7XHJcblxyXG4gICAgICAgICAgICAgICAgICAgICAgICBkZWZhdWx0OiBudWxsLFxyXG5cclxuICAgICAgICAgICAgICAgICAgICAgICAgcGFyc2VIVE1MOiBlbGVtZW50ID0+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBlbGVtZW50LnN0eWxlLmZvbnRTaXplLFxyXG5cclxuICAgICAgICAgICAgICAgICAgICAgICAgcmVuZGVySFRNTDogYXR0cmlidXRlcyA9PiB7XHJcblxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYgKCFhdHRyaWJ1dGVzWydmb250U2l6ZSddKSB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmV0dXJuIHt9O1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgfVxyXG5cclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJldHVybiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgc3R5bGU6XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGBmb250LXNpemU6JHthdHRyaWJ1dGVzWydmb250U2l6ZSddfWAsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9O1xyXG5cclxuICAgICAgICAgICAgICAgICAgICAgICAgfSxcclxuXHJcbiAgICAgICAgICAgICAgICAgICAgfSxcclxuXHJcbiAgICAgICAgICAgICAgICB9LFxyXG4gICAgICAgICAgICB9LFxyXG4gICAgICAgIF07XHJcblxyXG4gICAgfSxcclxuXHJcbiAgICBhZGRDb21tYW5kcygpIHtcclxuXHJcbiAgICAgICAgcmV0dXJuIHtcclxuXHJcbiAgICAgICAgICAgIHNldEZvbnRTaXplOlxyXG4gICAgICAgICAgICAgICAgKGZvbnRTaXplOiBzdHJpbmcpID0+XHJcbiAgICAgICAgICAgICAgICAgICAgKHsgY2hhaW4gfSkgPT4ge1xyXG5cclxuICAgICAgICAgICAgICAgICAgICAgICAgcmV0dXJuIGNoYWluKClcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIC5zZXRNYXJrKCd0ZXh0U3R5bGUnLCB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZm9udFNpemUsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9KVxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgLnJ1bigpO1xyXG5cclxuICAgICAgICAgICAgICAgICAgICB9LFxyXG5cclxuICAgICAgICAgICAgdW5zZXRGb250U2l6ZTpcclxuICAgICAgICAgICAgICAgICgpID0+XHJcbiAgICAgICAgICAgICAgICAgICAgKHsgY2hhaW4gfSkgPT4ge1xyXG5cclxuICAgICAgICAgICAgICAgICAgICAgICAgcmV0dXJuIGNoYWluKClcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIC5zZXRNYXJrKCd0ZXh0U3R5bGUnLCB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZm9udFNpemU6IG51bGwsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9KVxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgLnJ1bigpO1xyXG5cclxuICAgICAgICAgICAgICAgICAgICB9LFxyXG5cclxuICAgICAgICB9O1xyXG5cclxuICAgIH0sXHJcblxyXG59KTsiXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1zaXplLmV4dGVuc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NpbXBvLXVpL3NyYy9saWIvc3R5bGVzL3RleHQtc2l6ZS5leHRlbnNpb24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGNBQWMsQ0FBQztBQVd6QyxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsU0FBUyxDQUFDLE1BQU0sQ0FBQztJQUVyQyxJQUFJLEVBQUUsVUFBVTtJQUVoQixtQkFBbUI7UUFFZixPQUFPO1lBQ0g7Z0JBQ0ksS0FBSyxFQUFFLENBQUMsV0FBVyxDQUFDO2dCQUNwQixVQUFVLEVBQUU7b0JBRVIsUUFBUSxFQUFFO3dCQUVOLE9BQU8sRUFBRSxJQUFJO3dCQUViLFNBQVMsRUFBRSxPQUFPLENBQUMsRUFBRSxDQUNqQixPQUFPLENBQUMsS0FBSyxDQUFDLFFBQVEsSUFBSSxJQUFJO3dCQUVsQyxVQUFVLEVBQUUsVUFBVSxDQUFDLEVBQUU7NEJBRXJCLElBQUksQ0FBQyxVQUFVLENBQUMsVUFBVSxDQUFDLEVBQUUsQ0FBQztnQ0FDMUIsT0FBTyxFQUFFLENBQUM7NEJBQ2QsQ0FBQzs0QkFFRCxPQUFPO2dDQUNILEtBQUssRUFBRSxjQUFjLFVBQVUsQ0FBQyxVQUFVLENBQUMsRUFBRTs2QkFDaEQsQ0FBQzt3QkFFTixDQUFDO3FCQUVKO2lCQUVKO2FBRUo7U0FFSixDQUFDO0lBRU4sQ0FBQztJQUVELFdBQVc7UUFFUCxPQUFPO1lBRUgsV0FBVyxFQUNQLENBQUMsUUFBZ0IsRUFBRSxFQUFFLENBQ2pCLENBQUMsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFO2dCQUVWLE9BQU8sS0FBSyxFQUFFO3FCQUNULE9BQU8sQ0FBQyxXQUFXLEVBQUUsRUFBRSxRQUFRLEVBQUUsQ0FBQztxQkFDbEMsR0FBRyxFQUFFLENBQUM7WUFFZixDQUFDO1lBRVQsYUFBYSxFQUNULEdBQUcsRUFBRSxDQUNELENBQUMsRUFBRSxLQUFLLEVBQUUsRUFBRSxFQUFFO2dCQUVWLE9BQU8sS0FBSyxFQUFFO3FCQUNULE9BQU8sQ0FBQyxXQUFXLEVBQUU7b0JBQ2xCLFFBQVEsRUFBRSxJQUFJO2lCQUNqQixDQUFDO3FCQUNELG9CQUFvQixFQUFFO3FCQUN0QixHQUFHLEVBQUUsQ0FBQztZQUVmLENBQUM7U0FFWixDQUFDO0lBRU4sQ0FBQztDQUVKLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEV4dGVuc2lvbiB9IGZyb20gJ0B0aXB0YXAvY29yZSc7XHJcblxyXG5kZWNsYXJlIG1vZHVsZSAnQHRpcHRhcC9jb3JlJyB7XHJcbiAgICBpbnRlcmZhY2UgQ29tbWFuZHM8UmV0dXJuVHlwZT4ge1xyXG4gICAgICAgIGZvbnRTaXplOiB7XHJcbiAgICAgICAgICAgIHNldEZvbnRTaXplOiAoZm9udFNpemU6IHN0cmluZykgPT4gUmV0dXJuVHlwZTtcclxuICAgICAgICAgICAgdW5zZXRGb250U2l6ZTogKCkgPT4gUmV0dXJuVHlwZTtcclxuICAgICAgICB9O1xyXG4gICAgfVxyXG59XHJcblxyXG5leHBvcnQgY29uc3QgRm9udFNpemUgPSBFeHRlbnNpb24uY3JlYXRlKHtcclxuXHJcbiAgICBuYW1lOiAnZm9udFNpemUnLFxyXG5cclxuICAgIGFkZEdsb2JhbEF0dHJpYnV0ZXMoKSB7XHJcblxyXG4gICAgICAgIHJldHVybiBbXHJcbiAgICAgICAgICAgIHtcclxuICAgICAgICAgICAgICAgIHR5cGVzOiBbJ3RleHRTdHlsZSddLFxyXG4gICAgICAgICAgICAgICAgYXR0cmlidXRlczoge1xyXG5cclxuICAgICAgICAgICAgICAgICAgICBmb250U2l6ZToge1xyXG5cclxuICAgICAgICAgICAgICAgICAgICAgICAgZGVmYXVsdDogbnVsbCxcclxuXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHBhcnNlSFRNTDogZWxlbWVudCA9PlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxlbWVudC5zdHlsZS5mb250U2l6ZSB8fCBudWxsLFxyXG5cclxuICAgICAgICAgICAgICAgICAgICAgICAgcmVuZGVySFRNTDogYXR0cmlidXRlcyA9PiB7XHJcblxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYgKCFhdHRyaWJ1dGVzWydmb250U2l6ZSddKSB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmV0dXJuIHt9O1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgfVxyXG5cclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJldHVybiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgc3R5bGU6IGBmb250LXNpemU6ICR7YXR0cmlidXRlc1snZm9udFNpemUnXX1gXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9O1xyXG5cclxuICAgICAgICAgICAgICAgICAgICAgICAgfVxyXG5cclxuICAgICAgICAgICAgICAgICAgICB9XHJcblxyXG4gICAgICAgICAgICAgICAgfVxyXG5cclxuICAgICAgICAgICAgfVxyXG5cclxuICAgICAgICBdO1xyXG5cclxuICAgIH0sXHJcblxyXG4gICAgYWRkQ29tbWFuZHMoKSB7XHJcblxyXG4gICAgICAgIHJldHVybiB7XHJcblxyXG4gICAgICAgICAgICBzZXRGb250U2l6ZTpcclxuICAgICAgICAgICAgICAgIChmb250U2l6ZTogc3RyaW5nKSA9PlxyXG4gICAgICAgICAgICAgICAgICAgICh7IGNoYWluIH0pID0+IHtcclxuXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHJldHVybiBjaGFpbigpXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAuc2V0TWFyaygndGV4dFN0eWxlJywgeyBmb250U2l6ZSB9KVxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgLnJ1bigpO1xyXG5cclxuICAgICAgICAgICAgICAgICAgICB9LFxyXG5cclxuICAgICAgICAgICAgdW5zZXRGb250U2l6ZTpcclxuICAgICAgICAgICAgICAgICgpID0+XHJcbiAgICAgICAgICAgICAgICAgICAgKHsgY2hhaW4gfSkgPT4ge1xyXG5cclxuICAgICAgICAgICAgICAgICAgICAgICAgcmV0dXJuIGNoYWluKClcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIC5zZXRNYXJrKCd0ZXh0U3R5bGUnLCB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZm9udFNpemU6IG51bGxcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0pXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAucmVtb3ZlRW1wdHlUZXh0U3R5bGUoKVxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgLnJ1bigpO1xyXG5cclxuICAgICAgICAgICAgICAgICAgICB9XHJcblxyXG4gICAgICAgIH07XHJcblxyXG4gICAgfVxyXG5cclxufSk7Il19

package/fesm2022/simpo-component-library.mjs

@@ -1657,33 +1657,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 const GradientExtension = Extension.create({
-    name: 'gradientExtension',
+    name: 'gradient',
     addGlobalAttributes() {
         return [
             {
                 types: ['textStyle'],
                 attributes: {
-                    class: {
+                    backgroundImage: {
                         default: null,
-                        parseHTML: (element) => element.getAttribute('class'),
-                        renderHTML: (attributes) => {
-                            if (!attributes['class']) {
+                        parseHTML: element => element.style.backgroundImage,
+                        renderHTML: attributes => {
+                            if (!attributes['backgroundImage']) {
                                 return {};
                             }
                             return {
-                                class: attributes['class'],
+                                style: `background-image:${attributes['backgroundImage']};`
                             };
                         },
                     },
-                    style: {
+                    backgroundClip: {
                         default: null,
-                        parseHTML: (element) => element.getAttribute('style'),
-                        renderHTML: (attributes) => {
-                            if (!attributes['style']) {
+                        parseHTML: element => element.style.backgroundClip,
+                        renderHTML: attributes => {
+                            if (!attributes['backgroundClip']) {
                                 return {};
                             }
                             return {
-                                style: attributes['style'],
+                                style: `background-clip:${attributes['backgroundClip']};`
+                            };
+                        },
+                    },
+                    WebkitBackgroundClip: {
+                        default: null,
+                        parseHTML: element => element.style.webkitBackgroundClip,
+                        renderHTML: attributes => {
+                            if (!attributes['WebkitBackgroundClip']) {
+                                return {};
+                            }
+                            return {
+                                style: `-webkit-background-clip:${attributes['WebkitBackgroundClip']};`
+                            };
+                        },
+                    },
+                    WebkitTextFillColor: {
+                        default: null,
+                        parseHTML: element => element.style.webkitTextFillColor,
+                        renderHTML: attributes => {
+                            if (!attributes['WebkitTextFillColor']) {
+                                return {};
+                            }
+                            return {
+                                style: `-webkit-text-fill-color:${attributes['WebkitTextFillColor']};`
                             };
                         },
                     },
@@ -1702,38 +1726,37 @@ const FontSize = Extension.create({
                 attributes: {
                     fontSize: {
                         default: null,
-                        parseHTML: element => element.style.fontSize,
+                        parseHTML: element => element.style.fontSize || null,
                         renderHTML: attributes => {
                             if (!attributes['fontSize']) {
                                 return {};
                             }
                             return {
-                                style: `font-size:${attributes['fontSize']}`,
+                                style: `font-size: ${attributes['fontSize']}`
                             };
-                        },
-                    },
-                },
-            },
+                        }
+                    }
+                }
+            }
         ];
     },
     addCommands() {
         return {
             setFontSize: (fontSize) => ({ chain }) => {
                 return chain()
-                    .setMark('textStyle', {
-                    fontSize,
-                })
+                    .setMark('textStyle', { fontSize })
                     .run();
             },
             unsetFontSize: () => ({ chain }) => {
                 return chain()
                     .setMark('textStyle', {
-                    fontSize: null,
+                    fontSize: null
                 })
+                    .removeEmptyTextStyle()
                     .run();
-            },
+            }
         };
-    },
+    }
 });
 
 class ContenteditableValueAccessor {
@@ -1884,14 +1907,13 @@ class TextEditorComponent {
             this.editor.state.selection;
     }
     restoreSelection() {
-        if (!this.savedSelection)
+        if (!this.savedSelection) {
             return;
+        }
         this.editor
             .chain()
-            .setTextSelection({
-            from: this.savedSelection.from,
-            to: this.savedSelection.to,
-        })
+            .focus()
+            .setTextSelection(this.savedSelection)
             .run();
     }
     switchToSolid(event) {
@@ -1923,20 +1945,13 @@ class TextEditorComponent {
     }
     handleSelection() {
         const { from, to } = this.editor.state.selection;
-        // no selection
+        // hide if nothing selected
         if (from === to) {
             if (!this.isColorPickerOpen) {
                 this.showToolbar = false;
             }
             return;
         }
-        // get selected text
-        const selectedText = this.editor.state.doc.textBetween(from, to, ' ').trim();
-        // hide toolbar if only spaces/newlines selected
-        if (!selectedText.length) {
-            this.showToolbar = false;
-            return;
-        }
         const selection = window.getSelection();
         if (!selection || selection.rangeCount === 0) {
             this.showToolbar = false;
@@ -1948,14 +1963,18 @@ class TextEditorComponent {
             .nativeElement
             .getBoundingClientRect();
         this.showToolbar = true;
+        // toolbar actual width
         const toolbarWidth = 700;
+        // calculate centered position
         let left = rect.left -
             editorRect.left +
             (rect.width / 2) -
             (toolbarWidth / 2);
+        // prevent left overflow
         if (left < 10) {
             left = 10;
         }
+        // prevent right overflow
         const maxLeft = editorRect.width -
             toolbarWidth -
             10;
@@ -1963,6 +1982,7 @@ class TextEditorComponent {
             left = maxLeft;
         }
         this.toolbarX = left;
+        // exact below selection
         this.toolbarY =
             rect.bottom -
                 editorRect.top +
@@ -2010,6 +2030,52 @@ class TextEditorComponent {
             .setTextAlign(alignment)
             .run();
     }
+    changeColor() {
+        this.restoreSelection();
+        const { from, to } = this.editor.state.selection;
+        if (from === to)
+            return;
+        const existingStyles = this.editor.getAttributes('textStyle');
+        this.editor
+            .chain()
+            .focus()
+            .setTextSelection({ from, to })
+            .setMark('textStyle', {
+            ...existingStyles,
+            color: this.selectedColor,
+            backgroundImage: null,
+            WebkitBackgroundClip: null,
+            WebkitTextFillColor: null
+        })
+            .run();
+    }
+    applyGradient() {
+        this.restoreSelection();
+        const { from, to } = this.editor.state.selection;
+        if (from === to)
+            return;
+        const existingStyles = this.editor.getAttributes('textStyle');
+        const gradient = `
+    linear-gradient(
+      to right,
+      ${this.primaryColor},
+      ${this.secondaryColor}
+    )
+  `;
+        this.editor
+            .chain()
+            .focus()
+            .setTextSelection({ from, to })
+            .setMark('textStyle', {
+            ...existingStyles,
+            backgroundImage: gradient,
+            backgroundClip: 'text',
+            WebkitBackgroundClip: 'text',
+            color: 'transparent',
+            WebkitTextFillColor: 'transparent'
+        })
+            .run();
+    }
     onMouseDown() {
         setTimeout(() => {
             if (!this.editor)
@@ -2046,61 +2112,22 @@ class TextEditorComponent {
     }
     changeFontSize(fontSize) {
         this.selectedFontSize = fontSize;
-        this.restoreSelection();
-        if (!fontSize) {
-            this.editor
-                .chain()
-                .focus()
-                .unsetFontSize()
-                .run();
-            return;
-        }
-        this.editor
-            .chain()
-            .focus()
-            .setFontSize(fontSize)
-            .run();
-    } /*  */
-    changeColor() {
-        this.restoreSelection();
-        const { from, to } = this.editor.state.selection;
-        if (from === to)
-            return;
-        this.editor
-            .chain()
-            .focus()
-            .setColor(this.selectedColor)
-            .run();
-    }
-    applyGradient() {
-        this.restoreSelection();
         const { from, to } = this.editor.state.selection;
-        if (from === to)
+        if (from === to) {
             return;
-        const gradient = `
-    linear-gradient(
-      to right,
-      ${this.primaryColor},
-      ${this.secondaryColor}
-    )
-  `;
+        }
         this.editor
             .chain()
             .focus()
+            .setTextSelection({ from, to })
+            // merges with existing styles
             .setMark('textStyle', {
-            style: `
-        background:${gradient};
-        background-clip:text;
-        -webkit-background-clip:text;
-        color:transparent;
-        -webkit-text-fill-color:transparent;
-        display:inline;
-      `
+            fontSize
         })
             .run();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable", sectionId: "sectionId", label: "label", type: "type" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onMouseDown()" } }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorContainer"], descendants: true }], ngImport: i0, template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\r\n\r\n  <!-- FLOATING TOOLBAR -->\r\n  <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n    <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-grip-vertical\">\r\n        <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n      </svg>\r\n    </button>\r\n    <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n      <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n        <mat-option value=\"\">\r\n          Default\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n          14\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n          16\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n          20\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n          24\r\n        </mat-option>\r\n        <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n          32\r\n        </mat-option>\r\n        <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n          48\r\n        </mat-option>\r\n      </mat-select>\r\n\r\n    </mat-form-field>\r\n    <!-- BOLD -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-bold\">\r\n        <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ITALIC -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-italic\">\r\n        <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n        <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n        <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- UNDERLINE -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-underline\">\r\n        <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n        <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN LEFT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-left\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN CENTER -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-center\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN RIGHT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-right\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ORDERED LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list-ordered\">\r\n        <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <path d=\"M4 6h1v4\" />\r\n        <path d=\"M4 10h2\" />\r\n        <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\r\n      </svg>\r\n    </button>\r\n    <!-- BULLET LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list\">\r\n        <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- SOLID / GRADIENT -->\r\n    <!-- SOLID / GRADIENT -->\r\n    <div class=\"colorType\">\r\n\r\n      <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\r\n        Solid\r\n      </button>\r\n\r\n      <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\r\n        Gradient\r\n      </button>\r\n\r\n    </div>\r\n\r\n    <!-- SOLID COLOR -->\r\n    <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n\r\n      <mat-icon>format_color_text</mat-icon>\r\n\r\n      <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\r\n        (input)=\"changeColor()\">\r\n\r\n    </button>\r\n\r\n    <!-- GRADIENT -->\r\n    <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n      <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n      <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- TIPTAP EDITOR -->\r\n  <div #editorContainer class=\"editable-text\">\r\n  </div>\r\n\r\n</div>\r\n<ng-template #viewMode>\r\n  <div class=\"read-only-text\" [innerHTML]=\"value\">\r\n  </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{min-height:120px;cursor:text;width:100%}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;padding:5px 10px;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i12.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextEditorComponent, isStandalone: true, selector: "simpo-text-editor", inputs: { value: "value", editable: "editable", sectionId: "sectionId", label: "label", type: "type" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onMouseDown()" } }, viewQueries: [{ propertyName: "editorElement", first: true, predicate: ["editorContainer"], descendants: true }], ngImport: i0, template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\r\n\r\n  <!-- FLOATING TOOLBAR -->\r\n  <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n    <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-grip-vertical\">\r\n        <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n      </svg>\r\n    </button>\r\n    <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n      <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n        <mat-option value=\"\">\r\n          Default\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n          14\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n          16\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n          20\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n          24\r\n        </mat-option>\r\n        <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n          32\r\n        </mat-option>\r\n        <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n          48\r\n        </mat-option>\r\n      </mat-select>\r\n\r\n    </mat-form-field>\r\n    <!-- BOLD -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-bold\">\r\n        <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ITALIC -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-italic\">\r\n        <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n        <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n        <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- UNDERLINE -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-underline\">\r\n        <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n        <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN LEFT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-left\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN CENTER -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-center\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN RIGHT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-right\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ORDERED LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list-ordered\">\r\n        <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <path d=\"M4 6h1v4\" />\r\n        <path d=\"M4 10h2\" />\r\n        <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\r\n      </svg>\r\n    </button>\r\n    <!-- BULLET LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list\">\r\n        <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- SOLID / GRADIENT -->\r\n    <!-- SOLID / GRADIENT -->\r\n    <div class=\"colorType\">\r\n\r\n      <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\r\n        Solid\r\n      </button>\r\n\r\n      <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\r\n        Gradient\r\n      </button>\r\n\r\n    </div>\r\n\r\n    <!-- SOLID COLOR -->\r\n    <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n\r\n      <mat-icon>format_color_text</mat-icon>\r\n\r\n      <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\r\n        (input)=\"changeColor()\">\r\n\r\n    </button>\r\n\r\n    <!-- GRADIENT -->\r\n    <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n      <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n      <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- TIPTAP EDITOR -->\r\n  <div #editorContainer class=\"editable-text\">\r\n  </div>\r\n\r\n</div>\r\n<ng-template #viewMode>\r\n  <div class=\"read-only-text\" [innerHTML]=\"value\">\r\n  </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{min-height:120px;cursor:text;width:100%}.editable-text ::ng-deep p{margin-bottom:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;padding:5px 10px;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i12.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextEditorComponent, decorators: [{
             type: Component,
@@ -2112,7 +2139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatSelectModule,
                         MatFormFieldModule,
                         ContenteditableValueAccessor
-                    ], template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\r\n\r\n  <!-- FLOATING TOOLBAR -->\r\n  <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n    <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-grip-vertical\">\r\n        <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n      </svg>\r\n    </button>\r\n    <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n      <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n        <mat-option value=\"\">\r\n          Default\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n          14\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n          16\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n          20\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n          24\r\n        </mat-option>\r\n        <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n          32\r\n        </mat-option>\r\n        <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n          48\r\n        </mat-option>\r\n      </mat-select>\r\n\r\n    </mat-form-field>\r\n    <!-- BOLD -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-bold\">\r\n        <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ITALIC -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-italic\">\r\n        <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n        <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n        <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- UNDERLINE -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-underline\">\r\n        <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n        <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN LEFT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-left\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN CENTER -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-center\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN RIGHT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-right\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ORDERED LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list-ordered\">\r\n        <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <path d=\"M4 6h1v4\" />\r\n        <path d=\"M4 10h2\" />\r\n        <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\r\n      </svg>\r\n    </button>\r\n    <!-- BULLET LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list\">\r\n        <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- SOLID / GRADIENT -->\r\n    <!-- SOLID / GRADIENT -->\r\n    <div class=\"colorType\">\r\n\r\n      <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\r\n        Solid\r\n      </button>\r\n\r\n      <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\r\n        Gradient\r\n      </button>\r\n\r\n    </div>\r\n\r\n    <!-- SOLID COLOR -->\r\n    <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n\r\n      <mat-icon>format_color_text</mat-icon>\r\n\r\n      <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\r\n        (input)=\"changeColor()\">\r\n\r\n    </button>\r\n\r\n    <!-- GRADIENT -->\r\n    <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n      <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n      <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- TIPTAP EDITOR -->\r\n  <div #editorContainer class=\"editable-text\">\r\n  </div>\r\n\r\n</div>\r\n<ng-template #viewMode>\r\n  <div class=\"read-only-text\" [innerHTML]=\"value\">\r\n  </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{min-height:120px;cursor:text;width:100%}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;padding:5px 10px;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}\n"] }]
+                    ], template: "<!-- text-editor.component.html -->\r\n\r\n<div class=\"editor-container\" *ngIf=\"editable; else viewMode\">\r\n\r\n  <!-- FLOATING TOOLBAR -->\r\n  <div class=\"toolbar\" *ngIf=\"showToolbar\" [style.top.px]=\"toolbarY\" [style.left.px]=\"toolbarX\" cdkDrag>\r\n    <button class=\"tool drag-handle w-auto\" cdkDragHandle>\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-grip-vertical\">\r\n        <circle cx=\"9\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"9\" cy=\"19\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"12\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"5\" r=\"1\" />\r\n        <circle cx=\"15\" cy=\"19\" r=\"1\" />\r\n      </svg>\r\n    </button>\r\n    <mat-form-field appearance=\"outline\" class=\"font-size-field\">\r\n\r\n      <mat-select [value]=\"selectedFontSize\" (selectionChange)=\"changeFontSize($event.value)\" disableOptionCentering>\r\n\r\n        <mat-option value=\"\">\r\n          Default\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1rem)\">\r\n          14\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(0.75rem, 2vw, 1.25rem)\">\r\n          16\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1rem, 3vw, 1.5rem)\">\r\n          20\r\n        </mat-option>\r\n\r\n        <mat-option value=\"clamp(1.25rem, 4vw, 2rem)\">\r\n          24\r\n        </mat-option>\r\n        <mat-option value=\"clamp(2rem, 5vw, 3rem)\">\r\n          32\r\n        </mat-option>\r\n        <mat-option value=\"clamp(3.1rem, 7vw, 4.5rem)\">\r\n          48\r\n        </mat-option>\r\n      </mat-select>\r\n\r\n    </mat-form-field>\r\n    <!-- BOLD -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('bold')\" (click)=\"toggleBold()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-bold\">\r\n        <path d=\"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ITALIC -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('italic')\" (click)=\"toggleItalic()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-italic\">\r\n        <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\" />\r\n        <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\" />\r\n        <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- UNDERLINE -->\r\n    <button class=\"tool w-auto\" [class.selectedTool]=\"editor?.isActive('underline')\" (click)=\"toggleUnderline()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-underline\">\r\n        <path d=\"M6 4v6a6 6 0 0 0 12 0V4\" />\r\n        <line x1=\"4\" x2=\"20\" y1=\"20\" y2=\"20\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN LEFT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('left')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-left\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"15\" x2=\"3\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"17\" x2=\"3\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN CENTER -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('center')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-center\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"17\" x2=\"7\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"19\" x2=\"5\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ALIGN RIGHT -->\r\n    <button class=\"tool w-auto\" (click)=\"setAlign('right')\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-align-right\">\r\n        <line x1=\"21\" x2=\"3\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"21\" x2=\"7\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- ORDERED LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleOrderedList()\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list-ordered\">\r\n        <line x1=\"10\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"10\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <path d=\"M4 6h1v4\" />\r\n        <path d=\"M4 10h2\" />\r\n        <path d=\"M6 18H4c0-1 2-2 2-3s-1-1.5-2-1\" />\r\n      </svg>\r\n    </button>\r\n    <!-- BULLET LIST -->\r\n    <button class=\"tool w-auto\" (click)=\"toggleBulletList()\">\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"lucide lucide-list\">\r\n        <line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\" />\r\n        <line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\" />\r\n      </svg>\r\n    </button>\r\n\r\n    <!-- SOLID / GRADIENT -->\r\n    <!-- SOLID / GRADIENT -->\r\n    <div class=\"colorType\">\r\n\r\n      <button class=\"solid w-auto\" [class.solidColorSelected]=\"selectedColorType === 'SOLID'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToSolid($event)\">\r\n        Solid\r\n      </button>\r\n\r\n      <button class=\"gradient w-auto\" [class.gradientColorSelected]=\"selectedColorType === 'GRADIENT'\"\r\n        (mousedown)=\"$event.preventDefault()\" (click)=\"switchToGradient($event)\">\r\n        Gradient\r\n      </button>\r\n\r\n    </div>\r\n\r\n    <!-- SOLID COLOR -->\r\n    <button class=\"tool color-picker-btn w-auto\" *ngIf=\"selectedColorType === 'SOLID'\">\r\n\r\n      <mat-icon>format_color_text</mat-icon>\r\n\r\n      <input type=\"color\" class=\"hidden-color-picker\" [(ngModel)]=\"selectedColor\" (click)=\"openColorPicker()\"\r\n        (input)=\"changeColor()\">\r\n\r\n    </button>\r\n\r\n    <!-- GRADIENT -->\r\n    <div class=\"gradient-picker\" *ngIf=\"selectedColorType === 'GRADIENT'\">\r\n      <input type=\"color\" [(ngModel)]=\"primaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n      <input type=\"color\" [(ngModel)]=\"secondaryColor\" (click)=\"openColorPicker()\" (input)=\"applyGradient()\" />\r\n\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- TIPTAP EDITOR -->\r\n  <div #editorContainer class=\"editable-text\">\r\n  </div>\r\n\r\n</div>\r\n<ng-template #viewMode>\r\n  <div class=\"read-only-text\" [innerHTML]=\"value\">\r\n  </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.editor-container{position:relative;width:100%}.editable-text{min-height:120px;cursor:text;width:100%}.editable-text ::ng-deep p{margin-bottom:0!important}::ng-deep .ProseMirror ol,::ng-deep .ProseMirror ul{padding-left:2rem;margin-left:0;list-style-position:inside}::ng-deep .ProseMirror li{text-align:inherit;margin-bottom:5px}::ng-deep .ProseMirror li p{display:inline}.ProseMirror{outline:none;min-height:120px;padding:5px}.ProseMirror p{margin:0}.toolbar{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;background:#fff;padding:8px 14px;border-radius:22px;z-index:100000;box-shadow:#00000029 0 1px 4px}.tool{background:none;border:none;padding:5px 8px;cursor:pointer;display:flex;align-items:center}.tool:hover{background:#eee;border-radius:5px}.selectedTool{background:var(--primary-bg-color)!important;color:#fff;border-radius:5px}.color-picker-btn{position:relative}.color-picker-btn mat-icon{font-size:22px!important}.hidden-color-picker{position:absolute;inset:0;opacity:0;cursor:pointer}.gradient-text{background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;display:inline-block}.colorType{display:flex;border:1px solid #E9E9E9;border-radius:9px;overflow:hidden}.colorType button{font-size:12px!important;padding:7px 9px!important;border:none;background:#fff;padding:5px 10px;cursor:pointer}.solid{border-right:1px solid #E9E9E9!important}.solidColorSelected,.gradientColorSelected{background:var(--primary-bg-color)!important;color:#fff}.gradient-picker{display:flex;gap:5px}.gradient-picker input{width:32px;height:32px;border:none;padding:0;cursor:pointer}.white-space-nowrap{white-space:nowrap}.font-size-field{width:120px;border:1px solid lightgrey;border-radius:10px}::ng-deep .font-size-field .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .font-size-field .mdc-notched-outline{display:none}::ng-deep .font-size-field .mat-mdc-text-field-wrapper{background:transparent!important;padding-left:8px!important;padding-right:8px!important;height:36px!important}::ng-deep .font-size-field .mat-mdc-select-value{font-size:14px;font-weight:600}::ng-deep .mat-mdc-select-panel{border-radius:12px!important}@media screen and (max-width: 475px){.toolbar{max-width:95%;flex-wrap:wrap;row-gap:10px}}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], valueChange: [{