Skip to content

Commit

Permalink
feat(web): support function editor with lsp (#1784)
Browse files Browse the repository at this point in the history 
* feat(web): init editor

* feat: add theme

* feat: add file system part

* feat: complete initial editor

* feat(web): add lsp status

* feat: add function position cache & create function not restart lsp

* chore: change json editor to @monaco-editor/react

* refactor: change env editor to table

* feat: add function file delete & style css

* fix: fix vite script dev

* refactor monaco editor to monaco-react

* lint

* resolve

* resolve

* resolve

* feat: add function editor switch

* feat(web): support func editor with lsp or not

* common setting style & text

* chore: update package-lock to fix npm ci error

* fix(web): fix merge error

* add env editor mode & func editor close eventlistener

* fix build

* fix type error

* fix(web): fix loadDeclaration

* fix env editor highlight

* fix loadDeclaration

* remove console

* Merge branch 'main' of https://github.com/labring/laf into test/ts-editor

* Merge branch 'main' of https://github.com/labring/laf into test/ts-editor

* add app lsp required config

* fix: fix create url when baseurl and path undefined

* fix

* fix

* fix

* add replace

* try catch

* ignore init again error

* fix env

* fix not to disconnect lsp

* free mem

* catch log stream abort error

* fix(web): fix editor type resolve & theme

---------

Co-authored-by: 0fatal <2816813070@qq.com>
Co-authored-by: maslow <wangfugen@126.com>
  • Loading branch information
@newfish-cmyk @0fatal @maslow
3 people authored Jan 8, 2024
1 parent 5a63468 commit 022ee46
Show file tree
Hide file tree
Showing 51 changed files with 3,797 additions and 1,206 deletions.
2 changes: 2 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
"ciphertext",
"cloudbin",
"clsx",
"codingame",
"coll",
"compat",
"containerd",
Expand Down Expand Up @@ -76,6 +77,7 @@
"logtostderr",
"mchid",
"millicores",
"mimetypes",
"MINIO",
"moby",
"mongorestore",
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"scripts": {
"install": "lerna exec npm install --parallel",
"lint": "lerna run lint --parallel",
"lint-staged": "lerna exec --since HEAD --parallel -- lint-staged",
"lint-staged": "lerna exec --since HEAD --parallel -- lint-staged --no-stash",
"build": "lerna run build --parallel",
"watch": "lerna run watch --parallel",
"prepublishOnly": "npm run build",
Expand Down Expand Up @@ -41,4 +41,4 @@
"lint-staged": "^15.1.0",
"typescript": "5.0.4"
}
}
}
2,530 changes: 2,321 additions & 209 deletions web/package-lock.json
View file

Large diffs are not rendered by default.

20 changes: 17 additions & 3 deletions web/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
{
"name": "web",
"private": true,
"type": "module",
"version": "1.0.0-beta.14",
"scripts": {
"dev": "vite",
"dev": "node --experimental-import-meta-resolve ./node_modules/vite/bin/vite.js",
"build": "tsc && node --max_old_space_size=32768 ./node_modules/vite/bin/vite.js build",
"tsc": "tsc",
"preview": "vite preview",
Expand All @@ -15,8 +16,14 @@
"@chakra-ui/anatomy": "^2.1.1",
"@chakra-ui/icons": "^2.0.19",
"@chakra-ui/react": "^2.6.1",
"@codingame/monaco-vscode-configuration-service-override": "~1.82.3",
"@codingame/monaco-vscode-textmate-service-override": "~1.82.3",
"@codingame/monaco-vscode-theme-defaults-default-extension": "~1.82.3",
"@codingame/monaco-vscode-theme-service-override": "~1.82.3",
"@codingame/monaco-vscode-typescript-basics-default-extension": "~1.82.3",
"@emotion/react": "^11.11.0",
"@emotion/styled": "^11.11.0",
"@monaco-editor/react": "^4.6.0",
"@patternfly/react-log-viewer": "^5.0.0",
"@sentry/integrations": "^7.73.0",
"@sentry/react": "^7.73.0",
Expand All @@ -36,7 +43,8 @@
"immer": "^10.0.2",
"laf-client-sdk": "1.0.0-beta.14",
"lodash": "^4.17.21",
"monaco-editor": "^0.38.0",
"monaco-editor": "~0.43.0",
"monaco-languageclient": "~6.5.1",
"pako": "^2.1.0",
"qrcode.react": "^3.1.0",
"react": "18.2.0",
Expand All @@ -59,6 +67,9 @@
"simplebar-react": "^3.2.4",
"ts-key-enum": "^2.0.12",
"uuid": "^9.0.0",
"vscode": "npm:@codingame/monaco-vscode-api@>=1.82.3 <1.83.0",
"vscode-languageclient": "~8.1.0",
"vscode-ws-jsonrpc": "~3.0.0",
"zustand": "^4.3.8"
},
"devDependencies": {
Expand All @@ -71,6 +82,9 @@
"@types/react-syntax-highlighter": "^15.5.6",
"@types/react-window": "^1.8.8",
"@types/uuid": "^9.0.1",
"@types/vscode": "~1.82.0",
"@typescript-eslint/eslint-plugin": "~6.7.4",
"@typescript-eslint/parser": "~6.7.4",
"@vitejs/plugin-react-swc": "^3.3.1",
"autoprefixer": "^10.4.14",
"click-to-react-component": "^1.0.8",
Expand All @@ -87,4 +101,4 @@
"*.{ts,tsx,js}": "eslint --fix",
"*.{css,scss}": "stylelint --fix"
}
}
}
22 changes: 22 additions & 0 deletions web/public/locales/en/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,11 @@
"FontSize": "Font Size",
"FuncListDisplay": "Function List Display",
"ListDisplay": "List Display",
"EditorLanguageServer": "Editor Language Server",
"isOpenLanguageServer": "Enable or Close Language server (only effective when the app config is above 0.5C 1G)",
"Editor": "Editor",
"FuncList": "Function List",
"EditorMode": "Editor Mode",
"OldLogs": "Old Logs",
"MonitorSetting": "Resource Monitor",
"DatabaseMonitor": "Database monitor",
Expand Down Expand Up @@ -714,6 +719,23 @@
"Export": "Export",
"logs": "Logs"
},
"KeyCannotBeEmpty": "Key can't be empty",
"ValueCannotBeEmpty": "Value can't be empty",
"AddENV": "Add ENV",
"LSP": {
"InitLanguageServer": "Click to reconnect to language server",
"LanguageServerClosed": "Language Server Disconnected",
"LanguageServerError": "Language Server Error",
"InitializingLanguageServer": "Initializing Language Server",
"StartLanguageServer": "Click on 'Settings' on the left to enable the language server.",
"EnableLanguageServer": "Click on 'Settings' on the left to enable the language server.",
"LanguageServerNotEnable": "Language server not enabled"
},
"KeyAlreadyExists": "Key already exists",
"SettingPanal": {
"EditorSettings": "Editor Settings",
"FunctionListSettings": "Function list settings"
},
"Deprecated": "Deprecated",
"All": "All",
"DatabaseMonitor": {
Expand Down
22 changes: 22 additions & 0 deletions web/public/locales/zh-CN/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,11 @@
"FontSize": "字体大小",
"FuncListDisplay": "函数列表显示",
"ListDisplay": "列表显示",
"EditorLanguageServer": "编辑器语言服务",
"isOpenLanguageServer": "是否开启语言服务（仅在应用配置高于 0.5C 1G 时生效）",
"Editor": "编辑器",
"FuncList": "函数列表",
"EditorMode": "使用编辑器模式",
"OldLogs": "旧版日志",
"MonitorSetting": "资源监控",
"DatabaseMonitor": "数据库监控",
Expand Down Expand Up @@ -714,6 +719,23 @@
"Export": "导出",
"logs": "日志"
},
"KeyCannotBeEmpty": "Key 不能为空",
"ValueCannotBeEmpty": "Value 不能为空",
"AddENV": "新增环境变量",
"LSP": {
"InitLanguageServer": "点击以重新连接语言服务器",
"LanguageServerClosed": "语言服务器断开",
"LanguageServerError": "语言服务器错误",
"InitializingLanguageServer": "正在初始化语言服务",
"StartLanguageServer": "点击左侧”设置”启用语言服务器",
"EnableLanguageServer": "点击左侧”设置”启用语言服务器",
"LanguageServerNotEnable": "未启用语言服务"
},
"KeyAlreadyExists": "key 已经存在",
"SettingPanal": {
"EditorSettings": "编辑器设置",
"FunctionListSettings": "函数列表设置"
},
"Deprecated": "已弃用",
"All": "全部",
"DatabaseMonitor": {
Expand Down
22 changes: 22 additions & 0 deletions web/public/locales/zh/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,11 @@
"FontSize": "字体大小",
"FuncListDisplay": "函数列表显示",
"ListDisplay": "列表显示",
"EditorLanguageServer": "编辑器语言服务",
"isOpenLanguageServer": "是否开启语言服务（仅在应用配置高于 0.5C 1G 时生效）",
"Editor": "编辑器",
"FuncList": "函数列表",
"EditorMode": "使用编辑器模式",
"OldLogs": "旧版日志",
"MonitorSetting": "资源监控",
"DatabaseMonitor": "数据库监控",
Expand Down Expand Up @@ -714,6 +719,23 @@
"Export": "导出",
"logs": "日志"
},
"KeyCannotBeEmpty": "Key 不能为空",
"ValueCannotBeEmpty": "Value 不能为空",
"AddENV": "新增环境变量",
"LSP": {
"InitLanguageServer": "点击以重新连接语言服务器",
"LanguageServerClosed": "语言服务器断开",
"LanguageServerError": "语言服务器错误",
"InitializingLanguageServer": "正在初始化语言服务",
"StartLanguageServer": "点击左侧”设置”启用语言服务器",
"EnableLanguageServer": "点击左侧”设置”启用语言服务器",
"LanguageServerNotEnable": "未启用语言服务"
},
"KeyAlreadyExists": "key 已经存在",
"SettingPanal": {
"EditorSettings": "编辑器设置",
"FunctionListSettings": "函数列表设置"
},
"Deprecated": "已弃用",
"All": "全部",
"DatabaseMonitor": {
Expand Down
52 changes: 26 additions & 26 deletions web/src/components/EditableTable/EditableTr/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ const EditableTr = function (props: {
{column.map((item: TColumnItem) => {
const { width, key, editable = true, validate, editComponent } = item;
return (
<Td maxWidth={width || undefined} key={key}>
<Td maxWidth={width || undefined} key={key} className="!py-[10px]">
<FormControl isInvalid={invalidData && !invalidData[key].isValidate}>
{editComponent ? (
editComponent({
Expand All @@ -142,39 +142,39 @@ const EditableTr = function (props: {
onChange={(e: any) => handleChange(e, key, validate)}
disabled={!editable && !isCreate}
placeholder={`${t("InputTip").toString()} ${key}`}
className="!bg-lafWhite-500 !pl-2"
style={{ fontFamily: "Inter" }}
/>
)}
<FormErrorMessage>{invalidData && invalidData[key].errorInfo}</FormErrorMessage>
</FormControl>
</Td>
);
})}
<Td maxWidth="150px">
<>
<TextButton
text={configuration?.saveButtonText ? configuration.saveButtonText : t("Confirm")}
type="submit"
onClick={() => {
let flag = true;
for (let { validate, key } of column) {
flag = validate && !handleValidate(key, formData[key], validate) ? false : flag;
if (!flag) {
break;
}
<Td className="mr-1 flex justify-end !py-[18px]">
<TextButton
text={configuration?.saveButtonText ? configuration.saveButtonText : t("Confirm")}
type="submit"
onClick={() => {
let flag = true;
for (let { validate, key } of column) {
flag = validate && !handleValidate(key, formData[key], validate) ? false : flag;
if (!flag) {
break;
}
if (flag) {
onSave(formData);
}
}}
/>
<TextButton
text={configuration?.cancelButtonText ? configuration.cancelButtonText : t("Cancel")}
className="ml-4"
onClick={() => {
onCancel(formData[configuration.key]);
}}
/>
</>
}
if (flag) {
onSave(formData);
}
}}
/>
<TextButton
text={configuration?.cancelButtonText ? configuration.cancelButtonText : t("Cancel")}
className="ml-3"
onClick={() => {
onCancel(formData[configuration.key]);
}}
/>
</Td>
</>
);
Expand Down
30 changes: 12 additions & 18 deletions web/src/components/EditableTable/NormalTr/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { EditIcon } from "@chakra-ui/icons";
import { Td } from "@chakra-ui/react";
import { useColorMode } from "@chakra-ui/react";
import { t } from "i18next";

import { RecycleDeleteIcon } from "@/components/CommonIcon";
import { EditIconLine, RecycleDeleteIcon } from "@/components/CommonIcon";
import IconWrap from "@/components/IconWrap";

import ConfirmButton from "../../ConfirmButton";
import { TColumnItem, TConfiguration } from "../EditableTr";

import styles from "../index.module.scss";
Expand All @@ -18,6 +17,7 @@ const NormalTr = function (props: {
configuration: TConfiguration;
}) {
const { data, column, configuration, onEdit, onDelete } = props;
const darkMode = useColorMode().colorMode === "dark";
return (
<>
{column.map((item: TColumnItem) => {
Expand All @@ -27,34 +27,28 @@ const NormalTr = function (props: {
</Td>
);
})}
<Td className="mr-2 flex items-end justify-end">
<Td className="mr-4 flex items-end justify-end">
{configuration?.operationButtonsRender ? configuration.operationButtonsRender(data) : null}
{!configuration?.hiddenEditButton ? (
<IconWrap
className="mr-2"
className="mr-4"
tooltip={
configuration?.editButtonText ? configuration.editButtonText : t("Edit").toString()
}
size={20}
onClick={() => onEdit(data[configuration.key])}
>
<EditIcon fontSize={15} onClick={() => onEdit(data[configuration.key])} />
<EditIconLine color={darkMode ? "white" : "black"} size={12} />
</IconWrap>
) : null}
<ConfirmButton
onSuccessAction={() => onDelete(data[configuration.key])}
headerText={
<IconWrap
tooltip={
configuration?.deleteButtonText ? configuration.deleteButtonText : String(t("Delete"))
}
bodyText={t("DeleteConfirm")}
onClick={() => onDelete(data[configuration.key])}
>
<IconWrap
tooltip={
configuration?.deleteButtonText ? configuration.deleteButtonText : String(t("Delete"))
}
>
<RecycleDeleteIcon fontSize={15} />
</IconWrap>
</ConfirmButton>
<RecycleDeleteIcon fontSize={15} />
</IconWrap>
</Td>
</>
);
Expand Down
1 change: 1 addition & 0 deletions web/src/components/EditableTable/index.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: Inter;
}
Loading

0 comments on commit 022ee46

Please sign in to comment.