refator(code-editor): make CodeEditor feature based component

- replaced interfaces with types from main-content types

src/components/code-editor/view/subcomponents/CodeEditorSurface.tsx

@@ -0,0 +1,62 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { oneDark } from '@codemirror/theme-one-dark';
+import type { Extension } from '@codemirror/state';
+import MarkdownPreview from './markdown/MarkdownPreview';
+
+type CodeEditorSurfaceProps = {
+  content: string;
+  onChange: (value: string) => void;
+  markdownPreview: boolean;
+  isMarkdownFile: boolean;
+  isDarkMode: boolean;
+  fontSize: string;
+  showLineNumbers: boolean;
+  extensions: Extension[];
+};
+
+export default function CodeEditorSurface({
+  content,
+  onChange,
+  markdownPreview,
+  isMarkdownFile,
+  isDarkMode,
+  fontSize,
+  showLineNumbers,
+  extensions,
+}: CodeEditorSurfaceProps) {
+  if (markdownPreview && isMarkdownFile) {
+    return (
+      <div className="h-full overflow-y-auto bg-white dark:bg-gray-900">
+        <div className="max-w-4xl mx-auto px-8 py-6 prose prose-sm dark:prose-invert prose-headings:font-semibold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-code:text-sm prose-pre:bg-gray-900 prose-img:rounded-lg max-w-none">
+          <MarkdownPreview content={content} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <CodeMirror
+      value={content}
+      onChange={onChange}
+      extensions={extensions}
+      theme={isDarkMode ? oneDark : undefined}
+      height="100%"
+      style={{
+        fontSize: `${fontSize}px`,
+        height: '100%',
+      }}
+      basicSetup={{
+        lineNumbers: showLineNumbers,
+        foldGutter: true,
+        dropCursor: false,
+        allowMultipleSelections: false,
+        indentOnInput: true,
+        bracketMatching: true,
+        closeBrackets: true,
+        autocompletion: true,
+        highlightSelectionMatches: true,
+        searchKeymap: true,
+      }}
+    />
+  );
+}