@wobble/code

Initialization and extensions for creating a code editor using Codemirror6 for Wobble Web

CSS variables for defining theme color

• --cm-background
• --cm-foreground
• --cm-caret
• --cm-selection
• --cm-selection-match
• --cm-line-highlight
• --cm-line-background
• --cm-gutter-background
• --cm-gutter-foreground

Inspired by https://codeberg.org/uzu/strudel/src/branch/main/packages/codemirror

HTMLMorph

A reactive SolidJS component that renders an in-browser HTML editor for a given element. Editing the text on the page causes live-updates to the element, using morphdom to minimize DOM updates. This allows elements with complex state, such as iframes or embedded videos, to preserve their internal state as the page is being updated.

The editor also supports dangling text nodes outside of the original component, and attempts to reconcile the elements that have been added to the page with the exting elements.

Usage

<HTMLMorph element={myElement} showContainer={false} />

HTML Serialization

[WIP] This package uses a custom serialization function rather than "innerHTML" or "outerHTML" for converting an HTML Element to text. This allows for custom formatting and replacement logic, as well as keeping track of the positions in the editor that correspond to attributes of an element.

Yet to be implemented

• incremental updates to text editor, replacing only elements of the text that have been changed
• decorations highlighting live changes to element
• better theme support