制作一个表格生成器#

1
 logseq.Editor.registerSlashCommand(
2
      'create table', async () => {
3
        logseq.showMainUI()
4
      },
5
  )

1
import React, {useEffect} from "react";
2
import "./table.css"
3

4
const createTable = (row:number, col:number)=>{ // 生成markdown表格的内容
5
    let content = "|"
6
    let rowContent = "|"
7

8
    for(let i = 0; i < col; i++){
9
        content += ` Col ${i} |`
10
    }
11
    content += "\n"
12
    content += "|"
13

14
    for(let i = 0; i < col; i++){
15
        content += " --- |"
16
    }
17
    content += "\n"
18

19
    for(let j = 0; j < col; j++){
20
        rowContent += "   |"
21
    }
22
    rowContent += "\n"
23

24
    for(let i = 0; i < row; i++){
25
        content +=
26
            rowContent
27
    }
28
    return content
29
}
30

31
const insertContent = async (content:string) =>{ // 把内容插入到logseq
32
    window.logseq.hideMainUI({ restoreEditingCursor: true });
33
    await window.logseq.Editor.insertAtEditingCursor(content);
34
    //
35
}
36

37
// eslint-disable-next-line react/display-name,no-empty-pattern
38
export const Table = React.forwardRef<HTMLDivElement>(({}, ref) => {
39
    const [row, setRow] = React.useState("3");
40
    const [col, setCol] = React.useState("4");
41

42
    return(
43
        <div
44
            ref={ref}
45
            className="table-root"
46
            >
47
            <div className="center">
48
                <div>
49
                    Rows: <input value={row} onChange={(e)=>setRow(e.target.value)}/>
50
                </div>
51
                <div>
52
                    Cols: <input value={col} onChange={(e)=>setCol(e.target.value)} />
53
                </div>
54
                <div>
55
                    <button onClick={()=>{insertContent(createTable(Number(row),Number(col)))}}>Insert</button>
56
                </div>
57
            </div>
58
        </div>
59
    );
60
});

1
.table-root {
2
    position: absolute;
3
    background-color: #e5e7eb;
4
    display: flex;
5
    width: 250px;
6
    height: 150px;
7
}
8

9
.center{
10
    display: flex;
11
    flex-direction: column;
12
    margin: auto;
13
}

1
import React, { useRef } from "react";
2
import { useAppVisible } from "./utils";
3
import { Table } from "./table";
4

5
function App() {
6
  const innerRef = useRef<HTMLDivElement>(null);
7
  const visible = useAppVisible();
8

9
  if (visible) {
10
    return (
11
      <main
12
        className="absolute inset-0"
13
        onClick={(e) => {
14
          if (!innerRef.current?.contains(e.target as any)) {
15
            window.logseq.hideMainUI();
16
          }
17
        }}
18
      >
19
        <Table ref={innerRef}  />
20
      </main>
21
    );
22
  }
23
  return null;
24
}
25

26
export default App;

1
export const Table = React.forwardRef<HTMLDivElement>(({}, ref) => {
2

3
    const [row, setRow] = React.useState("3");
4
    const [col, setCol] = React.useState("4");
5
    const [left, setLeft] = React.useState(0);
6
    const [top, setTop] = React.useState(0);
7
    const [rect, setReact] = React.useState({top:0,left:0});
8

9
    useEffect( ()=>{
10
        // 获取当前光标的位置
11
        window.logseq.Editor.getEditingCursorPosition().then((res)=>{
12
            // @ts-ignore
13
            const {left, top, rect} = res;
14
            setLeft(left);
15
            setTop(top);
16
            setReact(rect);
17
        });
18
    },[])
19

20
    return(
21
        <div
22
            ref={ref}
23
            className="table-root"
24
              // 动态修改css，让位置与光标位置一致
25
             style={{ top: top + rect.top + 'px',
26
                 left: left + rect.left + 'px', }}
27
            >
28
            <div className="center">
29
                <div>
30
                    Rows: <input value={row} onChange={(e)=>setRow(e.target.value)}/>
31
                </div>
32
                <div>
33
                    Cols: <input value={col} onChange={(e)=>setCol(e.target.value)} />
34
                </div>
35
                <div>
36
                    <button onClick={()=>{insertContent(createTable(Number(row),Number(col)))}}>Insert</button>
37
                </div>
38
            </div>
39
        </div>
40
    );
41
});

1
            <div className="center">
2
                <div className="row">
3
                    Rows: <input value={row} onChange={(e)=>setRow(e.target.value)}/>
4
                </div>
5
                <div className="col">
6
                    Cols: <input value={col} onChange={(e)=>setCol(e.target.value)} />
7
                </div>
8
                <div>
9
                    <button className="button" onClick={()=>{insertContent(createTable(Number(row),Number(col)))}}>Insert</button>
10
                </div>
11
            </div>

1
.table-root {
2
    position: absolute;
3
    background-color: #e5e7eb;
4
    display: flex;
5
    width: 250px;
6
    height: 150px;
7
    border-radius: 5px;
8

9
}
10

11
.center{
12
    display: flex;
13
    flex-direction: column;
14
    margin: auto;
15
}
16

17
.button{
18
    display: flex;
19
    margin: auto;
20
    border-radius: 5%;
21
    background-color: white;
22
    padding: 2px;
23
}
24
.row{
25
    padding: 2px;
26
    margin: auto;
27
}
28
.col{
29
    padding: 3px;
30
    margin: auto;
31
}