Refactor CodeBlockEditor and Extract Utility Functions

- Moved the `toEditorCode` and `getCodeLanguageExtension` functions from CodeBlockEditor to a new utility file, `codeBlockEditorUtils.js`, for better code organization and reusability.
- Updated imports in CodeDiffViewer and DiffLabel components to reference the new utility file, ensuring consistent functionality across the application.

src/components/Dashboard/common/CodeBlockEditor.jsx

@@ -3,25 +3,14 @@ import PropTypes from 'prop-types'
 import CodeMirror from '@uiw/react-codemirror'
 import { EditorView, Decoration, ViewPlugin } from '@codemirror/view'
 import { StateField } from '@codemirror/state'
-import { python } from '@codemirror/lang-python'
-import { javascriptLang } from '../../../codemirror/javascriptLang'
-import { json } from '@codemirror/lang-json'
-import { css } from '@codemirror/lang-css'
-import { html } from '@codemirror/lang-html'
-import { markdown } from '@codemirror/lang-markdown'
-import { sql } from '@codemirror/lang-sql'
-import { java } from '@codemirror/lang-java'
-import { cpp } from '@codemirror/lang-cpp'
-import { rust } from '@codemirror/lang-rust'
-import { go } from '@codemirror/lang-go'
-import { php } from '@codemirror/lang-php'
-import { yaml } from '@codemirror/lang-yaml'
-import { xml } from '@codemirror/lang-xml'
 import {
   farmControlDark,
   farmControlLight
 } from '../../../codemirror/farmControlTheme'
-import { fcTemplateLang } from '../../../codemirror/fcTemplateLang'
+import {
+  getCodeLanguageExtension,
+  toEditorCode
+} from './codeBlockEditorUtils'
 import { useThemeContext } from '../context/ThemeContext'
 import ScrollBox from './ScrollBox'
 import { Button, Modal, Typography, Card } from 'antd'
@@ -99,64 +88,6 @@ function createScrollBoxSyncExtension() {
   )
 }
 
-export function toEditorCode(code, language = 'javascript') {
-  if (code == null) return ''
-  if (typeof code === 'object' && language === 'json') {
-    return JSON.stringify(code, null, 2)
-  }
-  return String(code)
-}
-
-export function getCodeLanguageExtension(
-  language = 'javascript',
-  autoCompleteObject = null
-) {
-  const lang = Array.isArray(language) ? language[0] : language
-
-  switch (String(lang || 'javascript').toLowerCase()) {
-    case 'javascript':
-    case 'js':
-      return javascriptLang({ autoCompleteObject })
-    case 'python':
-    case 'py':
-      return python()
-    case 'json':
-      return json()
-    case 'xml':
-      return xml()
-    case 'fctemplatelang':
-    case 'ejs':
-      return fcTemplateLang({ autoCompleteObject })
-    case 'html':
-      return html()
-    case 'css':
-      return css()
-    case 'markdown':
-    case 'md':
-      return markdown()
-    case 'sql':
-      return sql()
-    case 'java':
-      return java()
-    case 'cpp':
-    case 'c++':
-    case 'c':
-      return cpp()
-    case 'rust':
-    case 'rs':
-      return rust()
-    case 'go':
-      return go()
-    case 'php':
-      return php()
-    case 'yaml':
-    case 'yml':
-      return yaml()
-    default:
-      return javascriptLang({ autoCompleteObject })
-  }
-}
-
 function buildErrorLineDecorations(state, errorLineSet) {
   if (!errorLineSet.size) {
     return Decoration.none

src/components/Dashboard/common/CodeDiffViewer.jsx

@@ -12,7 +12,7 @@ import { useThemeContext } from '../context/ThemeContext'
 import {
   getCodeLanguageExtension,
   toEditorCode
-} from './CodeBlockEditor'
+} from './codeBlockEditorUtils'
 
 export default function CodeDiffViewer({
   oldCode = '',

src/components/Dashboard/common/DiffLabel.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Button, Modal, Typography, theme, Flex } from 'antd'
 import { presentableDiff } from '@codemirror/merge'
 import CodeDiffViewer from './CodeDiffViewer'
-import { toEditorCode } from './CodeBlockEditor'
+import { toEditorCode } from './codeBlockEditorUtils'
 
 const { Link, Text } = Typography
 

src/components/Dashboard/common/codeBlockEditorUtils.js

@@ -0,0 +1,73 @@
+import { python } from '@codemirror/lang-python'
+import { javascriptLang } from '../../../codemirror/javascriptLang'
+import { json } from '@codemirror/lang-json'
+import { css } from '@codemirror/lang-css'
+import { html } from '@codemirror/lang-html'
+import { markdown } from '@codemirror/lang-markdown'
+import { sql } from '@codemirror/lang-sql'
+import { java } from '@codemirror/lang-java'
+import { cpp } from '@codemirror/lang-cpp'
+import { rust } from '@codemirror/lang-rust'
+import { go } from '@codemirror/lang-go'
+import { php } from '@codemirror/lang-php'
+import { yaml } from '@codemirror/lang-yaml'
+import { xml } from '@codemirror/lang-xml'
+import { fcTemplateLang } from '../../../codemirror/fcTemplateLang'
+
+export function toEditorCode(code, language = 'javascript') {
+  if (code == null) return ''
+  if (typeof code === 'object' && language === 'json') {
+    return JSON.stringify(code, null, 2)
+  }
+  return String(code)
+}
+
+export function getCodeLanguageExtension(
+  language = 'javascript',
+  autoCompleteObject = null
+) {
+  const lang = Array.isArray(language) ? language[0] : language
+
+  switch (String(lang || 'javascript').toLowerCase()) {
+    case 'javascript':
+    case 'js':
+      return javascriptLang({ autoCompleteObject })
+    case 'python':
+    case 'py':
+      return python()
+    case 'json':
+      return json()
+    case 'xml':
+      return xml()
+    case 'fctemplatelang':
+    case 'ejs':
+      return fcTemplateLang({ autoCompleteObject })
+    case 'html':
+      return html()
+    case 'css':
+      return css()
+    case 'markdown':
+    case 'md':
+      return markdown()
+    case 'sql':
+      return sql()
+    case 'java':
+      return java()
+    case 'cpp':
+    case 'c++':
+    case 'c':
+      return cpp()
+    case 'rust':
+    case 'rs':
+      return rust()
+    case 'go':
+      return go()
+    case 'php':
+      return php()
+    case 'yaml':
+    case 'yml':
+      return yaml()
+    default:
+      return javascriptLang({ autoCompleteObject })
+  }
+}