@innovastudio/contentbuilder 1.5.212 → 1.5.213

package/readme.txt

@@ -1,259 +1,330 @@
-ContentBuilder.js 5.6.6
+========================================================================
+ CONTENTBUILDER.JS 6.0.0
+========================================================================
 
-Note: If you have Source Code package (Super license), please refer to:
+Thanks for using ContentBuilder.js - a browser-based drag & drop HTML
+editor. This package contains the ready-to-use library plus HTML, PHP,
+and JavaScript examples showing how to run and configure it.
 
-    readme-sourcecode.txt
+This file is your starting point. It covers:
 
-    for additional information.
+    1. Getting started (run the examples)
+    2. Where things live (a map of the package)
+    3. How to customize
+    4. Working with an AI assistant (Claude, etc.)
+    5. Setting up the AI features (API keys)
+    6. Canvas mode
+    7. Upgrading to a new version
+    8. Documentation & support
 
-Documentation:
+If you have the Source Code package (Super License), also see
+readme-sourcecode.txt - it covers running and editing the library source.
 
-    https://github.com/innovastudio-dev/contentbuilder
 
-    https://demo.innovastudio.com/docs/ContentBuilder.pdf (old version)
+------------------------------------------------------------------------
+ 1. GETTING STARTED
+------------------------------------------------------------------------
 
+You can run the HTML, PHP, or JavaScript example. All you need for the
+HTML and JavaScript ones is Node.js / npm installed:
+https://nodejs.org/en/download/
 
-Getting started
 
-You can choose to run the HTML, PHP or JavaScript project examples:
+A. HTML EXAMPLE
 
-A. To try the HTML example:
+    1. Unzip the package (folder: ContentBuilder/)
 
-    1. Unzip the project files:
+    2. From a terminal, in the project folder, install the server
+       dependencies (the example uses a Node.js server):
 
-       - ContentBuilder/
+           > cd ContentBuilder
+           > npm install
 
-    2. Open terminal, go to the project directory and install the required server dependencies.
-       The example is using Node.js server.
+    3. Run the server:
 
-        > cd ContentBuilder
+           > node server.js
 
-        > npm install
+    4. Open in your browser:
 
-            Note: To run this command, you need to have NPM installed.
-            Download & install NPM from https://nodejs.org/en/download/.
+           http://localhost:8081/example1.html        (default example)
+           http://localhost:8081/example-canvas.html   (Canvas mode)
 
-    3. Run the server:
 
-        > node server.js
+B. PHP EXAMPLE
 
-    4. Open from your browser:
+    Open in your browser:
 
-        http://localhost:8081/example1.html (Default example)
+           http://localhost/.../public/example2.php
 
-        or
+    (In VS Code, the PHP Server extension is an easy way to serve it.)
 
-        http://localhost:8081/example-canvas.html (New Canvas Mode example)
 
+C. JAVASCRIPT PROJECT
 
-B. To try the PHP Example, open from your browser:
+    A small project that imports the library and configures it in code:
 
-    http://localhost/.../public/example2.php
- 
-    If you're using Visual Studio Code, you can use the PHP Server extension.
+           > npm install
+           > npm start
 
+    A browser window opens with the example running. The file to look
+    at is src/index.js (see the next section).
 
-C. To try the JavaScript project, install the dependencies and start the project:
 
-        > npm install
+------------------------------------------------------------------------
+ 2. WHERE THINGS LIVE
+------------------------------------------------------------------------
 
-        > npm start
+    src/index.js                 The JavaScript project's code: it
+                                 imports ContentBuilder (from the npm
+                                 package) and configures it. This is the
+                                 best place to learn how to wire up the
+                                 editor - uploads, AI providers, themes,
+                                 plugins - as real, working code you can
+                                 copy from.
 
-    A browser window will be opened with the example running.
+    public/                      Everything served in the browser:
+        example1.html              The main HTML example.
+        example-canvas.html        Canvas / freeform mode.
+        example2.php               The PHP example.
+        contentbuilder/            The built library + themes CSS.
+        assets/                    Snippets, plugins, font files.
+        assets/plugins/            The plugins (one folder each).
+        api/                       PHP backend endpoints (uploads, AI).
+        block/                     CSS/JS used by Canvas mode.
 
-    Note:
-        The code for this project is:
-            
-            src/index.js
+    server.js / server-aws.js    The Node.js backend for the examples
+                                 (uploads + AI endpoints). server-aws.js
+                                 is the same thing using S3 storage.
 
-        The project is using Node.js server:
+    .env                         Your API keys for the AI features
+                                 (see section 5). Needed only if you use
+                                 the AI-assisted features.
 
-            server.js
+    docs/                        Documentation, including the upgrade
+                                 guide.
 
+Note: this package contains the ready-to-use library, not its source.
+If you need to change how the library itself works, that's what the
+Source Code (Super License) package is for.
 
-NOTE:
 
-- To use the AI Assistant:
+------------------------------------------------------------------------
+ 3. HOW TO CUSTOMIZE
+------------------------------------------------------------------------
 
-    1. Obtain the API key from OpenAI or OpenRouter
-        
-        https://openai.com
+    1. CONFIGURE WITH OPTIONS.
+       Most behavior - toolbars, upload handlers, AI endpoints, themes -
+       is controlled by the options object passed to
+       "new ContentBuilder({...})". See src/index.js for a live example,
+       and docs/ for the full list of options and methods.
 
-        or
+    2. ADD FEATURES WITH PLUGINS.
+       A plugin is its own folder under public/assets/plugins/<name>/
+       (an index.js and a style.css), loaded via the "plugins" option.
+       The plugin docs sit right beside them:
 
-        https://openrouter.ai 
+           public/assets/plugins/README.md                 catalog
+           public/assets/plugins/plugin-dev-guide.md        how to build one
+           public/assets/plugins/plugin-example.md          worked example
+           public/assets/plugins/plugin-patterns.md         common patterns
+           public/assets/plugins/plugin-best-practices.md   conventions
 
-        Use OpenRouter if you want to use various models.
+       They're plain Markdown, so you can hand the folder to an AI
+       assistant as reference and just describe the plugin you want.
 
-    2. Update the .env file with your API key.
+    3. RESTYLE WITH CSS / THEMES.
+       The editor ships with prebuilt theme CSS in
+       public/contentbuilder/. Pick a theme via options, or add your own
+       CSS to override styles. (The SCSS theme sources, for building new
+       themes from scratch, come with the Source Code package.)
 
-        OPENAI_API_KEY=YOUR_OPENAI_API_KEY
 
-        or
+------------------------------------------------------------------------
+ 4. WORKING WITH AN AI ASSISTANT (CLAUDE, ETC.)
+------------------------------------------------------------------------
 
-        OPENROUTER_API_KEY=YOUR_API_KEY
+An AI coding assistant such as Claude Code can do a lot with this package
+alone. Point it at the project and it can read:
 
-    Or if you're using PHP, update the api/config.php file with your API key:
+    - docs/             - the documentation (options, methods, guides),
+    - src/index.js      - a real, working configuration to follow,
+    - assets/plugins/   - the plugin API and docs.
 
-        $OPENAI_API_KEY = 'YOUR_API_KEY';
+With those in the project, it can tell you which option to set for a
+given goal, adjust your src/index.js, or build a plugin against the real
+plugin structure - grounded in the actual API rather than guesswork.
 
-        or
+The Source Code package takes this further: with the full library source
+in your project, an assistant has the complete context to work from - so
+it builds with more confidence, and opens up a wider range of what you
+can create, grounded in how ContentBuilder really works.
 
-        $OPENROUTER_API_KEY = 'YOUR_API_KEY';
-        
-    3. Ensure that the sendCommandUrl parameter is set with the API endpoint:
 
-        const builder = new ContentBuilder({
-            // ...
-            sendCommandUrl: '/sendcommand',
-            // sendCommandUrl: '/openrouter', // Using OpenRouter (https://openrouter.ai/)
-        });
+------------------------------------------------------------------------
+ 5. SETTING UP THE AI FEATURES (API KEYS)
+------------------------------------------------------------------------
 
-        If you're using PHP:
+The AI Assistant and AI image generation are optional. They work once
+you add API keys and point the matching options at the endpoints. Most
+examples in the package already have these options set, so they run as
+soon as the keys are in place.
 
-        const builder = new ContentBuilder({
-            // ...
-            sendCommandUrl: 'api/sendcommand.php',
-            // sendCommandUrl: '/api/openrouter.php', // Using OpenRouter (https://openrouter.ai/)
-        });
+Add your own security to the API endpoints before going to production!
 
-        Most examples in the package have this parameter configured, so you can run and test them.
 
-        The JavaScript project example in this package uses Node.js for the API endpoint /sendcommand.
-        Please refer to the Node.js file:
+5.1  AI ASSISTANT
 
-            server.js
-            
-- For speech recognition (if dictation is enabled), the browser's built-in
-    speech recognition is used. However, certain browsers may not support this feature.
-    We recommend using Deepgram for browser compatibility and accuracy.
-    Obtain the Deepgram API key from https://deepgram.com and update the .env file with your API key.
-    Then enable the 'speechTranscribeUrl' parameter in the ContentBuilder initialization (src/index.js).
+    1. Get an API key from OpenAI or OpenRouter:
 
-- To use the AI image generation:
+           https://openai.com
+           https://openrouter.ai     (use this for access to many models)
 
-    - New version:
+    2. Add it to the .env file:
 
-        1. Obtain the API key from Fal.ai:
+           OPENAI_API_KEY=YOUR_OPENAI_API_KEY
+           OPENROUTER_API_KEY=YOUR_API_KEY
 
-            https://fal.ai 
-            
-        2. Update the .env file with your API key.
+       Or, for PHP, add it to api/config.php:
 
-            FAL_API_KEY=YOUR_API_KEY
+           $OPENAI_API_KEY = 'YOUR_API_KEY';
+           $OPENROUTER_API_KEY = 'YOUR_API_KEY';
 
-        Alternatively, if you're using PHP, update the 'api/config.php' file with your API key:
+    3. Set the sendCommandUrl option to the endpoint:
 
-            $FAL_API_KEY = 'YOUR_API_KEY';
+           const builder = new ContentBuilder({
+               // ...
+               sendCommandUrl: '/sendcommand',
+               // sendCommandUrl: '/openrouter',   // OpenRouter
+           });
 
-        3. Obtain the API key from OpenAI
-            
-            https://openai.com
+       For PHP:
 
-        4. Update the .env file with your API key.
+           const builder = new ContentBuilder({
+               // ...
+               sendCommandUrl: 'api/sendcommand.php',
+               // sendCommandUrl: '/api/openrouter.php',   // OpenRouter
+           });
 
-            OPENAI_API_KEY=YOUR_OPENAI_API_KEY
+    The JavaScript project serves these endpoints from server.js.
 
-        Or if you're using PHP, update the api/config.php file with your API key:
 
-            $OPENAI_API_KEY = 'YOUR_API_KEY';
+5.2  AI IMAGE GENERATION
 
-        5. Ensure that the following parameters are set:
+    Current provider - Fal.ai:
 
-            const builder = new ContentBuilder({
-                // ...
+    1. Get an API key from https://fal.ai and add it to .env:
 
-                defaultImageGenerationProvider: 'fal',
-                generateMediaUrl_Fal: '/request-fal',
-                checkRequestStatusUrl_Fal: '/status-fal',
-                getResultUrl_Fal: '/result-fal',
-            });    
+           FAL_API_KEY=YOUR_API_KEY
 
-            If you're using PHP:
+       (PHP: add $FAL_API_KEY = 'YOUR_API_KEY'; to api/config.php)
 
-            const builder = new ContentBuilder({
-                // ...
+    2. Also add an OpenAI key (https://openai.com) to .env:
 
-                defaultImageGenerationProvider: 'fal',
-                generateMediaUrl_Fal: 'api/request-fal.php',
-                checkRequestStatusUrl_Fal: 'api/status-fal.php',
-                getResultUrl_Fal: 'api/result-fal.php',
-            });   
+           OPENAI_API_KEY=YOUR_OPENAI_API_KEY
 
+       (PHP: $OPENAI_API_KEY = 'YOUR_API_KEY'; in api/config.php)
 
-    - Legacy version:
+    3. Set these options:
 
-        1. Obtain the API key from Getimg:
-        
-            https://getimg.ai/tools/api 
+           const builder = new ContentBuilder({
+               // ...
+               defaultImageGenerationProvider: 'fal',
+               generateMediaUrl_Fal: '/request-fal',
+               checkRequestStatusUrl_Fal: '/status-fal',
+               getResultUrl_Fal: '/result-fal',
+           });
 
-        2. Update the .env file with your API key.
+       For PHP:
 
-            GETIMG_API_KEY=YOUR_API_KEY
+           const builder = new ContentBuilder({
+               // ...
+               defaultImageGenerationProvider: 'fal',
+               generateMediaUrl_Fal: 'api/request-fal.php',
+               checkRequestStatusUrl_Fal: 'api/status-fal.php',
+               getResultUrl_Fal: 'api/result-fal.php',
+           });
 
-        Alternatively, if you're using PHP, update the 'api/config.php' file with your API key:
 
-            $GETIMG_API_KEY = 'YOUR_API_KEY';
+    Legacy provider - Getimg.ai:
 
-        3. Ensure that the following parameters are set:
+    1. Get an API key from https://getimg.ai/tools/api and add it to .env:
 
-            const builder = new ContentBuilder({
-                // ...
-                    
-                textToImageUrl: '/texttoimage', 
-                upscaleImageUrl: '/upscaleimage',
-                imageModel: 'flux-schnell',
-                imageAutoUpscale: false,
-                // viewFileUrl: '/viewfile', // If using S3
-            });
+           GETIMG_API_KEY=YOUR_API_KEY
 
-            If you're using PHP:
+       (PHP: add $GETIMG_API_KEY = 'YOUR_API_KEY'; to api/config.php)
 
-            const builder = new ContentBuilder({
-                // ...
-                    
-                textToImageUrl: 'api/texttoimage.php', 
-                upscaleImageUrl: 'api/upscaleimage.php',
-                imageModel: 'flux-schnell',
-                imageAutoUpscale: false,
-            });
+    2. Set these options:
 
+           const builder = new ContentBuilder({
+               // ...
+               textToImageUrl: '/texttoimage',
+               upscaleImageUrl: '/upscaleimage',
+               imageModel: 'flux-schnell',
+               imageAutoUpscale: false,
+               // viewFileUrl: '/viewfile',   // if using S3
+           });
 
-    Most examples in the package have this parameter configured, so you can run and test them.
+       For PHP:
 
-    The JavaScript project example in this package uses Node.js for the API endpoints.
-    Please refer to the Node.js file:
+           const builder = new ContentBuilder({
+               // ...
+               textToImageUrl: 'api/texttoimage.php',
+               upscaleImageUrl: 'api/upscaleimage.php',
+               imageModel: 'flux-schnell',
+               imageAutoUpscale: false,
+           });
 
-        server.js
-             
-             
-- IMPORTANT: 
+    The JavaScript project serves these endpoints from server.js.
 
-    Please add your own security to the API endpoints!
 
-    
-- New Canvas Mode
+------------------------------------------------------------------------
+ 6. CANVAS MODE
+------------------------------------------------------------------------
 
-Canvas mode is a new option for seamless (gridless) block positioning. Simply activate with:
+Canvas mode is an option for seamless (gridless) block positioning:
 
     const builder = new ContentBuilder({
         container: '.container',
         canvas: true,
-        previewURL:'preview-canvas.html'
+        previewURL: 'preview-canvas.html',
     });
 
-And include additional JavaScript and CSS:
+It also needs these includes:
 
     <link href="block/block.css" rel="stylesheet">
-    <script src="block/block.js">
+    <script src="block/block.js"></script>
+
+See example-canvas.html in the package.
+
+
+------------------------------------------------------------------------
+ 7. UPGRADING TO A NEW VERSION
+------------------------------------------------------------------------
+
+Updates are backward compatible - your existing content and code keep
+working. You replace the package folders with the new ones:
+
+    public/contentbuilder/
+    public/assets/
+    public/runtime/
+    preview.html
+
+And if you install from npm, also update the editor script:
 
-You can try 'example-canvas.html' in the package.
+    > npm i @innovastudio/contentbuilder@latest
 
+Full step-by-step instructions, including the optional Runtime library
+that renders the new plugins, are in:
 
+    upgrading-contentbuilder.md
 
 
+------------------------------------------------------------------------
+ 8. DOCUMENTATION & SUPPORT
+------------------------------------------------------------------------
 
-_____________________________________________
-SUPPORT:
+    Documentation:  docs/README.md
+                    https://github.com/innovastudio-dev/contentbuilder
+    Upgrade guide:  upgrading-contentbuilder.md
 
-Email us at: support@innovastudio.com
+    Questions? Email us at: support@innovastudio.com

package/public/contentbuilder/config.js

@@ -1,7 +0,0 @@
-//PLUGINS
-// _cb.settings.plugins = ['preview','wordcount', 'symbols']; // old way
-_cb.settings.plugins = [
-    { name: 'preview', showInMainToolbar: true, showInElementToolbar: true },
-    { name: 'wordcount', showInMainToolbar: true, showInElementToolbar: true },
-    { name: 'symbols', showInMainToolbar: true, showInElementToolbar: false },
-];