diff --git a/apps/roam/src/components/settings/ExportSettings.tsx b/apps/roam/src/components/settings/ExportSettings.tsx index b3761c2a2..754e7f088 100644 --- a/apps/roam/src/components/settings/ExportSettings.tsx +++ b/apps/roam/src/components/settings/ExportSettings.tsx @@ -1,80 +1,87 @@ import React from "react"; import { getFormattedConfigTree } from "~/utils/discourseConfigRef"; -import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel"; -import NumberPanel from "roamjs-components/components/ConfigPanels/NumberPanel"; -import MultiTextPanel from "roamjs-components/components/ConfigPanels/MultiTextPanel"; -import SelectPanel from "roamjs-components/components/ConfigPanels/SelectPanel"; +import { + GlobalFlagPanel, + GlobalNumberPanel, + GlobalMultiTextPanel, + GlobalSelectPanel, +} from "./components/BlockPropSettingPanels"; -const DiscourseGraphExport = ({}: {}) => { +const DiscourseGraphExport = () => { const settings = getFormattedConfigTree(); const exportSettings = settings.export; const parentUid = settings.export.exportUid; return (
- - - -
-
- -
); diff --git a/apps/roam/src/components/settings/GeneralSettings.tsx b/apps/roam/src/components/settings/GeneralSettings.tsx index 3270ef616..05ae157d4 100644 --- a/apps/roam/src/components/settings/GeneralSettings.tsx +++ b/apps/roam/src/components/settings/GeneralSettings.tsx @@ -1,10 +1,12 @@ import React, { useMemo, useState } from "react"; -import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel"; -import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel"; import { getFormattedConfigTree } from "~/utils/discourseConfigRef"; import refreshConfigTree from "~/utils/refreshConfigTree"; import { DEFAULT_CANVAS_PAGE_FORMAT } from "~/index"; import { Alert, Intent } from "@blueprintjs/core"; +import { + GlobalTextPanel, + FeatureFlagPanel, +} from "./components/BlockPropSettingPanels"; const DiscourseGraphHome = () => { const settings = useMemo(() => { @@ -13,39 +15,40 @@ const DiscourseGraphHome = () => { }, []); const [isAlertOpen, setIsAlertOpen] = useState(false); - return (
- - - { - if (checked) { - setIsAlertOpen(true); - } - }, + onAfterChange={(checked: boolean) => { + if (checked) { + setIsAlertOpen(true); + } }} /> { const settings = getFormattedConfigTree(); @@ -64,35 +64,40 @@ const SuggestiveModeSettings = () => { panel={
- { - setIncludePageRelations(checked); - }, - }} + onChange={setIncludePageRelations} /> -
diff --git a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx index e226588d9..dde8e936d 100644 --- a/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx +++ b/apps/roam/src/components/settings/components/BlockPropSettingPanels.tsx @@ -13,11 +13,8 @@ import idToTitle from "roamjs-components/util/idToTitle"; import useSingleChildValue from "roamjs-components/components/ConfigPanels/useSingleChildValue"; import getShallowTreeByParentUid from "roamjs-components/queries/getShallowTreeByParentUid"; import { - getGlobalSetting, setGlobalSetting, - getPersonalSetting, setPersonalSetting, - getFeatureFlag, setFeatureFlag, } from "~/components/settings/utils/accessors"; import type { FeatureFlags } from "~/components/settings/utils/zodSchema"; @@ -28,25 +25,20 @@ type RoamBlockSyncProps = { order?: number; }; -type TextGetter = (keys: string[]) => string | undefined; type TextSetter = (keys: string[], value: string) => void; -type FlagGetter = (keys: string[]) => boolean | undefined; type FlagSetter = (keys: string[], value: boolean) => void; -type NumberGetter = (keys: string[]) => number | undefined; type NumberSetter = (keys: string[], value: number) => void; -type MultiTextGetter = (keys: string[]) => string[] | undefined; type MultiTextSetter = (keys: string[], value: string[]) => void; type BaseTextPanelProps = { title: string; description: string; settingKeys: string[]; - getter: TextGetter; setter: TextSetter; - defaultValue?: string; + initialValue?: string; placeholder?: string; } & RoamBlockSyncProps; @@ -54,9 +46,9 @@ type BaseFlagPanelProps = { title: string; description: string; settingKeys: string[]; - getter: FlagGetter; setter: FlagSetter; - defaultValue?: boolean; + initialValue?: boolean; + value?: boolean; disabled?: boolean; onBeforeChange?: (checked: boolean) => Promise; onChange?: (checked: boolean) => void; @@ -66,9 +58,8 @@ type BaseNumberPanelProps = { title: string; description: string; settingKeys: string[]; - getter: NumberGetter; setter: NumberSetter; - defaultValue?: number; + initialValue?: number; min?: number; max?: number; } & RoamBlockSyncProps; @@ -77,41 +68,38 @@ type BaseSelectPanelProps = { title: string; description: string; settingKeys: string[]; - getter: TextGetter; setter: TextSetter; options: string[]; - defaultValue?: string; + initialValue?: string; } & RoamBlockSyncProps; type BaseMultiTextPanelProps = { title: string; description: string; settingKeys: string[]; - getter: MultiTextGetter; setter: MultiTextSetter; - defaultValue?: string[]; + initialValue?: string[]; } & RoamBlockSyncProps; const BaseTextPanel = ({ title, description, settingKeys, - getter, setter, - defaultValue = "", + initialValue, placeholder, parentUid, uid, order, }: BaseTextPanelProps) => { - const [value, setValue] = useState(() => getter(settingKeys) ?? defaultValue); + const [value, setValue] = useState(() => initialValue ?? ""); const hasBlockSync = parentUid !== undefined && order !== undefined; const { onChange: rawSyncToBlock } = useSingleChildValue({ title, parentUid: parentUid ?? "", order: order ?? 0, uid, - defaultValue, + defaultValue: initialValue ?? "", transform: (s: string) => s, toStr: (s: string) => s, }); @@ -131,7 +119,7 @@ const BaseTextPanel = ({ ); @@ -141,9 +129,9 @@ const BaseFlagPanel = ({ title, description, settingKeys, - getter, setter, - defaultValue = false, + initialValue, + value, disabled = false, onBeforeChange, onChange, @@ -151,7 +139,9 @@ const BaseFlagPanel = ({ uid: initialBlockUid, order, }: BaseFlagPanelProps) => { - const [value, setValue] = useState(() => getter(settingKeys) ?? defaultValue); + const [internalValue, setInternalValue] = useState( + () => initialValue ?? false, + ); const blockUidRef = useRef(initialBlockUid); const syncFlagToBlock = useCallback( @@ -185,7 +175,7 @@ const BaseFlagPanel = ({ if (!shouldProceed) return; } - setValue(checked); + setInternalValue(checked); setter(settingKeys, checked); await syncFlagToBlock(checked); onChange?.(checked); @@ -193,7 +183,7 @@ const BaseFlagPanel = ({ return ( void handleChange(e)} disabled={disabled} labelElement={ @@ -210,23 +200,22 @@ const BaseNumberPanel = ({ title, description, settingKeys, - getter, setter, - defaultValue = 0, + initialValue, min, max, parentUid, uid, order, }: BaseNumberPanelProps) => { - const [value, setValue] = useState(() => getter(settingKeys) ?? defaultValue); + const [value, setValue] = useState(() => initialValue ?? 0); const hasBlockSync = parentUid !== undefined && order !== undefined; const { onChange: rawSyncToBlock } = useSingleChildValue({ title, parentUid: parentUid ?? "", order: order ?? 0, uid, - defaultValue, + defaultValue: initialValue ?? 0, transform: (s: string) => parseInt(s, 10), toStr: (v: number) => `${v}`, }); @@ -258,24 +247,21 @@ const BaseSelectPanel = ({ title, description, settingKeys, - getter, setter, options, - defaultValue, + initialValue, parentUid, uid, order, }: BaseSelectPanelProps) => { - const [value, setValue] = useState( - () => getter(settingKeys) ?? defaultValue ?? options[0], - ); + const [value, setValue] = useState(() => initialValue ?? options[0]); const hasBlockSync = parentUid !== undefined && order !== undefined; const { onChange: rawSyncToBlock } = useSingleChildValue({ title, parentUid: parentUid ?? "", order: order ?? 0, uid, - defaultValue: defaultValue ?? options[0] ?? "", + defaultValue: initialValue ?? options[0] ?? "", transform: (s: string) => s, toStr: (s: string) => s, }); @@ -306,16 +292,13 @@ const BaseMultiTextPanel = ({ title, description, settingKeys, - getter, setter, - defaultValue = [], + initialValue, parentUid, uid: initialBlockUid, order, }: BaseMultiTextPanelProps) => { - const [values, setValues] = useState( - () => getter(settingKeys) ?? defaultValue, - ); + const [values, setValues] = useState(() => initialValue ?? []); const [inputValue, setInputValue] = useState(""); const hasBlockSync = parentUid !== undefined && order !== undefined; const blockUidRef = useRef(initialBlockUid); @@ -422,17 +405,11 @@ const BaseMultiTextPanel = ({ ); }; -type TextWrapperProps = Omit; -type FlagWrapperProps = Omit; -type NumberWrapperProps = Omit; -type SelectWrapperProps = Omit; -type MultiTextWrapperProps = Omit; - -const featureFlagGetter: FlagGetter = (keys) => { - const key = keys[0]; - if (!key) return undefined; - return getFeatureFlag(key as keyof FeatureFlags); -}; +type TextWrapperProps = Omit; +type FlagWrapperProps = Omit; +type NumberWrapperProps = Omit; +type SelectWrapperProps = Omit; +type MultiTextWrapperProps = Omit; const featureFlagSetter: FlagSetter = (keys, value) => { const key = keys[0]; @@ -440,45 +417,47 @@ const featureFlagSetter: FlagSetter = (keys, value) => { setFeatureFlag(key as keyof FeatureFlags, value); }; -type Getter = (keys: string[]) => T | undefined; type Setter = (keys: string[], value: T) => void; -type Accessors = { getter: Getter; setter: Setter }; +type Accessors = { setter: Setter }; const createAccessors = ( - getFn: (keys: string[]) => U | undefined, setFn: (keys: string[], value: T) => void, ): Accessors => ({ - getter: (keys) => getFn(keys), setter: setFn, }); const globalAccessors = { - text: createAccessors(getGlobalSetting, setGlobalSetting), - flag: createAccessors(getGlobalSetting, setGlobalSetting), - number: createAccessors(getGlobalSetting, setGlobalSetting), - multiText: createAccessors(getGlobalSetting, setGlobalSetting), + text: createAccessors(setGlobalSetting), + flag: createAccessors(setGlobalSetting), + number: createAccessors(setGlobalSetting), + multiText: createAccessors(setGlobalSetting), }; const personalAccessors = { - text: createAccessors(getPersonalSetting, setPersonalSetting), - flag: createAccessors(getPersonalSetting, setPersonalSetting), - number: createAccessors(getPersonalSetting, setPersonalSetting), - multiText: createAccessors(getPersonalSetting, setPersonalSetting), + text: createAccessors(setPersonalSetting), + flag: createAccessors(setPersonalSetting), + number: createAccessors(setPersonalSetting), + multiText: createAccessors(setPersonalSetting), }; export const FeatureFlagPanel = ({ title, description, featureKey, + initialValue, onBeforeEnable, onAfterChange, + parentUid, + uid, + order, }: { title: string; description: string; featureKey: keyof FeatureFlags; + initialValue?: boolean; onBeforeEnable?: () => Promise; onAfterChange?: (checked: boolean) => void; -}) => { +} & RoamBlockSyncProps) => { const handleBeforeChange: | ((checked: boolean) => Promise) | undefined = onBeforeEnable @@ -495,10 +474,13 @@ export const FeatureFlagPanel = ({ title={title} description={description} settingKeys={[featureKey as string]} - getter={featureFlagGetter} setter={featureFlagSetter} + initialValue={initialValue} onBeforeChange={handleBeforeChange} onChange={onAfterChange} + parentUid={parentUid} + uid={uid} + order={order} /> ); }; diff --git a/apps/roam/src/components/settings/utils/accessors.ts b/apps/roam/src/components/settings/utils/accessors.ts index ec1fdc4c2..9d8959404 100644 --- a/apps/roam/src/components/settings/utils/accessors.ts +++ b/apps/roam/src/components/settings/utils/accessors.ts @@ -535,4 +535,4 @@ export const getAllDiscourseNodes = (): DiscourseNodeSettings[] => { } return nodes; -}; \ No newline at end of file +}; diff --git a/apps/roam/src/index.ts b/apps/roam/src/index.ts index 1bed828d4..9eb8095aa 100644 --- a/apps/roam/src/index.ts +++ b/apps/roam/src/index.ts @@ -41,6 +41,7 @@ import { STREAMLINE_STYLING_KEY, DISALLOW_DIAGNOSTICS, } from "./data/userSettings"; +import { initSchema } from "./components/settings/utils/init"; export const DEFAULT_CANVAS_PAGE_FORMAT = "Canvas/*"; @@ -78,8 +79,6 @@ export default runExtension(async (onloadArgs) => { await initializeDiscourseNodes(); refreshConfigTree(); - // For testing purposes - // await initSchema(); addGraphViewNodeStyling(); registerCommandPaletteCommands(onloadArgs); createSettingsPanel(onloadArgs); @@ -156,6 +155,8 @@ export default runExtension(async (onloadArgs) => { }); } + await initSchema(); + return { elements: [ style,