Feature: replacable editors

[ylebre]

The current editors are directly added in the HTML as:

<textarea data-codemirror ...>

With a recent discussion about upgrading to codemirror 6 or the monaco editor, what fell into place is the idea that it would be good to have a way to upgrade this bit in one go somehow. The big question is 'how'.

We currently have 29 instances of the editor, spread out over the different places they are used. Raw API, Unit tests, Page templates each have their own textarea with a slightly different configuration each time.

Ideally, the solution would allow us to replace these editors in one go. This could be done by creating a 'component-editors' component, with pre-configured editors for each type that we need.

The downside is that this requires the creation of a component that is aware of each of the other components. If we ever decide to add another type of component that warrants a different type of editor configuration, adding this would also require the addition of another editor in component-editors. This means the code for this new thing would still be fragmented over the codebase, which is not in line with the thinking of how things should be structured in simplyCode.

So the question is this: can we create something that will allow us to:

• replace the current codemirror editor with another editor in one go
• while leaving the option on the table to have different editor configuration
• without having a component that needs to know about all the other components?

[ylebre]

This is an overview of the current set of configurations:

componentDataApi.html

<textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>

componentPageTemplate.html

<textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<main><div>Page contents</div></main>"></textarea>
<textarea data-codemirror-mode="json" data-simply-field="sampledata" placeholder="{}"></textarea>

componentSorters.html

<textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>

componentQUnitTests.html

<textarea data-codemirror-mode="javascript" data-simply-field="test-code" placeholder="function() {...}"></textarea>

componentPageFrame.html

<textarea data-codemirror-mode="htmlmixed" data-simply-field="component.parts.fullApp" placeholder="<!DOCTYPE...">
<textarea data-codemirror-mode="htmlmixed" data-simply-field="component.parts.pagePreview" placeholder="<!DOCTYPE...">
<textarea data-codemirror-mode="htmlmixed" data-simply-field="component.parts.componentPreview" placeholder="<!DOCTYPE...">

componentRawApi.html

<textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>

componentTransformers.html

<textarea data-codemirror-mode="javascript" data-simply-field="render-code" placeholder="function() {...}"></textarea>
<textarea data-codemirror-mode="javascript" data-simply-field="extract-code" placeholder="function() {...}"></textarea>

componentRoutes.html

<textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>

componentHeadHtml.html

<textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<link rel='stylesheet'..."></textarea>

componentCommands.html

<textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>

componentFootHtml.html

<textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<link rel='stylesheet'..."></textarea>

componentDataSources.html

<textarea data-codemirror-mode="javascript" data-simply-field="load-code" placeholder="function() {...}"></textarea>
<textarea data-codemirror-mode="javascript" data-simply-field="save-code" placeholder="function() {...}"></textarea>
<textarea data-codemirror-mode="javascript" data-simply-field="get-code" placeholder="function() {...}"></textarea>
<textarea data-codemirror-mode="javascript" data-simply-field="set-code" placeholder="function() {...}"></textarea>
<textarea data-codemirror-mode="javascript" data-simply-field="load-code" placeholder="function() {...}"></textarea>
<textarea data-codemirror-mode="javascript" data-simply-field="save-code" placeholder="function() {...}"></textarea>
<textarea data-codemirror-mode="javascript" data-simply-field="get-code" placeholder="function() {...}"></textarea>
<textarea data-codemirror-mode="javascript" data-simply-field="set-code" placeholder="function() {...}"></textarea>

componentPageCss.html

<textarea data-codemirror-mode="css" data-simply-field="code" placeholder="div {...}"></textarea>

componentBodyHtml.html

<textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<link rel='stylesheet'..."></textarea>

component-actions/componentTemplates/componentActions.html

<textarea data-codemirror-mode="javascript" data-simply-field="code" placeholder="function() {...}"></textarea>

componentComponentTemplate.html:

<textarea data-codemirror-mode="htmlmixed" data-simply-field="code" placeholder="<main><div>Component Html</div></main>"></textarea>

componentComponentTemplate.html

<textarea data-codemirror-mode="json" data-simply-field="sampledata" placeholder="{}"></textarea>

componentComponentCss.html

<textarea data-codemirror-mode="css" data-simply-field="code" placeholder="div {...}"></textarea>

[poef]

if we had the option to pass parameters to a simply-render component, that gets picked up in the rendered result, we could create a single editor component, and add specific instances of it in a specific other component type. e.g.

<simply-render rel="simplycode-editor" data-slot-mode="javascript" data-slot-field="code"></simply-render>

which would generate

<textarea class="codemirror" data-code-mirror="javascript" data-simply-field="code"></textarea>
(this is just paraphrasing, exact names/attributes need to be figured out)

[ylebre]

What if simply-render gets a transformer-like thing:

<simply render rel="simplycode-editor" data-mode="javascript" data-field="code" data-simply-transformer="editor-render"></simply-render>

and a bit of code to manage it all:

"editor-render" : {
  render : function(element) {
    // Instead of data, this would receive the DOM structure just before it gets inserted into the page
    // 'this' points to the simply-render element, allowing us to grab the attributes from there
   element.setAttribute("data-code-mirror", this.getAttribute("data-mode"));
   element.setAttribute("data-simply-field", this.getAttribute("data-simply-field"));
   return element;
  },
  extract : function(element) {
    // unused
  }
}

I think something like this would allow a lot of customization for what we can do with simply-render step, while reusing concepts within the stack that are already familiar?