Add a resizable splitscreen between the 2 editors

[pmk65]

If you add a resizable split screen between the 2 editors, then the user can resize the editor areas. As it might be useful to reveal more of one of the editors.
I use the method in my Playground page, to have 2 editors side-by-side.
https://github.com/nathancahill/split/tree/master/packages/split-grid

[pmk65]

@Franciman A simple Toggle button could also be added, so that the user can switch between vertical (1 column) or horizontal (2 columns, side-by-side) display.
All you need to do is add a button that toggles the flex-direction layout of class "table" between "row" and "column". And toggles the height of class "container" between 50vh and 100vh.

[IanMayo]

Thanks for that @pmk65 - it would certainly allow the user to arrange the screen according to the specific data they're working with.

But in this repo I'm concentrating on the functionality & tailoring the meta-schema, and see the layout as a step that's part of integrating the editor into some parent application.

[pmk65]

@IanMayo I would consider it part of functionality, as it increases usability. Specially when working with larger schemas.

Here's an example to illustrate my point. Try pasting this (bookmarklet) into the URL field of your browser when you are viewing the demo page.

javascript:(function()%7B!function()%7Bvar%20e%3Ddocument.querySelector(%22.table%22)%3Bif(e)%7Bvar%20t%3Ddocument.createElement(%22style%22)%3Bdocument.body.appendChild(t)%2Ct.innerHTML%3D%5B%22.table.hview%20%7Bflex-direction%3Arow%3B%7D%22%2C%22.table.hview%20%3E%20.container%20%7Bheight%3A100vh%3B%7D%22%5D.join(%22%5Cn%22)%3Bvar%20n%3Ddocument.createElement(%22button%22)%3Bn.innerText%3D%22Toggle%20View%22%2Cn.setAttribute(%22style%22%2C%22position%3A%20absolute%3B%20margin%3A%20.2em%3B%22)%2Cn.addEventListener(%22click%22%2Cfunction()%7Be.classList.toggle(%22hview%22)%7D%2C!1)%2Cdocument.body.appendChild(n)%7D%7D()%7D)()

This will create an (ugly) button in the top left corner. When you click it, it will toggle between horizontal and vertical views.

Code in readable format:

(function() {
    var table = document.querySelector('.table');
    if (!table) return;

    // Add stylesheet
    var styleNode = document.createElement('style');
    document.body.appendChild(styleNode);
    styleNode.innerHTML = [
      '.table.hview {flex-direction:row;}',
      '.table.hview > .container {height:100vh;}'
    ].join('\n');
    
    // Create button. Button toggles class "hview" on "table" element
    var button = document.createElement('button');
    button.innerText = 'Toggle View';
    button.setAttribute('style', 'position: absolute; margin: .2em;');
    button.addEventListener('click', function() {
      table.classList.toggle('hview');
    }, false);
    document.body.appendChild(button);
}());