a tool for shared writing and social publishing
added enter and esc key handling for link toolbar, rmed some notes on TODO that have BEENDONE
+20
-24
-15
components/CardBlock.tsx
-15
components/CardBlock.tsx
···
34
34
}}
35
35
>
36
36
<div className="pt-2 pb-2 px-2 grow min-w-0">
37
-
{/* TODO:
38
-
if the document is completely empty (no blocks, no text) show placeholder text
39
-
the placeholder should be classname= "text-tertiary italic font-bold" */}
40
-
41
-
{/* TODO:
42
-
header blocks should (regardless of what kind of header) render as "text-primary font-bold"*/}
43
-
44
-
{/* TODO:
45
-
this block can fit a total of 4 lines of text.
46
-
the first block should take up to 4 lines of space.
47
-
If it doesn't need all 4 lines, the next text block
48
-
should be rendered and so on until all 4 lines are filled */}
49
-
50
-
{/* TODO:
51
-
the cardBlockPreview image should be screenshot of the page it links to */}
52
37
{docMetadata.heading && (
53
38
<div
54
39
className={`cardBlockTitle bg-transparent -mb-0.5 border-none text-base font-bold outline-none resize-none align-top border h-[24px] line-clamp-1`}
+20
-9
components/Toolbar/LinkButton.tsx
+20
-9
components/Toolbar/LinkButton.tsx
···
79
79
placeholder="www.leaflet.pub"
80
80
value={linkValue}
81
81
onChange={(e) => setLinkValue(e.target.value)}
82
+
onKeyDown={(e) => {
83
+
if (e.key === "Enter") {
84
+
e.preventDefault();
85
+
let editor = focusedEditor?.editor;
86
+
if (!editor || !start || !end || !focusedBlock) return;
87
+
let tr = editor.tr;
88
+
tr.addMark(
89
+
start,
90
+
end,
91
+
schema.marks.link.create({ href: linkValue }),
92
+
);
93
+
setEditorState(focusedBlock?.entityID, {
94
+
editor: editor.apply(tr),
95
+
});
96
+
props.onClose();
97
+
}
98
+
if (e.key === "Escape") {
99
+
props.onClose();
100
+
}
101
+
}}
82
102
/>
83
103
<div className="flex items-center gap-3">
84
104
<button
···
101
121
>
102
122
<CheckTiny />
103
123
</button>
104
-
{/* <button
105
-
className="hover:text-accent"
106
-
onMouseDown={(e) => {
107
-
props.onClose();
108
-
e.preventDefault();
109
-
}}
110
-
>
111
-
<CloseTiny />
112
-
</button> */}
113
124
</div>
114
125
</div>
115
126
);