From 802de940abed7bc21a0d1b9efae1c6d85f27d115 Mon Sep 17 00:00:00 2001 From: Tom Butcher Date: Fri, 21 Aug 2026 11:08:42 +0100 Subject: [PATCH] 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. --- .../Dashboard/common/CodeBlockEditor.jsx | 77 +------------------ .../Dashboard/common/CodeDiffViewer.jsx | 2 +- src/components/Dashboard/common/DiffLabel.jsx | 2 +- .../Dashboard/common/codeBlockEditorUtils.js | 73 ++++++++++++++++++ 4 files changed, 79 insertions(+), 75 deletions(-) create mode 100644 src/components/Dashboard/common/codeBlockEditorUtils.js diff --git a/src/components/Dashboard/common/CodeBlockEditor.jsx b/src/components/Dashboard/common/CodeBlockEditor.jsx index 65f2c703..4fabdf94 100644 --- a/src/components/Dashboard/common/CodeBlockEditor.jsx +++ b/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 diff --git a/src/components/Dashboard/common/CodeDiffViewer.jsx b/src/components/Dashboard/common/CodeDiffViewer.jsx index a82497f7..26273674 100644 --- a/src/components/Dashboard/common/CodeDiffViewer.jsx +++ b/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 = '', diff --git a/src/components/Dashboard/common/DiffLabel.jsx b/src/components/Dashboard/common/DiffLabel.jsx index 2625c706..7573fbdc 100644 --- a/src/components/Dashboard/common/DiffLabel.jsx +++ b/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 diff --git a/src/components/Dashboard/common/codeBlockEditorUtils.js b/src/components/Dashboard/common/codeBlockEditorUtils.js new file mode 100644 index 00000000..0b53bc43 --- /dev/null +++ b/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 }) + } +}