feat: add new table button

Author: haydenull

src/pages/App.jsx

@@ -1,9 +1,9 @@
-import { useRef } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import { Button } from 'antd'
 
 import TableEditor from '../components/TableEditor'
 import { slateValueToString } from '../utils/util'
-import { tableLineReg } from '../utils/contants'
+import { tableLineReg, DEFAULT_TABLE } from '../utils/contants'
 import './App.css'
 
 const logseq = window.logseq
@@ -15,9 +15,7 @@ const isInBrower = process.env.REACT_APP_ENV === 'browser'
 const App = ({ content, tables, blockId }) => {
 
   const tableEditorMapRef = useRef({})
-
-  const ArrAfterSplitByTable = splitStrByTable(content, tables)
-  console.log('[faiz:] === ArrAfterSplitByTable', ArrAfterSplitByTable)
+  const [arrAfterSplitByTable, setArrAfterSplitByTable] = useState([])
 
   const setTableEditorRef = (index, dom) => {
     tableEditorMapRef.current = {
@@ -28,7 +26,7 @@ const App = ({ content, tables, blockId }) => {
 
   const onClickConfirm = () => {
     if (!blockId && !isInBrower) return logseqApp.showMsg('uuid error')
-    const markdownContent = ArrAfterSplitByTable.map((node, index) => {
+    const markdownContent = arrAfterSplitByTable.map((node, index) => {
       if (node.type === 'table') {
         const slateVal = tableEditorMapRef.current?.[index]?.getEditorValue()?.[0]
         console.log('[faiz:] === slateVal', slateVal)
@@ -49,21 +47,36 @@ const App = ({ content, tables, blockId }) => {
       })
   }
   const onClickCancel = () => logseq.hideMainUI()
+  const onClickAdd = () => {
+    setArrAfterSplitByTable(_arr => {
+      return _arr.concat({
+        type: 'table',
+        str: `${_arr.find(node => node.type === 'table') ? '\n\n' : '\n'}${DEFAULT_TABLE}`,
+      })
+    })
+  }
+
+  useEffect(() => {
+    const arr = splitStrByTable(content, tables)
+    setArrAfterSplitByTable(arr)
+    console.log('[faiz:] === arrAfterSplitByTable', arr)
+  }, [content, tables])
 
   return (
     <div className="w-screen h-screen flex flex-col justify-center items-center">
       <div className="w-screen h-screen absolute" style={{ background: 'rgba(0, 0, 0, .3)', zIndex: -1 }} onClick={onClickCancel}></div>
       <div className="w-2/3 overflow-y-auto" style={{ maxHeight: '80%'}}>
         <div className="mt-2 flex flex-col">
           {
-            ArrAfterSplitByTable?.map((node, index) => {
+            arrAfterSplitByTable?.map((node, index) => {
               return node?.type === 'table'
-              ? <TableEditor content={node?.str} key={index} ref={dom => setTableEditorRef(index, dom)} />
-              : <div className="bg-gray-400 text-gray-300 my-3 rounded px-1 py-2" key={index} style={{whiteSpace: 'pre-line'}}>{node.str}</div>
+              ? (<TableEditor content={node?.str} key={index} ref={dom => setTableEditorRef(index, dom)} />)
+              : (<div className="bg-gray-400 text-gray-300 my-3 rounded px-1 py-2" key={index} style={{whiteSpace: 'pre-line'}}>{node.str}</div>)
             })
           }
         </div>
       </div>
+      <Button ghost className="rounded" onClick={onClickAdd}>Add New Table</Button>
       <div className="flex w-2/3 flex-row justify-end mt-4">
         <Button className="mr-1 rounded" onClick={onClickCancel}>Cancel</Button>
         <Button className="rounded" type="primary" onClick={onClickConfirm}>Confirm</Button>