a tool for shared writing and social publishing
added text align to image datetime and button blocks (#123)
* added text align to image datetime and button blocks
* used an object instead of a ternary to select alignment style
+39
-5
+17
-1
components/Blocks/Block.tsx
+17
-1
components/Blocks/Block.tsx
···
124
124
) => {
125
125
// BaseBlock renders the actual block content, delete states, controls spacing between block and list markers
126
126
let BlockTypeComponent = BlockTypeComponents[props.type];
127
+
let alignment = useEntity(props.value, "block/text-alignment")?.data.value;
128
+
129
+
let alignmentStyle =
130
+
props.type === "button" || props.type === "image"
131
+
? "justify-center"
132
+
: "justify-start";
133
+
134
+
if (alignment)
135
+
alignmentStyle = {
136
+
left: "justify-start",
137
+
right: "justify-end",
138
+
center: "justify-center",
139
+
}[alignment];
140
+
127
141
if (!BlockTypeComponent) return <div>unknown block</div>;
128
142
return (
129
-
<div className="blockContentWrapper w-full grow flex gap-2 z-[1]">
143
+
<div
144
+
className={`blockContentWrapper w-full grow flex gap-2 z-[1] ${alignmentStyle}`}
145
+
>
130
146
{props.listData && <ListMarker {...props} />}
131
147
{props.areYouSure ? (
132
148
<AreYouSure
+1
-1
components/Blocks/ButtonBlock.tsx
+1
-1
components/Blocks/ButtonBlock.tsx
···
37
37
<form
38
38
action={url?.data.value}
39
39
target="_blank"
40
-
className={`mx-auto hover:outline-accent-contrast !rounded-md ${isSelected ? "block-border-selected !border-0" : "block-border !border-transparent !border-0"}`}
40
+
className={`hover:outline-accent-contrast !rounded-md ${isSelected ? "block-border-selected !border-0" : "block-border !border-transparent !border-0"}`}
41
41
>
42
42
<ButtonPrimary type="submit">{text?.data.value}</ButtonPrimary>
43
43
</form>
+1
-1
components/Blocks/ImageBlock.tsx
+1
-1
components/Blocks/ImageBlock.tsx
···
97
97
: "block-border !border-transparent";
98
98
let isLocalUpload = localImages.get(image.data.src);
99
99
return (
100
-
<div className="relative group/image flex w-full justify-center">
100
+
<div className="relative group/image">
101
101
{isLocalUpload || image.data.local ? (
102
102
<img
103
103
loading="lazy"
+14
-1
components/Toolbar/BlockToolbar.tsx
+14
-1
components/Toolbar/BlockToolbar.tsx
···
6
6
import { getBlocksWithType } from "src/hooks/queries/useBlocks";
7
7
import { useUIState } from "src/useUIState";
8
8
import { LockBlockButton } from "./LockBlockButton";
9
+
import { TextAlignmentButton } from "./TextAlignmentToolbar";
9
10
10
11
export const BlockToolbar = (props: {
11
-
setToolbarState: (state: "areYouSure" | "block") => void;
12
+
setToolbarState: (state: "areYouSure" | "block" | "text-alignment") => void;
12
13
}) => {
13
14
let focusedEntity = useUIState((s) => s.focusedEntity);
14
15
let focusedEntityType = useEntity(
···
17
18
: focusedEntity?.parent || null,
18
19
"page/type",
19
20
);
21
+
let blockType = useEntity(
22
+
focusedEntity?.entityType === "block" ? focusedEntity?.entityID : null,
23
+
"block/type",
24
+
)?.data.value;
20
25
21
26
return (
22
27
<div className="flex items-center gap-2 justify-between w-full">
···
34
39
<>
35
40
<MoveBlockButtons />
36
41
<Separator classname="h-6" />
42
+
{(blockType === "image" ||
43
+
blockType === "button" ||
44
+
blockType === "datetime") && (
45
+
<>
46
+
<TextAlignmentButton setToolbarState={props.setToolbarState} />
47
+
<Separator classname="h-6" />
48
+
</>
49
+
)}
37
50
</>
38
51
) : null}
39
52
+6
-1
components/Toolbar/index.tsx
+6
-1
components/Toolbar/index.tsx
···
160
160
selectedBlocks: [],
161
161
}));
162
162
} else {
163
-
setToolbarState("default");
163
+
if (blockType !== "heading" && blockType !== "text") {
164
+
setToolbarState("block");
165
+
} else {
166
+
setToolbarState("default");
167
+
}
168
+
164
169
focusedEntity && keepFocus(focusedEntity.entityID);
165
170
}
166
171
}}