@innovastudio/contentbuilder 1.0.49 → 1.0.53

package/README.md

@@ -59,8 +59,6 @@ let html = builder.html();
 ```
 Then you can do anything with the html, for example, posting it to the server for saving, etc.
 
-Note that to run ContentBuilder.js, some assets (in assets/ folder) are needed, eg. for snippets, etc.
-
 ### Examples (HTML, PHP, React, Vue)
 
 ContentBuilder.js is written in pure Javascript (ES6) so you can use it in most situations. Sample use in simple HTML, PHP, React and Vue projects are included.
@@ -98,7 +96,7 @@ Snippet dialog opened.
 
 Snippet files are located in the folder:
 
-assets/minimalist-blocks/
+**assets/minimalist-blocks/**
 
 It contains:
 - content.js (snippets file)
@@ -114,7 +112,7 @@ const builder = new ContentBuilder({
     snippetPath: 'assets/minimalist-blocks/',  // Location of snippets' assets
 });
 ```
-In case of a different location, path adjustment may be needed. Here you can use the snippetPathReplace parameter.
+In case of a different location, path adjustment may be needed. Here you can use the **snippetPathReplace** parameter.
 
 Example:
 
@@ -125,8 +123,8 @@ const builder = new ContentBuilder({
     ...
 });
 ```
-In this example, the default location is changed to mycustomfolder/assets/minimalist-blocks/
 
+In this example, the default location is changed to **mycustomfolder/assets/minimalist-blocks/**
 
 ## Snippet Side Panel
 
@@ -148,7 +146,7 @@ Or load it programmatically:
 builder.loadSnippets('assets/minimalist-blocks/content.js');
 ```
 
-### Snippet Side Panel Configuration
+### Configuration
 
 Here are some options to configure the snippet side panel:
 
@@ -164,7 +162,7 @@ The default placement is 'right'. If set to 'left', the placement will be on the
 
 ![Side Panel on Left](docs/side-panel-on-left.png)
 
-#### Automatically open snippet side panel on the first load
+#### Open on the first load
 
 By default, the snippet side panel is closed. To open it on the first load:
 
@@ -227,7 +225,7 @@ You can enable the Snippet button on the toolbar for quick access to the snippet
 
 ![Add Snippet Button](docs/add-snippet-button.png)
 
-Now you can open the Snippet dialog from the toolbar by clicking the (+) button.
+Here you can open the Snippet dialog from the toolbar by clicking the (+) button.
 
 To enable the button:
 
@@ -252,7 +250,7 @@ builder.viewSnippets()
 
 With the Language file, you can translate the ContentBuilder.js interface into another language.
 
-The files provided language files:
+The provided language files:
 
 - contentbuilder/lang/en.js
 - contentbuilder/lang/en.js
@@ -281,7 +279,7 @@ You can create your own language file by copying/modifying this file.
 ContentBuilder.js allows you to insert icons. Some snippets are designed using icons as well.
 Icons are located in the assets folder:
 
-assets/ionicons/
+**assets/ionicons/**
 
 You can see the icons that are imported in the snippet css file (assets/minimalist-blocks/content.css):
 
@@ -300,49 +298,46 @@ const builder = new ContentBuilder({
 });
 ```
 
-## Custom File/Image Browser or Asset Manager Support
+## Custom File/Media Browser or Asset Manager Support
 
-You can specify your own custom file/image browser (or Asset Manager) to work with ContentBuilder.js.
+You can specify your own custom file/media browser (or Asset Manager) to work with ContentBuilder.js.
 
-As an example, a simple file/image browser is provided with some sample images that you can select and insert into your content.
+As an example, a simple file/media browser is provided with some sample images or videos that you can select and insert into your content.
 
-To configure, use the imageSelect and fileSelect parameter:
+To configure:
 
 ```javascript
 const builder = new ContentBuilder({
     container: '.container',
-    imageSelect: 'images.html',
-    fileSelect: 'files.html'
+    imageSelect: 'assets.html',
+    fileSelect: 'assets.html',
+    videoSelect: 'assets.html'
 });
 ```
 
-To try, click the link icon on a selected image to open the image dialog. Here you see a browse button displayed.
+To try, click the link icon (1) on a selected image to open the image dialog. On the image dialog, you see a browse button displayed (2).
 
 ![Image Dialog](docs/image-select.png)
 
-Click the browse button to open the image browser as specified (images.html).
+Click the browse button to open the file/media browser as specified (assets.html).
 
 ![Image Dialog](docs/image-browser.png)
 
 Then you can select an image.
 
-To try the file browser, create or edit a link. From the link dialog, you will see a browse button displayed.
+The file/media browser can also be opened from the link dialog and video settings dialog.
 
 ![Image Dialog](docs/file-select.png)
 
-Click the browse button to open the file browser as specified (files.html).
+Click the browse button to open the file/media browser as specified (the assets.html).
 
 ![Image Dialog](docs/file-browser.png)
 
-Then you can select a file.
-
-Please see images.html and files.html if you want to create your own file/image browser.
-Use the **selectImage()** or **selectFile()** function as shown in images.html and files.html to work with ContentBuilder.js. 
-So when you select a file or image, the url will be returned to ContentBuilder.js.
+Please see assets.html if you want to create your own file/image browser. Use the **selectAsset()** function as shown in assets.html to work with ContentBuilder.js. So when you select a file or image, the url will be returned to ContentBuilder.js.
 
 #### Using Custom Function 
 
-You can replace the **imageSelect** and **fileSelect** parameters with the **onImageSelectClick** and **onFileSelectClick** parameters that will run your own custom function.
+You can replace the **imageSelect**, **fileSelect** and **videoSelect** parameters with the **onImageSelectClick**, **onFileSelectClick** and **onVideoSelectClick** parameters that will run your own custom function.
 
 Example:
 
@@ -351,6 +346,7 @@ const builder = new ContentBuilder({
     container: '.container',
     onImageSelectClick: function () { ... }, 
     onFileSelectClick: function () { ... },
+    onVideoSelectClick: function () { ... },
 });
 ```
 
@@ -386,7 +382,7 @@ builder.saveImages('saveimage.php', function(){
 });
 ```
 
-Here you can specify a server side handler (saveimage.php) that performs the file saving on the server.
+Here you specify a server side handler (**saveimage.php**) that performs the file saving on the server.
 
 File saving on the server is not part of ContentBuilder.js and depends on your server environment. 
 As examples, you can use the provided handler:
@@ -448,13 +444,13 @@ app.post('/upload', (req, res) => {
 
 Example use of the AJAX post method can be seen on:
 - React Example (react-contentbuilder folder, please see src/components/contentbuilder/buildercontrol.jsx)
-- Vuew Example (vue-contentbuilder folder, please see src/components/Editable.vue)
+- Vue Example (vue-contentbuilder folder, please see src/components/Editable.vue)
 
-### Image Embed Configuration
+### Configuration
 
 Here are some options you can set to configure the image embed functionality:
 
-#### Image quality.
+#### Image Quality
 
 ```javascript
 const builder = new ContentBuilder({
@@ -463,7 +459,7 @@ const builder = new ContentBuilder({
 });
 ```
 
-#### Maximum width of the embedded base64 image.
+#### Maximum Width
 
 ```javascript
 const builder = new ContentBuilder({
@@ -473,7 +469,7 @@ const builder = new ContentBuilder({
 ```
 If maxEmbedImageWidth is set to -1, then no maximum width will be applied (will use original image width).
 
-#### Enable/disable embed image feature.
+#### Enable/Disable Embed Image Feature
 
 ```javascript
 const builder = new ContentBuilder({
@@ -485,7 +481,7 @@ If imageEmbed is set to false, the browse image button will not be displayed as
 
 ![Image Embed Disabled](docs/no-image-embed.png)
 
-#### Using custom function on browse image click.
+#### Using Custom Function on Browse Image Click
 
 ```javascript
 const builder = new ContentBuilder({
@@ -498,7 +494,7 @@ The function will be called when the browse image button is clicked.
 
 ![Image Browse Click](docs/on-image-browse-click.png)
 
-#### Using custom function image link/settings click.
+#### Using Custom Function on Image Link/Settings Click
 
 ```javascript
 const builder = new ContentBuilder({
@@ -524,14 +520,14 @@ There are 2 ways to enable the button:
 
 #### 1. Using Form Method
 
-Use the **largerImageHandler** parameter.
+Use the **mediaHandler** parameter. You can also use the **largerImageHandler** parameter (previous version) which is the same and still works. 
 
 Example:
 
 ```javascript
 const builder = new ContentBuilder({
     container: '.container',
-    largerImageHandler: 'saveimage-large.php' // or saveimage-large.ashx if you're using ASP.NET
+    mediaHandler: 'savemedia.php' // or savemedia.ashx if you're using ASP.NET
 });    
 ```
 
@@ -539,58 +535,127 @@ Here you specify a server side handler for uploading files.
 
 As examples, you can use the provided handler:
 
-- saveimage-large.php (for PHP)
-- saveimage-large.ashx (for ASP.NET)
+- savemedia.php (for PHP)
+- savemedia.ashx (for ASP.NET)
 
-By default, images are saved in the upload/ folder. You can change the upload folder by editing saveimage-large.php or saveimage-large.aspx. 
+By default, images are saved in the **upload/** folder. You can change the upload folder by editing **savemedia.php** or **savemedia.aspx**. 
 
 #### 2. Using AJAX Post Method
 
-Use the **onLargerImageUpload** parameter.
+Use the **onMediaUpload** parameter. You can also use the **onLargerImageUpload** parameter (previous version) which is the same and still works.
 
 Example:
 	
 ```javascript
 const builder = new ContentBuilder({
     container: '.container',
-    onLargerImageUpload: (e)=>{
+    onMediaUpload: (e)=>{
 
-        const selectedImage = e.target.files[0];
-        const filename = selectedImage.name;
+        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:image\/(png|jpeg);base64,/, '');
+            base64 = base64.replace(/^data:(.*?);base64,/, "");
+            base64 = base64.replace(/ /g, '+'); 
 
-            // Upload image process using axios (https://github.com/axios/axios)
-            axios.post(props.largerImageHandler, { image: base64, filename: filename }).then((response)=>{
+            // Upload process using axios (https://github.com/axios/axios)
+            axios.post('upload/', { image: base64, filename: filename }).then((response)=>{
 
-                const uploadedImageUrl = response.data.url; // get saved image url
-                builder.applyLargerImage(uploadedImageUrl); // set input
+                const uploadedFileUrl = response.data.url; // get saved file url
+                builder.returnUrl(uploadedFileUrl); // return the url
 
             }).catch((err)=>{
                 console.log(err)
             });
         }
-        reader.readAsDataURL(selectedImage);
+        reader.readAsDataURL(selectedFile);
 
     }
 });
 ```
 
-The example above uses the **applyLargerImage(url)** method to apply the uploaded image url back to the image dialog.
+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.
 
 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)
 
+## Video Upload from the Video Dialog
+
+A browse local video button can be enabled on the video dialog. This can be used to select and upload video (mp4 file) to the server.
+
+![Browse button](docs/upload-video.png)
+
+![Select video](docs/upload-video2.png)
+
+There are 2 ways to enable the button:
+
+
+#### 1. Using Form Method
+
+Use the **videoHandler** parameter. 
+
+Example:
+
+```javascript
+const builder = new ContentBuilder({
+    container: '.container',
+    videoHandler: 'savemedia.php' // or savemedia.ashx if you're using ASP.NET
+});    
+```
+
+Here you specify a server side handler for uploading files.
+
+As examples, you can use the provided handler:
+
+- savemedia.php (for PHP)
+- savemedia.ashx (for ASP.NET)
+
+By default, videos are saved in the **upload/** folder. You can change the upload folder by editing **savemedia.php** or **savemedia.aspx**.
+
+#### 2. Using AJAX Post Method
+
+Use the **onVideoUpload** parameter.
+
+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);
+
+    }
+});
+```
+
 ## Plugins
 
 With plugins, you can extend the ContentBuilder.js features. A plugin can add an additional button into the ContentBuilder.js toolbar. For example, a 'wordcount' plugin adds a button in the toolbar and when clicked, a dialog showing the word count info will be diplayed.
 
 ![Word Count Plugin](docs/wordcount.png)
 
-Plugin scripts are located in the plugins/ folder inside contentbuilder/.
+Plugin scripts are located in the **plugins/** folder inside **contentbuilder/**.
 
 You will see the folder containing some prebuilt plugins:
 - contentbuilder/plugins/buttoneditor
@@ -643,10 +708,10 @@ Here the Symbol button is not displayed on the element editing toolbar:
 
 An alternative way to load the plugins is by using a configuration file:
 
-contentbuilder/config.js
+**contentbuilder/config.js**
 
 If the plugins parameter is not set during initialization (as in the above example), ContentBuilder.js will automatically load this configuration file. 
-Sample configuration in config.js:
+Sample configuration in **config.js**:
 
 ```javascript
 _cb.settings.plugins = [
@@ -692,29 +757,15 @@ https://innovastudio.com/content-builder/module-development.aspx
 
 Note that module files are located in:
 
-assets/modules/
-
-You will see there are some prebuilt modules in the examples/reference folder (please see the above guide for details).
-
-If you want to change the location of the module files, please use the **modulePath** parameter:
-
-```javascript
-const builder = new ContentBuilder({
-    container: '.is-container',
-    modulePath: 'assets/modules/', 
-});
-```
-
-In case your module uses Javascript libraries, you can place them in:
-
-assets/scripts/
+**assets/modules/**
 
+You will see there are some prebuilt modules in the folder (please see the above guide for details).
 
 ## Your Own Snippets
 
 You can create or add your own snippets by customizing the snippet file:
 
-assets/minimalist-blocks/content.js
+**assets/minimalist-blocks/content.js**
 
 The snippet file is JSON formatted.
 
@@ -735,7 +786,9 @@ Here is an example of a snippet definition in the snippet file:
 
 A snippet needs to have a thumbnail, category number and HTML content. 
 
-Thumbnails are created & stored in the preview/ folder.
+Thumbnails are created & stored in the **preview/** folder:
+
+**assets/minimalist-blocks/preview/**
 
 Snippet categories you can use:
 
@@ -819,16 +872,134 @@ Four columns:
 </div>
 ```
 
-If you are using a css framework, such as Bootstrap or Foundation, this simple grid will be automatically converted to the framework grid. More details will be explained in css framework support.
-		
+Five columns:
+
+```html
+<div class="row clearfix">
+    <div class="column fifth">
+        ...
+    </div>
+    <div class="column fifth">
+        ...
+    </div>
+    <div class="column fifth">
+        ...
+    </div>
+    <div class="column fifth">
+        ...
+    </div>
+    <div class="column fifth">
+        ...
+    </div>
+</div>
+```
+
+Six columns:
+
+```html
+<div class="row clearfix">
+    <div class="column sixth">
+        ...
+    </div>
+    <div class="column sixth">
+        ...
+    </div>
+    <div class="column sixth">
+        ...
+    </div>
+    <div class="column sixth">
+        ...
+    </div>
+    <div class="column sixth">
+        ...
+    </div>
+    <div class="column sixth">
+        ...
+    </div>
+</div>
+```
+
+If you are using a css framework, such as Bootstrap or Foundation, this simple grid will be automatically converted to the framework grid you’re using.
+
+ContentBuilder.js has default maximum number of columns is set to 4. You can increase this limit by setting:
+
+```javascript
+const builder = new ContentBuilder({
+    container: '.container',
+    maxColumns: 5
+});
+```
+
+Other layouts you can use to create your own your snippets:
+
+```html
+<div class="row clearfix">
+    <div class="column two-third">
+        ...
+    </div>
+    <div class="column third">
+        ...
+    </div>
+</div>
+```
+
+Result:
+
+![Layout example](docs/two-third.png)
+
+```html
+<div class="row clearfix">
+    <div class="column two-fourth">
+        ...
+    </div>
+    <div class="column fourth">
+        ...
+    </div>
+</div>
+```
+
+Result:
+
+![Layout example](docs/two-fourth.png)
+
+```html
+<div class="row clearfix">
+    <div class="column two-fifth">
+        ...
+    </div>
+    <div class="column fifth">
+        ...
+    </div>
+</div>
+```
+
+Result:
+
+![Layout example](docs/two-fifth.png)
+
+```html
+<div class="row clearfix">
+    <div class="column two-sixth">
+        ...
+    </div>
+    <div class="column sixth">
+        ...
+    </div>
+</div>
+```
+	
+Result:
+
+![Layout example](docs/two-sixth.png)
+
 You can also add some behavior in your HTML snippets:
 
-- To make an image not replaceable, add the data-fixed attribute to the <img> element, for example:
+- To make an image not replaceable, add the **data-fixed** attribute to the <img> element, for example:
 ```html
 <img src=".." data-fixed />
 ```
 
-- To make a column not editable, add the data-noedit attribute to the column, for example:
+- To make a column not editable, add the **data-noedit** attribute to the column, for example:
 ```html
 <div class="row clearfix">
     <div class="column full" data-noedit>
@@ -837,7 +1008,7 @@ You can also add some behavior in your HTML snippets:
 </div>
 ```
 
-- To make a column not editable and cannot be deleted, moved or duplicated, add the data-protected attribute to the column, for example:
+- 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="column full" data-protected>
@@ -853,7 +1024,9 @@ There are 2 types of configuration:
 
 #### 1. If the framework has 12 columns grid system
 
-Specify the framework classes using the **row** & **cols** parameters. For example:
+Specify the framework classes using the **row** & **cols** parameters. 
+
+Example:
 
 Bootstrap Framework:
 
@@ -879,8 +1052,8 @@ const builder = new ContentBuilder({
 
 Specify two additional parameters: **colequal** & **colsizes**
 
-- colequal: list of all class combinations that have same width
-- colsizes: list of all class combinations in increment order
+- **colequal**: list of all class combinations that have same width
+- **colsizes**: list of all class combinations in increment order
 
 Example:
 
@@ -1471,13 +1644,13 @@ const builder = new ContentBuilder({
 		['#ffe9e0','light','contentbuilder/themes/light-red.css'],
 		['#fffae5','light','contentbuilder/themes/light-yellow.css'],
 		['#ddf3dc','light','contentbuilder/themes/light-green.css'],
-		['#d7f7f1','light','contentbuilder/themes/light-cyan.css'],
-
 		['#c7ebfd','light','contentbuilder/themes/light-blue2.css'],
+
 		['#ffd5f2','light','contentbuilder/themes/light-pink2.css'],
 		['#eadafb','light','contentbuilder/themes/light-purple2.css'],
 		['#c5d4ff','light','contentbuilder/themes/light-blue3.css'],
 		['#ffefb1','light','contentbuilder/themes/light-yellow2.css'],
+		['#fefefe','light','contentbuilder/themes/light-gray3.css'],
 		['#e5e5e5','light','contentbuilder/themes/light-gray2.css'],
 		['#dadada','light','contentbuilder/themes/light-gray.css'],
 
@@ -1704,9 +1877,30 @@ const builder = new ContentBuilder({
 Note: Use '|' for separator.
 
 **Allowed buttons for the main toolbar**: 
-addsnippet, bold, italic, underline, formatting, color, removeformat, align, textsettings, createlink, tags, undo, redo, zoom, icon, image, list, font, formatpara, gridtool, html, preferences, more, and plugin buttons (such as:  preview, wordcount, searchreplace, symbols).
-
-Note: 'more' buttons cannot be used in the second row toolbar.
+- addsnippet
+- bold
+- italic
+- underline
+- formatting
+- color
+- removeformat
+- align
+- textsettings
+- createlink
+- tags
+- undo
+- redo
+- zoom
+- icon
+- image
+- list
+- font
+- formatpara
+- gridtool
+- html
+- preferences
+- more (cannot be used in second row)
+- plugin buttons (such as: preview, wordcount, searchreplace, symbols)
 
 
 #### Element Toolbar
@@ -1717,11 +1911,11 @@ The default element toolbar shows the buttons as seen below:
 
 ![Element Toolbar](docs/toolbar-element.png)
 
-The second toolbar is displayed when you click the ... (more) button:
+When you click the … (more) button, a second row of buttons will be displayed:
 
 ![Second Toolbar](docs/toolbar-element-more.png)
 
-To configure the element toolbar, use the **elementButtons** parameter, and to configure the second element toolbar, use the **elementButtonsMore** parameter:
+To configure the element toolbar, use the **elementButtons** parameter, and to configure the second row buttons, use the **elementButtonsMore** parameter:
 
 ```javascript
 const builder = new ContentBuilder({
@@ -1732,9 +1926,19 @@ const builder = new ContentBuilder({
 ```
 
 **Allowed buttons for elementButtons**: 
-left, center, right, full, gridtool, html, preferences, addsnippet, undo, redo, zoom, more, and plugin buttons (such as:  preview, wordcount, searchreplace, symbols).
-
-Note: 'more' buttons cannot be used in the second row toolbar.
+- addsnippet
+- left
+- center
+- right
+- full
+- gridtool
+- html
+- preferences
+- undo
+- redo
+- zoom
+- more (cannot be used in second row)
+- plugin buttons (such as: preview, wordcount, searchreplace, symbols)
 
 #### Plugin Buttons
 
@@ -1794,6 +1998,23 @@ Here is the result.
 
 ![Example](docs/toolbar-example2.png)
 
+#### Icon Toolbar
+
+Another toolbar that is used is the icon toolbar which is displayed when an icon is selected.
+
+The icon toolbar shows the buttons as seen below:
+
+![Icon toolbar](docs/icon-toolbar.png)
+
+To configure the icon toolbar, use the **iconButtons** parameter, and to configure the second row buttons, use the **iconButtonsMore** parameter:
+
+```javascript
+const builder = new ContentBuilder({
+    container: '.container',
+    iconButtons: ['icon', 'color','textsettings', 'createLink','|', 'undo', 'redo', 'zoom', 'more'],  
+    iconButtonsMore: ['|', 'html', 'preferences'], 
+});
+```
 
 ## Undo & Redo
 
@@ -1856,7 +2077,7 @@ builder.destroy();
 
 ## Flexible Path
 
-ContentBuilder.js requires some assets located in the assets/ folder. For example, there are icons, optional scripts for module, etc.
+ContentBuilder.js requires some assets located in the **assets/** folder. For example, there are icons, optional scripts for module, etc.
 
 If you want to change the location of the assets/ folder, you can change the **assetPath** value:
 
@@ -1868,7 +2089,7 @@ const builder = new ContentBuilder({
 ```
 The **assetPath** value is required by the icons and optional scripts for module.
 
-There are some folders inside the assets/ folder:
+There are some folders inside the **assets/** folder:
 
 #### assets/fonts/
 This folder contains thumbnails for the font selection. You can change the location of this folder by changing the value of the **fontAssetPath** parameter:
@@ -1899,7 +2120,7 @@ const builder = new ContentBuilder({
 });
 ```
 
-Another location you may want to change is the plugins/ folder location, which contains plugin-related files.
+Another location you may want to change is the **plugins/** folder location, which contains plugin-related files.
 
 #### contentbuilder/plugins/
 Here you just need to specify the pluginPath parameter with the folder where the plugins/ folder is located. The default value is the contentbuilder/ folder. 
@@ -1911,3 +2132,16 @@ const builder = new ContentBuilder({
 });
 ```
 
+
+## Credits
+
+#### Libraries
+
+- CodeMirror, Copyright (C) 2017 by Marijn Haverbeke <marijnh@gmail.com> and others (MIT license), https://github.com/codemirror/CodeMirror
+- Cropper.js, Copyright 2015-present Chen Fengyuan (MIT license), https://fengyuanchen.github.io/cropperjs/
+- Ionicons, Copyright (c) 2015-present Ionic (http://ionic.io/) (MIT license), https://ionic.io/ionicons/v1
+- js-beautify, Copyright (c) 2007-2018 Einar Lielmanis, Liam Newman, and contributors (MIT license), https://github.com/beautify-web/js-beautify
+- Moveable, Copyright (c) 2019 Daybrush (MIT license), https://github.com/daybrush/moveable
+- Sortable, Copyright (c) 2019 All contributors to Sortable (MIT license), https://github.com/SortableJS/Sortable
+- Tabler Icons, Copyright (c) 2020 Paweł Kuna (MIT license), https://github.com/tabler/tabler-icons
+