Advancing the Modern Code Editor By One UI Step (Includes Demos)

Last updated on October 7, 2023

Introduction

The plain text file format can only provide a single, vertical column of information. Contrast this with a magazine or newspaper layout in which there are multiple columns. In the usual case, half of the widescreen display is completely wasted during editing of a code file:

For the purpose of providing improved information organization and better use of screen space, code, currently made out of plain text, can be reshaped into multiple columns. This page provides demos and plans to make such UI features for a code editor.

Plain text code can be adapted lightly and carefully to incorporate modern GUI conventions. Subconsciously, this is already the trend inside the average IDE in response to the limitations of plain text. Code completion boxes appear when a person types, and there is usually code-folding GUI functionality provided that allows collapsing or expanding sections of a file. A large, vertical thumbnail image is also generated to the side of the code. Thus, whether recognized or not, the mainstream software development community desires much more from code than unprocessed plain text. Furthermore, mainstream AI programmers, including the founders of OpenAI, are making active use of Jupyter Notebook, which provides an interactive Python "notebook".

If the condition of plain text code is approached in a more deliberate way, the following features can be implemented. They can make large quantities of code much easier to work with. It will be possible to traverse, inspect, and edit code in a more natural way.

Demos

1. Grouping Functions Into Tab Views

In this IDE editor feature, the programmer has the option to take a group of functions and place them into a tab view.

The benefits include:

• reduced vertical scrolling.
• an opportunity to group related functions neatly.

In this demo, mouse hover activates the tabs:

// A group of event functions turned into tabs, using the following command.

// --TABIFY_NEXT(5)_FUNCTIONS

{

           // do a hit test to see if shapes have been hit.
    
           var didHitAShape = hitTestOnPage();
           
           mouseDown = true;
           
           
        
}

{

           // drag any shapes being dragged.
           
           if(mouseDown)
           {
    
    
           }
    
           if(shapesAreBeingDragged)
           {
    
    
           }
           
           
    
}

{

           // reset the mouse down to detect dragging.
           mouseDown = false;
           
           
           
    
}

{

            // send the keydown event to the KeyboardEventSupervisor.
            KeyboardEventSupervisor(event);
           
           
    
}

{

           // send the keyup event to the KeyboardEventSupervisor.
           KeyboardEventSupervisor(event);
           
           
           
    
}

This is achievable in the code editor through the use of UI commands placed in the comments (//). In this case it is // --TABIFY_NEXT(5)_FUNCTIONS, which "tabifies," or places into a tab view, the next 5 functions.

// Two columns of functions: 

func makeRectangle()
{
               
               
               // try editing here.
               


}

func makeCircle()
{
               
               
               // try editing here.
               


}

func emptyArray()
{
             
             
             // try editing here.
             


}

func moveShape()
{
             
             
             // try editing here.
             


}

It's worth noting that in practice functions are of different lengths and they will be distributed unevenly across a grid, spanning more than one cell vertically. For a typical widescreen display, two to three functions may be the column limit for code readability.

Additionally, it can be the case that functions in this grid are collapsible, by cell.

3. Two Tab Groups Side By Side

Building on the first example, two related groups of functions can be placed side by side on a widescreen display. This provides a great savings in terms of occupied screen space, and enhances navigability.

In this example, the left group of functions are mouse events and the right group of functions are callbacks for when some events have occurred.

Once again, mouse hover activates the tabs.

4. Organizing Variables Into a Grid Layout

Long lists of declarations, including import statements, can be displayed in grids.

 
    // A group of related array variables placed into a three-column grid.  

var arrayOfRectangles = [];

var arrayOfCircles = [];

var arrayOfTriangles = [];

var arrayOfPentagons = [];

var arrayOfHexagons = [];

var arrayOfSeptagons = [];

var arrayOfOctagons = [];

var arrayOfNonagons = [];

var arrayOfDecagons = [];

var arrayOfStars = [];

var arrayOfOvals = [];

var arrayOfSquares = [];

var arrayOfDiamonds = [];

var arrayOfEllipses = [];

var arrayOfParallelograms = [];

var arrayOfHearts = [];

var arrayOfCrescents = [];

var arrayOfCrosses = [];

5. Custom Tabs with Custom Labels

It isn't only functions that can be placed into tabs. It depends on the command placed into the comments (//). Whereas the earlier functions were placed into tabs with the command // --TABIFY_NEXT(5)_FUNCTIONS, the following example makes custom tabs containing objects and variables.

The first three properties are placed in first tab and the app's text field that change their values are placed in the second tab. The name of each tab follows the colon.

  // --TABIFY_START
  
      // --TAB_START:Document Settings Window Variables
          var defaultFontSizePt  = 14.0;
          var documentWidthPt  = 612.0;
          var documentHeightPt  = 792.0;
          
      // --TAB_END
  
  
      // --TAB_START:Document Settings Window Controls
          var fontSizeTextField  = TextField();
          var widthTextField  = TextField();
          var heightTextField = TextField();
          
      // --TAB_END
  
      
  // --TABIFY_END
  
  

The result of the custom tab commands above is the tab view below.

  // --TABIFY_START
  

  var defaultFontSizePt  = 14.0;
  var documentWidthPt  = 612.0;
  var documentHeightPt  = 792.0;

  var fontSizeTextField  = TextField();
  var widthTextField  = TextField();
  var heightTextField  = TextField();

  // --TABIFY_END
  

This makes backwards-compatible text files.

6. Organizable Albums For the Code

This example ties together previous ones to make a box of organized code. Entire collections of code, or albums, can be made like the following, with distinct sections.

Hover over the page numbers with the mouse.

1

2

3

4

5

// --TABIFY_START
    

Document Settings Window Variables Document Settings Window Controls

    var defaultFontSizePt  = 14.0;
    var documentWidthPt  = 612.0;
    var documentHeightPt  = 792.0;

    var fontSizeTextField  = TextField();
    var widthTextField  = TextField();
    var heightTextField  = TextField();

// --TABIFY_END
    

func mouseDown() func mouseDragged() func mouseUp() func keyDown() func keyUp()

{

       // do a hit test to see if shapes have been hit.

       var didHitAShape = hitTestOnPage();
       
       mouseDown = true;
       
       
    
}

{

       // drag any shapes being dragged.
       
       if(mouseDown)
       {


       }

       if(shapesAreBeingDragged)
       {


       }
       
       
}

{

       // reset the mouse down to detect dragging.
       mouseDown = false;
       
       
       
}

{

        // send the keydown event to the KeyboardEventSupervisor.
        KeyboardEventSupervisor(event);
       
       
}

{

       // send the keyup event to the KeyboardEventSupervisor.
       KeyboardEventSupervisor(event);
       
       
       
}

// Two columns of functions:

func setup() { // try editing here. }	func resetAllStates() { // try editing here. }
func openSelectedEntry() { // try editing here. }	func addEntry() { // try editing here. }
func addColumn() { // try editing here. }	func addRow() { // try editing here. }

// The text fields are editable on hover:

var numbersArray[] =

var

states[]

=

./ProjectResources/Images/LandscapeImages/

Some versions of this album could be custom-made. But this vertical pagination could be automatically generated for a file or group of files, allowing the programmer to browse a code project by hovering over the vertical page controls. Alternatively, the page number boxes could be labeled, acting as section markers for an album of code, which allows for organizing the repository.

The Next Step

1. Structured Data: Representing a programming language in XML ensures a clear hierarchical structure. Since elements and attributes are explicitly defined, it will significantly simplify the parsing process, even though the rendered view in the editor is a completely different representation.
2. Elimination of Ambiguity: Even though developers interact with the rendered view in the code editor, the underlying XML representation means there's no ambiguity in the code's data structure. This can make both parsing and tooling (like auto-formatters or linters) more straightforward.
3. Enhanced Tooling: With a standardized XML representation, developing tools that analyze, transform, or validate code can be more straightforward. These tools can operate on the XML layer, regardless of how it's rendered in the editor.
4. Consistency and Validation: Since XML can be validated against schemas, it's possible to ensure that the code adheres to specific structural rules, catching potential errors before they become runtime issues.
5. Flexible Rendering: An XML-based representation can allow for multiple renderings based on user preference or context. For example, a "simplified view" and a "detailed view" in the editor are possible, all backed by the same XML data representation (.xml).