WYSIWYG Editor with Visual Document Structure Indicator
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current structured document editors either focus on document structure at the expense of content editing or vice versa, making it cumbersome to edit portions that span syntactic entities in a single operation, and lack a seamless integration of WYSIWYG and structure editing.
Innovation Solution
A system that integrates a Visual Document Structure Indicator (VDSI) pane within a traditional WYSIWYG editor, allowing simultaneous content and structure editing by displaying document content and structure in separate areas of the interface, enabling element-level modifications and providing a unified editing environment.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Stability of the object's composition
If a traditional structured document editor is used to maintain document structure, then structure integrity is improved, but content editing ease deteriorates
Solution Approach 1:
The editor interface is segmented into distinct regions: a WYSIWYG content editing area and a separate structure visualization pane. This allows users to edit content intuitively in the main area while the structure is displayed and manipulated in a separate section, resolving the contradiction between structure integrity and content editing ease.
Solution Approach 2:
A visual structure indicator system acts as an intermediary between the content editor and the underlying document structure. This mediator provides visual cues and controls that allow users to manipulate structure without directly interacting with markup syntax, maintaining structure integrity while improving content editing ease.
2Stability of the object's composition
If a structured document editor focuses on document structure, then structure control is improved, but editing operations complexity increases
Solution Approach 1:
The system creates a visual copy or representation of the document structure in the side pane, separate from the actual markup. Users interact with this visual copy to perform structure operations, which are then applied to the underlying structured document. This copying approach maintains structure control while reducing editing operations complexity by hiding the syntactic complexity.
3Ease of operation
If a WYSIWYG editor is used for content editing, then content editing ease is improved, but structure awareness is lost
Solution Approach 1:
The editor merges a traditional WYSIWYG content editor with a structure visualization pane into a single integrated interface. The WYSIWYG area maintains content editing ease while the adjacent structure pane provides continuous awareness of the document structure. Both views are synchronized, allowing users to see structure implications of content edits in real-time.
Solution Approach 2:
The structure visualization pane provides continuous feedback about the document structure as users edit content in the WYSIWYG area. When users make content edits, the structure pane updates to reflect changes in the underlying markup, maintaining structure awareness without compromising content editing ease.
4Loss of information
If structured markup is displayed directly to users, then structure transparency is improved, but user interface complexity increases
Solution Approach 1:
The structure visualization pane uses different visual representations for different aspects of the markup structure. Common structural elements are displayed in simplified forms, while detailed markup information is available on-demand or for advanced users. This local quality approach provides structure transparency for the general case while avoiding unnecessary interface complexity.
Data Source
AI summary
Systems and methods for represent and manipulate (i.e., processing) the underlying structure of a structured document (e.g., a mark-up language document), while maintaining a What You See Is What You Get (WYSIWYG) environment. The traditional WYSIWYG editor view is paired with a Visual Document Structure Indicator (VDSI) pane to allow for both WYSIWYG and structure editing within a single interface. The VDSI pane includes left pane and upper pane, which are configured along the left and top borders, respectively. The document editor allows document content to be created, edited, and maintained in the WYSIWYG environment while keeping document structure information available to the user.