@innovastudio/contentbuilder 1.3.14 → 1.3.16

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.14",
+  "version": "1.3.16",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.css

@@ -22,6 +22,12 @@ button:focus {
   outline: none;
 }
 
+a:focus-visible,
+button:focus-visible {
+  outline: #3e93f7 2px solid;
+  outline-offset: 2px;
+}
+
 .transition1 {
   transition: all ease 0.1s;
 }

package/public/contentbuilder/contentbuilder.esm.js

@@ -73996,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);