Description

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

• Visual mode: https://icons.getbootstrap.com/icons/code-slash/
• Source mode: https://icons.getbootstrap.com/icons/file-earmark-richtext/

Button Placement for Mode Switching

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

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.

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.

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.

  This approach ensures that users can efficiently toggle between modes while maintaining a clear distinction between visual and source-based editing

  View of source mode

  .