This is not to be confused with Export Code features/function.
Problem: - Current solution to View / Copy code within designer is to view Export Code.
- Export code takes way too long (sometimes >1 minute!) to view or copy basic HTML, CSS, JS.
- Export code does not allow fast loading same page code
- Export code does not allow load in background to retrieve (I.e. I cant work on other designer tasks while Export code is loading)
Solution: Create dedicated view code component
1. Create a 'View Source Code' button on the far right of the bottom Parent Div > Div tag selectors section.
2. Enabling this button opens up a 3 column panel row (horizontally), similar to the editor panel on the right (vertically)
3. The panel has 3 toggle switches (HTML, CSS, JS) that auto flexes the 3 columns. For example, if only HTML is selected, the View HTML takes up 100% width. If HTML and CSS are enabled, then HTML/CSS will take up 50% each. etc.
4. Column 1 is view HTML
5. Column 2. is view CSS
6. Column 3 is view JS
7. Each column has easy find and copy functions.
8. Find function shows how many instances of matches found in code.
9. Copy function allows copying highlighted, a block, or entire contents.
10. If Div block i selected on navigator, it auto highlights relevant HTML / CSS / JS
11. Autohighlight has a propagation view filter (hides all non relevant code based on Navigator block selector)