Editor iframe Integration

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• README.en.md
• CONTRIBUTING.md
• orca.yaml
• SECURITY.md
• CODE_OF_CONDUCT.md

The Editor iframe Integration is a core architectural component of the OpenHWP project designed to facilitate document editing by embedding a specialized editor UI. It serves as a bridge between the thin Deno-based desktop shell and the document engine. By utilizing an iframe-based approach, the project separates the platform-specific shell logic from the complex document manipulation and rendering logic.

This integration specifically leverages the @rhwp/editor package, which provides a full editor user interface. This UI is hosted within the application's webview—rendered by the Chromium Embedded Framework (CEF)—allowing for a consistent editing experience across macOS, Windows, and Linux without requiring native office suites.

Sources: README.en.md:5-13, README.en.md:33-35

Architecture and Component Separation

OpenHWP follows a decoupled architecture where document concerns are delegated to external engines, while the desktop shell manages the native environment. The Editor iframe Integration is the primary mechanism for the "Editor" phase of the project roadmap.

The "Thin Shell" vs. "Document Engine"

The system is divided into three distinct layers:

1. Platform Shell: Built with deno desktop, it provides the native window and Deno.serve() capabilities.
2. Rendering Backend: Uses CEF (Chromium) to ensure identical rendering of the iframe content across all operating systems.
3. Editor UI (iframe): The @rhwp/editor component, which is loaded as an npm package and embedded as an iframe.

The following diagram illustrates the relationship between these components:

Implementation Details

The integration is initialized via JavaScript within the application's secure context (localhost). The createEditor function from the @rhwp/editor package is used to instantiate the editor within a designated DOM element.

Editor Initialization

To embed the editor, developers target a specific selector (e.g., #editor) and invoke the editor creation utility. This asynchronously sets up the iframe environment.

import { createEditor } from "@rhwp/editor";

// Initializes the full editor UI embedded as an iframe
const editor = await createEditor("#editor");

Sources: README.en.md:33-37, README.md:36-40

Data Flow and File System Persistence

The Editor iframe Integration relies on the modern File System Access API supported by the CEF backend. This allows the editor to interact directly with the local file system for opening and saving .hwp or .hwpx files.

1. Loading: A FileSystemFileHandle is obtained via window.showOpenFilePicker.
2. Editing: The file bytes are passed to the document engine.
3. Saving: The application reuses the handle to create a writable stream, enabling "Save" and "Save As" operations.

Key Components and Features

Component	Type	Description
@rhwp/editor	npm Package	The full UI suite for document editing, intended for iframe embedding.
createEditor	Function	Asynchronous method to initialize the editor iframe within a DOM container.
CEF (Chromium)	Backend	The rendering engine that provides high-fidelity web API support for the iframe.
FileSystemFileHandle	Interface	Used to maintain state for file persistence between the shell and the editor.

Sources: README.en.md:19-21, README.en.md:33-37, README.en.md:70-73

Roadmap and Status

As of the current project status, the Editor iframe Integration is a primary focus of the Roadmap Phase 2. While the project scaffold and documentation are established, the full wiring between the iframe, native menus, and FileSystemFileHandle is part of the ongoing implementation.

• Current State: Project scaffold and documentation define the integration pattern.
• Next Steps: Implementation of main.ts and UI components to host @rhwp/editor.
• Planned Features: Native menu integration and multi-window support for multiple editor instances.

Sources: README.en.md:11-13, README.en.md:70-73, CONTRIBUTING.md:27-30

The Editor iframe Integration is essential for OpenHWP to provide a robust editing experience while keeping the core application lightweight and cross-platform compatible. By delegating the UI and rendering to @rhwp/editor within a CEF-backed iframe, the project ensures that complex HWP document layouts are handled consistently across all desktop environments.

Sources: README.en.md:15-22, README.md:15-22