Q&A

Interface

• NodeEditor: uses by Pencil Web to render and edit a node.

Code Structure

• editor: Contains the core GoleryEditor, a pure text editor based on TipTap.
• components/Editor: Provides UI wrappers and composition for the editor, including NodeEditor, HtmlEditor, TitleEditor, and GoleryEditor.

Main Components

• NodeEditor: The top-level component for editing a node's content. It currently supports only HtmlEditor as its editing interface.
  • Structure: NodeEditor → HtmlEditor → TitleEditor + GoleryEditor
• HtmlEditor: Composes both TitleEditor (for editing the node title) and GoleryEditor (for editing the node body).

What are features of NodeEditors?

• Title Editing: Allows editing the node's title with instant update and focus control.
• Body Editing: Supports rich text editing of the node's body using HtmlEditor (which wraps GoleryEditor).
• Imperative API: Exposes methods (focusTitle, focusBody, getNodeContent) via ref for parent components to control focus and retrieve content.
• Debounced Save: Changes to title or body are debounced (default 1 second, configurable) before triggering onNodeChanged to avoid excessive updates.
• Immediate Title Callback: onTitleChanged is called immediately when the title changes, for real-time UI updates.
• Configurable Padding: Supports optional left/right padding for better layout control.
• Cleanup on Unmount: Ensures any pending debounced changes are flushed when the component unmounts or node changes.

CURRENT STATUS

Branch jsbundle

• Add DevWeb
• But it is not finished and it is not used in pencil_web. pencil_web is still a copy
• Refactor may break the pencil_flutter as well.

PUBLISH

• Publish publicly https://www.npmjs.com/package/@golery/editor

DEV ENVIRONMENT SETUP

1. Test at component level In packages/editor npm run dev and test for each component
2. Test intgration In package/editor: npm link In package/integration: npm link @golery/editor In pencils_web: npm link @golery/editor When changes in package, need to run npm build to generate output in dist folder. Those files are linked automatically to integration and dev_web.

DEV

3. For mobile: In main.tsx, set isDev=true
4. Rerender twice: this is expected as dev runs in "strictmode" where vite runs twice to detect leaks.
5. Build bundle: In package/editor: npm run build to output content to dist folder Check the result in integration folder and check in pencil_webs. Those has npm link to this module. Changes should reflect right away.

ARCHITECT

1. A tiptap editor is created.
2. A set of plugins that
   • returns TipTap extension for editing
   • renderView() to render in readonly mode

RELEASE

1. In main.tsx, set isDev=false
2. npm run build It build dist/index.html
3. npm run copy copy it to shared folder with vm
4. In Windows host copy it to flutter project cp /c/data/resources/vmshare/index.html /c/repos/pencil_flutter/assets/webview/