Overview - Upgrade to new editor

[eliot-akira]

This is an overview of tasks related to the recent upgrade of the code editor.

Formatter

• Editor: Create our own HTML formatter #67

Builder integrations

• Elementor integration: Occasionally shows unrendered template code in the preview #2
• Beaver integration: Overly eager CSS breaks editor styles #3

Improvements

• ACF Template field: ACF's CSS affecting select fields in Settings #24
• Document how autocomplete works based on language definition #7

---

About the upgrade from CodeMirror 5 to 6

New editor

Documentation for the new editor: https://docs.loopsandlogic.com/reference/template-system/editor/

The new editor based on CodeMirror 6 is enabled by default in the template post type edit screen (Template, Style, Script, and Control) and in Gutenberg. However, in the Elementor and Beaver Builder integrations, the old editor is still needed until compatibility issues are resolved.

Old editor

The old editor based on CodeMirror 5 has been archived to its own repository.

• https://github.com/TangibleInc/tangible-codemirror-v5

Its minified bundle without source maps is still in the Template System, until the new editor fully replaces it: modules/codemirror-5.

[studioavanti]

Hi,

When using the Tangible module to edit a L&L Template directly in a Beaver Builder layout, there's a styling conflict impacting the module's readability.
Beneath the editor, the Settings part is in dark mode with all text dark as well.

This is the L&L CSS rule involved and how i fixed it by modifying the selector:

.fl-lightbox .tangible-template-system--editor-actions-panel * {
    color: #fff;
}

…instead of just:

.tangible-template-system--editor-actions-panel {
    color: #fff;
}

…which is overwritten by a BB rule.

[eliot-akira]

Thank you @studioavanti. As you discovered, there's a known issue with Beaver Builder's overly-eager CSS rules causing conflict with the new code editor. I appreciate the suggested fix, I'll try that.