a tool for shared writing and social publishing
fix selected block focus state
+26
-8
+10
-4
app/globals.css
+10
-4
app/globals.css
···
362
362
}
363
363
364
364
.selection-highlight {
365
-
background-color: Highlight;
365
+
background-color: transparent;
366
366
@apply py-[1.5px];
367
367
}
368
368
369
-
.ProseMirror:focus-within .selection-highlight {
369
+
.block-focused .selection-highlight {
370
+
background-color: Highlight;
371
+
}
372
+
373
+
.block-focused:focus-within .selection-highlight {
370
374
background-color: transparent;
371
375
}
372
376
···
392
396
white-space: normal;
393
397
}
394
398
395
-
.multiselected:focus-within .selection-highlight {
399
+
.multiselected .block-focused:focus-within .selection-highlight {
396
400
background-color: transparent;
397
401
}
398
402
···
604
608
max-height: calc(4.5em + 8px);
605
609
opacity: calc(var(--bg-page-alpha) * 0.7);
606
610
}
607
-
.footnote-side-item:not(:hover):not(:focus-within):not(.footnote-side-focused) .footnote-item > div:last-of-type {
611
+
.footnote-side-item:not(:hover):not(:focus-within):not(.footnote-side-focused)
612
+
.footnote-item
613
+
> div:last-of-type {
608
614
display: -webkit-box;
609
615
-webkit-line-clamp: 3;
610
616
-webkit-box-orient: vertical;
+16
-4
components/Blocks/TextBlock/index.tsx
+16
-4
components/Blocks/TextBlock/index.tsx
···
170
170
<div
171
171
style={{
172
172
wordBreak: "break-word",
173
-
...(props.type === "heading" ? { fontSize: headingFontSize[headingLevel?.data.value || 1] } : {}),
173
+
...(props.type === "heading"
174
+
? { fontSize: headingFontSize[headingLevel?.data.value || 1] }
175
+
: {}),
174
176
}}
175
177
onClick={(e) => {
176
178
let target = e.target as HTMLElement;
···
290
292
// forces break if a single text string (e.g. a url) spans more than a full line
291
293
style={{
292
294
wordBreak: "break-word",
293
-
fontFamily: props.type === "heading" ? "var(--theme-heading-font)" : "var(--theme-font)",
294
-
...(props.type === "heading" ? { fontSize: headingFontSize[headingLevel?.data.value || 1] } : {}),
295
+
fontFamily:
296
+
props.type === "heading"
297
+
? "var(--theme-heading-font)"
298
+
: "var(--theme-font)",
299
+
...(props.type === "heading"
300
+
? { fontSize: headingFontSize[headingLevel?.data.value || 1] }
301
+
: {}),
295
302
}}
296
303
className={`
297
304
${alignmentClass}
298
305
grow resize-none align-top whitespace-pre-wrap bg-transparent
299
306
outline-hidden
307
+
${focused ? "block-focused" : ""}
300
308
301
309
${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : textStyle}
302
310
${props.className}`}
···
316
324
props.nextBlock === null ? (
317
325
// if this is the only block on the page and is empty or is a canvas, show placeholder
318
326
<div
319
-
style={props.type === "heading" ? { fontSize: headingFontSize[headingLevel?.data.value || 1] } : undefined}
327
+
style={
328
+
props.type === "heading"
329
+
? { fontSize: headingFontSize[headingLevel?.data.value || 1] }
330
+
: undefined
331
+
}
320
332
className={`${props.className} ${alignmentClass} w-full pointer-events-none absolute top-0 left-0 italic text-tertiary flex flex-col
321
333
${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : textStyle}
322
334
`}