Create CodeMirrorEditorDiff

packages/editor/src/components/CodeMirrorEditorDiff.tsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+
+import type { Extension } from '@codemirror/state';
+import { placeholder } from '@codemirror/view';
+
+import { GlobalCodeMirrorEditorKey } from '../consts';
+import { useCodeMirrorEditorIsolated } from '../stores';
+
+import { CodeMirrorEditor, CodeMirrorEditorProps } from '.';
+
+
+const additionalExtensions: Extension[] = [
+  [
+    // todo: i18n
+    placeholder('Please select page body'),
+  ],
+];
+
+type Props = CodeMirrorEditorProps & object
+
+export const CodeMirrorEditorDiff = (props: Props): JSX.Element => {
+  const {
+    onChange,
+  } = props;
+
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.DIFF);
+
+  // setup additional extensions
+  useEffect(() => {
+    return codeMirrorEditor?.appendExtensions?.(additionalExtensions);
+  }, [codeMirrorEditor]);
+
+  return (
+    <CodeMirrorEditor
+      editorKey={GlobalCodeMirrorEditorKey.DIFF}
+      onChange={onChange}
+    />
+  );
+};

packages/editor/src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './CodeMirrorEditor';
 export * from './CodeMirrorEditorMain';
 export * from './CodeMirrorEditorComment';
+export * from './CodeMirrorEditorDiff';