components/markdown-editor/examples.tsx

Functions

Imports

It imports components/markdown-editor/markdown-editor.react.tsx. No module of this repo imports it.

Source

1// Mounts the React specimen: the MarkdownEditor wrapper, controlled, in StrictMode (which
2// mounts, unmounts and mounts again, so the editor must survive being upgraded twice).
3import { StrictMode, useState } from "react";
4import { createRoot } from "react-dom/client";
5import { renderToString } from "react-dom/server";
6import { MarkdownEditor } from "./markdown-editor.react.tsx";
7
8const targets = [
9  { href: "/writing/moving-the-monitors", title: "Moving the monitors to the edge" },
10  { href: "/writing/first-incident", title: "The first incident write-up" },
11];
12
13function Held() {
14  const [text, setText] = useState("## Draft from React\n\nServer-rendered as a textarea, upgraded in place.");
15  return (
16    <>
17      <MarkdownEditor
18        label="Body"
19        name="body"
20        value={text}
21        onChange={setText}
22        help="Controlled by React: the count below follows what you type."
23        linkTargets={targets}
24        maxLength={400}
25      />
26      <p>
27        <button type="button" className="cap-btn" onClick={() => setText("Replaced by the app.")}>
28          Replace the text
29        </button>
30      </p>
31      <p>
32        Characters held by React: <output id="react-count">{text.length}</output>
33      </p>
34    </>
35  );
36}
37
38const root = document.getElementById("react-root");
39if (root) createRoot(root).render(<StrictMode><Held /></StrictMode>);
40
41// What a server render of the wrapper produces, kept for the spec to read: the labelled
42// textarea with its text, no toolbar, no style attribute.
43(window as unknown as { capReactSsr: string }).capReactSsr = renderToString(
44  <MarkdownEditor label="Body" name="body" defaultValue="## Server text" help="Help here." error="Say what is wrong." required maxLength={200} />,
45);