@innovastudio/contentbuilder 1.3.23 → 1.3.25

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.3.23",
+  "version": "1.3.25",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.esm.js

@@ -70555,7 +70555,7 @@ class Rte {
 
         if (count < 3) {
           //not used     
-          var attr = links[i].getAttribute('data-protect');
+          let attr = links[i].getAttribute('data-protect');
 
           if (!attr) {
             links[i].setAttribute('data-rel', '_del');
@@ -70686,17 +70686,11 @@ class Rte {
     fontname = fontname.replace(/'/g, ''); // NEW 4.0.5 (replace quotes in font family)
 
     if (provider === 'google') {
-      var bExist = false;
-      var links = this.builder.doc.getElementsByTagName('link');
-
-      for (i = 0; i < links.length; i++) {
-        var sSrc = links[i].href.toLowerCase();
-        sSrc = sSrc.replace(/\+/g, ' ').replace(/%20/g, ' ');
-        if (sSrc.indexOf(fontname.toLowerCase()) !== -1) bExist = true;
-      }
+      let bExist = false;
+      bExist = this.checkIfFontCssLinkExists(fontfamily);
 
       if (!bExist) {
-        var element = elm;
+        let element = elm;
 
         while (!dom.hasClass(element, 'is-builder')) {
           element = element.parentNode;
@@ -70704,16 +70698,37 @@ class Rte {
 
         let cssUrl = '';
 
-        if (this.builder.googleFontPath) {
-          const cssFileName = fontfamily.split(',')[0].toLowerCase().replace(/\s/g, '-') + '.css';
-          cssUrl = this.builder.googleFontPath + cssFileName;
-          dom.appendHtml(element, `<link href="${cssUrl}" rel="stylesheet" property="stylesheet" type="text/css">`);
+        if (this.builder.fontPath) {
+          const cssFileName = fontfamily.split(',')[0].toLowerCase().replace(/'/g, '').replace(/"/g, '').replace(/\s/g, '-') + '.css';
+          cssUrl = this.builder.fontPath + cssFileName;
+          dom.appendHtml(element, `<link data-name="fontfamily" href="${cssUrl}" rel="stylesheet" property="stylesheet" type="text/css">`);
         } else {
           dom.appendHtml(element, '<link href="//fonts.googleapis.com/css?family=' + fontname + d + o + '" rel="stylesheet" property="stylesheet" type="text/css">');
         }
       }
     }
 
+    if (provider === 'others') {
+      let bExist = false;
+      bExist = this.checkIfFontCssLinkExists(fontfamily);
+
+      if (!bExist) {
+        let element = elm;
+
+        while (!dom.hasClass(element, 'is-builder')) {
+          element = element.parentNode;
+        }
+
+        let cssUrl = '';
+
+        if (this.builder.fontPath) {
+          const cssFileName = fontfamily.split(',')[0].toLowerCase().replace(/'/g, '').replace(/"/g, '').replace(/\s/g, '-') + '.css';
+          cssUrl = this.builder.fontPath + cssFileName;
+          dom.appendHtml(element, `<link data-name="fontfamily" href="${cssUrl}" rel="stylesheet" property="stylesheet" type="text/css">`);
+        }
+      }
+    }
+
     if (!this.builder.inspectedElement) {
       //save selection
       this.util.saveSelection(); //Needed because after format, a tag is added (ex. <span>), so, make selection again. 
@@ -70728,9 +70743,12 @@ class Rte {
     } //Trigger Change event
 
 
-    this.builder.opts.onChange(); //LATER: make function
-    //Cleanup Google font css link
+    this.builder.opts.onChange(); //Cleanup Google font css link
+
+    this.cleanupFontCssLink();
+  }
 
+  cleanupFontCssLink() {
     const fonts = [];
 
     if (this.builder.opts.page !== '') {
@@ -70747,54 +70765,64 @@ class Rte {
           if (fonts.indexOf(fontFamily) === -1) fonts.push(fontFamily);
         });
       });
-    }
+    } // Cleanup
 
-    links = this.builder.doc.getElementsByTagName('link');
 
-    for (i = 0; i < links.length; i++) {
-      sSrc = links[i].href.toLowerCase();
+    let links = this.builder.doc.getElementsByTagName('link');
+
+    for (let i = 0; i < links.length; i++) {
+      let sSrc = links[i].href.toLowerCase();
 
       if (sSrc.indexOf('googleapis') !== -1) {
         //get fontname
         sSrc = sSrc.replace(/\+/g, ' ').replace(/%20/g, ' ');
-        fontname = sSrc.substr(sSrc.indexOf('family=') + 7);
+        let linkFontName = sSrc.substr(sSrc.indexOf('family=') + 7);
 
-        if (fontname.indexOf(':') !== -1) {
-          fontname = fontname.split(':')[0];
+        if (linkFontName.indexOf(':') !== -1) {
+          linkFontName = linkFontName.split(':')[0];
         }
 
-        if (fontname.indexOf('|') !== -1) {
-          fontname = fontname.split('|')[0];
+        if (linkFontName.indexOf('|') !== -1) {
+          linkFontName = linkFontName.split('|')[0];
         }
 
-        fontname = fontname.replace('&display=swap', ''); // NEW 4.0.5
-        //console.log(fontname);
-        //check if fontname used in content
-        // let tmp = this.builder.doc.body.innerHTML.toLowerCase();
+        linkFontName = linkFontName.replace('&display=swap', ''); // NEW 4.0.5
+        // console.log(linkFontName);
+        // check if fontname used in content
 
         let used = false;
         fonts.forEach(item => {
-          if (item.toLowerCase().indexOf(fontname) === -1) ; else {
+          if (item.toLowerCase().indexOf(linkFontName.toLowerCase()) === -1) ; else {
             used = true;
           }
         });
 
         if (!used) {
           //not used
-          var attr = links[i].getAttribute('data-protect');
+          let attr = links[i].getAttribute('data-protect');
 
           if (!attr) {
             links[i].setAttribute('data-rel', '_del');
           }
-        } // var count = tmp.split(fontname).length;     
-        // if(count<3){
-        //     //not used     
-        //     var attr = links[i].getAttribute('data-protect');
-        //     if (!attr) {
-        //         links[i].setAttribute('data-rel','_del');
-        //     }
-        // }
+        }
+      } else if (links[i].getAttribute('data-name') === 'fontfamily') {
+        let used = false;
+        fonts.forEach(item => {
+          const cssFileName = item.split(',')[0].replace(/'/g, '').replace(/"/g, '').replace(/\s/g, '-').toLowerCase() + '.css';
 
+          if (sSrc.toLowerCase().indexOf('/' + cssFileName) === -1) ; else {
+            used = true;
+          }
+        });
+
+        if (!used) {
+          //not used
+          let attr = links[i].getAttribute('data-protect');
+
+          if (!attr) {
+            links[i].setAttribute('data-rel', '_del');
+          }
+        }
       }
     }
 
@@ -70803,6 +70831,54 @@ class Rte {
     });
   }
 
+  checkIfFontCssLinkExists(fontfamily) {
+    let bExist = false;
+    let fontname = fontfamily.split(',')[0];
+    fontname = fontname.replace(/'/g, '');
+    fontname = fontname.replace(/"/g, ''); // (replace double quotes in font family)
+
+    fontname = fontname.toLowerCase();
+    let links = this.builder.doc.getElementsByTagName('link');
+
+    for (let i = 0; i < links.length; i++) {
+      let sSrc = links[i].href.toLowerCase();
+
+      if (sSrc.indexOf('googleapis') !== -1) {
+        if (!this.builder.fontPath) {
+          //get fontname
+          sSrc = sSrc.replace(/\+/g, ' ').replace(/%20/g, ' ');
+          let linkFontName = sSrc.substr(sSrc.indexOf('family=') + 7);
+
+          if (linkFontName.indexOf(':') !== -1) {
+            linkFontName = linkFontName.split(':')[0];
+          }
+
+          if (linkFontName.indexOf('|') !== -1) {
+            linkFontName = linkFontName.split('|')[0];
+          }
+
+          linkFontName = linkFontName.replace('&display=swap', ''); // NEW 4.0.5
+          //check if fontname used in content
+          // let tmp = this.builder.doc.body.innerHTML.toLowerCase();
+
+          if (linkFontName === fontname.toLowerCase()) {
+            bExist = true; // console.log(fontname.toLowerCase() + '-' +linkFontName);
+          }
+        }
+      } else if (links[i].getAttribute('data-name') === 'fontfamily') {
+        if (this.builder.fontPath) {
+          let cssFile = fontname.replace(/\s/g, '-').toLowerCase() + '.css';
+
+          if (sSrc.toLowerCase().indexOf('/' + cssFile) !== -1) {
+            bExist = true;
+          }
+        }
+      }
+    }
+
+    return bExist;
+  }
+
   positionToolbar() {
     const viewportWidth = document.body.clientWidth; //window.innerWidth;
 
@@ -73899,7 +73975,7 @@ class ContentBuilder {
       // Used for the location of ionicons/ (see rte.js 2788) & scripts/ (see plugins/preview/plugin.js 237)
       fontAssetPath: 'assets/fonts/',
       // Option for self-hosted fonts:
-      // googleFontPath: 'assets/googlefonts/', // If set, will be used
+      // fontPath: 'assets/cssfonts/', // If set, will be used
       snippetData: 'assets/minimalist-blocks/snippetlist.html',
       // Deprecated
       snippetUrl: 'assets/minimalist-blocks/content.js',