@innovastudio/contentbuilder 1.1.6 → 1.1.9

package/README.md

@@ -80,6 +80,8 @@ React and Vue project examples are provided in separate downloads in the user ar
   - scss/ (Only provided in Source Code package)
 - docs/
 - README.md (Documentation)
+- readme.txt (Readme file)
+- readme-sourcecode.txt (Readme file for Source Code package)
 - ...
  
 ## Snippets
@@ -396,8 +398,6 @@ To try a working example, please open example2.php.
   
 #### 2. Using AJAX Post Method
 
-Example (using axios):
-
 ```javascript
 builder.saveImages('', ()=>{
 
@@ -408,15 +408,21 @@ builder.saveImages('', ()=>{
 
 }, (img, base64, filename)=>{
 
-    // Upload image process
-    axios.post('/upload', { image: base64, filename: filename }).then((response)=>{
-
-        const uploadedImageUrl = response.data.url; // get saved image url
-
-        img.setAttribute('src', uploadedImageUrl); // automatically replace base64 src with image url
-
-    }).catch((err)=>{
-        console.log(err)
+    // Upload base64 images
+    const reqBody = { image: base64, filename: filename };
+    fetch('/uploadbase64', {
+        method:'POST',
+        body: JSON.stringify(reqBody),
+        headers: {
+            'Content-Type': 'application/json',
+        }
+    })
+    .then(response=>response.json())
+    .then(response=>{
+        if(!response.error) { 
+            const uploadedImageUrl = response.url;
+            img.setAttribute('src', uploadedImageUrl); // Update image src
+        }
     });
 			
 });
@@ -427,24 +433,65 @@ In this example, each image will be sent to an endpoint: /upload
 If you're using Node.js, you can implement the endpoint to save the images using:
   
 ```javascript
+const express = require('express');
+const fs = require('fs');
+const app = express();
+const path = require('path');
+const cors = require('cors');
+const serveStatic = require('serve-static');
+const formidable = require('formidable-serverless');
+const sharp = require('sharp');
+
 var $path =  __dirname + '/public/uploads/'; // Physical path
 var $urlpath = 'uploads/'; // URL path
 
-app.post('/upload', (req, res) => {
+app.use(cors());
+app.use(express.urlencoded({
+    extended: true
+}));
+app.use(express.json({ limit: '50mb' }));
+app.use(serveStatic(path.join(__dirname, '/public')));
+
+app.post('/uploadbase64', async (req, res) => {
     const base64Data = req.body.image;
     const filename = req.body.filename;
-    require("fs").writeFile($path + filename, base64Data, 'base64', ()=>{
-        res.status(200).json({
-            success: true,
-            url: `${$urlpath}${filename}` // return saved image url
+
+    let extension = path.extname(filename).toLowerCase();
+
+    let imageFile=base64Data;
+    if(extension  === '.jpeg' || extension === '.jpg') {
+        let img = new Buffer.from(base64Data, 'base64');
+        imageFile = await sharp(img).resize(1600, 1600, {
+            fit: sharp.fit.inside,
+            withoutEnlargement: true, 
         })
+        .jpeg({ quality: 70, progressive: true, force: false })
+        .toBuffer();
+    }
+    fs.writeFile($path + filename, imageFile, 'base64', async (err)=>{
+        if (err) {
+            res.status(500).json({ 
+                ok:true, status: 500, 
+                error: 'Something went wrong.' 
+            });
+            return 
+        } 
+        res.status(200).json({ 
+            ok:true, status: 200, 
+            url:  $urlpath + filename
+        });
     });
 });
+
+app.listen(8081, function() {
+    console.log('App running on port 8081');
+});
 ```
 
 Example use of the AJAX post method can be seen on:
 - React Example (react-contentbuilder folder, please see src/components/contentbuilder/buildercontrol.jsx)
 - Vue Example (vue-contentbuilder folder, please see src/components/Editable.vue)
+- src/index.js (in Source Code package)
 
 ### Configuration
 
@@ -548,38 +595,41 @@ Example:
 	
 ```javascript
 const builder = new ContentBuilder({
-    container: '.container',
-    onMediaUpload: (e)=>{
-
-        const selectedFile = e.target.files[0];
-        const filename = selectedFile.name;
-        const reader = new FileReader();
-        reader.onload = (e) => {
-            let base64 = e.target.result;
-            base64 = base64.replace(/^data:(.*?);base64,/, "");
-            base64 = base64.replace(/ /g, '+'); 
-
-            // Upload process using axios (https://github.com/axios/axios)
-            axios.post('upload/', { image: base64, filename: filename }).then((response)=>{
-
-                const uploadedFileUrl = response.data.url; // get saved file url
-                builder.returnUrl(uploadedFileUrl); // return the url
-
-            }).catch((err)=>{
-                console.log(err)
-            });
-        }
-        reader.readAsDataURL(selectedFile);
-
-    }
-});
+	container: '.container',
+	onMediaUpload: (e)=>{
+	    uploadFile(e, (response)=>{
+		if(!response.error) {
+		    const uploadedImageUrl = response.url; 
+		    if(uploadedImageUrl) obj.returnUrl(uploadedImageUrl);
+		}
+	    });
+	}
+});
+
+function uploadFile(e, callback) {
+
+	const selectedFile = e.target.files[0];
+
+	const formData = new FormData();
+	formData.append('file', selectedFile);
+	fetch('/upload', {
+	    method: 'POST',
+	    body: formData,
+	})
+	.then(response=>response.json())
+	.then(response=>{
+	    console.log(response)
+	    if(callback) callback(response);
+	});
+}
 ```
-
 The example above uses the **returnUrl(url)** method to apply the uploaded image url back to the image dialog. You can also use the **applyLargerImage** parameter (previous version) which is the same and still works.
+In the example, file will be sent to an endpoint: /upload
 
 Working examples can be seen on the React & Vue examples:
 - React Example (react-contentbuilder folder, please see src/components/contentbuilder/buildercontrol.jsx)
 - Vue Example (vue-contentbuilder folder, please see src/components/Editable.vue)
+- src/index.js (in Source Code package)
 
 ## Video Upload from the Video Dialog
 
@@ -622,31 +672,34 @@ Example:
 	
 ```javascript
 const builder = new ContentBuilder({
-    container: '.container',
-    onVideoUpload: (e)=>{
-
-        const selectedFile = e.target.files[0];
-        const filename = selectedFile.name;
-        const reader = new FileReader();
-        reader.onload = (e) => {
-            let base64 = e.target.result;
-            base64 = base64.replace(/^data:(.*?);base64,/, "");
-            base64 = base64.replace(/ /g, '+'); 
-
-            // Upload process using axios (https://github.com/axios/axios)
-            axios.post('upload/', { image: base64, filename: filename }).then((response)=>{
-
-                const uploadedFileUrl = response.data.url; // get saved file url
-                builder.returnUrl(uploadedFileUrl); // return the url
-
-            }).catch((err)=>{
-                console.log(err)
-            });
-        }
-        reader.readAsDataURL(selectedFile);
-
-    }
-});
+	container: '.container',
+	...
+	onVideoUpload: (e)=>{
+	    uploadFile(e, (response)=>{
+		if(!response.error) {
+		    const uploadedFileUrl = response.url;
+		    if(uploadedFileUrl) obj.returnUrl(uploadedFileUrl);
+		}
+	    });
+	},
+});
+
+function uploadFile(e, callback) {
+
+	const selectedFile = e.target.files[0];
+
+	const formData = new FormData();
+	formData.append('file', selectedFile);
+	fetch('/upload', {
+	    method: 'POST',
+	    body: formData,
+	})
+	.then(response=>response.json())
+	.then(response=>{
+	    console.log(response)
+	    if(callback) callback(response);
+	});
+}
 ```
 
 ## Plugins
@@ -658,7 +711,6 @@ With plugins, you can extend the ContentBuilder.js features. A plugin can add an
 Plugin scripts are located in the **plugins/** folder inside **contentbuilder/**.
 
 You will see the folder containing some prebuilt plugins:
-- contentbuilder/plugins/buttoneditor
 - contentbuilder/plugins/helloworld
 - contentbuilder/plugins/preview
 - contentbuilder/plugins/searchreplace
@@ -675,7 +727,6 @@ const builder = new ContentBuilder({
         { name: 'preview', showInMainToolbar: true, showInElementToolbar: true },
         { name: 'wordcount', showInMainToolbar: true, showInElementToolbar: true },
         { name: 'symbols', showInMainToolbar: true, showInElementToolbar: false },
-        { name: 'buttoneditor', showInMainToolbar: false, showInElementToolbar: false },
     ],
     pluginPath: 'contentbuilder/', 
 });
@@ -703,7 +754,9 @@ As seen in the example configuration above:
 ![Button Editor Plugin](docs/plugin-symbols1.png)
 Here the Symbol button is not displayed on the element editing toolbar:
 ![Button Editor Plugin](docs/plugin-symbols2.png)
-- The 'buttoneditor' plugin doesn't add a button on both the main editing toolbar and the alternate editing toolbar, so the **showInMainToolbar** is set to false, and the **showInElementToolbar** is set to false. This is because the plugin is only activated when the link button is clicked. There is no button on the toolbar. Instead, an edit (pencil) icon shows on top of the button.
+
+In the previous version, there is a ‘buttoneditor’ plugin which shows an edit (pencil) icon when a link button is clicked. This plugin is now integrated with the builder, so no configuration is needed. 
+
 ![Button Editor Plugin](docs/plugin-buttoneditor.png)
 
 An alternative way to load the plugins is by using a configuration file:
@@ -718,7 +771,6 @@ _cb.settings.plugins = [
 	{ name: 'preview', showInMainToolbar: true, showInElementToolbar: true },
 	{ name: 'wordcount', showInMainToolbar: true, showInElementToolbar: true },
 	{ name: 'symbols', showInMainToolbar: true, showInElementToolbar: false },
-	{ name: 'buttoneditor', showInMainToolbar: false, showInElementToolbar: false },
 ];
 ```
 
@@ -735,7 +787,7 @@ Note that using an external configuration file is an approach that comes from th
 In the previous version, the plugins parameter is configured like this:
 
 ```javascript
-['preview','wordcount', 'buttoneditor']
+['preview','wordcount']
 ```
 This still works, however we recommend using the new approach (explained above) for future flexibility.
 
@@ -1028,7 +1080,7 @@ Specify the framework classes using the **row** & **cols** parameters.
 
 Example:
 
-Bootstrap Framework:
+Bootstrap:
 
 ```javascript
 const builder = new ContentBuilder({
@@ -1038,7 +1090,7 @@ const builder = new ContentBuilder({
 });
 ```
 	
-Foundation Framework:
+Foundation:
 
 ```javascript
 const builder = new ContentBuilder({
@@ -1048,6 +1100,27 @@ const builder = new ContentBuilder({
 });
 ```
 
+Tailwind:
+```javascript
+const builder = new ContentBuilder({
+    container: '.container',
+    row: 'flex flex-col md:flex-row',
+    cols: [
+        'w-full md:w-1/12 px-4', 
+        'w-full md:w-2/12 px-4', 
+        'w-full md:w-3/12 px-4', 
+        'w-full md:w-4/12 px-4', 
+        'w-full md:w-5/12 px-4', 
+        'w-full md:w-6/12 px-4', 
+        'w-full md:w-7/12 px-4', 
+        'w-full md:w-8/12 px-4', 
+        'w-full md:w-9/12 px-4', 
+        'w-full md:w-10/12 px-4', 
+        'w-full md:w-11/12 px-4', 
+        'w-full px-4'], 
+});
+```
+
 #### 2. If the framework has grid system in which the column size increment is not constant
 
 Specify two additional parameters: **colequal** & **colsizes**
@@ -1114,6 +1187,7 @@ Note:
     - example1-purecss.html (Pure Css Example)
     - example1-skeleton.html (Skeleton Example)
     - example1-spectre.html (Spectre.css Example)
+    - example1-tailwind (Tailwind Example)
     - example1-uikit.html (UIKit Example)
     - example1-w3css.html (W3.CSS Example)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbuilder",
-  "version": "1.1.6",
+  "version": "1.1.9",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "files": [

package/public/contentbuilder/contentbuilder.css

@@ -2097,7 +2097,7 @@ button:focus {
   top: 50%;
   left: auto;
   right: 30%;
-  margin-top: -383px;
+  margin-top: -343px;
   box-sizing: content-box;
   flex-direction: row;
   align-items: flex-start;

package/public/contentbuilder/contentbuilder.esm.js

@@ -7901,37 +7901,42 @@ class Dom {
     this.replaceTag(area, 'i', cssClasses.fontStyle.italic);
     this.replaceTag(area, 'u', cssClasses.textDecoration.underline);
     this.replaceTag(area, 'strike', cssClasses.textDecoration.linethrough);
+    this.replaceInline(area, 'font-weight', 'normal', cssClasses.fontWeight.defaultBold);
     this.replaceInline(area, 'font-weight', 'bold', cssClasses.fontWeight.defaultBold);
-    this.replaceInline(area, 'text-align', 'left', 'text-left');
-    this.replaceInline(area, 'text-align', 'right', 'text-right');
-    this.replaceInline(area, 'text-align', 'center', 'text-center');
-    this.replaceInline(area, 'text-align', 'justify', 'text-justify');
-    this.replaceInline(area, 'display', 'flex', 'flex');
-    this.replaceInline(area, 'justiify-content', 'flex-start', 'justify-start');
-    this.replaceInline(area, 'justiify-content', 'flex-end', 'justify-end');
-    this.replaceInline(area, 'justiify-content', 'center', 'justify-center');
-    this.replaceInline(area, 'justiify-content', 'space-between', 'justify-between');
-    this.replaceInline(area, 'align-items', 'flex-start', 'items-start');
-    this.replaceInline(area, 'align-items', 'flex-end', 'items-end');
-    this.replaceInline(area, 'align-items', 'center', 'items-center');
-    this.replaceInline(area, 'text-transform', 'uppercase', 'uppercase');
-    this.replaceInline(area, 'text-transform', 'lowercase', 'lowercase');
-    this.replaceInline(area, 'line-height', '1', 'leading-none');
-    this.replaceInline(area, 'line-height', '1.1', 'leading-11');
-    this.replaceInline(area, 'line-height', '1.2', 'leading-12');
-    this.replaceInline(area, 'line-height', '1.25', 'leading-tight');
-    this.replaceInline(area, 'line-height', '1.3', 'leading-13');
-    this.replaceInline(area, 'line-height', '1.375', 'leading-snug');
-    this.replaceInline(area, 'line-height', '1.4', 'leading-14');
-    this.replaceInline(area, 'line-height', '1.5', 'leading-15');
-    this.replaceInline(area, 'line-height', '1.6', 'leading-16');
-    this.replaceInline(area, 'line-height', '1.625', 'leading-relaxed');
-    this.replaceInline(area, 'line-height', '1.7', 'leading-17');
-    this.replaceInline(area, 'line-height', '1.8', 'leading-18');
-    this.replaceInline(area, 'line-height', '1.9', 'leading-19');
-    this.replaceInline(area, 'line-height', '2', 'leading-loose');
-    this.replaceInline(area, 'line-height', '2.1', 'leading-21');
-    this.replaceInline(area, 'line-height', '2.2', 'leading-22');
+    this.replaceInline(area, 'font-weight', '600', cssClasses.fontWeight.semibold);
+    this.replaceInline(area, 'text-align', 'left', cssClasses.textAlign.left);
+    this.replaceInline(area, 'text-align', 'right', cssClasses.textAlign.right);
+    this.replaceInline(area, 'text-align', 'center', cssClasses.textAlign.center);
+    this.replaceInline(area, 'text-align', 'justify', cssClasses.textAlign.justify);
+    this.replaceInline(area, 'display', 'flex', cssClasses.display.flex);
+    this.replaceInline(area, 'justiify-content', 'flex-start', cssClasses.justifyContent.start);
+    this.replaceInline(area, 'justiify-content', 'flex-end', cssClasses.justifyContent.end);
+    this.replaceInline(area, 'justiify-content', 'center', cssClasses.justifyContent.center);
+    this.replaceInline(area, 'justiify-content', 'space-between', cssClasses.justifyContent.between);
+    this.replaceInline(area, 'flex-direction', 'column', cssClasses.flexDirection.column);
+    this.replaceInline(area, 'flex-direction', 'row', cssClasses.flexDirection.row);
+    this.replaceInline(area, 'align-items', 'flex-start', cssClasses.alignItems.start);
+    this.replaceInline(area, 'align-items', 'flex-end', cssClasses.alignItems.end);
+    this.replaceInline(area, 'align-items', 'center', cssClasses.alignItems.center);
+    this.replaceInline(area, 'text-transform', 'uppercase', cssClasses.textTransform.uppercase);
+    this.replaceInline(area, 'text-transform', 'lowercase', cssClasses.textTransform.lowercase);
+    this.replaceInline(area, 'text-transform', 'none', cssClasses.textTransform.normal);
+    this.replaceInline(area, 'line-height', '1', cssClasses.leading.leading_10);
+    this.replaceInline(area, 'line-height', '1.1', cssClasses.leading.leading_11);
+    this.replaceInline(area, 'line-height', '1.2', cssClasses.leading.leading_12);
+    this.replaceInline(area, 'line-height', '1.25', cssClasses.leading.leading_125);
+    this.replaceInline(area, 'line-height', '1.3', cssClasses.leading.leading_13);
+    this.replaceInline(area, 'line-height', '1.375', cssClasses.leading.leading_1375);
+    this.replaceInline(area, 'line-height', '1.4', cssClasses.leading.leading_14);
+    this.replaceInline(area, 'line-height', '1.5', cssClasses.leading.leading_15);
+    this.replaceInline(area, 'line-height', '1.6', cssClasses.leading.leading_16);
+    this.replaceInline(area, 'line-height', '1.625', cssClasses.leading.leading_1625);
+    this.replaceInline(area, 'line-height', '1.7', cssClasses.leading.leading_17);
+    this.replaceInline(area, 'line-height', '1.8', cssClasses.leading.leading_18);
+    this.replaceInline(area, 'line-height', '1.9', cssClasses.leading.leading_19);
+    this.replaceInline(area, 'line-height', '2', cssClasses.leading.leading_20);
+    this.replaceInline(area, 'line-height', '2.1', cssClasses.leading.leading_21);
+    this.replaceInline(area, 'line-height', '2.2', cssClasses.leading.leading_22);
   }
 
   replaceTag(area, tag, className) {
@@ -7954,7 +7959,15 @@ class Dom {
   replaceInline(builder, css, value, className) {
     let elms = builder.querySelectorAll('*');
     elms.forEach(elm => {
-      if (elm.style[css] === `${value}`) {
+      if (css === 'justiify-content') {
+        /*
+        For some reason, cannot use elm.style[css] for 'justify-content'
+        */
+        if (elm.style.justifyContent === `${value}`) {
+          this.addClass(elm, className);
+          elm.style.justifyContent = '';
+        }
+      } else if (elm.style[css] === `${value}`) {
         this.addClass(elm, className);
         elm.style[css] = '';
       }
@@ -46839,6 +46852,7 @@ class Image {
       imageTool.style.display = '';
       setTimeout(() => {
         let elm = this.builder.activeImage;
+        if (!elm) return;
 
         if (dom$A.hasClass(elm.parentNode, 'img-circular')) {
           elm = elm.parentNode;
@@ -66258,6 +66272,34 @@ class ContentBuilder {
           leading_29: 'leading-29',
           leading_30: 'leading-30'
         },
+        opacity: {
+          opacity_0: 'opacity-0',
+          opacity_2: 'opacity-2',
+          opacity_4: 'opacity-4',
+          opacity_5: 'opacity-5',
+          opacity_6: 'opacity-6',
+          opacity_8: 'opacity-8',
+          opacity_10: 'opacity-10',
+          opacity_12: 'opacity-12',
+          opacity_15: 'opacity-15',
+          opacity_20: 'opacity-20',
+          opacity_25: 'opacity-25',
+          opacity_30: 'opacity-30',
+          opacity_35: 'opacity-35',
+          opacity_40: 'opacity-40',
+          opacity_45: 'opacity-45',
+          opacity_50: 'opacity-50',
+          opacity_55: 'opacity-55',
+          opacity_60: 'opacity-60',
+          opacity_65: 'opacity-65',
+          opacity_70: 'opacity-70',
+          opacity_75: 'opacity-75',
+          opacity_80: 'opacity-80',
+          opacity_85: 'opacity-85',
+          opacity_90: 'opacity-90',
+          opacity_95: 'opacity-95',
+          opacity_100: 'opacity-100'
+        },
         padding: {
           all: {
             p_0: 'p-0',
@@ -66673,7 +66715,8 @@ class ContentBuilder {
 
     document.addEventListener('click', this.doDocumentClick = e => {
       e = e || window.event;
-      var target = e.target || e.srcElement;
+      let target = e.target || e.srcElement;
+      if (!target) return;
       let rowClicked = dom.hasClass(target.parentNode, 'is-builder');
       let containerClicked = dom.hasClass(target, 'is-builder');
       let a = false,