Skip to content

Commit 704c9b9

Browse files
haydenullhaydenull
committed
feat: ✨ add Chinese translations
1 parent 81ac7bd commit 704c9b9

File tree

8 files changed

+201
-87
lines changed

8 files changed

+201
-87
lines changed

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"@ant-design/icons": "^4.7.0",
1919
"@babel/core": "7.12.3",
2020
"@craco/craco": "^6.3.0",
21-
"@logseq/libs": "0.0.1-alpha.26",
21+
"@logseq/libs": "^0.0.15",
2222
"@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
2323
"@svgr/webpack": "5.5.0",
2424
"@tailwindcss/postcss7-compat": "^2.2.17",
@@ -53,6 +53,7 @@
5353
"file-loader": "6.1.1",
5454
"fs-extra": "^9.0.1",
5555
"html-webpack-plugin": "4.5.0",
56+
"i18next": "^23.4.6",
5657
"identity-obj-proxy": "3.0.0",
5758
"jest": "26.6.0",
5859
"jest-circus": "26.6.0",
@@ -74,6 +75,7 @@
7475
"react-app-polyfill": "^2.0.0",
7576
"react-dev-utils": "^11.0.3",
7677
"react-dom": "^17.0.2",
78+
"react-i18next": "^13.2.2",
7779
"react-refresh": "^0.8.3",
7880
"resolve": "1.18.1",
7981
"resolve-url-loader": "^3.1.2",

‎src/components/ToolBar.jsx

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { useSlate } from 'slate-react'
22
import { InsertRowAboveOutlined, InsertRowBelowOutlined, InsertRowLeftOutlined, InsertRowRightOutlined, DeleteRowOutlined, DeleteColumnOutlined } from '@ant-design/icons'
33
import { Tooltip } from 'antd'
4+
import { useTranslation } from 'react-i18next'
45

56
import { TableUtil } from '../utils/table'
67

78
const ToolBar = () => {
9+
const { t } = useTranslation()
810
const editor = useSlate()
911

1012
const table = new TableUtil(editor)
@@ -16,25 +18,25 @@ const ToolBar = () => {
1618

1719
return (
1820
<div className="mb-2 space-x-2 bg-white inline-flex px-3 py-1 rounded-md shadow-sm">
19-
<Tooltip title="insert row above" arrowPointAtCenter placement="topLeft">
21+
<Tooltip title={t('insert row above')} arrowPointAtCenter placement="topLeft">
2022
<InsertRowAboveOutlined className="text-xl cursor-pointer hover:opacity-70" onMouseDown={e => handleButtonClick(e, 'insert-row-above')} />
2123
</Tooltip>
22-
<Tooltip title="insert row below" arrowPointAtCenter placement="topLeft">
24+
<Tooltip title={t('insert row below')} arrowPointAtCenter placement="topLeft">
2325
<InsertRowBelowOutlined className="text-xl cursor-pointer hover:opacity-70" onMouseDown={e => handleButtonClick(e, 'insert-row-below')} />
2426
</Tooltip>
25-
<Tooltip title="delete row" arrowPointAtCenter placement="topLeft">
27+
<Tooltip title={t('delete row')} arrowPointAtCenter placement="topLeft">
2628
<DeleteRowOutlined className="text-xl cursor-pointer hover:opacity-70" onMouseDown={e => handleButtonClick(e, 'delete-row')} />
2729
</Tooltip>
2830

2931
<div className="border-l border-gray-300"></div>
3032

31-
<Tooltip title="insert column before" arrowPointAtCenter placement="topLeft">
33+
<Tooltip title={t('insert column before')} arrowPointAtCenter placement="topLeft">
3234
<InsertRowLeftOutlined className="text-xl cursor-pointer hover:opacity-70" onMouseDown={e => handleButtonClick(e, 'insert-column-above')} />
3335
</Tooltip>
34-
<Tooltip title="insert column after" arrowPointAtCenter placement="topLeft">
36+
<Tooltip title={t('insert column after')} arrowPointAtCenter placement="topLeft">
3537
<InsertRowRightOutlined className="text-xl cursor-pointer hover:opacity-70" onMouseDown={e => handleButtonClick(e, 'insert-column-below')} />
3638
</Tooltip>
37-
<Tooltip title="delete column" arrowPointAtCenter placement="topLeft">
39+
<Tooltip title={t('delete column')} arrowPointAtCenter placement="topLeft">
3840
<DeleteColumnOutlined className="text-xl cursor-pointer hover:opacity-70" onMouseDown={e => handleButtonClick(e, 'delete-column')} />
3941
</Tooltip>
4042

‎src/index.js

+46-42
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import App from './pages/App'
77
import parseMarkdownTable from './utils/parseRawInputByMarkdownIt'
88
// import { multipleTables, empty, longTables, onlyText, tableWithTextBeforeAndAfter } from './utils/testExample'
99
import { longTables } from './utils/testExample'
10+
import i18n from './locales/i18n'
1011
import './index.css'
1112

1213
const logseq = window.logseq
@@ -24,53 +25,56 @@ if (isInBrowser) {
2425
bootEditor(longTables, 111)
2526
} else {
2627
logseq.ready().then(() => {
27-
// padding-left: var(--ls-left-sidebar-width);
28-
logseq.provideStyle(`
29-
iframe#logseq-markdown-table.lsp-iframe-sandbox {
30-
z-index: 10;
31-
}
32-
`)
33-
console.log('[faiz:] === markdown-table-editor-plugin loaded')
34-
const commandCallback = (e) => {
35-
console.log('[faiz:] === woz-markdown-table-editor', e)
36-
logseqEditor.getBlock(e.uuid).then(block => {
37-
console.log('[faiz:] === block', block)
38-
const { format, content } = block
39-
// only support markdown
40-
if (format !== 'markdown') return logseqApp.showMsg('woz-markdown-table-editor only support markdown', 'warning')
41-
42-
bootEditor(content, e.uuid)
28+
logseq.App.getUserConfigs().then(configs => {
29+
i18n.changeLanguage(configs.preferredLanguage || 'en')
30+
// padding-left: var(--ls-left-sidebar-width);
31+
logseq.provideStyle(`
32+
iframe#logseq-markdown-table.lsp-iframe-sandbox {
33+
z-index: 10;
34+
}
35+
`)
36+
console.log('[faiz:] === markdown-table-editor-plugin loaded')
37+
const commandCallback = (e) => {
38+
console.log('[faiz:] === woz-markdown-table-editor', e)
39+
logseqEditor.getBlock(e.uuid).then(block => {
40+
console.log('[faiz:] === block', block)
41+
const { format, content } = block
42+
// only support markdown
43+
if (format !== 'markdown') return logseqApp.UI.showMsg(i18n.t('Markdown table editor only support markdown'), 'warning')
4344

44-
// for empty block
45-
// todo: fix
46-
// if (content === '') return renderApp(DEFAULT_TABLE, [], e.uuid)
45+
bootEditor(content, e.uuid)
4746

48-
// const tables = parseMarkdownTable(content)
49-
// if (tables?.length > 0) {
50-
// // const [startLine, endLine] = tables[0]
51-
// // const firstTable = content.split('\n').slice(startLine, endLine).join('\n')
52-
// // console.log('[faiz:] === firstTable', content, firstTable, startLine, endLine)
53-
// // return renderApp(firstTable, e.uuid)
54-
// return renderApp(content, tables, e.uuid)
55-
// }
47+
// for empty block
48+
// todo: fix
49+
// if (content === '') return renderApp(DEFAULT_TABLE, [], e.uuid)
5650

57-
// const renderHtml = md.render(content)
58-
// if (renderHtml.startsWith('<table>') && (renderHtml.endsWith('</table>') || renderHtml.endsWith('</table>\n'))) {
59-
// return renderApp(content || DEFAULT_TABLE, e.uuid)
60-
// }
61-
// format to table error
62-
// window.logseq.App.showMsg('Sorry, block content format to markdown table error', 'warning')
63-
// console.log('[faiz:] === block content format to markdown table error')
64-
})
65-
}
66-
logseqEditor.registerBlockContextMenuItem('markdown-table-editor', commandCallback)
67-
logseqEditor.registerSlashCommand('markdown-table-editor', commandCallback)
51+
// const tables = parseMarkdownTable(content)
52+
// if (tables?.length > 0) {
53+
// // const [startLine, endLine] = tables[0]
54+
// // const firstTable = content.split('\n').slice(startLine, endLine).join('\n')
55+
// // console.log('[faiz:] === firstTable', content, firstTable, startLine, endLine)
56+
// // return renderApp(firstTable, e.uuid)
57+
// return renderApp(content, tables, e.uuid)
58+
// }
6859

69-
logseq.on('ui:visible:changed', (e) => {
70-
if (!e.visible) {
71-
ReactDOM.unmountComponentAtNode(document.getElementById('root'));
60+
// const renderHtml = md.render(content)
61+
// if (renderHtml.startsWith('<table>') && (renderHtml.endsWith('</table>') || renderHtml.endsWith('</table>\n'))) {
62+
// return renderApp(content || DEFAULT_TABLE, e.uuid)
63+
// }
64+
// format to table error
65+
// window.logseq.App.showMsg('Sorry, block content format to markdown table error', 'warning')
66+
// console.log('[faiz:] === block content format to markdown table error')
67+
})
7268
}
73-
});
69+
logseqEditor.registerBlockContextMenuItem(i18n.t('Markdown Table Editor'), commandCallback)
70+
logseqEditor.registerSlashCommand('Markdown Table Editor', commandCallback)
71+
72+
logseq.on('ui:visible:changed', (e) => {
73+
if (!e.visible) {
74+
ReactDOM.unmountComponentAtNode(document.getElementById('root'));
75+
}
76+
});
77+
})
7478
})
7579
}
7680

‎src/locales/en/translation.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"Markdown Table Editor": "Markdown Table Editor",
3+
"Markdown table editor only support markdown": "Markdown table editor only support markdown format",
4+
"Add New Table": "Add New Table",
5+
"Cancel": "Cancel",
6+
"Confirm": "Confirm",
7+
"insert row above": "insert row above",
8+
"insert row below": "insert row below",
9+
"delete row": "delete row",
10+
"insert column before": "insert column before",
11+
"insert column after": "insert column after",
12+
"delete column": "delete column",
13+
"uuid error": "uuid error",
14+
"markdown table overwrite success": "markdown table overwrite success",
15+
"markdown table overwrite error": "markdown table overwrite error"
16+
}

‎src/locales/i18n.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import i18n from "i18next";
2+
import { initReactI18next } from "react-i18next";
3+
4+
import translationEN from "./en/translation.json";
5+
import translationZhCN from "./zh-CN/translation.json";
6+
7+
const resources = {
8+
en: {
9+
translation: translationEN,
10+
},
11+
'zh-CN': {
12+
translation: translationZhCN,
13+
},
14+
};
15+
16+
i18n.use(initReactI18next).init({
17+
resources,
18+
lng: "en",
19+
fallbackLng: "en",
20+
interpolation: {
21+
escapeValue: false,
22+
},
23+
});
24+
25+
export default i18n;

‎src/locales/zh-CN/translation.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"Markdown Table Editor": "Markdown 表格编辑器",
3+
"Markdown table editor only support markdown": "Markdown 表格编辑器仅支持 Markdown 格式",
4+
"Add New Table": "添加新表格",
5+
"Cancel": "取消",
6+
"Confirm": "确认",
7+
"insert row above": "在上方插入新行",
8+
"insert row below": "在下方插入新行",
9+
"delete row": "删除行",
10+
"insert column before": "在左侧插入新列",
11+
"insert column after": "在右侧插入新列",
12+
"delete column": "删除列",
13+
"uuid error": "uuid 错误",
14+
"markdown table overwrite success": "markdown 表格覆盖成功",
15+
"markdown table overwrite error": "markdown 表格覆盖失败"
16+
}

‎src/pages/App.jsx

+11-9
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import TableEditor from '../components/TableEditor'
66
import { slateValueToString } from '../utils/util'
77
import { tableLineReg, DEFAULT_TABLE } from '../utils/contants'
88
import './App.css'
9+
import { useTranslation } from 'react-i18next'
910

1011
const logseq = window.logseq
1112
const logseqApp = logseq.App
@@ -14,6 +15,7 @@ const logseqEditor = logseq.Editor
1415
const isInBrowser = process.env.REACT_APP_ENV === 'browser'
1516

1617
const App = ({ content, tables, blockId }) => {
18+
const { t } = useTranslation()
1719

1820
const tableEditorMapRef = useRef({})
1921
const [arrAfterSplitByTable, setArrAfterSplitByTable] = useState([])
@@ -26,7 +28,7 @@ const App = ({ content, tables, blockId }) => {
2628
}
2729

2830
const onClickConfirm = () => {
29-
if (!blockId && !isInBrowser) return logseqApp.showMsg('uuid error')
31+
if (!blockId && !isInBrowser) return logseqApp.UI.showMsg(t('uuid error'))
3032
const markdownContent = arrAfterSplitByTable.map((node, index) => {
3133
if (node.type === 'table') {
3234
const slateVal = tableEditorMapRef.current?.[index]?.getEditorValue()?.[0]
@@ -39,11 +41,11 @@ const App = ({ content, tables, blockId }) => {
3941

4042
logseqEditor.updateBlock(blockId, markdownContent)
4143
.then(() => {
42-
logseqApp.showMsg('markdown table overwrite success')
44+
logseqApp.UI.showMsg(t('markdown table overwrite success'))
4345
logseq.hideMainUI()
4446
})
4547
.catch(err => {
46-
logseqApp.showMsg('markdown table overwrite error', 'warning')
48+
logseqApp.UI.showMsg(t('markdown table overwrite error'), 'warning')
4749
console.log('[faiz:] === onClickConfirm error', err)
4850
})
4951
}
@@ -92,21 +94,21 @@ const App = ({ content, tables, blockId }) => {
9294
return (
9395
<div className="w-screen h-screen flex flex-col justify-center items-center">
9496
<div className="w-screen h-screen absolute" style={{ background: 'rgba(0, 0, 0, .3)', zIndex: -1 }} onClick={onClickCancel}></div>
95-
<div className="w-2/3 overflow-y-auto" style={{ maxHeight: '80%'}}>
97+
<div className="w-2/3 overflow-y-auto" style={{ maxHeight: '80%' }}>
9698
<div className="mt-2 flex flex-col">
9799
{
98100
arrAfterSplitByTable?.map((node, index) => {
99101
return node?.type === 'table'
100-
? (<TableEditor className="my-2" content={node?.str} key={index} ref={dom => setTableEditorRef(index, dom)} />)
101-
: (<div className="bg-gray-400 text-gray-300 my-3 rounded px-1 py-2" key={index} style={{whiteSpace: 'pre-line'}}>{node.str}</div>)
102+
? (<TableEditor className="my-2" content={node?.str} key={index} ref={dom => setTableEditorRef(index, dom)} />)
103+
: (<div className="bg-gray-400 text-gray-300 my-3 rounded px-1 py-2" key={index} style={{ whiteSpace: 'pre-line' }}>{node.str}</div>)
102104
})
103105
}
104106
</div>
105107
</div>
106-
<Button ghost className="rounded mt-2 flex items-center" icon={<PlusOutlined />} onClick={onClickAdd}>Add New Table</Button>
108+
<Button ghost className="rounded mt-2 flex items-center" icon={<PlusOutlined />} onClick={onClickAdd}>{t('Add New Table')}</Button>
107109
<div className="flex w-2/3 flex-row justify-end mt-4">
108-
<Button className="mr-1 rounded" onClick={onClickCancel}>Cancel</Button>
109-
<Button className="rounded" type="primary" onClick={onClickConfirm}>Confirm</Button>
110+
<Button className="mr-1 rounded" onClick={onClickCancel}>{t('Cancel')}</Button>
111+
<Button className="rounded" type="primary" onClick={onClickConfirm}>{t('Confirm')}</Button>
110112
</div>
111113
</div>
112114
)

0 commit comments

Comments
 (0)