leaflet.pub
a tool for shared writing and social publishing
make alignment work for multiselect
awarm.space
+17
-8
+5
-2
components/Toolbar/MultiSelectToolbar.tsx
+5
-2
components/Toolbar/MultiSelectToolbar.tsx
···
7
7
import { Replicache } from "replicache";
8
8
import { LockBlockButton } from "./LockBlockButton";
9
9
import { Props } from "components/Icons/Props";
10
+
import { TextAlignmentButton } from "./TextAlignmentToolbar";
10
11
11
12
export const MultiselectToolbar = (props: {
12
-
setToolbarState: (state: "areYouSure" | "multiselect") => void;
13
+
setToolbarState: (
14
+
state: "areYouSure" | "multiselect" | "text-alignment",
15
+
) => void;
13
16
}) => {
14
17
const { rep } = useReplicache();
15
18
const smoker = useSmoker();
···
42
45
>
43
46
<CopySmall />
44
47
</ToolbarButton>
48
+
<TextAlignmentButton setToolbarState={props.setToolbarState} />
45
49
<LockBlockButton />
46
-
{/* Add more multi-select toolbar buttons here */}
47
50
</div>
48
51
</div>
49
52
);
+8
-5
components/Toolbar/TextAlignmentToolbar.tsx
+8
-5
components/Toolbar/TextAlignmentToolbar.tsx
···
9
9
let { rep } = useReplicache();
10
10
let setAlignment = useCallback(
11
11
(alignment: "right" | "center" | "left") => {
12
+
let blocks = useUIState.getState().selectedBlocks;
12
13
if (focusedBlock?.entityType === "page" || !focusedBlock) return null;
13
-
rep?.mutate.assertFact({
14
-
entity: focusedBlock?.entityID,
15
-
attribute: "block/text-alignment",
16
-
data: { type: "text-alignment-type-union", value: alignment },
17
-
});
14
+
rep?.mutate.assertFact(
15
+
blocks.map((b) => ({
16
+
entity: b.value,
17
+
attribute: "block/text-alignment",
18
+
data: { type: "text-alignment-type-union", value: alignment },
19
+
})),
20
+
);
18
21
},
19
22
[focusedBlock, rep],
20
23
);
+4
-1
components/Toolbar/index.tsx
+4
-1
components/Toolbar/index.tsx
···
73
73
}, [blockType]);
74
74
75
75
useEffect(() => {
76
-
if (selectedBlocks.length > 1 && toolbarState !== "areYouSure") {
76
+
if (
77
+
selectedBlocks.length > 1 &&
78
+
!["areYousure", "text-alignment"].includes(toolbarState)
79
+
) {
77
80
setToolbarState("multiselect");
78
81
} else if (toolbarState === "multiselect") {
79
82
setToolbarState("default");