In-Browser Editor Using Intermediary DOM
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
In-browser editors using contentEditable and innerHTML are unreliable for maintaining the integrity of original source code during mark-up language editing, as they lose formatting, whitespace, and capitalization, and exhibit inconsistencies across different browsers due to varying implementations.
Innovation Solution
A system comprising a Parser that converts input strings to an Intermediary DOM, which maintains all original data including whitespace and parse errors, linked to a native Browser DOM for display, with event handling and selection management to ensure accurate reflection of edits and user interactions, allowing for consistent editing across browsers.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If contentEditable and innerHTML are used for in-browser editing, then basic rich text manipulation is enabled, but the integrity of the original source code is lost
Solution Approach 1:
The patent introduces an intermediary data structure that sits between the Browser DOM and the original source code. This intermediary structure captures and preserves all original source code information including whitespace, formatting, and capitalization, while still allowing the Browser DOM to perform rich text manipulation. The intermediary acts as a mediator that translates between the Browser DOM operations and the original source code representation, preventing information loss.
2Ease of operation
If Browser DOM is used directly for editing, then display functionality is provided, but inconsistencies occur across different browsers
Solution Approach 1:
The patent uses an intermediary data structure that serves as a common representation layer between different browser implementations. This intermediary structure standardizes the data format and behavior, allowing consistent editing operations across browsers while still leveraging each browser's native display capabilities through the Browser DOM.
3Ease of operation
If contentEditable is used, then in-browser editing capability is provided, but selection handling becomes unreliable
Solution Approach 1:
The patent introduces an intermediary selection data structure that captures and manages user selections independently of browser-specific implementations. This intermediary selection handler translates browser-native selection events into a standardized representation, ensuring reliable and consistent selection handling across different browsers while maintaining full editing capability.
Data Source
AI summary
The present invention relates to an in-browser editor. Specifically, embodiments of the present invention provide a system and method of editing content in a browser without having to rely on the particular in-browser editing technology, such as “contentEditable” and “innerHTML.” The system includes a parser that converts an input string representing content edits in the browser into a data structure known as an Intermediary DOM (document object model). The Intermediary DOM provides a completely accurate representation of editor content in real time and operates in tandem with the Browser DOM to render the edited content in the Intermediary DOM back into displayable content.