leaflet.pub
a tool for shared writing and social publishing
put block creation on enter in async function
awarm.space
+44
-40
+5
-5
components/Blocks/TextBlock/index.tsx
+5
-5
components/Blocks/TextBlock/index.tsx
···
189
189
let repRef = useRef<null | Replicache<ReplicacheMutators>>(null);
190
190
let headingLevel = useEntity(props.entityID, "block/heading-level");
191
191
let entity_set = useEntitySetContext();
192
-
let propsRef = useRef({ ...props, entity_set });
192
+
let alignment =
193
+
useEntity(props.entityID, "block/text-alignment")?.data.value || "left";
194
+
let propsRef = useRef({ ...props, entity_set, alignment });
193
195
useEffect(() => {
194
-
propsRef.current = { ...props, entity_set };
195
-
}, [props, entity_set]);
196
+
propsRef.current = { ...props, entity_set, alignment };
197
+
}, [props, entity_set, alignment]);
196
198
let rep = useReplicache();
197
199
useEffect(() => {
198
200
repRef.current = rep.rep;
···
202
204
(s) => !!s.selectedBlocks.find((b) => b.value === props.entityID),
203
205
);
204
206
let focused = useUIState((s) => s.focusedEntity?.entityID === props.entityID);
205
-
let alignment =
206
-
useEntity(props.entityID, "block/text-alignment")?.data.value || "left";
207
207
let alignmentClass = {
208
208
left: "text-left",
209
209
right: "text-right",
+39
-35
components/Blocks/TextBlock/keymap.ts
+39
-35
components/Blocks/TextBlock/keymap.ts
···
12
12
} from "prosemirror-state";
13
13
import { RefObject } from "react";
14
14
import { Replicache } from "replicache";
15
-
import type { ReplicacheMutators } from "src/replicache";
15
+
import type { Fact, ReplicacheMutators } from "src/replicache";
16
16
import { elementId } from "src/utils/elementId";
17
17
import { schema } from "./schema";
18
18
import { useUIState } from "src/useUIState";
···
25
25
import { isTextBlock } from "src/utils/isTextBlock";
26
26
import { UndoManager } from "src/undoManager";
27
27
28
-
type PropsRef = RefObject<BlockProps & { entity_set: { set: string } }>;
28
+
type PropsRef = RefObject<
29
+
BlockProps & {
30
+
entity_set: { set: string };
31
+
alignment: Fact<"block/text-alignment">["data"]["value"];
32
+
}
33
+
>;
29
34
export const TextBlockKeymap = (
30
35
propsRef: PropsRef,
31
36
repRef: RefObject<Replicache<ReplicacheMutators> | null>,
···
377
382
378
383
const enter =
379
384
(
380
-
propsRef: RefObject<BlockProps & { entity_set: { set: string } }>,
385
+
propsRef: PropsRef,
381
386
repRef: RefObject<Replicache<ReplicacheMutators> | null>,
382
387
) =>
383
388
(
···
393
398
394
399
let newEntityID = v7();
395
400
let position: string;
396
-
useUIState.getState().setSelectedBlock({
397
-
value: newEntityID,
398
-
parent: propsRef.current.parent,
399
-
});
400
401
let asyncRun = async () => {
401
402
let blockType =
402
403
propsRef.current.type === "heading" && state.selection.anchor <= 2
···
547
548
data: { type: "number", value: headingLevel.data.value || 0 },
548
549
});
549
550
}
550
-
let alignment = await repRef.current?.query((tx) =>
551
-
scanIndex(tx).eav(propsRef.current.entityID, "block/text-alignment"),
552
-
);
553
-
if (alignment?.[0] && alignment?.[0].data.value !== "left") {
551
+
if (propsRef.current.alignment !== "left") {
554
552
await repRef.current?.mutate.assertFact({
555
553
entity: newEntityID,
556
554
attribute: "block/text-alignment",
557
555
data: {
558
556
type: "text-alignment-type-union",
559
-
value: alignment?.[0].data.value,
557
+
value: propsRef.current.alignment,
560
558
},
561
559
});
562
560
}
563
561
};
564
-
asyncRun();
562
+
asyncRun().then(() => {
563
+
useUIState.getState().setSelectedBlock({
564
+
value: newEntityID,
565
+
parent: propsRef.current.parent,
566
+
});
567
+
568
+
setTimeout(() => {
569
+
let block = useEditorStates.getState().editorStates[newEntityID];
570
+
if (block) {
571
+
let tr = block.editor.tr;
572
+
if (newContent.content.size > 2) {
573
+
tr.replaceWith(0, tr.doc.content.size, newContent.content);
574
+
tr.setSelection(TextSelection.create(tr.doc, 0));
575
+
let newState = block.editor.apply(tr);
576
+
setEditorState(newEntityID, {
577
+
editor: newState,
578
+
});
579
+
}
580
+
focusBlock(
581
+
{
582
+
value: newEntityID,
583
+
parent: propsRef.current.parent,
584
+
type: "text",
585
+
},
586
+
{ type: "start" },
587
+
);
588
+
}
589
+
}, 10);
590
+
});
565
591
566
592
// if you are in the middle of a text block, split the block
567
-
setTimeout(() => {
568
-
let block = useEditorStates.getState().editorStates[newEntityID];
569
-
if (block) {
570
-
let tr = block.editor.tr;
571
-
if (newContent.content.size > 2) {
572
-
tr.replaceWith(0, tr.doc.content.size, newContent.content);
573
-
tr.setSelection(TextSelection.create(tr.doc, 0));
574
-
let newState = block.editor.apply(tr);
575
-
setEditorState(newEntityID, {
576
-
editor: newState,
577
-
});
578
-
}
579
-
focusBlock(
580
-
{
581
-
value: newEntityID,
582
-
parent: propsRef.current.parent,
583
-
type: "text",
584
-
},
585
-
{ type: "start" },
586
-
);
587
-
}
588
-
}, 10);
589
593
return true;
590
594
};
591
595