open-index/open-npm huggingface dataset:
npm package: @golery/editor
Description: - NodeEditor: uses by Pencil Web to render and edit a node.
Latest version: 1.0.5

# 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   
3. In Windows host copy it to flutter project
   cp /c/data/resources/vmshare/index.html /c/repos/pencil_flutter/assets/webview/