@fe-free/core 1.3.4 → 1.3.5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 1.3.5
+
+### Patch Changes
+
+- feat: editor
+  - @fe-free/tool@1.3.5
+
 ## 1.3.4
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -12,11 +12,18 @@
   "dependencies": {
     "@ant-design/icons": "^5.2.6",
     "@ant-design/plots": "^2.2.5",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-markdown": "^6.3.2",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-sql": "^6.8.0",
+    "@codemirror/lang-xml": "^6.1.0",
     "@codemirror/language": "^6.10.3",
     "@codemirror/view": "^6.33.0",
     "@lezer/highlight": "^1.2.1",
-    "@uiw/codemirror-themes": "^4.23.2",
-    "@uiw/react-codemirror": "^4.23.2",
+    "@uiw/codemirror-themes": "^4.23.12",
+    "@uiw/react-codemirror": "^4.23.12",
     "ace-builds": "^1.33.1",
     "ahooks": "^3.7.8",
     "axios": "^1.6.5",
@@ -29,7 +36,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "1.3.4"
+    "@fe-free/tool": "1.3.5"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "^2.8.7",

package/src/crud/types.tsx

@@ -9,15 +9,16 @@ import type { TableProps } from '../table';
  * update 编辑
  * delete 删除
  */
-type CrudAction = 'create' | 'read' | 'read_detail' | 'update' | 'delete';
+type CRUDAction = 'create' | 'read' | 'read_detail' | 'update' | 'delete';
 
 interface CRUDProps<DataSource = any, Key = string> {
-  actions: CrudAction[];
+  /** 操作类型 */
+  actions: CRUDAction[];
 
   // *** 表单 ***
 
-  /** 弹窗表单 */
-  detailForm?: (formProps: { readonly: boolean }, info: { action: CrudAction }) => ReactNode;
+  /** 弹窗表单，action 为 read update 时需要传递 */
+  detailForm?: (formProps: { readonly: boolean }, info: { action: CRUDAction }) => ReactNode;
   /** detailForm 的 formRef */
   detailFormInstance?: ProFormInstance;
 

package/src/editor/editor.stories.tsx

@@ -0,0 +1,108 @@
+import type { EditorProps } from '@fe-free/core';
+import { Editor } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+const meta: Meta<typeof Editor> = {
+  title: '@fe-free/core/Editor',
+  component: Editor,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Editor>;
+
+const BasicDemo = (props: EditorProps) => {
+  const [value, setValue] = useState(props.value || '');
+
+  return (
+    <div style={{ width: '500px', height: '500px' }}>
+      <Editor {...props} value={value} onChange={setValue} />
+    </div>
+  );
+};
+
+// 基础用法
+export const Basic: Story = {
+  args: {
+    value: 'hello world!',
+  },
+  render: (props) => <BasicDemo {...props} />,
+};
+
+// 只读模式
+export const ReadOnly: Story = {
+  args: {
+    value: 'hello world!',
+    readOnly: true,
+  },
+  render: (props) => <BasicDemo {...props} />,
+};
+
+// 不可编辑模式
+export const Editable: Story = {
+  args: {
+    value: 'hello world!',
+    editable: false,
+  },
+  render: (props) => <BasicDemo {...props} />,
+};
+
+// 自动聚焦
+export const AutoFocus: Story = {
+  args: {
+    value: '',
+    autoFocus: true,
+  },
+  render: (props) => <BasicDemo {...props} />,
+};
+
+export const Javascript: Story = {
+  args: {
+    language: 'javascript',
+    value: 'console.log("Hello, World!")',
+  },
+  render: (props) => <BasicDemo {...props} />,
+};
+
+export const Python: Story = {
+  args: {
+    language: 'python',
+    value: `def fibonacci(n):
+    if n <= 1:
+        return n
+    else:
+        return fibonacci(n-1) + fibonacci(n-2)
+
+# 测试斐波那契数列
+for i in range(10):
+    print(f"fibonacci({i}) = {fibonacci(i)}")`,
+  },
+  render: (props) => <BasicDemo {...props} />,
+};
+
+export const JSON: Story = {
+  args: {
+    language: 'json',
+    value: '{"action": "hello", "data": "world"}',
+  },
+  render: (props) => <BasicDemo {...props} />,
+};
+
+export const Markdown: Story = {
+  args: {
+    language: 'markdown',
+    value: `# Hello, World!
+
+This is a markdown file.
+
+## Title2
+
+### Title 3
+
+- Item 1
+- Item 2
+- Item 3`,
+  },
+  render: (props) => <BasicDemo {...props} />,
+};

package/src/editor/index.tsx

@@ -0,0 +1,89 @@
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { markdown } from '@codemirror/lang-markdown';
+import { python } from '@codemirror/lang-python';
+import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
+import CodeMirror from '@uiw/react-codemirror';
+import { useCallback, useMemo } from 'react';
+
+interface EditorProps {
+  language?: 'javascript' | 'python' | 'json' | 'markdown';
+  value?: string;
+  onChange?: (value: string) => void;
+  autoFocus?: boolean;
+  placeholder?: string;
+  readOnly?: boolean;
+  editable?: boolean;
+
+  // 不对外
+  theme?: ReactCodeMirrorProps['theme'];
+  extensions?: ReactCodeMirrorProps['extensions'];
+}
+
+function Editor(props: EditorProps) {
+  const {
+    language,
+    value,
+    onChange,
+    readOnly,
+    editable,
+    autoFocus,
+    placeholder,
+    theme,
+    extensions: originExtensions,
+  } = props;
+
+  const extensions = useMemo(() => {
+    const result: ReactCodeMirrorProps['extensions'] = [];
+
+    if (originExtensions) {
+      result.push(...originExtensions);
+    }
+
+    switch (language) {
+      case 'javascript':
+        result.push(javascript());
+        break;
+      case 'python':
+        result.push(python());
+        break;
+      case 'json':
+        result.push(json());
+        break;
+      case 'markdown':
+        result.push(markdown());
+        break;
+      default:
+        break;
+    }
+
+    return result;
+  }, [language, originExtensions]);
+
+  const handleChange = useCallback(
+    (value: string) => {
+      onChange?.(value);
+    },
+    [onChange],
+  );
+
+  return (
+    <CodeMirror
+      className="w-full h-full"
+      height="100%"
+      width="100%"
+      value={value}
+      onChange={handleChange}
+      extensions={extensions}
+      editable={editable}
+      readOnly={readOnly}
+      autoFocus={autoFocus}
+      placeholder={placeholder}
+      // 不对外
+      theme={theme}
+    />
+  );
+}
+
+export { Editor };
+export type { EditorProps };

package/src/editor_logs/editor_logs.stories.tsx

@@ -44,4 +44,9 @@ export const Basic: Story = {
       },
     ],
   },
+  render: (props) => (
+    <div style={{ width: '500px', height: '500px' }}>
+      <EditorLogs {...props} />
+    </div>
+  ),
 };

package/src/editor_logs/index.tsx

@@ -1,8 +1,8 @@
 import { StreamLanguage } from '@codemirror/language';
 import { tags as t } from '@lezer/highlight';
 import { createTheme } from '@uiw/codemirror-themes';
-import CodeMirror from '@uiw/react-codemirror';
 import React from 'react';
+import { Editor } from '../editor';
 
 interface EditorLogsProps {
   logs: {
@@ -55,14 +55,7 @@ const EditorLogs: React.FC<EditorLogsProps> = ({ logs }) => {
   });
 
   return (
-    <CodeMirror
-      value={formattedLogs}
-      theme={myTheme}
-      extensions={logExtension}
-      editable={false}
-      height="400px"
-      style={{ overflowY: 'auto' }}
-    />
+    <Editor value={formattedLogs} theme={myTheme} extensions={logExtension} editable={false} />
   );
 };
 

package/src/index.ts

@@ -3,6 +3,8 @@ export { LoadingButton } from './button';
 export { CRUD, CRUDDetail, CRUDOfSimple, OperateDelete, useDelete } from './crud';
 export type { CRUDDetailProps, CRUDMethods, CRUDOfSimpleProps, CRUDProps } from './crud';
 
+export { Editor } from './editor';
+export type { EditorProps } from './editor';
 export { EditorJavascript } from './editor_javascript';
 export type { EditorJavascriptProps } from './editor_javascript';
 export { EditorJSON } from './editor_json';