| undefined;\n}> = ({ instantSave }) => {\n const { teamOn } = useContext(TeamCtx);\n return (\n \n );\n};\n\nconst PageNavButton = () => {\n const [asideOpen, setAsideOpen] = useAsideOpen();\n return (\n }\n onClick={() => setAsideOpen((prev) => !prev)}\n />\n );\n};\n\nconst UserCard: FC<{ userInfo: UserInfo }> = ({ userInfo }) => {\n const [renaming, setRenaming] = useState(false);\n const { ignores, setIgnores, resetIO } = useContext(TeamCtx);\n useEffect(() => setRenaming(false), [userInfo]);\n if (!userInfo) return null;\n\n const { userName, online, userID } = userInfo;\n const self = userID === getUserID();\n const ignored = ignores.has(userID) && !self;\n\n const switchIgnore = () => {\n setIgnores((prev) => {\n if (prev.has(userID)) return prev.delete(userID);\n return prev.add(userID);\n });\n };\n\n const submitRename = (value: string) => {\n const name = value.trim();\n if (!name || name === userName) return setRenaming(false);\n saveUserName(name);\n resetIO();\n };\n\n return (\n \n \n {renaming || {userName}}\n {renaming && (\n } />}\n />\n )}\n {self ? (\n renaming || (\n }\n onClick={() => setRenaming(true)}\n />\n )\n ) : (\n : }\n onClick={switchIgnore}\n />\n )}\n
\n );\n};\n\nconst ShareButton: FC = () => {\n const [copied, setCopied] = useState(false);\n const link = window.location.href;\n const share = async () => {\n try {\n await copy(`${document.title}\\n${link}`);\n setCopied(true);\n } catch (e) {\n console.log(e);\n }\n };\n return (\n : }\n type={copied ? \"primary\" : \"default\"}\n className=\"share-btn\"\n onClick={share}\n block\n >\n {copied ? \"Copied\" : \"Copy link\"}\n \n );\n};\n\nconst TeamInfoMenu: FC<\n PropsWithChildren<{ title: string; icon: ReactNode }>\n> = ({ children, title, icon }) => {\n return (\n \n
\n {icon}\n {title}\n
\n {children}\n
\n
\n \n Global\n \n \n \n \n updateDrawCtrl({ globalEraser: v })}\n />\n
\n \n );\n};\n\nconst RoomInfo: FC = () => {\n const { userRec, connected, loadInfo, loadState, resetIO } =\n useContext(TeamCtx);\n\n const userList = useMemo(() => {\n const selfID = getUserID();\n const { [selfID]: selfInfo, ...otherUsers } = userRec;\n if (!selfInfo) return [];\n const values = Object.values(otherUsers);\n return [selfInfo, ...sortBy(values, \"online\").reverse()];\n }, [userRec]);\n\n const onlineNum = useMemo(\n () => userList.filter(({ online }) => online).length,\n [userList]\n );\n\n const teamPop = (\n \n {connected || (\n
}\n type=\"error\"\n showIcon\n banner\n />\n )}\n
\n
\n
} title=\"Members\">\n
\n {userList.map((u) => (\n \n ))}\n
\n \n
\n Team info\n }\n onClick={async () => {\n setReloading(true);\n await loadInfo();\n await loadState();\n setReloading(false);\n resetIO();\n }}\n />\n
\n );\n\n return (\n e.parentElement!}\n destroyTooltipOnHide\n >\n \n \n \n }\n />\n \n );\n};\n\nconst JoinRoom: FC<{\n instantSave: () => Promise | undefined;\n}> = ({ instantSave }) => {\n const noteID = useParams().noteID ?? \"\";\n const nav = useNavigate();\n\n const createRoom = async () => {\n await instantSave();\n const res = await putNote(noteID);\n if (!res) return message.error(\"Can't create room.\");\n await editNoteData(noteID, { team: true });\n nav(\"/team/\" + noteID);\n };\n\n const content = (\n \n
\n
\n \n \n Anyone with the link\n \n \n
\n
\n \n \n {getUserName()} (You)\n \n Owner\n
\n
\n
\n
\n
\n {pageOrder.map((uid) => (\n \n ))}\n \n \n
\n
\n {userName?.slice(0, 3)}\n
\n \n );\n};\n","import { FC } from \"react\";\nimport { Button } from \"antd\";\nimport { PlusOutlined } from \"@ant-design/icons\";\n\nexport const AddPageButton: FC<{ addFinalPage: () => void }> = ({\n addFinalPage,\n}) => {\n return (\n } block onClick={addFinalPage}>\n New page\n \n );\n};\n","import React, {\n FC,\n useRef,\n useMemo,\n useState,\n useContext,\n useLayoutEffect,\n} from \"react\";\nimport {\n MoreOutlined,\n PlusOutlined,\n CopyOutlined,\n CaretUpOutlined,\n DeleteOutlined,\n} from \"@ant-design/icons\";\nimport {\n Draggable,\n Droppable,\n DropResult,\n DragDropContext,\n} from \"react-beautiful-dnd\";\nimport {\n Avatar,\n Button,\n Menu,\n Pagination,\n Popover,\n Select,\n Switch,\n Tabs,\n} from \"antd\";\nimport {\n Setter,\n useActiveKey,\n useAsideOpen,\n ActiveKeyProvider,\n useEvent,\n} from \"lib/hooks\";\nimport { ReaderMethods, ReaderStates } from \"../Reader\";\nimport PageWrapper from \"component/PageWrapper\";\nimport { UserAvatar } from \"component/UserAvatar\";\nimport { exchange } from \"../lib/array\";\nimport IconFont from \"component/IconFont\";\nimport classNames from \"classnames\";\nimport { TeamCtx } from \"../Team\";\nimport { useSwipeable } from \"react-swipeable\";\nimport { NotePage } from \"lib/note/note\";\nimport { TeamState } from \"lib/draw/TeamState\";\nimport { AddPageButton } from \"../tools/AddButton\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { useForceLight } from \"lib/Dark\";\nimport { useDrawCtrl, useUpdateDrawCtrl } from \"lib/draw/DrawCtrl\";\nimport { useMediaQuery } from \"react-responsive\";\n\ntype PreviewProps = ReaderMethods & ReaderStates;\nexport const PageNav: FC = (props) => {\n const [left, setLeft] = useState(false);\n const [asideOpen] = useAsideOpen();\n\n const opposite = (\n \n {({ innerRef }) => }\n \n );\n\n return (\n \n \n {\n if (destination?.index === 0) setLeft(true);\n if (destination?.index === 1) setLeft(false);\n }}\n >\n \n {(\n { droppableProps, innerRef, placeholder },\n { isDraggingOver }\n ) => (\n \n {opposite}\n \n {placeholder}\n \n )}\n \n \n \n \n );\n};\n\nconst PreviewCard: FC<{ left: boolean } & PreviewProps> = ({\n left,\n ...props\n}) => {\n const [activeKey] = useActiveKey();\n const [, setAsideOpen] = useAsideOpen();\n\n const title = {\n ALL: \"All Pages\",\n MARKED: \"Bookmarks\",\n WRITTEN: \"Notes\",\n }[activeKey];\n\n const { ref: swipeRef, ...swipeHandler } = useSwipeable({\n onSwipedLeft() {\n if (left) setAsideOpen(false);\n },\n onSwipedRight() {\n if (!left) setAsideOpen(false);\n },\n swipeDuration: 200,\n });\n\n return (\n \n {(\n { innerRef, draggableProps, dragHandleProps },\n { isDragging, isDropAnimating }\n ) => (\n {\n innerRef(e);\n swipeRef(e);\n }}\n data-animating={isDropAnimating}\n {...draggableProps}\n {...swipeHandler}\n >\n \n {title}
\n \n \n \n \n )}\n \n );\n};\n\nconst PageList: FC = React.memo(\n ({ cardDragged, ...props }) => {\n const refRec = useRef>({});\n const [activeKey] = useActiveKey();\n const [asideOpen] = useAsideOpen();\n const { pageOrder, currPageID } = props;\n const { saveReorder, addFinalPage } = props;\n\n const onDragEnd = ({ source, destination }: DropResult) => {\n if (!destination || !pageOrder) return;\n const { index: fromIndex } = source;\n const { index: toIndex } = destination;\n const pageID = pageOrder[fromIndex];\n if (fromIndex === toIndex || !pageID) return;\n const newOrder = exchange(pageOrder, fromIndex, toIndex);\n saveReorder(newOrder, true);\n };\n\n const initScroll = useEvent(() => {\n refRec.current[currPageID]?.scrollIntoView();\n });\n useLayoutEffect(() => {\n if (asideOpen) initScroll();\n }, [asideOpen, activeKey, initScroll]);\n\n return (\n \n \n {({ droppableProps, innerRef, placeholder }) => (\n \n {pageOrder.map((uid, index) => (\n
\n ))}\n {placeholder}\n {activeKey === \"ALL\" && (\n
\n )}\n
e.stopPropagation()}>\n
switchPageMarked(uid)}\n />\n {index + 1}
\n \n \n \n \n
\n \n );\n};\n\nconst PreviewTabs: FC = React.memo(() => {\n const [activeKey, setActiveKey] = useActiveKey();\n return (\n },\n { key: \"MARKED\", label: },\n { key: \"WRITTEN\", label: },\n ]}\n >\n );\n});\nPreviewTabs.displayName = \"PreviewTabs\";\n\nconst PreviewFooter: FC = ({\n currPageID,\n pageOrder,\n scrollPage,\n size,\n setSize,\n}) => {\n const pageIndex = useMemo(\n () => (pageOrder.indexOf(currPageID) ?? 0) + 1,\n [currPageID, pageOrder]\n );\n\n const jumpMenu = pageOrder && (\n {\n const pageID = pageOrder[index - 1];\n pageID && scrollPage(pageID);\n }}\n />\n );\n\n return (\n \n );\n};\n\nconst FooterOptions = () => {\n const { finger } = useDrawCtrl();\n const updateDrawCtrl = useUpdateDrawCtrl();\n const [forceLight, setForceLight] = useForceLight();\n const isLight = useMediaQuery({ query: \"(prefers-color-scheme: light)\" });\n\n const options = (\n <>\n \n Pencil only\n updateDrawCtrl({ finger: !v })}\n />\n
\n \n Light mode\n \n
\n \n );\n\n return (\n e.parentElement!}\n trigger=\"click\"\n content={options}\n placement=\"topRight\"\n >\n }\n />\n \n );\n};\n","import { FC } from \"react\";\nimport { Button } from \"antd\";\nimport { useNavigate } from \"react-router-dom\";\nimport { HomeFilled, SaveOutlined } from \"@ant-design/icons\";\n\nexport const HeaderLeft: FC<{\n saved: boolean;\n instantSave: () => Promise | undefined;\n}> = ({ saved, instantSave }) => {\n const nav = useNavigate();\n return (\n \n {\n await instantSave();\n nav(\"/\");\n }}\n icon={}\n />\n }\n />\n
\n );\n};\n","import { FC, ReactNode, useState } from \"react\";\nimport { Button, ButtonProps, Input, Popover, Segmented } from \"antd\";\nimport {\n UndoOutlined,\n RedoOutlined,\n LinkOutlined,\n BorderOutlined,\n GatewayOutlined,\n PictureOutlined,\n HighlightTwoTone,\n HighlightOutlined,\n PlusCircleOutlined,\n} from \"@ant-design/icons\";\nimport IconFont from \"component/IconFont\";\nimport { PenPanel, WidthSelect } from \"../tools/PenPanel\";\nimport { DrawCtrl } from \"draft-pad/dist/lib\";\nimport { useDrawCtrl, useUpdateDrawCtrl } from \"lib/draw/DrawCtrl\";\n\nconst btnProps: ButtonProps = { type: \"text\" };\n\nexport const HeaderMiddle: FC<{\n handleUndo: () => void;\n handleRedo: () => void;\n undoable: boolean;\n redoable: boolean;\n}> = ({ handleUndo, handleRedo, undoable, redoable }) => (\n \n
}\n onClick={handleUndo}\n disabled={!undoable}\n />\n
}\n onClick={handleRedo}\n disabled={!redoable}\n />\n
\n
\n
\n
\n
Tap anywhere to insert text.
,\n picture: (\n \n
updateDrawCtrl({ imageSrc: e.target.value })}\n prefix={}\n placeholder=\"Image URL\"\n allowClear\n />\n {\n setShowImage(true)}\n onError={() => setShowImage(false)}\n />\n }\n \n
{Object.values(buttons)}
\n {/^(text|picture|rect)$/.test(mode) && (\n
\n {optionPanels[mode]}\n
\n )}\n
\n \n {renaming || {userName}}\n {renaming && (\n } />}\n />\n )}\n {self ? (\n renaming || (\n }\n onClick={() => setRenaming(true)}\n />\n )\n ) : (\n : }\n onClick={switchIgnore}\n />\n )}\n
\n );\n};\n\nconst ShareButton: FC = () => {\n const [copied, setCopied] = useState(false);\n const link = window.location.href;\n const share = async () => {\n try {\n await copy(`${document.title}\\n${link}`);\n setCopied(true);\n } catch (e) {\n console.log(e);\n }\n };\n return (\n : }\n type={copied ? \"primary\" : \"default\"}\n className=\"share-btn\"\n onClick={share}\n block\n >\n {copied ? \"Copied\" : \"Copy link\"}\n \n );\n};\n\nconst TeamInfoMenu: FC<\n PropsWithChildren<{ title: string; icon: ReactNode }>\n> = ({ children, title, icon }) => {\n return (\n \n
\n {icon}\n {title}\n
\n {children}\n
\n
\n \n Global\n \n \n \n \n updateDrawCtrl({ globalEraser: v })}\n />\n
\n \n );\n};\n\nconst RoomInfo: FC = () => {\n const { userRec, connected, loadInfo, loadState, resetIO } =\n useContext(TeamCtx);\n\n const userList = useMemo(() => {\n const selfID = getUserID();\n const { [selfID]: selfInfo, ...otherUsers } = userRec;\n if (!selfInfo) return [];\n const values = Object.values(otherUsers);\n return [selfInfo, ...sortBy(values, \"online\").reverse()];\n }, [userRec]);\n\n const onlineNum = useMemo(\n () => userList.filter(({ online }) => online).length,\n [userList]\n );\n\n const teamPop = (\n \n {connected || (\n
}\n type=\"error\"\n showIcon\n banner\n />\n )}\n
\n
\n
} title=\"Members\">\n
\n {userList.map((u) => (\n \n ))}\n
\n \n
\n Team info\n }\n onClick={async () => {\n setReloading(true);\n await loadInfo();\n await loadState();\n setReloading(false);\n resetIO();\n }}\n />\n
\n );\n\n return (\n e.parentElement!}\n destroyTooltipOnHide\n >\n \n \n \n }\n />\n \n );\n};\n\nconst JoinRoom: FC<{\n instantSave: () => Promise | undefined;\n}> = ({ instantSave }) => {\n const noteID = useParams().noteID ?? \"\";\n const nav = useNavigate();\n\n const createRoom = async () => {\n await instantSave();\n const res = await putNote(noteID);\n if (!res) return message.error(\"Can't create room.\");\n await editNoteData(noteID, { team: true });\n nav(\"/team/\" + noteID);\n };\n\n const content = (\n \n
\n
\n \n \n Anyone with the link\n \n \n
\n
\n \n \n {getUserName()} (You)\n \n Owner\n
\n
\n
\n
\n
\n {pageOrder.map((uid) => (\n \n ))}\n \n \n
\n