+7 -10

actions/publishToPublication.ts

··· 32 32 import { scanIndexLocal } from "src/replicache/utils"; 33 33 import type { Fact } from "src/replicache"; 34 34 import type { Attribute } from "src/replicache/attributes"; 35 35 - import { 36 36 - Delta, 37 37 - YJSFragmentToString, 38 38 - } from "components/Blocks/TextBlock/RenderYJSFragment"; 35 35 + import { Delta, YJSFragmentToString } from "src/utils/yjsFragmentToString"; 39 36 import { ids } from "lexicons/api/lexicons"; 40 37 import { BlobRef } from "@atproto/lexicon"; 41 38 import { AtUri } from "@atproto/syntax"; ··· 308 305 if (!b) return []; 309 306 let block: PubLeafletPagesLinearDocument.Block = { 310 307 $type: "pub.leaflet.pages.linearDocument#block", 311 311 - alignment, 312 308 block: b, 313 309 }; 310 310 + if (alignment) block.alignment = alignment; 314 311 return [block]; 315 312 } else { 316 313 let block: PubLeafletPagesLinearDocument.Block = { ··· 408 405 let [stringValue, facets] = getBlockContent(b.value); 409 406 let block: $Typed<PubLeafletBlocksHeader.Main> = { 410 407 $type: "pub.leaflet.blocks.header", 411 411 - level: headingLevel?.data.value || 1, 408 408 + level: Math.floor(headingLevel?.data.value || 1), 412 409 plaintext: stringValue, 413 410 facets, 414 411 }; ··· 441 438 let block: $Typed<PubLeafletBlocksIframe.Main> = { 442 439 $type: "pub.leaflet.blocks.iframe", 443 440 url: url.data.value, 444 444 - height: height?.data.value || 600, 441 441 + height: Math.floor(height?.data.value || 600), 445 442 }; 446 443 return block; 447 444 } ··· 455 452 $type: "pub.leaflet.blocks.image", 456 453 image: blobref, 457 454 aspectRatio: { 458 458 - height: image.data.height, 459 459 - width: image.data.width, 455 455 + height: Math.floor(image.data.height), 456 456 + width: Math.floor(image.data.width), 460 457 }, 461 458 alt: altText ? altText.data.value : undefined, 462 459 }; ··· 773 770 image: blob.data.blob, 774 771 repeat: backgroundImageRepeat?.data.value ? true : false, 775 772 ...(backgroundImageRepeat?.data.value && { 776 776 - width: backgroundImageRepeat.data.value, 773 773 + width: Math.floor(backgroundImageRepeat.data.value), 777 774 }), 778 775 }; 779 776 }

+1 -1

actions/subscriptions/subscribeToMailboxWithEmail.ts

··· 11 11 import type { Attribute } from "src/replicache/attributes"; 12 12 import { Database } from "supabase/database.types"; 13 13 import * as Y from "yjs"; 14 14 - import { YJSFragmentToString } from "components/Blocks/TextBlock/RenderYJSFragment"; 14 14 + import { YJSFragmentToString } from "src/utils/yjsFragmentToString"; 15 15 import { pool } from "supabase/pool"; 16 16 17 17 let supabase = createServerClient<Database>(

+1 -4

app/(home-pages)/tag/[tag]/getDocumentsByTag.ts

··· 10 10 export async function getDocumentsByTag( 11 11 tag: string, 12 12 ): Promise<{ posts: Post[] }> { 13 13 - // Normalize tag to lowercase for case-insensitive search 14 14 - const normalizedTag = tag.toLowerCase(); 15 15 - 16 13 // Query documents that have this tag 17 14 const { data: documents, error } = await supabaseServerClient 18 15 .from("documents") ··· 22 19 document_mentions_in_bsky(count), 23 20 documents_in_publications(publications(*))`, 24 21 ) 25 25 - .contains("data->tags", `["${normalizedTag}"]`) 22 22 + .contains("data->tags", `["${tag}"]`) 26 23 .order("indexed_at", { ascending: false }) 27 24 .limit(50); 28 25

+1 -1

app/[leaflet_id]/actions/PublishButton.tsx

··· 35 35 } from "src/hooks/queries/useBlocks"; 36 36 import * as Y from "yjs"; 37 37 import * as base64 from "base64-js"; 38 38 - import { YJSFragmentToString } from "components/Blocks/TextBlock/RenderYJSFragment"; 38 38 + import { YJSFragmentToString } from "src/utils/yjsFragmentToString"; 39 39 import { BlueskyLogin } from "app/login/LoginForm"; 40 40 import { moveLeafletToPublication } from "actions/publications/moveLeafletToPublication"; 41 41 import { AddTiny } from "components/Icons/AddTiny";

+1 -1

app/[leaflet_id]/page.tsx

··· 4 4 5 5 import type { Fact } from "src/replicache"; 6 6 import type { Attribute } from "src/replicache/attributes"; 7 7 - import { YJSFragmentToString } from "components/Blocks/TextBlock/RenderYJSFragment"; 7 7 + import { YJSFragmentToString } from "src/utils/yjsFragmentToString"; 8 8 import { Leaflet } from "./Leaflet"; 9 9 import { scanIndexLocal } from "src/replicache/utils"; 10 10 import { getRSVPData } from "actions/getRSVPData";

+24 -2

app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx

··· 1 1 "use client"; 2 2 import { AppBskyRichtextFacet, UnicodeString } from "@atproto/api"; 3 3 - import { useState, useCallback, useRef, useLayoutEffect } from "react"; 3 3 + import { useEffect, useState, useCallback, useRef, useLayoutEffect } from "react"; 4 4 import { EditorState } from "prosemirror-state"; 5 5 import { EditorView } from "prosemirror-view"; 6 6 import { Schema, MarkSpec, Mark } from "prosemirror-model"; ··· 292 292 }; 293 293 }, [openMentionAutocomplete]); 294 294 295 295 + const haveContent = (editorState?.doc.textContent.length ?? 0) > 0 296 296 + 297 297 + // Warn if there's content in the editor on page change, unload or reload. 298 298 + useWarnOnUnsavedChanges(haveContent); 299 299 + 295 300 return ( 296 301 <div className="relative w-full h-full group"> 297 302 <MentionAutocomplete ··· 302 307 coords={mentionCoords} 303 308 placeholder="Search people..." 304 309 /> 305 305 - {editorState?.doc.textContent.length === 0 && ( 310 310 + {!haveContent && ( 306 311 <div className="italic text-tertiary absolute top-0 left-0 pointer-events-none"> 307 312 Write a post to share your writing! 308 313 </div> ··· 445 450 view.dispatch(tr); 446 451 view.focus(); 447 452 }; 453 453 + 454 454 + 455 455 + function useWarnOnUnsavedChanges(hasUnsavedContent: boolean) { 456 456 + useEffect(() => { 457 457 + const handleBeforeUnload = (e: BeforeUnloadEvent) => { 458 458 + if (hasUnsavedContent) { 459 459 + e.preventDefault(); 460 460 + // Chrome requires returnValue to be set 461 461 + e.returnValue = ""; 462 462 + } 463 463 + }; 464 464 + window.addEventListener("beforeunload", handleBeforeUnload); 465 465 + return () => { 466 466 + window.removeEventListener("beforeunload", handleBeforeUnload); 467 467 + }; 468 468 + }, [hasUnsavedContent]); 469 469 + }

+1 -1

app/api/rpc/[command]/getFactsFromHomeLeaflets.ts

··· 5 5 import type { Env } from "./route"; 6 6 import { scanIndexLocal } from "src/replicache/utils"; 7 7 import * as base64 from "base64-js"; 8 8 - import { YJSFragmentToString } from "components/Blocks/TextBlock/RenderYJSFragment"; 8 8 + import { YJSFragmentToString } from "src/utils/yjsFragmentToString"; 9 9 import { applyUpdate, Doc } from "yjs"; 10 10 11 11 export const getFactsFromHomeLeaflets = makeRoute({

+1 -1

app/lish/[did]/[publication]/[rkey]/PostContent.tsx

··· 324 324 return ( 325 325 // all this margin stuff is a highly unfortunate hack so that the border-l on blockquote is the height of just the text rather than the height of the block, which includes padding. 326 326 <blockquote 327 327 - className={`blockquoteBlock py-0! mb-2! ${className} ${PubLeafletBlocksBlockquote.isMain(previousBlock?.block) ? "-mt-2! pt-3!" : "mt-1!"}`} 327 327 + className={`blockquote py-0! mb-2! ${className} ${PubLeafletBlocksBlockquote.isMain(previousBlock?.block) ? "-mt-2! pt-3!" : "mt-1!"}`} 328 328 {...blockProps} 329 329 > 330 330 <TextBlock

+2 -2

app/lish/[did]/[publication]/icon/route.ts

··· 12 12 13 13 export async function GET( 14 14 request: NextRequest, 15 15 - props: { params: Promise<{ did: string; publication: string }> } 15 15 + props: { params: Promise<{ did: string; publication: string }> }, 16 16 ) { 17 17 console.log("are we getting here?"); 18 18 const params = await props.params; ··· 43 43 44 44 let identity = await idResolver.did.resolve(did); 45 45 let service = identity?.service?.find((f) => f.id === "#atproto_pds"); 46 46 - if (!service) return null; 46 46 + if (!service) return redirect("/icon.png"); 47 47 let cid = (record.icon.ref as unknown as { $link: string })["$link"]; 48 48 const response = await fetch( 49 49 `${service.serviceEndpoint}/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${cid}`,

+1 -1

components/ActionBar/ActionButton.tsx

··· 3 3 import { useContext, useEffect } from "react"; 4 4 import { SidebarContext } from "./Sidebar"; 5 5 import React, { forwardRef, type JSX } from "react"; 6 6 - import { PopoverOpenContext } from "components/Popover"; 6 6 + import { PopoverOpenContext } from "components/Popover/PopoverContext"; 7 7 8 8 type ButtonProps = Omit<JSX.IntrinsicElements["button"], "content">; 9 9

+3 -3

components/Blocks/BlockCommands.tsx

··· 2 2 import { useUIState } from "src/useUIState"; 3 3 4 4 import { generateKeyBetween } from "fractional-indexing"; 5 5 - import { focusPage } from "components/Pages"; 5 5 + import { focusPage } from "src/utils/focusPage"; 6 6 import { v7 } from "uuid"; 7 7 import { Replicache } from "replicache"; 8 8 import { useEditorStates } from "src/state/useEditorState"; 9 9 import { elementId } from "src/utils/elementId"; 10 10 import { UndoManager } from "src/undoManager"; 11 11 import { focusBlock } from "src/utils/focusBlock"; 12 12 - import { usePollBlockUIState } from "./PollBlock"; 13 13 - import { focusElement } from "components/Input"; 12 12 + import { usePollBlockUIState } from "./PollBlock/pollBlockState"; 13 13 + import { focusElement } from "src/utils/focusElement"; 14 14 import { BlockBlueskySmall } from "components/Icons/BlockBlueskySmall"; 15 15 import { BlockButtonSmall } from "components/Icons/BlockButtonSmall"; 16 16 import { BlockCalendarSmall } from "components/Icons/BlockCalendarSmall";

+2 -120

components/Blocks/DeleteBlock.tsx

··· 1 1 - import { 2 2 - Fact, 3 3 - ReplicacheMutators, 4 4 - useEntity, 5 5 - useReplicache, 6 6 - } from "src/replicache"; 7 7 - import { Replicache } from "replicache"; 8 8 - import { useUIState } from "src/useUIState"; 9 9 - import { scanIndex } from "src/replicache/utils"; 10 10 - import { getBlocksWithType } from "src/hooks/queries/useBlocks"; 11 11 - import { focusBlock } from "src/utils/focusBlock"; 1 1 + import { Fact, useReplicache } from "src/replicache"; 12 2 import { ButtonPrimary } from "components/Buttons"; 13 3 import { CloseTiny } from "components/Icons/CloseTiny"; 4 4 + import { deleteBlock } from "src/utils/deleteBlock"; 14 5 15 6 export const AreYouSure = (props: { 16 7 entityID: string[] | string; ··· 82 73 ); 83 74 }; 84 75 85 85 - export async function deleteBlock( 86 86 - entities: string[], 87 87 - rep: Replicache<ReplicacheMutators>, 88 88 - ) { 89 89 - // get what pagess we need to close as a result of deleting this block 90 90 - let pagesToClose = [] as string[]; 91 91 - for (let entity of entities) { 92 92 - let [type] = await rep.query((tx) => 93 93 - scanIndex(tx).eav(entity, "block/type"), 94 94 - ); 95 95 - if (type.data.value === "card") { 96 96 - let [childPages] = await rep?.query( 97 97 - (tx) => scanIndex(tx).eav(entity, "block/card") || [], 98 98 - ); 99 99 - pagesToClose = [childPages?.data.value]; 100 100 - } 101 101 - if (type.data.value === "mailbox") { 102 102 - let [archive] = await rep?.query( 103 103 - (tx) => scanIndex(tx).eav(entity, "mailbox/archive") || [], 104 104 - ); 105 105 - let [draft] = await rep?.query( 106 106 - (tx) => scanIndex(tx).eav(entity, "mailbox/draft") || [], 107 107 - ); 108 108 - pagesToClose = [archive?.data.value, draft?.data.value]; 109 109 - } 110 110 - } 111 111 - 112 112 - // the next and previous blocks in the block list 113 113 - // if the focused thing is a page and not a block, return 114 114 - let focusedBlock = useUIState.getState().focusedEntity; 115 115 - let parent = 116 116 - focusedBlock?.entityType === "page" 117 117 - ? focusedBlock.entityID 118 118 - : focusedBlock?.parent; 119 119 - 120 120 - if (parent) { 121 121 - let parentType = await rep?.query((tx) => 122 122 - scanIndex(tx).eav(parent, "page/type"), 123 123 - ); 124 124 - if (parentType[0]?.data.value === "canvas") { 125 125 - useUIState 126 126 - .getState() 127 127 - .setFocusedBlock({ entityType: "page", entityID: parent }); 128 128 - useUIState.getState().setSelectedBlocks([]); 129 129 - } else { 130 130 - let siblings = 131 131 - (await rep?.query((tx) => getBlocksWithType(tx, parent))) || []; 132 132 - 133 133 - let selectedBlocks = useUIState.getState().selectedBlocks; 134 134 - let firstSelected = selectedBlocks[0]; 135 135 - let lastSelected = selectedBlocks[entities.length - 1]; 136 136 - 137 137 - let prevBlock = 138 138 - siblings?.[ 139 139 - siblings.findIndex((s) => s.value === firstSelected?.value) - 1 140 140 - ]; 141 141 - let prevBlockType = await rep?.query((tx) => 142 142 - scanIndex(tx).eav(prevBlock?.value, "block/type"), 143 143 - ); 144 144 - 145 145 - let nextBlock = 146 146 - siblings?.[ 147 147 - siblings.findIndex((s) => s.value === lastSelected.value) + 1 148 148 - ]; 149 149 - let nextBlockType = await rep?.query((tx) => 150 150 - scanIndex(tx).eav(nextBlock?.value, "block/type"), 151 151 - ); 152 152 - 153 153 - if (prevBlock) { 154 154 - useUIState.getState().setSelectedBlock({ 155 155 - value: prevBlock.value, 156 156 - parent: prevBlock.parent, 157 157 - }); 158 158 - 159 159 - focusBlock( 160 160 - { 161 161 - value: prevBlock.value, 162 162 - type: prevBlockType?.[0].data.value, 163 163 - parent: prevBlock.parent, 164 164 - }, 165 165 - { type: "end" }, 166 166 - ); 167 167 - } else { 168 168 - useUIState.getState().setSelectedBlock({ 169 169 - value: nextBlock.value, 170 170 - parent: nextBlock.parent, 171 171 - }); 172 172 - 173 173 - focusBlock( 174 174 - { 175 175 - value: nextBlock.value, 176 176 - type: nextBlockType?.[0]?.data.value, 177 177 - parent: nextBlock.parent, 178 178 - }, 179 179 - { type: "start" }, 180 180 - ); 181 181 - } 182 182 - } 183 183 - } 184 184 - 185 185 - pagesToClose.forEach((page) => page && useUIState.getState().closePage(page)); 186 186 - await Promise.all( 187 187 - entities.map((entity) => 188 188 - rep?.mutate.removeBlock({ 189 189 - blockEntity: entity, 190 190 - }), 191 191 - ), 192 192 - ); 193 193 - }

+2 -1

components/Blocks/ExternalLinkBlock.tsx

··· 8 8 import { v7 } from "uuid"; 9 9 import { useSmoker } from "components/Toast"; 10 10 import { Separator } from "components/Layout"; 11 11 - import { focusElement, Input } from "components/Input"; 11 11 + import { Input } from "components/Input"; 12 12 + import { focusElement } from "src/utils/focusElement"; 12 13 import { isUrl } from "src/utils/isURL"; 13 14 import { elementId } from "src/utils/elementId"; 14 15 import { focusBlock } from "src/utils/focusBlock";

+1 -1

components/Blocks/MailboxBlock.tsx

··· 9 9 import { useEntitySetContext } from "components/EntitySetProvider"; 10 10 import { subscribeToMailboxWithEmail } from "actions/subscriptions/subscribeToMailboxWithEmail"; 11 11 import { confirmEmailSubscription } from "actions/subscriptions/confirmEmailSubscription"; 12 12 - import { focusPage } from "components/Pages"; 12 12 + import { focusPage } from "src/utils/focusPage"; 13 13 import { v7 } from "uuid"; 14 14 import { sendPostToSubscribers } from "actions/subscriptions/sendPostToSubscribers"; 15 15 import { getBlocksWithType } from "src/hooks/queries/useBlocks";

+1 -1

components/Blocks/PageLinkBlock.tsx

··· 2 2 import { BlockProps, BaseBlock, ListMarker, Block } from "./Block"; 3 3 import { focusBlock } from "src/utils/focusBlock"; 4 4 5 5 - import { focusPage } from "components/Pages"; 5 5 + import { focusPage } from "src/utils/focusPage"; 6 6 import { useEntity, useReplicache } from "src/replicache"; 7 7 import { useUIState } from "src/useUIState"; 8 8 import { RenderedTextBlock } from "components/Blocks/TextBlock";

+501

components/Blocks/PollBlock/index.tsx

··· 1 1 + import { useUIState } from "src/useUIState"; 2 2 + import { BlockProps } from "../Block"; 3 3 + import { ButtonPrimary, ButtonSecondary } from "components/Buttons"; 4 4 + import { useCallback, useEffect, useState } from "react"; 5 5 + import { Input } from "components/Input"; 6 6 + import { focusElement } from "src/utils/focusElement"; 7 7 + import { Separator } from "components/Layout"; 8 8 + import { useEntitySetContext } from "components/EntitySetProvider"; 9 9 + import { theme } from "tailwind.config"; 10 10 + import { useEntity, useReplicache } from "src/replicache"; 11 11 + import { v7 } from "uuid"; 12 12 + import { 13 13 + useLeafletPublicationData, 14 14 + usePollData, 15 15 + } from "components/PageSWRDataProvider"; 16 16 + import { voteOnPoll } from "actions/pollActions"; 17 17 + import { elementId } from "src/utils/elementId"; 18 18 + import { CheckTiny } from "components/Icons/CheckTiny"; 19 19 + import { CloseTiny } from "components/Icons/CloseTiny"; 20 20 + import { PublicationPollBlock } from "../PublicationPollBlock"; 21 21 + import { usePollBlockUIState } from "./pollBlockState"; 22 22 + 23 23 + export const PollBlock = (props: BlockProps) => { 24 24 + let { data: pub } = useLeafletPublicationData(); 25 25 + if (!pub) return <LeafletPollBlock {...props} />; 26 26 + return <PublicationPollBlock {...props} />; 27 27 + }; 28 28 + 29 29 + export const LeafletPollBlock = (props: BlockProps) => { 30 30 + let isSelected = useUIState((s) => 31 31 + s.selectedBlocks.find((b) => b.value === props.entityID), 32 32 + ); 33 33 + let { permissions } = useEntitySetContext(); 34 34 + 35 35 + let { data: pollData } = usePollData(); 36 36 + let hasVoted = 37 37 + pollData?.voter_token && 38 38 + pollData.polls.find( 39 39 + (v) => 40 40 + v.poll_votes_on_entity.voter_token === pollData.voter_token && 41 41 + v.poll_votes_on_entity.poll_entity === props.entityID, 42 42 + ); 43 43 + 44 44 + let pollState = usePollBlockUIState((s) => s[props.entityID]?.state); 45 45 + if (!pollState) { 46 46 + if (hasVoted) pollState = "results"; 47 47 + else pollState = "voting"; 48 48 + } 49 49 + 50 50 + const setPollState = useCallback( 51 51 + (state: "editing" | "voting" | "results") => { 52 52 + usePollBlockUIState.setState((s) => ({ [props.entityID]: { state } })); 53 53 + }, 54 54 + [], 55 55 + ); 56 56 + 57 57 + let votes = 58 58 + pollData?.polls.filter( 59 59 + (v) => v.poll_votes_on_entity.poll_entity === props.entityID, 60 60 + ) || []; 61 61 + let totalVotes = votes.length; 62 62 + 63 63 + return ( 64 64 + <div 65 65 + className={`poll flex flex-col gap-2 p-3 w-full 66 66 + ${isSelected ? "block-border-selected " : "block-border"}`} 67 67 + style={{ 68 68 + backgroundColor: 69 69 + "color-mix(in oklab, rgb(var(--accent-1)), rgb(var(--bg-page)) 85%)", 70 70 + }} 71 71 + > 72 72 + {pollState === "editing" ? ( 73 73 + <EditPoll 74 74 + totalVotes={totalVotes} 75 75 + votes={votes.map((v) => v.poll_votes_on_entity)} 76 76 + entityID={props.entityID} 77 77 + close={() => { 78 78 + if (hasVoted) setPollState("results"); 79 79 + else setPollState("voting"); 80 80 + }} 81 81 + /> 82 82 + ) : pollState === "results" ? ( 83 83 + <PollResults 84 84 + entityID={props.entityID} 85 85 + pollState={pollState} 86 86 + setPollState={setPollState} 87 87 + hasVoted={!!hasVoted} 88 88 + /> 89 89 + ) : ( 90 90 + <PollVote 91 91 + entityID={props.entityID} 92 92 + onSubmit={() => setPollState("results")} 93 93 + pollState={pollState} 94 94 + setPollState={setPollState} 95 95 + hasVoted={!!hasVoted} 96 96 + /> 97 97 + )} 98 98 + </div> 99 99 + ); 100 100 + }; 101 101 + 102 102 + const PollVote = (props: { 103 103 + entityID: string; 104 104 + onSubmit: () => void; 105 105 + pollState: "editing" | "voting" | "results"; 106 106 + setPollState: (pollState: "editing" | "voting" | "results") => void; 107 107 + hasVoted: boolean; 108 108 + }) => { 109 109 + let { data, mutate } = usePollData(); 110 110 + let { permissions } = useEntitySetContext(); 111 111 + 112 112 + let pollOptions = useEntity(props.entityID, "poll/options"); 113 113 + let currentVotes = data?.voter_token 114 114 + ? data.polls 115 115 + .filter( 116 116 + (p) => 117 117 + p.poll_votes_on_entity.poll_entity === props.entityID && 118 118 + p.poll_votes_on_entity.voter_token === data.voter_token, 119 119 + ) 120 120 + .map((v) => v.poll_votes_on_entity.option_entity) 121 121 + : []; 122 122 + let [selectedPollOptions, setSelectedPollOptions] = 123 123 + useState<string[]>(currentVotes); 124 124 + 125 125 + return ( 126 126 + <> 127 127 + {pollOptions.map((option, index) => ( 128 128 + <PollVoteButton 129 129 + key={option.data.value} 130 130 + selected={selectedPollOptions.includes(option.data.value)} 131 131 + toggleSelected={() => 132 132 + setSelectedPollOptions((s) => 133 133 + s.includes(option.data.value) 134 134 + ? s.filter((s) => s !== option.data.value) 135 135 + : [...s, option.data.value], 136 136 + ) 137 137 + } 138 138 + entityID={option.data.value} 139 139 + /> 140 140 + ))} 141 141 + <div className="flex justify-between items-center"> 142 142 + <div className="flex justify-end gap-2"> 143 143 + {permissions.write && ( 144 144 + <button 145 145 + className="pollEditOptions w-fit flex gap-2 items-center justify-start text-sm text-accent-contrast" 146 146 + onClick={() => { 147 147 + props.setPollState("editing"); 148 148 + }} 149 149 + > 150 150 + Edit Options 151 151 + </button> 152 152 + )} 153 153 + 154 154 + {permissions.write && <Separator classname="h-6" />} 155 155 + <PollStateToggle 156 156 + setPollState={props.setPollState} 157 157 + pollState={props.pollState} 158 158 + hasVoted={props.hasVoted} 159 159 + /> 160 160 + </div> 161 161 + <ButtonPrimary 162 162 + className="place-self-end" 163 163 + onClick={async () => { 164 164 + await voteOnPoll(props.entityID, selectedPollOptions); 165 165 + mutate((oldState) => { 166 166 + if (!oldState || !oldState.voter_token) return; 167 167 + return { 168 168 + ...oldState, 169 169 + polls: [ 170 170 + ...oldState.polls.filter( 171 171 + (p) => 172 172 + !( 173 173 + p.poll_votes_on_entity.voter_token === 174 174 + oldState.voter_token && 175 175 + p.poll_votes_on_entity.poll_entity == props.entityID 176 176 + ), 177 177 + ), 178 178 + ...selectedPollOptions.map((option_entity) => ({ 179 179 + poll_votes_on_entity: { 180 180 + option_entity, 181 181 + entities: { set: "" }, 182 182 + poll_entity: props.entityID, 183 183 + voter_token: oldState.voter_token!, 184 184 + }, 185 185 + })), 186 186 + ], 187 187 + }; 188 188 + }); 189 189 + props.onSubmit(); 190 190 + }} 191 191 + disabled={ 192 192 + selectedPollOptions.length === 0 || 193 193 + (selectedPollOptions.length === currentVotes.length && 194 194 + selectedPollOptions.every((s) => currentVotes.includes(s))) 195 195 + } 196 196 + > 197 197 + Vote! 198 198 + </ButtonPrimary> 199 199 + </div> 200 200 + </> 201 201 + ); 202 202 + }; 203 203 + const PollVoteButton = (props: { 204 204 + entityID: string; 205 205 + selected: boolean; 206 206 + toggleSelected: () => void; 207 207 + }) => { 208 208 + let optionName = useEntity(props.entityID, "poll-option/name")?.data.value; 209 209 + if (!optionName) return null; 210 210 + if (props.selected) 211 211 + return ( 212 212 + <div className="flex gap-2 items-center"> 213 213 + <ButtonPrimary 214 214 + className={`pollOption grow max-w-full flex`} 215 215 + onClick={() => { 216 216 + props.toggleSelected(); 217 217 + }} 218 218 + > 219 219 + {optionName} 220 220 + </ButtonPrimary> 221 221 + </div> 222 222 + ); 223 223 + return ( 224 224 + <div className="flex gap-2 items-center"> 225 225 + <ButtonSecondary 226 226 + className={`pollOption grow max-w-full flex`} 227 227 + onClick={() => { 228 228 + props.toggleSelected(); 229 229 + }} 230 230 + > 231 231 + {optionName} 232 232 + </ButtonSecondary> 233 233 + </div> 234 234 + ); 235 235 + }; 236 236 + 237 237 + const PollResults = (props: { 238 238 + entityID: string; 239 239 + pollState: "editing" | "voting" | "results"; 240 240 + setPollState: (pollState: "editing" | "voting" | "results") => void; 241 241 + hasVoted: boolean; 242 242 + }) => { 243 243 + let { data } = usePollData(); 244 244 + let { permissions } = useEntitySetContext(); 245 245 + let pollOptions = useEntity(props.entityID, "poll/options"); 246 246 + let pollData = data?.pollVotes.find((p) => p.poll_entity === props.entityID); 247 247 + let votesByOptions = pollData?.votesByOption || {}; 248 248 + let highestVotes = Math.max(...Object.values(votesByOptions)); 249 249 + let winningOptionEntities = Object.entries(votesByOptions).reduce<string[]>( 250 250 + (winningEntities, [entity, votes]) => { 251 251 + if (votes === highestVotes) winningEntities.push(entity); 252 252 + return winningEntities; 253 253 + }, 254 254 + [], 255 255 + ); 256 256 + return ( 257 257 + <> 258 258 + {pollOptions.map((p) => ( 259 259 + <PollResult 260 260 + key={p.id} 261 261 + winner={winningOptionEntities.includes(p.data.value)} 262 262 + entityID={p.data.value} 263 263 + totalVotes={pollData?.unique_votes || 0} 264 264 + votes={pollData?.votesByOption[p.data.value] || 0} 265 265 + /> 266 266 + ))} 267 267 + <div className="flex gap-2"> 268 268 + {permissions.write && ( 269 269 + <button 270 270 + className="pollEditOptions w-fit flex gap-2 items-center justify-start text-sm text-accent-contrast" 271 271 + onClick={() => { 272 272 + props.setPollState("editing"); 273 273 + }} 274 274 + > 275 275 + Edit Options 276 276 + </button> 277 277 + )} 278 278 + 279 279 + {permissions.write && <Separator classname="h-6" />} 280 280 + <PollStateToggle 281 281 + setPollState={props.setPollState} 282 282 + pollState={props.pollState} 283 283 + hasVoted={props.hasVoted} 284 284 + /> 285 285 + </div> 286 286 + </> 287 287 + ); 288 288 + }; 289 289 + 290 290 + const PollResult = (props: { 291 291 + entityID: string; 292 292 + votes: number; 293 293 + totalVotes: number; 294 294 + winner: boolean; 295 295 + }) => { 296 296 + let optionName = useEntity(props.entityID, "poll-option/name")?.data.value; 297 297 + return ( 298 298 + <div 299 299 + className={`pollResult relative grow py-0.5 px-2 border-accent-contrast rounded-md overflow-hidden ${props.winner ? "font-bold border-2" : "border"}`} 300 300 + > 301 301 + <div 302 302 + style={{ 303 303 + WebkitTextStroke: `${props.winner ? "6px" : "6px"} ${theme.colors["bg-page"]}`, 304 304 + paintOrder: "stroke fill", 305 305 + }} 306 306 + className={`pollResultContent text-accent-contrast relative flex gap-2 justify-between z-10`} 307 307 + > 308 308 + <div className="grow max-w-full truncate">{optionName}</div> 309 309 + <div>{props.votes}</div> 310 310 + </div> 311 311 + <div 312 312 + className={`pollResultBG absolute bg-bg-page w-full top-0 bottom-0 left-0 right-0 flex flex-row z-0`} 313 313 + > 314 314 + <div 315 315 + className={`bg-accent-contrast rounded-[2px] m-0.5`} 316 316 + style={{ 317 317 + maskImage: "var(--hatchSVG)", 318 318 + maskRepeat: "repeat repeat", 319 319 + 320 320 + ...(props.votes === 0 321 321 + ? { width: "4px" } 322 322 + : { flexBasis: `${(props.votes / props.totalVotes) * 100}%` }), 323 323 + }} 324 324 + /> 325 325 + <div /> 326 326 + </div> 327 327 + </div> 328 328 + ); 329 329 + }; 330 330 + 331 331 + const EditPoll = (props: { 332 332 + votes: { option_entity: string }[]; 333 333 + totalVotes: number; 334 334 + entityID: string; 335 335 + close: () => void; 336 336 + }) => { 337 337 + let pollOptions = useEntity(props.entityID, "poll/options"); 338 338 + let { rep } = useReplicache(); 339 339 + let permission_set = useEntitySetContext(); 340 340 + let [localPollOptionNames, setLocalPollOptionNames] = useState<{ 341 341 + [k: string]: string; 342 342 + }>({}); 343 343 + return ( 344 344 + <> 345 345 + {props.totalVotes > 0 && ( 346 346 + <div className="text-sm italic text-tertiary"> 347 347 + You can&apos;t edit options people already voted for! 348 348 + </div> 349 349 + )} 350 350 + 351 351 + {pollOptions.length === 0 && ( 352 352 + <div className="text-center italic text-tertiary text-sm"> 353 353 + no options yet... 354 354 + </div> 355 355 + )} 356 356 + {pollOptions.map((p) => ( 357 357 + <EditPollOption 358 358 + key={p.id} 359 359 + entityID={p.data.value} 360 360 + pollEntity={props.entityID} 361 361 + disabled={!!props.votes.find((v) => v.option_entity === p.data.value)} 362 362 + localNameState={localPollOptionNames[p.data.value]} 363 363 + setLocalNameState={setLocalPollOptionNames} 364 364 + /> 365 365 + ))} 366 366 + 367 367 + <button 368 368 + className="pollAddOption w-fit flex gap-2 items-center justify-start text-sm text-accent-contrast" 369 369 + onClick={async () => { 370 370 + let pollOptionEntity = v7(); 371 371 + await rep?.mutate.addPollOption({ 372 372 + pollEntity: props.entityID, 373 373 + pollOptionEntity, 374 374 + pollOptionName: "", 375 375 + permission_set: permission_set.set, 376 376 + factID: v7(), 377 377 + }); 378 378 + 379 379 + focusElement( 380 380 + document.getElementById( 381 381 + elementId.block(props.entityID).pollInput(pollOptionEntity), 382 382 + ) as HTMLInputElement | null, 383 383 + ); 384 384 + }} 385 385 + > 386 386 + Add an Option 387 387 + </button> 388 388 + 389 389 + <hr className="border-border" /> 390 390 + <ButtonPrimary 391 391 + className="place-self-end" 392 392 + onClick={async () => { 393 393 + // remove any poll options that have no name 394 394 + // look through the localPollOptionNames object and remove any options that have no name 395 395 + let emptyOptions = Object.entries(localPollOptionNames).filter( 396 396 + ([optionEntity, optionName]) => optionName === "", 397 397 + ); 398 398 + await Promise.all( 399 399 + emptyOptions.map( 400 400 + async ([entity]) => 401 401 + await rep?.mutate.removePollOption({ 402 402 + optionEntity: entity, 403 403 + }), 404 404 + ), 405 405 + ); 406 406 + 407 407 + await rep?.mutate.assertFact( 408 408 + Object.entries(localPollOptionNames) 409 409 + .filter(([, name]) => !!name) 410 410 + .map(([entity, name]) => ({ 411 411 + entity, 412 412 + attribute: "poll-option/name", 413 413 + data: { type: "string", value: name }, 414 414 + })), 415 415 + ); 416 416 + props.close(); 417 417 + }} 418 418 + > 419 419 + Save <CheckTiny /> 420 420 + </ButtonPrimary> 421 421 + </> 422 422 + ); 423 423 + }; 424 424 + 425 425 + const EditPollOption = (props: { 426 426 + entityID: string; 427 427 + pollEntity: string; 428 428 + localNameState: string | undefined; 429 429 + setLocalNameState: ( 430 430 + s: (s: { [k: string]: string }) => { [k: string]: string }, 431 431 + ) => void; 432 432 + disabled: boolean; 433 433 + }) => { 434 434 + let { rep } = useReplicache(); 435 435 + let optionName = useEntity(props.entityID, "poll-option/name")?.data.value; 436 436 + useEffect(() => { 437 437 + props.setLocalNameState((s) => ({ 438 438 + ...s, 439 439 + [props.entityID]: optionName || "", 440 440 + })); 441 441 + }, [optionName, props.setLocalNameState, props.entityID]); 442 442 + 443 443 + return ( 444 444 + <div className="flex gap-2 items-center"> 445 445 + <Input 446 446 + id={elementId.block(props.pollEntity).pollInput(props.entityID)} 447 447 + type="text" 448 448 + className="pollOptionInput w-full input-with-border" 449 449 + placeholder="Option here..." 450 450 + disabled={props.disabled} 451 451 + value={ 452 452 + props.localNameState === undefined ? optionName : props.localNameState 453 453 + } 454 454 + onChange={(e) => { 455 455 + props.setLocalNameState((s) => ({ 456 456 + ...s, 457 457 + [props.entityID]: e.target.value, 458 458 + })); 459 459 + }} 460 460 + onKeyDown={(e) => { 461 461 + if (e.key === "Backspace" && !e.currentTarget.value) { 462 462 + e.preventDefault(); 463 463 + rep?.mutate.removePollOption({ optionEntity: props.entityID }); 464 464 + } 465 465 + }} 466 466 + /> 467 467 + 468 468 + <button 469 469 + tabIndex={-1} 470 470 + disabled={props.disabled} 471 471 + className="text-accent-contrast disabled:text-border" 472 472 + onMouseDown={async () => { 473 473 + await rep?.mutate.removePollOption({ optionEntity: props.entityID }); 474 474 + }} 475 475 + > 476 476 + <CloseTiny /> 477 477 + </button> 478 478 + </div> 479 479 + ); 480 480 + }; 481 481 + 482 482 + const PollStateToggle = (props: { 483 483 + setPollState: (pollState: "editing" | "voting" | "results") => void; 484 484 + hasVoted: boolean; 485 485 + pollState: "editing" | "voting" | "results"; 486 486 + }) => { 487 487 + return ( 488 488 + <button 489 489 + className="text-sm text-accent-contrast sm:hover:underline" 490 490 + onClick={() => { 491 491 + props.setPollState(props.pollState === "voting" ? "results" : "voting"); 492 492 + }} 493 493 + > 494 494 + {props.pollState === "voting" 495 495 + ? "See Results" 496 496 + : props.hasVoted 497 497 + ? "Change Vote" 498 498 + : "Back to Poll"} 499 499 + </button> 500 500 + ); 501 501 + };

+8

components/Blocks/PollBlock/pollBlockState.ts

··· 1 1 + import { create } from "zustand"; 2 2 + 3 3 + export let usePollBlockUIState = create( 4 4 + () => 5 5 + ({}) as { 6 6 + [entity: string]: { state: "editing" | "voting" | "results" } | undefined; 7 7 + }, 8 8 + );

-507

components/Blocks/PollBlock.tsx

··· 1 1 - import { useUIState } from "src/useUIState"; 2 2 - import { BlockProps } from "./Block"; 3 3 - import { ButtonPrimary, ButtonSecondary } from "components/Buttons"; 4 4 - import { useCallback, useEffect, useState } from "react"; 5 5 - import { focusElement, Input } from "components/Input"; 6 6 - import { Separator } from "components/Layout"; 7 7 - import { useEntitySetContext } from "components/EntitySetProvider"; 8 8 - import { theme } from "tailwind.config"; 9 9 - import { useEntity, useReplicache } from "src/replicache"; 10 10 - import { v7 } from "uuid"; 11 11 - import { 12 12 - useLeafletPublicationData, 13 13 - usePollData, 14 14 - } from "components/PageSWRDataProvider"; 15 15 - import { voteOnPoll } from "actions/pollActions"; 16 16 - import { create } from "zustand"; 17 17 - import { elementId } from "src/utils/elementId"; 18 18 - import { CheckTiny } from "components/Icons/CheckTiny"; 19 19 - import { CloseTiny } from "components/Icons/CloseTiny"; 20 20 - import { PublicationPollBlock } from "./PublicationPollBlock"; 21 21 - 22 22 - export let usePollBlockUIState = create( 23 23 - () => 24 24 - ({}) as { 25 25 - [entity: string]: { state: "editing" | "voting" | "results" } | undefined; 26 26 - }, 27 27 - ); 28 28 - 29 29 - export const PollBlock = (props: BlockProps) => { 30 30 - let { data: pub } = useLeafletPublicationData(); 31 31 - if (!pub) return <LeafletPollBlock {...props} />; 32 32 - return <PublicationPollBlock {...props} />; 33 33 - }; 34 34 - 35 35 - export const LeafletPollBlock = (props: BlockProps) => { 36 36 - let isSelected = useUIState((s) => 37 37 - s.selectedBlocks.find((b) => b.value === props.entityID), 38 38 - ); 39 39 - let { permissions } = useEntitySetContext(); 40 40 - 41 41 - let { data: pollData } = usePollData(); 42 42 - let hasVoted = 43 43 - pollData?.voter_token && 44 44 - pollData.polls.find( 45 45 - (v) => 46 46 - v.poll_votes_on_entity.voter_token === pollData.voter_token && 47 47 - v.poll_votes_on_entity.poll_entity === props.entityID, 48 48 - ); 49 49 - 50 50 - let pollState = usePollBlockUIState((s) => s[props.entityID]?.state); 51 51 - if (!pollState) { 52 52 - if (hasVoted) pollState = "results"; 53 53 - else pollState = "voting"; 54 54 - } 55 55 - 56 56 - const setPollState = useCallback( 57 57 - (state: "editing" | "voting" | "results") => { 58 58 - usePollBlockUIState.setState((s) => ({ [props.entityID]: { state } })); 59 59 - }, 60 60 - [], 61 61 - ); 62 62 - 63 63 - let votes = 64 64 - pollData?.polls.filter( 65 65 - (v) => v.poll_votes_on_entity.poll_entity === props.entityID, 66 66 - ) || []; 67 67 - let totalVotes = votes.length; 68 68 - 69 69 - return ( 70 70 - <div 71 71 - className={`poll flex flex-col gap-2 p-3 w-full 72 72 - ${isSelected ? "block-border-selected " : "block-border"}`} 73 73 - style={{ 74 74 - backgroundColor: 75 75 - "color-mix(in oklab, rgb(var(--accent-1)), rgb(var(--bg-page)) 85%)", 76 76 - }} 77 77 - > 78 78 - {pollState === "editing" ? ( 79 79 - <EditPoll 80 80 - totalVotes={totalVotes} 81 81 - votes={votes.map((v) => v.poll_votes_on_entity)} 82 82 - entityID={props.entityID} 83 83 - close={() => { 84 84 - if (hasVoted) setPollState("results"); 85 85 - else setPollState("voting"); 86 86 - }} 87 87 - /> 88 88 - ) : pollState === "results" ? ( 89 89 - <PollResults 90 90 - entityID={props.entityID} 91 91 - pollState={pollState} 92 92 - setPollState={setPollState} 93 93 - hasVoted={!!hasVoted} 94 94 - /> 95 95 - ) : ( 96 96 - <PollVote 97 97 - entityID={props.entityID} 98 98 - onSubmit={() => setPollState("results")} 99 99 - pollState={pollState} 100 100 - setPollState={setPollState} 101 101 - hasVoted={!!hasVoted} 102 102 - /> 103 103 - )} 104 104 - </div> 105 105 - ); 106 106 - }; 107 107 - 108 108 - const PollVote = (props: { 109 109 - entityID: string; 110 110 - onSubmit: () => void; 111 111 - pollState: "editing" | "voting" | "results"; 112 112 - setPollState: (pollState: "editing" | "voting" | "results") => void; 113 113 - hasVoted: boolean; 114 114 - }) => { 115 115 - let { data, mutate } = usePollData(); 116 116 - let { permissions } = useEntitySetContext(); 117 117 - 118 118 - let pollOptions = useEntity(props.entityID, "poll/options"); 119 119 - let currentVotes = data?.voter_token 120 120 - ? data.polls 121 121 - .filter( 122 122 - (p) => 123 123 - p.poll_votes_on_entity.poll_entity === props.entityID && 124 124 - p.poll_votes_on_entity.voter_token === data.voter_token, 125 125 - ) 126 126 - .map((v) => v.poll_votes_on_entity.option_entity) 127 127 - : []; 128 128 - let [selectedPollOptions, setSelectedPollOptions] = 129 129 - useState<string[]>(currentVotes); 130 130 - 131 131 - return ( 132 132 - <> 133 133 - {pollOptions.map((option, index) => ( 134 134 - <PollVoteButton 135 135 - key={option.data.value} 136 136 - selected={selectedPollOptions.includes(option.data.value)} 137 137 - toggleSelected={() => 138 138 - setSelectedPollOptions((s) => 139 139 - s.includes(option.data.value) 140 140 - ? s.filter((s) => s !== option.data.value) 141 141 - : [...s, option.data.value], 142 142 - ) 143 143 - } 144 144 - entityID={option.data.value} 145 145 - /> 146 146 - ))} 147 147 - <div className="flex justify-between items-center"> 148 148 - <div className="flex justify-end gap-2"> 149 149 - {permissions.write && ( 150 150 - <button 151 151 - className="pollEditOptions w-fit flex gap-2 items-center justify-start text-sm text-accent-contrast" 152 152 - onClick={() => { 153 153 - props.setPollState("editing"); 154 154 - }} 155 155 - > 156 156 - Edit Options 157 157 - </button> 158 158 - )} 159 159 - 160 160 - {permissions.write && <Separator classname="h-6" />} 161 161 - <PollStateToggle 162 162 - setPollState={props.setPollState} 163 163 - pollState={props.pollState} 164 164 - hasVoted={props.hasVoted} 165 165 - /> 166 166 - </div> 167 167 - <ButtonPrimary 168 168 - className="place-self-end" 169 169 - onClick={async () => { 170 170 - await voteOnPoll(props.entityID, selectedPollOptions); 171 171 - mutate((oldState) => { 172 172 - if (!oldState || !oldState.voter_token) return; 173 173 - return { 174 174 - ...oldState, 175 175 - polls: [ 176 176 - ...oldState.polls.filter( 177 177 - (p) => 178 178 - !( 179 179 - p.poll_votes_on_entity.voter_token === 180 180 - oldState.voter_token && 181 181 - p.poll_votes_on_entity.poll_entity == props.entityID 182 182 - ), 183 183 - ), 184 184 - ...selectedPollOptions.map((option_entity) => ({ 185 185 - poll_votes_on_entity: { 186 186 - option_entity, 187 187 - entities: { set: "" }, 188 188 - poll_entity: props.entityID, 189 189 - voter_token: oldState.voter_token!, 190 190 - }, 191 191 - })), 192 192 - ], 193 193 - }; 194 194 - }); 195 195 - props.onSubmit(); 196 196 - }} 197 197 - disabled={ 198 198 - selectedPollOptions.length === 0 || 199 199 - (selectedPollOptions.length === currentVotes.length && 200 200 - selectedPollOptions.every((s) => currentVotes.includes(s))) 201 201 - } 202 202 - > 203 203 - Vote! 204 204 - </ButtonPrimary> 205 205 - </div> 206 206 - </> 207 207 - ); 208 208 - }; 209 209 - const PollVoteButton = (props: { 210 210 - entityID: string; 211 211 - selected: boolean; 212 212 - toggleSelected: () => void; 213 213 - }) => { 214 214 - let optionName = useEntity(props.entityID, "poll-option/name")?.data.value; 215 215 - if (!optionName) return null; 216 216 - if (props.selected) 217 217 - return ( 218 218 - <div className="flex gap-2 items-center"> 219 219 - <ButtonPrimary 220 220 - className={`pollOption grow max-w-full flex`} 221 221 - onClick={() => { 222 222 - props.toggleSelected(); 223 223 - }} 224 224 - > 225 225 - {optionName} 226 226 - </ButtonPrimary> 227 227 - </div> 228 228 - ); 229 229 - return ( 230 230 - <div className="flex gap-2 items-center"> 231 231 - <ButtonSecondary 232 232 - className={`pollOption grow max-w-full flex`} 233 233 - onClick={() => { 234 234 - props.toggleSelected(); 235 235 - }} 236 236 - > 237 237 - {optionName} 238 238 - </ButtonSecondary> 239 239 - </div> 240 240 - ); 241 241 - }; 242 242 - 243 243 - const PollResults = (props: { 244 244 - entityID: string; 245 245 - pollState: "editing" | "voting" | "results"; 246 246 - setPollState: (pollState: "editing" | "voting" | "results") => void; 247 247 - hasVoted: boolean; 248 248 - }) => { 249 249 - let { data } = usePollData(); 250 250 - let { permissions } = useEntitySetContext(); 251 251 - let pollOptions = useEntity(props.entityID, "poll/options"); 252 252 - let pollData = data?.pollVotes.find((p) => p.poll_entity === props.entityID); 253 253 - let votesByOptions = pollData?.votesByOption || {}; 254 254 - let highestVotes = Math.max(...Object.values(votesByOptions)); 255 255 - let winningOptionEntities = Object.entries(votesByOptions).reduce<string[]>( 256 256 - (winningEntities, [entity, votes]) => { 257 257 - if (votes === highestVotes) winningEntities.push(entity); 258 258 - return winningEntities; 259 259 - }, 260 260 - [], 261 261 - ); 262 262 - return ( 263 263 - <> 264 264 - {pollOptions.map((p) => ( 265 265 - <PollResult 266 266 - key={p.id} 267 267 - winner={winningOptionEntities.includes(p.data.value)} 268 268 - entityID={p.data.value} 269 269 - totalVotes={pollData?.unique_votes || 0} 270 270 - votes={pollData?.votesByOption[p.data.value] || 0} 271 271 - /> 272 272 - ))} 273 273 - <div className="flex gap-2"> 274 274 - {permissions.write && ( 275 275 - <button 276 276 - className="pollEditOptions w-fit flex gap-2 items-center justify-start text-sm text-accent-contrast" 277 277 - onClick={() => { 278 278 - props.setPollState("editing"); 279 279 - }} 280 280 - > 281 281 - Edit Options 282 282 - </button> 283 283 - )} 284 284 - 285 285 - {permissions.write && <Separator classname="h-6" />} 286 286 - <PollStateToggle 287 287 - setPollState={props.setPollState} 288 288 - pollState={props.pollState} 289 289 - hasVoted={props.hasVoted} 290 290 - /> 291 291 - </div> 292 292 - </> 293 293 - ); 294 294 - }; 295 295 - 296 296 - const PollResult = (props: { 297 297 - entityID: string; 298 298 - votes: number; 299 299 - totalVotes: number; 300 300 - winner: boolean; 301 301 - }) => { 302 302 - let optionName = useEntity(props.entityID, "poll-option/name")?.data.value; 303 303 - return ( 304 304 - <div 305 305 - className={`pollResult relative grow py-0.5 px-2 border-accent-contrast rounded-md overflow-hidden ${props.winner ? "font-bold border-2" : "border"}`} 306 306 - > 307 307 - <div 308 308 - style={{ 309 309 - WebkitTextStroke: `${props.winner ? "6px" : "6px"} ${theme.colors["bg-page"]}`, 310 310 - paintOrder: "stroke fill", 311 311 - }} 312 312 - className={`pollResultContent text-accent-contrast relative flex gap-2 justify-between z-10`} 313 313 - > 314 314 - <div className="grow max-w-full truncate">{optionName}</div> 315 315 - <div>{props.votes}</div> 316 316 - </div> 317 317 - <div 318 318 - className={`pollResultBG absolute bg-bg-page w-full top-0 bottom-0 left-0 right-0 flex flex-row z-0`} 319 319 - > 320 320 - <div 321 321 - className={`bg-accent-contrast rounded-[2px] m-0.5`} 322 322 - style={{ 323 323 - maskImage: "var(--hatchSVG)", 324 324 - maskRepeat: "repeat repeat", 325 325 - 326 326 - ...(props.votes === 0 327 327 - ? { width: "4px" } 328 328 - : { flexBasis: `${(props.votes / props.totalVotes) * 100}%` }), 329 329 - }} 330 330 - /> 331 331 - <div /> 332 332 - </div> 333 333 - </div> 334 334 - ); 335 335 - }; 336 336 - 337 337 - const EditPoll = (props: { 338 338 - votes: { option_entity: string }[]; 339 339 - totalVotes: number; 340 340 - entityID: string; 341 341 - close: () => void; 342 342 - }) => { 343 343 - let pollOptions = useEntity(props.entityID, "poll/options"); 344 344 - let { rep } = useReplicache(); 345 345 - let permission_set = useEntitySetContext(); 346 346 - let [localPollOptionNames, setLocalPollOptionNames] = useState<{ 347 347 - [k: string]: string; 348 348 - }>({}); 349 349 - return ( 350 350 - <> 351 351 - {props.totalVotes > 0 && ( 352 352 - <div className="text-sm italic text-tertiary"> 353 353 - You can&apos;t edit options people already voted for! 354 354 - </div> 355 355 - )} 356 356 - 357 357 - {pollOptions.length === 0 && ( 358 358 - <div className="text-center italic text-tertiary text-sm"> 359 359 - no options yet... 360 360 - </div> 361 361 - )} 362 362 - {pollOptions.map((p) => ( 363 363 - <EditPollOption 364 364 - key={p.id} 365 365 - entityID={p.data.value} 366 366 - pollEntity={props.entityID} 367 367 - disabled={!!props.votes.find((v) => v.option_entity === p.data.value)} 368 368 - localNameState={localPollOptionNames[p.data.value]} 369 369 - setLocalNameState={setLocalPollOptionNames} 370 370 - /> 371 371 - ))} 372 372 - 373 373 - <button 374 374 - className="pollAddOption w-fit flex gap-2 items-center justify-start text-sm text-accent-contrast" 375 375 - onClick={async () => { 376 376 - let pollOptionEntity = v7(); 377 377 - await rep?.mutate.addPollOption({ 378 378 - pollEntity: props.entityID, 379 379 - pollOptionEntity, 380 380 - pollOptionName: "", 381 381 - permission_set: permission_set.set, 382 382 - factID: v7(), 383 383 - }); 384 384 - 385 385 - focusElement( 386 386 - document.getElementById( 387 387 - elementId.block(props.entityID).pollInput(pollOptionEntity), 388 388 - ) as HTMLInputElement | null, 389 389 - ); 390 390 - }} 391 391 - > 392 392 - Add an Option 393 393 - </button> 394 394 - 395 395 - <hr className="border-border" /> 396 396 - <ButtonPrimary 397 397 - className="place-self-end" 398 398 - onClick={async () => { 399 399 - // remove any poll options that have no name 400 400 - // look through the localPollOptionNames object and remove any options that have no name 401 401 - let emptyOptions = Object.entries(localPollOptionNames).filter( 402 402 - ([optionEntity, optionName]) => optionName === "", 403 403 - ); 404 404 - await Promise.all( 405 405 - emptyOptions.map( 406 406 - async ([entity]) => 407 407 - await rep?.mutate.removePollOption({ 408 408 - optionEntity: entity, 409 409 - }), 410 410 - ), 411 411 - ); 412 412 - 413 413 - await rep?.mutate.assertFact( 414 414 - Object.entries(localPollOptionNames) 415 415 - .filter(([, name]) => !!name) 416 416 - .map(([entity, name]) => ({ 417 417 - entity, 418 418 - attribute: "poll-option/name", 419 419 - data: { type: "string", value: name }, 420 420 - })), 421 421 - ); 422 422 - props.close(); 423 423 - }} 424 424 - > 425 425 - Save <CheckTiny /> 426 426 - </ButtonPrimary> 427 427 - </> 428 428 - ); 429 429 - }; 430 430 - 431 431 - const EditPollOption = (props: { 432 432 - entityID: string; 433 433 - pollEntity: string; 434 434 - localNameState: string | undefined; 435 435 - setLocalNameState: ( 436 436 - s: (s: { [k: string]: string }) => { [k: string]: string }, 437 437 - ) => void; 438 438 - disabled: boolean; 439 439 - }) => { 440 440 - let { rep } = useReplicache(); 441 441 - let optionName = useEntity(props.entityID, "poll-option/name")?.data.value; 442 442 - useEffect(() => { 443 443 - props.setLocalNameState((s) => ({ 444 444 - ...s, 445 445 - [props.entityID]: optionName || "", 446 446 - })); 447 447 - }, [optionName, props.setLocalNameState, props.entityID]); 448 448 - 449 449 - return ( 450 450 - <div className="flex gap-2 items-center"> 451 451 - <Input 452 452 - id={elementId.block(props.pollEntity).pollInput(props.entityID)} 453 453 - type="text" 454 454 - className="pollOptionInput w-full input-with-border" 455 455 - placeholder="Option here..." 456 456 - disabled={props.disabled} 457 457 - value={ 458 458 - props.localNameState === undefined ? optionName : props.localNameState 459 459 - } 460 460 - onChange={(e) => { 461 461 - props.setLocalNameState((s) => ({ 462 462 - ...s, 463 463 - [props.entityID]: e.target.value, 464 464 - })); 465 465 - }} 466 466 - onKeyDown={(e) => { 467 467 - if (e.key === "Backspace" && !e.currentTarget.value) { 468 468 - e.preventDefault(); 469 469 - rep?.mutate.removePollOption({ optionEntity: props.entityID }); 470 470 - } 471 471 - }} 472 472 - /> 473 473 - 474 474 - <button 475 475 - tabIndex={-1} 476 476 - disabled={props.disabled} 477 477 - className="text-accent-contrast disabled:text-border" 478 478 - onMouseDown={async () => { 479 479 - await rep?.mutate.removePollOption({ optionEntity: props.entityID }); 480 480 - }} 481 481 - > 482 482 - <CloseTiny /> 483 483 - </button> 484 484 - </div> 485 485 - ); 486 486 - }; 487 487 - 488 488 - const PollStateToggle = (props: { 489 489 - setPollState: (pollState: "editing" | "voting" | "results") => void; 490 490 - hasVoted: boolean; 491 491 - pollState: "editing" | "voting" | "results"; 492 492 - }) => { 493 493 - return ( 494 494 - <button 495 495 - className="text-sm text-accent-contrast sm:hover:underline" 496 496 - onClick={() => { 497 497 - props.setPollState(props.pollState === "voting" ? "results" : "voting"); 498 498 - }} 499 499 - > 500 500 - {props.pollState === "voting" 501 501 - ? "See Results" 502 502 - : props.hasVoted 503 503 - ? "Change Vote" 504 504 - : "Back to Poll"} 505 505 - </button> 506 506 - ); 507 507 - };

+2 -1

components/Blocks/PublicationPollBlock.tsx

··· 1 1 import { useUIState } from "src/useUIState"; 2 2 import { BlockProps } from "./Block"; 3 3 import { useMemo } from "react"; 4 4 - import { focusElement, AsyncValueInput } from "components/Input"; 4 4 + import { AsyncValueInput } from "components/Input"; 5 5 + import { focusElement } from "src/utils/focusElement"; 5 6 import { useEntitySetContext } from "components/EntitySetProvider"; 6 7 import { useEntity, useReplicache } from "src/replicache"; 7 8 import { v7 } from "uuid";

+1 -39

components/Blocks/TextBlock/RenderYJSFragment.tsx

··· 5 5 import * as base64 from "base64-js"; 6 6 import { didToBlueskyUrl } from "src/utils/mentionUtils"; 7 7 import { AtMentionLink } from "components/AtMentionLink"; 8 8 + import { Delta } from "src/utils/yjsFragmentToString"; 8 9 9 10 type BlockElements = "h1" | "h2" | "h3" | null | "blockquote" | "p"; 10 11 export function RenderYJSFragment({ ··· 131 132 } 132 133 }; 133 134 134 134 - export type Delta = { 135 135 - insert: string; 136 136 - attributes?: { 137 137 - strong?: {}; 138 138 - code?: {}; 139 139 - em?: {}; 140 140 - underline?: {}; 141 141 - strikethrough?: {}; 142 142 - highlight?: { color: string }; 143 143 - link?: { href: string }; 144 144 - }; 145 145 - }; 146 146 - 147 135 function attributesToStyle(d: Delta) { 148 136 let props = { 149 137 style: {}, ··· 174 162 return props; 175 163 } 176 164 177 177 - export function YJSFragmentToString( 178 178 - node: XmlElement | XmlText | XmlHook, 179 179 - ): string { 180 180 - if (node.constructor === XmlElement) { 181 181 - // Handle hard_break nodes specially 182 182 - if (node.nodeName === "hard_break") { 183 183 - return "\n"; 184 184 - } 185 185 - // Handle inline mention nodes 186 186 - if (node.nodeName === "didMention" || node.nodeName === "atMention") { 187 187 - return node.getAttribute("text") || ""; 188 188 - } 189 189 - return node 190 190 - .toArray() 191 191 - .map((f) => YJSFragmentToString(f)) 192 192 - .join(""); 193 193 - } 194 194 - if (node.constructor === XmlText) { 195 195 - return (node.toDelta() as Delta[]) 196 196 - .map((d) => { 197 197 - return d.insert; 198 198 - }) 199 199 - .join(""); 200 200 - } 201 201 - return ""; 202 202 - }

+1 -1

components/Blocks/TextBlock/keymap.ts

··· 17 17 import { schema } from "./schema"; 18 18 import { useUIState } from "src/useUIState"; 19 19 import { setEditorState, useEditorStates } from "src/state/useEditorState"; 20 20 - import { focusPage } from "components/Pages"; 20 20 + import { focusPage } from "src/utils/focusPage"; 21 21 import { v7 } from "uuid"; 22 22 import { scanIndex } from "src/replicache/utils"; 23 23 import { indent, outdent } from "src/utils/list-operations";

+1 -1

components/Blocks/useBlockKeyboardHandlers.ts

··· 12 12 import { ReplicacheMutators, useEntity, useReplicache } from "src/replicache"; 13 13 import { useEntitySetContext } from "components/EntitySetProvider"; 14 14 import { Replicache } from "replicache"; 15 15 - import { deleteBlock } from "./DeleteBlock"; 15 15 + import { deleteBlock } from "src/utils/deleteBlock"; 16 16 import { entities } from "drizzle/schema"; 17 17 import { scanIndex } from "src/replicache/utils"; 18 18

+1 -1

components/Blocks/useBlockMouseHandlers.ts

··· 1 1 - import { useSelectingMouse } from "components/SelectionManager"; 1 1 + import { useSelectingMouse } from "components/SelectionManager/selectionState"; 2 2 import { MouseEvent, useCallback, useRef } from "react"; 3 3 import { useUIState } from "src/useUIState"; 4 4 import { Block } from "./Block";

+1 -36

components/Input.tsx

··· 2 2 import { useEffect, useRef, useState, type JSX } from "react"; 3 3 import { onMouseDown } from "src/utils/iosInputMouseDown"; 4 4 import { isIOS } from "src/utils/isDevice"; 5 5 + import { focusElement } from "src/utils/focusElement"; 5 6 6 7 export const Input = ( 7 8 props: { ··· 56 57 }} 57 58 /> 58 59 ); 59 59 - }; 60 60 - 61 61 - export const focusElement = ( 62 62 - el?: HTMLInputElement | HTMLTextAreaElement | null, 63 63 - ) => { 64 64 - if (!isIOS()) { 65 65 - el?.focus(); 66 66 - return; 67 67 - } 68 68 - 69 69 - let fakeInput = document.createElement("input"); 70 70 - fakeInput.setAttribute("type", "text"); 71 71 - fakeInput.style.position = "fixed"; 72 72 - fakeInput.style.height = "0px"; 73 73 - fakeInput.style.width = "0px"; 74 74 - fakeInput.style.fontSize = "16px"; // disable auto zoom 75 75 - document.body.appendChild(fakeInput); 76 76 - fakeInput.focus(); 77 77 - setTimeout(() => { 78 78 - if (!el) return; 79 79 - el.style.transform = "translateY(-2000px)"; 80 80 - el?.focus(); 81 81 - fakeInput.remove(); 82 82 - el.value = " "; 83 83 - el.setSelectionRange(1, 1); 84 84 - requestAnimationFrame(() => { 85 85 - if (el) { 86 86 - el.style.transform = ""; 87 87 - } 88 88 - }); 89 89 - setTimeout(() => { 90 90 - if (!el) return; 91 91 - el.value = ""; 92 92 - el.setSelectionRange(0, 0); 93 93 - }, 50); 94 94 - }, 20); 95 60 }; 96 61 97 62 export const InputWithLabel = (

+1 -1

components/Layout.tsx

··· 3 3 import { theme } from "tailwind.config"; 4 4 import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider"; 5 5 import { PopoverArrow } from "./Icons/PopoverArrow"; 6 6 - import { PopoverOpenContext } from "./Popover"; 6 6 + import { PopoverOpenContext } from "./Popover/PopoverContext"; 7 7 import { useState } from "react"; 8 8 9 9 export const Separator = (props: { classname?: string }) => {

+1 -1

components/Pages/Page.tsx

··· 12 12 import { Blocks } from "components/Blocks"; 13 13 import { PublicationMetadata } from "./PublicationMetadata"; 14 14 import { useCardBorderHidden } from "./useCardBorderHidden"; 15 15 - import { focusPage } from "."; 15 15 + import { focusPage } from "src/utils/focusPage"; 16 16 import { PageOptions } from "./PageOptions"; 17 17 import { CardThemeProvider } from "components/ThemeManager/ThemeProvider"; 18 18 import { useDrawerOpen } from "app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer";

+2 -75

components/Pages/index.tsx

··· 4 4 import { useUIState } from "src/useUIState"; 5 5 import { useSearchParams } from "next/navigation"; 6 6 7 7 - import { focusBlock } from "src/utils/focusBlock"; 8 8 - import { elementId } from "src/utils/elementId"; 7 7 + import { useEntity } from "src/replicache"; 9 8 10 10 - import { Replicache } from "replicache"; 11 11 - import { Fact, ReplicacheMutators, useEntity } from "src/replicache"; 12 12 - 13 13 - import { scanIndex } from "src/replicache/utils"; 14 14 - import { CardThemeProvider } from "../ThemeManager/ThemeProvider"; 15 15 - import { scrollIntoViewIfNeeded } from "src/utils/scrollIntoViewIfNeeded"; 16 9 import { useCardBorderHidden } from "./useCardBorderHidden"; 17 10 import { BookendSpacer, SandwichSpacer } from "components/LeafletLayout"; 18 11 import { LeafletSidebar } from "app/[leaflet_id]/Sidebar"; ··· 62 55 ); 63 56 } 64 57 65 65 - export async function focusPage( 66 66 - pageID: string, 67 67 - rep: Replicache<ReplicacheMutators>, 68 68 - focusFirstBlock?: "focusFirstBlock", 69 69 - ) { 70 70 - // if this page is already focused, 71 71 - let focusedBlock = useUIState.getState().focusedEntity; 72 72 - // else set this page as focused 73 73 - useUIState.setState(() => ({ 74 74 - focusedEntity: { 75 75 - entityType: "page", 76 76 - entityID: pageID, 77 77 - }, 78 78 - })); 79 79 - 80 80 - setTimeout(async () => { 81 81 - //scroll to page 82 82 - 83 83 - scrollIntoViewIfNeeded( 84 84 - document.getElementById(elementId.page(pageID).container), 85 85 - false, 86 86 - "smooth", 87 87 - ); 88 88 - 89 89 - // if we asked that the function focus the first block, focus the first block 90 90 - if (focusFirstBlock === "focusFirstBlock") { 91 91 - let firstBlock = await rep.query(async (tx) => { 92 92 - let type = await scanIndex(tx).eav(pageID, "page/type"); 93 93 - let blocks = await scanIndex(tx).eav( 94 94 - pageID, 95 95 - type[0]?.data.value === "canvas" ? "canvas/block" : "card/block", 96 96 - ); 97 97 - 98 98 - let firstBlock = blocks[0]; 99 99 - 100 100 - if (!firstBlock) { 101 101 - return null; 102 102 - } 103 103 - 104 104 - let blockType = ( 105 105 - await tx 106 106 - .scan< 107 107 - Fact<"block/type"> 108 108 - >({ indexName: "eav", prefix: `${firstBlock.data.value}-block/type` }) 109 109 - .toArray() 110 110 - )[0]; 111 111 - 112 112 - if (!blockType) return null; 113 113 - 114 114 - return { 115 115 - value: firstBlock.data.value, 116 116 - type: blockType.data.value, 117 117 - parent: firstBlock.entity, 118 118 - position: firstBlock.data.position, 119 119 - }; 120 120 - }); 121 121 - 122 122 - if (firstBlock) { 123 123 - setTimeout(() => { 124 124 - focusBlock(firstBlock, { type: "start" }); 125 125 - }, 500); 126 126 - } 127 127 - } 128 128 - }, 50); 129 129 - } 130 130 - 131 131 - export const blurPage = () => { 58 58 + const blurPage = () => { 132 59 useUIState.setState(() => ({ 133 60 focusedEntity: null, 134 61 selectedBlocks: [],

+3

components/Popover/PopoverContext.ts

··· 1 1 + import { createContext } from "react"; 2 2 + 3 3 + export const PopoverOpenContext = createContext(false);

+87

components/Popover/index.tsx

··· 1 1 + "use client"; 2 2 + import * as RadixPopover from "@radix-ui/react-popover"; 3 3 + import { theme } from "tailwind.config"; 4 4 + import { NestedCardThemeProvider } from "../ThemeManager/ThemeProvider"; 5 5 + import { useEffect, useState } from "react"; 6 6 + import { PopoverArrow } from "../Icons/PopoverArrow"; 7 7 + import { PopoverOpenContext } from "./PopoverContext"; 8 8 + export const Popover = (props: { 9 9 + trigger: React.ReactNode; 10 10 + disabled?: boolean; 11 11 + children: React.ReactNode; 12 12 + align?: "start" | "end" | "center"; 13 13 + side?: "top" | "bottom" | "left" | "right"; 14 14 + sideOffset?: number; 15 15 + background?: string; 16 16 + border?: string; 17 17 + className?: string; 18 18 + open?: boolean; 19 19 + onOpenChange?: (open: boolean) => void; 20 20 + onOpenAutoFocus?: (e: Event) => void; 21 21 + asChild?: boolean; 22 22 + arrowFill?: string; 23 23 + noArrow?: boolean; 24 24 + }) => { 25 25 + let [open, setOpen] = useState(props.open || false); 26 26 + useEffect(() => { 27 27 + if (props.open !== undefined) setOpen(props.open); 28 28 + }, [props.open]); 29 29 + return ( 30 30 + <RadixPopover.Root 31 31 + open={props.open} 32 32 + onOpenChange={(o) => { 33 33 + setOpen(o); 34 34 + props.onOpenChange?.(o); 35 35 + }} 36 36 + > 37 37 + <PopoverOpenContext value={open}> 38 38 + <RadixPopover.Trigger disabled={props.disabled} asChild={props.asChild}> 39 39 + {props.trigger} 40 40 + </RadixPopover.Trigger> 41 41 + <RadixPopover.Portal> 42 42 + <NestedCardThemeProvider> 43 43 + <RadixPopover.Content 44 44 + className={` 45 45 + z-20 bg-bg-page 46 46 + px-3 py-2 47 47 + max-w-(--radix-popover-content-available-width) 48 48 + max-h-(--radix-popover-content-available-height) 49 49 + border border-border rounded-md shadow-md 50 50 + overflow-y-scroll 51 51 + ${props.className} 52 52 + `} 53 53 + side={props.side} 54 54 + align={props.align ? props.align : "center"} 55 55 + sideOffset={props.sideOffset ? props.sideOffset : 4} 56 56 + collisionPadding={16} 57 57 + onOpenAutoFocus={props.onOpenAutoFocus} 58 58 + > 59 59 + {props.children} 60 60 + {!props.noArrow && ( 61 61 + <RadixPopover.Arrow 62 62 + asChild 63 63 + width={16} 64 64 + height={8} 65 65 + viewBox="0 0 16 8" 66 66 + > 67 67 + <PopoverArrow 68 68 + arrowFill={ 69 69 + props.arrowFill 70 70 + ? props.arrowFill 71 71 + : props.background 72 72 + ? props.background 73 73 + : theme.colors["bg-page"] 74 74 + } 75 75 + arrowStroke={ 76 76 + props.border ? props.border : theme.colors["border"] 77 77 + } 78 78 + /> 79 79 + </RadixPopover.Arrow> 80 80 + )} 81 81 + </RadixPopover.Content> 82 82 + </NestedCardThemeProvider> 83 83 + </RadixPopover.Portal> 84 84 + </PopoverOpenContext> 85 85 + </RadixPopover.Root> 86 86 + ); 87 87 + };

-88

components/Popover.tsx

··· 1 1 - "use client"; 2 2 - import * as RadixPopover from "@radix-ui/react-popover"; 3 3 - import { theme } from "tailwind.config"; 4 4 - import { NestedCardThemeProvider } from "./ThemeManager/ThemeProvider"; 5 5 - import { createContext, useEffect, useState } from "react"; 6 6 - import { PopoverArrow } from "./Icons/PopoverArrow"; 7 7 - 8 8 - export const PopoverOpenContext = createContext(false); 9 9 - export const Popover = (props: { 10 10 - trigger: React.ReactNode; 11 11 - disabled?: boolean; 12 12 - children: React.ReactNode; 13 13 - align?: "start" | "end" | "center"; 14 14 - side?: "top" | "bottom" | "left" | "right"; 15 15 - sideOffset?: number; 16 16 - background?: string; 17 17 - border?: string; 18 18 - className?: string; 19 19 - open?: boolean; 20 20 - onOpenChange?: (open: boolean) => void; 21 21 - onOpenAutoFocus?: (e: Event) => void; 22 22 - asChild?: boolean; 23 23 - arrowFill?: string; 24 24 - noArrow?: boolean; 25 25 - }) => { 26 26 - let [open, setOpen] = useState(props.open || false); 27 27 - useEffect(() => { 28 28 - if (props.open !== undefined) setOpen(props.open); 29 29 - }, [props.open]); 30 30 - return ( 31 31 - <RadixPopover.Root 32 32 - open={props.open} 33 33 - onOpenChange={(o) => { 34 34 - setOpen(o); 35 35 - props.onOpenChange?.(o); 36 36 - }} 37 37 - > 38 38 - <PopoverOpenContext value={open}> 39 39 - <RadixPopover.Trigger disabled={props.disabled} asChild={props.asChild}> 40 40 - {props.trigger} 41 41 - </RadixPopover.Trigger> 42 42 - <RadixPopover.Portal> 43 43 - <NestedCardThemeProvider> 44 44 - <RadixPopover.Content 45 45 - className={` 46 46 - z-20 bg-bg-page 47 47 - px-3 py-2 48 48 - max-w-(--radix-popover-content-available-width) 49 49 - max-h-(--radix-popover-content-available-height) 50 50 - border border-border rounded-md shadow-md 51 51 - overflow-y-scroll 52 52 - ${props.className} 53 53 - `} 54 54 - side={props.side} 55 55 - align={props.align ? props.align : "center"} 56 56 - sideOffset={props.sideOffset ? props.sideOffset : 4} 57 57 - collisionPadding={16} 58 58 - onOpenAutoFocus={props.onOpenAutoFocus} 59 59 - > 60 60 - {props.children} 61 61 - {!props.noArrow && ( 62 62 - <RadixPopover.Arrow 63 63 - asChild 64 64 - width={16} 65 65 - height={8} 66 66 - viewBox="0 0 16 8" 67 67 - > 68 68 - <PopoverArrow 69 69 - arrowFill={ 70 70 - props.arrowFill 71 71 - ? props.arrowFill 72 72 - : props.background 73 73 - ? props.background 74 74 - : theme.colors["bg-page"] 75 75 - } 76 76 - arrowStroke={ 77 77 - props.border ? props.border : theme.colors["border"] 78 78 - } 79 79 - /> 80 80 - </RadixPopover.Arrow> 81 81 - )} 82 82 - </RadixPopover.Content> 83 83 - </NestedCardThemeProvider> 84 84 - </RadixPopover.Portal> 85 85 - </PopoverOpenContext> 86 86 - </RadixPopover.Root> 87 87 - ); 88 88 - };

+717

components/SelectionManager/index.tsx

··· 1 1 + "use client"; 2 2 + import { useEffect, useRef, useState } from "react"; 3 3 + import { useReplicache } from "src/replicache"; 4 4 + import { useUIState } from "src/useUIState"; 5 5 + import { scanIndex } from "src/replicache/utils"; 6 6 + import { focusBlock } from "src/utils/focusBlock"; 7 7 + import { useEditorStates } from "src/state/useEditorState"; 8 8 + import { useEntitySetContext } from "../EntitySetProvider"; 9 9 + import { getBlocksWithType } from "src/hooks/queries/useBlocks"; 10 10 + import { indent, outdent, outdentFull } from "src/utils/list-operations"; 11 11 + import { addShortcut, Shortcut } from "src/shortcuts"; 12 12 + import { elementId } from "src/utils/elementId"; 13 13 + import { scrollIntoViewIfNeeded } from "src/utils/scrollIntoViewIfNeeded"; 14 14 + import { copySelection } from "src/utils/copySelection"; 15 15 + import { useIsMobile } from "src/hooks/isMobile"; 16 16 + import { deleteBlock } from "src/utils/deleteBlock"; 17 17 + import { schema } from "../Blocks/TextBlock/schema"; 18 18 + import { MarkType } from "prosemirror-model"; 19 19 + import { useSelectingMouse, getSortedSelection } from "./selectionState"; 20 20 + 21 21 + //How should I model selection? As ranges w/ a start and end? Store *blocks* so that I can just construct ranges? 22 22 + // How does this relate to *when dragging* ? 23 23 + 24 24 + export function SelectionManager() { 25 25 + let moreThanOneSelected = useUIState((s) => s.selectedBlocks.length > 1); 26 26 + let entity_set = useEntitySetContext(); 27 27 + let { rep, undoManager } = useReplicache(); 28 28 + let isMobile = useIsMobile(); 29 29 + useEffect(() => { 30 30 + if (!entity_set.permissions.write || !rep) return; 31 31 + const getSortedSelectionBound = getSortedSelection.bind(null, rep); 32 32 + let shortcuts: Shortcut[] = [ 33 33 + { 34 34 + metaKey: true, 35 35 + key: "ArrowUp", 36 36 + handler: async () => { 37 37 + let [firstBlock] = 38 38 + (await rep?.query((tx) => 39 39 + getBlocksWithType( 40 40 + tx, 41 41 + useUIState.getState().selectedBlocks[0].parent, 42 42 + ), 43 43 + )) || []; 44 44 + if (firstBlock) focusBlock(firstBlock, { type: "start" }); 45 45 + }, 46 46 + }, 47 47 + { 48 48 + metaKey: true, 49 49 + key: "ArrowDown", 50 50 + handler: async () => { 51 51 + let blocks = 52 52 + (await rep?.query((tx) => 53 53 + getBlocksWithType( 54 54 + tx, 55 55 + useUIState.getState().selectedBlocks[0].parent, 56 56 + ), 57 57 + )) || []; 58 58 + let folded = useUIState.getState().foldedBlocks; 59 59 + blocks = blocks.filter( 60 60 + (f) => 61 61 + !f.listData || 62 62 + !f.listData.path.find( 63 63 + (path) => 64 64 + folded.includes(path.entity) && f.value !== path.entity, 65 65 + ), 66 66 + ); 67 67 + let lastBlock = blocks[blocks.length - 1]; 68 68 + if (lastBlock) focusBlock(lastBlock, { type: "end" }); 69 69 + }, 70 70 + }, 71 71 + { 72 72 + metaKey: true, 73 73 + altKey: true, 74 74 + key: ["l", "¬"], 75 75 + handler: async () => { 76 76 + let [sortedBlocks, siblings] = await getSortedSelectionBound(); 77 77 + for (let block of sortedBlocks) { 78 78 + if (!block.listData) { 79 79 + await rep?.mutate.assertFact({ 80 80 + entity: block.value, 81 81 + attribute: "block/is-list", 82 82 + data: { type: "boolean", value: true }, 83 83 + }); 84 84 + } else { 85 85 + outdentFull(block, rep); 86 86 + } 87 87 + } 88 88 + }, 89 89 + }, 90 90 + { 91 91 + metaKey: true, 92 92 + shift: true, 93 93 + key: ["ArrowDown", "J"], 94 94 + handler: async () => { 95 95 + let [sortedBlocks, siblings] = await getSortedSelectionBound(); 96 96 + let block = sortedBlocks[0]; 97 97 + let nextBlock = siblings 98 98 + .slice(siblings.findIndex((s) => s.value === block.value) + 1) 99 99 + .find( 100 100 + (f) => 101 101 + f.listData && 102 102 + block.listData && 103 103 + !f.listData.path.find((f) => f.entity === block.value), 104 104 + ); 105 105 + if ( 106 106 + nextBlock?.listData && 107 107 + block.listData && 108 108 + nextBlock.listData.depth === block.listData.depth - 1 109 109 + ) { 110 110 + if (useUIState.getState().foldedBlocks.includes(nextBlock.value)) 111 111 + useUIState.getState().toggleFold(nextBlock.value); 112 112 + await rep?.mutate.moveBlock({ 113 113 + block: block.value, 114 114 + oldParent: block.listData?.parent, 115 115 + newParent: nextBlock.value, 116 116 + position: { type: "first" }, 117 117 + }); 118 118 + } else { 119 119 + await rep?.mutate.moveBlockDown({ 120 120 + entityID: block.value, 121 121 + parent: block.listData?.parent || block.parent, 122 122 + }); 123 123 + } 124 124 + }, 125 125 + }, 126 126 + { 127 127 + metaKey: true, 128 128 + shift: true, 129 129 + key: ["ArrowUp", "K"], 130 130 + handler: async () => { 131 131 + let [sortedBlocks, siblings] = await getSortedSelectionBound(); 132 132 + let block = sortedBlocks[0]; 133 133 + let previousBlock = 134 134 + siblings?.[siblings.findIndex((s) => s.value === block.value) - 1]; 135 135 + if (previousBlock.value === block.listData?.parent) { 136 136 + previousBlock = 137 137 + siblings?.[ 138 138 + siblings.findIndex((s) => s.value === block.value) - 2 139 139 + ]; 140 140 + } 141 141 + 142 142 + if ( 143 143 + previousBlock?.listData && 144 144 + block.listData && 145 145 + block.listData.depth > 1 && 146 146 + !previousBlock.listData.path.find( 147 147 + (f) => f.entity === block.listData?.parent, 148 148 + ) 149 149 + ) { 150 150 + let depth = block.listData.depth; 151 151 + let newParent = previousBlock.listData.path.find( 152 152 + (f) => f.depth === depth - 1, 153 153 + ); 154 154 + if (!newParent) return; 155 155 + if (useUIState.getState().foldedBlocks.includes(newParent.entity)) 156 156 + useUIState.getState().toggleFold(newParent.entity); 157 157 + rep?.mutate.moveBlock({ 158 158 + block: block.value, 159 159 + oldParent: block.listData?.parent, 160 160 + newParent: newParent.entity, 161 161 + position: { type: "end" }, 162 162 + }); 163 163 + } else { 164 164 + rep?.mutate.moveBlockUp({ 165 165 + entityID: block.value, 166 166 + parent: block.listData?.parent || block.parent, 167 167 + }); 168 168 + } 169 169 + }, 170 170 + }, 171 171 + 172 172 + { 173 173 + metaKey: true, 174 174 + shift: true, 175 175 + key: "Enter", 176 176 + handler: async () => { 177 177 + let [sortedBlocks, siblings] = await getSortedSelectionBound(); 178 178 + if (!sortedBlocks[0].listData) return; 179 179 + useUIState.getState().toggleFold(sortedBlocks[0].value); 180 180 + }, 181 181 + }, 182 182 + ]; 183 183 + if (moreThanOneSelected) 184 184 + shortcuts = shortcuts.concat([ 185 185 + { 186 186 + metaKey: true, 187 187 + key: "u", 188 188 + handler: async () => { 189 189 + let [sortedBlocks] = await getSortedSelectionBound(); 190 190 + toggleMarkInBlocks( 191 191 + sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 192 192 + schema.marks.underline, 193 193 + ); 194 194 + }, 195 195 + }, 196 196 + { 197 197 + metaKey: true, 198 198 + key: "i", 199 199 + handler: async () => { 200 200 + let [sortedBlocks] = await getSortedSelectionBound(); 201 201 + toggleMarkInBlocks( 202 202 + sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 203 203 + schema.marks.em, 204 204 + ); 205 205 + }, 206 206 + }, 207 207 + { 208 208 + metaKey: true, 209 209 + key: "b", 210 210 + handler: async () => { 211 211 + let [sortedBlocks] = await getSortedSelectionBound(); 212 212 + toggleMarkInBlocks( 213 213 + sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 214 214 + schema.marks.strong, 215 215 + ); 216 216 + }, 217 217 + }, 218 218 + { 219 219 + metaAndCtrl: true, 220 220 + key: "h", 221 221 + handler: async () => { 222 222 + let [sortedBlocks] = await getSortedSelectionBound(); 223 223 + toggleMarkInBlocks( 224 224 + sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 225 225 + schema.marks.highlight, 226 226 + { 227 227 + color: useUIState.getState().lastUsedHighlight, 228 228 + }, 229 229 + ); 230 230 + }, 231 231 + }, 232 232 + { 233 233 + metaAndCtrl: true, 234 234 + key: "x", 235 235 + handler: async () => { 236 236 + let [sortedBlocks] = await getSortedSelectionBound(); 237 237 + toggleMarkInBlocks( 238 238 + sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 239 239 + schema.marks.strikethrough, 240 240 + ); 241 241 + }, 242 242 + }, 243 243 + ]); 244 244 + let removeListener = addShortcut( 245 245 + shortcuts.map((shortcut) => ({ 246 246 + ...shortcut, 247 247 + handler: () => undoManager.withUndoGroup(() => shortcut.handler()), 248 248 + })), 249 249 + ); 250 250 + let listener = async (e: KeyboardEvent) => 251 251 + undoManager.withUndoGroup(async () => { 252 252 + //used here and in cut 253 253 + const deleteBlocks = async () => { 254 254 + if (!entity_set.permissions.write) return; 255 255 + if (moreThanOneSelected) { 256 256 + e.preventDefault(); 257 257 + let [sortedBlocks, siblings] = await getSortedSelectionBound(); 258 258 + let selectedBlocks = useUIState.getState().selectedBlocks; 259 259 + let firstBlock = sortedBlocks[0]; 260 260 + 261 261 + await rep?.mutate.removeBlock( 262 262 + selectedBlocks.map((block) => ({ blockEntity: block.value })), 263 263 + ); 264 264 + useUIState.getState().closePage(selectedBlocks.map((b) => b.value)); 265 265 + 266 266 + let nextBlock = 267 267 + siblings?.[ 268 268 + siblings.findIndex((s) => s.value === firstBlock.value) - 1 269 269 + ]; 270 270 + if (nextBlock) { 271 271 + useUIState.getState().setSelectedBlock({ 272 272 + value: nextBlock.value, 273 273 + parent: nextBlock.parent, 274 274 + }); 275 275 + let type = await rep?.query((tx) => 276 276 + scanIndex(tx).eav(nextBlock.value, "block/type"), 277 277 + ); 278 278 + if (!type?.[0]) return; 279 279 + if ( 280 280 + type[0]?.data.value === "text" || 281 281 + type[0]?.data.value === "heading" 282 282 + ) 283 283 + focusBlock( 284 284 + { 285 285 + value: nextBlock.value, 286 286 + type: "text", 287 287 + parent: nextBlock.parent, 288 288 + }, 289 289 + { type: "end" }, 290 290 + ); 291 291 + } 292 292 + } 293 293 + }; 294 294 + if (e.key === "Backspace" || e.key === "Delete") { 295 295 + deleteBlocks(); 296 296 + } 297 297 + if (e.key === "ArrowUp") { 298 298 + let [sortedBlocks, siblings] = await getSortedSelectionBound(); 299 299 + let focusedBlock = useUIState.getState().focusedEntity; 300 300 + if (!e.shiftKey && !e.ctrlKey) { 301 301 + if (e.defaultPrevented) return; 302 302 + if (sortedBlocks.length === 1) return; 303 303 + let firstBlock = sortedBlocks[0]; 304 304 + if (!firstBlock) return; 305 305 + let type = await rep?.query((tx) => 306 306 + scanIndex(tx).eav(firstBlock.value, "block/type"), 307 307 + ); 308 308 + if (!type?.[0]) return; 309 309 + useUIState.getState().setSelectedBlock(firstBlock); 310 310 + focusBlock( 311 311 + { ...firstBlock, type: type[0].data.value }, 312 312 + { type: "start" }, 313 313 + ); 314 314 + } else { 315 315 + if (e.defaultPrevented) return; 316 316 + if ( 317 317 + sortedBlocks.length <= 1 || 318 318 + !focusedBlock || 319 319 + focusedBlock.entityType === "page" 320 320 + ) 321 321 + return; 322 322 + let b = focusedBlock; 323 323 + let focusedBlockIndex = sortedBlocks.findIndex( 324 324 + (s) => s.value == b.entityID, 325 325 + ); 326 326 + if (focusedBlockIndex === 0) { 327 327 + let index = siblings.findIndex((s) => s.value === b.entityID); 328 328 + let nextSelectedBlock = siblings[index - 1]; 329 329 + if (!nextSelectedBlock) return; 330 330 + 331 331 + scrollIntoViewIfNeeded( 332 332 + document.getElementById( 333 333 + elementId.block(nextSelectedBlock.value).container, 334 334 + ), 335 335 + false, 336 336 + ); 337 337 + useUIState.getState().addBlockToSelection({ 338 338 + ...nextSelectedBlock, 339 339 + }); 340 340 + useUIState.getState().setFocusedBlock({ 341 341 + entityType: "block", 342 342 + parent: nextSelectedBlock.parent, 343 343 + entityID: nextSelectedBlock.value, 344 344 + }); 345 345 + } else { 346 346 + let nextBlock = sortedBlocks[sortedBlocks.length - 2]; 347 347 + useUIState.getState().setFocusedBlock({ 348 348 + entityType: "block", 349 349 + parent: b.parent, 350 350 + entityID: nextBlock.value, 351 351 + }); 352 352 + scrollIntoViewIfNeeded( 353 353 + document.getElementById( 354 354 + elementId.block(nextBlock.value).container, 355 355 + ), 356 356 + false, 357 357 + ); 358 358 + if (sortedBlocks.length === 2) { 359 359 + useEditorStates 360 360 + .getState() 361 361 + .editorStates[nextBlock.value]?.view?.focus(); 362 362 + } 363 363 + useUIState 364 364 + .getState() 365 365 + .removeBlockFromSelection(sortedBlocks[focusedBlockIndex]); 366 366 + } 367 367 + } 368 368 + } 369 369 + if (e.key === "ArrowLeft") { 370 370 + let [sortedSelection, siblings] = await getSortedSelectionBound(); 371 371 + if (sortedSelection.length === 1) return; 372 372 + let firstBlock = sortedSelection[0]; 373 373 + if (!firstBlock) return; 374 374 + let type = await rep?.query((tx) => 375 375 + scanIndex(tx).eav(firstBlock.value, "block/type"), 376 376 + ); 377 377 + if (!type?.[0]) return; 378 378 + useUIState.getState().setSelectedBlock(firstBlock); 379 379 + focusBlock( 380 380 + { ...firstBlock, type: type[0].data.value }, 381 381 + { type: "start" }, 382 382 + ); 383 383 + } 384 384 + if (e.key === "ArrowRight") { 385 385 + let [sortedSelection, siblings] = await getSortedSelectionBound(); 386 386 + if (sortedSelection.length === 1) return; 387 387 + let lastBlock = sortedSelection[sortedSelection.length - 1]; 388 388 + if (!lastBlock) return; 389 389 + let type = await rep?.query((tx) => 390 390 + scanIndex(tx).eav(lastBlock.value, "block/type"), 391 391 + ); 392 392 + if (!type?.[0]) return; 393 393 + useUIState.getState().setSelectedBlock(lastBlock); 394 394 + focusBlock( 395 395 + { ...lastBlock, type: type[0].data.value }, 396 396 + { type: "end" }, 397 397 + ); 398 398 + } 399 399 + if (e.key === "Tab") { 400 400 + let [sortedSelection, siblings] = await getSortedSelectionBound(); 401 401 + if (sortedSelection.length <= 1) return; 402 402 + e.preventDefault(); 403 403 + if (e.shiftKey) { 404 404 + for (let i = siblings.length - 1; i >= 0; i--) { 405 405 + let block = siblings[i]; 406 406 + if (!sortedSelection.find((s) => s.value === block.value)) 407 407 + continue; 408 408 + if ( 409 409 + sortedSelection.find((s) => s.value === block.listData?.parent) 410 410 + ) 411 411 + continue; 412 412 + let parentoffset = 1; 413 413 + let previousBlock = siblings[i - parentoffset]; 414 414 + while ( 415 415 + previousBlock && 416 416 + sortedSelection.find((s) => previousBlock.value === s.value) 417 417 + ) { 418 418 + parentoffset += 1; 419 419 + previousBlock = siblings[i - parentoffset]; 420 420 + } 421 421 + if (!block.listData || !previousBlock.listData) continue; 422 422 + outdent(block, previousBlock, rep); 423 423 + } 424 424 + } else { 425 425 + for (let i = 0; i < siblings.length; i++) { 426 426 + let block = siblings[i]; 427 427 + if (!sortedSelection.find((s) => s.value === block.value)) 428 428 + continue; 429 429 + if ( 430 430 + sortedSelection.find((s) => s.value === block.listData?.parent) 431 431 + ) 432 432 + continue; 433 433 + let parentoffset = 1; 434 434 + let previousBlock = siblings[i - parentoffset]; 435 435 + while ( 436 436 + previousBlock && 437 437 + sortedSelection.find((s) => previousBlock.value === s.value) 438 438 + ) { 439 439 + parentoffset += 1; 440 440 + previousBlock = siblings[i - parentoffset]; 441 441 + } 442 442 + if (!block.listData || !previousBlock.listData) continue; 443 443 + indent(block, previousBlock, rep); 444 444 + } 445 445 + } 446 446 + } 447 447 + if (e.key === "ArrowDown") { 448 448 + let [sortedSelection, siblings] = await getSortedSelectionBound(); 449 449 + let focusedBlock = useUIState.getState().focusedEntity; 450 450 + if (!e.shiftKey) { 451 451 + if (sortedSelection.length === 1) return; 452 452 + let lastBlock = sortedSelection[sortedSelection.length - 1]; 453 453 + if (!lastBlock) return; 454 454 + let type = await rep?.query((tx) => 455 455 + scanIndex(tx).eav(lastBlock.value, "block/type"), 456 456 + ); 457 457 + if (!type?.[0]) return; 458 458 + useUIState.getState().setSelectedBlock(lastBlock); 459 459 + focusBlock( 460 460 + { ...lastBlock, type: type[0].data.value }, 461 461 + { type: "end" }, 462 462 + ); 463 463 + } 464 464 + if (e.shiftKey) { 465 465 + if (e.defaultPrevented) return; 466 466 + if ( 467 467 + sortedSelection.length <= 1 || 468 468 + !focusedBlock || 469 469 + focusedBlock.entityType === "page" 470 470 + ) 471 471 + return; 472 472 + let b = focusedBlock; 473 473 + let focusedBlockIndex = sortedSelection.findIndex( 474 474 + (s) => s.value == b.entityID, 475 475 + ); 476 476 + if (focusedBlockIndex === sortedSelection.length - 1) { 477 477 + let index = siblings.findIndex((s) => s.value === b.entityID); 478 478 + let nextSelectedBlock = siblings[index + 1]; 479 479 + if (!nextSelectedBlock) return; 480 480 + useUIState.getState().addBlockToSelection({ 481 481 + ...nextSelectedBlock, 482 482 + }); 483 483 + 484 484 + scrollIntoViewIfNeeded( 485 485 + document.getElementById( 486 486 + elementId.block(nextSelectedBlock.value).container, 487 487 + ), 488 488 + false, 489 489 + ); 490 490 + useUIState.getState().setFocusedBlock({ 491 491 + entityType: "block", 492 492 + parent: nextSelectedBlock.parent, 493 493 + entityID: nextSelectedBlock.value, 494 494 + }); 495 495 + } else { 496 496 + let nextBlock = sortedSelection[1]; 497 497 + useUIState 498 498 + .getState() 499 499 + .removeBlockFromSelection({ value: b.entityID }); 500 500 + scrollIntoViewIfNeeded( 501 501 + document.getElementById( 502 502 + elementId.block(nextBlock.value).container, 503 503 + ), 504 504 + false, 505 505 + ); 506 506 + useUIState.getState().setFocusedBlock({ 507 507 + entityType: "block", 508 508 + parent: b.parent, 509 509 + entityID: nextBlock.value, 510 510 + }); 511 511 + if (sortedSelection.length === 2) { 512 512 + useEditorStates 513 513 + .getState() 514 514 + .editorStates[nextBlock.value]?.view?.focus(); 515 515 + } 516 516 + } 517 517 + } 518 518 + } 519 519 + if ((e.key === "c" || e.key === "x") && (e.metaKey || e.ctrlKey)) { 520 520 + if (!rep) return; 521 521 + if (e.shiftKey || (e.metaKey && e.ctrlKey)) return; 522 522 + let [, , selectionWithFoldedChildren] = 523 523 + await getSortedSelectionBound(); 524 524 + if (!selectionWithFoldedChildren) return; 525 525 + let el = document.activeElement as HTMLElement; 526 526 + if ( 527 527 + el?.tagName === "LABEL" || 528 528 + el?.tagName === "INPUT" || 529 529 + el?.tagName === "TEXTAREA" 530 530 + ) { 531 531 + return; 532 532 + } 533 533 + 534 534 + if ( 535 535 + el.contentEditable === "true" && 536 536 + selectionWithFoldedChildren.length <= 1 537 537 + ) 538 538 + return; 539 539 + e.preventDefault(); 540 540 + await copySelection(rep, selectionWithFoldedChildren); 541 541 + if (e.key === "x") deleteBlocks(); 542 542 + } 543 543 + }); 544 544 + window.addEventListener("keydown", listener); 545 545 + return () => { 546 546 + removeListener(); 547 547 + window.removeEventListener("keydown", listener); 548 548 + }; 549 549 + }, [moreThanOneSelected, rep, entity_set.permissions.write]); 550 550 + 551 551 + let [mouseDown, setMouseDown] = useState(false); 552 552 + let initialContentEditableParent = useRef<null | Node>(null); 553 553 + let savedSelection = useRef<SavedRange[] | null>(undefined); 554 554 + useEffect(() => { 555 555 + if (isMobile) return; 556 556 + if (!entity_set.permissions.write) return; 557 557 + let mouseDownListener = (e: MouseEvent) => { 558 558 + if ((e.target as Element).getAttribute("data-draggable")) return; 559 559 + let contentEditableParent = getContentEditableParent(e.target as Node); 560 560 + if (contentEditableParent) { 561 561 + setMouseDown(true); 562 562 + let entityID = (contentEditableParent as Element).getAttribute( 563 563 + "data-entityid", 564 564 + ); 565 565 + useSelectingMouse.setState({ start: entityID }); 566 566 + } 567 567 + initialContentEditableParent.current = contentEditableParent; 568 568 + }; 569 569 + let mouseUpListener = (e: MouseEvent) => { 570 570 + savedSelection.current = null; 571 571 + if ( 572 572 + initialContentEditableParent.current && 573 573 + !(e.target as Element).getAttribute("data-draggable") && 574 574 + getContentEditableParent(e.target as Node) !== 575 575 + initialContentEditableParent.current 576 576 + ) { 577 577 + setTimeout(() => { 578 578 + window.getSelection()?.removeAllRanges(); 579 579 + }, 5); 580 580 + } 581 581 + initialContentEditableParent.current = null; 582 582 + useSelectingMouse.setState({ start: null }); 583 583 + setMouseDown(false); 584 584 + }; 585 585 + window.addEventListener("mousedown", mouseDownListener); 586 586 + window.addEventListener("mouseup", mouseUpListener); 587 587 + return () => { 588 588 + window.removeEventListener("mousedown", mouseDownListener); 589 589 + window.removeEventListener("mouseup", mouseUpListener); 590 590 + }; 591 591 + }, [entity_set.permissions.write, isMobile]); 592 592 + useEffect(() => { 593 593 + if (!mouseDown) return; 594 594 + if (isMobile) return; 595 595 + let mouseMoveListener = (e: MouseEvent) => { 596 596 + if (e.buttons !== 1) return; 597 597 + if (initialContentEditableParent.current) { 598 598 + if ( 599 599 + initialContentEditableParent.current === 600 600 + getContentEditableParent(e.target as Node) 601 601 + ) { 602 602 + if (savedSelection.current) { 603 603 + restoreSelection(savedSelection.current); 604 604 + } 605 605 + savedSelection.current = null; 606 606 + return; 607 607 + } 608 608 + if (!savedSelection.current) savedSelection.current = saveSelection(); 609 609 + window.getSelection()?.removeAllRanges(); 610 610 + } 611 611 + }; 612 612 + window.addEventListener("mousemove", mouseMoveListener); 613 613 + return () => { 614 614 + window.removeEventListener("mousemove", mouseMoveListener); 615 615 + }; 616 616 + }, [mouseDown, isMobile]); 617 617 + return null; 618 618 + } 619 619 + 620 620 + type SavedRange = { 621 621 + startContainer: Node; 622 622 + startOffset: number; 623 623 + endContainer: Node; 624 624 + endOffset: number; 625 625 + direction: "forward" | "backward"; 626 626 + }; 627 627 + function saveSelection() { 628 628 + let selection = window.getSelection(); 629 629 + if (selection && selection.rangeCount > 0) { 630 630 + let ranges: SavedRange[] = []; 631 631 + for (let i = 0; i < selection.rangeCount; i++) { 632 632 + let range = selection.getRangeAt(i); 633 633 + ranges.push({ 634 634 + startContainer: range.startContainer, 635 635 + startOffset: range.startOffset, 636 636 + endContainer: range.endContainer, 637 637 + endOffset: range.endOffset, 638 638 + direction: 639 639 + selection.anchorNode === range.startContainer && 640 640 + selection.anchorOffset === range.startOffset 641 641 + ? "forward" 642 642 + : "backward", 643 643 + }); 644 644 + } 645 645 + return ranges; 646 646 + } 647 647 + return []; 648 648 + } 649 649 + 650 650 + function restoreSelection(savedRanges: SavedRange[]) { 651 651 + if (savedRanges && savedRanges.length > 0) { 652 652 + let selection = window.getSelection(); 653 653 + if (!selection) return; 654 654 + selection.removeAllRanges(); 655 655 + for (let i = 0; i < savedRanges.length; i++) { 656 656 + let range = document.createRange(); 657 657 + range.setStart(savedRanges[i].startContainer, savedRanges[i].startOffset); 658 658 + range.setEnd(savedRanges[i].endContainer, savedRanges[i].endOffset); 659 659 + 660 660 + selection.addRange(range); 661 661 + 662 662 + // If the direction is backward, collapse the selection to the end and then extend it backward 663 663 + if (savedRanges[i].direction === "backward") { 664 664 + selection.collapseToEnd(); 665 665 + selection.extend( 666 666 + savedRanges[i].startContainer, 667 667 + savedRanges[i].startOffset, 668 668 + ); 669 669 + } 670 670 + } 671 671 + } 672 672 + } 673 673 + 674 674 + function getContentEditableParent(e: Node | null): Node | null { 675 675 + let element: Node | null = e; 676 676 + while (element && element !== document) { 677 677 + if ( 678 678 + (element as HTMLElement).contentEditable === "true" || 679 679 + (element as HTMLElement).getAttribute("data-editable-block") 680 680 + ) { 681 681 + return element; 682 682 + } 683 683 + element = element.parentNode; 684 684 + } 685 685 + return null; 686 686 + } 687 687 + 688 688 + 689 689 + function toggleMarkInBlocks(blocks: string[], mark: MarkType, attrs?: any) { 690 690 + let everyBlockHasMark = blocks.reduce((acc, block) => { 691 691 + let editor = useEditorStates.getState().editorStates[block]; 692 692 + if (!editor) return acc; 693 693 + let { view } = editor; 694 694 + let from = 0; 695 695 + let to = view.state.doc.content.size; 696 696 + let hasMarkInRange = view.state.doc.rangeHasMark(from, to, mark); 697 697 + return acc && hasMarkInRange; 698 698 + }, true); 699 699 + for (let block of blocks) { 700 700 + let editor = useEditorStates.getState().editorStates[block]; 701 701 + if (!editor) return; 702 702 + let { view } = editor; 703 703 + let tr = view.state.tr; 704 704 + 705 705 + let from = 0; 706 706 + let to = view.state.doc.content.size; 707 707 + 708 708 + tr.setMeta("bulkOp", true); 709 709 + if (everyBlockHasMark) { 710 710 + tr.removeMark(from, to, mark); 711 711 + } else { 712 712 + tr.addMark(from, to, mark.create(attrs)); 713 713 + } 714 714 + 715 715 + view.dispatch(tr); 716 716 + } 717 717 + }

+48

components/SelectionManager/selectionState.ts

··· 1 1 + import { create } from "zustand"; 2 2 + import { Replicache } from "replicache"; 3 3 + import { ReplicacheMutators } from "src/replicache"; 4 4 + import { useUIState } from "src/useUIState"; 5 5 + import { getBlocksWithType } from "src/hooks/queries/useBlocks"; 6 6 + 7 7 + export const useSelectingMouse = create(() => ({ 8 8 + start: null as null | string, 9 9 + })); 10 10 + 11 11 + export const getSortedSelection = async ( 12 12 + rep: Replicache<ReplicacheMutators>, 13 13 + ) => { 14 14 + let selectedBlocks = useUIState.getState().selectedBlocks; 15 15 + let foldedBlocks = useUIState.getState().foldedBlocks; 16 16 + if (!selectedBlocks[0]) return [[], []]; 17 17 + let siblings = 18 18 + (await rep?.query((tx) => 19 19 + getBlocksWithType(tx, selectedBlocks[0].parent), 20 20 + )) || []; 21 21 + let sortedBlocks = siblings.filter((s) => { 22 22 + let selected = selectedBlocks.find((sb) => sb.value === s.value); 23 23 + return selected; 24 24 + }); 25 25 + let sortedBlocksWithChildren = siblings.filter((s) => { 26 26 + let selected = selectedBlocks.find((sb) => sb.value === s.value); 27 27 + if (s.listData && !selected) { 28 28 + //Select the children of folded list blocks (in order to copy them) 29 29 + return s.listData.path.find( 30 30 + (p) => 31 31 + selectedBlocks.find((sb) => sb.value === p.entity) && 32 32 + foldedBlocks.includes(p.entity), 33 33 + ); 34 34 + } 35 35 + return selected; 36 36 + }); 37 37 + return [ 38 38 + sortedBlocks, 39 39 + siblings.filter( 40 40 + (f) => 41 41 + !f.listData || 42 42 + !f.listData.path.find( 43 43 + (p) => foldedBlocks.includes(p.entity) && p.entity !== f.value, 44 44 + ), 45 45 + ), 46 46 + sortedBlocksWithChildren, 47 47 + ]; 48 48 + };

-763

components/SelectionManager.tsx

··· 1 1 - "use client"; 2 2 - import { useEffect, useRef, useState } from "react"; 3 3 - import { create } from "zustand"; 4 4 - import { ReplicacheMutators, useReplicache } from "src/replicache"; 5 5 - import { useUIState } from "src/useUIState"; 6 6 - import { scanIndex } from "src/replicache/utils"; 7 7 - import { focusBlock } from "src/utils/focusBlock"; 8 8 - import { useEditorStates } from "src/state/useEditorState"; 9 9 - import { useEntitySetContext } from "./EntitySetProvider"; 10 10 - import { getBlocksWithType } from "src/hooks/queries/useBlocks"; 11 11 - import { v7 } from "uuid"; 12 12 - import { indent, outdent, outdentFull } from "src/utils/list-operations"; 13 13 - import { addShortcut, Shortcut } from "src/shortcuts"; 14 14 - import { htmlToMarkdown } from "src/htmlMarkdownParsers"; 15 15 - import { elementId } from "src/utils/elementId"; 16 16 - import { scrollIntoViewIfNeeded } from "src/utils/scrollIntoViewIfNeeded"; 17 17 - import { copySelection } from "src/utils/copySelection"; 18 18 - import { isTextBlock } from "src/utils/isTextBlock"; 19 19 - import { useIsMobile } from "src/hooks/isMobile"; 20 20 - import { deleteBlock } from "./Blocks/DeleteBlock"; 21 21 - import { Replicache } from "replicache"; 22 22 - import { schema } from "./Blocks/TextBlock/schema"; 23 23 - import { TextSelection } from "prosemirror-state"; 24 24 - import { MarkType } from "prosemirror-model"; 25 25 - export const useSelectingMouse = create(() => ({ 26 26 - start: null as null | string, 27 27 - })); 28 28 - 29 29 - //How should I model selection? As ranges w/ a start and end? Store *blocks* so that I can just construct ranges? 30 30 - // How does this relate to *when dragging* ? 31 31 - 32 32 - export function SelectionManager() { 33 33 - let moreThanOneSelected = useUIState((s) => s.selectedBlocks.length > 1); 34 34 - let entity_set = useEntitySetContext(); 35 35 - let { rep, undoManager } = useReplicache(); 36 36 - let isMobile = useIsMobile(); 37 37 - useEffect(() => { 38 38 - if (!entity_set.permissions.write || !rep) return; 39 39 - const getSortedSelectionBound = getSortedSelection.bind(null, rep); 40 40 - let shortcuts: Shortcut[] = [ 41 41 - { 42 42 - metaKey: true, 43 43 - key: "ArrowUp", 44 44 - handler: async () => { 45 45 - let [firstBlock] = 46 46 - (await rep?.query((tx) => 47 47 - getBlocksWithType( 48 48 - tx, 49 49 - useUIState.getState().selectedBlocks[0].parent, 50 50 - ), 51 51 - )) || []; 52 52 - if (firstBlock) focusBlock(firstBlock, { type: "start" }); 53 53 - }, 54 54 - }, 55 55 - { 56 56 - metaKey: true, 57 57 - key: "ArrowDown", 58 58 - handler: async () => { 59 59 - let blocks = 60 60 - (await rep?.query((tx) => 61 61 - getBlocksWithType( 62 62 - tx, 63 63 - useUIState.getState().selectedBlocks[0].parent, 64 64 - ), 65 65 - )) || []; 66 66 - let folded = useUIState.getState().foldedBlocks; 67 67 - blocks = blocks.filter( 68 68 - (f) => 69 69 - !f.listData || 70 70 - !f.listData.path.find( 71 71 - (path) => 72 72 - folded.includes(path.entity) && f.value !== path.entity, 73 73 - ), 74 74 - ); 75 75 - let lastBlock = blocks[blocks.length - 1]; 76 76 - if (lastBlock) focusBlock(lastBlock, { type: "end" }); 77 77 - }, 78 78 - }, 79 79 - { 80 80 - metaKey: true, 81 81 - altKey: true, 82 82 - key: ["l", "¬"], 83 83 - handler: async () => { 84 84 - let [sortedBlocks, siblings] = await getSortedSelectionBound(); 85 85 - for (let block of sortedBlocks) { 86 86 - if (!block.listData) { 87 87 - await rep?.mutate.assertFact({ 88 88 - entity: block.value, 89 89 - attribute: "block/is-list", 90 90 - data: { type: "boolean", value: true }, 91 91 - }); 92 92 - } else { 93 93 - outdentFull(block, rep); 94 94 - } 95 95 - } 96 96 - }, 97 97 - }, 98 98 - { 99 99 - metaKey: true, 100 100 - shift: true, 101 101 - key: ["ArrowDown", "J"], 102 102 - handler: async () => { 103 103 - let [sortedBlocks, siblings] = await getSortedSelectionBound(); 104 104 - let block = sortedBlocks[0]; 105 105 - let nextBlock = siblings 106 106 - .slice(siblings.findIndex((s) => s.value === block.value) + 1) 107 107 - .find( 108 108 - (f) => 109 109 - f.listData && 110 110 - block.listData && 111 111 - !f.listData.path.find((f) => f.entity === block.value), 112 112 - ); 113 113 - if ( 114 114 - nextBlock?.listData && 115 115 - block.listData && 116 116 - nextBlock.listData.depth === block.listData.depth - 1 117 117 - ) { 118 118 - if (useUIState.getState().foldedBlocks.includes(nextBlock.value)) 119 119 - useUIState.getState().toggleFold(nextBlock.value); 120 120 - await rep?.mutate.moveBlock({ 121 121 - block: block.value, 122 122 - oldParent: block.listData?.parent, 123 123 - newParent: nextBlock.value, 124 124 - position: { type: "first" }, 125 125 - }); 126 126 - } else { 127 127 - await rep?.mutate.moveBlockDown({ 128 128 - entityID: block.value, 129 129 - parent: block.listData?.parent || block.parent, 130 130 - }); 131 131 - } 132 132 - }, 133 133 - }, 134 134 - { 135 135 - metaKey: true, 136 136 - shift: true, 137 137 - key: ["ArrowUp", "K"], 138 138 - handler: async () => { 139 139 - let [sortedBlocks, siblings] = await getSortedSelectionBound(); 140 140 - let block = sortedBlocks[0]; 141 141 - let previousBlock = 142 142 - siblings?.[siblings.findIndex((s) => s.value === block.value) - 1]; 143 143 - if (previousBlock.value === block.listData?.parent) { 144 144 - previousBlock = 145 145 - siblings?.[ 146 146 - siblings.findIndex((s) => s.value === block.value) - 2 147 147 - ]; 148 148 - } 149 149 - 150 150 - if ( 151 151 - previousBlock?.listData && 152 152 - block.listData && 153 153 - block.listData.depth > 1 && 154 154 - !previousBlock.listData.path.find( 155 155 - (f) => f.entity === block.listData?.parent, 156 156 - ) 157 157 - ) { 158 158 - let depth = block.listData.depth; 159 159 - let newParent = previousBlock.listData.path.find( 160 160 - (f) => f.depth === depth - 1, 161 161 - ); 162 162 - if (!newParent) return; 163 163 - if (useUIState.getState().foldedBlocks.includes(newParent.entity)) 164 164 - useUIState.getState().toggleFold(newParent.entity); 165 165 - rep?.mutate.moveBlock({ 166 166 - block: block.value, 167 167 - oldParent: block.listData?.parent, 168 168 - newParent: newParent.entity, 169 169 - position: { type: "end" }, 170 170 - }); 171 171 - } else { 172 172 - rep?.mutate.moveBlockUp({ 173 173 - entityID: block.value, 174 174 - parent: block.listData?.parent || block.parent, 175 175 - }); 176 176 - } 177 177 - }, 178 178 - }, 179 179 - 180 180 - { 181 181 - metaKey: true, 182 182 - shift: true, 183 183 - key: "Enter", 184 184 - handler: async () => { 185 185 - let [sortedBlocks, siblings] = await getSortedSelectionBound(); 186 186 - if (!sortedBlocks[0].listData) return; 187 187 - useUIState.getState().toggleFold(sortedBlocks[0].value); 188 188 - }, 189 189 - }, 190 190 - ]; 191 191 - if (moreThanOneSelected) 192 192 - shortcuts = shortcuts.concat([ 193 193 - { 194 194 - metaKey: true, 195 195 - key: "u", 196 196 - handler: async () => { 197 197 - let [sortedBlocks] = await getSortedSelectionBound(); 198 198 - toggleMarkInBlocks( 199 199 - sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 200 200 - schema.marks.underline, 201 201 - ); 202 202 - }, 203 203 - }, 204 204 - { 205 205 - metaKey: true, 206 206 - key: "i", 207 207 - handler: async () => { 208 208 - let [sortedBlocks] = await getSortedSelectionBound(); 209 209 - toggleMarkInBlocks( 210 210 - sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 211 211 - schema.marks.em, 212 212 - ); 213 213 - }, 214 214 - }, 215 215 - { 216 216 - metaKey: true, 217 217 - key: "b", 218 218 - handler: async () => { 219 219 - let [sortedBlocks] = await getSortedSelectionBound(); 220 220 - toggleMarkInBlocks( 221 221 - sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 222 222 - schema.marks.strong, 223 223 - ); 224 224 - }, 225 225 - }, 226 226 - { 227 227 - metaAndCtrl: true, 228 228 - key: "h", 229 229 - handler: async () => { 230 230 - let [sortedBlocks] = await getSortedSelectionBound(); 231 231 - toggleMarkInBlocks( 232 232 - sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 233 233 - schema.marks.highlight, 234 234 - { 235 235 - color: useUIState.getState().lastUsedHighlight, 236 236 - }, 237 237 - ); 238 238 - }, 239 239 - }, 240 240 - { 241 241 - metaAndCtrl: true, 242 242 - key: "x", 243 243 - handler: async () => { 244 244 - let [sortedBlocks] = await getSortedSelectionBound(); 245 245 - toggleMarkInBlocks( 246 246 - sortedBlocks.filter((b) => b.type === "text").map((b) => b.value), 247 247 - schema.marks.strikethrough, 248 248 - ); 249 249 - }, 250 250 - }, 251 251 - ]); 252 252 - let removeListener = addShortcut( 253 253 - shortcuts.map((shortcut) => ({ 254 254 - ...shortcut, 255 255 - handler: () => undoManager.withUndoGroup(() => shortcut.handler()), 256 256 - })), 257 257 - ); 258 258 - let listener = async (e: KeyboardEvent) => 259 259 - undoManager.withUndoGroup(async () => { 260 260 - //used here and in cut 261 261 - const deleteBlocks = async () => { 262 262 - if (!entity_set.permissions.write) return; 263 263 - if (moreThanOneSelected) { 264 264 - e.preventDefault(); 265 265 - let [sortedBlocks, siblings] = await getSortedSelectionBound(); 266 266 - let selectedBlocks = useUIState.getState().selectedBlocks; 267 267 - let firstBlock = sortedBlocks[0]; 268 268 - 269 269 - await rep?.mutate.removeBlock( 270 270 - selectedBlocks.map((block) => ({ blockEntity: block.value })), 271 271 - ); 272 272 - useUIState.getState().closePage(selectedBlocks.map((b) => b.value)); 273 273 - 274 274 - let nextBlock = 275 275 - siblings?.[ 276 276 - siblings.findIndex((s) => s.value === firstBlock.value) - 1 277 277 - ]; 278 278 - if (nextBlock) { 279 279 - useUIState.getState().setSelectedBlock({ 280 280 - value: nextBlock.value, 281 281 - parent: nextBlock.parent, 282 282 - }); 283 283 - let type = await rep?.query((tx) => 284 284 - scanIndex(tx).eav(nextBlock.value, "block/type"), 285 285 - ); 286 286 - if (!type?.[0]) return; 287 287 - if ( 288 288 - type[0]?.data.value === "text" || 289 289 - type[0]?.data.value === "heading" 290 290 - ) 291 291 - focusBlock( 292 292 - { 293 293 - value: nextBlock.value, 294 294 - type: "text", 295 295 - parent: nextBlock.parent, 296 296 - }, 297 297 - { type: "end" }, 298 298 - ); 299 299 - } 300 300 - } 301 301 - }; 302 302 - if (e.key === "Backspace" || e.key === "Delete") { 303 303 - deleteBlocks(); 304 304 - } 305 305 - if (e.key === "ArrowUp") { 306 306 - let [sortedBlocks, siblings] = await getSortedSelectionBound(); 307 307 - let focusedBlock = useUIState.getState().focusedEntity; 308 308 - if (!e.shiftKey && !e.ctrlKey) { 309 309 - if (e.defaultPrevented) return; 310 310 - if (sortedBlocks.length === 1) return; 311 311 - let firstBlock = sortedBlocks[0]; 312 312 - if (!firstBlock) return; 313 313 - let type = await rep?.query((tx) => 314 314 - scanIndex(tx).eav(firstBlock.value, "block/type"), 315 315 - ); 316 316 - if (!type?.[0]) return; 317 317 - useUIState.getState().setSelectedBlock(firstBlock); 318 318 - focusBlock( 319 319 - { ...firstBlock, type: type[0].data.value }, 320 320 - { type: "start" }, 321 321 - ); 322 322 - } else { 323 323 - if (e.defaultPrevented) return; 324 324 - if ( 325 325 - sortedBlocks.length <= 1 || 326 326 - !focusedBlock || 327 327 - focusedBlock.entityType === "page" 328 328 - ) 329 329 - return; 330 330 - let b = focusedBlock; 331 331 - let focusedBlockIndex = sortedBlocks.findIndex( 332 332 - (s) => s.value == b.entityID, 333 333 - ); 334 334 - if (focusedBlockIndex === 0) { 335 335 - let index = siblings.findIndex((s) => s.value === b.entityID); 336 336 - let nextSelectedBlock = siblings[index - 1]; 337 337 - if (!nextSelectedBlock) return; 338 338 - 339 339 - scrollIntoViewIfNeeded( 340 340 - document.getElementById( 341 341 - elementId.block(nextSelectedBlock.value).container, 342 342 - ), 343 343 - false, 344 344 - ); 345 345 - useUIState.getState().addBlockToSelection({ 346 346 - ...nextSelectedBlock, 347 347 - }); 348 348 - useUIState.getState().setFocusedBlock({ 349 349 - entityType: "block", 350 350 - parent: nextSelectedBlock.parent, 351 351 - entityID: nextSelectedBlock.value, 352 352 - }); 353 353 - } else { 354 354 - let nextBlock = sortedBlocks[sortedBlocks.length - 2]; 355 355 - useUIState.getState().setFocusedBlock({ 356 356 - entityType: "block", 357 357 - parent: b.parent, 358 358 - entityID: nextBlock.value, 359 359 - }); 360 360 - scrollIntoViewIfNeeded( 361 361 - document.getElementById( 362 362 - elementId.block(nextBlock.value).container, 363 363 - ), 364 364 - false, 365 365 - ); 366 366 - if (sortedBlocks.length === 2) { 367 367 - useEditorStates 368 368 - .getState() 369 369 - .editorStates[nextBlock.value]?.view?.focus(); 370 370 - } 371 371 - useUIState 372 372 - .getState() 373 373 - .removeBlockFromSelection(sortedBlocks[focusedBlockIndex]); 374 374 - } 375 375 - } 376 376 - } 377 377 - if (e.key === "ArrowLeft") { 378 378 - let [sortedSelection, siblings] = await getSortedSelectionBound(); 379 379 - if (sortedSelection.length === 1) return; 380 380 - let firstBlock = sortedSelection[0]; 381 381 - if (!firstBlock) return; 382 382 - let type = await rep?.query((tx) => 383 383 - scanIndex(tx).eav(firstBlock.value, "block/type"), 384 384 - ); 385 385 - if (!type?.[0]) return; 386 386 - useUIState.getState().setSelectedBlock(firstBlock); 387 387 - focusBlock( 388 388 - { ...firstBlock, type: type[0].data.value }, 389 389 - { type: "start" }, 390 390 - ); 391 391 - } 392 392 - if (e.key === "ArrowRight") { 393 393 - let [sortedSelection, siblings] = await getSortedSelectionBound(); 394 394 - if (sortedSelection.length === 1) return; 395 395 - let lastBlock = sortedSelection[sortedSelection.length - 1]; 396 396 - if (!lastBlock) return; 397 397 - let type = await rep?.query((tx) => 398 398 - scanIndex(tx).eav(lastBlock.value, "block/type"), 399 399 - ); 400 400 - if (!type?.[0]) return; 401 401 - useUIState.getState().setSelectedBlock(lastBlock); 402 402 - focusBlock( 403 403 - { ...lastBlock, type: type[0].data.value }, 404 404 - { type: "end" }, 405 405 - ); 406 406 - } 407 407 - if (e.key === "Tab") { 408 408 - let [sortedSelection, siblings] = await getSortedSelectionBound(); 409 409 - if (sortedSelection.length <= 1) return; 410 410 - e.preventDefault(); 411 411 - if (e.shiftKey) { 412 412 - for (let i = siblings.length - 1; i >= 0; i--) { 413 413 - let block = siblings[i]; 414 414 - if (!sortedSelection.find((s) => s.value === block.value)) 415 415 - continue; 416 416 - if ( 417 417 - sortedSelection.find((s) => s.value === block.listData?.parent) 418 418 - ) 419 419 - continue; 420 420 - let parentoffset = 1; 421 421 - let previousBlock = siblings[i - parentoffset]; 422 422 - while ( 423 423 - previousBlock && 424 424 - sortedSelection.find((s) => previousBlock.value === s.value) 425 425 - ) { 426 426 - parentoffset += 1; 427 427 - previousBlock = siblings[i - parentoffset]; 428 428 - } 429 429 - if (!block.listData || !previousBlock.listData) continue; 430 430 - outdent(block, previousBlock, rep); 431 431 - } 432 432 - } else { 433 433 - for (let i = 0; i < siblings.length; i++) { 434 434 - let block = siblings[i]; 435 435 - if (!sortedSelection.find((s) => s.value === block.value)) 436 436 - continue; 437 437 - if ( 438 438 - sortedSelection.find((s) => s.value === block.listData?.parent) 439 439 - ) 440 440 - continue; 441 441 - let parentoffset = 1; 442 442 - let previousBlock = siblings[i - parentoffset]; 443 443 - while ( 444 444 - previousBlock && 445 445 - sortedSelection.find((s) => previousBlock.value === s.value) 446 446 - ) { 447 447 - parentoffset += 1; 448 448 - previousBlock = siblings[i - parentoffset]; 449 449 - } 450 450 - if (!block.listData || !previousBlock.listData) continue; 451 451 - indent(block, previousBlock, rep); 452 452 - } 453 453 - } 454 454 - } 455 455 - if (e.key === "ArrowDown") { 456 456 - let [sortedSelection, siblings] = await getSortedSelectionBound(); 457 457 - let focusedBlock = useUIState.getState().focusedEntity; 458 458 - if (!e.shiftKey) { 459 459 - if (sortedSelection.length === 1) return; 460 460 - let lastBlock = sortedSelection[sortedSelection.length - 1]; 461 461 - if (!lastBlock) return; 462 462 - let type = await rep?.query((tx) => 463 463 - scanIndex(tx).eav(lastBlock.value, "block/type"), 464 464 - ); 465 465 - if (!type?.[0]) return; 466 466 - useUIState.getState().setSelectedBlock(lastBlock); 467 467 - focusBlock( 468 468 - { ...lastBlock, type: type[0].data.value }, 469 469 - { type: "end" }, 470 470 - ); 471 471 - } 472 472 - if (e.shiftKey) { 473 473 - if (e.defaultPrevented) return; 474 474 - if ( 475 475 - sortedSelection.length <= 1 || 476 476 - !focusedBlock || 477 477 - focusedBlock.entityType === "page" 478 478 - ) 479 479 - return; 480 480 - let b = focusedBlock; 481 481 - let focusedBlockIndex = sortedSelection.findIndex( 482 482 - (s) => s.value == b.entityID, 483 483 - ); 484 484 - if (focusedBlockIndex === sortedSelection.length - 1) { 485 485 - let index = siblings.findIndex((s) => s.value === b.entityID); 486 486 - let nextSelectedBlock = siblings[index + 1]; 487 487 - if (!nextSelectedBlock) return; 488 488 - useUIState.getState().addBlockToSelection({ 489 489 - ...nextSelectedBlock, 490 490 - }); 491 491 - 492 492 - scrollIntoViewIfNeeded( 493 493 - document.getElementById( 494 494 - elementId.block(nextSelectedBlock.value).container, 495 495 - ), 496 496 - false, 497 497 - ); 498 498 - useUIState.getState().setFocusedBlock({ 499 499 - entityType: "block", 500 500 - parent: nextSelectedBlock.parent, 501 501 - entityID: nextSelectedBlock.value, 502 502 - }); 503 503 - } else { 504 504 - let nextBlock = sortedSelection[1]; 505 505 - useUIState 506 506 - .getState() 507 507 - .removeBlockFromSelection({ value: b.entityID }); 508 508 - scrollIntoViewIfNeeded( 509 509 - document.getElementById( 510 510 - elementId.block(nextBlock.value).container, 511 511 - ), 512 512 - false, 513 513 - ); 514 514 - useUIState.getState().setFocusedBlock({ 515 515 - entityType: "block", 516 516 - parent: b.parent, 517 517 - entityID: nextBlock.value, 518 518 - }); 519 519 - if (sortedSelection.length === 2) { 520 520 - useEditorStates 521 521 - .getState() 522 522 - .editorStates[nextBlock.value]?.view?.focus(); 523 523 - } 524 524 - } 525 525 - } 526 526 - } 527 527 - if ((e.key === "c" || e.key === "x") && (e.metaKey || e.ctrlKey)) { 528 528 - if (!rep) return; 529 529 - if (e.shiftKey || (e.metaKey && e.ctrlKey)) return; 530 530 - let [, , selectionWithFoldedChildren] = 531 531 - await getSortedSelectionBound(); 532 532 - if (!selectionWithFoldedChildren) return; 533 533 - let el = document.activeElement as HTMLElement; 534 534 - if ( 535 535 - el?.tagName === "LABEL" || 536 536 - el?.tagName === "INPUT" || 537 537 - el?.tagName === "TEXTAREA" 538 538 - ) { 539 539 - return; 540 540 - } 541 541 - 542 542 - if ( 543 543 - el.contentEditable === "true" && 544 544 - selectionWithFoldedChildren.length <= 1 545 545 - ) 546 546 - return; 547 547 - e.preventDefault(); 548 548 - await copySelection(rep, selectionWithFoldedChildren); 549 549 - if (e.key === "x") deleteBlocks(); 550 550 - } 551 551 - }); 552 552 - window.addEventListener("keydown", listener); 553 553 - return () => { 554 554 - removeListener(); 555 555 - window.removeEventListener("keydown", listener); 556 556 - }; 557 557 - }, [moreThanOneSelected, rep, entity_set.permissions.write]); 558 558 - 559 559 - let [mouseDown, setMouseDown] = useState(false); 560 560 - let initialContentEditableParent = useRef<null | Node>(null); 561 561 - let savedSelection = useRef<SavedRange[] | null>(undefined); 562 562 - useEffect(() => { 563 563 - if (isMobile) return; 564 564 - if (!entity_set.permissions.write) return; 565 565 - let mouseDownListener = (e: MouseEvent) => { 566 566 - if ((e.target as Element).getAttribute("data-draggable")) return; 567 567 - let contentEditableParent = getContentEditableParent(e.target as Node); 568 568 - if (contentEditableParent) { 569 569 - setMouseDown(true); 570 570 - let entityID = (contentEditableParent as Element).getAttribute( 571 571 - "data-entityid", 572 572 - ); 573 573 - useSelectingMouse.setState({ start: entityID }); 574 574 - } 575 575 - initialContentEditableParent.current = contentEditableParent; 576 576 - }; 577 577 - let mouseUpListener = (e: MouseEvent) => { 578 578 - savedSelection.current = null; 579 579 - if ( 580 580 - initialContentEditableParent.current && 581 581 - !(e.target as Element).getAttribute("data-draggable") && 582 582 - getContentEditableParent(e.target as Node) !== 583 583 - initialContentEditableParent.current 584 584 - ) { 585 585 - setTimeout(() => { 586 586 - window.getSelection()?.removeAllRanges(); 587 587 - }, 5); 588 588 - } 589 589 - initialContentEditableParent.current = null; 590 590 - useSelectingMouse.setState({ start: null }); 591 591 - setMouseDown(false); 592 592 - }; 593 593 - window.addEventListener("mousedown", mouseDownListener); 594 594 - window.addEventListener("mouseup", mouseUpListener); 595 595 - return () => { 596 596 - window.removeEventListener("mousedown", mouseDownListener); 597 597 - window.removeEventListener("mouseup", mouseUpListener); 598 598 - }; 599 599 - }, [entity_set.permissions.write, isMobile]); 600 600 - useEffect(() => { 601 601 - if (!mouseDown) return; 602 602 - if (isMobile) return; 603 603 - let mouseMoveListener = (e: MouseEvent) => { 604 604 - if (e.buttons !== 1) return; 605 605 - if (initialContentEditableParent.current) { 606 606 - if ( 607 607 - initialContentEditableParent.current === 608 608 - getContentEditableParent(e.target as Node) 609 609 - ) { 610 610 - if (savedSelection.current) { 611 611 - restoreSelection(savedSelection.current); 612 612 - } 613 613 - savedSelection.current = null; 614 614 - return; 615 615 - } 616 616 - if (!savedSelection.current) savedSelection.current = saveSelection(); 617 617 - window.getSelection()?.removeAllRanges(); 618 618 - } 619 619 - }; 620 620 - window.addEventListener("mousemove", mouseMoveListener); 621 621 - return () => { 622 622 - window.removeEventListener("mousemove", mouseMoveListener); 623 623 - }; 624 624 - }, [mouseDown, isMobile]); 625 625 - return null; 626 626 - } 627 627 - 628 628 - type SavedRange = { 629 629 - startContainer: Node; 630 630 - startOffset: number; 631 631 - endContainer: Node; 632 632 - endOffset: number; 633 633 - direction: "forward" | "backward"; 634 634 - }; 635 635 - export function saveSelection() { 636 636 - let selection = window.getSelection(); 637 637 - if (selection && selection.rangeCount > 0) { 638 638 - let ranges: SavedRange[] = []; 639 639 - for (let i = 0; i < selection.rangeCount; i++) { 640 640 - let range = selection.getRangeAt(i); 641 641 - ranges.push({ 642 642 - startContainer: range.startContainer, 643 643 - startOffset: range.startOffset, 644 644 - endContainer: range.endContainer, 645 645 - endOffset: range.endOffset, 646 646 - direction: 647 647 - selection.anchorNode === range.startContainer && 648 648 - selection.anchorOffset === range.startOffset 649 649 - ? "forward" 650 650 - : "backward", 651 651 - }); 652 652 - } 653 653 - return ranges; 654 654 - } 655 655 - return []; 656 656 - } 657 657 - 658 658 - export function restoreSelection(savedRanges: SavedRange[]) { 659 659 - if (savedRanges && savedRanges.length > 0) { 660 660 - let selection = window.getSelection(); 661 661 - if (!selection) return; 662 662 - selection.removeAllRanges(); 663 663 - for (let i = 0; i < savedRanges.length; i++) { 664 664 - let range = document.createRange(); 665 665 - range.setStart(savedRanges[i].startContainer, savedRanges[i].startOffset); 666 666 - range.setEnd(savedRanges[i].endContainer, savedRanges[i].endOffset); 667 667 - 668 668 - selection.addRange(range); 669 669 - 670 670 - // If the direction is backward, collapse the selection to the end and then extend it backward 671 671 - if (savedRanges[i].direction === "backward") { 672 672 - selection.collapseToEnd(); 673 673 - selection.extend( 674 674 - savedRanges[i].startContainer, 675 675 - savedRanges[i].startOffset, 676 676 - ); 677 677 - } 678 678 - } 679 679 - } 680 680 - } 681 681 - 682 682 - function getContentEditableParent(e: Node | null): Node | null { 683 683 - let element: Node | null = e; 684 684 - while (element && element !== document) { 685 685 - if ( 686 686 - (element as HTMLElement).contentEditable === "true" || 687 687 - (element as HTMLElement).getAttribute("data-editable-block") 688 688 - ) { 689 689 - return element; 690 690 - } 691 691 - element = element.parentNode; 692 692 - } 693 693 - return null; 694 694 - } 695 695 - 696 696 - export const getSortedSelection = async ( 697 697 - rep: Replicache<ReplicacheMutators>, 698 698 - ) => { 699 699 - let selectedBlocks = useUIState.getState().selectedBlocks; 700 700 - let foldedBlocks = useUIState.getState().foldedBlocks; 701 701 - if (!selectedBlocks[0]) return [[], []]; 702 702 - let siblings = 703 703 - (await rep?.query((tx) => 704 704 - getBlocksWithType(tx, selectedBlocks[0].parent), 705 705 - )) || []; 706 706 - let sortedBlocks = siblings.filter((s) => { 707 707 - let selected = selectedBlocks.find((sb) => sb.value === s.value); 708 708 - return selected; 709 709 - }); 710 710 - let sortedBlocksWithChildren = siblings.filter((s) => { 711 711 - let selected = selectedBlocks.find((sb) => sb.value === s.value); 712 712 - if (s.listData && !selected) { 713 713 - //Select the children of folded list blocks (in order to copy them) 714 714 - return s.listData.path.find( 715 715 - (p) => 716 716 - selectedBlocks.find((sb) => sb.value === p.entity) && 717 717 - foldedBlocks.includes(p.entity), 718 718 - ); 719 719 - } 720 720 - return selected; 721 721 - }); 722 722 - return [ 723 723 - sortedBlocks, 724 724 - siblings.filter( 725 725 - (f) => 726 726 - !f.listData || 727 727 - !f.listData.path.find( 728 728 - (p) => foldedBlocks.includes(p.entity) && p.entity !== f.value, 729 729 - ), 730 730 - ), 731 731 - sortedBlocksWithChildren, 732 732 - ]; 733 733 - }; 734 734 - 735 735 - function toggleMarkInBlocks(blocks: string[], mark: MarkType, attrs?: any) { 736 736 - let everyBlockHasMark = blocks.reduce((acc, block) => { 737 737 - let editor = useEditorStates.getState().editorStates[block]; 738 738 - if (!editor) return acc; 739 739 - let { view } = editor; 740 740 - let from = 0; 741 741 - let to = view.state.doc.content.size; 742 742 - let hasMarkInRange = view.state.doc.rangeHasMark(from, to, mark); 743 743 - return acc && hasMarkInRange; 744 744 - }, true); 745 745 - for (let block of blocks) { 746 746 - let editor = useEditorStates.getState().editorStates[block]; 747 747 - if (!editor) return; 748 748 - let { view } = editor; 749 749 - let tr = view.state.tr; 750 750 - 751 751 - let from = 0; 752 752 - let to = view.state.doc.content.size; 753 753 - 754 754 - tr.setMeta("bulkOp", true); 755 755 - if (everyBlockHasMark) { 756 756 - tr.removeMark(from, to, mark); 757 757 - } else { 758 758 - tr.addMark(from, to, mark.create(attrs)); 759 759 - } 760 760 - 761 761 - view.dispatch(tr); 762 762 - } 763 763 - }

+1 -1

components/Tags.tsx

··· 18 18 className={`tag flex items-center text-xs rounded-md border ${props.selected ? "bg-accent-1 border-accent-1 font-bold" : "bg-bg-page border-border"} ${props.className}`} 19 19 > 20 20 <Link 21 21 - href={`/tag/${encodeURIComponent(props.name)}`} 21 21 + href={`https://leaflet.pub/tag/${encodeURIComponent(props.name)}`} 22 22 className={`px-1 py-0.5 hover:no-underline! ${props.selected ? "text-accent-2" : "text-tertiary"}`} 23 23 > 24 24 {props.name}{" "}

+1 -1

components/ThemeManager/PublicationThemeProvider.tsx

··· 2 2 import { useMemo, useState } from "react"; 3 3 import { parseColor } from "react-aria-components"; 4 4 import { useEntity } from "src/replicache"; 5 5 - import { getColorContrast } from "./ThemeProvider"; 5 5 + import { getColorContrast } from "./themeUtils"; 6 6 import { useColorAttribute, colorToString } from "./useColorAttribute"; 7 7 import { BaseThemeProvider } from "./ThemeProvider"; 8 8 import { PubLeafletPublication, PubLeafletThemeColor } from "lexicons/api";

+1 -40

components/ThemeManager/ThemeProvider.tsx

··· 5 5 CSSProperties, 6 6 useContext, 7 7 useEffect, 8 8 - useMemo, 9 9 - useState, 10 8 } from "react"; 11 9 import { 12 10 colorToString, ··· 14 12 useColorAttributeNullable, 15 13 } from "./useColorAttribute"; 16 14 import { Color as AriaColor, parseColor } from "react-aria-components"; 17 17 - import { parse, contrastLstar, ColorSpace, sRGB } from "colorjs.io/fn"; 18 15 19 16 import { useEntity } from "src/replicache"; 20 17 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; ··· 23 20 PublicationThemeProvider, 24 21 } from "./PublicationThemeProvider"; 25 22 import { PubLeafletPublication } from "lexicons/api"; 26 26 - 27 27 - type CSSVariables = { 28 28 - "--bg-leaflet": string; 29 29 - "--bg-page": string; 30 30 - "--primary": string; 31 31 - "--accent-1": string; 32 32 - "--accent-2": string; 33 33 - "--accent-contrast": string; 34 34 - "--highlight-1": string; 35 35 - "--highlight-2": string; 36 36 - "--highlight-3": string; 37 37 - }; 38 38 - 39 39 - // define the color defaults for everything 40 40 - export const ThemeDefaults = { 41 41 - "theme/page-background": "#FDFCFA", 42 42 - "theme/card-background": "#FFFFFF", 43 43 - "theme/primary": "#272727", 44 44 - "theme/highlight-1": "#FFFFFF", 45 45 - "theme/highlight-2": "#EDD280", 46 46 - "theme/highlight-3": "#FFCDC3", 47 47 - 48 48 - //everywhere else, accent-background = accent-1 and accent-text = accent-2. 49 49 - // we just need to create a migration pipeline before we can change this 50 50 - "theme/accent-text": "#FFFFFF", 51 51 - "theme/accent-background": "#0000FF", 52 52 - "theme/accent-contrast": "#0000FF", 53 53 - }; 23 23 + import { getColorContrast } from "./themeUtils"; 54 24 55 25 // define a function to set an Aria Color to a CSS Variable in RGB 56 26 function setCSSVariableToColor( ··· 368 338 ); 369 339 }; 370 340 371 371 - // used to calculate the contrast between page and accent1, accent2, and determin which is higher contrast 372 372 - export function getColorContrast(color1: string, color2: string) { 373 373 - ColorSpace.register(sRGB); 374 374 - 375 375 - let parsedColor1 = parse(`rgb(${color1})`); 376 376 - let parsedColor2 = parse(`rgb(${color2})`); 377 377 - 378 378 - return contrastLstar(parsedColor1, parsedColor2); 379 379 - }

+27

components/ThemeManager/themeUtils.ts

··· 1 1 + import { parse, contrastLstar, ColorSpace, sRGB } from "colorjs.io/fn"; 2 2 + 3 3 + // define the color defaults for everything 4 4 + export const ThemeDefaults = { 5 5 + "theme/page-background": "#FDFCFA", 6 6 + "theme/card-background": "#FFFFFF", 7 7 + "theme/primary": "#272727", 8 8 + "theme/highlight-1": "#FFFFFF", 9 9 + "theme/highlight-2": "#EDD280", 10 10 + "theme/highlight-3": "#FFCDC3", 11 11 + 12 12 + //everywhere else, accent-background = accent-1 and accent-text = accent-2. 13 13 + // we just need to create a migration pipeline before we can change this 14 14 + "theme/accent-text": "#FFFFFF", 15 15 + "theme/accent-background": "#0000FF", 16 16 + "theme/accent-contrast": "#0000FF", 17 17 + }; 18 18 + 19 19 + // used to calculate the contrast between page and accent1, accent2, and determin which is higher contrast 20 20 + export function getColorContrast(color1: string, color2: string) { 21 21 + ColorSpace.register(sRGB); 22 22 + 23 23 + let parsedColor1 = parse(`rgb(${color1})`); 24 24 + let parsedColor2 = parse(`rgb(${color2})`); 25 25 + 26 26 + return contrastLstar(parsedColor1, parsedColor2); 27 27 + }

+1 -1

components/ThemeManager/useColorAttribute.ts

··· 2 2 import { Color, parseColor } from "react-aria-components"; 3 3 import { useEntity, useReplicache } from "src/replicache"; 4 4 import { FilterAttributes } from "src/replicache/attributes"; 5 5 - import { ThemeDefaults } from "./ThemeProvider"; 5 5 + import { ThemeDefaults } from "./themeUtils"; 6 6 7 7 export function useColorAttribute( 8 8 entity: string | null,

+5 -14

components/Toolbar/BlockToolbar.tsx

··· 2 2 import { ToolbarButton } from "."; 3 3 import { Separator, ShortcutKey } from "components/Layout"; 4 4 import { metaKey } from "src/utils/metaKey"; 5 5 - import { getBlocksWithType } from "src/hooks/queries/useBlocks"; 6 5 import { useUIState } from "src/useUIState"; 7 6 import { LockBlockButton } from "./LockBlockButton"; 8 7 import { TextAlignmentButton } from "./TextAlignmentToolbar"; 9 8 import { ImageFullBleedButton, ImageAltTextButton } from "./ImageToolbar"; 10 9 import { DeleteSmall } from "components/Icons/DeleteSmall"; 10 10 + import { getSortedSelection } from "components/SelectionManager/selectionState"; 11 11 12 12 export const BlockToolbar = (props: { 13 13 setToolbarState: ( ··· 66 66 67 67 const MoveBlockButtons = () => { 68 68 let { rep } = useReplicache(); 69 69 - const getSortedSelection = async () => { 70 70 - let selectedBlocks = useUIState.getState().selectedBlocks; 71 71 - let siblings = 72 72 - (await rep?.query((tx) => 73 73 - getBlocksWithType(tx, selectedBlocks[0].parent), 74 74 - )) || []; 75 75 - let sortedBlocks = siblings.filter((s) => 76 76 - selectedBlocks.find((sb) => sb.value === s.value), 77 77 - ); 78 78 - return [sortedBlocks, siblings]; 79 79 - }; 80 69 return ( 81 70 <> 82 71 <ToolbarButton 83 72 hiddenOnCanvas 84 73 onClick={async () => { 85 85 - let [sortedBlocks, siblings] = await getSortedSelection(); 74 74 + if (!rep) return; 75 75 + let [sortedBlocks, siblings] = await getSortedSelection(rep); 86 76 if (sortedBlocks.length > 1) return; 87 77 let block = sortedBlocks[0]; 88 78 let previousBlock = ··· 139 129 <ToolbarButton 140 130 hiddenOnCanvas 141 131 onClick={async () => { 142 142 - let [sortedBlocks, siblings] = await getSortedSelection(); 132 132 + if (!rep) return; 133 133 + let [sortedBlocks, siblings] = await getSortedSelection(rep); 143 134 if (sortedBlocks.length > 1) return; 144 135 let block = sortedBlocks[0]; 145 136 let nextBlock = siblings

+1 -1

components/Toolbar/MultiSelectToolbar.tsx

··· 8 8 import { LockBlockButton } from "./LockBlockButton"; 9 9 import { Props } from "components/Icons/Props"; 10 10 import { TextAlignmentButton } from "./TextAlignmentToolbar"; 11 11 - import { getSortedSelection } from "components/SelectionManager"; 11 11 + import { getSortedSelection } from "components/SelectionManager/selectionState"; 12 12 13 13 export const MultiselectToolbar = (props: { 14 14 setToolbarState: (

+2 -1

components/Toolbar/index.tsx

··· 13 13 import { TextToolbar } from "./TextToolbar"; 14 14 import { BlockToolbar } from "./BlockToolbar"; 15 15 import { MultiselectToolbar } from "./MultiSelectToolbar"; 16 16 - import { AreYouSure, deleteBlock } from "components/Blocks/DeleteBlock"; 16 16 + import { AreYouSure } from "components/Blocks/DeleteBlock"; 17 17 + import { deleteBlock } from "src/utils/deleteBlock"; 17 18 import { TooltipButton } from "components/Buttons"; 18 19 import { TextAlignmentToolbar } from "./TextAlignmentToolbar"; 19 20 import { useIsMobile } from "src/hooks/isMobile";

+1 -1

components/utils/UpdateLeafletTitle.tsx

··· 8 8 import { useEntity, useReplicache } from "src/replicache"; 9 9 import * as Y from "yjs"; 10 10 import * as base64 from "base64-js"; 11 11 - import { YJSFragmentToString } from "components/Blocks/TextBlock/RenderYJSFragment"; 11 11 + import { YJSFragmentToString } from "src/utils/yjsFragmentToString"; 12 12 import { useParams, useRouter, useSearchParams } from "next/navigation"; 13 13 import { focusBlock } from "src/utils/focusBlock"; 14 14 import { useIsMobile } from "src/hooks/isMobile";

+116

src/utils/deleteBlock.ts

··· 1 1 + import { Replicache } from "replicache"; 2 2 + import { ReplicacheMutators } from "src/replicache"; 3 3 + import { useUIState } from "src/useUIState"; 4 4 + import { scanIndex } from "src/replicache/utils"; 5 5 + import { getBlocksWithType } from "src/hooks/queries/useBlocks"; 6 6 + import { focusBlock } from "src/utils/focusBlock"; 7 7 + 8 8 + export async function deleteBlock( 9 9 + entities: string[], 10 10 + rep: Replicache<ReplicacheMutators>, 11 11 + ) { 12 12 + // get what pagess we need to close as a result of deleting this block 13 13 + let pagesToClose = [] as string[]; 14 14 + for (let entity of entities) { 15 15 + let [type] = await rep.query((tx) => 16 16 + scanIndex(tx).eav(entity, "block/type"), 17 17 + ); 18 18 + if (type.data.value === "card") { 19 19 + let [childPages] = await rep?.query( 20 20 + (tx) => scanIndex(tx).eav(entity, "block/card") || [], 21 21 + ); 22 22 + pagesToClose = [childPages?.data.value]; 23 23 + } 24 24 + if (type.data.value === "mailbox") { 25 25 + let [archive] = await rep?.query( 26 26 + (tx) => scanIndex(tx).eav(entity, "mailbox/archive") || [], 27 27 + ); 28 28 + let [draft] = await rep?.query( 29 29 + (tx) => scanIndex(tx).eav(entity, "mailbox/draft") || [], 30 30 + ); 31 31 + pagesToClose = [archive?.data.value, draft?.data.value]; 32 32 + } 33 33 + } 34 34 + 35 35 + // the next and previous blocks in the block list 36 36 + // if the focused thing is a page and not a block, return 37 37 + let focusedBlock = useUIState.getState().focusedEntity; 38 38 + let parent = 39 39 + focusedBlock?.entityType === "page" 40 40 + ? focusedBlock.entityID 41 41 + : focusedBlock?.parent; 42 42 + 43 43 + if (parent) { 44 44 + let parentType = await rep?.query((tx) => 45 45 + scanIndex(tx).eav(parent, "page/type"), 46 46 + ); 47 47 + if (parentType[0]?.data.value === "canvas") { 48 48 + useUIState 49 49 + .getState() 50 50 + .setFocusedBlock({ entityType: "page", entityID: parent }); 51 51 + useUIState.getState().setSelectedBlocks([]); 52 52 + } else { 53 53 + let siblings = 54 54 + (await rep?.query((tx) => getBlocksWithType(tx, parent))) || []; 55 55 + 56 56 + let selectedBlocks = useUIState.getState().selectedBlocks; 57 57 + let firstSelected = selectedBlocks[0]; 58 58 + let lastSelected = selectedBlocks[entities.length - 1]; 59 59 + 60 60 + let prevBlock = 61 61 + siblings?.[ 62 62 + siblings.findIndex((s) => s.value === firstSelected?.value) - 1 63 63 + ]; 64 64 + let prevBlockType = await rep?.query((tx) => 65 65 + scanIndex(tx).eav(prevBlock?.value, "block/type"), 66 66 + ); 67 67 + 68 68 + let nextBlock = 69 69 + siblings?.[ 70 70 + siblings.findIndex((s) => s.value === lastSelected.value) + 1 71 71 + ]; 72 72 + let nextBlockType = await rep?.query((tx) => 73 73 + scanIndex(tx).eav(nextBlock?.value, "block/type"), 74 74 + ); 75 75 + 76 76 + if (prevBlock) { 77 77 + useUIState.getState().setSelectedBlock({ 78 78 + value: prevBlock.value, 79 79 + parent: prevBlock.parent, 80 80 + }); 81 81 + 82 82 + focusBlock( 83 83 + { 84 84 + value: prevBlock.value, 85 85 + type: prevBlockType?.[0].data.value, 86 86 + parent: prevBlock.parent, 87 87 + }, 88 88 + { type: "end" }, 89 89 + ); 90 90 + } else { 91 91 + useUIState.getState().setSelectedBlock({ 92 92 + value: nextBlock.value, 93 93 + parent: nextBlock.parent, 94 94 + }); 95 95 + 96 96 + focusBlock( 97 97 + { 98 98 + value: nextBlock.value, 99 99 + type: nextBlockType?.[0]?.data.value, 100 100 + parent: nextBlock.parent, 101 101 + }, 102 102 + { type: "start" }, 103 103 + ); 104 104 + } 105 105 + } 106 106 + } 107 107 + 108 108 + pagesToClose.forEach((page) => page && useUIState.getState().closePage(page)); 109 109 + await Promise.all( 110 110 + entities.map((entity) => 111 111 + rep?.mutate.removeBlock({ 112 112 + blockEntity: entity, 113 113 + }), 114 114 + ), 115 115 + ); 116 116 + }

+37

src/utils/focusElement.ts

··· 1 1 + import { isIOS } from "src/utils/isDevice"; 2 2 + 3 3 + export const focusElement = ( 4 4 + el?: HTMLInputElement | HTMLTextAreaElement | null, 5 5 + ) => { 6 6 + if (!isIOS()) { 7 7 + el?.focus(); 8 8 + return; 9 9 + } 10 10 + 11 11 + let fakeInput = document.createElement("input"); 12 12 + fakeInput.setAttribute("type", "text"); 13 13 + fakeInput.style.position = "fixed"; 14 14 + fakeInput.style.height = "0px"; 15 15 + fakeInput.style.width = "0px"; 16 16 + fakeInput.style.fontSize = "16px"; // disable auto zoom 17 17 + document.body.appendChild(fakeInput); 18 18 + fakeInput.focus(); 19 19 + setTimeout(() => { 20 20 + if (!el) return; 21 21 + el.style.transform = "translateY(-2000px)"; 22 22 + el?.focus(); 23 23 + fakeInput.remove(); 24 24 + el.value = " "; 25 25 + el.setSelectionRange(1, 1); 26 26 + requestAnimationFrame(() => { 27 27 + if (el) { 28 28 + el.style.transform = ""; 29 29 + } 30 30 + }); 31 31 + setTimeout(() => { 32 32 + if (!el) return; 33 33 + el.value = ""; 34 34 + el.setSelectionRange(0, 0); 35 35 + }, 50); 36 36 + }, 20); 37 37 + };

+73

src/utils/focusPage.ts

··· 1 1 + import { Replicache } from "replicache"; 2 2 + import { Fact, ReplicacheMutators } from "src/replicache"; 3 3 + import { useUIState } from "src/useUIState"; 4 4 + import { scanIndex } from "src/replicache/utils"; 5 5 + import { scrollIntoViewIfNeeded } from "src/utils/scrollIntoViewIfNeeded"; 6 6 + import { elementId } from "src/utils/elementId"; 7 7 + import { focusBlock } from "src/utils/focusBlock"; 8 8 + 9 9 + export async function focusPage( 10 10 + pageID: string, 11 11 + rep: Replicache<ReplicacheMutators>, 12 12 + focusFirstBlock?: "focusFirstBlock", 13 13 + ) { 14 14 + // if this page is already focused, 15 15 + let focusedBlock = useUIState.getState().focusedEntity; 16 16 + // else set this page as focused 17 17 + useUIState.setState(() => ({ 18 18 + focusedEntity: { 19 19 + entityType: "page", 20 20 + entityID: pageID, 21 21 + }, 22 22 + })); 23 23 + 24 24 + setTimeout(async () => { 25 25 + //scroll to page 26 26 + 27 27 + scrollIntoViewIfNeeded( 28 28 + document.getElementById(elementId.page(pageID).container), 29 29 + false, 30 30 + "smooth", 31 31 + ); 32 32 + 33 33 + // if we asked that the function focus the first block, focus the first block 34 34 + if (focusFirstBlock === "focusFirstBlock") { 35 35 + let firstBlock = await rep.query(async (tx) => { 36 36 + let type = await scanIndex(tx).eav(pageID, "page/type"); 37 37 + let blocks = await scanIndex(tx).eav( 38 38 + pageID, 39 39 + type[0]?.data.value === "canvas" ? "canvas/block" : "card/block", 40 40 + ); 41 41 + 42 42 + let firstBlock = blocks[0]; 43 43 + 44 44 + if (!firstBlock) { 45 45 + return null; 46 46 + } 47 47 + 48 48 + let blockType = ( 49 49 + await tx 50 50 + .scan< 51 51 + Fact<"block/type"> 52 52 + >({ indexName: "eav", prefix: `${firstBlock.data.value}-block/type` }) 53 53 + .toArray() 54 54 + )[0]; 55 55 + 56 56 + if (!blockType) return null; 57 57 + 58 58 + return { 59 59 + value: firstBlock.data.value, 60 60 + type: blockType.data.value, 61 61 + parent: firstBlock.entity, 62 62 + position: firstBlock.data.position, 63 63 + }; 64 64 + }); 65 65 + 66 66 + if (firstBlock) { 67 67 + setTimeout(() => { 68 68 + focusBlock(firstBlock, { type: "start" }); 69 69 + }, 500); 70 70 + } 71 71 + } 72 72 + }, 50); 73 73 + }

+41

src/utils/yjsFragmentToString.ts

··· 1 1 + import { XmlElement, XmlText, XmlHook } from "yjs"; 2 2 + 3 3 + export type Delta = { 4 4 + insert: string; 5 5 + attributes?: { 6 6 + strong?: {}; 7 7 + code?: {}; 8 8 + em?: {}; 9 9 + underline?: {}; 10 10 + strikethrough?: {}; 11 11 + highlight?: { color: string }; 12 12 + link?: { href: string }; 13 13 + }; 14 14 + }; 15 15 + 16 16 + export function YJSFragmentToString( 17 17 + node: XmlElement | XmlText | XmlHook, 18 18 + ): string { 19 19 + if (node.constructor === XmlElement) { 20 20 + // Handle hard_break nodes specially 21 21 + if (node.nodeName === "hard_break") { 22 22 + return "\n"; 23 23 + } 24 24 + // Handle inline mention nodes 25 25 + if (node.nodeName === "didMention" || node.nodeName === "atMention") { 26 26 + return node.getAttribute("text") || ""; 27 27 + } 28 28 + return node 29 29 + .toArray() 30 30 + .map((f) => YJSFragmentToString(f)) 31 31 + .join(""); 32 32 + } 33 33 + if (node.constructor === XmlText) { 34 34 + return (node.toDelta() as Delta[]) 35 35 + .map((d) => { 36 36 + return d.insert; 37 37 + }) 38 38 + .join(""); 39 39 + } 40 40 + return ""; 41 41 + }