codemirror-ssr

SSR compatible CodeMirror 5

Motivation

CodeMirror 5 uses some client-only APIs at top level, which makes it not compatible with SSR. A way to solve this problem is to dynamic import codemirror module and its addons in client-only lifecycles. It works, but would cause unnecessary bundle split and increase the final loading time.

Usage

$3

``js
import codemirror from "codemirror";
import "codemirror/addon/display/placeholder";

const editor = codemirror.fromTextArea(textarea, {
// options
});
`

$3

`js
import factory from "codemirror-ssr";
import usePlaceholder from "codemirror-ssr/addon/display/placeholder";

// the client-only lifecycle
function mounted() {
const codemirror = factory();
usePlaceholder(codemirror); // apply addons manually

const editor = codemirror.fromTextArea(textarea, {
// options
});
}
``

Built with codemirror-ssr

- ByteMD: A hackable Markdown editor component built with Svelte

License

MIT