Function CodeEditor

packages/react/src/editor/CodeEditor/CodeEditor.tsx:31–144

()

};

export const CodeEditor = () => {
  const editorRef = useRef<Parameters<OnMount>[0] | null>(null);
  const disableFormatting = useRef(false);

  const { getSource, replaceRoot } = useEditing();

  const [code, setCode] = useState(getSource());
  const [message, setMessage] = useState('');

  const formatCode = useCallback(() => {
    if (!editorRef.current) {
      return;
    }

    const value = editorRef.current.getValue();

    prettify(value).then(setCode);
  }, []);

  const updateSource = useCallback(() => {
    if (!editorRef.current) {
      return;
    }

    const value = editorRef.current.getValue();

    try {
      const node = Parser.parse(value);
      const types = new NodeManager(node).collectTypes();
      const missing = Catalog.missing(types);

      if (missing.length === 0) {
        disableFormatting.current = true;
        replaceRoot(node);
        setMessage('');
      } else {
        setMessage(`Unregistered Block${missing.length > 1 ? 's' : ''}: ${missing.join(', ')}`);
      }
    } catch {
      // Do nothing if anything fails
      setMessage('Invalid code');
    }
  }, [replaceRoot]);

  const debouncedUpdateSource = useMemo(() => debounce(updateSource, 1000), [updateSource]);

  const handleMount = useCallback<OnMount>(
    (editor) => {
      editorRef.current = editor;
      editorRef.current.onDidBlurEditorText(formatCode);
      editorRef.current.onDidPaste(formatCode);

      formatCode();
    },
    [formatCode],
  );

  const handleChange = useCallback(