@wobble/code
v1.0.5
Published
Codemirror Initializations and Extensions for wwwobble
Downloads
56
Readme
@wobble/code
Initialization and extensions for creating a live HTML editor using Codemirror6. This editor is used in Wobble Web and is also available ad a custom element for use in other websites.
WobbleCode Component
A reactive SolidJS component that renders an in-browser HTML editor for a given element. Passing in any selector for a DOM element will render the html of that element. When the element is updated, the code in the editor will update to reflect the changes to the DOM.
Usage
import { WobbleCode } from '@wobble/code'
<WobbleCode element={myElement} showContainer={false} />Editing the text in the editor 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 and elements outside of the original component, and attempts to reconcile the elements that have been added to the page with the existing elements.
Attributes
- element: HTML element to render
- showContainer: when true, includes the h
wobble-code custom element
A custom element containing the above element.
Usage
<!DOCTYPE html>
<html lang="en">
<script src="/src/custom-element.jsx" type="module"></script>
<body>
<div id="test-element"> MY TEST ELEMENT</div>
<div id="test-element2"> MY TEST ELEMENT TWO</div>
<wobble-code style="width: 400px; display: block" element="#test-element" showContainer="false"></wobble-code>
</body>
</html>Styling using css variables
The following CSS variables can be used to style the code editor:
- --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
HTML Serialization
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