feat: ✨ Supports break line

Author: haydenull

README-zh_CN.md

@@ -13,6 +13,7 @@
 ## 快捷键
 - `Tab`: 移动光标到下一个单元格
 - `Shift + Tab`: 移动光标到上一个单元格
+- `Shift + Enter`: 在当前单元格换行
 
 ## 开发
 ```shell

README.md

@@ -7,8 +7,6 @@ English | [简体中文](./README-zh_CN.md)
 
 reference[https://codesandbox.io/s/yt8jc](https://codesandbox.io/s/yt8jc)
 
-[Roadmap](https://www.notion.so/haydenut/logseq-plugin-markdown-table-a95f18109a894b9a803b613ce05ac697)
-
 ## Read Before Use
 - **Multiple tables need to be separated by blank lines, otherwise they will be recognized as one table**
 
@@ -18,6 +16,7 @@ reference[https://codesandbox.io/s/yt8jc](https://codesandbox.io/s/yt8jc)
 ## Shortcuts
 - `Tab`: Move cursor to the next cell
 - `Shift + Tab`: Move cursor to the previous cell
+- `Shift + Enter`: Break line in the current cell
 
 ## Development
 ```shell

src/components/TableEditor.jsx

@@ -86,6 +86,14 @@ const TableEditor = ({ content = DEFAULT_TABLE, className = '' }, ref) => {
   const tableUtil = useMemo(() => new TableUtil(editor), [editor])
   const renderElement = useCallback(props => <Element {...props} />, [])
 
+  const onKeyDown = event => {
+    // https://docs.slatejs.org/libraries/slate-react#editable
+    if (event.key === 'Enter' && event.shiftKey) {
+      editor.insertText('\n')
+      return false
+    }
+  }
+
   useImperativeHandle(
     ref,
     () => ({
@@ -114,6 +122,7 @@ const TableEditor = ({ content = DEFAULT_TABLE, className = '' }, ref) => {
         <Editable
           placeholder='Write something'
           renderElement={renderElement}
+          onKeyDown={onKeyDown}
         />
       </Slate>
     </div>

src/utils/testExample.js

@@ -10,4 +10,4 @@ export const tableWithTextBeforeAndAfter = 'foo\n`yarn install`\n|title1|title2|
 
 export const multipleTables = 'foo\n`yarn install`\n|title1|title2|\n|--|--|\n|content1|content2|\n|**bold**|\nother\n\n|table2|table2|\n|--|--|\n|contentB|contentB|\ntest text'
 
-export const longTables = 'foo\n`yarn install`\n|title1|title2|\n|--|--|\n|content1|content2|\n\n**bold**\nother\n\n|table2|table2|\n|--|--|\n|contentB|contentB|\n\n|table2|table2|\n|--|--|\n|contentB|contentB|\n|contentB|contentB|\n|contentB|contentB|\n|contentB|contentB|'
+export const longTables = 'foo\n`yarn install`\n|title1[:br]new line|title2|\n|--|--|\n|content1|content2|\n\n**bold**\nother\n\n|table2|table2|\n|--|--|\n|contentB|contentB|\n\n|table2|table2|\n|--|--|\n|contentB|contentB|\n|contentB|contentB|\n|contentB|contentB|\n|contentB|contentB|'

src/utils/util.js

@@ -2,7 +2,8 @@ import { DEFAULT_TABLE } from './contants'
 
 export const stringToSlateValue = (str = '') => {
   str = str || DEFAULT_TABLE
-  const _arr = str.trim().split('\n').filter(Boolean)
+  // 将 [:br] 转为换行符
+  const _arr = str.trim().split('\n').filter(Boolean).map(_str => _str.replaceAll('[:br]', '\n'))
   const contentArr = [_arr[0]].concat(_arr.slice(2))
   const res = contentArr.map(rowStr => {
     const rowArr = rowStr.trim().split('|')
@@ -14,7 +15,8 @@ export const stringToSlateValue = (str = '') => {
 export const slateValueToString = (slateVal) => {
   let rowStrs = Array.from(slateVal.children, (row) => {
     const cells = Array.from(row.children, (cell) => {
-      return cell.children[0].text
+      // 将换行符替换为 [:br]
+      return cell.children[0].text?.replaceAll('\n', '[:br]')
     }).join('|')
     return `|${cells}|`
   })