leaflet.pub
a tool for shared writing and social publishing
added large text
cozylittle.house
+44
-7
+1
-1
app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+1
-1
app/lish/[did]/[publication]/[rkey]/PostContent.tsx
···
346
346
case PubLeafletBlocksText.isMain(b.block):
347
347
return (
348
348
<p
349
-
className={`textBlock ${className} ${b.block.textSize === "small" ? "text-sm text-secondary" : ""}`}
349
+
className={`textBlock ${className} ${b.block.textSize === "small" ? "text-sm text-secondary" : b.block.textSize === "large" ? "text-lg" : ""}`}
350
350
{...blockProps}
351
351
>
352
352
<TextBlock
+9
-2
components/Blocks/TextBlock/index.tsx
+9
-2
components/Blocks/TextBlock/index.tsx
···
129
129
center: "text-center",
130
130
justify: "text-justify",
131
131
}[alignment];
132
-
let textStyle = textSize?.data.value === "small" ? "text-sm" : "";
132
+
let textStyle =
133
+
textSize?.data.value === "small"
134
+
? "text-sm"
135
+
: textSize?.data.value === "large"
136
+
? "text-lg"
137
+
: "";
133
138
let { permissions } = useEntitySetContext();
134
139
135
140
let content = <br />;
···
190
195
let textStyle =
191
196
textSize?.data.value === "small"
192
197
? "text-sm text-secondary"
193
-
: "text-base text-primary";
198
+
: textSize?.data.value === "large"
199
+
? "text-lg text-primary"
200
+
: "text-base text-primary";
194
201
195
202
let editorState = useEditorStates(
196
203
(s) => s.editorStates[props.entityID],
+32
-2
components/Toolbar/TextBlockTypeToolbar.tsx
+32
-2
components/Toolbar/TextBlockTypeToolbar.tsx
···
145
145
}
146
146
}}
147
147
active={
148
-
blockType?.data.value === "text" && textSize?.data.value !== "small"
148
+
blockType?.data.value === "text" &&
149
+
textSize?.data.value !== "small" &&
150
+
textSize?.data.value !== "large"
149
151
}
150
152
tooltipContent={<div>Normal Text</div>}
151
153
>
152
154
Text
153
155
</ToolbarButton>
154
156
<ToolbarButton
157
+
className={`px-[6px] text-lg ${props.className}`}
158
+
onClick={async () => {
159
+
if (!focusedBlock || !blockType) return;
160
+
if (blockType.data.value !== "text") {
161
+
// Convert to text block first if it's a heading
162
+
if (headingLevel)
163
+
await rep?.mutate.retractFact({ factID: headingLevel.id });
164
+
await rep?.mutate.assertFact({
165
+
entity: focusedBlock.entityID,
166
+
attribute: "block/type",
167
+
data: { type: "block-type-union", value: "text" },
168
+
});
169
+
}
170
+
// Set text size to large
171
+
await rep?.mutate.assertFact({
172
+
entity: focusedBlock.entityID,
173
+
attribute: "block/text-size",
174
+
data: { type: "text-size-union", value: "large" },
175
+
});
176
+
}}
177
+
active={
178
+
blockType?.data.value === "text" && textSize?.data.value === "large"
179
+
}
180
+
tooltipContent={<div>Large Text</div>}
181
+
>
182
+
<div className="leading-[1.625rem]">Large</div>
183
+
</ToolbarButton>
184
+
<ToolbarButton
155
185
className={`px-[6px] text-sm text-secondary ${props.className}`}
156
186
onClick={async () => {
157
187
if (!focusedBlock || !blockType) return;
···
177
207
}
178
208
tooltipContent={<div>Small Text</div>}
179
209
>
180
-
Small
210
+
<div className="leading-[1.625rem]">Small</div>
181
211
</ToolbarButton>
182
212
</>
183
213
);
+1
-1
lexicons/src/blocks.ts
+1
-1
lexicons/src/blocks.ts
···
10
10
required: ["plaintext"],
11
11
properties: {
12
12
plaintext: { type: "string" },
13
-
textSize: { type: "string", enum: ["default", "small"] },
13
+
textSize: { type: "string", enum: ["default", "small", "large"] },
14
14
facets: {
15
15
type: "array",
16
16
items: { type: "ref", ref: PubLeafletRichTextFacet.id },
+1
-1
src/replicache/attributes.ts
+1
-1
src/replicache/attributes.ts