Navigating between Visual and Source edit modes

Hey everyone, this is a proposal for the switching between source and visual edit modes in Cristal. Overall, this is pretty straightforward, but I have two options for it, based on the presence of a main edit toolbar.

Visual and Source Mode: Proposal for Mode Switching

• The Visual mode (called WYSIWYG in XS) is an editor mode where all font choices, colors, and styles appear exactly as the user intends. This is the more intuitive and also the default mode.

• Source mode, on the other hand, replaces the visual representation of the document with its actual source code as interpreted by the application. This mode primarily serves as a debugging tool, catering to advanced users who need direct control over the document’s structure.

Icon proposal

• Source mode:
  
  Code slash · Bootstrap Icons

• Visual mode:
  
  File earmark richtext · Bootstrap Icons

User Experience Considerations

• Quick Mode Switching: Transitioning between WYSIWYG and Source mode should be seamless, ideally supported by a simple keystroke for advanced users.
• Clear Visual Indication in Source Mode: When Source mode is active, the content area should visually reflect this change to ensure users are fully aware of their editing environment. My proposal here is to make it lightly gray not too distracting but clear enough to convey a different mode of operation.

Example of source mode edit:
.

Button Placement for Mode Switching

This proposal presents two possible locations for the button that allows users to switch between modes:

Option 1: With the main toolbar visible:

• The button would be placed on the toolbar, similar to XS, to maintain consistency of use.

• Unlike XS, however, its location would be separate from buttons that insert content or modify styles, making it less obtrusive.

Option 2: Without the main toolbar

• Without the main toolbar, the button can have a less prominent placement.
• Since mode switching is a secondary feature, the button could be positioned at the bottom of the screen, always visible but outside the main content flow.

• To switch back to visual mode, the button is replaced by the appropriate icon

Thank you all for reading and, as always, please let me know your opinions on it.

7 posts - 3 participants

Read full topic