Cannot access 'code editor' most of the times

[yasmagic]

When working on the editor, the 'code editor' icon goes missing and shows unnecessary elements which most of the times are useless. In this example below, the 'code editor' icon is nowhere to be seen.

It would be nice to have this feature as an icon on the top so anyone can click on code editor and view the code.

[givanz]

Thanks for the bug report, this happens when there are many elements in the breadcrumb and pushes the button bellow, I fixed it in the last update.

https://github.com/givanz/VvvebJs/commit/a0825e50aef5573a174e6496f6262fd5912ab0e5

[yasmagic]

Thank you. An icon on the top nav bar for code editor would be nice as people can switch to code editor view in full screen.

[givanz]

You can make any element on the page toggle code editor by adding data-vvveb-action="toggleEditor" all actions from Vvveb.Gui can be called using data-vvveb-action

To add code editor toggle to top panel in editor.html add the following bellow the download button code.

<div id="top-panel">

    <div class="btn-group me-3" role="group">

      <button class="btn btn-light" title="Download" id="download-btn" data-vvveb-action="download" data-v-download="index.html">
          <i class="la la-download"></i>
      </button>

      <!-- code editor button -->   
      <button class="btn btn-light" title="Code editor" id="top-code-editor-btn" data-vvveb-action="toggleEditor">
          <i class="la la-code"></i>
      </button>
      <!-- code editor button end -->

    </div>
</div>

[yasmagic]

Hi @givanz .. I have added code editor icon in the toolbar.. when clicked on it shows like this.. Is there any way to avoid showing the HTML elements and force to show only code?

[givanz]

Hi

In your screenshot body element and descendants are repeated multiple times, body tag is unique and it should only show once. I'm unable to reproduce this issue, can you provide more details on how to reproduce it?

You can disable the breadcrumb by deleting the Vvveb.Breadcrumb.init(); inside editor.html/editor.php

$(function() {

    let firstPage = Object.keys(pages)[0];
    Vvveb.Builder.init(pages[firstPage]["url"], function() {
        //load code after page is loaded here
    });

    Vvveb.Gui.init();
    Vvveb.FileManager.init();
    Vvveb.SectionList.init();
    Vvveb.Breadcrumb.init(); //<--- delete/comment this line

    Vvveb.FileManager.addPages(pages);
    Vvveb.FileManager.loadPage(pages[firstPage]["name"]);
    Vvveb.Breadcrumb.init();

    //if url has #no-right-panel set one panel demo
    if (window.location.hash.indexOf("no-right-panel") != -1) {
        Vvveb.Gui.toggleRightColumn();
    }
});

[givanz]

I changed the code in the last update to hide the breadcrumb when code editor is active to solve any potential issues with long breadcrumbs.

https://github.com/givanz/VvvebJs/commit/155313fcdb305cfc5e548daf2cb882ca3790945f

[braincert]

@givanz Awesome, thank you.