Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
TypeScript
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192import { Block } from "components/Blocks/Block";import { create } from "zustand";import { combine, createJSONStorage, persist } from "zustand/middleware";
type SelectedBlock = Pick<Block, "value" | "parent">;
export type FocusedEntity = | { entityType: "page"; entityID: string } | { entityType: "block"; entityID: string; parent: string } | { entityType: "footnote"; entityID: string; parent: string } | { entityType: "comment"; entityID: string; parent: string } | null;
export type EditorIframePage = { type: "iframe"; url: string };export type EditorOpenPage = string | EditorIframePage;
export const getEditorPageKey = (page: EditorOpenPage): string => typeof page === "string" ? page : `iframe:${page.url}`;
export const useUIState = create( combine( { lastUsedHighlight: "1" as "1" | "2" | "3", focusedEntity: null as FocusedEntity, foldedBlocks: [] as string[], openPages: [] as EditorOpenPage[], selectedBlocks: [] as SelectedBlock[], openPopover: null as string | null, }, (set) => ({ setOpenPopover: (id: string | null) => { set({ openPopover: id }); }, toggleFold: (entityID: string) => { set((state) => { return { foldedBlocks: state.foldedBlocks.includes(entityID) ? state.foldedBlocks.filter((b) => b !== entityID) : [...state.foldedBlocks, entityID], }; }); }, openPage: (parent: EditorOpenPage, page: EditorOpenPage) => set((state) => { let parentKey = getEditorPageKey(parent); let parentPosition = state.openPages.findIndex( (s) => getEditorPageKey(s) === parentKey, ); return { openPages: parentPosition === -1 ? [page] : [...state.openPages.slice(0, parentPosition + 1), page], }; }), closePage: (pages: EditorOpenPage | EditorOpenPage[]) => set((s) => { let keys = [pages].flat().map(getEditorPageKey); return { openPages: s.openPages.filter( (c) => !keys.includes(getEditorPageKey(c)), ), }; }), setFocusedBlock: (b: FocusedEntity) => set(() => ({ focusedEntity: b })), setSelectedBlock: (block: SelectedBlock) => set((state) => { return { ...state, selectedBlocks: [block] }; }), setSelectedBlocks: (blocks: SelectedBlock[]) => set((state) => { return { ...state, selectedBlocks: blocks }; }), addBlockToSelection: (block: SelectedBlock) => set((state) => { if (state.selectedBlocks.find((b) => b.value === block.value)) return state; return { ...state, selectedBlocks: [...state.selectedBlocks, block] }; }), removeBlockFromSelection: (block: { value: string }) => set((state) => { return { ...state, selectedBlocks: state.selectedBlocks.filter( (f) => f.value !== block.value, ), }; }), }), ),);