@innovastudio/contentbox 1.0.12 → 1.0.16

package/README.md

@@ -49,7 +49,7 @@ On the head section:
 <link href="box/box.css" rel="stylesheet" type="text/css" />
 ```
 
-And before the end of body tag:
+And before the end of the body tag:
 
 ```html
 <script src="box/box.js" type="text/javascript"></script>
@@ -122,7 +122,7 @@ React and Vue project examples are provided in separate downloads in the user ar
 
 ## Predesigned Sections (Templates)
 
-To start building a page, you can click the (+) button on the top left sidebar. This will opens a selection of predesigned sections that you can add into your page.
+To start building a page, you can click the (+) button on the top left sidebar. This will open a selection of predesigned sections that you can add into your page.
 
 ![Predesigned Sections](docs/predesigned-sections.png)
 
@@ -177,7 +177,7 @@ assets/minimalist-blocks/
 
 It contains:
 - content.js (snippets JSON file)
-- content.css (snippet css file)
+- content.css (snippets css file)
 - images (contains assets for the snippets)
 - preview (contains snippet thumbnails)
 
@@ -214,13 +214,13 @@ A selection of typography styles is provided for you to choose to format your pa
 
 ![Typography Styles](docs/typography.png)
 
-The style can be used to format the entire page or just a specific section or box area of your page. 
+The style can be used to format the entire page or just a specific section or a box area of your page. 
 
-If the page has one or more sections (or boxes) that have their own typography style, a modal dialog is opened for you to choose to replace all the sections' styles or keep the sections' style and format only the unstyled sections.
+If the page has one or more sections (or boxes) that have their own typography style, a modal dialog is opened for you to choose and replace all the sections' styles or keep the sections' style and format only the unstyled sections.
 
 ![Apply options](docs/typography2.png)
 
-To apply the typography style for a specific section or box area, open the Box Settings dialog, select 'Text' tab and click 'Change Style'.
+To apply the typography style for a specific section or box area, open the Box Settings dialog, select the 'Text' tab and click 'Change Style'.
 
 ![Apply to a specific section](docs/typography3.png)
 
@@ -262,11 +262,11 @@ _txt['Italic'] = 'Italic';
 
 You can create your own language file by copying/modifying this file. 
 
-## Adding Custon Buttons to the Sidebar
+## Adding Custom Buttons to the Sidebar
 
-To add custom buttons to the sidebar, use **addButton** method.
+To add custom buttons to the sidebar, use the **addButton** method.
 
-Here is an example of adding Undo & Redo button. For undo and redo operation, we call the **undo()** and **redo()** methods.
+Here is an example of adding the Undo & Redo button. For the undo and redo operation, we call the **undo()** and **redo()** methods.
 
 ```javascript
 builder.addButton({ 
@@ -316,15 +316,15 @@ builder.addButton({
 });
 ```
 
-Here we get the content and its styles using **html()**, **mainCss()**, and **sectionCss()** methods and save them into the browser's local storage. The content then will be used in the **preview.html** for viewing.
+Here we get the content and its styles using the **html()**, **mainCss()**, and **sectionCss()** methods and save them into the browser's local storage. The content will then be used in the **preview.html** for viewing.
 
 ## Embedding Box Cover (Background) Image
 
-In Box Settings, you can specify box's cover or background image.
+In the Box Settings, you can specify a box's cover or background image.
 
 ![Box Cover](docs/box-cover.png)
 
-However, for quick upload an image without opening the Box Settings, you can click the box's image button. This allows you to browse local images and select an image to upload as a box's image cover (background).
+However, to quickly upload an image without opening the Box Settings, you can click the box image button. This allows you to browse local images and select an image to upload as a box image cover (background).
 
 ![Box Cover](docs/box-cover2.png)
 
@@ -337,7 +337,7 @@ There are 2 methods for uploading cover image:
 
 #### Form Method
 
-Here we use **coverImageHandler** parameter to specify upload handler for saving image on the server.
+Here we use the **coverImageHandler** parameter to specify the upload handler for saving images on the server.
 
 ```javascript
 const builder = new ContentBox({
@@ -354,7 +354,7 @@ As examples, you can use the provided handler:
 
 #### AJAX Post Method
 
-Here we use **onUploadCoverImage** parameter to specify a custom upload function.
+Here we use the **onUploadCoverImage** parameter to specify a custom upload function.
 
 ```javascript
 const builder = new ContentBox({
@@ -383,7 +383,7 @@ const builder = new ContentBox({
 });
 ```
 
-Within the function we can use Axios to post an image to the server. Then the server should return the saved image url. Here we use **boxImage(url)** method to apply the image url as a background cover.
+Within the function we can use Axios to post an image to the server. Then the server should return the saved image url. Here we use the **boxImage(url)** method to apply the image url as a background cover.
 
 In this example, the image is posted to an endpoint: **/upload**
 If you’re using Node.js, you can implement the endpoint to save the image using:
@@ -420,7 +420,7 @@ let html = builder.html();
 let mainCss = builder.mainCss(); // Returns the default typography style for the page.
 let sectioncss = builder.sectioncss(); // Returns the typography styles for specific sections on the page
 ```
-You can save the HTML and its styles above into a database. And when you need to load the content back for editing, use **loadHtml()** and **loadStyles** methods.
+You can save the HTML and its styles above into a database. And when you need to load the content back for editing, use the **loadHtml()** and **loadStyles** methods.
 
 ```javascript
 builder.loadHtml(html);
@@ -453,9 +453,9 @@ builder.destroy();
 
 ## ContentBuilder.js Features
 
-ContentBox.js uses ContentBuilder.js as its HTML editor.  So most of the ContentBuilder.js options/parameters can be accessed through ContentBox.js object.
+ContentBox.js uses ContentBuilder.js as its HTML editor.  So most of the ContentBuilder.js options/parameters can be accessed through the ContentBox.js object.
 
-For example, to specify custom file browser (or Asset Manager):
+For example, to specify a custom file browser (or Asset Manager):
 
 ```javascript
 const builder = new ContentBox({
@@ -508,5 +508,5 @@ function uploadFile(e, callback) {
 }
 ``` 
 
-More configuration options can be found in ContentBuilder.js documentation: https://innovastudio.com/docs/contentbuilder.pdf
+More configuration options can be found in the ContentBuilder.js documentation: https://innovastudio.com/docs/contentbuilder.pdf
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innovastudio/contentbox",
-  "version": "1.0.12",
+  "version": "1.0.16",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [
@@ -38,11 +38,12 @@
     "webpack-dev-server": "^4.0.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.0.43",
+    "@innovastudio/contentbuilder": "^1.0.49",
     "axios": "^0.21.4",
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "express-session": "^1.17.2",
+    "js-beautify": "^1.14.0",
     "pace-js": "^1.2.4"
   }
 }