leaflet.pub
a tool for shared writing and social publishing
small block bugs
cozylittle.house
+13
-29
+1
-1
components/Blocks/ButtonBlock.tsx
+1
-1
components/Blocks/ButtonBlock.tsx
···
24
24
let isSelected = useUIState((s) =>
25
25
s.selectedBlocks.find((b) => b.value === props.entityID),
26
26
);
27
+
let alignment = useEntity(props.entityID, "block/text-alignment")?.data.value;
27
28
28
29
if (!url) {
29
30
if (!permissions.write) return null;
30
31
return <ButtonBlockSettings {...props} />;
31
32
}
32
-
let alignment = useEntity(props.entityID, "block/text-alignment")?.data.value;
33
33
34
34
return (
35
35
<BlockLayout
+9
-27
components/Blocks/CodeBlock.tsx
+9
-27
components/Blocks/CodeBlock.tsx
···
14
14
import { flushSync } from "react-dom";
15
15
import { elementId } from "src/utils/elementId";
16
16
import { LAST_USED_CODE_LANGUAGE_KEY } from "src/utils/codeLanguageStorage";
17
+
import { focusBlock } from "src/utils/focusBlock";
17
18
18
19
export function CodeBlock(props: BlockProps) {
19
20
let { rep, rootEntity } = useReplicache();
···
42
43
}, [content, lang, theme]);
43
44
44
45
const onClick = useCallback((e: React.MouseEvent<HTMLElement>) => {
45
-
let selection = window.getSelection();
46
-
if (!selection || selection.rangeCount === 0) return;
47
-
let range = selection.getRangeAt(0);
48
-
if (!range) return;
49
-
let length = range.toString().length;
50
-
range.setStart(e.currentTarget, 0);
51
-
let end = range.toString().length;
52
-
let start = end - length;
53
-
54
-
flushSync(() => {
55
-
useUIState.getState().setSelectedBlock(props);
56
-
useUIState.getState().setFocusedBlock({
57
-
entityType: "block",
58
-
entityID: props.value,
59
-
parent: props.parent,
60
-
});
61
-
});
62
-
let el = document.getElementById(
63
-
elementId.block(props.entityID).input,
64
-
) as HTMLTextAreaElement;
65
-
if (!el) return;
66
-
el.focus();
67
-
el.setSelectionRange(start, end);
46
+
focusBlock(
47
+
{ parent: props.parent, value: props.value, type: "code" },
48
+
{ type: "end" },
49
+
);
68
50
}, []);
69
51
return (
70
52
<div className="codeBlock w-full flex flex-col rounded-md gap-0.5 ">
···
120
102
)}
121
103
</BlockLayout>
122
104
{permissions.write && (
123
-
<div className="text-sm text-tertiary flex justify-between">
124
-
<div className="flex gap-1">
105
+
<div className="text-sm text-tertiary flex w-full justify-between">
106
+
<div className="codeBlockTheme grow flex gap-1">
125
107
Theme:{" "}
126
108
<select
127
-
className="codeBlockLang text-left bg-transparent pr-1 sm:max-w-none max-w-24"
109
+
className="codeBlockThemeSelect text-left bg-transparent pr-1 sm:max-w-none max-w-24 w-full"
128
110
onClick={(e) => {
129
111
e.preventDefault();
130
112
e.stopPropagation();
···
146
128
</select>
147
129
</div>
148
130
<select
149
-
className="codeBlockLang text-right bg-transparent pr-1 sm:max-w-none max-w-24"
131
+
className="codeBlockLang grow text-right bg-transparent pr-1 sm:max-w-none max-w-24 w-full"
150
132
onClick={(e) => {
151
133
e.preventDefault();
152
134
e.stopPropagation();
+3
-1
src/utils/focusBlock.ts
+3
-1
src/utils/focusBlock.ts
···
48
48
}
49
49
50
50
if (pos?.offset !== undefined) {
51
-
el?.focus();
51
+
// trying to focus the block in a subpage causes the page to flash and scroll back to the parent page.
52
+
// idk how to fix so i'm giving up -- celine
53
+
// el?.focus();
52
54
requestAnimationFrame(() => {
53
55
el?.setSelectionRange(pos.offset, pos.offset);
54
56
});