Merge branch 'master' into develop

libs/components/editor-blocks/src/blocks/code/CodeView.tsx

@@ -1,10 +1,9 @@
-import { FC, useState, useMemo, useRef, useEffect } from 'react';
+import { FC, useState, useRef, useEffect } from 'react';
 import { StyleWithAtRules } from 'style9';
 
 import { CreateView } from '@toeverything/framework/virgo';
-import CodeMirror from './CodeMirror';
+import CodeMirror, { ReactCodeMirrorRef } from './CodeMirror';
 import { styled } from '@toeverything/components/ui';
-import DeleteSweepOutlinedIcon from '@mui/icons-material/DeleteSweepOutlined';
 
 import { javascript } from '@codemirror/lang-javascript';
 import { html } from '@codemirror/lang-html';
@@ -32,6 +31,7 @@ import { powerShell } from '@codemirror/legacy-modes/mode/powershell';
 import { brainfuck } from '@codemirror/legacy-modes/mode/brainfuck';
 import { stylus } from '@codemirror/legacy-modes/mode/stylus';
 import { erlang } from '@codemirror/legacy-modes/mode/erlang';
+import { elixir } from 'codemirror-lang-elixir';
 import { nginx } from '@codemirror/legacy-modes/mode/nginx';
 import { perl } from '@codemirror/legacy-modes/mode/perl';
 import { pascal } from '@codemirror/legacy-modes/mode/pascal';
@@ -45,7 +45,6 @@ import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile';
 import { julia } from '@codemirror/legacy-modes/mode/julia';
 import { r } from '@codemirror/legacy-modes/mode/r';
 import { Extension } from '@codemirror/state';
-// import { Select } from '../../components/select';
 import { Option, Select } from '@toeverything/components/ui';
 
 import {
@@ -87,6 +86,7 @@ const langs: Record<string, any> = {
     brainfuck: () => StreamLanguage.define(brainfuck),
     stylus: () => StreamLanguage.define(stylus),
     erlang: () => StreamLanguage.define(erlang),
+    elixir: () => StreamLanguage.define(elixir),
     nginx: () => StreamLanguage.define(nginx),
     perl: () => StreamLanguage.define(perl),
     ruby: () => StreamLanguage.define(ruby),
@@ -100,10 +100,8 @@ const langs: Record<string, any> = {
     julia: () => StreamLanguage.define(julia),
     dockerfile: () => StreamLanguage.define(dockerFile),
     r: () => StreamLanguage.define(r),
-    // clike: () => StreamLanguage.define(clike),
-    // clike: () => clike({ }),
 };
-
+const DEFAULT_LANG = 'javascript';
 const CodeBlock = styled('div')(({ theme }) => ({
     backgroundColor: '#F2F5F9',
     padding: '8px 24px',
@@ -118,7 +116,7 @@ const CodeBlock = styled('div')(({ theme }) => ({
         flexWrap: 'wrap',
         justifyContent: 'space-between',
     },
-    '.delete-block': {
+    '.copy-block': {
         padding: '6px 10px',
         backgroundColor: '#fff',
         borderRadius: theme.affine.shape.borderRadius,
@@ -130,29 +128,27 @@ const CodeBlock = styled('div')(({ theme }) => ({
 }));
 export const CodeView: FC<CreateCodeView> = ({ block, editor }) => {
     const initValue: string = block.getProperty('text')?.value?.[0]?.text;
-    const langType: string = block.getProperty('lang')?.value?.[0]?.text;
-    const [mode, setMode] = useState('javascript');
+    const langType: string = block.getProperty('lang');
     const [extensions, setExtensions] = useState<Extension[]>();
-    const codeMirror = useRef();
-    useOnSelect(block.id, (is_select: boolean) => {
+    const codeMirror = useRef<ReactCodeMirrorRef>();
+    useOnSelect(block.id, (_is_select: boolean) => {
         if (codeMirror.current) {
-            //@ts-ignore
             codeMirror?.current?.view?.focus();
         }
     });
-    const onChange = (value: any, codeEditor: any) => {
+    const onChange = (value: string) => {
         block.setProperty('text', {
             value: [{ text: value }],
         });
     };
-    useEffect(() => {
-        handleLangChange(langType ? langType : 'javascript');
-    }, []);
-    function handleLangChange(lang: string) {
+    const handleLangChange = (lang: string) => {
         block.setProperty('lang', lang);
-        setMode(lang);
         setExtensions([langs[lang]()]);
-    }
+    };
+    useEffect(() => {
+        handleLangChange(langType ? langType : DEFAULT_LANG);
+    }, []);
+
     const copyCode = () => {
         copyToClipboard(initValue);
     };
@@ -171,19 +167,12 @@ export const CodeView: FC<CreateCodeView> = ({ block, editor }) => {
             >
                 <div className="operation">
                     <div className="select">
-                        {/* <Select
-                            label="Lang"
-                            options={Object.keys(langs)}
-                            value={mode}
-                            onChange={evn => handleLangChange(evn.target.value)}
-                        /> */}
                         <Select
                             width={128}
                             placeholder="Search for a field type"
-                            value={mode}
+                            value={langType || DEFAULT_LANG}
                             listboxStyle={{ maxHeight: '400px' }}
                             onChange={(selectedValue: string) => {
-                                // setSelectedOption(selectedValue);
                                 handleLangChange(selectedValue);
                             }}
                         >
@@ -197,17 +186,8 @@ export const CodeView: FC<CreateCodeView> = ({ block, editor }) => {
                         </Select>
                     </div>
                     <div>
-                        <div className="delete-block" onClick={copyCode}>
+                        <div className="copy-block" onClick={copyCode}>
                             Copy
-                            {/* <DeleteSweepOutlinedIcon
-                                className="delete-icon"
-                                fontSize="small"
-                                sx={{
-                                    color: 'rgba(0,0,0,.5)',
-                                    cursor: 'pointer',
-                                    '&:hover': { color: 'rgba(0,0,0,.9)' },
-                                }}
-                            /> */}
                         </div>
                     </div>
                 </div>