TLDR

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)