+ {imageEmbed.images.map(
+ (image: { fullsize: string; alt?: string }, i: number) => (
+ 
+ ),
+ )}
+
+ );
+ case AppBskyEmbedExternal.isView(props.embed):
+ let externalEmbed = props.embed;
+ let isGif = externalEmbed.external.uri.includes(".gif");
+ if (isGif) {
+ return (
+
+ 
+
+ );
+ }
+ return (
+
+ {externalEmbed.external.thumb === undefined ? null : (
+ <>
+ + + )} +
+
+
+
+ );
+ case AppBskyEmbedVideo.isView(props.embed):
+ let videoEmbed = props.embed;
+ return (
+
+
+ {externalEmbed.external.title}
++ {externalEmbed.external.description} +
++
+ {externalEmbed.external.uri}
+
+
+ 
+
+
+ );
+ case AppBskyEmbedRecord.isView(props.embed):
+ let recordEmbed = props.embed;
+ let record = recordEmbed.record;
+
+ if (record === undefined) return;
+
+ // if the record is a feed post
+ if (AppBskyEmbedRecord.isViewRecord(record)) {
+ // we have to do this nonsense to get a the proper type for the record text
+ // we aped it from the bluesky front end (check the link at the top of this file)
+ let text: string | null = null;
+ if (AppBskyFeedPost.isRecord(record.value)) {
+ text = (record.value as AppBskyFeedPost.Record).text;
+ }
+ return (
+
+
+
+
+
+
+ );
+ }
+
+ // labeller, starterpack or feed
+ if (
+ AppBskyFeedDefs.isGeneratorView(record) ||
+ AppBskyLabelerDefs.isLabelerView(record) ||
+ AppBskyGraphDefs.isStarterPackViewBasic(record)
+ )
+ return
+ {text &&
+ {text}}
+ {record.embeds !== undefined
+ ? record.embeds.map((embed) => This is a record with Media
;
+
+ default:
+ return This media is not supported...
{" "}
+ {props.postUrl === undefined ? null : (
+
+ See the full post on
+ Bluesky!
+
+ )}
+
+ );
+};
+
+export const PostNotAvailable = () => {
+ return (
+
+ This Bluesky post is not available...
+
+ );
+};
diff --git a/components/Blocks/BlueskyPostBlock/BlueskyEmpty.tsx b/components/Blocks/BlueskyPostBlock/BlueskyEmpty.tsx
new file mode 100644
index 00000000..1ee84f95
--- /dev/null
+++ b/components/Blocks/BlueskyPostBlock/BlueskyEmpty.tsx
@@ -0,0 +1,125 @@
+import { useEntitySetContext } from "components/EntitySetProvider";
+import { generateKeyBetween } from "fractional-indexing";
+import { useState } from "react";
+import { useEntity, useReplicache } from "src/replicache";
+import { useUIState } from "src/useUIState";
+import { BlockProps } from "../Block";
+import { v7 } from "uuid";
+import { useSmoker } from "components/Toast";
+import { BlockBlueskySmall, CheckTiny } from "components/Icons";
+import { Separator } from "components/Layout";
+import { Input } from "components/Input";
+import { isUrl } from "src/utils/isURL";
+import { AppBskyFeedDefs, AtpAgent } from "@atproto/api";
+import { addBlueskyPostBlock } from "src/utils/addLinkBlock";
+
+export const BlueskyPostEmpty = (props: BlockProps) => {
+ let { rep } = useReplicache();
+ let isSelected = useUIState((s) =>
+ s.selectedBlocks.find((b) => b.value === props.entityID),
+ );
+ let isLocked = useEntity(props.entityID, "block/is-locked")?.data.value;
+
+ let entity_set = useEntitySetContext();
+ let [urlValue, setUrlValue] = useState("");
+
+ let submit = async () => {
+ if (!rep) return;
+ let entity = props.entityID;
+
+ let blueskyPostBlock = await addBlueskyPostBlock(urlValue, entity, rep);
+ if (blueskyPostBlock === false) {
+ let rect = document
+ .getElementById("bluesky-post-block-submit")
+ ?.getBoundingClientRect();
+ smoker({
+ error: true,
+ text: "post not found!",
+ position: {
+ x: (rect && rect.left + 12) || 0,
+ y: (rect && rect.top) || 0,
+ },
+ });
+ }
+ };
+ let smoker = useSmoker();
+ function errorSmokers(x: number, y: number) {
+ if (!urlValue || urlValue === "") {
+ smoker({
+ error: true,
+ text: "no url!",
+ position: {
+ x: x,
+ y: y,
+ },
+ });
+ return;
+ }
+ if (!isUrl(urlValue) || !urlValue.includes("bsky.app")) {
+ smoker({
+ error: true,
+ text: "invalid bluesky url!",
+ position: {
+ x: x,
+ y: y,
+ },
+ });
+ return;
+ }
+ }
+
+ return (
+
+ );
+};
diff --git a/components/Blocks/BlueskyPostBlock/BlueskyRichText.tsx b/components/Blocks/BlueskyPostBlock/BlueskyRichText.tsx
new file mode 100644
index 00000000..fb6e648e
--- /dev/null
+++ b/components/Blocks/BlueskyPostBlock/BlueskyRichText.tsx
@@ -0,0 +1,71 @@
+import { RichText, AppBskyFeedPost, AppBskyRichtextFacet } from "@atproto/api";
+
+// this function is ripped straight from the bluesky-social repo
+// https://github.com/bluesky-social/social-app/blob/main/bskyembed/src/components/post.tsx#L119
+export function BlueskyRichText({
+ record,
+}: {
+ record: AppBskyFeedPost.Record | null;
+}) {
+ if (!record) return null;
+
+ const rt = new RichText({
+ text: record.text,
+ facets: record.facets,
+ });
+
+ const richText = [];
+
+ let counter = 0;
+ for (const segment of rt.segments()) {
+ if (
+ segment.link &&
+ AppBskyRichtextFacet.validateLink(segment.link).success
+ ) {
+ richText.push(
+
+ {segment.text}
+ ,
+ );
+ } else if (
+ segment.mention &&
+ AppBskyRichtextFacet.validateMention(segment.mention).success
+ ) {
+ richText.push(
+
+ {segment.text}
+ ,
+ );
+ } else if (
+ segment.tag &&
+ AppBskyRichtextFacet.validateTag(segment.tag).success
+ ) {
+ richText.push(
+
+ {segment.text}
+ ,
+ );
+ } else {
+ richText.push(segment.text);
+ }
+
+ counter++;
+ }
+
+ return {richText}
; +} diff --git a/components/Blocks/BlueskyPostBlock/index.tsx b/components/Blocks/BlueskyPostBlock/index.tsx new file mode 100644 index 00000000..83f504cb --- /dev/null +++ b/components/Blocks/BlueskyPostBlock/index.tsx @@ -0,0 +1,160 @@ +import { useEntitySetContext } from "components/EntitySetProvider"; +import { useEffect, useState } from "react"; +import { useEntity } from "src/replicache"; +import { useUIState } from "src/useUIState"; +import { BlockProps } from "../Block"; +import { elementId } from "src/utils/elementId"; +import { focusBlock } from "src/utils/focusBlock"; +import { AppBskyFeedDefs, AppBskyFeedPost, RichText } from "@atproto/api"; +import { BlueskyEmbed, PostNotAvailable } from "./BlueskyEmbed"; +import { BlueskyPostEmpty } from "./BlueskyEmpty"; +import { BlueskyTiny, CommentTiny } from "components/Icons"; +import { BlueskyRichText } from "./BlueskyRichText"; +import { Separator } from "components/Layout"; +import { PostView } from "@atproto/api/dist/client/types/app/bsky/feed/defs"; + +export const BlueskyPostBlock = (props: BlockProps & { preview?: boolean }) => { + let { permissions } = useEntitySetContext(); + let isSelected = useUIState((s) => + s.selectedBlocks.find((b) => b.value === props.entityID), + ); + let post = useEntity(props.entityID, "block/bluesky-post")?.data.value; + + useEffect(() => { + if (props.preview) return; + let input = document.getElementById(elementId.block(props.entityID).input); + if (isSelected) { + input?.focus(); + } else input?.blur(); + }, [isSelected, props.entityID, props.preview]); + + switch (true) { + case !post: + if (!permissions.write) return null; + return ( + + ); + + case AppBskyFeedDefs.isBlockedPost(post) || + AppBskyFeedDefs.isBlockedAuthor(post) || + AppBskyFeedDefs.isNotFoundPost(post): + return ( +
+
+ );
+
+ case AppBskyFeedDefs.isThreadViewPost(post):
+ let record = post.post
+ .record as AppBskyFeedDefs.FeedViewPost["post"]["record"];
+ let facets = record.facets;
+
+ // silliness to get the text and timestamp from the record with proper types
+ let text: string | null = null;
+ let timestamp: string | undefined = undefined;
+ if (AppBskyFeedPost.isRecord(record)) {
+ text = (record as AppBskyFeedPost.Record).text;
+ timestamp = (record as AppBskyFeedPost.Record).createdAt;
+ }
+
+ //getting the url to the post
+ let postId = post.post.uri.split("/")[4];
+ let url = `https://bsky.app/profile/${post.post.author.handle}/post/${postId}`;
+
+ let datetime = new Date(timestamp ? timestamp : "");
+ let datetimeFormatted = datetime.toLocaleString("en-US", {
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ hour: "numeric",
+ minute: "numeric",
+ hour12: true,
+ });
+
+ return (
+
+ {post.post.author && record && (
+ <>
+
+ );
+ }
+};
diff --git a/components/Blocks/TextBlock/index.tsx b/components/Blocks/TextBlock/index.tsx
index f1cce237..2e18bc11 100644
--- a/components/Blocks/TextBlock/index.tsx
+++ b/components/Blocks/TextBlock/index.tsx
@@ -30,7 +30,7 @@ import { schema } from "./schema";
import { useUIState } from "src/useUIState";
import { MarkType, DOMParser as ProsemirrorDOMParser } from "prosemirror-model";
import { useAppEventListener } from "src/eventBus";
-import { addLinkBlock } from "src/utils/addLinkBlock";
+import { addBlueskyPostBlock, addLinkBlock } from "src/utils/addLinkBlock";
import { BlockCommandBar } from "components/Blocks/BlockCommandBar";
import { setEditorState, useEditorStates } from "src/state/useEditorState";
import { isIOS } from "@react-aria/utils";
@@ -56,6 +56,7 @@ import { focusPage } from "components/Pages";
import { blockCommands } from "../BlockCommands";
import { CommandPage } from "twilio/lib/rest/wireless/v1/command";
import { betterIsUrl, isUrl } from "src/utils/isURL";
+import { useSmoker } from "components/Toast";
export function TextBlock(
props: BlockProps & { className?: string; preview?: boolean },
@@ -428,6 +429,7 @@ export function BaseTextBlock(props: BlockProps & { className?: string }) {
const BlockifyLink = (props: { entityID: string }) => {
let rep = useReplicache();
+ let smoker = useSmoker();
let isLocked = useEntity(props.entityID, "block/is-locked");
let focused = useUIState((s) => s.focusedEntity?.entityID === props.entityID);
let editorState = useEditorStates(
@@ -448,16 +450,30 @@ const BlockifyLink = (props: { entityID: string }) => {
) {
return (
+ 
+
+
+
+
+
+ {post.post.author?.displayName}
+
+
+ @{post.post.author?.handle}
+
+
+
+
+ )}
+
+
+ {post.post.embed && (
+
+ {BlueskyRichText({
+ record: record as AppBskyFeedPost.Record | null,
+ })}
+
+
+
+ {datetimeFormatted}
+
+ {post.post.replyCount && post.post.replyCount > 0 && (
+ <>
+
+ {post.post.replyCount}
+
+