@freeseller/wappler-codemirror

Specialized CodeMirror editors for Wappler App Connect.

Included components

This package contains two separate textarea-based editors:

• dmx-json-editor — JSON editor
• dmx-html-editor — HTML editor

Each component is focused on a single editing mode and only links the required CodeMirror files for that editor.

Basic usage

JSON editor

<textarea
  id="json_editor"
  class="form-control"
  name="json_content"
  is="dmx-json-editor"
  line-numbers="true"
  min-height="320"
  auto-height="true"
  json-validation-message="Invalid JSON"
  dmx-bind:value="sc_data.data.content"
></textarea>

HTML editor

<textarea
  id="html_editor"
  class="form-control"
  name="html_content"
  is="dmx-html-editor"
  line-numbers="true"
  min-height="320"
  auto-height="true"
></textarea>

Runtime behavior

• the original textarea remains the form field source
• editor changes are synced back to textarea.value
• the component supports form reset and restores the editor value after native form reset
• editor lifecycle includes proper initialization and cleanup through create/destroy handling
• resources are auto-linked by the component package definition
• when a bound JSON value is an object or array, the JSON editor displays it as formatted JSON using indent-unit
• the CodeMirror wrapper mirrors the classes of the original textarea
• validation classes applied by Wappler validator to the textarea are mirrored to the CodeMirror wrapper

Editor options

These editor-specific options are exposed by the component:

JSON editor

• line-numbers
• line-wrapping — disabled by default
• tab-size
• indent-unit
• min-height
• auto-height
• json-validation-message

HTML editor

• line-numbers
• line-wrapping — disabled by default
• tab-size
• indent-unit
• min-height
• auto-height

Standard textarea attributes such as id, name, class, value, placeholder, readonly, disabled, and required should be configured through the normal Wappler textarea settings.

Validation

JSON editor

JSON validation is built into the component.

• the component validates the value continuously
• invalid JSON is reported through setCustomValidity()
• this keeps the field compatible with the Wappler validator and form submit flow
• you do not need to add data-rule-json manually in your HTML
• the validation message can be customized with json-validation-message
• if no custom message is set, Invalid JSON is used

The editor does not force Bootstrap validation styling on its own. Instead, it mirrors the validation classes that Wappler applies to the original textarea.

HTML editor

The HTML editor does not include custom HTML validation. Use standard field validation only.

App Connect events

JSON editor

• input
• updated
• changed
• focus
• blur

HTML editor

• input
• updated
• changed
• focus
• blur

Methods

JSON editor

• refresh() — refresh editor layout
• focus() — focus the editor
• getValue() — get current editor value
• setValue(value) — set editor value programmatically
• format() — format the current value as pretty JSON when valid

HTML editor

• refresh() — refresh editor layout
• focus() — focus the editor
• getValue() — get current editor value
• setValue(value) — set editor value programmatically

Notes

• JSON editor uses CodeMirror mode application/json
• HTML editor uses CodeMirror mode htmlmixed
• HTML editor includes the CodeMirror dependencies required for tag closing support
• line-wrapping is off by default and only enabled when explicitly set to true
• min-height accepts either a number (treated as pixels) or a CSS size string
• auto-height="true" expands the editor to fit its content
• readonly and disabled are supported in runtime and should be configured as normal textarea attributes in Wappler
• styling should target the standard CodeMirror wrapper classes (.CodeMirror) and any classes mirrored from the original textarea

Package

{
  "name": "@freeseller/wappler-codemirror",
  "version": "0.6.0"
}