/** * @author linhd * @date 2024/11/15 13:59 * @description 代码编辑器 */ import React, { FunctionComponent, ReactNode } from 'react'; import { Snack } from "@para-snack/core"; import './index.scss'; export type CodeEditorLanguageType = 'plaintext' | 'html' | 'xml' | 'javascript' | 'css' | 'less' | 'scss' | 'json' | 'typescript' | 'java' | 'mysql' | 'go' | 'shell' | 'python' | 'c' | string; export declare enum CompletionItemKind { Method = 0, Function = 1, Constructor = 2, Field = 3, Variable = 4, Class = 5, Struct = 6, Interface = 7, Module = 8, Property = 9, Event = 10, Operator = 11, Unit = 12, Value = 13, Constant = 14, Enum = 15, EnumMember = 16, Keyword = 17, Text = 18, Color = 19, File = 20, Reference = 21, Customcolor = 22, Folder = 23, TypeParameter = 24, User = 25, Issue = 26, Snippet = 27 } export interface SuggestionsPorps { /** 显示的提示内容 */ label: string; /** 提示前面的图标 */ kind?: CompletionItemKind; /** 选择后粘贴到编辑器中的文字 */ insertText?: string; /** 提示内容后的说明 */ detail?: string; [name: string]: any; } export interface CodeSnippetProps { label?: string; insertCode?: string; codePos?: CodeSnippetPosProps; [name: string]: any; } export interface CodeSnippetPosProps { startLineNumber: number; startColumn: number; endLineNumber: number; endColumn: number; } export interface CodeEditorProps { className?: string; style?: React.CSSProperties; /** id,用来记录是否点击过 */ id?: string; /** 拖动 */ drag?: boolean; /** 最小高度 200 */ dragMin?: number; /** 主题 默认vs-light */ theme?: 'vs-dark' | 'vs-light'; /** 左上角标题 */ title?: string; /** 是否监听屏幕变化,改变大小, 默认是true */ resize?: boolean; /** 宽 默认100% */ width?: string; /** 高 默认100% */ height?: string; /** 禁用 */ disabled?: boolean; /** 默认值 */ value?: string; /** 禁用语言下拉框 */ disabledSelectLanguage?: boolean; /** 隐藏语言下拉 */ hideSelectLanguage?: boolean; /** 是否隐藏行号 */ hideLineNumber?: boolean; /** 选择语言列表 */ languageList?: { label: ReactNode; value: CodeEditorLanguageType; }[]; /** 编辑器语言 默认javascript */ editorLanguage?: CodeEditorLanguageType; /** 导航右边render */ topRightRender?: ReactNode; /** 是否显示格式化 默认true */ showFormat?: boolean; /** 是否显示全局放大 默认true */ showFullScreen?: boolean; /** 是否显示右侧解释 */ showExpand?: boolean; /** 收缩宽度 默认300 */ zoomLength?: number; /** 是否记录展开转态 跟id搭配使用 */ rememberExpand?: boolean; /** 代码提示 */ suggestions?: SuggestionsPorps[]; /** 提示字符 */ triggerCharacters?: string[]; /** 复写编辑器属性 */ monacoEditorProps?: Record; /** 代码片段 */ codeSnippet?: CodeSnippetProps[]; /** 帮组 */ help?: ReactNode; /** 判断搜索代码片段 */ isSearchCode?: (item: CodeSnippetProps, val: string) => boolean; /** 国际化 */ language?: { [name: string]: { [name: string]: any; }; }; /** 点击代码片段 */ onClickCodeSnippet?: (item: CodeSnippetProps) => void; /** change事件 */ onChange?: (val: string) => void; /** 改变语言 */ onChangeLanguage?: (val: string) => void; /** 编辑器加载完成 */ onMounted?: (snackClass: CodeEditorSnackClassProps) => void; } export interface CodeEditorSnackClassProps extends Snack { /** 编辑器对象 */ editor: any; /** 语言实例 补全代码 */ monacoProviderRef: any; /** 设置值 */ setValue: (val: string) => void; /** 设置禁用 */ setDisabled: (bol: boolean) => void; /** 格式化代码 */ formatDocument: () => void; /** * @description 代码插入 默认插入当前光标下一行,如果光标下一行没有,就会追加到当前行 * @param insertText {string} 插入的内容 * @param pos {startLineNumber: number, startColumn: number, endLineNumber: number, endColumn: number} 插入的具体位置 * */ insertCode: (text: string, pos?: { startLineNumber: number; startColumn: number; endLineNumber: number; endColumn: number; }) => void; /** 改变snack模块props */ updateSnackModules: (key: string, val: any) => void; } declare const CodeEditor: FunctionComponent; export default CodeEditor;