── QUICK SETUP
1. Drag the BlockDocs element onto your page.
2. Set the Width to your desired value (e.g. 100%).
3. In the Layout tab, enable "This element can fit height to content" so the editor grows as the user types.
4. The editor is ready — no API keys required.


── PROPERTIES

• Placeholder (text)
 Text shown when the editor is empty.
 Default: "Start writing..."

• Initial Data (text)
 Pre-load the editor with existing content.
 Pass the value of the "Editor Data" state saved in your database.
 Leave blank to start with an empty editor.

• Read Only (yes/no)
 When set to Yes, all editing controls are hidden and the content is non-interactive.
 Use a workflow condition to toggle between view and edit modes.

• Autofocus (yes/no)
 When set to Yes, the editor receives focus automatically on page load.


── STATES

• editor_data (text)
 The full editor content as an encrypted JSON string.
 Save this value to your database on every change — the editor auto-publishes it via the "content_changed" event.

• block_count (number)
 The current number of content blocks in the editor.
 Use this to show a word/block count, or to disable a Save button when the editor is empty.

• is_ready (yes/no)
 Becomes Yes once the editor has finished initializing.
 Use this to show a loading indicator while the editor loads.


── EVENTS

• editor_ready
 Fired once when the editor finishes loading.
 Use this to hide a loading spinner or run initialization logic.

• content_changed
 Fired every time the user adds, edits, or deletes a block.
 Use this to auto-save: trigger a "Make changes to a Thing" action and set your field to BlockDocs's "Editor Data" state.


── ELEMENT ACTIONS

• Clear
 Resets the editor to a blank state and clears all blocks.
 Trigger this from any workflow — e.g. a "New document" button.


── SAVING & LOADING DATA

SAVE (auto-save pattern):
 Trigger: BlockDocs → content_changed
 Action:  Make changes to Thing → set [YourField] = BlockDocs's Editor Data

LOAD (on page load):
 Set the "Initial Data" property to: [YourThing]'s [YourField]
 The editor will decrypt and render the stored content automatically.


── STYLING

BlockDocs inherits Bubble's native element styles:
 • Background color, font, text color, border, box shadow
 → All configurable in Bubble's Style panel. No custom CSS required.


── TIPS

• Read-only display: add a second BlockDocs element, pass the saved "Editor Data" as Initial Data, and set Read Only = Yes.
• Empty check: block_count = 0 when the editor is empty — use this to show/hide a placeholder message.
• Reset: use the "Clear" workflow action to programmatically reset the editor (e.g. after form submission).