Skip to content

Commit 7d0404c

Browse files
sid597sid597
committed
restack and fix unnecessary changes
1 parent 128ac93 commit 7d0404c

15 files changed

Lines changed: 377 additions & 390 deletions

‎apps/roam/src/components/DiscourseNodeMenu.tsx‎

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,6 @@ import { getNewDiscourseNodeText } from "~/utils/formatUtils";
2727
import { OnloadArgs } from "roamjs-components/types";
2828
import { formatHexColor } from "./settings/DiscourseNodeCanvasSettings";
2929
import posthog from "posthog-js";
30-
import {
31-
getPersonalSetting,
32-
setPersonalSetting,
33-
} from "./settings/utils/accessors";
3430

3531
type Props = {
3632
textarea?: HTMLTextAreaElement;
@@ -400,9 +396,7 @@ const normalizeKeyCombo = (combo: string) => {
400396
});
401397
};
402398

403-
export const getModifiersFromCombo = (
404-
comboKey: IKeyCombo | { key: string; modifiers: number } | undefined,
405-
) => {
399+
export const getModifiersFromCombo = (comboKey: IKeyCombo) => {
406400
if (!comboKey) return [];
407401
return [
408402
comboKey.modifiers & MODIFIER_BIT_MASKS.alt && "alt",
@@ -412,26 +406,32 @@ export const getModifiersFromCombo = (
412406
].filter(Boolean);
413407
};
414408

415-
export const NodeMenuTriggerComponent = () => {
409+
export const NodeMenuTriggerComponent = ({
410+
extensionAPI,
411+
}: {
412+
extensionAPI: OnloadArgs["extensionAPI"];
413+
}) => {
416414
const inputRef = useRef<HTMLInputElement>(null);
417415
const [isActive, setIsActive] = useState(false);
418-
const [comboKey, setComboKey] = useState<IKeyCombo>(() => {
419-
const saved = getPersonalSetting<{ key: string; modifiers: number }>([
420-
"Personal Node Menu Trigger",
421-
]);
422-
return saved ?? { modifiers: 0, key: "" };
423-
});
416+
const [comboKey, setComboKey] = useState<IKeyCombo>(
417+
() =>
418+
(extensionAPI.settings.get(
419+
"personal-node-menu-trigger",
420+
) as IKeyCombo) || { modifiers: 0, key: "" },
421+
);
424422

425-
const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
426-
e.stopPropagation();
427-
e.preventDefault();
428-
const comboObj = getKeyCombo(e.nativeEvent);
429-
if (!comboObj.key) return;
423+
const handleKeyDown = useCallback(
424+
(e: React.KeyboardEvent) => {
425+
e.stopPropagation();
426+
e.preventDefault();
427+
const comboObj = getKeyCombo(e.nativeEvent);
428+
if (!comboObj.key) return;
430429

431-
const newCombo = { key: comboObj.key, modifiers: comboObj.modifiers };
432-
setComboKey(newCombo);
433-
setPersonalSetting(["Personal Node Menu Trigger"], newCombo);
434-
}, []);
430+
setComboKey({ key: comboObj.key, modifiers: comboObj.modifiers });
431+
extensionAPI.settings.set("personal-node-menu-trigger", comboObj);
432+
},
433+
[extensionAPI],
434+
);
435435

436436
const shortcut = useMemo(() => {
437437
if (!comboKey.key) return "";
@@ -454,9 +454,8 @@ export const NodeMenuTriggerComponent = () => {
454454
hidden={!comboKey.key}
455455
icon={"remove"}
456456
onClick={() => {
457-
const emptyCombo = { modifiers: 0, key: "" };
458-
setComboKey(emptyCombo);
459-
setPersonalSetting(["Personal Node Menu Trigger"], emptyCombo);
457+
setComboKey({ modifiers: 0, key: "" });
458+
extensionAPI.settings.set("personal-node-menu-trigger", "");
460459
}}
461460
minimal
462461
/>

‎apps/roam/src/components/DiscourseNodeSearchMenu.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -707,9 +707,14 @@ export const renderDiscourseNodeSearchMenu = (props: Props) => {
707707
);
708708
};
709709

710-
export const NodeSearchMenuTriggerSetting = () => {
711-
const [nodeSearchTrigger, setNodeSearchTriggerState] = useState<string>(
712-
() => getPersonalSetting<string>(["Node Search Menu Trigger"])!,
710+
export const NodeSearchMenuTriggerSetting = ({
711+
onloadArgs,
712+
}: {
713+
onloadArgs: OnloadArgs;
714+
}) => {
715+
const extensionAPI = onloadArgs.extensionAPI;
716+
const [nodeSearchTrigger, setNodeSearchTrigger] = useState<string>(
717+
getSetting("node-search-trigger", "@"),
713718
);
714719

715720
const handleNodeSearchTriggerChange = (
@@ -722,8 +727,8 @@ export const NodeSearchMenuTriggerSetting = () => {
722727
.replace(/\+/g, "\\+")
723728
.trim();
724729

725-
setNodeSearchTriggerState(trigger);
726-
setPersonalSetting(["Node Search Menu Trigger"], trigger);
730+
setNodeSearchTrigger(trigger);
731+
extensionAPI.settings.set("node-search-trigger", trigger);
727732
};
728733
return (
729734
<InputGroup

‎apps/roam/src/components/canvas/uiOverrides.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import {
3232
useValue,
3333
useToasts,
3434
} from "tldraw";
35+
import { IKeyCombo } from "@blueprintjs/core";
3536
import { DiscourseNode } from "~/utils/getDiscourseNodes";
3637
import type { OnloadArgs } from "roamjs-components/types";
3738
import { DiscourseContextType } from "./Tldraw";
@@ -41,7 +42,8 @@ import calcCanvasNodeSizeAndImg from "~/utils/calcCanvasNodeSizeAndImg";
4142
import { AddReferencedNodeType } from "./DiscourseRelationShape/DiscourseRelationTool";
4243
import { getRelationColor } from "./DiscourseRelationShape/DiscourseRelationUtil";
4344
import DiscourseGraphPanel from "./DiscourseToolPanel";
44-
import { getPersonalSetting } from "~/components/settings/utils/accessors";
45+
import { DISCOURSE_TOOL_SHORTCUT_KEY } from "~/data/userSettings";
46+
import { getSetting } from "~/utils/extensionSettings";
4547
import { CustomDefaultToolbar } from "./CustomDefaultToolbar";
4648
import { renderModifyNodeDialog } from "~/components/ModifyNodeDialog";
4749

@@ -269,9 +271,13 @@ export const createUiOverrides = ({
269271
}): TLUiOverrides => ({
270272
tools: (editor, tools) => {
271273
// Get the custom keyboard shortcut for the discourse tool
272-
const discourseToolShortcut =
273-
getPersonalSetting<string>(["Discourse Tool Shortcut"])?.toUpperCase() ||
274-
"";
274+
const discourseToolCombo = getSetting(DISCOURSE_TOOL_SHORTCUT_KEY, {
275+
key: "",
276+
modifiers: 0,
277+
}) as IKeyCombo;
278+
279+
// For discourse tool, just use the key directly since we don't allow modifiers
280+
const discourseToolShortcut = discourseToolCombo?.key?.toUpperCase() || "";
275281

276282
tools["discourse-tool"] = {
277283
id: "discourse-tool",

‎apps/roam/src/components/settings/DiscourseNodeCanvasSettings.tsx‎

Lines changed: 57 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,12 @@ import {
66
Tooltip,
77
Icon,
88
ControlGroup,
9-
Checkbox,
109
} from "@blueprintjs/core";
11-
import React, { useState } from "react";
12-
import {
13-
getDiscourseNodeSetting,
14-
setDiscourseNodeSetting,
15-
} from "./utils/accessors";
10+
import React, { useState, useMemo } from "react";
11+
import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
12+
import getSettingValueFromTree from "roamjs-components/util/getSettingValueFromTree";
13+
import setInputSetting from "roamjs-components/util/setInputSetting";
14+
import { DiscourseNodeFlagPanel } from "./components/BlockPropSettingPanels";
1615

1716
export const formatHexColor = (color: string) => {
1817
if (!color) return "";
@@ -26,31 +25,23 @@ export const formatHexColor = (color: string) => {
2625
return "";
2726
};
2827

29-
const DiscourseNodeCanvasSettings = ({ nodeType }: { nodeType: string }) => {
28+
const DiscourseNodeCanvasSettings = ({ nodeType, uid }: { nodeType: string; uid: string }) => {
29+
const tree = useMemo(() => getBasicTreeByParentUid(uid), [uid]);
3030
const [color, setColor] = useState<string>(() => {
31-
const storedColor = getDiscourseNodeSetting<string>(nodeType, [
32-
"canvasSettings",
33-
"color",
34-
])!;
35-
return formatHexColor(storedColor);
31+
const color = getSettingValueFromTree({ tree, key: "color" });
32+
return formatHexColor(color);
3633
});
3734
const [alias, setAlias] = useState<string>(() =>
38-
getDiscourseNodeSetting<string>(nodeType, ["canvasSettings", "alias"])!,
35+
getSettingValueFromTree({ tree, key: "alias" }),
3936
);
4037
const [queryBuilderAlias, setQueryBuilderAlias] = useState<string>(() =>
41-
getDiscourseNodeSetting<string>(nodeType, [
42-
"canvasSettings",
43-
"query-builder-alias",
44-
])!,
38+
getSettingValueFromTree({ tree, key: "query-builder-alias" }),
4539
);
46-
const [isKeyImage, setIsKeyImage] = useState(() =>
47-
getDiscourseNodeSetting<boolean>(nodeType, ["canvasSettings", "key-image"])!,
40+
const [isKeyImage, setIsKeyImage] = useState(
41+
() => getSettingValueFromTree({ tree, key: "key-image" }) === "true",
4842
);
4943
const [keyImageOption, setKeyImageOption] = useState(() =>
50-
getDiscourseNodeSetting<string>(nodeType, [
51-
"canvasSettings",
52-
"key-image-option",
53-
])!,
44+
getSettingValueFromTree({ tree, key: "key-image-option" }),
5445
);
5546

5647
return (
@@ -61,14 +52,14 @@ const DiscourseNodeCanvasSettings = ({ nodeType }: { nodeType: string }) => {
6152
<InputGroup
6253
style={{ width: 120 }}
6354
type={"color"}
64-
value={color || "#000000"}
55+
value={color}
6556
onChange={(e) => {
6657
setColor(e.target.value);
67-
setDiscourseNodeSetting(
68-
nodeType,
69-
["canvasSettings", "color"],
70-
e.target.value.replace("#", ""), // remove hash to not create roam link
71-
);
58+
setInputSetting({
59+
blockUid: uid,
60+
key: "color",
61+
value: e.target.value.replace("#", ""), // remove hash to not create roam link
62+
});
7263
}}
7364
/>
7465
<Tooltip content={color ? "Unset" : "Color not set"}>
@@ -77,11 +68,11 @@ const DiscourseNodeCanvasSettings = ({ nodeType }: { nodeType: string }) => {
7768
icon={color ? "delete" : "info-sign"}
7869
onClick={() => {
7970
setColor("");
80-
setDiscourseNodeSetting(
81-
nodeType,
82-
["canvasSettings", "color"],
83-
"",
84-
);
71+
setInputSetting({
72+
blockUid: uid,
73+
key: "color",
74+
value: "",
75+
});
8576
}}
8677
/>
8778
</Tooltip>
@@ -93,57 +84,42 @@ const DiscourseNodeCanvasSettings = ({ nodeType }: { nodeType: string }) => {
9384
value={alias}
9485
onChange={(e) => {
9586
setAlias(e.target.value);
96-
setDiscourseNodeSetting(
97-
nodeType,
98-
["canvasSettings", "alias"],
99-
e.target.value,
100-
);
87+
setInputSetting({
88+
blockUid: uid,
89+
key: "alias",
90+
value: e.target.value,
91+
});
10192
}}
10293
/>
10394
</Label>
104-
<Checkbox
105-
style={{ width: 240, lineHeight: "normal" }}
106-
checked={isKeyImage}
107-
onChange={(e) => {
108-
const target = e.target as HTMLInputElement;
109-
setIsKeyImage(target.checked);
110-
if (target.checked) {
111-
if (!keyImageOption) setKeyImageOption("first-image");
112-
setDiscourseNodeSetting(
113-
nodeType,
114-
["canvasSettings", "key-image"],
115-
true,
116-
);
117-
} else {
118-
setDiscourseNodeSetting(
119-
nodeType,
120-
["canvasSettings", "key-image"],
121-
false,
122-
);
123-
}
95+
<DiscourseNodeFlagPanel
96+
nodeType={nodeType}
97+
title="Key Image"
98+
description="Add an image to the discourse node"
99+
settingKeys={["canvasSettings", "key-image"]}
100+
defaultValue={false}
101+
onChange={(checked) => {
102+
setIsKeyImage(checked);
103+
if (checked && !keyImageOption) setKeyImageOption("first-image");
104+
setInputSetting({
105+
blockUid: uid,
106+
key: "key-image",
107+
value: checked ? "true" : "false",
108+
});
124109
}}
125-
>
126-
Key image
127-
<Tooltip content={"Add an image to the discourse node"}>
128-
<Icon
129-
icon={"info-sign"}
130-
iconSize={12}
131-
className={"ml-2 align-middle opacity-80"}
132-
/>
133-
</Tooltip>
134-
</Checkbox>
110+
/>
135111
<RadioGroup
136112
disabled={!isKeyImage}
137113
selectedValue={keyImageOption || "first-image"}
138114
label="Key image location"
139115
onChange={(e) => {
140-
const target = e.target as HTMLInputElement;
141-
setKeyImageOption(target.value);
142-
setDiscourseNodeSetting(
143-
nodeType,
144-
["canvasSettings", "key-image-option"],
145-
target.value,
146-
);
116+
const value = (e.target as HTMLInputElement).value;
117+
setKeyImageOption(value);
118+
setInputSetting({
119+
blockUid: uid,
120+
key: "key-image-option",
121+
value,
122+
});
147123
}}
148124
>
149125
<Radio label="First image on page" value="first-image" />
@@ -164,11 +140,11 @@ const DiscourseNodeCanvasSettings = ({ nodeType }: { nodeType: string }) => {
164140
value={queryBuilderAlias}
165141
onChange={(e) => {
166142
setQueryBuilderAlias(e.target.value);
167-
setDiscourseNodeSetting(
168-
nodeType,
169-
["canvasSettings", "query-builder-alias"],
170-
e.target.value,
171-
);
143+
setInputSetting({
144+
blockUid: uid,
145+
key: "query-builder-alias",
146+
value: e.target.value,
147+
});
172148
}}
173149
/>
174150
</div>

‎apps/roam/src/components/settings/DiscourseNodeSpecification.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ const NodeSpecification = ({
7777
} else {
7878
const tree = getBasicTreeByParentUid(parentUid);
7979
const scratchNode = getSubTree({ tree, key: "scratch" });
80-
Promise.all(scratchNode.children.map((c) => deleteBlock(c.uid))).catch(
80+
Promise.all(scratchNode.children.map((c: { uid: string }) => deleteBlock(c.uid))).catch(
8181
(error) => {
8282
internalError({ error });
8383
},

0 commit comments

Comments
 (0)