How to build an online editor in Bubble

In the Data tab, create a Document Data Type with fields: title (text), content (text — stores HTML from the rich text editor), owner (User), last_saved (date), is_published (yes/no), and folder (text, optional for organization). Go to the Plugins tab and install a Rich Text Editor plugin — Bubble's built-in Rich Text Input element works for basic formatting, or install TinyMCE or Quill for advanced features like tables, code blocks, and image embedding. Create a 'document' page (type: Document) with the rich text editor element and a title input at the top.

On the document page, create a custom state called has_unsaved_changes (yes/no, default no). Whenever the rich text editor's content changes, set has_unsaved_changes to yes and display a subtle 'Unsaved changes' indicator. Create a 'Do when condition is true' event with the condition: has_unsaved_changes is yes. Set it to run every time the condition becomes true. In this workflow, add a pause of 2 seconds (debounce), then check if has_unsaved_changes is still yes. If so, use Make changes to Current Page's Document: content = Rich Text Editor's value, last_saved = Current Date/Time. Then set has_unsaved_changes to no and update the indicator to 'Saved'.

Create a Document_Version Data Type with fields: document (Document), content (text), version_number (number), saved_by (User), and saved_at (date). Modify the auto-save workflow: before saving, create a new Document_Version record with the current content, incrementing the version number. Add a 'Version History' button on the document page that opens a Popup showing a Repeating Group of Document_Versions sorted by version_number descending. Each row shows the version number, saved_by user, and saved_at date. Add a 'Restore' button that copies that version's content back to the document and the editor.

Create a Comment Data Type with fields: document (Document), author (User), text (text), created_at (date), and is_resolved (yes/no). On the document page, add a Comments sidebar with a Repeating Group showing all Comments for the current document sorted by created_at. Add a Multiline Input and 'Add Comment' button at the bottom. The workflow creates a new Comment linked to the document. Each comment shows the author name, timestamp, text, and a 'Resolve' checkbox. Use conditional formatting to grey out resolved comments.

Create a 'documents' page showing all documents the user has access to. Add a Repeating Group of Documents where owner = Current User, sorted by last_saved descending. Each row shows the title, last saved time, and published status. Add a 'New Document' button that creates a Document record with a default title and navigates to the editor page. Add right-click or dropdown menus with options: Rename, Duplicate, Delete, and Share (adds another user to an editors list field). Implement a search input to filter documents by title.