a tool for shared writing and social publishing
add text align justified
Jared Pereira
(Sep 14, 2025, 8:32 PM +0900)
aec79ce9
8fe1dd33
+48
-5
+1
components/Blocks/Block.tsx
+1
components/Blocks/Block.tsx
+31
-2
components/Toolbar/TextAlignmentToolbar.tsx
+31
-2
components/Toolbar/TextAlignmentToolbar.tsx
···
1
1
import { useUIState } from "src/useUIState";
2
2
import { ToolbarButton } from ".";
3
3
import { useCallback } from "react";
4
-
import { useEntity, useReplicache } from "src/replicache";
4
+
import { Fact, useEntity, useReplicache } from "src/replicache";
5
5
import { Props } from "components/Icons/Props";
6
6
7
7
export function TextAlignmentToolbar() {
8
8
let focusedBlock = useUIState((s) => s.focusedEntity);
9
9
let { rep } = useReplicache();
10
10
let setAlignment = useCallback(
11
-
(alignment: "right" | "center" | "left") => {
11
+
(alignment: Fact<"block/text-alignment">["data"]["value"]) => {
12
12
let blocks = useUIState.getState().selectedBlocks;
13
13
if (focusedBlock?.entityType === "page" || !focusedBlock) return null;
14
14
rep?.mutate.assertFact(
···
41
41
>
42
42
<AlignRightSmall />
43
43
</ToolbarButton>
44
+
45
+
<ToolbarButton
46
+
onClick={() => setAlignment("justify")}
47
+
tooltipContent="Align Justified"
48
+
>
49
+
<AlignJustifiedSmall />
50
+
</ToolbarButton>
44
51
</>
45
52
);
46
53
}
···
66
73
<AlignLeftSmall />
67
74
) : alignment === "center" ? (
68
75
<AlignCenterSmall />
76
+
) : alignment === "justify" ? (
77
+
<AlignJustifiedSmall />
69
78
) : (
70
79
<AlignRightSmall />
71
80
)}
···
125
134
fillRule="evenodd"
126
135
clipRule="evenodd"
127
136
d="M3.5 6.19983C3.5 5.64754 3.94772 5.19983 4.5 5.19983H19.6547C20.2069 5.19983 20.6547 5.64754 20.6547 6.19983C20.6547 6.75211 20.2069 7.19983 19.6547 7.19983H4.5C3.94772 7.19983 3.5 6.75211 3.5 6.19983ZM10.3304 12C10.3304 11.4477 10.7781 11 11.3304 11H19.6547C20.2069 11 20.6547 11.4477 20.6547 12C20.6547 12.5523 20.2069 13 19.6547 13H11.3304C10.7781 13 10.3304 12.5523 10.3304 12ZM8.01202 16.7999C7.45974 16.7999 7.01202 17.2476 7.01202 17.7999C7.01202 18.3522 7.45974 18.7999 8.01202 18.7999H19.6547C20.2069 18.7999 20.6547 18.3522 20.6547 17.7999C20.6547 17.2476 20.2069 16.7999 19.6547 16.7999H8.01202Z"
137
+
fill="currentColor"
138
+
/>
139
+
</svg>
140
+
);
141
+
};
142
+
143
+
export const AlignJustifiedSmall = (props: Props) => {
144
+
return (
145
+
<svg
146
+
width="24"
147
+
height="24"
148
+
viewBox="0 0 24 24"
149
+
fill="none"
150
+
xmlns="http://www.w3.org/2000/svg"
151
+
{...props}
152
+
>
153
+
<path
154
+
fillRule="evenodd"
155
+
clipRule="evenodd"
156
+
d="M3.5 6.19983C3.5 5.64754 3.94772 5.19983 4.5 5.19983H19.6547C20.2069 5.19983 20.6547 5.64754 20.6547 6.19983C20.6547 6.75211 20.2069 7.19983 19.6547 7.19983H4.5C3.94772 7.19983 3.5 6.75211 3.5 6.19983ZM3.5 12C3.5 11.4477 3.94772 11 4.5 11H19.6547C20.2069 11 20.6547 11.4477 20.6547 12C20.6547 12.5523 20.2069 13 19.6547 13H4.5C3.94772 13 3.5 12.5523 3.5 12ZM4.5 16.7999C3.94772 16.7999 3.5 17.2476 3.5 17.7999C3.5 18.3522 3.94772 18.7999 4.5 18.7999H19.6547C20.2069 18.7999 20.6547 18.3522 20.6547 17.7999C20.6547 17.2476 20.2069 16.7999 19.6547 16.7999H4.5Z"
128
157
fill="currentColor"
129
158
/>
130
159
</svg>
+1
lexicons/api/lexicons.ts
+1
lexicons/api/lexicons.ts
+5
-1
src/replicache/attributes.ts
+5
-1
src/replicache/attributes.ts
···
183
183
} as const;
184
184
185
185
export const ThemeAttributes = {
186
+
"theme/font": {
187
+
type: "string",
188
+
cardinality: "one",
189
+
},
186
190
"theme/page-leaflet-watermark": {
187
191
type: "boolean",
188
192
cardinality: "one",
···
312
316
reference: { type: "reference"; value: string };
313
317
"text-alignment-type-union": {
314
318
type: "text-alignment-type-union";
315
-
value: "right" | "left" | "center";
319
+
value: "right" | "left" | "center" | "justify";
316
320
};
317
321
"page-type-union": { type: "page-type-union"; value: "doc" | "canvas" };
318
322
"block-type-union": {
+2
components/Blocks/TextBlock/index.tsx
+2
components/Blocks/TextBlock/index.tsx
···
133
133
left: "text-left",
134
134
right: "text-right",
135
135
center: "text-center",
136
+
justify: "text-justify",
136
137
}[alignment];
137
138
let { permissions } = useEntitySetContext();
138
139
···
198
199
left: "text-left",
199
200
right: "text-right",
200
201
center: "text-center",
202
+
justify: "text-justify",
201
203
}[alignment];
202
204
203
205
let value = useYJSValue(props.entityID);
+1
lexicons/src/pages/LinearDocument.ts
+1
lexicons/src/pages/LinearDocument.ts
+2
-1
lexicons/pub/leaflet/pages/linearDocument.json
+2
-1
lexicons/pub/leaflet/pages/linearDocument.json
+4
-1
app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+4
-1
app/lish/[did]/[publication]/[rkey]/PostContent.tsx
···
97
97
? "text-right justify-end"
98
98
: b.alignment === "lex:pub.leaflet.pages.linearDocument#textAlignCenter"
99
99
? "text-center justify-center"
100
-
: "";
100
+
: b.alignment ===
101
+
"lex:pub.leaflet.pages.linearDocument#textAlignJustify"
102
+
? "text-justify justify-start"
103
+
: "";
101
104
if (!alignment && PubLeafletBlocksImage.isMain(b.block))
102
105
alignment = "text-center justify-center";
103
106
+1
lexicons/api/types/pub/leaflet/pages/linearDocument.ts
+1
lexicons/api/types/pub/leaflet/pages/linearDocument.ts