45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import { h } from "preact";
|
|
import { useEffect, useRef } from "preact/hooks";
|
|
|
|
import * as CM from "codemirror";
|
|
import "codemirror/lib/codemirror.css";
|
|
import "codemirror/theme/base16-dark.css";
|
|
|
|
import "./CodeMirror.scss";
|
|
import Theme from "../theme";
|
|
|
|
interface ICodeMirrorProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
onSave?: (value: string) => void;
|
|
onClose?: () => void;
|
|
}
|
|
|
|
export default function CodeMirror(props: ICodeMirrorProps) {
|
|
const ref = useRef<HTMLTextAreaElement>();
|
|
useEffect(() => {
|
|
const instance = CM.fromTextArea(ref.current, {
|
|
value: props.value,
|
|
mode: "markdown",
|
|
lineNumbers: true,
|
|
lineWrapping: true,
|
|
theme: Theme.isDark.value ? "base16-dark" : "default",
|
|
viewportMargin: Infinity,
|
|
// extraKeys: {
|
|
// "Ctrl-S": (cm) => {
|
|
// const val = cm.getValue();
|
|
// props?.onSave(val);
|
|
// },
|
|
// Esc: props.onClose,
|
|
// },
|
|
});
|
|
|
|
if (props.value) instance.setValue(props.value);
|
|
|
|
instance.on("change", () => props?.onChange(instance.getValue()));
|
|
|
|
return () => {};
|
|
}, [ref]);
|
|
return <textarea ref={ref}></textarea>;
|
|
}
|