This is an automated email from the ASF dual-hosted git repository. robin0716 pushed a commit to branch feat/embed in repository https://gitbox.apache.org/repos/asf/incubator-answer-plugins.git
commit 696ce4fd4981ff8b8084af076b62ad736701e3d3 Author: robin <[email protected]> AuthorDate: Wed Jun 5 18:20:47 2024 +0800 refactor(editor-chart): Update i18n files to use YAML format --- editor-chart/.prettierrc.json | 8 ++++++ editor-chart/Chart.tsx | 61 ++++++++++++++++++++++--------------------- editor-chart/hooks.ts | 6 +++-- editor-chart/i18n/en_US.json | 15 ----------- editor-chart/i18n/en_US.yaml | 12 +++++++++ editor-chart/i18n/index.ts | 4 +-- editor-chart/i18n/zh_CN.json | 15 ----------- editor-chart/i18n/zh_CN.yaml | 11 ++++++++ editor-chart/package.json | 1 + editor-chart/pnpm-lock.yaml | 43 ++++++++++++++++++++++++++++++ editor-chart/tsconfig.json | 3 +++ editor-chart/vite.config.ts | 3 ++- 12 files changed, 117 insertions(+), 65 deletions(-) diff --git a/editor-chart/.prettierrc.json b/editor-chart/.prettierrc.json new file mode 100644 index 0000000..c707926 --- /dev/null +++ b/editor-chart/.prettierrc.json @@ -0,0 +1,8 @@ +{ + "trailingComma": "all", + "tabWidth": 2, + "singleQuote": true, + "jsxBracketSameLine": true, + "printWidth": 80, + "endOfLine": "auto" +} diff --git a/editor-chart/Chart.tsx b/editor-chart/Chart.tsx index be31df9..2bf344a 100644 --- a/editor-chart/Chart.tsx +++ b/editor-chart/Chart.tsx @@ -17,34 +17,34 @@ * under the License. */ -import { FC, useState } from 'react' -import { Button, Dropdown } from 'react-bootstrap' -import { useTranslation } from 'react-i18next' +import { FC, useState } from 'react'; +import { Button, Dropdown } from 'react-bootstrap'; +import { useTranslation } from 'react-i18next'; -import { useRenderChart } from './hooks' +import { useRenderChart } from './hooks'; interface ChartProps { - editor - previewElement: HTMLElement + editor; + previewElement: HTMLElement; } const Chart: FC<ChartProps> = ({ editor, previewElement }) => { - useRenderChart(previewElement) + useRenderChart(previewElement); const { t } = useTranslation('plugin', { - keyPrefix: 'chart', - }) - const [isLocked, setLockState] = useState(false) + keyPrefix: 'chart_editor.frontend', + }); + const [isLocked, setLockState] = useState(false); const handleMouseEnter = () => { if (isLocked) { - return + return; } - setLockState(true) - } + setLockState(true); + }; const handleMouseLeave = () => { - setLockState(false) - } + setLockState(false); + }; const headerList = [ { label: t('flow_chart'), @@ -134,13 +134,13 @@ const Chart: FC<ChartProps> = ({ editor, previewElement }) => { PRODUCT ||--o{ ORDER-ITEM : "ordered in" `, }, - ] + ]; const handleChange = (tpl: string) => { - const { ch } = editor.getCursor() + const { ch } = editor.getCursor(); - editor.replaceSelection(`${ch ? '\n' : ''}\`\`\`mermaid\n${tpl}\n\`\`\`\n`) - } + editor.replaceSelection(`${ch ? '\n' : ''}\`\`\`mermaid\n${tpl}\n\`\`\`\n`); + }; return ( <div className="toolbar-item-wrap"> @@ -149,28 +149,29 @@ const Chart: FC<ChartProps> = ({ editor, previewElement }) => { type="button" as={Button} variant="link" - className="p-0 b-0 btn-no-border toolbar text-body" - > + title={t('title')} + className="p-0 b-0 btn-no-border toolbar text-body"> <i className="bi bi-diagram-3-fill"></i> </Dropdown.Toggle> - <Dropdown.Menu onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}> + <Dropdown.Menu + onMouseEnter={handleMouseEnter} + onMouseLeave={handleMouseLeave}> {headerList.map((header) => { return ( <Dropdown.Item key={header.label} onClick={(e) => { - e.preventDefault() - handleChange(header.tpl) - }} - > + e.preventDefault(); + handleChange(header.tpl); + }}> {header.label} </Dropdown.Item> - ) + ); })} </Dropdown.Menu> </Dropdown> </div> - ) -} + ); +}; -export default Chart +export default Chart; diff --git a/editor-chart/hooks.ts b/editor-chart/hooks.ts index 1e1c15b..41f9253 100644 --- a/editor-chart/hooks.ts +++ b/editor-chart/hooks.ts @@ -22,7 +22,9 @@ import { useEffect, RefObject } from 'react'; // @ts-ignore import mermaid from 'mermaid'; -const useRenderChart = (element: HTMLElement | RefObject<HTMLElement> | null) => { +const useRenderChart = ( + element: HTMLElement | RefObject<HTMLElement> | null, +) => { const render = (element) => { mermaid.initialize({ startOnLoad: false }); element.querySelectorAll('.language-mermaid').forEach((pre) => { @@ -64,7 +66,7 @@ const useRenderChart = (element: HTMLElement | RefObject<HTMLElement> | null) => return () => { observer.disconnect(); - } + }; }, [element]); }; diff --git a/editor-chart/i18n/en_US.json b/editor-chart/i18n/en_US.json deleted file mode 100644 index 5514b28..0000000 --- a/editor-chart/i18n/en_US.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "plugin": { - "chart": { - "text": "Chart", - "flow_chart": "Flow chart", - "sequence_diagram": "Sequence diagram", - "class_diagram": "Class diagram", - "state_diagram": "State diagram", - "entity_relationship_diagram": "Entity relationship diagram", - "user_defined_diagram": "User defined diagram", - "gantt_chart": "Gantt chart", - "pie_chart": "Pie chart" - } - } -} \ No newline at end of file diff --git a/editor-chart/i18n/en_US.yaml b/editor-chart/i18n/en_US.yaml index 3cb6297..164bd54 100644 --- a/editor-chart/i18n/en_US.yaml +++ b/editor-chart/i18n/en_US.yaml @@ -23,3 +23,15 @@ plugin: other: Chart Editor description: other: Render chart in editor + frontend: + title: Chart + text: Chart + flow_chart: Flow chart + sequence_diagram: Sequence diagram + class_diagram: Class diagram + state_diagram: State diagram + entity_relationship_diagram: Entity relationship diagram + user_defined_diagram: User defined diagram + gantt_chart: Gantt chart + pie_chart: Pie chart + diff --git a/editor-chart/i18n/index.ts b/editor-chart/i18n/index.ts index 6853e76..7f7b453 100644 --- a/editor-chart/i18n/index.ts +++ b/editor-chart/i18n/index.ts @@ -17,8 +17,8 @@ * under the License. */ -import en_US from './en_US.json'; -import zh_CN from './zh_CN.json'; +import en_US from './en_US.yaml'; +import zh_CN from './zh_CN.yaml'; export default { en_US, diff --git a/editor-chart/i18n/zh_CN.json b/editor-chart/i18n/zh_CN.json deleted file mode 100644 index 596d028..0000000 --- a/editor-chart/i18n/zh_CN.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "plugin": { - "chart": { - "text": "图表", - "flow_chart": "流程图", - "sequence_diagram": "时序图", - "class_diagram": "类图", - "state_diagram": "状态图", - "entity_relationship_diagram": "ER 图", - "user_defined_diagram": "用户自定义图表", - "gantt_chart": "甘特图", - "pie_chart": "饼图" - } - } -} \ No newline at end of file diff --git a/editor-chart/i18n/zh_CN.yaml b/editor-chart/i18n/zh_CN.yaml index a60b249..1676640 100644 --- a/editor-chart/i18n/zh_CN.yaml +++ b/editor-chart/i18n/zh_CN.yaml @@ -23,3 +23,14 @@ plugin: other: 图表编辑器 description: other: 在编辑器中渲染图表 + frontend: + title: 图表 + text: 图表 + flow_chart: 流程图 + sequence_diagram: 时序图 + class_diagram: 类图 + state_diagram: 状态图 + entity_relationship_diagram: ER 图 + user_defined_diagram: 用户自定义图 + gantt_chart: 甘特图 + pie_chart: 饼图 diff --git a/editor-chart/package.json b/editor-chart/package.json index 7fe716c..a2492bf 100644 --- a/editor-chart/package.json +++ b/editor-chart/package.json @@ -28,6 +28,7 @@ "react-i18next": "^11.18.3" }, "devDependencies": { + "@modyfi/vite-plugin-yaml": "^1.1.0", "@typescript-eslint/eslint-plugin": "^6.0.0", "@typescript-eslint/parser": "^6.0.0", "@vitejs/plugin-react-swc": "^3.3.2", diff --git a/editor-chart/pnpm-lock.yaml b/editor-chart/pnpm-lock.yaml index b94d4d7..b7e48df 100644 --- a/editor-chart/pnpm-lock.yaml +++ b/editor-chart/pnpm-lock.yaml @@ -22,6 +22,9 @@ dependencies: version: 11.18.6([email protected])([email protected])([email protected]) devDependencies: + '@modyfi/vite-plugin-yaml': + specifier: ^1.1.0 + version: 1.1.0([email protected]) '@typescript-eslint/eslint-plugin': specifier: ^6.0.0 version: 6.21.0(@typescript-eslint/[email protected])([email protected])([email protected]) @@ -315,6 +318,19 @@ packages: resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==} dev: true + /@modyfi/[email protected]([email protected]): + resolution: {integrity: sha512-L26xfzkSo1yamODCAtk/ipVlL6OEw2bcJ92zunyHu8zxi7+meV0zefA9xscRMDCsMY8xL3C3wi3DhMiPxcbxbw==} + peerDependencies: + vite: ^3.2.7 || ^4.0.5 || ^5.0.5 + dependencies: + '@rollup/pluginutils': 5.1.0 + js-yaml: 4.1.0 + tosource: 2.0.0-alpha.3 + vite: 4.5.3 + transitivePeerDependencies: + - rollup + dev: true + /@nodelib/[email protected]: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -378,6 +394,20 @@ packages: warning: 4.0.3 dev: false + /@rollup/[email protected]: + resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@types/estree': 1.0.5 + estree-walker: 2.0.2 + picomatch: 2.3.1 + dev: true + /@swc/[email protected]: resolution: {integrity: sha512-aqiflbmzv8joY/fNpCBe7/YJupoWQHz5dX1YfU3D8Kii5VNZeqsQEXDUEEAFZUwnSce1aoGguX/O/DIxC+1Rlg==} engines: {node: '>=10'} @@ -509,6 +539,10 @@ packages: '@swc/counter': 0.1.3 dev: true + /@types/[email protected]: + resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} + dev: true + /@types/[email protected]: resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} dev: true @@ -1293,6 +1327,10 @@ packages: engines: {node: '>=4.0'} dev: true + /[email protected]: + resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + dev: true + /[email protected]: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} engines: {node: '>=0.10.0'} @@ -1965,6 +2003,11 @@ packages: is-number: 7.0.0 dev: true + /[email protected]: + resolution: {integrity: sha512-KAB2lrSS48y91MzFPFuDg4hLbvDiyTjOVgaK7Erw+5AmZXNq4sFRVn8r6yxSLuNs15PaokrDRpS61ERY9uZOug==} + engines: {node: '>=10'} + dev: true + /[email protected]([email protected]): resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==} engines: {node: '>=16'} diff --git a/editor-chart/tsconfig.json b/editor-chart/tsconfig.json index 2500595..90129f7 100644 --- a/editor-chart/tsconfig.json +++ b/editor-chart/tsconfig.json @@ -22,6 +22,9 @@ "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, + "types": [ + "@modyfi/vite-plugin-yaml/modules" + ], }, "references": [ { diff --git a/editor-chart/vite.config.ts b/editor-chart/vite.config.ts index fb66c01..07822d4 100644 --- a/editor-chart/vite.config.ts +++ b/editor-chart/vite.config.ts @@ -19,11 +19,12 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react-swc'; +import ViteYaml from '@modyfi/vite-plugin-yaml'; import packageJson from './package.json'; // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()], + plugins: [react(), ViteYaml()], build: { lib: { entry: 'index.ts',
