A client-side web application for parsing Microsoft Word (
.docx) documents, organizing article structure, previewing content, and publishing directly to RanchiMall Times.
- Overview
- Publishing Workflow
- Integrated Technologies
- Key Features
- User Guide & Step-by-Step Walkthrough
- Interface Reference
- Keyboard Shortcuts
- Technical Architecture
The Article Publisher Agent streamlines and automates the entire publishing pipeline for RanchiMall Times. Authors and editors can upload standard Microsoft Word (.docx) documents, automatically parse and classify headings/sections, review and fine-tune article structure with live controls, preview the formatted output, and publish securely to RanchiMall SuperNodes.
All document processing and cryptographic operations are executed entirely within the client's browser environment—ensuring complete data privacy and high performance.
The complete end-to-end publishing pipeline consists of seven distinct stages:
| Stage | Component | Purpose |
|---|---|---|
| 1 | Browser Client | Reads the .docx file locally using JSZip and DOMParser. No server-side processing occurs. |
| 2 | Content Extraction | Extracts headings, paragraphs, tables, formatting, and embedded images while preserving document structure. |
| 3 | GitHub Image Hosting | Uploads extracted images to the ranchimall/rmtimes repository and replaces local references with hosted image URLs. |
| 4 | Cryptographic Authentication | Uses floCrypto.js to derive the author's FLO identity from their WIF key and digitally authenticate the submission. |
| 5 | Decentralized Submission | Sends the authenticated publishing request to RanchiMall SuperNodes via floCloudAPI.sendGeneralData(). |
| 6 | Editorial Approval | RM Times administrators review the submitted article before publication. |
| 7 | Publication | Once approved, the article becomes available on the live RM Times website. |
| Technology | Role |
|---|---|
| JSZip | Reads and extracts .docx archives entirely in the browser. |
| DOMParser | Parses Word XML into HTML content. |
| GitHub REST API | Hosts embedded images and hero images in the ranchimall/rmtimes repository. |
| floCrypto.js | Generates FLO identity and signs submissions. |
| floCloudAPI | Stores authenticated publishing requests on RanchiMall SuperNodes. |
- Pure Client-Side Parsing: Extracts text, inline styles, bullet lists, embedded tables, and images directly in the browser.
- Smart Heading Classifier: Auto-identifies potential section headings based on Word styles and typography heuristics.
- Clean Section Grouping: Groups paragraphs dynamically under
Section 1,Section 2,Section 3, etc. - Fullscreen Selection Mode: Expands the entire structure review panel to full viewport height (
100vw × 100vh) with ample vertical space for long articles. - Inline Header Editing: Rename any section header or document title directly inside the UI.
- Collapsible Sections: Expand or collapse individual sections or all sections at once.
- One-Click Export:
- JSON Export: Clean, structured article payload with headings, sections, read-time calculation, and metadata.
- HTML Preview: Standalone, fully styled HTML file ready for local offline verification.
- Direct SuperNode Publishing: Direct integration with RanchiMall SuperNodes and Floyd blockchain identity.
- Open
article_publisher_agent_latest.htmlin any modern web browser. - Click "Choose Article .docx File" and select your Word document.
- The parser processes the document and automatically displays the Review Detected Structure panel.
- Checkbox Logic:
- Checked Items: Treated as Section Titles (rendered as
<h2>headings in the published article). - Unchecked Items: Treated as standard Body Paragraphs nested under the preceding section header.
- Checked Items: Treated as Section Titles (rendered as
- Dynamic Re-numbering: Checking or unchecking an item immediately updates the structure and renumbers sections (
Section 1,Section 2, etc.) in real-time. - Collapse / Expand All: Use the toolbar buttons to quickly collapse all sections for a bird's-eye view, or expand them to inspect body text.
For long articles with dozens of sections and paragraphs:
- Click the
⛶ Fullscreen Viewbutton in the top-right corner of the Review panel. - The panel expands to fill your entire browser window.
- Enjoy an expanded, high-visibility workspace with smooth scrolling.
- To exit:
- Click
✕ Exit Fullscreen - Or press the
Escape(Esc) key on your keyboard.
- Click
- Article Title: Edit the main document title directly in the "Article Title" input box.
- Section Titles: Click the "Edit" button next to any section header row to rename it inline. Press
Enteror clickSaveto apply.
- Once your structure is configured, click "Confirm & Build Article".
- A green confirmation badge displays article stats (Section count, estimated reading time, image count).
- The review checklist automatically collapses to keep the page tidy, and can be reopened anytime by clicking "Review / Edit Sections".
Once confirmed, two download buttons appear near the top file picker:
- Download JSON: Generates a formatted JSON payload containing the structured article data.
- Download Preview HTML: Generates a self-contained HTML preview file matching the RanchiMall Times visual layout.
- (Optional) Click "Choose Hero Image" to attach a cover banner for the article.
- Choose your Login Type (e.g., Keystore file, Floyd key, or direct credentials).
- Click "Start Direct Creator & Publish".
- Monitor the live log feed to verify upload, image sync, and blockchain transaction confirmation.
| Control / Element | Location | Description |
|---|---|---|
| Choose Article .docx File | Top Area | Uploads and parses the input .docx file. |
| ⛶ Fullscreen View | Review Header | Expands the selection checklist to full screen (Esc to exit). |
| Article Title Input | Review Top | Editable field for the main publication headline. |
| Collapse All / Expand All | Review Toolbar | Toggles all section bodies simultaneously. |
| Section Item Checkbox | Item Row | Toggles between Section Title (Checked) and Paragraph (Unchecked). |
| Edit Button | Section Row | Inline editor for renaming section headers. |
| Reset to Detected | Review Footer | Reverts all selections and edits back to the initial auto-detected state. |
| Confirm & Build Article | Review Footer | Finalizes the structure, calculates read time, and prepares publish payload. |
| Download JSON / Preview | File Picker Area | Exports the generated article schema or HTML preview. |
| Shortcut | Context | Action |
|---|---|---|
Esc |
Fullscreen Mode | Exits Fullscreen View back to standard inline layout. |
Enter |
Section Title Inline Edit | Saves the modified section title. |
Esc |
Section Title Inline Edit | Cancels inline editing and restores previous title text. |
[ .docx Word Document ]
│
▼
[ Client-Side OOXML Parser (JSZip & DOMParser) ]
├── Document Body XML (`word/document.xml`)
├── Styles Mapping (`word/styles.xml`)
├── Relationships & Media (`word/media/*`)
└── Tables & Formatting
│
▼
[ Flat Items Representation ]
├── Auto-Classification (Heuristics & Styles)
└── Interactive Heading State Map
│
▼
[ Structure Review UI (Normal / Fullscreen) ]
├── Live DOM Grouping & Renumbering (`Section N`)
├── Inline Title Renaming
└── Toggleable Section Nodes
│
▼
[ Content Sanitization (DOMPurify) & Payload Builder ]
│
├──► [ JSON & Preview HTML Export ]
├──► [ GitHub REST API Image Hosting ]
└──► [ RanchiMall SuperNodes via floCloudAPI & floCrypto.js ]
Internal tooling developed for RanchiMall Times. All document processing and cryptographic operations are executed locally within the client's browser environment.