@innovastudio/contentbuilder 1.3.13 → 1.3.15

package/README.md

@@ -828,7 +828,7 @@ Here is an example of a snippet definition in the snippet file:
     'thumbnail': 'preview/basic-01.png',
     'category': '120',
     'html':
-        '<div class="row clearfix">' +
+        '<div class="row">' +
             '<div class="column full">' +
                 '<h1>My Heading Text</h1>' +
             '</div>' +
@@ -869,7 +869,7 @@ The HTML content for the snippets needs to be formatted in a simple grid. Here a
 Single column:
 
 ```html
-<div class="row clearfix">
+<div class="row">
     <div class="column full">
 	...
     </div>
@@ -879,7 +879,7 @@ Single column:
 Two columns:
 
 ```html
-<div class="row clearfix">
+<div class="row">
     <div class="column half">
         ...
     </div>
@@ -892,7 +892,7 @@ Two columns:
 Three columns:
 
 ```html
-<div class="row clearfix">
+<div class="row">
     <div class="column third">
         ...
     </div>
@@ -908,7 +908,7 @@ Three columns:
 Four columns:
 
 ```html
-<div class="row clearfix">
+<div class="row">
     <div class="fourth third">
         ...
     </div>
@@ -927,7 +927,7 @@ Four columns:
 Five columns:
 
 ```html
-<div class="row clearfix">
+<div class="row">
     <div class="column fifth">
         ...
     </div>
@@ -949,7 +949,7 @@ Five columns:
 Six columns:
 
 ```html
-<div class="row clearfix">
+<div class="row">
     <div class="column sixth">
         ...
     </div>
@@ -985,7 +985,7 @@ const builder = new ContentBuilder({
 Other layouts you can use to create your own your snippets:
 
 ```html
-<div class="row clearfix">
+<div class="row">
     <div class="column two-third">
         ...
     </div>
@@ -1000,7 +1000,7 @@ Result:
 ![Layout example](docs/two-third.png)
 
 ```html
-<div class="row clearfix">
+<div class="row">
     <div class="column two-fourth">
         ...
     </div>
@@ -1015,7 +1015,7 @@ Result:
 ![Layout example](docs/two-fourth.png)
 
 ```html
-<div class="row clearfix">
+<div class="row">
     <div class="column two-fifth">
         ...
     </div>
@@ -1030,7 +1030,7 @@ Result:
 ![Layout example](docs/two-fifth.png)
 
 ```html
-<div class="row clearfix">
+<div class="row">
     <div class="column two-sixth">
         ...
     </div>
@@ -1053,7 +1053,7 @@ You can also add some behavior in your HTML snippets:
 
 - To make a column not editable, add the **data-noedit** attribute to the column, for example:
 ```html
-<div class="row clearfix">
+<div class="row">
     <div class="column full" data-noedit>
         ...
     </div>
@@ -1062,7 +1062,7 @@ You can also add some behavior in your HTML snippets:
 
 - To make a column not editable and cannot be deleted, moved or duplicated, add the **data-protected** attribute to the column, for example:
 ```html
-<div class="row clearfix">
+<div class="row">
     <div class="column full" data-protected>
         ...
     </div>
@@ -1870,6 +1870,20 @@ builder.pasteHtmlAtCaret(html);
 ```
 You will need to place the cursor on the content where you want to paste the HTML.
 
+## Insert Custom HTML Snippet Programmatically
+
+To insert custom HTML snippet programmatically, you can pass your HTML snippet in the **addSnippet()** method:
+
+```javascript
+builder.addSnippet(`
+<div class="row">
+    <div class="column">
+	<h3>Hello World!</h3>
+    </div>
+</div>
+`);
+```
+
 ## Element Selection
 
 By default, when you press CMD-A or CTRL-A, you will select the current element where cursor is placed (not selecting all elements on the entire column).
@@ -2090,6 +2104,23 @@ const builder = new ContentBuilder({
 });
 ```
 
+## Text Settings
+
+With Text Settings on the toolbar, you can adjust font size, font weight, line spacing (line height) and letter spacing. 
+
+![Text Settings](docs/text-settings.png)
+
+If the Bold button on the toolbar is sufficient for you, you can hide the font weight settings by setting the **simpleTextSettings** parameter to true. 
+
+```javascript
+const builder = new ContentBuilder({
+    container: '.container',
+    simpleTextSettings: true, 
+});
+```
+
+![Text Settings](docs/text-settings2.png)
+
 ## Undo & Redo
 
 You can programmatically perform an undo or redo action.

package/package.json

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

package/public/contentbuilder/contentbuilder.esm.js

@@ -14522,7 +14522,25 @@ class HtmlUtil {
       range.setStart(area, 0);
       area.appendChild(range.createContextualFragment(html));
       let builderActive = this.builder.doc.querySelector('.builder-active');
-      if (builderActive) this.builder.applyBehaviorOn(builderActive); //Trigger Change event
+      if (builderActive) this.builder.applyBehaviorOn(builderActive);
+      /*else {
+           const builders = this.builder.doc.querySelectorAll(this.builder.opts.container);
+          if(builders.length > 1) {
+              const cell = util.cellSelected();
+              if(!cell) {
+                  // Return first instance
+                  area = builders[0];
+              } else {
+                  // Return active instance
+                  area = cell.parentNode.parentNode;
+              }
+          } else {
+              // Single instance
+              area = builders[0];
+          }
+          this.builder.applyBehaviorOn(area);
+       }*/
+      //Trigger Change event
 
       this.builder.opts.onChange(); //Trigger Render event
 
@@ -14750,9 +14768,9 @@ class HtmlUtil {
 
 
     let columnMore = builderStuff.querySelector('.is-pop.columnmore');
-    columnMore.style.display = '';
+    if (columnMore) columnMore.style.display = '';
     let rowMore = builderStuff.querySelector('.is-pop.rowmore');
-    rowMore.style.display = '';
+    if (rowMore) rowMore.style.display = '';
     this.builder.codeEditorMode = mode;
     this.builder.codeEditorArea = area;
     let codeEditor = viewhtml.querySelector('.input-code-editor');
@@ -50038,6 +50056,8 @@ class Image$1 {
           }
 
           newname = basename + '-edit' + this.util.makeId();
+          newname = newname.replaceAll('%20', '-'); // fix 404 error after file upload
+
           img.setAttribute('data-filename', newname + '.' + extension);
         }
 
@@ -50098,7 +50118,9 @@ class Image$1 {
         this.imageTool.style.display = '';
       }, 1000);
     } else {
-      this.refresh();
+      elm.onload = () => {
+        this.refresh();
+      };
     }
   }
 
@@ -50173,7 +50195,9 @@ class Image$1 {
           this.builder.moveable.updateRect();
           document.querySelector('.moveable-control-box').style.display = 'none';
         }
-      }, 300);
+
+        this.util.repositionColumnTool();
+      }, 0); // refesh() is called after img onload, so no need to have a delay.
     }
   }
 
@@ -65755,7 +65779,7 @@ class Rte {
       }
 
       if (this.builder.opts.toolbarAddSnippetButton && html_elementrte.indexOf('rte-addsnippet') === -1 && html_elementrtemore.indexOf('rte-addsnippet') === -1) {
-        html_elementrte = `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>` + html_rte;
+        html_elementrte = `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>` + html_elementrte; //html_rte;
       }
 
       if (html_elementrtemore !== '' && html_elementrte.indexOf('rte-more') === -1) {
@@ -65786,7 +65810,7 @@ class Rte {
       }
 
       if (this.builder.opts.toolbarAddSnippetButton && html_iconrte.indexOf('rte-addsnippet') === -1 && html_iconrtemore.indexOf('rte-addsnippet') === -1) {
-        html_iconrte = `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>` + html_rte;
+        html_iconrte = `<button tabindex="-1" title="${util.out('Add Snippet')}" class="rte-addsnippet"><svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-1px;"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>` + html_iconrte; //html_rte;
       }
 
       if (html_iconrtemore !== '' && html_iconrte.indexOf('rte-more') === -1) {
@@ -73972,7 +73996,7 @@ class ContentBuilder {
       useCssClasses: true,
       useButtonPlugin: false,
       enableDragResize: true,
-      simpleTextSettings: true
+      simpleTextSettings: false
     }; // obj.preserveSelection = true; (can be set programmatically) to prevent click that clears selection on external custom modal.
 
     this.opts = Object.assign(this, defaults, opts);