leaflet.pub
a tool for shared writing and social publishing
small tweak to list styling
cozylittle.house
+21
-22
components/Blocks/Block.tsx
+21
-22
components/Blocks/Block.tsx
···
19
19
import { AreYouSure } from "./DeleteBlock";
20
20
import { useEntitySetContext } from "components/EntitySetProvider";
21
21
import { useIsMobile } from "src/hooks/isMobile";
22
+
import { DateTimeBlock } from "./DateTimeBlock";
22
23
23
24
export type Block = {
24
25
factID: string;
···
53
54
let mouseHandlers = useBlockMouseHandlers(props);
54
55
55
56
// focus block on longpress, shouldnt the type be based on the block type (?)
56
-
let { isLongPress, handlers: longPressHandlers } = useLongPress(() => {
57
+
let { isLongPress, handlers } = useLongPress(() => {
57
58
if (isLongPress.current) {
58
59
focusBlock(
59
60
{ type: props.type, value: props.entityID, parent: props.parent },
···
78
79
79
80
return (
80
81
<div
81
-
{...(!props.preview ? { ...mouseHandlers, ...longPressHandlers } : {})}
82
+
{...(!props.preview ? { ...mouseHandlers, ...handlers } : {})}
82
83
className={`
83
84
blockWrapper relative
84
85
flex flex-row gap-2
···
115
116
},
116
117
) => {
117
118
// BaseBlock renders the actual block content
119
+
let BlockTypeComponent = BlockTypeComponents[props.type];
118
120
return (
119
121
<div className="grow flex">
120
122
{props.listData && <ListMarker {...props} />}
···
127
129
entityID={props.entityID}
128
130
/>
129
131
) : (
130
-
<>
131
-
{props.type === "card" ? (
132
-
<PageLinkBlock {...props} preview={!props.preview} />
133
-
) : props.type === "text" ? (
134
-
<TextBlock {...props} className="" preview={props.preview} />
135
-
) : props.type === "heading" ? (
136
-
<HeadingBlock {...props} preview={props.preview} />
137
-
) : props.type === "image" ? (
138
-
<ImageBlock {...props} />
139
-
) : props.type === "link" ? (
140
-
<ExternalLinkBlock {...props} />
141
-
) : props.type === "embed" ? (
142
-
<EmbedBlock {...props} />
143
-
) : props.type === "mailbox" ? (
144
-
<div className="flex flex-col gap-4 w-full">
145
-
<MailboxBlock {...props} />
146
-
</div>
147
-
) : null}
148
-
</>
132
+
<BlockTypeComponent {...props} preview={props.preview} />
149
133
)}
150
134
</div>
151
135
);
136
+
};
137
+
138
+
const BlockTypeComponents: {
139
+
[K in Fact<"block/type">["data"]["value"]]: React.ComponentType<
140
+
BlockProps & { preview?: boolean }
141
+
>;
142
+
} = {
143
+
card: PageLinkBlock,
144
+
text: TextBlock,
145
+
heading: HeadingBlock,
146
+
image: ImageBlock,
147
+
link: ExternalLinkBlock,
148
+
embed: EmbedBlock,
149
+
mailbox: MailboxBlock,
150
+
datetime: DateTimeBlock,
152
151
};
153
152
154
153
export const BlockMultiselectIndicator = (props: BlockProps) => {
···
219
218
style={{
220
219
width:
221
220
depth &&
222
-
`calc(${depth} * ${`var(--list-marker-width) ${checklist ? " + 20px" : ""} - ${isMobile ? "6px" : "12px"})`} `,
221
+
`calc(${depth} * ${`var(--list-marker-width) ${checklist ? " + 20px" : ""} - 6px`} `,
223
222
}}
224
223
>
225
224
<button