@ostendis/grapesjs-preset-ostendis-adv 1.3.3 → 1.3.5

package/dist/grapesjs-preset-ostendis-adv.min.js

@@ -22566,7 +22566,7 @@ var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _argume
                                 'style': 'padding: 0.2rem 0; margin-left: 2em; line-height: 1.4em;'
                             });
                             listItems.forEach(itemContent => {
-                                const liHtml = `<li class="ulistitem" style="text-align: left;"><span class="fa-li" style="left: -2em; width: 2em;"><i class="fas fa-circle" style="font-size: 0.4em; line-height: inherit; display: block;"></i></span><p style="margin: 0; padding: 0; text-align: left;">${itemContent}</p></li>`;
+                                const liHtml = `<li class="ulistitem" style="text-align: left;"><span class="fa-li" style="left: -2em; width: 2em;"><i class="fas fa-circle" style="font-size: 0.4em; line-height: inherit; display: block;"></i></span><div>${itemContent}</div></li>`;
                                 selected.append(liHtml);
                             });
                             modal.close();
@@ -22608,18 +22608,18 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((editor, opts) => {
     const { DomComponents } = editor;
     // Add ostendis block trait to video components
-    var dType = DomComponents.getType("video");
+    var dType = DomComponents.getType('video');
     var dModel = dType === null || dType === void 0 ? void 0 : dType.model;
     var dView = dType === null || dType === void 0 ? void 0 : dType.view;
-    const yt = "yt";
-    const vi = "vi";
-    const ytnc = "ytnc";
-    DomComponents.addType("video", {
+    const yt = 'yt';
+    const vi = 'vi';
+    const ytnc = 'ytnc';
+    DomComponents.addType('video', {
         model: dModel.extend({
             updateTraits() {
                 const { em } = this;
-                const prov = this.get("provider");
-                let tagName = "iframe";
+                const prov = this.get('provider');
+                let tagName = 'iframe';
                 let traits;
                 switch (prov) {
                     case yt:
@@ -22630,173 +22630,197 @@ __webpack_require__.r(__webpack_exports__);
                         traits = this.getVimeoTraits();
                         break;
                     default:
-                        tagName = "video";
+                        tagName = 'video';
                         traits = this.getSourceTraits();
                 }
                 traits.push({
-                    type: "select",
-                    label: "Ostendis Blocks",
-                    name: "data-ost-type",
+                    type: 'select',
+                    label: 'Ostendis Blocks',
+                    name: 'data-ost-type',
                     options: [
-                        { id: "", name: opts.t9n.traitOstNone },
-                        { id: "videoURL", name: opts.t9n.traitOstVideoURL },
+                        { id: '', name: opts.t9n.traitOstNone },
+                        { id: 'videoURL', name: opts.t9n.traitOstVideoURL },
                     ],
                 });
                 this.set({ tagName }, { silent: true }); // avoid break in view
                 this.set({ traits });
-                em.get("ready") && em.trigger("component:toggled");
+                em.get('ready') && em.trigger('component:toggled');
             },
         }),
         view: dView,
     });
     // Scale the new range
-    DomComponents.addType("scale", {
+    DomComponents.addType('scale', {
         isComponent: (el) => {
-            return (el.tagName === "DIV" &&
-                (el.getAttribute("data-scale") === "true" ||
-                    el.classList.contains("scale")));
+            return (el.tagName === 'DIV' &&
+                (el.getAttribute('data-scale') === 'true' ||
+                    el.classList.contains('scale')));
         },
         model: {
             defaults: {
-                tagName: "div",
+                tagName: 'div',
                 attributes: {
-                    "data-scale": "true",
-                    "data-percent": "66",
-                    "data-fcolor": "#3b5998",
-                    "data-bgcolor": "#CCCCCC",
-                    "aria-label": "66 %",
-                    role: "img",
+                    'data-scale': 'true',
+                    'data-percent': '66',
+                    'data-fcolor': '#3b5998',
+                    'data-bgcolor': '#CCCCCC',
+                    'aria-label': '66 %',
+                    role: 'img',
                 },
                 style: {
-                    "box-sizing": "border-box",
-                    padding: "0",
-                    height: "20px",
-                    "max-width": "100%",
-                    border: "0px solid #666666",
-                    background: "linear-gradient(to right, #3b5998 66%, #CCCCCC 66%)",
+                    'box-sizing': 'border-box',
+                    'height': '20px',
+                    'max-width': '100%',
+                    'background': 'linear-gradient(to right, #3b5998 66%, #CCCCCC 66%)',
                 },
                 traits: [
+                    'id',
                     {
-                        name: "percent",
-                        type: "number",
+                        name: 'percent',
+                        type: 'number',
                         min: 0,
                         max: 100,
                         label: opts.t9n.labelScalePercent,
                         changeProp: true,
                     },
                     {
-                        name: "fcolor",
-                        type: "color",
+                        name: 'fcolor',
+                        type: 'color',
                         label: opts.t9n.labelScaleBarColor,
-                        placeholder: "#222222",
+                        placeholder: '#222222',
                         changeProp: true,
                     },
                     {
-                        name: "bgcolor",
-                        type: "color",
+                        name: 'bgcolor',
+                        type: 'color',
                         label: opts.t9n.labelScaleBgColor,
-                        placeholder: "#cccccc",
+                        placeholder: '#cccccc',
                         changeProp: true,
                     },
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeHideInSimpleHtmlTrait)(opts),
                 ],
             },
             init() {
-                var _a;
                 const attr = this.getAttributes();
-                const el = (_a = this.view) === null || _a === void 0 ? void 0 : _a.el;
-                let p = parseInt(attr["data-percent"]);
-                let f = attr["data-fcolor"];
-                let b = attr["data-bgcolor"];
+                let p = parseInt(attr['data-percent']);
+                let f = attr['data-fcolor'];
+                let b = attr['data-bgcolor'];
                 if (isNaN(p))
                     p = 66;
                 if (!f)
-                    f = "#3b5998";
+                    f = '#3b5998';
                 if (!b)
-                    b = "#CCCCCC";
-                this.set("percent", Math.max(0, Math.min(100, p)));
-                this.set("bgcolor", b);
-                this.set("fcolor", f);
-                this.on("change:percent", this.updateScale);
-                this.on("change:bgcolor", this.updateScale);
-                this.on("change:fcolor", this.updateScale);
+                    b = '#CCCCCC';
+                p = Math.max(0, Math.min(100, p));
+                this.set('percent', p, { silent: true });
+                this.set('bgcolor', b, { silent: true });
+                this.set('fcolor', f, { silent: true });
+                // Clean up stale background properties from saved HTML
+                this.cleanupBackgroundStyles();
+                const update = () => this.updateScale();
+                this.on('change:percent', update);
+                this.on('change:bgcolor', update);
+                this.on('change:fcolor', update);
+            },
+            onRender() {
+                this.updateScale();
+            },
+            cleanupBackgroundStyles() {
+                const styles = this.getStyle() || {};
+                // Remove stale background-image that conflicts with gradient
+                delete styles['background-image'];
+                delete styles['background-position-x'];
+                delete styles['background-position-y'];
+                delete styles['background-size'];
+                delete styles['background-repeat'];
+                delete styles['background-attachment'];
+                delete styles['background-origin'];
+                delete styles['background-clip'];
+                delete styles['background-color'];
+                this.setStyle(styles, { silent: true });
             },
             updateScale() {
-                let p = parseInt(this.get("percent"));
-                const f = this.get("fcolor") || "#3b5998";
-                const b = this.get("bgcolor") || "#CCCCCC";
-                if (isNaN(p))
-                    p = 0;
-                p = Math.max(0, Math.min(100, p));
-                this.set("attributes", {
-                    "data-scale": "true",
-                    "data-percent": p,
-                    "data-fcolor": f,
-                    "data-bgcolor": b,
-                    "aria-label": `${p} %`,
-                });
-                this.addStyle({
-                    background: `linear-gradient(to right, ${f} ${p}%, ${b} ${p}%)`,
-                });
+                try {
+                    let p = parseInt(this.get('percent'));
+                    const f = this.get('fcolor') || '#3b5998';
+                    const b = this.get('bgcolor') || '#CCCCCC';
+                    if (isNaN(p))
+                        p = 0;
+                    p = Math.max(0, Math.min(100, p));
+                    this.setAttributes({
+                        'data-scale': 'true',
+                        'data-percent': p.toString(),
+                        'data-fcolor': f,
+                        'data-bgcolor': b,
+                        'aria-label': `${p} %`,
+                    }, { silent: true });
+                    const styles = this.getStyle() || {};
+                    // Apply gradient with validated colors
+                    styles['background'] = `linear-gradient(to right, ${f} ${p}%, ${b} ${p}%)`;
+                    this.setStyle(styles);
+                }
+                catch (error) {
+                    console.warn('Scale component update failed:', error);
+                }
             },
         },
     });
     // INPUT
-    DomComponents.addType("range", {
-        isComponent: (el) => el.tagName == "INPUT",
+    DomComponents.addType('range', {
+        isComponent: (el) => el.tagName == 'INPUT',
         model: {
             defaults: {
-                tagName: "input",
+                tagName: 'input',
                 droppable: true,
                 highlightable: true,
                 traits: [_consts__WEBPACK_IMPORTED_MODULE_0__.nameTrait, _consts__WEBPACK_IMPORTED_MODULE_0__.valueTrait],
-                attributes: { type: "range", disabled: true },
+                attributes: { type: 'range', disabled: true },
             },
         },
-        extendFnView: ["updateAttributes"],
+        extendFnView: ['updateAttributes'],
         view: {
             updateAttributes() {
-                this.el.setAttribute("autocomplete", "on");
+                this.el.setAttribute('autocomplete', 'on');
             },
         },
     });
     // Unsorted list item component
-    DomComponents.addType("ulistitem", {
+    DomComponents.addType('ulistitem', {
         isComponent: (el) => {
-            if (el.tagName === "LI" && el.classList.contains("ulistitem")) {
-                return { type: "ulistitem" };
+            if (el.tagName === 'LI' && el.classList.contains('ulistitem')) {
+                return { type: 'ulistitem' };
             }
         },
         model: {
             defaults: {
-                tagName: "li",
-                draggable: "ul",
-                attributes: { class: "ulistitem" },
-                style: { "text-align": "left" },
+                tagName: 'li',
+                draggable: 'ul',
+                attributes: { class: 'ulistitem' },
+                style: { 'text-align': 'left' },
                 components: _consts__WEBPACK_IMPORTED_MODULE_0__.uListItemContent,
-                traits: ["id", "title", (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeTextTrait)(opts)],
+                traits: ['id', 'title', (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeTextTrait)(opts)],
             },
         },
     });
     // Unsorted list component with fontawesome
-    DomComponents.addType("ulist", {
+    DomComponents.addType('ulist', {
         isComponent: (el) => {
-            if (el.tagName === "UL" && el.classList.contains("ulist")) {
-                return { type: "ulist" };
+            if (el.tagName === 'UL' && el.classList.contains('ulist')) {
+                return { type: 'ulist' };
             }
         },
         model: {
             defaults: {
-                tagName: "ul",
-                attributes: { class: "ulist fa-ul" },
+                tagName: 'ul',
+                attributes: { class: 'ulist fa-ul' },
                 style: {
-                    padding: "0.2em 0",
-                    "margin-left": "2em",
-                    "line-height": "1.4em",
+                    padding: '0.2em 0',
+                    'margin-left': '2em',
+                    'line-height': '1.4em',
                 },
                 components: [_consts__WEBPACK_IMPORTED_MODULE_0__.ulListItem, _consts__WEBPACK_IMPORTED_MODULE_0__.ulListItem, _consts__WEBPACK_IMPORTED_MODULE_0__.ulListItem],
                 traits: [
-                    "id",
+                    'id',
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeTextTrait)(opts),
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeHideInSimpleHtmlTrait)(opts),
                 ],
@@ -22804,19 +22828,19 @@ __webpack_require__.r(__webpack_exports__);
         },
     });
     // Header component
-    DomComponents.addType("header", {
+    DomComponents.addType('header', {
         isComponent: (el) => {
-            const headings = ["h1", "h2", "h3", "h4", "h5", "h6"];
+            const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
             if (el.tagName && headings.includes(el.tagName.toLowerCase())) {
-                return { type: "header" };
+                return { type: 'header' };
             }
         },
-        extend: "text",
+        extend: 'text',
         model: {
             defaults: {
-                tagName: "h1", //Default
+                tagName: 'h1', //Default
                 traits: [
-                    "id",
+                    'id',
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.headerTrait)(opts),
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeTextTrait)(opts),
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeHideInSimpleHtmlTrait)(opts),
@@ -22825,36 +22849,36 @@ __webpack_require__.r(__webpack_exports__);
         },
     });
     // Icon component
-    DomComponents.addType("icon", {
+    DomComponents.addType('icon', {
         isComponent: (el) => {
             var classNames = [
-                "fa",
-                "fas",
-                "far",
-                "fab",
-                "fa-solid",
-                "fa-regular",
-                "fa-brands",
+                'fa',
+                'fas',
+                'far',
+                'fab',
+                'fa-solid',
+                'fa-regular',
+                'fa-brands',
             ];
-            if (el.tagName === "I" &&
+            if (el.tagName === 'I' &&
                 classNames.some((className) => el.classList.contains(className))) {
-                return { type: "icon" };
+                return { type: 'icon' };
             }
         },
         model: {
             defaults: {
-                tagName: "i",
-                attributes: { class: "fas fa-star" },
-                traits: ["id", (0,_consts__WEBPACK_IMPORTED_MODULE_0__.iconTrait)(opts), (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeHideInSimpleHtmlTrait)(opts)],
+                tagName: 'i',
+                attributes: { class: 'fas fa-star' },
+                traits: ['id', (0,_consts__WEBPACK_IMPORTED_MODULE_0__.iconTrait)(opts), (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeHideInSimpleHtmlTrait)(opts)],
             },
         },
     });
     // Add ostendis type trait to table components
-    DomComponents.addType("table", {
+    DomComponents.addType('table', {
         model: {
             defaults: {
                 traits: [
-                    "id",
+                    'id',
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeTextTrait)(opts),
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeHideInSimpleHtmlTrait)(opts),
                 ],
@@ -22862,13 +22886,13 @@ __webpack_require__.r(__webpack_exports__);
         },
     });
     // Add ostendis type trait to link components
-    DomComponents.addType("link", {
+    DomComponents.addType('link', {
         model: {
             defaults: {
                 traits: [
-                    "id",
-                    "href",
-                    "target",
+                    'id',
+                    'href',
+                    'target',
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeTextTrait)(opts),
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeHideInSimpleHtmlTrait)(opts),
                 ],
@@ -22876,12 +22900,12 @@ __webpack_require__.r(__webpack_exports__);
         },
     });
     // Add ostendis type trait to image components
-    DomComponents.addType("image", {
+    DomComponents.addType('image', {
         model: {
             defaults: {
                 traits: [
-                    "id",
-                    "alt",
+                    'id',
+                    'alt',
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeImageTrait)(opts),
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeHideInSimpleHtmlTrait)(opts),
                 ],
@@ -22889,11 +22913,11 @@ __webpack_require__.r(__webpack_exports__);
         },
     });
     // Add ostendis type trait to text components
-    DomComponents.addType("textnode", {
+    DomComponents.addType('textnode', {
         model: {
             defaults: {
                 traits: [
-                    "id",
+                    'id',
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeTextTrait)(opts),
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeHideInSimpleHtmlTrait)(opts),
                 ],
@@ -22901,11 +22925,11 @@ __webpack_require__.r(__webpack_exports__);
         },
     });
     // Add ostendis type trait to text components
-    DomComponents.addType("text", {
+    DomComponents.addType('text', {
         model: {
             defaults: {
                 traits: [
-                    "id",
+                    'id',
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeTextTrait)(opts),
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeHideInSimpleHtmlTrait)(opts),
                 ],
@@ -22913,11 +22937,11 @@ __webpack_require__.r(__webpack_exports__);
         },
     });
     // Add ostendis type trait to default components
-    DomComponents.addType("default", {
+    DomComponents.addType('default', {
         model: {
             defaults: {
                 traits: [
-                    "id",
+                    'id',
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeTextTrait)(opts),
                     (0,_consts__WEBPACK_IMPORTED_MODULE_0__.ostTypeHideInSimpleHtmlTrait)(opts),
                 ],
@@ -22984,9 +23008,7 @@ const uListItemContent = [
     },
     {
         type: "text",
-        tagName: "p",
         content: "Text",
-        style: { margin: "0", padding: "0", "text-align": "left" },
     },
 ];
 const ulListItem = {