proposal-studio 0.1.2 → 0.2.0

package/README.md

@@ -19,9 +19,8 @@ This is the **complete editor UI** — top toolbar, left component palette
 (Templates / History), the canvas, and the right Properties / Data Binding /
 Style panels — bundled into one self-contained document. The whole thing runs
 inside an isolated, same-origin `iframe`, so its internal Angular runtime /
-jQuery / Froala / globals **never collide** with your host app (which can be a
-different Angular version, React, Vue, …), and you can mount **multiple
-editors** on one page.
+globals **never collide** with your host app (which can be a different Angular
+version, React, Vue, …), and you can mount **multiple editors** on one page.
 
 > **Sizing:** the editor is a full app with its own internal scrolling, so give
 > it a height — e.g. `<proposal-studio style="height:90vh">`. It defaults to
@@ -33,6 +32,18 @@ editors** on one page.
 
 ---
 
+## Live Demo
+
+**Try it instantly — no install, no sign-up:**
+
+👉 **[proposal-studio live demo](https://proposal-builder-mani.vercel.app/)**
+
+The demo runs the full editor in the browser. You can drag blocks, edit rich text,
+resize images, draw shapes, use zoom shortcuts, and measure distances between
+elements — everything described below works live.
+
+---
+
 ## Install
 
 ```bash
@@ -45,10 +56,6 @@ Or use it straight from a CDN, no build step:
 <script src="https://unpkg.com/proposal-studio"></script>
 ```
 
-> **Internet note:** rich-text editing loads Froala + Font Awesome + jQuery from
-> a CDN at runtime. The editor needs network access on first paint. Froala is a
-> commercial product — see [Licensing](#licensing).
-
 ---
 
 ## Quick start (plain HTML)
@@ -129,6 +136,110 @@ framework.
 
 ---
 
+## Features
+
+### Custom Rich Text Editor (no licence required)
+
+The editor ships a **built-in, dependency-free rich-text engine** (`CustomRichEditor`)
+that replaces the commercial Froala editor. No CDN calls, no third-party licence.
+The engine is controlled by a single flag in `canvas-config.js`:
+
+```js
+// canvas-config.js
+editor: {
+  useFroala: false,   // default — uses the built-in CustomRichEditor
+  // useFroala: true  // opt back in to Froala (requires a Froala licence)
+}
+```
+
+**`useFroala: false` (default)** — fully self-contained:
+- Bold · italic · underline · strikethrough · subscript · superscript
+- Heading styles (H1–H6, applied inline so only the selected run is styled)
+- Font family · font size · line height · letter spacing
+- Text case (UPPER / Capitalize / lower / as-typed)
+- Text colour · highlight colour
+- Align left / center / right / justify
+- Ordered / unordered lists · outdent / indent
+- Insert / edit / remove links
+- Clear formatting · undo / redo
+- Toolbar placement: **inline** (floats above the active block) or **docked**
+  (sticky strip pinned to the top of the canvas — toggled from Page Settings)
+
+**`useFroala: true`** — reverts to the legacy Froala engine (commercial licence
+required; jQuery + Font Awesome loaded from CDN).
+
+### Figma-style Distance Measurement
+
+Hold **Ctrl** (or **⌘** on Mac) while hovering another free-positioned block to
+see the pixel gap between the two elements — exactly like Figma's measure mode:
+
+- Selected block gets a solid reference outline
+- Hovered block gets a dashed marching-ants outline
+- Red measurement lines + px value badges appear between them
+- **Smart geometry:** side-by-side → horizontal gap; stacked → vertical gap;
+  diagonal → both gaps + dotted extension lines; overlapping → four inset distances
+
+The overlay is editor-only chrome and never appears in the exported HTML/PDF.
+
+### Canvas Zoom Shortcuts
+
+Ctrl/⌘ + `+` / `-` / `0` zoom the canvas regardless of where focus sits — even
+when the cursor is inside the editor iframe (where the browser would otherwise
+hijack the shortcut for page zoom):
+
+| Shortcut                  | Action       |
+| ------------------------- | ------------ |
+| `Ctrl / ⌘  +` or `=`     | Zoom in      |
+| `Ctrl / ⌘  -`             | Zoom out     |
+| `Ctrl / ⌘  0`             | Reset to 100%|
+| `Ctrl / ⌘  + mouse wheel` | Zoom in/out  |
+
+The zoom label in the toolbar stays in sync in real time.
+
+### Inline Block Insert (`+` button)
+
+A hover-activated **`+`** button appears on the left edge of the current
+insertion line in flow-canvas mode. Clicking it opens a block picker and inserts
+the chosen block at that exact position — the same create/place path used by
+sidebar drag-and-drop.
+
+### Rulers and Alignment Guides
+
+Horizontal and vertical rulers line the canvas edge. Drag from either ruler to
+create a **draggable alignment guide** that snaps blocks during positioning.
+Toggle the feature via the `EditorFeatures.rulersGuides` flag:
+
+```js
+window.EditorFeatures = { rulersGuides: false }; // hide rulers + guides
+```
+
+### Image Cropper
+
+Double-click an image block to enter crop mode — drag the crop handles to trim
+the image, then confirm. The original asset is preserved; the crop is applied as
+CSS `object-fit` / `object-position`, so re-cropping is always non-destructive.
+
+### Image Frame Shape Picker
+
+Images can be masked into custom shapes (circle, rounded rectangle, polygon,
+star, and more) using the frame shape picker in the right Properties panel.
+Switching shapes re-applies the mask without disturbing the image or crop state.
+
+### Feature Flags
+
+Every major sub-feature can be switched off without touching editor code:
+
+```js
+// Set BEFORE the editor loads (e.g. in a <script> tag before the import).
+window.EditorFeatures = {
+  rulersGuides:    false, // hide rulers + guides
+  measureDistance: false, // disable Figma-style distance overlay
+  zoomShortcuts:   false, // disable Ctrl/⌘ zoom keyboard shortcuts
+};
+```
+
+---
+
 ## API
 
 ### Properties
@@ -193,7 +304,10 @@ Edit the Angular UI under `src/app/` or the canvas engine under
 
 ## Licensing
 
-This package is MIT licensed. It loads the **Froala** WYSIWYG editor from a CDN
-at runtime for rich-text editing; Froala is a commercial product and production
-use may require a license from <https://froala.com>. The MIT license here covers
-only the `proposal-studio` code, not third-party Froala/jQuery/Font Awesome.
+This package is MIT licensed. The default rich-text engine (`useFroala: false`)
+is fully self-contained and carries no third-party obligations.
+
+If you opt in to `useFroala: true`, the editor loads the commercial **Froala**
+WYSIWYG editor from a CDN at runtime; Froala production use requires a licence
+from <https://froala.com>. The MIT licence here covers only the
+`proposal-studio` code, not third-party Froala / jQuery / Font Awesome.