codemirror-ssr

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

Before

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

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

After

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
  });
}