diff --git a/packages/shared/src/api/channelContentConfig.ts b/packages/shared/src/api/channelContentConfig.ts
index d512f9aacf..2e1234ea14 100644
--- a/packages/shared/src/api/channelContentConfig.ts
+++ b/packages/shared/src/api/channelContentConfig.ts
@@ -25,6 +25,8 @@ export enum PostContentRendererId {
picto = 'tlon.r0.content.picto',
audio = 'tlon.r0.content.audio',
color = 'tlon.r0.content.color',
+ raw = 'tlon.r0.content.raw',
+ yell = 'tlon.r0.content.yell',
}
/**
diff --git a/packages/ui/src/components/ManageChannels/CreateChannelSheet.tsx b/packages/ui/src/components/ManageChannels/CreateChannelSheet.tsx
index c5cc268a4d..51237108dc 100644
--- a/packages/ui/src/components/ManageChannels/CreateChannelSheet.tsx
+++ b/packages/ui/src/components/ManageChannels/CreateChannelSheet.tsx
@@ -192,6 +192,10 @@ function labelForContentRenderer(r: PostContentRendererId): string {
return 'Audio';
case PostContentRendererId.color:
return 'Color';
+ case PostContentRendererId.raw:
+ return 'Raw';
+ case PostContentRendererId.yell:
+ return 'Yell';
}
}
function labelForCollectionLayout(l: CollectionRendererId): string {
@@ -233,6 +237,8 @@ const options = {
PostContentRendererId.picto,
PostContentRendererId.audio,
PostContentRendererId.color,
+ PostContentRendererId.raw,
+ PostContentRendererId.yell,
].map((id) => ({
title: labelForContentRenderer(id),
value: id,
diff --git a/packages/ui/src/components/YellPost.tsx b/packages/ui/src/components/YellPost.tsx
new file mode 100644
index 0000000000..479ae3bc09
--- /dev/null
+++ b/packages/ui/src/components/YellPost.tsx
@@ -0,0 +1,40 @@
+import { View } from 'tamagui';
+
+import { RenderItemType } from '../contexts/componentsKits';
+import { ChatAuthorRow } from './AuthorRow';
+import { createContentRenderer } from './PostContent';
+import { usePostContent } from './PostContent/contentUtils';
+import { RawText, Text } from './TextV2';
+
+export const YellPost: RenderItemType = (props) => {
+ const content = usePostContent(props.post);
+
+ return (
+
+ {props.showAuthor && (
+
+ )}
+
+
+ );
+};
+
+const YellContentRenderer = createContentRenderer({
+ inlineRenderers: {
+ text: (props) => {
+ return (
+
+ {props.inline.text.toUpperCase()}
+
+ );
+ },
+ },
+});
diff --git a/packages/ui/src/contexts/componentsKits.tsx b/packages/ui/src/contexts/componentsKits.tsx
index 7fbf2410c6..a698b8f39b 100644
--- a/packages/ui/src/contexts/componentsKits.tsx
+++ b/packages/ui/src/contexts/componentsKits.tsx
@@ -11,9 +11,12 @@ import { AudioPost } from '../components/AudioPost';
import { PictoMessage } from '../components/Channel/PictoMessage';
import { ChatMessage } from '../components/ChatMessage';
import { ColorPost } from '../components/ColorPost';
+import { useContactName } from '../components/ContactNameV2';
import { StandaloneDrawingInput } from '../components/DrawingInput';
import { GalleryPost } from '../components/GalleryPost';
import { NotebookPost } from '../components/NotebookPost';
+import { Text } from '../components/TextV2';
+import { YellPost } from '../components/YellPost';
import {
ChatInput,
ColorInput,
@@ -29,6 +32,7 @@ import {
SingleCardPostCollection,
} from '../components/postCollectionViews/CardsPostCollectionView';
import { ListPostCollection } from '../components/postCollectionViews/ListPostCollectionView';
+import { StrobePostCollectionView } from '../components/postCollectionViews/StrobePostCollectionView';
import { IPostCollectionView } from '../components/postCollectionViews/shared';
type RenderItemProps = {
@@ -108,6 +112,15 @@ const BUILTIN_CONTENT_RENDERERS: { [id: string]: RenderItemType } = {
[PostContentRendererId.picto]: PictoMessage,
[PostContentRendererId.audio]: AudioPost,
[PostContentRendererId.color]: ColorPost,
+ [PostContentRendererId.raw]: ({ post }) => {
+ const contactName = useContactName(post.author!.id);
+ return (
+
+ {contactName}: {JSON.stringify(post.content)}
+
+ );
+ },
+ [PostContentRendererId.yell]: YellPost,
};
const BUILTIN_DRAFT_INPUTS: { [id: string]: DraftInputRendererComponent } = {
[DraftInputId.chat]: ChatInput,
@@ -133,6 +146,7 @@ const BUILTIN_COLLECTION_RENDERERS: {
[CollectionRendererId.cards]: CardsPostCollection,
[CollectionRendererId.sign]: SingleCardPostCollection,
[CollectionRendererId.boardroom]: BoardroomPostCollectionView,
+ [CollectionRendererId.strobe]: StrobePostCollectionView,
};
export function ComponentsKitContextProvider({