Function MarkdownCell

packages/components/src/components/cells/markdown.tsx:70–226

(props: MarkdownCellProps)

    };

export default function MarkdownCell(props: MarkdownCellProps) {
  const { codeTheme, theme } = useTheme();
  const { readOnly, cell } = props;
  const defaultState = cell.text ? 'view' : 'edit';
  const [status, setStatus] = useState<'edit' | 'view'>(defaultState);
  const [text, setText] = useState(cell.text);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (status === 'edit') {
      setText(cell.text);
    }
  }, [status, cell.text]);

  // Initializes mermaid and updates it on theme change
  useEffect(() => {
    mermaid.initialize({
      startOnLoad: false,
      theme: 'base',
      fontFamily: 'Instrument Sans',
      darkMode: theme === 'dark',
      themeVariables: theme === 'dark' ? MERMAID_DARK_OVERRIDES : MERMAID_LIGHT_OVERRIDES,
    });
  }, [theme]);

  // Rerenders mermaid diagrams when the cell is in view mode
  useEffect(() => {
    if (status === 'view') {
      mermaid.run();
    }
  }, [status]);

  const keyMap = Prec.highest(
    keymap.of(
      !readOnly
        ? [
            {
              key: 'Mod-Enter',
              run: () => {
                onSave();
                return true;
              },
            },
            {
              key: 'Escape',
              run: () => {
                setStatus('view');
                return true;
              },
            },
          ]
        : [],
    ),
  );

  function onSave() {
    if (readOnly) {
      return;