Djot Docs

Appearance

Code Editor ​

Built-in Code Editor (CodeMirror) - used in the Djot IDE.

Usage ​

tsx
import CodeEditor from "@djot/components";

export const App = () => {
  const [value, setValue] = React.useState("const a = 1;");
  return <CodeEditor value={value} onChange={setValue} />;
};
import CodeEditor from "@djot/components";

export const App = () => {
  const [value, setValue] = React.useState("const a = 1;");
  return <CodeEditor value={value} onChange={setValue} />;
};

CodeEditor Props Type Definition ​

ts
type CodeMirrorEditorProps = {
  id?: string;
  filename?: string;
  editorState?: EditorState;

  onChange: (code: string) => void;
  onUpdateCursorPos?: (cursorPos: { head?: number; anchor?: number }) => void;
  onUpdateScrollPos?: (scrollPos: {
    scrollTop?: number;
    scrollLeft?: number;
  }) => void;
  onUpdateState?: (editorState: EditorState) => void;
  onFocus?: (isFocused: boolean) => void;
  onSave: () => void;
  onRun?: () => void;
  onChangeFile?: (filename: string) => void;
  value: string;
  // initialCursorPos?: { anchor?: number; scrollTop?: number; scrollLeft?: number }
  cursorPos?: { anchor?: number; head?: number };
  scrollPos?: { scrollTop?: number; scrollLeft?: number };
  height?: string;
  width?: string;
  focused?: boolean;

  errors?: any[];
  vars?: Record<string, any>;

  theme?: { isDark: boolean };
};
type CodeMirrorEditorProps = {
  id?: string;
  filename?: string;
  editorState?: EditorState;

  onChange: (code: string) => void;
  onUpdateCursorPos?: (cursorPos: { head?: number; anchor?: number }) => void;
  onUpdateScrollPos?: (scrollPos: {
    scrollTop?: number;
    scrollLeft?: number;
  }) => void;
  onUpdateState?: (editorState: EditorState) => void;
  onFocus?: (isFocused: boolean) => void;
  onSave: () => void;
  onRun?: () => void;
  onChangeFile?: (filename: string) => void;
  value: string;
  // initialCursorPos?: { anchor?: number; scrollTop?: number; scrollLeft?: number }
  cursorPos?: { anchor?: number; head?: number };
  scrollPos?: { scrollTop?: number; scrollLeft?: number };
  height?: string;
  width?: string;
  focused?: boolean;

  errors?: any[];
  vars?: Record<string, any>;

  theme?: { isDark: boolean };
};