-9

.claude/settings.local.json

··· 1 1 - { 2 2 - "permissions": { 3 3 - "allow": [ 4 4 - "mcp__acp__Edit", 5 5 - "mcp__acp__Write", 6 6 - "mcp__acp__Bash" 7 7 - ] 8 8 - } 9 9 - }

+1

.github/pull_request_template.md

··· 2 2 - it looks good on both mobile and desktop 3 3 - it undo's like it ought to 4 4 - it handles keyboard interactions reasonably well 5 5 + - it behaves as you would expect if you lock it 5 6 - no build errors!!!

+2 -5

actions/getIdentityData.ts

··· 3 3 import { cookies } from "next/headers"; 4 4 import { supabaseServerClient } from "supabase/serverClient"; 5 5 import { cache } from "react"; 6 6 - import { deduplicateByUri } from "src/utils/deduplicateRecords"; 7 6 export const getIdentityData = cache(uncachedGetIdentityData); 8 7 export async function uncachedGetIdentityData() { 9 8 let cookieStore = await cookies(); ··· 45 44 if (!auth_res?.data?.identities) return null; 46 45 if (auth_res.data.identities.atp_did) { 47 46 //I should create a relationship table so I can do this in the above query 48 48 - let { data: rawPublications } = await supabaseServerClient 47 47 + let { data: publications } = await supabaseServerClient 49 48 .from("publications") 50 49 .select("*") 51 50 .eq("identity_did", auth_res.data.identities.atp_did); 52 52 - // Deduplicate records that may exist under both pub.leaflet and site.standard namespaces 53 53 - const publications = deduplicateByUri(rawPublications || []); 54 51 return { 55 52 ...auth_res.data.identities, 56 56 - publications, 53 53 + publications: publications || [], 57 54 }; 58 55 } 59 56

+51 -109

actions/publishToPublication.ts

··· 903 903 const mentionedDids = new Set<string>(); 904 904 const mentionedPublications = new Map<string, string>(); // Map of DID -> publication URI 905 905 const mentionedDocuments = new Map<string, string>(); // Map of DID -> document URI 906 906 - const embeddedBskyPosts = new Map<string, string>(); // Map of author DID -> post URI 907 906 908 907 // Extract pages from either format 909 908 let pages: PubLeafletContent.Main["pages"] | undefined; ··· 918 917 919 918 if (!pages) return; 920 919 921 921 - // Helper to extract blocks from all pages (both linear and canvas) 922 922 - function getAllBlocks(pages: PubLeafletContent.Main["pages"]) { 923 923 - const blocks: ( 924 924 - | PubLeafletPagesLinearDocument.Block["block"] 925 925 - | PubLeafletPagesCanvas.Block["block"] 926 926 - )[] = []; 927 927 - for (const page of pages) { 928 928 - if (page.$type === "pub.leaflet.pages.linearDocument") { 929 929 - const linearPage = page as PubLeafletPagesLinearDocument.Main; 930 930 - for (const blockWrapper of linearPage.blocks) { 931 931 - blocks.push(blockWrapper.block); 932 932 - } 933 933 - } else if (page.$type === "pub.leaflet.pages.canvas") { 934 934 - const canvasPage = page as PubLeafletPagesCanvas.Main; 935 935 - for (const blockWrapper of canvasPage.blocks) { 936 936 - blocks.push(blockWrapper.block); 937 937 - } 938 938 - } 939 939 - } 940 940 - return blocks; 941 941 - } 942 942 - 943 943 - const allBlocks = getAllBlocks(pages); 944 944 - 945 945 - // Extract mentions from all text blocks and embedded Bluesky posts 946 946 - for (const block of allBlocks) { 947 947 - // Check for embedded Bluesky posts 948 948 - if (PubLeafletBlocksBskyPost.isMain(block)) { 949 949 - const bskyPostUri = block.postRef.uri; 950 950 - // Extract the author DID from the post URI (at://did:xxx/app.bsky.feed.post/xxx) 951 951 - const postAuthorDid = new AtUri(bskyPostUri).host; 952 952 - if (postAuthorDid !== authorDid) { 953 953 - embeddedBskyPosts.set(postAuthorDid, bskyPostUri); 954 954 - } 955 955 - } 956 956 - 957 957 - // Check for text blocks with mentions 958 958 - if (block.$type === "pub.leaflet.blocks.text") { 959 959 - const textBlock = block as PubLeafletBlocksText.Main; 960 960 - if (textBlock.facets) { 961 961 - for (const facet of textBlock.facets) { 962 962 - for (const feature of facet.features) { 963 963 - // Check for DID mentions 964 964 - if (PubLeafletRichtextFacet.isDidMention(feature)) { 965 965 - if (feature.did !== authorDid) { 966 966 - mentionedDids.add(feature.did); 967 967 - } 968 968 - } 969 969 - // Check for AT URI mentions (publications and documents) 970 970 - if (PubLeafletRichtextFacet.isAtMention(feature)) { 971 971 - const uri = new AtUri(feature.atURI); 920 920 + // Extract mentions from all text blocks in all pages 921 921 + for (const page of pages) { 922 922 + if (page.$type === "pub.leaflet.pages.linearDocument") { 923 923 + const linearPage = page as PubLeafletPagesLinearDocument.Main; 924 924 + for (const blockWrapper of linearPage.blocks) { 925 925 + const block = blockWrapper.block; 926 926 + if (block.$type === "pub.leaflet.blocks.text") { 927 927 + const textBlock = block as PubLeafletBlocksText.Main; 928 928 + if (textBlock.facets) { 929 929 + for (const facet of textBlock.facets) { 930 930 + for (const feature of facet.features) { 931 931 + // Check for DID mentions 932 932 + if (PubLeafletRichtextFacet.isDidMention(feature)) { 933 933 + if (feature.did !== authorDid) { 934 934 + mentionedDids.add(feature.did); 935 935 + } 936 936 + } 937 937 + // Check for AT URI mentions (publications and documents) 938 938 + if (PubLeafletRichtextFacet.isAtMention(feature)) { 939 939 + const uri = new AtUri(feature.atURI); 972 940 973 973 - if (isPublicationCollection(uri.collection)) { 974 974 - // Get the publication owner's DID 975 975 - const { data: publication } = await supabaseServerClient 976 976 - .from("publications") 977 977 - .select("identity_did") 978 978 - .eq("uri", feature.atURI) 979 979 - .single(); 941 941 + if (isPublicationCollection(uri.collection)) { 942 942 + // Get the publication owner's DID 943 943 + const { data: publication } = await supabaseServerClient 944 944 + .from("publications") 945 945 + .select("identity_did") 946 946 + .eq("uri", feature.atURI) 947 947 + .single(); 980 948 981 981 - if (publication && publication.identity_did !== authorDid) { 982 982 - mentionedPublications.set( 983 983 - publication.identity_did, 984 984 - feature.atURI, 985 985 - ); 986 986 - } 987 987 - } else if (isDocumentCollection(uri.collection)) { 988 988 - // Get the document owner's DID 989 989 - const { data: document } = await supabaseServerClient 990 990 - .from("documents") 991 991 - .select("uri, data") 992 992 - .eq("uri", feature.atURI) 993 993 - .single(); 949 949 + if (publication && publication.identity_did !== authorDid) { 950 950 + mentionedPublications.set( 951 951 + publication.identity_did, 952 952 + feature.atURI, 953 953 + ); 954 954 + } 955 955 + } else if (isDocumentCollection(uri.collection)) { 956 956 + // Get the document owner's DID 957 957 + const { data: document } = await supabaseServerClient 958 958 + .from("documents") 959 959 + .select("uri, data") 960 960 + .eq("uri", feature.atURI) 961 961 + .single(); 994 962 995 995 - if (document) { 996 996 - const normalizedMentionedDoc = normalizeDocumentRecord( 997 997 - document.data, 998 998 - ); 999 999 - // Get the author from the document URI (the DID is the host part) 1000 1000 - const mentionedUri = new AtUri(feature.atURI); 1001 1001 - const docAuthor = mentionedUri.host; 1002 1002 - if (normalizedMentionedDoc && docAuthor !== authorDid) { 1003 1003 - mentionedDocuments.set(docAuthor, feature.atURI); 963 963 + if (document) { 964 964 + const normalizedMentionedDoc = normalizeDocumentRecord( 965 965 + document.data, 966 966 + ); 967 967 + // Get the author from the document URI (the DID is the host part) 968 968 + const mentionedUri = new AtUri(feature.atURI); 969 969 + const docAuthor = mentionedUri.host; 970 970 + if (normalizedMentionedDoc && docAuthor !== authorDid) { 971 971 + mentionedDocuments.set(docAuthor, feature.atURI); 972 972 + } 973 973 + } 1004 974 } 1005 975 } 1006 976 } ··· 1056 1026 }; 1057 1027 await supabaseServerClient.from("notifications").insert(notification); 1058 1028 await pingIdentityToUpdateNotification(recipientDid); 1059 1059 - } 1060 1060 - 1061 1061 - // Create notifications for embedded Bluesky posts (only if the author has a Leaflet account) 1062 1062 - if (embeddedBskyPosts.size > 0) { 1063 1063 - // Check which of the Bluesky post authors have Leaflet accounts 1064 1064 - const { data: identities } = await supabaseServerClient 1065 1065 - .from("identities") 1066 1066 - .select("atp_did") 1067 1067 - .in("atp_did", Array.from(embeddedBskyPosts.keys())); 1068 1068 - 1069 1069 - const leafletUserDids = new Set(identities?.map((i) => i.atp_did) ?? []); 1070 1070 - 1071 1071 - for (const [postAuthorDid, bskyPostUri] of embeddedBskyPosts) { 1072 1072 - // Only notify if the post author has a Leaflet account 1073 1073 - if (leafletUserDids.has(postAuthorDid)) { 1074 1074 - const notification: Notification = { 1075 1075 - id: v7(), 1076 1076 - recipient: postAuthorDid, 1077 1077 - data: { 1078 1078 - type: "bsky_post_embed", 1079 1079 - document_uri: documentUri, 1080 1080 - bsky_post_uri: bskyPostUri, 1081 1081 - }, 1082 1082 - }; 1083 1083 - await supabaseServerClient.from("notifications").insert(notification); 1084 1084 - await pingIdentityToUpdateNotification(postAuthorDid); 1085 1085 - } 1086 1086 - } 1087 1029 } 1088 1030 }

+1 -5

app/(home-pages)/discover/getPublications.ts

··· 5 5 normalizePublicationRow, 6 6 hasValidPublication, 7 7 } from "src/utils/normalizeRecords"; 8 8 - import { deduplicateByUri } from "src/utils/deduplicateRecords"; 9 8 10 9 export type Cursor = { 11 10 indexed_at?: string; ··· 43 42 return { publications: [], nextCursor: null }; 44 43 } 45 44 46 46 - // Deduplicate records that may exist under both pub.leaflet and site.standard namespaces 47 47 - const dedupedPublications = deduplicateByUri(publications || []); 48 48 - 49 45 // Filter out publications without documents 50 50 - const allPubs = dedupedPublications.filter( 46 46 + const allPubs = (publications || []).filter( 51 47 (pub) => pub.documents_in_publications.length > 0, 52 48 ); 53 49

-44

app/(home-pages)/notifications/BskyPostEmbedNotification.tsx

··· 1 1 - import { BlueskyTiny } from "components/Icons/BlueskyTiny"; 2 2 - import { ContentLayout, Notification } from "./Notification"; 3 3 - import { HydratedBskyPostEmbedNotification } from "src/notifications"; 4 4 - import { AtUri } from "@atproto/api"; 5 5 - 6 6 - export const BskyPostEmbedNotification = ( 7 7 - props: HydratedBskyPostEmbedNotification, 8 8 - ) => { 9 9 - const docRecord = props.normalizedDocument; 10 10 - const pubRecord = props.normalizedPublication; 11 11 - 12 12 - if (!docRecord) return null; 13 13 - 14 14 - const docUri = new AtUri(props.document.uri); 15 15 - const rkey = docUri.rkey; 16 16 - const did = docUri.host; 17 17 - 18 18 - const href = pubRecord ? `${pubRecord.url}/${rkey}` : `/p/${did}/${rkey}`; 19 19 - 20 20 - const embedder = props.documentCreatorHandle 21 21 - ? `@${props.documentCreatorHandle}` 22 22 - : "Someone"; 23 23 - 24 24 - return ( 25 25 - <Notification 26 26 - timestamp={props.created_at} 27 27 - href={href} 28 28 - icon={<BlueskyTiny />} 29 29 - actionText={<>{embedder} embedded your Bluesky post</>} 30 30 - content={ 31 31 - <ContentLayout postTitle={docRecord.title} pubRecord={pubRecord}> 32 32 - {props.bskyPostText && ( 33 33 - <pre 34 34 - style={{ wordBreak: "break-word" }} 35 35 - className="whitespace-pre-wrap text-secondary line-clamp-3 text-sm" 36 36 - > 37 37 - {props.bskyPostText} 38 38 - </pre> 39 39 - )} 40 40 - </ContentLayout> 41 41 - } 42 42 - /> 43 43 - ); 44 44 - };

-4

app/(home-pages)/notifications/NotificationList.tsx

··· 8 8 import { useIdentityData } from "components/IdentityProvider"; 9 9 import { FollowNotification } from "./FollowNotification"; 10 10 import { QuoteNotification } from "./QuoteNotification"; 11 11 - import { BskyPostEmbedNotification } from "./BskyPostEmbedNotification"; 12 11 import { MentionNotification } from "./MentionNotification"; 13 12 import { CommentMentionNotification } from "./CommentMentionNotification"; 14 13 ··· 48 47 } 49 48 if (n.type === "quote") { 50 49 return <QuoteNotification key={n.id} {...n} />; 51 51 - } 52 52 - if (n.type === "bsky_post_embed") { 53 53 - return <BskyPostEmbedNotification key={n.id} {...n} />; 54 50 } 55 51 if (n.type === "mention") { 56 52 return <MentionNotification key={n.id} {...n} />;

+1 -1

app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx

··· 16 16 popover?: boolean; 17 17 }) => { 18 18 let profileRecord = props.profile; 19 19 - const profileUrl = `https://leaflet.pub/p/${props.profile.handle}`; 19 19 + const profileUrl = `/p/${props.profile.handle}`; 20 20 21 21 const avatarElement = ( 22 22 <Avatar

+1 -6

app/(home-pages)/p/[didOrHandle]/getProfilePosts.ts

··· 7 7 normalizeDocumentRecord, 8 8 normalizePublicationRecord, 9 9 } from "src/utils/normalizeRecords"; 10 10 - import { deduplicateByUriOrdered } from "src/utils/deduplicateRecords"; 11 10 12 11 export type Cursor = { 13 12 indexed_at: string; ··· 39 38 ); 40 39 } 41 40 42 42 - let [{ data: rawDocs }, { data: rawPubs }, { data: profile }] = await Promise.all([ 41 41 + let [{ data: docs }, { data: pubs }, { data: profile }] = await Promise.all([ 43 42 query, 44 43 supabaseServerClient 45 44 .from("publications") ··· 51 50 .eq("did", did) 52 51 .single(), 53 52 ]); 54 54 - 55 55 - // Deduplicate records that may exist under both pub.leaflet and site.standard namespaces 56 56 - const docs = deduplicateByUriOrdered(rawDocs || []); 57 57 - const pubs = deduplicateByUriOrdered(rawPubs || []); 58 53 59 54 // Build a map of publications for quick lookup 60 55 let pubMap = new Map<string, NonNullable<typeof pubs>[number]>();

+2 -6

app/(home-pages)/reader/getReaderFeed.ts

··· 14 14 type NormalizedDocument, 15 15 type NormalizedPublication, 16 16 } from "src/utils/normalizeRecords"; 17 17 - import { deduplicateByUriOrdered } from "src/utils/deduplicateRecords"; 18 17 19 18 export type Cursor = { 20 19 timestamp: string; ··· 46 45 `indexed_at.lt.${cursor.timestamp},and(indexed_at.eq.${cursor.timestamp},uri.lt.${cursor.uri})`, 47 46 ); 48 47 } 49 49 - let { data: rawFeed, error } = await query; 50 50 - 51 51 - // Deduplicate records that may exist under both pub.leaflet and site.standard namespaces 52 52 - const feed = deduplicateByUriOrdered(rawFeed || []); 48 48 + let { data: feed, error } = await query; 53 49 54 50 let posts = ( 55 51 await Promise.all( 56 56 - feed.map(async (post) => { 52 52 + feed?.map(async (post) => { 57 53 let pub = post.documents_in_publications[0].publications!; 58 54 let uri = new AtUri(post.uri); 59 55 let handle = await idResolver.did.resolve(uri.host);

+1 -5

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

··· 9 9 normalizeDocumentRecord, 10 10 normalizePublicationRecord, 11 11 } from "src/utils/normalizeRecords"; 12 12 - import { deduplicateByUriOrdered } from "src/utils/deduplicateRecords"; 13 12 14 13 export async function getDocumentsByTag( 15 14 tag: string, 16 15 ): Promise<{ posts: Post[] }> { 17 16 // Query documents that have this tag 18 18 - const { data: rawDocuments, error } = await supabaseServerClient 17 17 + const { data: documents, error } = await supabaseServerClient 19 18 .from("documents") 20 19 .select( 21 20 `*, ··· 31 30 console.error("Error fetching documents by tag:", error); 32 31 return { posts: [] }; 33 32 } 34 34 - 35 35 - // Deduplicate records that may exist under both pub.leaflet and site.standard namespaces 36 36 - const documents = deduplicateByUriOrdered(rawDocuments || []); 37 33 38 34 const posts = await Promise.all( 39 35 documents.map(async (doc) => {

+1 -17

app/[leaflet_id]/Footer.tsx

··· 8 8 import { HomeButton } from "app/[leaflet_id]/actions/HomeButton"; 9 9 import { PublishButton } from "./actions/PublishButton"; 10 10 import { useEntitySetContext } from "components/EntitySetProvider"; 11 11 + import { HelpButton } from "app/[leaflet_id]/actions/HelpButton"; 11 12 import { Watermark } from "components/Watermark"; 12 13 import { BackToPubButton } from "./actions/BackToPubButton"; 13 14 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 14 15 import { useIdentityData } from "components/IdentityProvider"; 15 15 - import { useEntity } from "src/replicache"; 16 16 - import { block } from "sharp"; 17 16 18 18 - export function hasBlockToolbar(blockType: string | null | undefined) { 19 19 - return ( 20 20 - blockType === "text" || 21 21 - blockType === "heading" || 22 22 - blockType === "blockquote" || 23 23 - blockType === "button" || 24 24 - blockType === "datetime" || 25 25 - blockType === "image" 26 26 - ); 27 27 - } 28 17 export function LeafletFooter(props: { entityID: string }) { 29 18 let focusedBlock = useUIState((s) => s.focusedEntity); 30 30 - 31 19 let entity_set = useEntitySetContext(); 32 20 let { identity } = useIdentityData(); 33 21 let { data: pub } = useLeafletPublicationData(); 34 34 - let blockType = useEntity(focusedBlock?.entityID || null, "block/type")?.data 35 35 - .value; 36 22 37 23 return ( 38 24 <Media mobile className="mobileFooter w-full z-10 touch-none -mt-[54px] "> 39 25 {focusedBlock && 40 26 focusedBlock.entityType == "block" && 41 41 - hasBlockToolbar(blockType) && 42 27 entity_set.permissions.write ? ( 43 28 <div 44 29 className="w-full z-10 p-2 flex bg-bg-page pwa-padding-bottom" ··· 49 34 <Toolbar 50 35 pageID={focusedBlock.parent} 51 36 blockID={focusedBlock.entityID} 52 52 - blockType={blockType} 53 37 /> 54 38 </div> 55 39 ) : entity_set.permissions.write ? (

+304 -377

app/api/inngest/functions/migrate_user_to_standard.ts

··· 1 1 import { supabaseServerClient } from "supabase/serverClient"; 2 2 import { inngest } from "../client"; 3 3 import { restoreOAuthSession } from "src/atproto-oauth"; 4 4 - import { 5 5 - AtpBaseClient, 6 6 - SiteStandardPublication, 7 7 - SiteStandardDocument, 8 8 - SiteStandardGraphSubscription, 9 9 - } from "lexicons/api"; 4 4 + import { AtpBaseClient, SiteStandardPublication, SiteStandardDocument, SiteStandardGraphSubscription } from "lexicons/api"; 10 5 import { AtUri } from "@atproto/syntax"; 11 6 import { Json } from "supabase/database.types"; 12 12 - import { 13 13 - normalizePublicationRecord, 14 14 - normalizeDocumentRecord, 15 15 - } from "src/utils/normalizeRecords"; 7 7 + import { normalizePublicationRecord, normalizeDocumentRecord } from "src/utils/normalizeRecords"; 16 8 17 9 type MigrationResult = 18 10 | { success: true; oldUri: string; newUri: string; skipped?: boolean } ··· 25 17 } 26 18 const credentialSession = result.value; 27 19 return new AtpBaseClient( 28 28 - credentialSession.fetchHandler.bind(credentialSession), 20 20 + credentialSession.fetchHandler.bind(credentialSession) 29 21 ); 30 22 } 31 23 ··· 47 39 await step.run("verify-oauth-session", async () => { 48 40 const result = await restoreOAuthSession(did); 49 41 if (!result.ok) { 50 50 - throw new Error( 51 51 - `Failed to restore OAuth session: ${result.error.message}`, 52 52 - ); 42 42 + throw new Error(`Failed to restore OAuth session: ${result.error.message}`); 53 43 } 54 44 return { success: true }; 55 45 }); 56 46 57 47 // Step 2: Get user's pub.leaflet.publication records 58 58 - const oldPublications = await step.run( 59 59 - "fetch-old-publications", 60 60 - async () => { 61 61 - const { data, error } = await supabaseServerClient 62 62 - .from("publications") 63 63 - .select("*") 64 64 - .eq("identity_did", did) 65 65 - .like("uri", `at://${did}/pub.leaflet.publication/%`); 48 48 + const oldPublications = await step.run("fetch-old-publications", async () => { 49 49 + const { data, error } = await supabaseServerClient 50 50 + .from("publications") 51 51 + .select("*") 52 52 + .eq("identity_did", did) 53 53 + .like("uri", `at://${did}/pub.leaflet.publication/%`); 66 54 67 67 - if (error) 68 68 - throw new Error(`Failed to fetch publications: ${error.message}`); 69 69 - return data || []; 70 70 - }, 71 71 - ); 55 55 + if (error) throw new Error(`Failed to fetch publications: ${error.message}`); 56 56 + return data || []; 57 57 + }); 72 58 73 73 - // Step 3: Migrate all publications in parallel 59 59 + // Step 3: Migrate each publication 74 60 const publicationUriMap: Record<string, string> = {}; // old URI -> new URI 75 61 76 76 - // Prepare publications that need migration 77 77 - const publicationsToMigrate = oldPublications 78 78 - .map((pub) => { 79 79 - const aturi = new AtUri(pub.uri); 62 62 + for (const pub of oldPublications) { 63 63 + const aturi = new AtUri(pub.uri); 80 64 81 81 - // Skip if already a site.standard.publication 82 82 - if (aturi.collection === "site.standard.publication") { 83 83 - publicationUriMap[pub.uri] = pub.uri; 84 84 - return null; 85 85 - } 65 65 + // Skip if already a site.standard.publication 66 66 + if (aturi.collection === "site.standard.publication") { 67 67 + publicationUriMap[pub.uri] = pub.uri; 68 68 + continue; 69 69 + } 86 70 87 87 - const rkey = aturi.rkey; 88 88 - const normalized = normalizePublicationRecord(pub.record); 71 71 + const rkey = aturi.rkey; 72 72 + const normalized = normalizePublicationRecord(pub.record); 73 73 + 74 74 + if (!normalized) { 75 75 + stats.errors.push(`Publication ${pub.uri}: Failed to normalize publication record`); 76 76 + continue; 77 77 + } 89 78 90 90 - if (!normalized) { 91 91 - stats.errors.push( 92 92 - `Publication ${pub.uri}: Failed to normalize publication record`, 93 93 - ); 94 94 - return null; 95 95 - } 79 79 + // Build site.standard.publication record 80 80 + const newRecord: SiteStandardPublication.Record = { 81 81 + $type: "site.standard.publication", 82 82 + name: normalized.name, 83 83 + url: normalized.url, 84 84 + description: normalized.description, 85 85 + icon: normalized.icon, 86 86 + theme: normalized.theme, 87 87 + basicTheme: normalized.basicTheme, 88 88 + preferences: normalized.preferences, 89 89 + }; 96 90 97 97 - const newRecord: SiteStandardPublication.Record = { 98 98 - $type: "site.standard.publication", 99 99 - name: normalized.name, 100 100 - url: normalized.url, 101 101 - description: normalized.description, 102 102 - icon: normalized.icon, 103 103 - theme: normalized.theme, 104 104 - basicTheme: normalized.basicTheme, 105 105 - preferences: normalized.preferences, 106 106 - }; 91 91 + // Step: Write to PDS 92 92 + const pdsResult = await step.run(`pds-write-publication-${pub.uri}`, async () => { 93 93 + const agent = await createAuthenticatedAgent(did); 94 94 + const putResult = await agent.com.atproto.repo.putRecord({ 95 95 + repo: did, 96 96 + collection: "site.standard.publication", 97 97 + rkey, 98 98 + record: newRecord, 99 99 + validate: false, 100 100 + }); 101 101 + return { newUri: putResult.data.uri }; 102 102 + }); 107 103 108 108 - return { pub, rkey, normalized, newRecord }; 109 109 - }) 110 110 - .filter((x) => x !== null); 104 104 + const newUri = pdsResult.newUri; 111 105 112 112 - // Run all PDS writes in parallel 113 113 - const pubPdsResults = await Promise.all( 114 114 - publicationsToMigrate.map(({ pub, rkey, newRecord }) => 115 115 - step.run(`pds-write-publication-${pub.uri}`, async () => { 116 116 - const agent = await createAuthenticatedAgent(did); 117 117 - const putResult = await agent.com.atproto.repo.putRecord({ 118 118 - repo: did, 119 119 - collection: "site.standard.publication", 120 120 - rkey, 121 121 - record: newRecord, 122 122 - validate: false, 106 106 + // Step: Write to database 107 107 + const dbResult = await step.run(`db-write-publication-${pub.uri}`, async () => { 108 108 + const { error: dbError } = await supabaseServerClient 109 109 + .from("publications") 110 110 + .upsert({ 111 111 + uri: newUri, 112 112 + identity_did: did, 113 113 + name: normalized.name, 114 114 + record: newRecord as Json, 123 115 }); 124 124 - return { oldUri: pub.uri, newUri: putResult.data.uri }; 125 125 - }), 126 126 - ), 127 127 - ); 128 116 129 129 - // Run all DB writes in parallel 130 130 - const pubDbResults = await Promise.all( 131 131 - publicationsToMigrate.map(({ pub, normalized, newRecord }, index) => { 132 132 - const newUri = pubPdsResults[index].newUri; 133 133 - return step.run(`db-write-publication-${pub.uri}`, async () => { 134 134 - const { error: dbError } = await supabaseServerClient 135 135 - .from("publications") 136 136 - .upsert({ 137 137 - uri: newUri, 138 138 - identity_did: did, 139 139 - name: normalized.name, 140 140 - record: newRecord as Json, 141 141 - }); 142 142 - 143 143 - if (dbError) { 144 144 - return { 145 145 - success: false as const, 146 146 - oldUri: pub.uri, 147 147 - newUri, 148 148 - error: dbError.message, 149 149 - }; 150 150 - } 151 151 - return { success: true as const, oldUri: pub.uri, newUri }; 152 152 - }); 153 153 - }), 154 154 - ); 117 117 + if (dbError) { 118 118 + return { success: false as const, error: dbError.message }; 119 119 + } 120 120 + return { success: true as const }; 121 121 + }); 155 122 156 156 - // Process results 157 157 - for (const result of pubDbResults) { 158 158 - if (result.success) { 159 159 - publicationUriMap[result.oldUri] = result.newUri; 123 123 + if (dbResult.success) { 124 124 + publicationUriMap[pub.uri] = newUri; 160 125 stats.publicationsMigrated++; 161 126 } else { 162 162 - stats.errors.push( 163 163 - `Publication ${result.oldUri}: Database error: ${result.error}`, 164 164 - ); 127 127 + stats.errors.push(`Publication ${pub.uri}: Database error: ${dbResult.error}`); 165 128 } 166 129 } 167 130 168 168 - // Step 4: Get ALL user's documents and their publication associations in parallel 169 169 - const [oldDocuments, allDocumentPublications] = await Promise.all([ 170 170 - step.run("fetch-old-documents", async () => { 171 171 - const { data, error } = await supabaseServerClient 172 172 - .from("documents") 173 173 - .select("uri, data") 174 174 - .like("uri", `at://${did}/pub.leaflet.document/%`); 131 131 + // Step 4: Get ALL user's pub.leaflet.document records (both in publications and standalone) 132 132 + const oldDocuments = await step.run("fetch-old-documents", async () => { 133 133 + const { data, error } = await supabaseServerClient 134 134 + .from("documents") 135 135 + .select("uri, data") 136 136 + .like("uri", `at://${did}/pub.leaflet.document/%`); 137 137 + 138 138 + if (error) throw new Error(`Failed to fetch documents: ${error.message}`); 139 139 + return data || []; 140 140 + }); 141 141 + 142 142 + // Also fetch publication associations for documents 143 143 + const documentPublicationMap = await step.run("fetch-document-publications", async () => { 144 144 + const docUris = oldDocuments.map(d => d.uri); 145 145 + if (docUris.length === 0) return {}; 175 146 176 176 - if (error) 177 177 - throw new Error(`Failed to fetch documents: ${error.message}`); 178 178 - return data || []; 179 179 - }), 180 180 - step.run("fetch-document-publications", async () => { 181 181 - const { data, error } = await supabaseServerClient 182 182 - .from("documents_in_publications") 183 183 - .select("document, publication") 184 184 - .like("document", `at://${did}/pub.leaflet.document/%`); 147 147 + const { data, error } = await supabaseServerClient 148 148 + .from("documents_in_publications") 149 149 + .select("document, publication") 150 150 + .in("document", docUris); 185 151 186 186 - if (error) 187 187 - throw new Error( 188 188 - `Failed to fetch document publications: ${error.message}`, 189 189 - ); 190 190 - return data || []; 191 191 - }), 192 192 - ]); 152 152 + if (error) throw new Error(`Failed to fetch document publications: ${error.message}`); 193 153 194 194 - // Create a map of document URI -> publication URI 195 195 - const documentPublicationMap: Record<string, string> = {}; 196 196 - for (const row of allDocumentPublications) { 197 197 - documentPublicationMap[row.document] = row.publication; 198 198 - } 154 154 + // Create a map of document URI -> publication URI 155 155 + const map: Record<string, string> = {}; 156 156 + for (const row of data || []) { 157 157 + map[row.document] = row.publication; 158 158 + } 159 159 + return map; 160 160 + }); 199 161 200 162 const documentUriMap: Record<string, string> = {}; // old URI -> new URI 201 163 202 202 - // Prepare documents that need migration 203 203 - const documentsToMigrate = oldDocuments 204 204 - .map((doc) => { 205 205 - const aturi = new AtUri(doc.uri); 164 164 + for (const doc of oldDocuments) { 165 165 + const aturi = new AtUri(doc.uri); 206 166 207 207 - // Skip if already a site.standard.document 208 208 - if (aturi.collection === "site.standard.document") { 209 209 - documentUriMap[doc.uri] = doc.uri; 210 210 - return null; 211 211 - } 167 167 + // Skip if already a site.standard.document 168 168 + if (aturi.collection === "site.standard.document") { 169 169 + documentUriMap[doc.uri] = doc.uri; 170 170 + continue; 171 171 + } 212 172 213 213 - const rkey = aturi.rkey; 214 214 - const normalized = normalizeDocumentRecord(doc.data, doc.uri); 173 173 + const rkey = aturi.rkey; 174 174 + const normalized = normalizeDocumentRecord(doc.data, doc.uri); 215 175 216 216 - if (!normalized) { 217 217 - stats.errors.push( 218 218 - `Document ${doc.uri}: Failed to normalize document record`, 219 219 - ); 220 220 - return null; 221 221 - } 176 176 + if (!normalized) { 177 177 + stats.errors.push(`Document ${doc.uri}: Failed to normalize document record`); 178 178 + continue; 179 179 + } 222 180 223 223 - // Determine the site field: 224 224 - // - If document is in a publication, use the new publication URI (if migrated) or old URI 225 225 - // - If standalone, use the HTTPS URL format 226 226 - const oldPubUri = documentPublicationMap[doc.uri]; 227 227 - let siteValue: string; 181 181 + // Determine the site field: 182 182 + // - If document is in a publication, use the new publication URI (if migrated) or old URI 183 183 + // - If standalone, use the HTTPS URL format 184 184 + const oldPubUri = documentPublicationMap[doc.uri]; 185 185 + let siteValue: string; 186 186 + 187 187 + if (oldPubUri) { 188 188 + // Document is in a publication - use new URI if migrated, otherwise keep old 189 189 + siteValue = publicationUriMap[oldPubUri] || oldPubUri; 190 190 + } else { 191 191 + // Standalone document - use HTTPS URL format 192 192 + siteValue = `https://leaflet.pub/p/${did}`; 193 193 + } 228 194 229 229 - if (oldPubUri) { 230 230 - // Document is in a publication - use new URI if migrated, otherwise keep old 231 231 - siteValue = publicationUriMap[oldPubUri] || oldPubUri; 232 232 - } else { 233 233 - // Standalone document - use HTTPS URL format 234 234 - siteValue = `https://leaflet.pub/p/${did}`; 235 235 - } 195 195 + // Build site.standard.document record 196 196 + const newRecord: SiteStandardDocument.Record = { 197 197 + $type: "site.standard.document", 198 198 + title: normalized.title || "Untitled", 199 199 + site: siteValue, 200 200 + path: rkey, 201 201 + publishedAt: normalized.publishedAt || new Date().toISOString(), 202 202 + description: normalized.description, 203 203 + content: normalized.content, 204 204 + tags: normalized.tags, 205 205 + coverImage: normalized.coverImage, 206 206 + bskyPostRef: normalized.bskyPostRef, 207 207 + }; 236 208 237 237 - // Build site.standard.document record 238 238 - const newRecord: SiteStandardDocument.Record = { 239 239 - $type: "site.standard.document", 240 240 - title: normalized.title || "Untitled", 241 241 - site: siteValue, 242 242 - path: rkey, 243 243 - publishedAt: normalized.publishedAt || new Date().toISOString(), 244 244 - description: normalized.description, 245 245 - content: normalized.content, 246 246 - tags: normalized.tags, 247 247 - coverImage: normalized.coverImage, 248 248 - bskyPostRef: normalized.bskyPostRef, 249 249 - }; 209 209 + // Step: Write to PDS 210 210 + const pdsResult = await step.run(`pds-write-document-${doc.uri}`, async () => { 211 211 + const agent = await createAuthenticatedAgent(did); 212 212 + const putResult = await agent.com.atproto.repo.putRecord({ 213 213 + repo: did, 214 214 + collection: "site.standard.document", 215 215 + rkey, 216 216 + record: newRecord, 217 217 + validate: false, 218 218 + }); 219 219 + return { newUri: putResult.data.uri }; 220 220 + }); 250 221 251 251 - return { doc, rkey, normalized, newRecord, oldPubUri }; 252 252 - }) 253 253 - .filter((x) => x !== null); 222 222 + const newUri = pdsResult.newUri; 254 223 255 255 - // Run all PDS writes in parallel 256 256 - const docPdsResults = await Promise.all( 257 257 - documentsToMigrate.map(({ doc, rkey, newRecord }) => 258 258 - step.run(`pds-write-document-${doc.uri}`, async () => { 259 259 - const agent = await createAuthenticatedAgent(did); 260 260 - const putResult = await agent.com.atproto.repo.putRecord({ 261 261 - repo: did, 262 262 - collection: "site.standard.document", 263 263 - rkey, 264 264 - record: newRecord, 265 265 - validate: false, 224 224 + // Step: Write to database 225 225 + const dbResult = await step.run(`db-write-document-${doc.uri}`, async () => { 226 226 + const { error: dbError } = await supabaseServerClient 227 227 + .from("documents") 228 228 + .upsert({ 229 229 + uri: newUri, 230 230 + data: newRecord as Json, 266 231 }); 267 267 - return { oldUri: doc.uri, newUri: putResult.data.uri }; 268 268 - }), 269 269 - ), 270 270 - ); 271 232 272 272 - // Run all DB writes in parallel 273 273 - const docDbResults = await Promise.all( 274 274 - documentsToMigrate.map(({ doc, newRecord, oldPubUri }, index) => { 275 275 - const newUri = docPdsResults[index].newUri; 276 276 - return step.run(`db-write-document-${doc.uri}`, async () => { 277 277 - const { error: dbError } = await supabaseServerClient 278 278 - .from("documents") 233 233 + if (dbError) { 234 234 + return { success: false as const, error: dbError.message }; 235 235 + } 236 236 + 237 237 + // If document was in a publication, add to documents_in_publications with new URIs 238 238 + if (oldPubUri) { 239 239 + const newPubUri = publicationUriMap[oldPubUri] || oldPubUri; 240 240 + await supabaseServerClient 241 241 + .from("documents_in_publications") 279 242 .upsert({ 280 280 - uri: newUri, 281 281 - data: newRecord as Json, 243 243 + publication: newPubUri, 244 244 + document: newUri, 282 245 }); 246 246 + } 283 247 284 284 - if (dbError) { 285 285 - return { 286 286 - success: false as const, 287 287 - oldUri: doc.uri, 288 288 - newUri, 289 289 - error: dbError.message, 290 290 - }; 291 291 - } 248 248 + return { success: true as const }; 249 249 + }); 292 250 293 293 - // If document was in a publication, add to documents_in_publications with new URIs 294 294 - if (oldPubUri) { 295 295 - const newPubUri = publicationUriMap[oldPubUri] || oldPubUri; 296 296 - await supabaseServerClient 297 297 - .from("documents_in_publications") 298 298 - .upsert({ 299 299 - publication: newPubUri, 300 300 - document: newUri, 301 301 - }); 302 302 - } 303 303 - 304 304 - return { success: true as const, oldUri: doc.uri, newUri }; 305 305 - }); 306 306 - }), 307 307 - ); 308 308 - 309 309 - // Process results 310 310 - for (const result of docDbResults) { 311 311 - if (result.success) { 312 312 - documentUriMap[result.oldUri] = result.newUri; 251 251 + if (dbResult.success) { 252 252 + documentUriMap[doc.uri] = newUri; 313 253 stats.documentsMigrated++; 314 254 } else { 315 315 - stats.errors.push( 316 316 - `Document ${result.oldUri}: Database error: ${result.error}`, 317 317 - ); 255 255 + stats.errors.push(`Document ${doc.uri}: Database error: ${dbResult.error}`); 318 256 } 319 257 } 320 258 321 321 - // Step 5: Update references in database tables (all in parallel) 259 259 + // Step 5: Update references in database tables 322 260 await step.run("update-references", async () => { 323 323 - const pubEntries = Object.entries(publicationUriMap); 324 324 - const docEntries = Object.entries(documentUriMap); 261 261 + // Update leaflets_in_publications - update publication and doc references 262 262 + for (const [oldUri, newUri] of Object.entries(publicationUriMap)) { 263 263 + const { error } = await supabaseServerClient 264 264 + .from("leaflets_in_publications") 265 265 + .update({ publication: newUri }) 266 266 + .eq("publication", oldUri); 325 267 326 326 - const updatePromises = [ 327 327 - // Update leaflets_in_publications - publication references 328 328 - ...pubEntries.map(([oldUri, newUri]) => 329 329 - supabaseServerClient 330 330 - .from("leaflets_in_publications") 331 331 - .update({ publication: newUri }) 332 332 - .eq("publication", oldUri), 333 333 - ), 334 334 - // Update leaflets_in_publications - doc references 335 335 - ...docEntries.map(([oldUri, newUri]) => 336 336 - supabaseServerClient 337 337 - .from("leaflets_in_publications") 338 338 - .update({ doc: newUri }) 339 339 - .eq("doc", oldUri), 340 340 - ), 341 341 - // Update leaflets_to_documents - document references 342 342 - ...docEntries.map(([oldUri, newUri]) => 343 343 - supabaseServerClient 344 344 - .from("leaflets_to_documents") 345 345 - .update({ document: newUri }) 346 346 - .eq("document", oldUri), 347 347 - ), 348 348 - // Update publication_domains - publication references 349 349 - ...pubEntries.map(([oldUri, newUri]) => 350 350 - supabaseServerClient 351 351 - .from("publication_domains") 352 352 - .update({ publication: newUri }) 353 353 - .eq("publication", oldUri), 354 354 - ), 355 355 - // Update comments_on_documents - document references 356 356 - ...docEntries.map(([oldUri, newUri]) => 357 357 - supabaseServerClient 358 358 - .from("comments_on_documents") 359 359 - .update({ document: newUri }) 360 360 - .eq("document", oldUri), 361 361 - ), 362 362 - // Update document_mentions_in_bsky - document references 363 363 - ...docEntries.map(([oldUri, newUri]) => 364 364 - supabaseServerClient 365 365 - .from("document_mentions_in_bsky") 366 366 - .update({ document: newUri }) 367 367 - .eq("document", oldUri), 368 368 - ), 369 369 - // Update subscribers_to_publications - publication references 370 370 - ...pubEntries.map(([oldUri, newUri]) => 371 371 - supabaseServerClient 372 372 - .from("subscribers_to_publications") 373 373 - .update({ publication: newUri }) 374 374 - .eq("publication", oldUri), 375 375 - ), 376 376 - // Update publication_subscriptions - publication references 377 377 - ...pubEntries.map(([oldUri, newUri]) => 378 378 - supabaseServerClient 379 379 - .from("publication_subscriptions") 380 380 - .update({ publication: newUri }) 381 381 - .eq("publication", oldUri), 382 382 - ), 383 383 - ]; 268 268 + if (!error) stats.referencesUpdated++; 269 269 + } 270 270 + 271 271 + for (const [oldUri, newUri] of Object.entries(documentUriMap)) { 272 272 + const { error } = await supabaseServerClient 273 273 + .from("leaflets_in_publications") 274 274 + .update({ doc: newUri }) 275 275 + .eq("doc", oldUri); 276 276 + 277 277 + if (!error) stats.referencesUpdated++; 278 278 + } 279 279 + 280 280 + // Update leaflets_to_documents - update document references 281 281 + for (const [oldUri, newUri] of Object.entries(documentUriMap)) { 282 282 + const { error } = await supabaseServerClient 283 283 + .from("leaflets_to_documents") 284 284 + .update({ document: newUri }) 285 285 + .eq("document", oldUri); 286 286 + 287 287 + if (!error) stats.referencesUpdated++; 288 288 + } 289 289 + 290 290 + // Update publication_domains - update publication references 291 291 + for (const [oldUri, newUri] of Object.entries(publicationUriMap)) { 292 292 + const { error } = await supabaseServerClient 293 293 + .from("publication_domains") 294 294 + .update({ publication: newUri }) 295 295 + .eq("publication", oldUri); 296 296 + 297 297 + if (!error) stats.referencesUpdated++; 298 298 + } 384 299 385 385 - const results = await Promise.all(updatePromises); 386 386 - stats.referencesUpdated = results.filter((r) => !r.error).length; 300 300 + // Update comments_on_documents - update document references 301 301 + for (const [oldUri, newUri] of Object.entries(documentUriMap)) { 302 302 + const { error } = await supabaseServerClient 303 303 + .from("comments_on_documents") 304 304 + .update({ document: newUri }) 305 305 + .eq("document", oldUri); 306 306 + 307 307 + if (!error) stats.referencesUpdated++; 308 308 + } 309 309 + 310 310 + // Update document_mentions_in_bsky - update document references 311 311 + for (const [oldUri, newUri] of Object.entries(documentUriMap)) { 312 312 + const { error } = await supabaseServerClient 313 313 + .from("document_mentions_in_bsky") 314 314 + .update({ document: newUri }) 315 315 + .eq("document", oldUri); 316 316 + 317 317 + if (!error) stats.referencesUpdated++; 318 318 + } 319 319 + 320 320 + // Update subscribers_to_publications - update publication references 321 321 + for (const [oldUri, newUri] of Object.entries(publicationUriMap)) { 322 322 + const { error } = await supabaseServerClient 323 323 + .from("subscribers_to_publications") 324 324 + .update({ publication: newUri }) 325 325 + .eq("publication", oldUri); 326 326 + 327 327 + if (!error) stats.referencesUpdated++; 328 328 + } 329 329 + 330 330 + // Update publication_subscriptions - update publication references for incoming subscriptions 331 331 + for (const [oldUri, newUri] of Object.entries(publicationUriMap)) { 332 332 + const { error } = await supabaseServerClient 333 333 + .from("publication_subscriptions") 334 334 + .update({ publication: newUri }) 335 335 + .eq("publication", oldUri); 336 336 + 337 337 + if (!error) stats.referencesUpdated++; 338 338 + } 339 339 + 387 340 return stats.referencesUpdated; 388 341 }); 389 342 390 343 // Step 6: Migrate user's own subscriptions - subscriptions BY this user to other publications 391 391 - const userSubscriptions = await step.run( 392 392 - "fetch-user-subscriptions", 393 393 - async () => { 394 394 - const { data, error } = await supabaseServerClient 395 395 - .from("publication_subscriptions") 396 396 - .select("*") 397 397 - .eq("identity", did) 398 398 - .like("uri", `at://${did}/pub.leaflet.graph.subscription/%`); 344 344 + const userSubscriptions = await step.run("fetch-user-subscriptions", async () => { 345 345 + const { data, error } = await supabaseServerClient 346 346 + .from("publication_subscriptions") 347 347 + .select("*") 348 348 + .eq("identity", did) 349 349 + .like("uri", `at://${did}/pub.leaflet.graph.subscription/%`); 399 350 400 400 - if (error) 401 401 - throw new Error( 402 402 - `Failed to fetch user subscriptions: ${error.message}`, 403 403 - ); 404 404 - return data || []; 405 405 - }, 406 406 - ); 351 351 + if (error) throw new Error(`Failed to fetch user subscriptions: ${error.message}`); 352 352 + return data || []; 353 353 + }); 407 354 408 355 const userSubscriptionUriMap: Record<string, string> = {}; // old URI -> new URI 409 356 410 410 - // Prepare subscriptions that need migration 411 411 - const subscriptionsToMigrate = userSubscriptions 412 412 - .map((sub) => { 413 413 - const aturi = new AtUri(sub.uri); 357 357 + for (const sub of userSubscriptions) { 358 358 + const aturi = new AtUri(sub.uri); 414 359 415 415 - // Skip if already a site.standard.graph.subscription 416 416 - if (aturi.collection === "site.standard.graph.subscription") { 417 417 - userSubscriptionUriMap[sub.uri] = sub.uri; 418 418 - return null; 419 419 - } 360 360 + // Skip if already a site.standard.graph.subscription 361 361 + if (aturi.collection === "site.standard.graph.subscription") { 362 362 + userSubscriptionUriMap[sub.uri] = sub.uri; 363 363 + continue; 364 364 + } 420 365 421 421 - const rkey = aturi.rkey; 422 422 - const newRecord: SiteStandardGraphSubscription.Record = { 423 423 - $type: "site.standard.graph.subscription", 424 424 - publication: sub.publication, 425 425 - }; 366 366 + const rkey = aturi.rkey; 426 367 427 427 - return { sub, rkey, newRecord }; 428 428 - }) 429 429 - .filter((x) => x !== null); 368 368 + // Build site.standard.graph.subscription record 369 369 + const newRecord: SiteStandardGraphSubscription.Record = { 370 370 + $type: "site.standard.graph.subscription", 371 371 + publication: sub.publication, 372 372 + }; 430 373 431 431 - // Run all PDS writes in parallel 432 432 - const subPdsResults = await Promise.all( 433 433 - subscriptionsToMigrate.map(({ sub, rkey, newRecord }) => 434 434 - step.run(`pds-write-subscription-${sub.uri}`, async () => { 435 435 - const agent = await createAuthenticatedAgent(did); 436 436 - const putResult = await agent.com.atproto.repo.putRecord({ 437 437 - repo: did, 438 438 - collection: "site.standard.graph.subscription", 439 439 - rkey, 440 440 - record: newRecord, 441 441 - validate: false, 442 442 - }); 443 443 - return { oldUri: sub.uri, newUri: putResult.data.uri }; 444 444 - }), 445 445 - ), 446 446 - ); 374 374 + // Step: Write to PDS 375 375 + const pdsResult = await step.run(`pds-write-subscription-${sub.uri}`, async () => { 376 376 + const agent = await createAuthenticatedAgent(did); 377 377 + const putResult = await agent.com.atproto.repo.putRecord({ 378 378 + repo: did, 379 379 + collection: "site.standard.graph.subscription", 380 380 + rkey, 381 381 + record: newRecord, 382 382 + validate: false, 383 383 + }); 384 384 + return { newUri: putResult.data.uri }; 385 385 + }); 386 386 + 387 387 + const newUri = pdsResult.newUri; 447 388 448 448 - // Run all DB writes in parallel 449 449 - const subDbResults = await Promise.all( 450 450 - subscriptionsToMigrate.map(({ sub, newRecord }, index) => { 451 451 - const newUri = subPdsResults[index].newUri; 452 452 - return step.run(`db-write-subscription-${sub.uri}`, async () => { 453 453 - const { error: dbError } = await supabaseServerClient 454 454 - .from("publication_subscriptions") 455 455 - .update({ 456 456 - uri: newUri, 457 457 - record: newRecord as Json, 458 458 - }) 459 459 - .eq("uri", sub.uri); 389 389 + // Step: Write to database 390 390 + const dbResult = await step.run(`db-write-subscription-${sub.uri}`, async () => { 391 391 + const { error: dbError } = await supabaseServerClient 392 392 + .from("publication_subscriptions") 393 393 + .update({ 394 394 + uri: newUri, 395 395 + record: newRecord as Json, 396 396 + }) 397 397 + .eq("uri", sub.uri); 460 398 461 461 - if (dbError) { 462 462 - return { 463 463 - success: false as const, 464 464 - oldUri: sub.uri, 465 465 - newUri, 466 466 - error: dbError.message, 467 467 - }; 468 468 - } 469 469 - return { success: true as const, oldUri: sub.uri, newUri }; 470 470 - }); 471 471 - }), 472 472 - ); 399 399 + if (dbError) { 400 400 + return { success: false as const, error: dbError.message }; 401 401 + } 402 402 + return { success: true as const }; 403 403 + }); 473 404 474 474 - // Process results 475 475 - for (const result of subDbResults) { 476 476 - if (result.success) { 477 477 - userSubscriptionUriMap[result.oldUri] = result.newUri; 405 405 + if (dbResult.success) { 406 406 + userSubscriptionUriMap[sub.uri] = newUri; 478 407 stats.userSubscriptionsMigrated++; 479 408 } else { 480 480 - stats.errors.push( 481 481 - `User subscription ${result.oldUri}: Database error: ${result.error}`, 482 482 - ); 409 409 + stats.errors.push(`User subscription ${sub.uri}: Database error: ${dbResult.error}`); 483 410 } 484 411 } 485 412 ··· 497 424 documentUriMap, 498 425 userSubscriptionUriMap, 499 426 }; 500 500 - }, 427 427 + } 501 428 );

+2 -6

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

··· 10 10 normalizePublicationRow, 11 11 hasValidPublication, 12 12 } from "src/utils/normalizeRecords"; 13 13 - import { deduplicateByUri } from "src/utils/deduplicateRecords"; 14 13 15 14 export type GetProfileDataReturnType = Awaited< 16 15 ReturnType<(typeof get_profile_data)["handler"]> ··· 59 58 .select("*") 60 59 .eq("identity_did", did); 61 60 62 62 - let [{ data: profile }, { data: rawPublications }] = await Promise.all([ 61 61 + let [{ data: profile }, { data: publications }] = await Promise.all([ 63 62 profileReq, 64 63 publicationsReq, 65 64 ]); 66 65 67 67 - // Deduplicate records that may exist under both pub.leaflet and site.standard namespaces 68 68 - const publications = deduplicateByUri(rawPublications || []); 69 69 - 70 66 // Normalize publication records before returning 71 71 - const normalizedPublications = publications 67 67 + const normalizedPublications = (publications || []) 72 68 .map(normalizePublicationRow) 73 69 .filter(hasValidPublication); 74 70

+2 -9

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

··· 52 52 ) 53 53 )`, 54 54 ) 55 55 - .or( 56 56 - `name.eq."${publication_name}", uri.eq."${pubLeafletUri}", uri.eq."${siteStandardUri}"`, 57 57 - ) 55 55 + .or(`name.eq."${publication_name}", uri.eq."${pubLeafletUri}", uri.eq."${siteStandardUri}"`) 58 56 .eq("identity_did", did) 59 59 - .order("uri", { ascending: false }) 60 60 - .limit(1) 61 57 .single(); 62 58 63 59 let leaflet_data = await getFactsFromHomeLeaflets.handler( ··· 74 70 const documents = (publication?.documents_in_publications || []) 75 71 .map((dip) => { 76 72 if (!dip.documents) return null; 77 77 - const normalized = normalizeDocumentRecord( 78 78 - dip.documents.data, 79 79 - dip.documents.uri, 80 80 - ); 73 73 + const normalized = normalizeDocumentRecord(dip.documents.data, dip.documents.uri); 81 74 if (!normalized) return null; 82 75 return { 83 76 uri: dip.documents.uri,

+1 -5

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

··· 2 2 import { makeRoute } from "../lib"; 3 3 import type { Env } from "./route"; 4 4 import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 5 5 - import { deduplicateByUri } from "src/utils/deduplicateRecords"; 6 5 7 6 export type SearchPublicationNamesReturnType = Awaited< 8 7 ReturnType<(typeof search_publication_names)["handler"]> ··· 16 15 }), 17 16 handler: async ({ query, limit }, { supabase }: Pick<Env, "supabase">) => { 18 17 // Search publications by name in record (case-insensitive partial match) 19 19 - const { data: rawPublications, error } = await supabase 18 18 + const { data: publications, error } = await supabase 20 19 .from("publications") 21 20 .select("uri, record") 22 21 .ilike("record->>name", `%${query}%`) ··· 25 24 if (error) { 26 25 throw new Error(`Failed to search publications: ${error.message}`); 27 26 } 28 28 - 29 29 - // Deduplicate records that may exist under both pub.leaflet and site.standard namespaces 30 30 - const publications = deduplicateByUri(rawPublications || []); 31 27 32 28 const result = publications.map((p) => { 33 29 const record = p.record as { name?: string };

-2

app/globals.css

··· 274 274 @apply p-2; 275 275 @apply rounded-md; 276 276 @apply overflow-auto; 277 277 - @apply sm:min-h-12; 278 278 - @apply min-h-10; 279 277 280 278 @media (min-width: 640px) { 281 279 @apply p-3;

+2 -6

app/lish/[did]/[publication]/generateFeed.ts

··· 19 19 let renderToReadableStream = await import("react-dom/server").then( 20 20 (module) => module.renderToReadableStream, 21 21 ); 22 22 - let { data: publications, error } = await supabaseServerClient 22 22 + let { data: publications } = await supabaseServerClient 23 23 .from("publications") 24 24 .select( 25 25 `*, ··· 31 31 .or(publicationNameOrUriFilter(did, publication_name)) 32 32 .order("uri", { ascending: false }) 33 33 .limit(1); 34 34 - console.log(error); 35 34 let publication = publications?.[0]; 36 35 37 36 const pubRecord = normalizePublicationRecord(publication?.record); ··· 55 54 await Promise.all( 56 55 publication.documents_in_publications.map(async (doc) => { 57 56 if (!doc.documents) return; 58 58 - const record = normalizeDocumentRecord( 59 59 - doc.documents?.data, 60 60 - doc.documents?.uri, 61 61 - ); 57 57 + const record = normalizeDocumentRecord(doc.documents?.data, doc.documents?.uri); 62 58 const uri = new AtUri(doc.documents?.uri); 63 59 const rkey = uri.rkey; 64 60 if (!record) return;

+1

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

··· 14 14 request: NextRequest, 15 15 props: { params: Promise<{ did: string; publication: string }> }, 16 16 ) { 17 17 + console.log("are we getting here?"); 17 18 const params = await props.params; 18 19 try { 19 20 let did = decodeURIComponent(params.did);

+67 -141

components/Blocks/Block.tsx

··· 33 33 import { deepEquals } from "src/utils/deepEquals"; 34 34 import { isTextBlock } from "src/utils/isTextBlock"; 35 35 import { focusPage } from "src/utils/focusPage"; 36 36 - import { DeleteTiny } from "components/Icons/DeleteTiny"; 37 37 - import { ArrowDownTiny } from "components/Icons/ArrowDownTiny"; 38 38 - import { Separator } from "components/Layout"; 39 39 - import { moveBlockUp, moveBlockDown } from "src/utils/moveBlock"; 40 40 - import { deleteBlock } from "src/utils/deleteBlock"; 41 36 42 37 export type Block = { 43 38 factID: string; ··· 68 63 // Block handles all block level events like 69 64 // mouse events, keyboard events and longPress, and setting AreYouSure state 70 65 // and shared styling like padding and flex for list layouting 66 66 + let { rep } = useReplicache(); 71 67 let mouseHandlers = useBlockMouseHandlers(props); 72 68 let handleDrop = useHandleDrop({ 73 69 parent: props.parent, ··· 76 72 }); 77 73 let entity_set = useEntitySetContext(); 78 74 79 79 - let { isLongPress, longPressHandlers } = useLongPress(() => { 75 75 + let { isLongPress, handlers } = useLongPress(() => { 80 76 if (isTextBlock[props.type]) return; 81 77 if (isLongPress.current) { 82 78 focusBlock( ··· 89 85 let selected = useUIState( 90 86 (s) => !!s.selectedBlocks.find((b) => b.value === props.entityID), 91 87 ); 92 92 - let alignment = useEntity(props.value, "block/text-alignment")?.data.value; 93 93 - 94 94 - let alignmentStyle = 95 95 - props.type === "button" || props.type === "image" 96 96 - ? "justify-center" 97 97 - : "justify-start"; 98 98 - 99 99 - if (alignment) 100 100 - alignmentStyle = { 101 101 - left: "justify-start", 102 102 - right: "justify-end", 103 103 - center: "justify-center", 104 104 - justify: "justify-start", 105 105 - }[alignment]; 106 88 107 89 let [areYouSure, setAreYouSure] = useState(false); 108 90 useEffect(() => { ··· 116 98 117 99 return ( 118 100 <div 119 119 - {...(!props.preview ? { ...mouseHandlers, ...longPressHandlers } : {})} 101 101 + {...(!props.preview ? { ...mouseHandlers, ...handlers } : {})} 120 102 id={ 121 103 !props.preview ? elementId.block(props.entityID).container : undefined 122 104 } ··· 135 117 blockWrapper relative 136 118 flex flex-row gap-2 137 119 px-3 sm:px-4 138 138 - z-1 w-full 139 139 - ${alignmentStyle} 140 120 ${ 141 121 !props.nextBlock 142 122 ? "pb-3 sm:pb-4" ··· 275 255 ) => { 276 256 // BaseBlock renders the actual block content, delete states, controls spacing between block and list markers 277 257 let BlockTypeComponent = BlockTypeComponents[props.type]; 258 258 + let alignment = useEntity(props.value, "block/text-alignment")?.data.value; 259 259 + 260 260 + let alignmentStyle = 261 261 + props.type === "button" || props.type === "image" 262 262 + ? "justify-center" 263 263 + : "justify-start"; 264 264 + 265 265 + if (alignment) 266 266 + alignmentStyle = { 267 267 + left: "justify-start", 268 268 + right: "justify-end", 269 269 + center: "justify-center", 270 270 + justify: "justify-start", 271 271 + }[alignment]; 278 272 279 273 if (!BlockTypeComponent) return <div>unknown block</div>; 280 274 return ( 281 281 - <> 275 275 + <div 276 276 + className={`blockContentWrapper w-full grow flex gap-2 z-1 ${alignmentStyle}`} 277 277 + > 282 278 {props.listData && <ListMarker {...props} />} 283 279 {props.areYouSure ? ( 284 280 <AreYouSure ··· 291 287 ) : ( 292 288 <BlockTypeComponent {...props} preview={props.preview} /> 293 289 )} 294 294 - </> 290 290 + </div> 295 291 ); 296 292 }; 297 293 ··· 330 326 s.selectedBlocks.length > 1, 331 327 ); 332 328 329 329 + let isSelected = useUIState((s) => 330 330 + s.selectedBlocks.find((b) => b.value === props.entityID), 331 331 + ); 332 332 + let isLocked = useEntity(props.value, "block/is-locked"); 333 333 + 333 334 let nextBlockSelected = useUIState((s) => 334 335 s.selectedBlocks.find((b) => b.value === props.nextBlock?.value), 335 336 ); ··· 337 338 s.selectedBlocks.find((b) => b.value === props.previousBlock?.value), 338 339 ); 339 340 340 340 - if (isMultiselected) 341 341 + if (isMultiselected || (isLocked?.data.value && isSelected)) 342 342 + // not sure what multiselected and selected classes are doing (?) 343 343 + // use a hashed pattern for locked things. show this pattern if the block is selected, even if it isn't multiselected 344 344 + 341 345 return ( 342 346 <> 343 347 <div ··· 350 354 ${!prevBlockSelected && "rounded-t-md"} 351 355 ${!nextBlockSelected && "rounded-b-md"} 352 356 `} 353 353 - /> 357 357 + style={ 358 358 + isLocked?.data.value 359 359 + ? { 360 360 + maskImage: "var(--hatchSVG)", 361 361 + maskRepeat: "repeat repeat", 362 362 + } 363 363 + : {} 364 364 + } 365 365 + ></div> 366 366 + {isLocked?.data.value && ( 367 367 + <div 368 368 + className={` 369 369 + blockSelectionLockIndicator z-10 370 370 + flex items-center 371 371 + text-border rounded-full 372 372 + absolute right-3 373 373 + 374 374 + ${ 375 375 + props.type === "heading" || props.type === "text" 376 376 + ? "top-[6px]" 377 377 + : "top-0" 378 378 + }`} 379 379 + > 380 380 + <LockTiny className="bg-bg-page p-0.5 rounded-full w-5 h-5" /> 381 381 + </div> 382 382 + )} 354 383 </> 355 384 ); 356 385 }; 357 386 358 387 export const BlockLayout = (props: { 359 359 - isSelected: boolean; 388 388 + isSelected?: boolean; 360 389 children: React.ReactNode; 361 390 className?: string; 362 362 - optionsClassName?: string; 363 391 hasBackground?: "accent" | "page"; 364 392 borderOnHover?: boolean; 365 365 - hasAlignment?: boolean; 366 366 - areYouSure?: boolean; 367 367 - setAreYouSure?: (value: boolean) => void; 368 393 }) => { 369 369 - // this is used to wrap non-text blocks in consistent selected styling, spacing, and top level options like delete 370 394 return ( 371 395 <div 372 372 - className={`nonTextBlockAndControls relative ${props.hasAlignment ? "w-fit" : "w-full"}`} 373 373 - > 374 374 - <div 375 375 - className={`nonTextBlock ${props.className} p-2 sm:p-3 overflow-hidden 376 376 - ${props.hasAlignment ? "w-fit" : "w-full"} 396 396 + className={`block ${props.className} p-2 sm:p-3 w-full overflow-hidden 377 397 ${props.isSelected ? "block-border-selected " : "block-border"} 378 398 ${props.borderOnHover && "hover:border-accent-contrast! hover:outline-accent-contrast! focus-within:border-accent-contrast! focus-within:outline-accent-contrast!"}`} 379 379 - style={{ 380 380 - backgroundColor: 381 381 - props.hasBackground === "accent" 382 382 - ? "var(--accent-light)" 383 383 - : props.hasBackground === "page" 384 384 - ? "rgb(var(--bg-page))" 385 385 - : "transparent", 386 386 - }} 387 387 - > 388 388 - {props.children} 389 389 - </div> 390 390 - {props.isSelected && ( 391 391 - <NonTextBlockOptions 392 392 - optionsClassName={props.optionsClassName} 393 393 - areYouSure={props.areYouSure} 394 394 - setAreYouSure={props.setAreYouSure} 395 395 - /> 396 396 - )} 397 397 - </div> 398 398 - ); 399 399 - }; 400 400 - 401 401 - let debounced: null | number = null; 402 402 - 403 403 - const NonTextBlockOptions = (props: { 404 404 - areYouSure?: boolean; 405 405 - setAreYouSure?: (value: boolean) => void; 406 406 - optionsClassName?: string; 407 407 - }) => { 408 408 - let { rep } = useReplicache(); 409 409 - let entity_set = useEntitySetContext(); 410 410 - let focusedEntity = useUIState((s) => s.focusedEntity); 411 411 - let focusedEntityType = useEntity( 412 412 - focusedEntity?.entityType === "page" 413 413 - ? focusedEntity.entityID 414 414 - : focusedEntity?.parent || null, 415 415 - "page/type", 416 416 - ); 417 417 - 418 418 - let isMultiselected = useUIState((s) => s.selectedBlocks.length > 1); 419 419 - if (focusedEntity?.entityType === "page") return; 420 420 - 421 421 - if (isMultiselected) return; 422 422 - 423 423 - return ( 424 424 - <div 425 425 - className={`flex gap-1 absolute -top-[25px] right-2 pb-0.5 pt-1 px-1 rounded-t-md bg-border text-bg-page ${props.optionsClassName}`} 399 399 + style={{ 400 400 + backgroundColor: 401 401 + props.hasBackground === "accent" 402 402 + ? "var(--accent-light)" 403 403 + : props.hasBackground === "page" 404 404 + ? "rgb(var(--bg-page))" 405 405 + : "transparent", 406 406 + }} 426 407 > 427 427 - {focusedEntityType?.data.value !== "canvas" && ( 428 428 - <> 429 429 - <button 430 430 - onClick={async (e) => { 431 431 - e.stopPropagation(); 432 432 - 433 433 - if (!rep) return; 434 434 - await moveBlockDown(rep, entity_set.set); 435 435 - }} 436 436 - > 437 437 - <ArrowDownTiny /> 438 438 - </button> 439 439 - <button 440 440 - onClick={async (e) => { 441 441 - e.stopPropagation(); 442 442 - 443 443 - if (!rep) return; 444 444 - await moveBlockUp(rep); 445 445 - }} 446 446 - > 447 447 - <ArrowDownTiny className="rotate-180" /> 448 448 - </button> 449 449 - <Separator classname="border-bg-page! h-4! mx-0.5" /> 450 450 - </> 451 451 - )} 452 452 - <button 453 453 - onClick={async (e) => { 454 454 - e.stopPropagation(); 455 455 - if (!rep || !focusedEntity) return; 456 456 - 457 457 - if (props.areYouSure !== undefined && props.setAreYouSure) { 458 458 - if (!props.areYouSure) { 459 459 - props.setAreYouSure(true); 460 460 - debounced = window.setTimeout(() => { 461 461 - debounced = null; 462 462 - }, 300); 463 463 - return; 464 464 - } 465 465 - 466 466 - if (props.areYouSure) { 467 467 - if (debounced) { 468 468 - window.clearTimeout(debounced); 469 469 - debounced = window.setTimeout(() => { 470 470 - debounced = null; 471 471 - }, 300); 472 472 - return; 473 473 - } 474 474 - await deleteBlock([focusedEntity.entityID], rep); 475 475 - } 476 476 - } else { 477 477 - await deleteBlock([focusedEntity.entityID], rep); 478 478 - } 479 479 - }} 480 480 - > 481 481 - <DeleteTiny /> 482 482 - </button> 408 408 + {props.children} 483 409 </div> 484 410 ); 485 411 };

+3 -1

components/Blocks/BlueskyPostBlock/BlueskyEmpty.tsx

··· 18 18 let isSelected = useUIState((s) => 19 19 s.selectedBlocks.find((b) => b.value === props.entityID), 20 20 ); 21 21 + let isLocked = useEntity(props.entityID, "block/is-locked")?.data.value; 21 22 22 23 let entity_set = useEntitySetContext(); 23 24 let [urlValue, setUrlValue] = useState(""); ··· 90 91 className="w-full grow border-none outline-hidden bg-transparent " 91 92 placeholder="bsky.app/post-url" 92 93 value={urlValue} 94 94 + disabled={isLocked} 93 95 onChange={(e) => setUrlValue(e.target.value)} 94 96 onKeyDown={(e) => { 95 97 if (e.key === "Enter") { ··· 107 109 <button 108 110 type="submit" 109 111 id="bluesky-post-block-submit" 110 110 - className={`p-1 ${isSelected ? "text-accent-contrast" : "text-border"}`} 112 112 + className={`p-1 ${isSelected && !isLocked ? "text-accent-contrast" : "text-border"}`} 111 113 onMouseDown={(e) => { 112 114 e.preventDefault(); 113 115 errorSmokers(e.clientX + 12, e.clientY);

+15 -38

components/Blocks/ButtonBlock.tsx

··· 24 24 let isSelected = useUIState((s) => 25 25 s.selectedBlocks.find((b) => b.value === props.entityID), 26 26 ); 27 27 - let alignment = useEntity(props.entityID, "block/text-alignment")?.data.value; 28 27 29 28 if (!url) { 30 29 if (!permissions.write) return null; ··· 32 31 } 33 32 34 33 return ( 35 35 - <BlockLayout 36 36 - isSelected={!!isSelected} 37 37 - borderOnHover 38 38 - hasAlignment={alignment !== "justify"} 39 39 - className={`p-0! rounded-md! border-none!`} 34 34 + <a 35 35 + href={url?.data.value} 36 36 + target="_blank" 37 37 + className={`hover:outline-accent-contrast rounded-md! ${isSelected ? "block-border-selected border-0!" : "block-border border-transparent! border-0!"}`} 40 38 > 41 41 - <a 42 42 - href={url?.data.value} 43 43 - target="_blank" 44 44 - className={` ${alignment === "justify" ? "w-full" : "w-fit"}`} 45 45 - > 46 46 - <ButtonPrimary 47 47 - role="link" 48 48 - type="submit" 49 49 - fullWidth={alignment === "justify"} 50 50 - > 51 51 - {text?.data.value} 52 52 - </ButtonPrimary> 53 53 - </a> 54 54 - </BlockLayout> 39 39 + <ButtonPrimary role="link" type="submit"> 40 40 + {text?.data.value} 41 41 + </ButtonPrimary> 42 42 + </a> 55 43 ); 56 44 }; 57 45 ··· 63 51 let isSelected = useUIState((s) => 64 52 s.selectedBlocks.find((b) => b.value === props.entityID), 65 53 ); 54 54 + let isLocked = useEntity(props.entityID, "block/is-locked")?.data.value; 66 55 67 56 let [textValue, setTextValue] = useState(""); 68 57 let [urlValue, setUrlValue] = useState(""); 69 58 let text = textValue; 70 59 let url = urlValue; 71 71 - let alignment = useEntity(props.entityID, "block/text-alignment")?.data.value; 72 60 73 61 let submit = async () => { 74 62 let entity = props.entityID; ··· 118 106 }; 119 107 120 108 return ( 121 121 - <div 122 122 - className={`buttonBlockSettingsWrapper flex flex-col gap-2 w-full 123 123 - `} 124 124 - > 125 125 - <ButtonPrimary 126 126 - className={`relative ${ 127 127 - alignment === "center" 128 128 - ? "place-self-center" 129 129 - : alignment === "left" 130 130 - ? "place-self-start" 131 131 - : alignment === "right" 132 132 - ? "place-self-end" 133 133 - : "place-self-center" 134 134 - }`} 135 135 - fullWidth={alignment === "justify"} 136 136 - > 109 109 + <div className="buttonBlockSettingsWrapper flex flex-col gap-2 w-full "> 110 110 + <ButtonPrimary className="mx-auto"> 137 111 {text !== "" ? text : "Button"} 138 112 </ButtonPrimary> 139 113 <BlockLayout ··· 193 167 <Separator /> 194 168 <Input 195 169 type="text" 170 170 + autoFocus 196 171 className="w-full grow border-none outline-hidden bg-transparent" 197 172 placeholder="button text" 198 173 value={textValue} 174 174 + disabled={isLocked} 199 175 onChange={(e) => setTextValue(e.target.value)} 200 176 onKeyDown={(e) => { 201 177 if ( ··· 218 194 className="w-full grow border-none outline-hidden bg-transparent" 219 195 placeholder="www.example.com" 220 196 value={urlValue} 197 197 + disabled={isLocked} 221 198 onChange={(e) => setUrlValue(e.target.value)} 222 199 onKeyDown={(e) => { 223 200 if (e.key === "Backspace" && !e.currentTarget.value) ··· 228 205 <button 229 206 id="button-block-settings" 230 207 type="submit" 231 231 - className={`p-1 shrink-0 w-fit flex gap-2 items-center place-self-end ${isSelected ? "text-accent-contrast" : "text-accent-contrast sm:text-border"}`} 208 208 + className={`p-1 shrink-0 w-fit flex gap-2 items-center place-self-end ${isSelected && !isLocked ? "text-accent-contrast" : "text-accent-contrast sm:text-border"}`} 232 209 > 233 210 <div className="sm:hidden block">Save</div> 234 211 <CheckTiny />

+76 -57

components/Blocks/CodeBlock.tsx

··· 14 14 import { flushSync } from "react-dom"; 15 15 import { elementId } from "src/utils/elementId"; 16 16 import { LAST_USED_CODE_LANGUAGE_KEY } from "src/utils/codeLanguageStorage"; 17 17 - import { focusBlock } from "src/utils/focusBlock"; 18 17 19 18 export function CodeBlock(props: BlockProps) { 20 19 let { rep, rootEntity } = useReplicache(); ··· 43 42 }, [content, lang, theme]); 44 43 45 44 const onClick = useCallback((e: React.MouseEvent<HTMLElement>) => { 46 46 - focusBlock( 47 47 - { parent: props.parent, value: props.value, type: "code" }, 48 48 - { type: "end" }, 49 49 - ); 45 45 + let selection = window.getSelection(); 46 46 + if (!selection || selection.rangeCount === 0) return; 47 47 + let range = selection.getRangeAt(0); 48 48 + if (!range) return; 49 49 + let length = range.toString().length; 50 50 + range.setStart(e.currentTarget, 0); 51 51 + let end = range.toString().length; 52 52 + let start = end - length; 53 53 + 54 54 + flushSync(() => { 55 55 + useUIState.getState().setSelectedBlock(props); 56 56 + useUIState.getState().setFocusedBlock({ 57 57 + entityType: "block", 58 58 + entityID: props.value, 59 59 + parent: props.parent, 60 60 + }); 61 61 + }); 62 62 + let el = document.getElementById( 63 63 + elementId.block(props.entityID).input, 64 64 + ) as HTMLTextAreaElement; 65 65 + if (!el) return; 66 66 + el.focus(); 67 67 + el.setSelectionRange(start, end); 50 68 }, []); 51 69 return ( 52 70 <div className="codeBlock w-full flex flex-col rounded-md gap-0.5 "> 71 71 + {permissions.write && ( 72 72 + <div className="text-sm text-tertiary flex justify-between"> 73 73 + <div className="flex gap-1"> 74 74 + Theme:{" "} 75 75 + <select 76 76 + className="codeBlockLang text-left bg-transparent pr-1 sm:max-w-none max-w-24" 77 77 + onClick={(e) => { 78 78 + e.preventDefault(); 79 79 + e.stopPropagation(); 80 80 + }} 81 81 + value={theme} 82 82 + onChange={async (e) => { 83 83 + await rep?.mutate.assertFact({ 84 84 + attribute: "theme/code-theme", 85 85 + entity: rootEntity, 86 86 + data: { type: "string", value: e.target.value }, 87 87 + }); 88 88 + }} 89 89 + > 90 90 + {bundledThemesInfo.map((t) => ( 91 91 + <option key={t.id} value={t.id}> 92 92 + {t.displayName} 93 93 + </option> 94 94 + ))} 95 95 + </select> 96 96 + </div> 97 97 + <select 98 98 + className="codeBlockLang text-right bg-transparent pr-1 sm:max-w-none max-w-24" 99 99 + onClick={(e) => { 100 100 + e.preventDefault(); 101 101 + e.stopPropagation(); 102 102 + }} 103 103 + value={lang} 104 104 + onChange={async (e) => { 105 105 + localStorage.setItem(LAST_USED_CODE_LANGUAGE_KEY, e.target.value); 106 106 + await rep?.mutate.assertFact({ 107 107 + attribute: "block/code-language", 108 108 + entity: props.entityID, 109 109 + data: { type: "string", value: e.target.value }, 110 110 + }); 111 111 + }} 112 112 + > 113 113 + <option value="plaintext">Plaintext</option> 114 114 + {bundledLanguagesInfo.map((l) => ( 115 115 + <option key={l.id} value={l.id}> 116 116 + {l.name} 117 117 + </option> 118 118 + ))} 119 119 + </select> 120 120 + </div> 121 121 + )} 122 122 + 53 123 <BlockLayout 54 124 isSelected={focusedBlock} 55 125 hasBackground="accent" 56 126 borderOnHover 57 57 - className="p-0! min-h-10 sm:min-h-12" 127 127 + className="p-0! min-h-[48px]" 58 128 > 59 129 {focusedBlock && permissions.write ? ( 60 130 <BaseTextareaBlock ··· 101 171 /> 102 172 )} 103 173 </BlockLayout> 104 104 - {permissions.write && ( 105 105 - <div className="text-sm text-tertiary flex w-full justify-between"> 106 106 - <div className="codeBlockTheme grow flex gap-1"> 107 107 - Theme:{" "} 108 108 - <select 109 109 - className="codeBlockThemeSelect text-left bg-transparent pr-1 sm:max-w-none max-w-24 w-full" 110 110 - onClick={(e) => { 111 111 - e.preventDefault(); 112 112 - e.stopPropagation(); 113 113 - }} 114 114 - value={theme} 115 115 - onChange={async (e) => { 116 116 - await rep?.mutate.assertFact({ 117 117 - attribute: "theme/code-theme", 118 118 - entity: rootEntity, 119 119 - data: { type: "string", value: e.target.value }, 120 120 - }); 121 121 - }} 122 122 - > 123 123 - {bundledThemesInfo.map((t) => ( 124 124 - <option key={t.id} value={t.id}> 125 125 - {t.displayName} 126 126 - </option> 127 127 - ))} 128 128 - </select> 129 129 - </div> 130 130 - <select 131 131 - className="codeBlockLang grow text-right bg-transparent pr-1 sm:max-w-none max-w-24 w-full" 132 132 - onClick={(e) => { 133 133 - e.preventDefault(); 134 134 - e.stopPropagation(); 135 135 - }} 136 136 - value={lang} 137 137 - onChange={async (e) => { 138 138 - localStorage.setItem(LAST_USED_CODE_LANGUAGE_KEY, e.target.value); 139 139 - await rep?.mutate.assertFact({ 140 140 - attribute: "block/code-language", 141 141 - entity: props.entityID, 142 142 - data: { type: "string", value: e.target.value }, 143 143 - }); 144 144 - }} 145 145 - > 146 146 - <option value="plaintext">Plaintext</option> 147 147 - {bundledLanguagesInfo.map((l) => ( 148 148 - <option key={l.id} value={l.id}> 149 149 - {l.name} 150 150 - </option> 151 151 - ))} 152 152 - </select> 153 153 - </div> 154 154 - )} 155 174 </div> 156 175 ); 157 176 }

+3 -2

components/Blocks/DateTimeBlock.tsx

··· 53 53 s.selectedBlocks.find((b) => b.value === props.entityID), 54 54 ); 55 55 56 56 + let isLocked = !!useEntity(props.entityID, "block/is-locked")?.data.value; 56 57 let alignment = useEntity(props.entityID, "block/text-alignment")?.data.value; 57 58 58 59 const handleTimeChange: React.ChangeEventHandler<HTMLInputElement> = (e) => { ··· 116 117 117 118 return ( 118 119 <Popover 119 119 - disabled={!permissions.write} 120 120 + disabled={isLocked || !permissions.write} 120 121 className="w-64 z-10 px-2!" 121 122 trigger={ 122 123 <BlockLayout ··· 132 133 {dateFact ? ( 133 134 <div 134 135 className={`font-bold 135 135 - ${!permissions.write ? "" : "group-hover/date:underline"} 136 136 + ${!permissions.write || isLocked ? "" : "group-hover/date:underline"} 136 137 `} 137 138 > 138 139 {selectedDate.toLocaleDateString(undefined, {

+4 -4

components/Blocks/EmbedBlock.tsx

··· 111 111 <div 112 112 data-draggable 113 113 className={`resizeHandle 114 114 - 115 115 - 116 114 cursor-ns-resize shrink-0 z-10 w-6 h-[5px] 117 117 - absolute bottom-[3px] right-1/2 translate-x-1/2 115 115 + absolute bottom-2 right-1/2 translate-x-1/2 translate-y-[2px] 118 116 rounded-full bg-white border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white] 119 117 ${isCanvasBlock ? "hidden group-hover/canvas-block:block" : ""}`} 120 118 {...heightHandle.handlers} ··· 131 129 let isSelected = useUIState((s) => 132 130 s.selectedBlocks.find((b) => b.value === props.entityID), 133 131 ); 132 132 + let isLocked = useEntity(props.entityID, "block/is-locked")?.data.value; 134 133 135 134 let entity_set = useEntitySetContext(); 136 135 let [linkValue, setLinkValue] = useState(""); ··· 251 250 className="w-full grow border-none outline-hidden bg-transparent " 252 251 placeholder="www.example.com" 253 252 value={linkValue} 253 253 + disabled={isLocked} 254 254 onChange={(e) => setLinkValue(e.target.value)} 255 255 /> 256 256 <button 257 257 type="submit" 258 258 id="embed-block-submit" 259 259 disabled={loading} 260 260 - className={`p-1 ${isSelected ? "text-accent-contrast" : "text-border"}`} 260 260 + className={`p-1 ${isSelected && !isLocked ? "text-accent-contrast" : "text-border"}`} 261 261 onMouseDown={(e) => { 262 262 e.preventDefault(); 263 263 if (loading) return;

+3 -1

components/Blocks/ExternalLinkBlock.tsx

··· 118 118 let isSelected = useUIState((s) => 119 119 s.selectedBlocks.find((b) => b.value === props.entityID), 120 120 ); 121 121 + let isLocked = useEntity(props.value, "block/is-locked")?.data.value; 121 122 let entity_set = useEntitySetContext(); 122 123 let [linkValue, setLinkValue] = useState(""); 123 124 let { rep } = useReplicache(); ··· 172 173 !props.preview ? elementId.block(props.entityID).input : undefined 173 174 } 174 175 type="url" 176 176 + disabled={isLocked} 175 177 className="w-full grow border-none outline-hidden bg-transparent " 176 178 placeholder="www.example.com" 177 179 value={linkValue} ··· 197 199 <div className="flex items-center gap-3 "> 198 200 <button 199 201 autoFocus={false} 200 200 - className={`p-1 ${isSelected ? "text-accent-contrast" : "text-border"}`} 202 202 + className={`p-1 ${isSelected && !isLocked ? "text-accent-contrast" : "text-border"}`} 201 203 onMouseDown={(e) => { 202 204 e.preventDefault(); 203 205 if (!linkValue || linkValue === "") {

+34 -43

components/Blocks/ImageBlock.tsx

··· 19 19 import { ImageAltSmall } from "components/Icons/ImageAlt"; 20 20 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 21 21 import { useSubscribe } from "src/replicache/useSubscribe"; 22 22 - import { 23 23 - ImageCoverImage, 24 24 - ImageCoverImageRemove, 25 25 - } from "components/Icons/ImageCoverImage"; 26 26 - import { 27 27 - ButtonPrimary, 28 28 - ButtonSecondary, 29 29 - ButtonTertiary, 30 30 - } from "components/Buttons"; 31 31 - import { CheckTiny } from "components/Icons/CheckTiny"; 22 22 + import { ImageCoverImage } from "components/Icons/ImageCoverImage"; 32 23 33 24 export function ImageBlock(props: BlockProps & { preview?: boolean }) { 34 25 let { rep } = useReplicache(); ··· 37 28 let isSelected = useUIState((s) => 38 29 s.selectedBlocks.find((b) => b.value === props.value), 39 30 ); 31 31 + let isLocked = useEntity(props.value, "block/is-locked")?.data.value; 40 32 let isFullBleed = useEntity(props.value, "image/full-bleed")?.data.value; 41 33 let isFirst = props.previousBlock === null; 42 34 let isLast = props.nextBlock === null; ··· 92 84 return ( 93 85 <BlockLayout 94 86 hasBackground="accent" 95 95 - isSelected={!!isSelected} 87 87 + isSelected={!!isSelected && !isLocked} 96 88 borderOnHover 97 89 className=" group/image-block text-tertiary hover:text-accent-contrast hover:font-bold h-[104px] border-dashed rounded-lg" 98 90 > 99 91 <label 100 92 className={` 93 93 + 101 94 w-full h-full hover:cursor-pointer 102 95 flex flex-col items-center justify-center 103 103 - `} 96 96 + ${props.pageType === "canvas" && "bg-bg-page"}`} 104 97 onMouseDown={(e) => e.preventDefault()} 105 98 onDragOver={(e) => { 106 99 e.preventDefault(); ··· 109 102 onDrop={async (e) => { 110 103 e.preventDefault(); 111 104 e.stopPropagation(); 105 105 + if (isLocked) return; 112 106 const files = e.dataTransfer.files; 113 107 if (files && files.length > 0) { 114 108 const file = files[0]; ··· 125 119 Upload An Image 126 120 </div> 127 121 <input 122 122 + disabled={isLocked} 128 123 className="h-0 w-0 hidden" 129 124 type="file" 130 125 accept="image/*" ··· 139 134 ); 140 135 } 141 136 137 137 + let imageClassName = isFullBleed 138 138 + ? "" 139 139 + : isSelected 140 140 + ? "block-border-selected border-transparent! " 141 141 + : "block-border border-transparent!"; 142 142 + 142 143 let isLocalUpload = localImages.get(image.data.src); 143 144 144 145 let blockClassName = ` 145 146 relative group/image border-transparent! p-0! w-fit! 146 146 - ${isFullBleed && "-mx-[14px] sm:-mx-[18px] rounded-[0px]! sm:outline-offset-[-16px]! -outline-offset[-12px]!"} 147 147 + ${isFullBleed && "-mx-3 sm:-mx-4"} 147 148 ${isFullBleed ? (isFirst ? "-mt-3 sm:-mt-4" : prevIsFullBleed ? "-mt-1" : "") : ""} 148 149 ${isFullBleed ? (isLast ? "-mb-4" : nextIsFullBleed ? "-mb-2" : "") : ""} 149 150 `; 150 151 151 152 return ( 152 152 - <BlockLayout 153 153 - hasAlignment 154 154 - isSelected={!!isSelected} 155 155 - className={blockClassName} 156 156 - optionsClassName={isFullBleed ? "top-[-8px]!" : ""} 157 157 - > 153 153 + <BlockLayout isSelected={!!isSelected} className={blockClassName}> 158 154 {isLocalUpload || image.data.local ? ( 159 155 <img 160 156 loading="lazy" ··· 172 168 } 173 169 height={image?.data.height} 174 170 width={image?.data.width} 171 171 + className={imageClassName} 175 172 /> 176 173 )} 177 174 {altText !== undefined && !props.preview ? ( ··· 207 204 ); 208 205 209 206 // Only show if focused, in a publication, has write permissions, and no cover image is set 210 210 - if (!isFocused || !pubData?.publications || !entity_set.permissions.write) 207 207 + if ( 208 208 + !isFocused || 209 209 + !pubData?.publications || 210 210 + !entity_set.permissions.write || 211 211 + coverImage 212 212 + ) 211 213 return null; 212 212 - if (coverImage) 213 213 - return ( 214 214 - <ButtonSecondary 215 215 - className="absolute top-2 right-2" 214 214 + 215 215 + return ( 216 216 + <div className="absolute top-2 left-2"> 217 217 + <button 218 218 + className="flex items-center gap-1 text-xs bg-bg-page/80 hover:bg-bg-page text-secondary hover:text-primary px-2 py-1 rounded-md border border-border hover:border-primary transition-colors" 216 219 onClick={async (e) => { 217 220 e.preventDefault(); 218 221 e.stopPropagation(); 219 222 await rep?.mutate.updatePublicationDraft({ 220 220 - cover_image: null, 223 223 + cover_image: props.entityID, 221 224 }); 222 225 }} 223 226 > 224 224 - Remove Cover Image 225 225 - <ImageCoverImageRemove /> 226 226 - </ButtonSecondary> 227 227 - ); 228 228 - return ( 229 229 - <ButtonPrimary 230 230 - className="absolute top-2 right-2" 231 231 - onClick={async (e) => { 232 232 - e.preventDefault(); 233 233 - e.stopPropagation(); 234 234 - await rep?.mutate.updatePublicationDraft({ 235 235 - cover_image: props.entityID, 236 236 - }); 237 237 - }} 238 238 - > 239 239 - Use as Cover Image 240 240 - <ImageCoverImage /> 241 241 - </ButtonPrimary> 227 227 + <span className="w-4 h-4 flex items-center justify-center"> 228 228 + <ImageCoverImage /> 229 229 + </span> 230 230 + Set as Cover 231 231 + </button> 232 232 + </div> 242 233 ); 243 234 }; 244 235

+3 -18

components/Blocks/MailboxBlock.tsx

··· 26 26 import { ArrowDownTiny } from "components/Icons/ArrowDownTiny"; 27 27 import { InfoSmall } from "components/Icons/InfoSmall"; 28 28 29 29 - export const MailboxBlock = ( 30 30 - props: BlockProps & { 31 31 - areYouSure?: boolean; 32 32 - setAreYouSure?: (value: boolean) => void; 33 33 - }, 34 34 - ) => { 29 29 + export const MailboxBlock = (props: BlockProps) => { 35 30 let isSubscribed = useSubscriptionStatus(props.entityID); 36 31 let isSelected = useUIState((s) => 37 32 s.selectedBlocks.find((b) => b.value === props.entityID), ··· 46 41 let subscriber_count = useEntity(props.entityID, "mailbox/subscriber-count"); 47 42 if (!permission) 48 43 return ( 49 49 - <MailboxReaderView 50 50 - entityID={props.entityID} 51 51 - parent={props.parent} 52 52 - /> 44 44 + <MailboxReaderView entityID={props.entityID} parent={props.parent} /> 53 45 ); 54 46 55 47 return ( ··· 57 49 <BlockLayout 58 50 isSelected={!!isSelected} 59 51 hasBackground={"accent"} 60 60 - areYouSure={props.areYouSure} 61 61 - setAreYouSure={props.setAreYouSure} 62 52 className="flex gap-2 items-center justify-center" 63 53 > 64 54 <ButtonPrimary ··· 130 120 ); 131 121 }; 132 122 133 133 - const MailboxReaderView = (props: { 134 134 - entityID: string; 135 135 - parent: string; 136 136 - 137 137 - }) => { 123 123 + const MailboxReaderView = (props: { entityID: string; parent: string }) => { 138 124 let isSubscribed = useSubscriptionStatus(props.entityID); 139 125 let isSelected = useUIState((s) => 140 126 s.selectedBlocks.find((b) => b.value === props.entityID), ··· 147 133 <BlockLayout 148 134 isSelected={!!isSelected} 149 135 hasBackground={"accent"} 150 150 - 151 136 className="`h-full flex flex-col gap-2 items-center justify-center" 152 137 > 153 138 {!isSubscribed?.confirmed ? (

+1 -9

components/Blocks/PageLinkBlock.tsx

··· 13 13 import { CardThemeProvider } from "components/ThemeManager/ThemeProvider"; 14 14 import { useCardBorderHidden } from "components/Pages/useCardBorderHidden"; 15 15 16 16 - export function PageLinkBlock( 17 17 - props: BlockProps & { 18 18 - preview?: boolean; 19 19 - areYouSure?: boolean; 20 20 - setAreYouSure?: (value: boolean) => void; 21 21 - }, 22 22 - ) { 16 16 + export function PageLinkBlock(props: BlockProps & { preview?: boolean }) { 23 17 let page = useEntity(props.entityID, "block/card"); 24 18 let type = 25 19 useEntity(page?.data.value || null, "page/type")?.data.value || "doc"; ··· 38 32 <BlockLayout 39 33 hasBackground="page" 40 34 isSelected={!!isSelected} 41 41 - areYouSure={props.areYouSure} 42 42 - setAreYouSure={props.setAreYouSure} 43 35 className={`cursor-pointer 44 36 pageLinkBlockWrapper relative group/pageLinkBlock 45 37 flex overflow-clip p-0!

+2 -14

components/Blocks/PollBlock/index.tsx

··· 20 20 import { PublicationPollBlock } from "../PublicationPollBlock"; 21 21 import { usePollBlockUIState } from "./pollBlockState"; 22 22 23 23 - export const PollBlock = ( 24 24 - props: BlockProps & { 25 25 - areYouSure?: boolean; 26 26 - setAreYouSure?: (value: boolean) => void; 27 27 - }, 28 28 - ) => { 23 23 + export const PollBlock = (props: BlockProps) => { 29 24 let { data: pub } = useLeafletPublicationData(); 30 25 if (!pub) return <LeafletPollBlock {...props} />; 31 26 return <PublicationPollBlock {...props} />; 32 27 }; 33 28 34 34 - export const LeafletPollBlock = ( 35 35 - props: BlockProps & { 36 36 - areYouSure?: boolean; 37 37 - setAreYouSure?: (value: boolean) => void; 38 38 - }, 39 39 - ) => { 29 29 + export const LeafletPollBlock = (props: BlockProps) => { 40 30 let isSelected = useUIState((s) => 41 31 s.selectedBlocks.find((b) => b.value === props.entityID), 42 32 ); ··· 74 64 <BlockLayout 75 65 isSelected={!!isSelected} 76 66 hasBackground={"accent"} 77 77 - areYouSure={props.areYouSure} 78 78 - setAreYouSure={props.setAreYouSure} 79 67 className="poll flex flex-col gap-2 w-full" 80 68 > 81 69 {pollState === "editing" ? (

+2 -9

components/Blocks/PublicationPollBlock.tsx

··· 21 21 * It allows adding/editing options when the poll hasn't been published yet, 22 22 * but disables adding new options once the poll record exists (indicated by pollUri). 23 23 */ 24 24 - export const PublicationPollBlock = ( 25 25 - props: BlockProps & { 26 26 - areYouSure?: boolean; 27 27 - setAreYouSure?: (value: boolean) => void; 28 28 - }, 29 29 - ) => { 30 30 - let { data: publicationData } = useLeafletPublicationData(); 24 24 + export const PublicationPollBlock = (props: BlockProps) => { 25 25 + let { data: publicationData, normalizedDocument } = useLeafletPublicationData(); 31 26 let isSelected = useUIState((s) => 32 27 s.selectedBlocks.find((b) => b.value === props.entityID), 33 28 ); ··· 62 57 className="poll flex flex-col gap-2" 63 58 hasBackground={"accent"} 64 59 isSelected={!!isSelected} 65 65 - areYouSure={props.areYouSure} 66 66 - setAreYouSure={props.setAreYouSure} 67 60 > 68 61 <EditPollForPublication 69 62 entityID={props.entityID}

+1 -8

components/Blocks/RSVPBlock/index.tsx

··· 24 24 } 25 25 | { state: "contact_details"; status: RSVP_Status }; 26 26 27 27 - export function RSVPBlock( 28 28 - props: BlockProps & { 29 29 - areYouSure?: boolean; 30 30 - setAreYouSure?: (value: boolean) => void; 31 31 - }, 32 32 - ) { 27 27 + export function RSVPBlock(props: BlockProps) { 33 28 let isSelected = useUIState((s) => 34 29 s.selectedBlocks.find((b) => b.value === props.entityID), 35 30 ); ··· 37 32 <BlockLayout 38 33 isSelected={!!isSelected} 39 34 hasBackground={"accent"} 40 40 - areYouSure={props.areYouSure} 41 41 - setAreYouSure={props.setAreYouSure} 42 35 className="rsvp relative flex flex-col gap-1 w-full rounded-lg place-items-center justify-center" 43 36 > 44 37 <RSVPForm entityID={props.entityID} />

+8 -2

components/Blocks/TextBlock/index.tsx

··· 41 41 preview?: boolean; 42 42 }, 43 43 ) { 44 44 + let isLocked = useEntity(props.entityID, "block/is-locked"); 44 45 let initialized = useHasPageLoaded(); 45 46 let first = props.previousBlock === null; 46 47 let permission = useEntitySetContext().permissions.write; 47 48 48 49 return ( 49 50 <> 50 50 - {(!initialized || !permission || props.preview) && ( 51 51 + {(!initialized || 52 52 + !permission || 53 53 + props.preview || 54 54 + isLocked?.data.value) && ( 51 55 <RenderedTextBlock 52 56 type={props.type} 53 57 entityID={props.entityID} ··· 57 61 previousBlock={props.previousBlock} 58 62 /> 59 63 )} 60 60 - {permission && !props.preview && ( 64 64 + {permission && !props.preview && !isLocked?.data.value && ( 61 65 <div 62 66 className={`w-full relative group ${!initialized ? "hidden" : ""}`} 63 67 > ··· 326 330 let { editorState } = props; 327 331 let rep = useReplicache(); 328 332 let smoker = useSmoker(); 333 333 + let isLocked = useEntity(props.entityID, "block/is-locked"); 329 334 let focused = useUIState((s) => s.focusedEntity?.entityID === props.entityID); 330 335 331 336 let isBlueskyPost = ··· 335 340 // if its bluesky, change text to embed post 336 341 337 342 if ( 343 343 + !isLocked && 338 344 focused && 339 345 editorState && 340 346 betterIsUrl(editorState.doc.textContent) &&

+3 -1

components/Blocks/index.tsx

··· 181 181 : null, 182 182 ); 183 183 184 184 + let isLocked = useEntity(props.lastBlock?.value || null, "block/is-locked"); 184 185 if (!entity_set.permissions.write) return null; 185 186 if ( 186 186 - (props.lastBlock?.type === "text" || props.lastBlock?.type === "heading") && 187 187 + ((props.lastBlock?.type === "text" && !isLocked?.data.value) || 188 188 + props.lastBlock?.type === "heading") && 187 189 (!editorState?.editor || editorState.editor.doc.content.size <= 2) 188 190 ) 189 191 return null;

+15 -5

components/Blocks/useBlockKeyboardHandlers.ts

··· 23 23 ) { 24 24 let { rep, undoManager } = useReplicache(); 25 25 let entity_set = useEntitySetContext(); 26 26 + let isLocked = !!useEntity(props.entityID, "block/is-locked")?.data.value; 26 27 27 28 let isSelected = useUIState((s) => { 28 29 let selectedBlocks = s.selectedBlocks; ··· 69 70 entity_set, 70 71 areYouSure, 71 72 setAreYouSure, 73 73 + isLocked, 72 74 }); 73 75 undoManager.endGroup(); 74 76 }; 75 77 window.addEventListener("keydown", listener); 76 78 return () => window.removeEventListener("keydown", listener); 77 77 - }, [entity_set, isSelected, props, rep, areYouSure, setAreYouSure]); 79 79 + }, [entity_set, isSelected, props, rep, areYouSure, setAreYouSure, isLocked]); 78 80 } 79 81 80 82 type Args = { 81 83 e: KeyboardEvent; 84 84 + isLocked: boolean; 82 85 props: BlockProps; 83 86 rep: Replicache<ReplicacheMutators>; 84 87 entity_set: { set: string }; ··· 130 133 } 131 134 132 135 let debounced: null | number = null; 133 133 - async function Backspace({ e, props, rep, areYouSure, setAreYouSure }: Args) { 136 136 + async function Backspace({ 137 137 + e, 138 138 + props, 139 139 + rep, 140 140 + areYouSure, 141 141 + setAreYouSure, 142 142 + isLocked, 143 143 + }: Args) { 134 144 // if this is a textBlock, let the textBlock/keymap handle the backspace 145 145 + if (isLocked) return; 135 146 // if its an input, label, or teatarea with content, do nothing (do the broswer default instead) 136 147 let el = e.target as HTMLElement; 137 148 if ( ··· 143 154 if ((el as HTMLInputElement).value !== "") return; 144 155 } 145 156 146 146 - // if the block is a card, mailbox, rsvp, or poll... 157 157 + // if the block is a card or mailbox... 147 158 if ( 148 159 props.type === "card" || 149 160 props.type === "mailbox" || 150 150 - props.type === "rsvp" || 151 151 - props.type === "poll" 161 161 + props.type === "rsvp" 152 162 ) { 153 163 // ...and areYouSure state is false, set it to true 154 164 if (!areYouSure) {

+3 -21

components/Blocks/useBlockMouseHandlers.ts

··· 1 1 import { useSelectingMouse } from "components/SelectionManager/selectionState"; 2 2 - import { MouseEvent, useCallback } from "react"; 2 2 + import { MouseEvent, useCallback, useRef } from "react"; 3 3 import { useUIState } from "src/useUIState"; 4 4 import { Block } from "./Block"; 5 5 import { isTextBlock } from "src/utils/isTextBlock"; ··· 12 12 import { elementId } from "src/utils/elementId"; 13 13 14 14 let debounce: number | null = null; 15 15 - 16 16 - // Track scrolling state for mobile 17 17 - let isScrolling = false; 18 18 - let scrollTimeout: number | null = null; 19 19 - 20 20 - if (typeof window !== "undefined") { 21 21 - window.addEventListener( 22 22 - "scroll", 23 23 - () => { 24 24 - isScrolling = true; 25 25 - if (scrollTimeout) window.clearTimeout(scrollTimeout); 26 26 - scrollTimeout = window.setTimeout(() => { 27 27 - isScrolling = false; 28 28 - }, 150); 29 29 - }, 30 30 - true, 31 31 - ); 32 32 - } 33 15 export function useBlockMouseHandlers(props: Block) { 34 16 let entity_set = useEntitySetContext(); 35 17 let isMobile = useIsMobile(); ··· 40 22 if ((e.target as Element).tagName === "BUTTON") return; 41 23 if ((e.target as Element).tagName === "SELECT") return; 42 24 if ((e.target as Element).tagName === "OPTION") return; 43 43 - if (isMobile && isScrolling) return; 25 25 + if (isMobile) return; 44 26 if (!entity_set.permissions.write) return; 45 27 useSelectingMouse.setState({ start: props.value }); 46 28 if (e.shiftKey) { ··· 75 57 ); 76 58 let onMouseEnter = useCallback( 77 59 async (e: MouseEvent) => { 78 78 - if (isMobile && isScrolling) return; 60 60 + if (isMobile) return; 79 61 if (!entity_set.permissions.write) return; 80 62 if (debounce) window.clearTimeout(debounce); 81 63 debounce = window.setTimeout(async () => {

+34 -47

components/Canvas.tsx

··· 22 22 import { PublicationMetadata } from "./Pages/PublicationMetadata"; 23 23 import { useLeafletPublicationData } from "./PageSWRDataProvider"; 24 24 import { useHandleCanvasDrop } from "./Blocks/useHandleCanvasDrop"; 25 25 - import { useBlockMouseHandlers } from "./Blocks/useBlockMouseHandlers"; 26 25 27 26 export function Canvas(props: { 28 27 entityID: string; ··· 287 286 }, 288 287 [props, rep, permissions], 289 288 ); 290 290 - let { dragDelta, handlers: dragHandlers } = useDrag({ 289 289 + let { dragDelta, handlers } = useDrag({ 291 290 onDragEnd, 291 291 + delay: isMobile, 292 292 }); 293 293 294 294 let widthOnDragEnd = useCallback( ··· 335 335 ); 336 336 let rotateHandle = useDrag({ onDragEnd: RotateOnDragEnd }); 337 337 338 338 - let { isLongPress, longPressHandlers: longPressHandlers } = useLongPress( 339 339 - () => { 340 340 - if (isLongPress.current && permissions.write) { 341 341 - focusBlock( 342 342 - { 343 343 - type: type?.data.value || "text", 344 344 - value: props.entityID, 345 345 - parent: props.parent, 346 346 - }, 347 347 - { type: "start" }, 348 348 - ); 349 349 - } 350 350 - }, 351 351 - ); 338 338 + let { isLongPress, handlers: longPressHandlers } = useLongPress(() => { 339 339 + if (isLongPress.current && permissions.write) { 340 340 + focusBlock( 341 341 + { 342 342 + type: type?.data.value || "text", 343 343 + value: props.entityID, 344 344 + parent: props.parent, 345 345 + }, 346 346 + { type: "start" }, 347 347 + ); 348 348 + } 349 349 + }); 352 350 let angle = 0; 353 351 if (rotateHandle.dragDelta) { 354 352 let originX = rect.x + rect.width / 2; ··· 385 383 }; 386 384 }, [props, type?.data.value]); 387 385 useBlockKeyboardHandlers(blockProps, areYouSure, setAreYouSure); 388 388 - let mouseHandlers = useBlockMouseHandlers(blockProps); 389 389 - 390 386 let isList = useEntity(props.entityID, "block/is-list"); 391 387 let isFocused = useUIState( 392 388 (s) => s.focusedEntity?.entityID === props.entityID, ··· 395 391 return ( 396 392 <div 397 393 ref={ref} 398 398 - {...(!props.preview ? { ...longPressHandlers, ...mouseHandlers } : {})} 394 394 + {...(!props.preview ? { ...longPressHandlers } : {})} 395 395 + {...(isMobile && permissions.write ? { ...handlers } : {})} 399 396 id={props.preview ? undefined : elementId.block(props.entityID).container} 400 400 - className={`canvasBlockWrapper absolute group/canvas-block will-change-transform rounded-lg flex items-stretch origin-center p-3 `} 397 397 + className={`absolute group/canvas-block will-change-transform rounded-lg flex items-stretch origin-center p-3 `} 401 398 style={{ 402 399 top: 0, 403 400 left: 0, ··· 406 403 transform, 407 404 }} 408 405 > 409 409 - {!props.preview && permissions.write && ( 410 410 - <Gripper isFocused={isFocused} {...dragHandlers} /> 411 411 - )} 412 412 - 406 406 + {/* the gripper show on hover, but longpress logic needs to be added for mobile*/} 407 407 + {!props.preview && permissions.write && <Gripper {...handlers} />} 413 408 <div 414 414 - className={` w-full ${dragDelta || widthHandle.dragDelta || rotateHandle.dragDelta ? "pointer-events-none" : ""} `} 409 409 + className={`contents ${dragDelta || widthHandle.dragDelta || rotateHandle.dragDelta ? "pointer-events-none" : ""} `} 415 410 > 416 411 <BaseBlock 417 412 {...blockProps} ··· 429 424 <div 430 425 className={`resizeHandle 431 426 cursor-e-resize shrink-0 z-10 432 432 - group-hover/canvas-block:block 433 433 - sm:w-[5px] w-3 sm:h-6 h-8 434 434 - absolute top-1/2 sm:right-2 right-1 -translate-y-1/2 435 435 - rounded-full bg-white border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white] 436 436 - ${isFocused ? "block" : "hidden"} 437 437 - 438 438 - `} 427 427 + hidden group-hover/canvas-block:block 428 428 + w-[5px] h-6 -ml-[3px] 429 429 + absolute top-1/2 right-3 -translate-y-1/2 translate-x-[2px] 430 430 + rounded-full bg-white border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white]`} 439 431 {...widthHandle.handlers} 440 432 /> 441 433 )} ··· 444 436 <div 445 437 className={`rotateHandle 446 438 cursor-grab shrink-0 z-10 447 447 - group-hover/canvas-block:block 448 448 - sm:w-[8px] sm:h-[8px] w-4 h-4 449 449 - absolute sm:bottom-0 sm:right-0 -bottom-1 -right-1 439 439 + hidden group-hover/canvas-block:block 440 440 + w-[8px] h-[8px] 441 441 + absolute bottom-0 -right-0 450 442 -translate-y-1/2 -translate-x-1/2 451 451 - rounded-full bg-white border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white] 452 452 - ${isFocused ? "block" : "hidden"} 453 453 - `} 443 443 + rounded-full bg-white border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white]`} 454 444 {...rotateHandle.handlers} 455 445 /> 456 446 )} ··· 571 561 } 572 562 }; 573 563 574 574 - const Gripper = (props: { 575 575 - onMouseDown: (e: React.MouseEvent) => void; 576 576 - isFocused: boolean; 577 577 - }) => { 564 564 + const Gripper = (props: { onMouseDown: (e: React.MouseEvent) => void }) => { 578 565 return ( 579 566 <div 580 567 onMouseDown={props.onMouseDown} 581 568 onPointerDown={props.onMouseDown} 582 582 - className="gripper w-[9px] shrink-0 py-1 mr-1 cursor-grab touch-none" 569 569 + className="w-[9px] shrink-0 py-1 mr-1 bg-bg-card cursor-grab touch-none" 583 570 > 584 584 - <div className="h-full grid grid-cols-1 grid-rows-1 "> 571 571 + <Media mobile={false} className="h-full grid grid-cols-1 grid-rows-1 "> 585 572 {/* the gripper is two svg's stacked on top of each other. 586 573 One for the actual gripper, the other is an outline to endure the gripper stays visible on image backgrounds */} 587 574 <div 588 588 - className={`h-full col-start-1 col-end-2 row-start-1 row-end-2 bg-bg-page group-hover/canvas-block:block ${props.isFocused ? "block" : "hidden"}`} 575 575 + className="h-full col-start-1 col-end-2 row-start-1 row-end-2 bg-bg-page hidden group-hover/canvas-block:block" 589 576 style={{ maskImage: "var(--gripperSVG2)", maskRepeat: "repeat" }} 590 577 /> 591 578 <div 592 592 - className={`h-full col-start-1 col-end-2 row-start-1 row-end-2 bg-tertiary group-hover/canvas-block:block ${props.isFocused ? "block" : "hidden"}`} 579 579 + className="h-full col-start-1 col-end-2 row-start-1 row-end-2 bg-tertiary hidden group-hover/canvas-block:block" 593 580 style={{ maskImage: "var(--gripperSVG)", maskRepeat: "repeat" }} 594 581 /> 595 595 - </div> 582 582 + </Media> 596 583 </div> 597 584 ); 598 585 };

-7

components/DesktopFooter.tsx

··· 4 4 import { Toolbar } from "./Toolbar"; 5 5 import { useEntitySetContext } from "./EntitySetProvider"; 6 6 import { focusBlock } from "src/utils/focusBlock"; 7 7 - import { hasBlockToolbar } from "app/[leaflet_id]/Footer"; 8 8 - import { useEntity } from "src/replicache"; 9 7 10 8 export function DesktopPageFooter(props: { pageID: string }) { 11 9 let focusedEntity = useUIState((s) => s.focusedEntity); ··· 15 13 : focusedEntity?.parent; 16 14 let entity_set = useEntitySetContext(); 17 15 18 18 - let blockType = useEntity(focusedEntity?.entityID || null, "block/type")?.data 19 19 - .value; 20 20 - 21 16 return ( 22 17 <Media 23 18 mobile={false} ··· 25 20 > 26 21 {focusedEntity && 27 22 focusedEntity.entityType === "block" && 28 28 - hasBlockToolbar(blockType) && 29 23 entity_set.permissions.write && 30 24 focusedBlockParentID === props.pageID && ( 31 25 <div ··· 35 29 }} 36 30 > 37 31 <Toolbar 38 38 - blockType={blockType} 39 32 pageID={focusedBlockParentID} 40 33 blockID={focusedEntity.entityID} 41 34 />

-19

components/Icons/DeleteTiny.tsx

··· 1 1 - import { Props } from "./Props"; 2 2 - 3 3 - export const DeleteTiny = (props: Props) => { 4 4 - return ( 5 5 - <svg 6 6 - width="16" 7 7 - height="16" 8 8 - viewBox="0 0 16 16" 9 9 - fill="none" 10 10 - xmlns="http://www.w3.org/2000/svg" 11 11 - {...props} 12 12 - > 13 13 - <path 14 14 - d="M4.84013 0.946324C5.45222 0.762486 6.19573 0.729124 6.97782 0.820347C7.32039 0.860495 7.56546 1.1711 7.52568 1.51371C7.48568 1.85656 7.17517 2.10252 6.83232 2.06253C6.16005 1.98415 5.5998 2.02378 5.20048 2.14359C4.79524 2.26531 4.64378 2.43772 4.59599 2.56351C4.34149 3.23723 5.58865 4.19255 6.08232 4.51761C6.54562 4.82266 7.09489 5.10483 7.70536 5.33597C8.80491 5.75229 9.85164 5.90795 10.6409 5.84769C11.4848 5.78311 11.8008 5.50429 11.8714 5.31839C11.9189 5.19263 11.9202 4.96386 11.6976 4.60453C11.478 4.25029 11.0842 3.84861 10.5286 3.46195C10.2455 3.26479 10.1754 2.87508 10.3724 2.59183C10.5696 2.30876 10.9592 2.23946 11.2425 2.43656C11.8885 2.88612 12.4235 3.40237 12.7601 3.94535C13.0932 4.48275 13.2786 5.13116 13.0403 5.76078C12.9083 6.10935 12.6779 6.37566 12.3909 6.57621C12.366 6.82447 12.311 7.37448 12.2425 8.01957C12.1491 8.89816 12.0306 9.96291 11.9329 10.6856C11.809 11.602 11.638 12.5144 11.4153 13.4121C11.237 14.0305 10.6957 14.4725 10.0989 14.75C9.43935 15.0567 8.58506 15.2285 7.63212 15.2285C5.83513 15.2285 4.30017 14.7464 3.83818 13.3604C3.76287 13.0881 3.70695 12.8096 3.6497 12.5332C3.55128 12.058 3.42826 11.4025 3.33134 10.6856C3.23301 9.95806 3.11264 8.74578 3.01689 7.72562C2.96878 7.21315 2.92679 6.74483 2.89677 6.40531C2.87398 6.14754 2.83052 5.88349 2.86454 5.62503C2.95213 4.95974 3.29709 4.69093 3.98271 4.32035C3.46821 3.68093 3.13499 2.89278 3.42704 2.12113C3.66559 1.49131 4.23434 1.12831 4.84013 0.946324ZM4.26103 7.60843C4.35712 8.63219 4.47618 9.82018 4.5706 10.5186C4.66257 11.1989 4.7799 11.8245 4.87431 12.2803C4.92135 12.5074 4.9622 12.6916 4.9915 12.8184C5.24073 13.8967 6.74216 13.9785 7.63212 13.9785C8.44689 13.9785 9.11364 13.8297 9.57255 13.6162C9.98848 13.4227 10.1815 13.2132 10.2727 12.8184C10.3608 12.4373 10.5558 11.538 10.6936 10.5186C10.7887 9.81541 10.9059 8.76587 10.9993 7.88675C11.027 7.62595 11.0512 7.38071 11.0735 7.16507C10.278 7.59273 9.18805 7.88086 7.96318 7.88089C7.26324 7.88089 6.60019 7.80834 6.0081 7.67875C5.37465 7.54007 4.79262 7.29359 4.20732 7.02347C4.22408 7.20782 4.24189 7.4046 4.26103 7.60843ZM5.65849 9.89847C5.93369 9.87744 6.17434 10.0843 6.1956 10.3594C6.21921 10.6683 6.24342 10.9585 6.26396 11.1602C6.29655 11.4801 6.34417 11.7883 6.38407 12.0176C6.40539 12.1401 6.4278 12.2622 6.45341 12.3838C6.51991 12.6498 6.33262 12.9262 6.06962 12.9825C5.79972 13.0399 5.55695 12.8734 5.47587 12.5977C5.43009 12.442 5.42115 12.3183 5.39872 12.1895C5.3563 11.9458 5.30461 11.6127 5.26884 11.2618C5.24694 11.0467 5.22223 10.7457 5.19853 10.4356C5.17773 10.1606 5.38354 9.91976 5.65849 9.89847ZM5.59208 8.40238C6.25224 8.40238 6.25244 9.45121 5.59208 9.45121C4.93177 9.4506 4.93197 8.40299 5.59208 8.40238ZM9.06767 1.26566C9.29634 1.00742 9.69106 0.983602 9.9495 1.21195C10.2079 1.44072 10.2319 1.83535 10.0032 2.09378L9.137 3.07132L8.9622 3.54496C8.84186 3.86848 8.48103 4.03346 8.15751 3.91312C7.83456 3.79265 7.67047 3.43357 7.79032 3.11039L8.00614 2.52738C8.03292 2.45553 8.07353 2.38952 8.12431 2.33207L9.06767 1.26566Z" 15 15 - fill="currentColor" 16 16 - /> 17 17 - </svg> 18 18 - ); 19 19 - };

-20

components/Icons/ImageCoverImage.tsx

··· 1 1 - import { Props } from "./Props"; 2 2 - 3 1 export const ImageCoverImage = () => ( 4 2 <svg 5 3 width="24" ··· 14 12 /> 15 13 </svg> 16 14 ); 17 17 - 18 18 - export const ImageCoverImageRemove = (props: Props) => { 19 19 - return ( 20 20 - <svg 21 21 - width="24" 22 22 - height="24" 23 23 - viewBox="0 0 24 24" 24 24 - fill="none" 25 25 - xmlns="http://www.w3.org/2000/svg" 26 26 - {...props} 27 27 - > 28 28 - <path 29 29 - d="M21.7744 1.48538C22.0673 1.19249 22.542 1.19259 22.835 1.48538C23.1279 1.77824 23.1278 2.253 22.835 2.54592L2.22461 23.1602C1.93172 23.4526 1.45683 23.4528 1.16406 23.1602C0.871349 22.8674 0.871599 22.3926 1.16406 22.0996L21.7744 1.48538ZM22.9229 4.22561C23.1551 4.66244 23.2881 5.16029 23.2881 5.68948V18.3106C23.2879 20.0361 21.8886 21.4362 20.1631 21.4365H5.71582L6.96582 20.1865H20.1631C21.1982 20.1862 22.0379 19.3457 22.0381 18.3106V15.8067H11.3447L12.5947 14.5567H22.0381V10.1299L21.1738 9.42385L19.9775 10.9678C19.5515 11.5167 18.8233 11.7335 18.166 11.5078L16.3213 10.875C16.3092 10.8709 16.2965 10.8691 16.2842 10.8662L17.2705 9.87893L18.5723 10.3262C18.7238 10.378 18.892 10.3278 18.9902 10.2012L20.2061 8.63284L19.2764 7.87307L20.1641 6.9844L22.0381 8.51565V5.68948C22.0381 5.51371 22.0121 5.34397 21.9668 5.18264L22.9229 4.22561ZM17.6797 3.81448H3.83789C2.80236 3.81448 1.96289 4.65394 1.96289 5.68948V11.4805L4.8291 8.91897C5.18774 8.59894 5.70727 8.54438 6.12207 8.77346L6.20312 8.82327L10.083 11.4112L9.18164 12.3125L8.81055 12.0655L8.03027 12.8692C7.55062 13.3622 6.78587 13.438 6.21875 13.0489C6.17034 13.0156 6.10737 13.0113 6.05469 13.0371L4.79883 13.6573C4.258 13.9241 3.61319 13.8697 3.125 13.5157L2.26172 12.8887L1.96289 13.1573V14.5567H6.93945L5.68945 15.8067H1.96289V18.3115C1.96305 18.6614 2.06054 18.9882 2.22754 19.2686L1.32812 20.168C0.943293 19.6486 0.713079 19.0075 0.712891 18.3115V5.68948C0.712891 3.96359 2.112 2.56448 3.83789 2.56448H18.9287L17.6797 3.81448ZM14.4883 17.2578C14.9025 17.2578 15.2382 17.5937 15.2383 18.0078C15.2382 18.422 14.9025 18.7578 14.4883 18.7578H8.39453L9.89453 17.2578H14.4883ZM3.14941 18.3467C3.09734 18.2446 3.06545 18.1302 3.06543 18.0078C3.0655 17.5938 3.40144 17.2581 3.81543 17.2578H4.23828L3.14941 18.3467ZM4.71094 10.7012L4.70996 10.7002L3.21484 12.0362L3.85938 12.5039C3.97197 12.5854 4.12047 12.5976 4.24512 12.5362L5.50098 11.917C5.95928 11.6909 6.5044 11.7294 6.92578 12.0186C6.99104 12.0633 7.07958 12.0547 7.13477 11.9981L7.75488 11.3604L5.58984 9.91506L4.71094 10.7012ZM8.94629 4.52249C9.92559 4.52266 10.7195 5.31662 10.7197 6.29592C10.7197 7.27533 9.92567 8.06919 8.94629 8.06936C7.96687 8.06924 7.17292 7.27536 7.17285 6.29592C7.17304 5.31659 7.96694 4.52261 8.94629 4.52249ZM8.94629 5.52249C8.51923 5.52261 8.17304 5.86888 8.17285 6.29592C8.17292 6.72307 8.51915 7.06924 8.94629 7.06936C9.37338 7.06919 9.71966 6.72304 9.71973 6.29592C9.71954 5.86891 9.37331 5.52266 8.94629 5.52249Z" 30 30 - fill="currentColor" 31 31 - /> 32 32 - </svg> 33 33 - ); 34 34 - };

+1 -1

components/Pages/PageOptions.tsx

··· 93 93 94 94 <PageOptionButton 95 95 secondary 96 96 - onClick={() => undoManager.redo()} 96 96 + onClick={() => undoManager.undo()} 97 97 disabled={!undoState.canRedo} 98 98 > 99 99 <RedoTiny />

+1 -1

components/Popover/index.tsx

··· 43 43 <RadixPopover.Content 44 44 className={` 45 45 z-20 bg-bg-page 46 46 - px-3 py-2 text-primary 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

+67 -5

components/SelectionManager/index.tsx

··· 17 17 import { schema } from "../Blocks/TextBlock/schema"; 18 18 import { MarkType } from "prosemirror-model"; 19 19 import { useSelectingMouse, getSortedSelection } from "./selectionState"; 20 20 - import { moveBlockUp, moveBlockDown } from "src/utils/moveBlock"; 21 20 22 21 //How should I model selection? As ranges w/ a start and end? Store *blocks* so that I can just construct ranges? 23 22 // How does this relate to *when dragging* ? ··· 241 240 shift: true, 242 241 key: ["ArrowDown", "J"], 243 242 handler: async () => { 244 244 - if (!rep) return; 245 245 - await moveBlockDown(rep, entity_set.set); 243 243 + let [sortedBlocks, siblings] = await getSortedSelectionBound(); 244 244 + let block = sortedBlocks[0]; 245 245 + let nextBlock = siblings 246 246 + .slice(siblings.findIndex((s) => s.value === block.value) + 1) 247 247 + .find( 248 248 + (f) => 249 249 + f.listData && 250 250 + block.listData && 251 251 + !f.listData.path.find((f) => f.entity === block.value), 252 252 + ); 253 253 + if ( 254 254 + nextBlock?.listData && 255 255 + block.listData && 256 256 + nextBlock.listData.depth === block.listData.depth - 1 257 257 + ) { 258 258 + if (useUIState.getState().foldedBlocks.includes(nextBlock.value)) 259 259 + useUIState.getState().toggleFold(nextBlock.value); 260 260 + await rep?.mutate.moveBlock({ 261 261 + block: block.value, 262 262 + oldParent: block.listData?.parent, 263 263 + newParent: nextBlock.value, 264 264 + position: { type: "first" }, 265 265 + }); 266 266 + } else { 267 267 + await rep?.mutate.moveBlockDown({ 268 268 + entityID: block.value, 269 269 + parent: block.listData?.parent || block.parent, 270 270 + }); 271 271 + } 246 272 }, 247 273 }, 248 274 { ··· 250 276 shift: true, 251 277 key: ["ArrowUp", "K"], 252 278 handler: async () => { 253 253 - if (!rep) return; 254 254 - await moveBlockUp(rep); 279 279 + let [sortedBlocks, siblings] = await getSortedSelectionBound(); 280 280 + let block = sortedBlocks[0]; 281 281 + let previousBlock = 282 282 + siblings?.[siblings.findIndex((s) => s.value === block.value) - 1]; 283 283 + if (previousBlock.value === block.listData?.parent) { 284 284 + previousBlock = 285 285 + siblings?.[ 286 286 + siblings.findIndex((s) => s.value === block.value) - 2 287 287 + ]; 288 288 + } 289 289 + 290 290 + if ( 291 291 + previousBlock?.listData && 292 292 + block.listData && 293 293 + block.listData.depth > 1 && 294 294 + !previousBlock.listData.path.find( 295 295 + (f) => f.entity === block.listData?.parent, 296 296 + ) 297 297 + ) { 298 298 + let depth = block.listData.depth; 299 299 + let newParent = previousBlock.listData.path.find( 300 300 + (f) => f.depth === depth - 1, 301 301 + ); 302 302 + if (!newParent) return; 303 303 + if (useUIState.getState().foldedBlocks.includes(newParent.entity)) 304 304 + useUIState.getState().toggleFold(newParent.entity); 305 305 + rep?.mutate.moveBlock({ 306 306 + block: block.value, 307 307 + oldParent: block.listData?.parent, 308 308 + newParent: newParent.entity, 309 309 + position: { type: "end" }, 310 310 + }); 311 311 + } else { 312 312 + rep?.mutate.moveBlockUp({ 313 313 + entityID: block.value, 314 314 + parent: block.listData?.parent || block.parent, 315 315 + }); 316 316 + } 255 317 }, 256 318 }, 257 319

components/Toolbar/BlockToolbar.1.tsx

This is a binary file and will not be displayed.

+223

components/Toolbar/BlockToolbar.tsx

··· 1 1 + import { useEntity, useReplicache } from "src/replicache"; 2 2 + import { ToolbarButton } from "."; 3 3 + import { Separator, ShortcutKey } from "components/Layout"; 4 4 + import { metaKey } from "src/utils/metaKey"; 5 5 + import { useUIState } from "src/useUIState"; 6 6 + import { LockBlockButton } from "./LockBlockButton"; 7 7 + import { TextAlignmentButton } from "./TextAlignmentToolbar"; 8 8 + import { 9 9 + ImageFullBleedButton, 10 10 + ImageAltTextButton, 11 11 + ImageCoverButton, 12 12 + } from "./ImageToolbar"; 13 13 + import { DeleteSmall } from "components/Icons/DeleteSmall"; 14 14 + import { getSortedSelection } from "components/SelectionManager/selectionState"; 15 15 + 16 16 + export const BlockToolbar = (props: { 17 17 + setToolbarState: ( 18 18 + state: "areYouSure" | "block" | "text-alignment" | "img-alt-text", 19 19 + ) => void; 20 20 + }) => { 21 21 + let focusedEntity = useUIState((s) => s.focusedEntity); 22 22 + let focusedEntityType = useEntity( 23 23 + focusedEntity?.entityType === "page" 24 24 + ? focusedEntity.entityID 25 25 + : focusedEntity?.parent || null, 26 26 + "page/type", 27 27 + ); 28 28 + let blockType = useEntity( 29 29 + focusedEntity?.entityType === "block" ? focusedEntity?.entityID : null, 30 30 + "block/type", 31 31 + )?.data.value; 32 32 + 33 33 + return ( 34 34 + <div className="flex items-center gap-2 justify-between w-full"> 35 35 + <div className="flex items-center gap-2"> 36 36 + <ToolbarButton 37 37 + onClick={() => { 38 38 + props.setToolbarState("areYouSure"); 39 39 + }} 40 40 + tooltipContent="Delete Block" 41 41 + > 42 42 + <DeleteSmall /> 43 43 + </ToolbarButton> 44 44 + <Separator classname="h-6!" /> 45 45 + <MoveBlockButtons /> 46 46 + {blockType === "image" && ( 47 47 + <> 48 48 + <TextAlignmentButton setToolbarState={props.setToolbarState} /> 49 49 + <ImageFullBleedButton /> 50 50 + <ImageAltTextButton setToolbarState={props.setToolbarState} /> 51 51 + <ImageCoverButton /> 52 52 + {focusedEntityType?.data.value !== "canvas" && ( 53 53 + <Separator classname="h-6!" /> 54 54 + )} 55 55 + </> 56 56 + )} 57 57 + {(blockType === "button" || blockType === "datetime") && ( 58 58 + <> 59 59 + <TextAlignmentButton setToolbarState={props.setToolbarState} /> 60 60 + {focusedEntityType?.data.value !== "canvas" && ( 61 61 + <Separator classname="h-6!" /> 62 62 + )} 63 63 + </> 64 64 + )} 65 65 + 66 66 + <LockBlockButton /> 67 67 + </div> 68 68 + </div> 69 69 + ); 70 70 + }; 71 71 + 72 72 + const MoveBlockButtons = () => { 73 73 + let { rep } = useReplicache(); 74 74 + return ( 75 75 + <> 76 76 + <ToolbarButton 77 77 + hiddenOnCanvas 78 78 + onClick={async () => { 79 79 + if (!rep) return; 80 80 + let [sortedBlocks, siblings] = await getSortedSelection(rep); 81 81 + if (sortedBlocks.length > 1) return; 82 82 + let block = sortedBlocks[0]; 83 83 + let previousBlock = 84 84 + siblings?.[siblings.findIndex((s) => s.value === block.value) - 1]; 85 85 + if (previousBlock.value === block.listData?.parent) { 86 86 + previousBlock = 87 87 + siblings?.[ 88 88 + siblings.findIndex((s) => s.value === block.value) - 2 89 89 + ]; 90 90 + } 91 91 + 92 92 + if ( 93 93 + previousBlock?.listData && 94 94 + block.listData && 95 95 + block.listData.depth > 1 && 96 96 + !previousBlock.listData.path.find( 97 97 + (f) => f.entity === block.listData?.parent, 98 98 + ) 99 99 + ) { 100 100 + let depth = block.listData.depth; 101 101 + let newParent = previousBlock.listData.path.find( 102 102 + (f) => f.depth === depth - 1, 103 103 + ); 104 104 + if (!newParent) return; 105 105 + if (useUIState.getState().foldedBlocks.includes(newParent.entity)) 106 106 + useUIState.getState().toggleFold(newParent.entity); 107 107 + rep?.mutate.moveBlock({ 108 108 + block: block.value, 109 109 + oldParent: block.listData?.parent, 110 110 + newParent: newParent.entity, 111 111 + position: { type: "end" }, 112 112 + }); 113 113 + } else { 114 114 + rep?.mutate.moveBlockUp({ 115 115 + entityID: block.value, 116 116 + parent: block.listData?.parent || block.parent, 117 117 + }); 118 118 + } 119 119 + }} 120 120 + tooltipContent={ 121 121 + <div className="flex flex-col gap-1 justify-center"> 122 122 + <div className="text-center">Move Up</div> 123 123 + <div className="flex gap-1"> 124 124 + <ShortcutKey>Shift</ShortcutKey> +{" "} 125 125 + <ShortcutKey>{metaKey()}</ShortcutKey> +{" "} 126 126 + <ShortcutKey> ↑ </ShortcutKey> 127 127 + </div> 128 128 + </div> 129 129 + } 130 130 + > 131 131 + <MoveBlockUp /> 132 132 + </ToolbarButton> 133 133 + 134 134 + <ToolbarButton 135 135 + hiddenOnCanvas 136 136 + onClick={async () => { 137 137 + if (!rep) return; 138 138 + let [sortedBlocks, siblings] = await getSortedSelection(rep); 139 139 + if (sortedBlocks.length > 1) return; 140 140 + let block = sortedBlocks[0]; 141 141 + let nextBlock = siblings 142 142 + .slice(siblings.findIndex((s) => s.value === block.value) + 1) 143 143 + .find( 144 144 + (f) => 145 145 + f.listData && 146 146 + block.listData && 147 147 + !f.listData.path.find((f) => f.entity === block.value), 148 148 + ); 149 149 + if ( 150 150 + nextBlock?.listData && 151 151 + block.listData && 152 152 + nextBlock.listData.depth === block.listData.depth - 1 153 153 + ) { 154 154 + if (useUIState.getState().foldedBlocks.includes(nextBlock.value)) 155 155 + useUIState.getState().toggleFold(nextBlock.value); 156 156 + rep?.mutate.moveBlock({ 157 157 + block: block.value, 158 158 + oldParent: block.listData?.parent, 159 159 + newParent: nextBlock.value, 160 160 + position: { type: "first" }, 161 161 + }); 162 162 + } else { 163 163 + rep?.mutate.moveBlockDown({ 164 164 + entityID: block.value, 165 165 + parent: block.listData?.parent || block.parent, 166 166 + }); 167 167 + } 168 168 + }} 169 169 + tooltipContent={ 170 170 + <div className="flex flex-col gap-1 justify-center"> 171 171 + <div className="text-center">Move Down</div> 172 172 + <div className="flex gap-1"> 173 173 + <ShortcutKey>Shift</ShortcutKey> +{" "} 174 174 + <ShortcutKey>{metaKey()}</ShortcutKey> +{" "} 175 175 + <ShortcutKey> ↓ </ShortcutKey> 176 176 + </div> 177 177 + </div> 178 178 + } 179 179 + > 180 180 + <MoveBlockDown /> 181 181 + </ToolbarButton> 182 182 + <Separator classname="h-6!" /> 183 183 + </> 184 184 + ); 185 185 + }; 186 186 + 187 187 + const MoveBlockDown = () => { 188 188 + return ( 189 189 + <svg 190 190 + width="24" 191 191 + height="24" 192 192 + viewBox="0 0 24 24" 193 193 + fill="none" 194 194 + xmlns="http://www.w3.org/2000/svg" 195 195 + > 196 196 + <path 197 197 + fillRule="evenodd" 198 198 + clipRule="evenodd" 199 199 + d="M18.3444 3.56272L3.89705 5.84775C3.48792 5.91246 3.20871 6.29658 3.27342 6.7057L3.83176 10.2358C3.89647 10.645 4.28058 10.9242 4.68971 10.8595L19.137 8.57444C19.5462 8.50973 19.8254 8.12561 19.7607 7.71649L19.2023 4.18635C19.1376 3.77722 18.7535 3.49801 18.3444 3.56272ZM3.70177 4.61309C2.69864 4.77175 1.9884 5.65049 2.01462 6.63905C1.6067 6.92894 1.37517 7.43373 1.45854 7.96083L2.02167 11.5213C2.19423 12.6123 3.21854 13.3568 4.30955 13.1843L15.5014 11.4142L15.3472 10.4394L16.6131 10.2392L17.2948 13.9166L15.3038 12.4752C14.9683 12.2322 14.4994 12.3073 14.2565 12.6428C14.0135 12.9783 14.0886 13.4472 14.4241 13.6902L18.5417 16.6712L21.5228 12.5536C21.7658 12.2181 21.6907 11.7492 21.3552 11.5063C21.0197 11.2634 20.5508 11.3385 20.3079 11.674L18.7926 13.7669L18.0952 10.0048L19.3323 9.80909C20.4233 9.63654 21.1679 8.61222 20.9953 7.52121L20.437 3.99107C20.2644 2.90007 19.2401 2.15551 18.1491 2.32807L3.70177 4.61309ZM12.5175 14.1726C12.8583 14.118 13.0904 13.7974 13.0358 13.4566C12.9812 13.1157 12.6606 12.8837 12.3198 12.9383L4.48217 14.1937C3.37941 14.3704 2.62785 15.4065 2.80232 16.5096L3.35244 19.9878C3.52716 21.0925 4.56428 21.8463 5.66893 21.6716L20.0583 19.3958C21.1618 19.2212 21.9155 18.186 21.7426 17.0822L21.6508 16.4961C21.5974 16.1551 21.2776 15.922 20.9366 15.9754C20.5956 16.0288 20.3624 16.3486 20.4158 16.6896L20.5077 17.2757C20.5738 17.6981 20.2854 18.0943 19.8631 18.1611L5.47365 20.437C5.05089 20.5038 4.65396 20.2153 4.5871 19.7925L4.03697 16.3143C3.9702 15.8921 4.25783 15.4956 4.67988 15.428L12.5175 14.1726ZM5.48645 8.13141C5.4213 7.72235 5.70009 7.33793 6.10914 7.27278L12.7667 6.21241C13.1757 6.14726 13.5602 6.42605 13.6253 6.83511C13.6905 7.24417 13.4117 7.62859 13.0026 7.69374L6.34508 8.75411C5.93602 8.81926 5.5516 8.54047 5.48645 8.13141Z" 200 200 + fill="currentColor" 201 201 + /> 202 202 + </svg> 203 203 + ); 204 204 + }; 205 205 + 206 206 + const MoveBlockUp = () => { 207 207 + return ( 208 208 + <svg 209 209 + width="24" 210 210 + height="24" 211 211 + viewBox="0 0 24 24" 212 212 + fill="none" 213 213 + xmlns="http://www.w3.org/2000/svg" 214 214 + > 215 215 + <path 216 216 + fillRule="evenodd" 217 217 + clipRule="evenodd" 218 218 + d="M4.12086 10.3069C3.69777 10.3744 3.30016 10.0858 3.23323 9.66265L2.68364 6.18782C2.61677 5.76506 2.90529 5.36813 3.32805 5.30127L17.7149 3.0258C18.1378 2.95892 18.5348 3.24759 18.6015 3.67049L18.7835 4.82361C18.8373 5.16457 19.1573 5.39736 19.4983 5.34356C19.8392 5.28975 20.072 4.96974 20.0182 4.62878L19.8363 3.47566C19.6619 2.37067 18.6246 1.61639 17.5197 1.79115L3.13278 4.06661C2.02813 4.24133 1.27427 5.27845 1.44899 6.3831L1.99857 9.85793C2.17346 10.9637 3.21238 11.7177 4.31788 11.5413L11.5185 10.392C11.8594 10.3376 12.0916 10.0171 12.0372 9.67628C11.9828 9.33542 11.6624 9.1032 11.3215 9.15761L4.12086 10.3069ZM19.9004 11.6151L5.45305 13.9001C5.04392 13.9649 4.76471 14.349 4.82942 14.7581L5.38775 18.2882C5.45246 18.6974 5.83658 18.9766 6.24571 18.9119L20.6931 16.6268C21.1022 16.5621 21.3814 16.178 21.3167 15.7689L20.7583 12.2388C20.6936 11.8296 20.3095 11.5504 19.9004 11.6151ZM5.25777 12.6655C4.21806 12.8299 3.49299 13.7679 3.57645 14.8C3.17867 15.1511 2.9637 15.6918 3.05264 16.2541L3.57767 19.5737C3.75023 20.6647 4.77455 21.4093 5.86556 21.2367L19.9927 19.0023C20.7197 18.8873 21.2751 18.3524 21.4519 17.6846C22.2223 17.3097 22.6921 16.4638 22.5513 15.5736L21.993 12.0435C21.8204 10.9525 20.7961 10.2079 19.7051 10.3805L17.9019 10.6657L17.3957 7.46986L19.3483 8.96297C19.6773 9.21457 20.148 9.1518 20.3996 8.82276C20.6512 8.49373 20.5885 8.02302 20.2594 7.77141L16.2213 4.68355L13.1334 8.72172C12.8818 9.05076 12.9445 9.52146 13.2736 9.77307C13.6026 10.0247 14.0733 9.96191 14.3249 9.63287L15.8945 7.58034L16.4203 10.9L5.25777 12.6655ZM7.66514 15.3252C7.25609 15.3903 6.97729 15.7748 7.04245 16.1838C7.1076 16.5929 7.49202 16.8717 7.90108 16.8065L14.5586 15.7461C14.9677 15.681 15.2465 15.2966 15.1813 14.8875C15.1162 14.4785 14.7317 14.1997 14.3227 14.2648L7.66514 15.3252Z" 219 219 + fill="currentColor" 220 220 + /> 221 221 + </svg> 222 222 + ); 223 223 + };

+8 -36

components/Toolbar/ImageToolbar.tsx

··· 6 6 import { ImageAltSmall, ImageRemoveAltSmall } from "components/Icons/ImageAlt"; 7 7 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 8 8 import { useSubscribe } from "src/replicache/useSubscribe"; 9 9 - import { 10 10 - ImageCoverImage, 11 11 - ImageCoverImageRemove, 12 12 - } from "components/Icons/ImageCoverImage"; 13 13 - import { Separator } from "components/Layout"; 14 14 - import { TextAlignmentButton } from "./TextAlignmentToolbar"; 15 15 - 16 16 - export const ImageToolbar = (props: { 17 17 - setToolbarState: (state: "image" | "text-alignment") => void; 18 18 - }) => { 19 19 - let focusedEntity = useUIState((s) => s.focusedEntity); 20 20 - let focusedEntityType = useEntity( 21 21 - focusedEntity?.entityType === "page" 22 22 - ? focusedEntity.entityID 23 23 - : focusedEntity?.parent || null, 24 24 - "page/type", 25 25 - ); 26 26 - 27 27 - return ( 28 28 - <div className="flex items-center gap-2 justify-between w-full"> 29 29 - <div className="flex items-center gap-2"> 30 30 - <TextAlignmentButton setToolbarState={props.setToolbarState} /> 31 31 - <ImageAltTextButton /> 32 32 - <ImageFullBleedButton /> 33 33 - <ImageCoverButton /> 34 34 - {focusedEntityType?.data.value !== "canvas" && ( 35 35 - <Separator classname="h-6!" /> 36 36 - )} 37 37 - </div> 38 38 - </div> 39 39 - ); 40 40 - }; 9 9 + import { ImageCoverImage } from "components/Icons/ImageCoverImage"; 41 10 42 11 export const ImageFullBleedButton = (props: {}) => { 43 12 let { rep } = useReplicache(); ··· 67 36 ); 68 37 }; 69 38 70 70 - export const ImageAltTextButton = (props: {}) => { 39 39 + export const ImageAltTextButton = (props: { 40 40 + setToolbarState: (s: "img-alt-text") => void; 41 41 + }) => { 71 42 let { rep } = useReplicache(); 72 43 let focusedBlock = useUIState((s) => s.focusedEntity)?.entityID || null; 73 44 ··· 77 48 let altEditorOpen = useUIState((s) => s.openPopover === focusedBlock); 78 49 let hasSrc = useEntity(focusedBlock, "block/image")?.data; 79 50 if (!hasSrc) return null; 51 51 + 80 52 return ( 81 53 <ToolbarButton 82 54 active={altText !== undefined} 83 55 onClick={async (e) => { 84 56 e.preventDefault(); 85 57 if (!focusedBlock) return; 86 86 - if (altText === undefined) { 58 58 + if (!altText) { 87 59 await rep?.mutate.assertFact({ 88 60 entity: focusedBlock, 89 61 attribute: "image/alt", ··· 137 109 } 138 110 }} 139 111 tooltipContent={ 140 140 - <div>{isCoverImage ? "Remove Cover Image" : "Use as Cover Image"}</div> 112 112 + <div>{isCoverImage ? "Remove Cover Image" : "Set as Cover Image"}</div> 141 113 } 142 114 > 143 143 - {isCoverImage ? <ImageCoverImageRemove /> : <ImageCoverImage />} 115 115 + <ImageCoverImage /> 144 116 </ToolbarButton> 145 117 ); 146 118 };

+103

components/Toolbar/LockBlockButton.tsx

··· 1 1 + import { useUIState } from "src/useUIState"; 2 2 + import { ToolbarButton } from "."; 3 3 + import { useEntity, useReplicache } from "src/replicache"; 4 4 + 5 5 + import { focusBlock } from "src/utils/focusBlock"; 6 6 + import { Props } from "components/Icons/Props"; 7 7 + 8 8 + export function LockBlockButton() { 9 9 + let focusedBlock = useUIState((s) => s.focusedEntity); 10 10 + let selectedBlocks = useUIState((s) => s.selectedBlocks); 11 11 + let type = useEntity(focusedBlock?.entityID || null, "block/type"); 12 12 + let locked = useEntity(focusedBlock?.entityID || null, "block/is-locked"); 13 13 + let { rep } = useReplicache(); 14 14 + if (focusedBlock?.entityType !== "block") return; 15 15 + return ( 16 16 + <ToolbarButton 17 17 + disabled={false} 18 18 + onClick={async () => { 19 19 + if (!locked?.data.value) { 20 20 + await rep?.mutate.assertFact({ 21 21 + entity: focusedBlock.entityID, 22 22 + attribute: "block/is-locked", 23 23 + data: { value: true, type: "boolean" }, 24 24 + }); 25 25 + if (selectedBlocks.length > 1) { 26 26 + for (let block of selectedBlocks) { 27 27 + await rep?.mutate.assertFact({ 28 28 + attribute: "block/is-locked", 29 29 + entity: block.value, 30 30 + data: { value: true, type: "boolean" }, 31 31 + }); 32 32 + } 33 33 + } 34 34 + } else { 35 35 + await rep?.mutate.retractFact({ factID: locked.id }); 36 36 + if (selectedBlocks.length > 1) { 37 37 + for (let block of selectedBlocks) { 38 38 + await rep?.mutate.retractAttribute({ 39 39 + attribute: "block/is-locked", 40 40 + entity: block.value, 41 41 + }); 42 42 + } 43 43 + } else { 44 44 + type && 45 45 + focusBlock( 46 46 + { 47 47 + type: type.data.value, 48 48 + parent: focusedBlock.parent, 49 49 + value: focusedBlock.entityID, 50 50 + }, 51 51 + { type: "end" }, 52 52 + ); 53 53 + } 54 54 + } 55 55 + }} 56 56 + tooltipContent={ 57 57 + <span>{!locked?.data.value ? "Lock Editing" : " Unlock to Edit"}</span> 58 58 + } 59 59 + > 60 60 + {!locked?.data.value ? <LockSmall /> : <UnlockSmall />} 61 61 + </ToolbarButton> 62 62 + ); 63 63 + } 64 64 + 65 65 + const LockSmall = (props: Props) => { 66 66 + return ( 67 67 + <svg 68 68 + width="24" 69 69 + height="24" 70 70 + viewBox="0 0 24 24" 71 71 + fill="none" 72 72 + xmlns="http://www.w3.org/2000/svg" 73 73 + {...props} 74 74 + > 75 75 + <path 76 76 + fillRule="evenodd" 77 77 + clipRule="evenodd" 78 78 + d="M12 3.9657C9.73217 3.9657 7.89374 5.80413 7.89374 8.07196V10.1794H7.78851C6.82201 10.1794 6.03851 10.9629 6.03851 11.9294V17C6.03851 18.6569 7.38166 20 9.03851 20H14.9615C16.6184 20 17.9615 18.6569 17.9615 17V11.9294C17.9615 10.9629 17.178 10.1794 16.2115 10.1794H16.1063V8.07196C16.1063 5.80413 14.2678 3.9657 12 3.9657ZM14.3563 10.1794V8.07196C14.3563 6.77063 13.3013 5.7157 12 5.7157C10.6987 5.7157 9.64374 6.77063 9.64374 8.07196V10.1794H14.3563ZM12.5824 15.3512C12.9924 15.1399 13.2727 14.7123 13.2727 14.2193C13.2727 13.5165 12.7029 12.9467 12 12.9467C11.2972 12.9467 10.7274 13.5165 10.7274 14.2193C10.7274 14.7271 11.0247 15.1654 11.4548 15.3696L11.2418 17.267C11.2252 17.4152 11.3411 17.5449 11.4902 17.5449H12.5147C12.6621 17.5449 12.7774 17.4181 12.7636 17.2714L12.5824 15.3512Z" 79 79 + fill="currentColor" 80 80 + /> 81 81 + </svg> 82 82 + ); 83 83 + }; 84 84 + 85 85 + const UnlockSmall = (props: Props) => { 86 86 + return ( 87 87 + <svg 88 88 + width="24" 89 89 + height="24" 90 90 + viewBox="0 0 24 24" 91 91 + fill="none" 92 92 + xmlns="http://www.w3.org/2000/svg" 93 93 + {...props} 94 94 + > 95 95 + <path 96 96 + fillRule="evenodd" 97 97 + clipRule="evenodd" 98 98 + d="M7.89376 6.62482C7.89376 4.35699 9.7322 2.51855 12 2.51855C14.2678 2.51855 16.1063 4.35699 16.1063 6.62482V10.1794H16.2115C17.178 10.1794 17.9615 10.9629 17.9615 11.9294V17C17.9615 18.6569 16.6184 20 14.9615 20H9.03854C7.38168 20 6.03854 18.6569 6.03854 17V11.9294C6.03854 10.9629 6.82204 10.1794 7.78854 10.1794H14.3563V6.62482C14.3563 5.32349 13.3013 4.26855 12 4.26855C10.6987 4.26855 9.64376 5.32349 9.64376 6.62482V7.72078C9.64376 8.20403 9.25201 8.59578 8.76876 8.59578C8.28551 8.59578 7.89376 8.20403 7.89376 7.72078V6.62482ZM13.1496 14.2193C13.1496 14.7123 12.8693 15.1399 12.4593 15.3512L12.6405 17.2714C12.6544 17.4181 12.539 17.5449 12.3916 17.5449H11.3672C11.218 17.5449 11.1021 17.4152 11.1187 17.267L11.3317 15.3696C10.9016 15.1654 10.6043 14.7271 10.6043 14.2193C10.6043 13.5165 11.1741 12.9467 11.8769 12.9467C12.5798 12.9467 13.1496 13.5165 13.1496 14.2193ZM5.62896 5.3862C5.4215 5.20395 5.10558 5.2244 4.92333 5.43186C4.74109 5.63932 4.76153 5.95525 4.969 6.13749L6.06209 7.09771C6.26955 7.27996 6.58548 7.25951 6.76772 7.05205C6.94997 6.84458 6.92952 6.52866 6.72206 6.34642L5.62896 5.3862ZM3.5165 6.64283C3.25418 6.55657 2.97159 6.69929 2.88533 6.96161C2.79906 7.22393 2.94178 7.50652 3.20411 7.59278L5.54822 8.36366C5.81054 8.44992 6.09313 8.3072 6.1794 8.04488C6.26566 7.78256 6.12294 7.49997 5.86062 7.41371L3.5165 6.64283ZM3.54574 9.42431C3.52207 9.14918 3.72592 8.90696 4.00105 8.8833L5.52254 8.75244C5.79766 8.72878 6.03988 8.93263 6.06354 9.20776C6.08721 9.48288 5.88335 9.7251 5.60823 9.74876L4.08674 9.87962C3.81162 9.90329 3.5694 9.69943 3.54574 9.42431Z" 99 99 + fill="currentColor" 100 100 + /> 101 101 + </svg> 102 102 + ); 103 103 + };

+12 -33

components/Toolbar/MultiSelectToolbar.tsx

··· 2 2 import { ReplicacheMutators, useReplicache } from "src/replicache"; 3 3 import { ToolbarButton } from "./index"; 4 4 import { copySelection } from "src/utils/copySelection"; 5 5 - import { useSmoker, useToaster } from "components/Toast"; 6 6 - 5 5 + import { useSmoker } from "components/Toast"; 6 6 + import { getBlocksWithType } from "src/hooks/queries/useBlocks"; 7 7 + import { Replicache } from "replicache"; 8 8 + import { LockBlockButton } from "./LockBlockButton"; 7 9 import { Props } from "components/Icons/Props"; 8 10 import { TextAlignmentButton } from "./TextAlignmentToolbar"; 9 11 import { getSortedSelection } from "components/SelectionManager/selectionState"; 10 10 - import { deleteBlock } from "src/utils/deleteBlock"; 11 11 - import { Separator, ShortcutKey } from "components/Layout"; 12 12 13 13 export const MultiselectToolbar = (props: { 14 14 - setToolbarState: (state: "multiselect" | "text-alignment") => void; 14 14 + setToolbarState: ( 15 15 + state: "areYouSure" | "multiselect" | "text-alignment", 16 16 + ) => void; 15 17 }) => { 16 16 - const { rep, undoManager } = useReplicache(); 18 18 + const { rep } = useReplicache(); 17 19 const smoker = useSmoker(); 18 18 - const toaster = useToaster(); 19 20 20 21 const handleCopy = async (event: React.MouseEvent) => { 21 22 if (!rep) return; 22 22 - let [sortedSelection] = await getSortedSelection(rep); 23 23 + const [sortedSelection] = await getSortedSelection(rep); 23 24 await copySelection(rep, sortedSelection); 24 25 smoker({ 25 26 position: { x: event.clientX, y: event.clientY }, ··· 32 33 <div className="flex items-center gap-2"> 33 34 <ToolbarButton 34 35 tooltipContent="Delete Selected Blocks" 35 35 - onClick={async (e) => { 36 36 - e.stopPropagation(); 37 37 - if (!rep) return; 38 38 - let [sortedSelection] = await getSortedSelection(rep); 39 39 - await deleteBlock( 40 40 - sortedSelection.map((b) => b.value), 41 41 - rep, 42 42 - undoManager, 43 43 - ); 44 44 - 45 45 - toaster({ 46 46 - content: ( 47 47 - <div className="font-bold items-center flex"> 48 48 - {sortedSelection.length} block 49 49 - {sortedSelection.length === 1 ? "" : "s"} deleted!{" "} 50 50 - <span className="px-2 flex"> 51 51 - <ShortcutKey>Ctrl</ShortcutKey> 52 52 - <ShortcutKey>Z</ShortcutKey>{" "} 53 53 - </span> 54 54 - to undo. 55 55 - </div> 56 56 - ), 57 57 - type: "success", 58 58 - }); 36 36 + onClick={() => { 37 37 + props.setToolbarState("areYouSure"); 59 38 }} 60 39 > 61 40 <TrashSmall /> ··· 68 47 <CopySmall /> 69 48 </ToolbarButton> 70 49 <TextAlignmentButton setToolbarState={props.setToolbarState} /> 71 71 - <Separator classname="h-6!" /> 50 50 + <LockBlockButton /> 72 51 </div> 73 52 </div> 74 53 );

-8

components/Toolbar/TextAlignmentToolbar.tsx

··· 7 7 export function TextAlignmentToolbar() { 8 8 let focusedBlock = useUIState((s) => s.focusedEntity); 9 9 let { rep } = useReplicache(); 10 10 - let alignment = useEntity( 11 11 - focusedBlock?.entityID || null, 12 12 - "block/text-alignment", 13 13 - )?.data.value; 14 10 let setAlignment = useCallback( 15 11 (alignment: Fact<"block/text-alignment">["data"]["value"]) => { 16 12 let blocks = useUIState.getState().selectedBlocks; ··· 30 26 <ToolbarButton 31 27 onClick={() => setAlignment("left")} 32 28 tooltipContent="Align Left" 33 33 - active={alignment === "left"} 34 29 > 35 30 <AlignLeftSmall /> 36 31 </ToolbarButton> 37 32 <ToolbarButton 38 33 onClick={() => setAlignment("center")} 39 34 tooltipContent="Align Center" 40 40 - active={alignment === "center"} 41 35 > 42 36 <AlignCenterSmall /> 43 37 </ToolbarButton> 44 38 <ToolbarButton 45 39 onClick={() => setAlignment("right")} 46 40 tooltipContent="Align Right" 47 47 - active={alignment === "right"} 48 41 > 49 42 <AlignRightSmall /> 50 43 </ToolbarButton> ··· 52 45 <ToolbarButton 53 46 onClick={() => setAlignment("justify")} 54 47 tooltipContent="Align Justified" 55 55 - active={alignment === "justify"} 56 48 > 57 49 <AlignJustifiedSmall /> 58 50 </ToolbarButton>

+3

components/Toolbar/TextToolbar.tsx

··· 8 8 import { ToolbarTypes } from "."; 9 9 import { schema } from "components/Blocks/TextBlock/schema"; 10 10 import { TextAlignmentButton } from "./TextAlignmentToolbar"; 11 11 + import { LockBlockButton } from "./LockBlockButton"; 11 12 import { Props } from "components/Icons/Props"; 12 13 import { isMac } from "src/utils/isDevice"; 13 14 ··· 80 81 <TextAlignmentButton setToolbarState={props.setToolbarState} /> 81 82 <ListButton setToolbarState={props.setToolbarState} /> 82 83 <Separator classname="h-6!" /> 84 84 + 85 85 + <LockBlockButton /> 83 86 </> 84 87 ); 85 88 };

+87 -57

components/Toolbar/index.tsx

··· 11 11 import { ListToolbar } from "./ListToolbar"; 12 12 import { HighlightToolbar } from "./HighlightToolbar"; 13 13 import { TextToolbar } from "./TextToolbar"; 14 14 - import { ImageToolbar } from "./ImageToolbar"; 14 14 + import { BlockToolbar } from "./BlockToolbar"; 15 15 import { MultiselectToolbar } from "./MultiSelectToolbar"; 16 16 + import { AreYouSure } from "components/Blocks/DeleteBlock"; 17 17 + import { deleteBlock } from "src/utils/deleteBlock"; 16 18 import { TooltipButton } from "components/Buttons"; 17 19 import { TextAlignmentToolbar } from "./TextAlignmentToolbar"; 18 20 import { useIsMobile } from "src/hooks/isMobile"; 19 21 import { CloseTiny } from "components/Icons/CloseTiny"; 20 22 21 23 export type ToolbarTypes = 24 24 + | "areYouSure" 22 25 | "default" 26 26 + | "block" 23 27 | "multiselect" 24 28 | "highlight" 25 29 | "link" ··· 27 31 | "text-alignment" 28 32 | "list" 29 33 | "linkBlock" 30 30 - | "img-alt-text" 31 31 - | "image"; 34 34 + | "img-alt-text"; 32 35 33 33 - export const Toolbar = (props: { 34 34 - pageID: string; 35 35 - blockID: string; 36 36 - blockType: string | null | undefined; 37 37 - }) => { 36 36 + export const Toolbar = (props: { pageID: string; blockID: string }) => { 37 37 + let { rep } = useReplicache(); 38 38 + 38 39 let [toolbarState, setToolbarState] = useState<ToolbarTypes>("default"); 39 40 40 40 - let activeEditor = useEditorStates((s) => s.editorStates[props.blockID]); 41 41 + let focusedEntity = useUIState((s) => s.focusedEntity); 41 42 let selectedBlocks = useUIState((s) => s.selectedBlocks); 43 43 + let activeEditor = useEditorStates((s) => s.editorStates[props.blockID]); 44 44 + 45 45 + let blockType = useEntity(props.blockID, "block/type")?.data.value; 42 46 43 47 let lastUsedHighlight = useUIState((s) => s.lastUsedHighlight); 44 48 let setLastUsedHighlight = (color: "1" | "2" | "3") => ··· 60 64 }; 61 65 }, [toolbarState]); 62 66 63 63 - let isTextBlock = 64 64 - props.blockType === "heading" || 65 65 - props.blockType === "text" || 66 66 - props.blockType === "blockquote"; 67 67 + useEffect(() => { 68 68 + if (!blockType) return; 69 69 + if ( 70 70 + blockType !== "heading" && 71 71 + blockType !== "text" && 72 72 + blockType !== "blockquote" 73 73 + ) { 74 74 + setToolbarState("block"); 75 75 + } else { 76 76 + setToolbarState("default"); 77 77 + } 78 78 + }, [blockType]); 67 79 68 80 useEffect(() => { 69 69 - if (selectedBlocks.length > 1) { 81 81 + if ( 82 82 + selectedBlocks.length > 1 && 83 83 + !["areYousure", "text-alignment"].includes(toolbarState) 84 84 + ) { 70 85 setToolbarState("multiselect"); 71 71 - return; 72 72 - } 73 73 - if (isTextBlock) { 86 86 + } else if (toolbarState === "multiselect") { 74 87 setToolbarState("default"); 75 88 } 76 76 - if (props.blockType === "image") { 77 77 - setToolbarState("image"); 78 78 - } 79 79 - if (props.blockType === "button" || props.blockType === "datetime") { 80 80 - setToolbarState("text-alignment"); 81 81 - } else null; 82 82 - }, [props.blockType, selectedBlocks]); 89 89 + }, [selectedBlocks.length, toolbarState]); 90 90 + let isMobile = useIsMobile(); 83 91 84 84 - let isMobile = useIsMobile(); 85 92 return ( 86 93 <Tooltip.Provider> 87 94 <div ··· 118 125 <TextBlockTypeToolbar onClose={() => setToolbarState("default")} /> 119 126 ) : toolbarState === "text-alignment" ? ( 120 127 <TextAlignmentToolbar /> 121 121 - ) : toolbarState === "image" ? ( 122 122 - <ImageToolbar setToolbarState={setToolbarState} /> 128 128 + ) : toolbarState === "block" ? ( 129 129 + <BlockToolbar setToolbarState={setToolbarState} /> 123 130 ) : toolbarState === "multiselect" ? ( 124 131 <MultiselectToolbar setToolbarState={setToolbarState} /> 132 132 + ) : toolbarState === "areYouSure" ? ( 133 133 + <AreYouSure 134 134 + compact 135 135 + type={blockType} 136 136 + entityID={selectedBlocks.map((b) => b.value)} 137 137 + onClick={() => { 138 138 + rep && 139 139 + deleteBlock( 140 140 + selectedBlocks.map((b) => b.value), 141 141 + rep, 142 142 + ); 143 143 + }} 144 144 + closeAreYouSure={() => { 145 145 + setToolbarState( 146 146 + selectedBlocks.length > 1 147 147 + ? "multiselect" 148 148 + : blockType !== "heading" && blockType !== "text" 149 149 + ? "block" 150 150 + : "default", 151 151 + ); 152 152 + }} 153 153 + /> 125 154 ) : null} 126 155 </div> 127 156 {/* if the thing is are you sure state, don't show the x... is each thing handling its own are you sure? theres no need for that */} 128 128 - 129 129 - <button 130 130 - className="toolbarBackToDefault hover:text-accent-contrast" 131 131 - onMouseDown={(e) => { 132 132 - e.preventDefault(); 133 133 - if ( 134 134 - toolbarState === "multiselect" || 135 135 - toolbarState === "image" || 136 136 - toolbarState === "default" 137 137 - ) { 138 138 - // close the toolbar 139 139 - useUIState.setState(() => ({ 140 140 - focusedEntity: { 141 141 - entityType: "page", 142 142 - entityID: props.pageID, 143 143 - }, 144 144 - selectedBlocks: [], 145 145 - })); 146 146 - } else { 147 147 - if (props.blockType === "image") { 148 148 - setToolbarState("image"); 149 149 - } 150 150 - if (isTextBlock) { 151 151 - setToolbarState("default"); 157 157 + {toolbarState !== "areYouSure" && ( 158 158 + <button 159 159 + className="toolbarBackToDefault hover:text-accent-contrast" 160 160 + onMouseDown={(e) => { 161 161 + e.preventDefault(); 162 162 + if ( 163 163 + toolbarState === "multiselect" || 164 164 + toolbarState === "block" || 165 165 + toolbarState === "default" 166 166 + ) { 167 167 + useUIState.setState(() => ({ 168 168 + focusedEntity: { 169 169 + entityType: "page", 170 170 + entityID: props.pageID, 171 171 + }, 172 172 + selectedBlocks: [], 173 173 + })); 174 174 + } else { 175 175 + if (blockType !== "heading" && blockType !== "text") { 176 176 + setToolbarState("block"); 177 177 + } else { 178 178 + setToolbarState("default"); 179 179 + } 152 180 } 153 153 - } 154 154 - }} 155 155 - > 156 156 - <CloseTiny /> 157 157 - </button> 181 181 + }} 182 182 + > 183 183 + <CloseTiny /> 184 184 + </button> 185 185 + )} 158 186 </div> 159 187 </Tooltip.Provider> 160 188 ); ··· 170 198 hiddenOnCanvas?: boolean; 171 199 }) => { 172 200 let focusedEntity = useUIState((s) => s.focusedEntity); 173 173 - let isDisabled = props.disabled; 201 201 + let isLocked = useEntity(focusedEntity?.entityID || null, "block/is-locked"); 202 202 + let isDisabled = 203 203 + props.disabled === undefined ? !!isLocked?.data.value : props.disabled; 174 204 175 205 let focusedEntityType = useEntity( 176 206 focusedEntity?.entityType === "page"

+8 -8

lexicons/api/lexicons.ts

··· 1441 1441 properties: { 1442 1442 title: { 1443 1443 type: 'string', 1444 1444 - maxLength: 5000, 1445 1445 - maxGraphemes: 500, 1444 1444 + maxLength: 1280, 1445 1445 + maxGraphemes: 128, 1446 1446 }, 1447 1447 postRef: { 1448 1448 type: 'ref', ··· 1450 1450 }, 1451 1451 description: { 1452 1452 type: 'string', 1453 1453 - maxLength: 30000, 1454 1454 - maxGraphemes: 3000, 1453 1453 + maxLength: 3000, 1454 1454 + maxGraphemes: 300, 1455 1455 }, 1456 1456 publishedAt: { 1457 1457 type: 'string', ··· 2128 2128 type: 'blob', 2129 2129 }, 2130 2130 description: { 2131 2131 - maxGraphemes: 3000, 2132 2132 - maxLength: 30000, 2131 2131 + maxGraphemes: 300, 2132 2132 + maxLength: 3000, 2133 2133 type: 'string', 2134 2134 }, 2135 2135 path: { ··· 2165 2165 type: 'ref', 2166 2166 }, 2167 2167 title: { 2168 2168 - maxGraphemes: 500, 2169 2169 - maxLength: 5000, 2168 2168 + maxGraphemes: 128, 2169 2169 + maxLength: 1280, 2170 2170 type: 'string', 2171 2171 }, 2172 2172 updatedAt: {

+4 -4

lexicons/pub/leaflet/document.json

··· 18 18 "properties": { 19 19 "title": { 20 20 "type": "string", 21 21 - "maxLength": 5000, 22 22 - "maxGraphemes": 500 21 21 + "maxLength": 1280, 22 22 + "maxGraphemes": 128 23 23 }, 24 24 "postRef": { 25 25 "type": "ref", ··· 27 27 }, 28 28 "description": { 29 29 "type": "string", 30 30 - "maxLength": 30000, 31 31 - "maxGraphemes": 3000 30 30 + "maxLength": 3000, 31 31 + "maxGraphemes": 300 32 32 }, 33 33 "publishedAt": { 34 34 "type": "string",

+4 -4

lexicons/site/standard/document.json

··· 19 19 "type": "blob" 20 20 }, 21 21 "description": { 22 22 - "maxGraphemes": 3000, 23 23 - "maxLength": 30000, 22 22 + "maxGraphemes": 300, 23 23 + "maxLength": 3000, 24 24 "type": "string" 25 25 }, 26 26 "path": { ··· 53 53 "type": "ref" 54 54 }, 55 55 "title": { 56 56 - "maxGraphemes": 500, 57 57 - "maxLength": 5000, 56 56 + "maxGraphemes": 128, 57 57 + "maxLength": 1280, 58 58 "type": "string" 59 59 }, 60 60 "updatedAt": {

+2 -2

lexicons/src/document.ts

··· 16 16 type: "object", 17 17 required: ["pages", "author", "title"], 18 18 properties: { 19 19 - title: { type: "string", maxLength: 5000, maxGraphemes: 500 }, 19 19 + title: { type: "string", maxLength: 1280, maxGraphemes: 128 }, 20 20 postRef: { type: "ref", ref: "com.atproto.repo.strongRef" }, 21 21 - description: { type: "string", maxLength: 30000, maxGraphemes: 3000 }, 21 21 + description: { type: "string", maxLength: 3000, maxGraphemes: 300 }, 22 22 publishedAt: { type: "string", format: "datetime" }, 23 23 publication: { type: "string", format: "at-uri" }, 24 24 author: { type: "string", format: "at-identifier" },

-1

package.json

··· 4 4 "description": "", 5 5 "main": "index.js", 6 6 "scripts": { 7 7 - "lint": "next lint", 8 7 "dev": "TZ=UTC next dev --turbo", 9 8 "publish-lexicons": "tsx lexicons/publish.ts", 10 9 "generate-db-types": "supabase gen types --local > supabase/database.types.ts && drizzle-kit introspect && rm -rf ./drizzle/*.sql ./drizzle/meta",

+1 -1

src/hooks/useLongPress.ts

··· 90 90 return useMemo( 91 91 () => ({ 92 92 isLongPress: isLongPress, 93 93 - longPressHandlers: { 93 93 + handlers: { 94 94 onPointerDown, 95 95 onPointerUp: end, 96 96 onClickCapture: click,

+2 -106

src/notifications.ts

··· 21 21 | { type: "comment"; comment_uri: string; parent_uri?: string } 22 22 | { type: "subscribe"; subscription_uri: string } 23 23 | { type: "quote"; bsky_post_uri: string; document_uri: string } 24 24 - | { type: "bsky_post_embed"; document_uri: string; bsky_post_uri: string } 25 24 | { type: "mention"; document_uri: string; mention_type: "did" } 26 25 | { type: "mention"; document_uri: string; mention_type: "publication"; mentioned_uri: string } 27 26 | { type: "mention"; document_uri: string; mention_type: "document"; mentioned_uri: string } ··· 33 32 | HydratedCommentNotification 34 33 | HydratedSubscribeNotification 35 34 | HydratedQuoteNotification 36 36 - | HydratedBskyPostEmbedNotification 37 35 | HydratedMentionNotification 38 36 | HydratedCommentMentionNotification; 39 37 export async function hydrateNotifications( 40 38 notifications: NotificationRow[], 41 39 ): Promise<Array<HydratedNotification>> { 42 40 // Call all hydrators in parallel 43 43 - const [commentNotifications, subscribeNotifications, quoteNotifications, bskyPostEmbedNotifications, mentionNotifications, commentMentionNotifications] = await Promise.all([ 41 41 + const [commentNotifications, subscribeNotifications, quoteNotifications, mentionNotifications, commentMentionNotifications] = await Promise.all([ 44 42 hydrateCommentNotifications(notifications), 45 43 hydrateSubscribeNotifications(notifications), 46 44 hydrateQuoteNotifications(notifications), 47 47 - hydrateBskyPostEmbedNotifications(notifications), 48 45 hydrateMentionNotifications(notifications), 49 46 hydrateCommentMentionNotifications(notifications), 50 47 ]); 51 48 52 49 // Combine all hydrated notifications 53 53 - const allHydrated = [...commentNotifications, ...subscribeNotifications, ...quoteNotifications, ...bskyPostEmbedNotifications, ...mentionNotifications, ...commentMentionNotifications]; 50 50 + const allHydrated = [...commentNotifications, ...subscribeNotifications, ...quoteNotifications, ...mentionNotifications, ...commentMentionNotifications]; 54 51 55 52 // Sort by created_at to maintain order 56 53 allHydrated.sort( ··· 201 198 document_uri: notification.data.document_uri, 202 199 bskyPost, 203 200 document, 204 204 - normalizedDocument: normalizeDocumentRecord(document.data, document.uri), 205 205 - normalizedPublication: normalizePublicationRecord( 206 206 - document.documents_in_publications[0]?.publications?.record, 207 207 - ), 208 208 - }; 209 209 - }) 210 210 - .filter((n) => n !== null); 211 211 - } 212 212 - 213 213 - export type HydratedBskyPostEmbedNotification = Awaited< 214 214 - ReturnType<typeof hydrateBskyPostEmbedNotifications> 215 215 - >[0]; 216 216 - 217 217 - async function hydrateBskyPostEmbedNotifications(notifications: NotificationRow[]) { 218 218 - const bskyPostEmbedNotifications = notifications.filter( 219 219 - (n): n is NotificationRow & { data: ExtractNotificationType<"bsky_post_embed"> } => 220 220 - (n.data as NotificationData)?.type === "bsky_post_embed", 221 221 - ); 222 222 - 223 223 - if (bskyPostEmbedNotifications.length === 0) { 224 224 - return []; 225 225 - } 226 226 - 227 227 - // Fetch document data (the leaflet that embedded the post) 228 228 - const documentUris = bskyPostEmbedNotifications.map((n) => n.data.document_uri); 229 229 - const bskyPostUris = bskyPostEmbedNotifications.map((n) => n.data.bsky_post_uri); 230 230 - 231 231 - const [{ data: documents }, { data: cachedBskyPosts }] = await Promise.all([ 232 232 - supabaseServerClient 233 233 - .from("documents") 234 234 - .select("*, documents_in_publications(publications(*))") 235 235 - .in("uri", documentUris), 236 236 - supabaseServerClient 237 237 - .from("bsky_posts") 238 238 - .select("*") 239 239 - .in("uri", bskyPostUris), 240 240 - ]); 241 241 - 242 242 - // Find which posts we need to fetch from the API 243 243 - const cachedPostUris = new Set(cachedBskyPosts?.map((p) => p.uri) ?? []); 244 244 - const missingPostUris = bskyPostUris.filter((uri) => !cachedPostUris.has(uri)); 245 245 - 246 246 - // Fetch missing posts from Bluesky API 247 247 - const fetchedPosts = new Map<string, { text: string } | null>(); 248 248 - if (missingPostUris.length > 0) { 249 249 - try { 250 250 - const { AtpAgent } = await import("@atproto/api"); 251 251 - const agent = new AtpAgent({ service: "https://public.api.bsky.app" }); 252 252 - const response = await agent.app.bsky.feed.getPosts({ uris: missingPostUris }); 253 253 - for (const post of response.data.posts) { 254 254 - const record = post.record as { text?: string }; 255 255 - fetchedPosts.set(post.uri, { text: record.text ?? "" }); 256 256 - } 257 257 - } catch (error) { 258 258 - console.error("Failed to fetch Bluesky posts:", error); 259 259 - } 260 260 - } 261 261 - 262 262 - // Extract unique DIDs from document URIs to resolve handles 263 263 - const documentCreatorDids = [...new Set(documentUris.map((uri) => new AtUri(uri).host))]; 264 264 - 265 265 - // Resolve DIDs to handles in parallel 266 266 - const didToHandleMap = new Map<string, string | null>(); 267 267 - await Promise.all( 268 268 - documentCreatorDids.map(async (did) => { 269 269 - try { 270 270 - const resolved = await idResolver.did.resolve(did); 271 271 - const handle = resolved?.alsoKnownAs?.[0] 272 272 - ? resolved.alsoKnownAs[0].slice(5) // Remove "at://" prefix 273 273 - : null; 274 274 - didToHandleMap.set(did, handle); 275 275 - } catch (error) { 276 276 - console.error(`Failed to resolve DID ${did}:`, error); 277 277 - didToHandleMap.set(did, null); 278 278 - } 279 279 - }), 280 280 - ); 281 281 - 282 282 - return bskyPostEmbedNotifications 283 283 - .map((notification) => { 284 284 - const document = documents?.find((d) => d.uri === notification.data.document_uri); 285 285 - if (!document) return null; 286 286 - 287 287 - const documentCreatorDid = new AtUri(notification.data.document_uri).host; 288 288 - const documentCreatorHandle = didToHandleMap.get(documentCreatorDid) ?? null; 289 289 - 290 290 - // Get post text from cache or fetched data 291 291 - const cachedPost = cachedBskyPosts?.find((p) => p.uri === notification.data.bsky_post_uri); 292 292 - const postView = cachedPost?.post_view as { record?: { text?: string } } | undefined; 293 293 - const bskyPostText = postView?.record?.text ?? fetchedPosts.get(notification.data.bsky_post_uri)?.text ?? null; 294 294 - 295 295 - return { 296 296 - id: notification.id, 297 297 - recipient: notification.recipient, 298 298 - created_at: notification.created_at, 299 299 - type: "bsky_post_embed" as const, 300 300 - document_uri: notification.data.document_uri, 301 301 - bsky_post_uri: notification.data.bsky_post_uri, 302 302 - document, 303 303 - documentCreatorHandle, 304 304 - bskyPostText, 305 201 normalizedDocument: normalizeDocumentRecord(document.data, document.uri), 306 202 normalizedPublication: normalizePublicationRecord( 307 203 document.documents_in_publications[0]?.publications?.record,

-7

src/replicache/clientMutationContext.ts

··· 67 67 textData.value = base64.fromByteArray(updateBytes); 68 68 } 69 69 } 70 70 - } else if (f.id) { 71 71 - // For cardinality "many" with an explicit ID, fetch the existing fact 72 72 - // so undo can restore it instead of deleting 73 73 - let fact = await tx.get(f.id); 74 74 - if (fact) { 75 75 - existingFact = [fact as Fact<any>]; 76 76 - } 77 70 } 78 71 if (!ignoreUndo) 79 72 undoManager.add({

+10 -31

src/replicache/mutations.ts

··· 4 4 import { SupabaseClient } from "@supabase/supabase-js"; 5 5 import { Database } from "supabase/database.types"; 6 6 import { generateKeyBetween } from "fractional-indexing"; 7 7 - import { v7 } from "uuid"; 8 7 9 8 export type MutationContext = { 10 9 permission_token_id: string; ··· 308 307 { blockEntity: string } | { blockEntity: string }[] 309 308 > = async (args, ctx) => { 310 309 for (let block of [args].flat()) { 310 310 + let [isLocked] = await ctx.scanIndex.eav( 311 311 + block.blockEntity, 312 312 + "block/is-locked", 313 313 + ); 314 314 + if (isLocked?.data.value) continue; 311 315 let [image] = await ctx.scanIndex.eav(block.blockEntity, "block/image"); 312 316 await ctx.runOnServer(async ({ supabase }) => { 313 317 if (image) { ··· 423 427 }, 424 428 }); 425 429 }; 426 426 - const moveBlockDown: Mutation<{ 427 427 - entityID: string; 428 428 - parent: string; 429 429 - permission_set?: string; 430 430 - }> = async (args, ctx) => { 430 430 + const moveBlockDown: Mutation<{ entityID: string; parent: string }> = async ( 431 431 + args, 432 432 + ctx, 433 433 + ) => { 431 434 let children = (await ctx.scanIndex.eav(args.parent, "card/block")).toSorted( 432 435 (a, b) => (a.data.position > b.data.position ? 1 : -1), 433 436 ); 434 437 let index = children.findIndex((f) => f.data.value === args.entityID); 435 438 if (index === -1) return; 436 439 let next = children[index + 1]; 437 437 - if (!next) { 438 438 - // If this is the last block, create a new empty block above it using the addBlock helper 439 439 - if (!args.permission_set) return; // Can't create block without permission_set 440 440 - 441 441 - let newEntityID = v7(); 442 442 - let previousBlock = children[index - 1]; 443 443 - let position = generateKeyBetween( 444 444 - previousBlock?.data.position || null, 445 445 - children[index].data.position, 446 446 - ); 447 447 - 448 448 - // Call the addBlock mutation helper directly 449 449 - await addBlock( 450 450 - { 451 451 - parent: args.parent, 452 452 - permission_set: args.permission_set, 453 453 - factID: v7(), 454 454 - type: "text", 455 455 - newEntityID: newEntityID, 456 456 - position: position, 457 457 - }, 458 458 - ctx, 459 459 - ); 460 460 - return; 461 461 - } 440 440 + if (!next) return; 462 441 await ctx.retractFact(children[index].id); 463 442 await ctx.assertFact({ 464 443 id: children[index].id,

-122

src/utils/deduplicateRecords.ts

··· 1 1 - /** 2 2 - * Utilities for deduplicating records that may exist under both 3 3 - * pub.leaflet.* and site.standard.* namespaces. 4 4 - * 5 5 - * After the migration to site.standard.*, records can exist in both namespaces 6 6 - * with the same DID and rkey. This utility deduplicates them, preferring 7 7 - * site.standard.* records when available. 8 8 - */ 9 9 - 10 10 - import { AtUri } from "@atproto/syntax"; 11 11 - 12 12 - /** 13 13 - * Extracts the identity key (DID + rkey) from an AT URI. 14 14 - * This key uniquely identifies a record across namespaces. 15 15 - * 16 16 - * @example 17 17 - * getRecordIdentityKey("at://did:plc:abc/pub.leaflet.document/3abc") 18 18 - * // Returns: "did:plc:abc/3abc" 19 19 - * 20 20 - * getRecordIdentityKey("at://did:plc:abc/site.standard.document/3abc") 21 21 - * // Returns: "did:plc:abc/3abc" (same key, different namespace) 22 22 - */ 23 23 - function getRecordIdentityKey(uri: string): string | null { 24 24 - try { 25 25 - const parsed = new AtUri(uri); 26 26 - return `${parsed.host}/${parsed.rkey}`; 27 27 - } catch { 28 28 - return null; 29 29 - } 30 30 - } 31 31 - 32 32 - /** 33 33 - * Checks if a URI is from the site.standard namespace. 34 34 - */ 35 35 - function isSiteStandardUri(uri: string): boolean { 36 36 - return uri.includes("/site.standard."); 37 37 - } 38 38 - 39 39 - /** 40 40 - * Deduplicates an array of records that have a `uri` property. 41 41 - * 42 42 - * When records exist under both pub.leaflet.* and site.standard.* namespaces 43 43 - * (same DID and rkey), this function keeps only the site.standard version. 44 44 - * 45 45 - * @param records - Array of records with a `uri` property 46 46 - * @returns Deduplicated array, preferring site.standard records 47 47 - * 48 48 - * @example 49 49 - * const docs = [ 50 50 - * { uri: "at://did:plc:abc/pub.leaflet.document/3abc", data: {...} }, 51 51 - * { uri: "at://did:plc:abc/site.standard.document/3abc", data: {...} }, 52 52 - * { uri: "at://did:plc:abc/pub.leaflet.document/3def", data: {...} }, 53 53 - * ]; 54 54 - * const deduped = deduplicateByUri(docs); 55 55 - * // Returns: [ 56 56 - * // { uri: "at://did:plc:abc/site.standard.document/3abc", data: {...} }, 57 57 - * // { uri: "at://did:plc:abc/pub.leaflet.document/3def", data: {...} }, 58 58 - * // ] 59 59 - */ 60 60 - export function deduplicateByUri<T extends { uri: string }>(records: T[]): T[] { 61 61 - const recordsByKey = new Map<string, T>(); 62 62 - 63 63 - for (const record of records) { 64 64 - const key = getRecordIdentityKey(record.uri); 65 65 - if (!key) { 66 66 - // Invalid URI, keep the record as-is 67 67 - continue; 68 68 - } 69 69 - 70 70 - const existing = recordsByKey.get(key); 71 71 - if (!existing) { 72 72 - recordsByKey.set(key, record); 73 73 - } else { 74 74 - // Prefer site.standard records over pub.leaflet records 75 75 - if (isSiteStandardUri(record.uri) && !isSiteStandardUri(existing.uri)) { 76 76 - recordsByKey.set(key, record); 77 77 - } 78 78 - // If both are same namespace or existing is already site.standard, keep existing 79 79 - } 80 80 - } 81 81 - 82 82 - return Array.from(recordsByKey.values()); 83 83 - } 84 84 - 85 85 - /** 86 86 - * Deduplicates records while preserving the original order based on the first 87 87 - * occurrence of each unique record. 88 88 - * 89 89 - * Same deduplication logic as deduplicateByUri, but maintains insertion order. 90 90 - * 91 91 - * @param records - Array of records with a `uri` property 92 92 - * @returns Deduplicated array in original order, preferring site.standard records 93 93 - */ 94 94 - export function deduplicateByUriOrdered<T extends { uri: string }>( 95 95 - records: T[] 96 96 - ): T[] { 97 97 - const recordsByKey = new Map<string, { record: T; index: number }>(); 98 98 - 99 99 - for (let i = 0; i < records.length; i++) { 100 100 - const record = records[i]; 101 101 - const key = getRecordIdentityKey(record.uri); 102 102 - if (!key) { 103 103 - continue; 104 104 - } 105 105 - 106 106 - const existing = recordsByKey.get(key); 107 107 - if (!existing) { 108 108 - recordsByKey.set(key, { record, index: i }); 109 109 - } else { 110 110 - // Prefer site.standard records over pub.leaflet records 111 111 - if (isSiteStandardUri(record.uri) && !isSiteStandardUri(existing.record.uri)) { 112 112 - // Replace with site.standard but keep original position 113 113 - recordsByKey.set(key, { record, index: existing.index }); 114 114 - } 115 115 - } 116 116 - } 117 117 - 118 118 - // Sort by original index to maintain order 119 119 - return Array.from(recordsByKey.values()) 120 120 - .sort((a, b) => a.index - b.index) 121 121 - .map((entry) => entry.record); 122 122 - }

+2 -10

src/utils/deleteBlock.ts

··· 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 - import { UndoManager } from "src/undoManager"; 8 7 9 8 export async function deleteBlock( 10 9 entities: string[], 11 10 rep: Replicache<ReplicacheMutators>, 12 12 - undoManager?: UndoManager, 13 11 ) { 14 12 // get what pagess we need to close as a result of deleting this block 15 13 let pagesToClose = [] as string[]; ··· 34 32 } 35 33 } 36 34 37 37 - // figure out what to focus 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 38 37 let focusedBlock = useUIState.getState().focusedEntity; 39 38 let parent = 40 39 focusedBlock?.entityType === "page" ··· 45 44 let parentType = await rep?.query((tx) => 46 45 scanIndex(tx).eav(parent, "page/type"), 47 46 ); 48 48 - // if the page is a canvas, focus the page 49 47 if (parentType[0]?.data.value === "canvas") { 50 48 useUIState 51 49 .getState() 52 50 .setFocusedBlock({ entityType: "page", entityID: parent }); 53 51 useUIState.getState().setSelectedBlocks([]); 54 52 } else { 55 55 - // if the page is a doc, focus the previous block (or if there isn't a prev block, focus the next block) 56 53 let siblings = 57 54 (await rep?.query((tx) => getBlocksWithType(tx, parent))) || []; 58 55 ··· 108 105 } 109 106 } 110 107 111 111 - // close the pages 112 108 pagesToClose.forEach((page) => page && useUIState.getState().closePage(page)); 113 113 - undoManager && undoManager.startGroup(); 114 114 - 115 115 - // delete the blocks 116 109 await Promise.all( 117 110 entities.map((entity) => 118 111 rep?.mutate.removeBlock({ ··· 120 113 }), 121 114 ), 122 115 ); 123 123 - undoManager && undoManager.endGroup(); 124 116 }

+1 -3

src/utils/focusBlock.ts

··· 48 48 } 49 49 50 50 if (pos?.offset !== undefined) { 51 51 - // trying to focus the block in a subpage causes the page to flash and scroll back to the parent page. 52 52 - // idk how to fix so i'm giving up -- celine 53 53 - // el?.focus(); 51 51 + el?.focus(); 54 52 requestAnimationFrame(() => { 55 53 el?.setSelectionRange(pos.offset, pos.offset); 56 54 });

-81

src/utils/moveBlock.ts

··· 1 1 - import { Replicache } from "replicache"; 2 2 - import { ReplicacheMutators } from "src/replicache"; 3 3 - import { getSortedSelection } from "components/SelectionManager/selectionState"; 4 4 - import { useUIState } from "src/useUIState"; 5 5 - 6 6 - export const moveBlockUp = async (rep: Replicache<ReplicacheMutators>) => { 7 7 - let [sortedBlocks, siblings] = await getSortedSelection(rep); 8 8 - if (sortedBlocks.length > 1) return; 9 9 - let block = sortedBlocks[0]; 10 10 - let previousBlock = 11 11 - siblings?.[siblings.findIndex((s) => s.value === block.value) - 1]; 12 12 - if (previousBlock.value === block.listData?.parent) { 13 13 - previousBlock = 14 14 - siblings?.[siblings.findIndex((s) => s.value === block.value) - 2]; 15 15 - } 16 16 - 17 17 - if ( 18 18 - previousBlock?.listData && 19 19 - block.listData && 20 20 - block.listData.depth > 1 && 21 21 - !previousBlock.listData.path.find( 22 22 - (f) => f.entity === block.listData?.parent, 23 23 - ) 24 24 - ) { 25 25 - let depth = block.listData.depth; 26 26 - let newParent = previousBlock.listData.path.find( 27 27 - (f) => f.depth === depth - 1, 28 28 - ); 29 29 - if (!newParent) return; 30 30 - if (useUIState.getState().foldedBlocks.includes(newParent.entity)) 31 31 - useUIState.getState().toggleFold(newParent.entity); 32 32 - rep?.mutate.moveBlock({ 33 33 - block: block.value, 34 34 - oldParent: block.listData?.parent, 35 35 - newParent: newParent.entity, 36 36 - position: { type: "end" }, 37 37 - }); 38 38 - } else { 39 39 - rep?.mutate.moveBlockUp({ 40 40 - entityID: block.value, 41 41 - parent: block.listData?.parent || block.parent, 42 42 - }); 43 43 - } 44 44 - }; 45 45 - 46 46 - export const moveBlockDown = async ( 47 47 - rep: Replicache<ReplicacheMutators>, 48 48 - permission_set: string, 49 49 - ) => { 50 50 - let [sortedBlocks, siblings] = await getSortedSelection(rep); 51 51 - if (sortedBlocks.length > 1) return; 52 52 - let block = sortedBlocks[0]; 53 53 - let nextBlock = siblings 54 54 - .slice(siblings.findIndex((s) => s.value === block.value) + 1) 55 55 - .find( 56 56 - (f) => 57 57 - f.listData && 58 58 - block.listData && 59 59 - !f.listData.path.find((f) => f.entity === block.value), 60 60 - ); 61 61 - if ( 62 62 - nextBlock?.listData && 63 63 - block.listData && 64 64 - nextBlock.listData.depth === block.listData.depth - 1 65 65 - ) { 66 66 - if (useUIState.getState().foldedBlocks.includes(nextBlock.value)) 67 67 - useUIState.getState().toggleFold(nextBlock.value); 68 68 - rep?.mutate.moveBlock({ 69 69 - block: block.value, 70 70 - oldParent: block.listData?.parent, 71 71 - newParent: nextBlock.value, 72 72 - position: { type: "first" }, 73 73 - }); 74 74 - } else { 75 75 - rep?.mutate.moveBlockDown({ 76 76 - entityID: block.value, 77 77 - parent: block.listData?.parent || block.parent, 78 78 - permission_set: permission_set, 79 79 - }); 80 80 - } 81 81 - };

+5 -19

src/utils/uriHelpers.ts

··· 18 18 * or site.standard.publication namespaces. 19 19 */ 20 20 export function publicationUriFilter(did: string, rkey: string): string { 21 21 - const standard = AtUri.make( 22 22 - did, 23 23 - ids.SiteStandardPublication, 24 24 - rkey, 25 25 - ).toString(); 21 21 + const standard = AtUri.make(did, ids.SiteStandardPublication, rkey).toString(); 26 22 const legacy = AtUri.make(did, ids.PubLeafletPublication, rkey).toString(); 27 23 return `uri.eq.${standard},uri.eq.${legacy}`; 28 24 } ··· 31 27 * Returns an OR filter string for Supabase queries to match a publication by name 32 28 * or by either namespace URI. Used when the rkey might be the publication name. 33 29 */ 34 34 - export function publicationNameOrUriFilter( 35 35 - did: string, 36 36 - nameOrRkey: string, 37 37 - ): string { 38 38 - let standard, legacy; 39 39 - if (/^(?!\.$|\.\.S)[A-Za-z0-9._:~-]{1,512}$/.test(nameOrRkey)) { 40 40 - standard = AtUri.make( 41 41 - did, 42 42 - ids.SiteStandardPublication, 43 43 - nameOrRkey, 44 44 - ).toString(); 45 45 - legacy = AtUri.make(did, ids.PubLeafletPublication, nameOrRkey).toString(); 46 46 - } 47 47 - return `name.eq."${nameOrRkey}"",uri.eq."${standard}",uri.eq."${legacy}"`; 30 30 + export function publicationNameOrUriFilter(did: string, nameOrRkey: string): string { 31 31 + const standard = AtUri.make(did, ids.SiteStandardPublication, nameOrRkey).toString(); 32 32 + const legacy = AtUri.make(did, ids.PubLeafletPublication, nameOrRkey).toString(); 33 33 + return `name.eq.${nameOrRkey},uri.eq.${standard},uri.eq.${legacy}`; 48 34 }