added small text attribute and button to leaflet

+16 -8

actions/publishToPublication.ts

··· 2 2 3 3 import * as Y from "yjs"; 4 4 import * as base64 from "base64-js"; 5 - import { 6 - restoreOAuthSession, 7 - OAuthSessionError, 8 - } from "src/atproto-oauth"; 5 + import { restoreOAuthSession, OAuthSessionError } from "src/atproto-oauth"; 9 6 import { getIdentityData } from "actions/getIdentityData"; 10 7 import { 11 8 AtpBaseClient, ··· 50 47 ColorToRGBA, 51 48 } from "components/ThemeManager/colorToLexicons"; 52 49 import { parseColor } from "@react-stately/color"; 53 - import { Notification, pingIdentityToUpdateNotification } from "src/notifications"; 50 + import { 51 + Notification, 52 + pingIdentityToUpdateNotification, 53 + } from "src/notifications"; 54 54 import { v7 } from "uuid"; 55 55 56 56 type PublishResult = ··· 253 253 254 254 // Create notifications for mentions (only on first publish) 255 255 if (!existingDocUri) { 256 - await createMentionNotifications(result.uri, record, credentialSession.did!); 256 + await createMentionNotifications( 257 + result.uri, 258 + record, 259 + credentialSession.did!, 260 + ); 257 261 } 258 262 259 263 return { success: true, rkey, record: JSON.parse(JSON.stringify(record)) }; ··· 865 869 .single(); 866 870 867 871 if (publication && publication.identity_did !== authorDid) { 868 - mentionedPublications.set(publication.identity_did, feature.atURI); 872 + mentionedPublications.set( 873 + publication.identity_did, 874 + feature.atURI, 875 + ); 869 876 } 870 877 } else if (uri.collection === "pub.leaflet.document") { 871 878 // Get the document owner's DID ··· 876 883 .single(); 877 884 878 885 if (document) { 879 - const docRecord = document.data as PubLeafletDocument.Record; 886 + const docRecord = 887 + document.data as PubLeafletDocument.Record; 880 888 if (docRecord.author !== authorDid) { 881 889 mentionedDocuments.set(docRecord.author, feature.atURI); 882 890 }

+1 -1

components/Blocks/Block.tsx

··· 10 10 import { useHandleDrop } from "./useHandleDrop"; 11 11 import { useEntitySetContext } from "components/EntitySetProvider"; 12 12 13 - import { TextBlock } from "components/Blocks/TextBlock"; 13 + import { TextBlock } from "./TextBlock/index"; 14 14 import { ImageBlock } from "./ImageBlock"; 15 15 import { PageLinkBlock } from "./PageLinkBlock"; 16 16 import { ExternalLinkBlock } from "./ExternalLinkBlock";

+11 -4

components/Blocks/TextBlock/index.tsx

··· 120 120 }) { 121 121 let initialFact = useEntity(props.entityID, "block/text"); 122 122 let headingLevel = useEntity(props.entityID, "block/heading-level"); 123 + let textSize = useEntity(props.entityID, "block/text-size"); 123 124 let alignment = 124 125 useEntity(props.entityID, "block/text-alignment")?.data.value || "left"; 125 126 let alignmentClass = { ··· 128 129 center: "text-center", 129 130 justify: "text-justify", 130 131 }[alignment]; 132 + let textStyle = textSize?.data.value === "small" ? "text-sm" : ""; 131 133 let { permissions } = useEntitySetContext(); 132 134 133 135 let content = <br />; ··· 159 161 className={` 160 162 ${alignmentClass} 161 163 ${props.type === "blockquote" ? (props.previousBlock?.type === "blockquote" ? `blockquote pt-3 ` : "blockquote") : ""} 162 - ${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : ""} 164 + ${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : textStyle} 163 165 w-full whitespace-pre-wrap outline-hidden ${props.className} `} 164 166 > 165 167 {content} ··· 169 171 170 172 export function BaseTextBlock(props: BlockProps & { className?: string }) { 171 173 let headingLevel = useEntity(props.entityID, "block/heading-level"); 174 + let textSize = useEntity(props.entityID, "block/text-size"); 172 175 let alignment = 173 176 useEntity(props.entityID, "block/text-alignment")?.data.value || "left"; 174 177 ··· 184 187 center: "text-center", 185 188 justify: "text-justify", 186 189 }[alignment]; 190 + let textStyle = 191 + textSize?.data.value === "small" 192 + ? "text-sm text-secondary" 193 + : "text-base text-primary"; 187 194 188 195 let editorState = useEditorStates( 189 196 (s) => s.editorStates[props.entityID], ··· 258 265 grow resize-none align-top whitespace-pre-wrap bg-transparent 259 266 outline-hidden 260 267 261 - ${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : ""} 268 + ${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : textStyle} 262 269 ${props.className}`} 263 270 ref={mountRef} 264 271 /> ··· 277 284 // if this is the only block on the page and is empty or is a canvas, show placeholder 278 285 <div 279 286 className={`${props.className} ${alignmentClass} w-full pointer-events-none absolute top-0 left-0 italic text-tertiary flex flex-col 280 - ${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : ""} 287 + ${props.type === "heading" ? HeadingStyle[headingLevel?.data.value || 1] : textStyle} 281 288 `} 282 289 > 283 290 {props.type === "text" ··· 496 503 497 504 // Find the relative positioned parent container 498 505 const editorEl = view.dom; 499 - const container = editorEl.closest('.relative') as HTMLElement | null; 506 + const container = editorEl.closest(".relative") as HTMLElement | null; 500 507 501 508 if (container) { 502 509 const containerRect = container.getBoundingClientRect();

+124 -95

components/Toolbar/TextBlockTypeToolbar.tsx

·········

+8

src/replicache/attributes.ts

··· 71 71 type: "number", 72 72 cardinality: "one", 73 73 }, 74 + "block/text-size": { 75 + type: "text-size-union", 76 + cardinality: "one", 77 + }, 74 78 "block/image": { 75 79 type: "image", 76 80 cardinality: "one", ··· 317 321 "text-alignment-type-union": { 318 322 type: "text-alignment-type-union"; 319 323 value: "right" | "left" | "center" | "justify"; 324 + }; 325 + "text-size-union": { 326 + type: "text-size-union"; 327 + value: "default" | "small"; 320 328 }; 321 329 "page-type-union": { type: "page-type-union"; value: "doc" | "canvas" }; 322 330 "block-type-union": {

+2

src/utils/getBlocksAsHTML.tsx

··· 171 171 }, 172 172 text: async (b, tx, a) => { 173 173 let [value] = await scanIndex(tx).eav(b.value, "block/text"); 174 + let [textSize] = await scanIndex(tx).eav(b.value, "block/text-size"); 174 175 return ( 175 176 <RenderYJSFragment 176 177 value={value?.data.value} 177 178 attrs={{ 178 179 "data-alignment": a, 180 + "data-text-size": textSize?.data.value, 179 181 }} 180 182 wrapper="p" 181 183 />

Configure Feed

Configure Feed