Merge pull request #3546 from tloncorp/po/tlon-1820-native-notebook-e…

…ditor native: notebook editor
tloncorp · Jun 3, 2024 · a2be37d · a2be37d
2 parents a0f65c6 + 2030208
commit a2be37d
Show file tree

Hide file tree

Showing 67 changed files with 2,135 additions and 623 deletions.
diff --git a/apps/tlon-mobile/cosmos.imports.ts b/apps/tlon-mobile/cosmos.imports.ts
@@ -3,22 +3,23 @@
 import { RendererConfig, UserModuleWrappers } from 'react-cosmos-core';
 
 import * as fixture0 from './src/App.fixture';
-import * as fixture26 from './src/fixtures/ActionSheet.fixture';
-import * as fixture25 from './src/fixtures/AudioEmbed.fixture';
-import * as fixture24 from './src/fixtures/Button.fixture';
-import * as fixture23 from './src/fixtures/Channel.fixture';
-import * as fixture22 from './src/fixtures/ChannelDivider.fixture';
-import * as fixture21 from './src/fixtures/ChannelHeader.fixture';
-import * as fixture20 from './src/fixtures/ChannelSwitcherSheet.fixture';
-import * as fixture19 from './src/fixtures/ChatMessage.fixture';
-import * as fixture18 from './src/fixtures/ChatReference.fixture';
-import * as fixture17 from './src/fixtures/ContactList.fixture';
-import * as fixture16 from './src/fixtures/GalleryPost.fixture';
-import * as fixture15 from './src/fixtures/GroupList.fixture';
-import * as fixture14 from './src/fixtures/GroupListItem.fixture';
-import * as fixture13 from './src/fixtures/HeaderButton.fixture';
-import * as fixture12 from './src/fixtures/ImageViewer.fixture';
-import * as fixture11 from './src/fixtures/Input.fixture';
+import * as fixture27 from './src/fixtures/ActionSheet.fixture';
+import * as fixture26 from './src/fixtures/AudioEmbed.fixture';
+import * as fixture25 from './src/fixtures/Button.fixture';
+import * as fixture24 from './src/fixtures/Channel.fixture';
+import * as fixture23 from './src/fixtures/ChannelDivider.fixture';
+import * as fixture22 from './src/fixtures/ChannelHeader.fixture';
+import * as fixture21 from './src/fixtures/ChannelSwitcherSheet.fixture';
+import * as fixture20 from './src/fixtures/ChatMessage.fixture';
+import * as fixture19 from './src/fixtures/ChatReference.fixture';
+import * as fixture18 from './src/fixtures/ContactList.fixture';
+import * as fixture17 from './src/fixtures/GalleryPost.fixture';
+import * as fixture16 from './src/fixtures/GroupList.fixture';
+import * as fixture15 from './src/fixtures/GroupListItem.fixture';
+import * as fixture14 from './src/fixtures/HeaderButton.fixture';
+import * as fixture13 from './src/fixtures/ImageViewer.fixture';
+import * as fixture12 from './src/fixtures/Input.fixture';
+import * as fixture11 from './src/fixtures/InputToolbar.fixture';
 import * as fixture10 from './src/fixtures/MessageActions.fixture';
 import * as fixture9 from './src/fixtures/MessageInput.fixture';
 import * as fixture8 from './src/fixtures/OutsideEmbed.fixture';
@@ -32,7 +33,7 @@ import * as fixture1 from './src/fixtures/VideoEmbed.fixture';
 import * as decorator0 from './src/fixtures/cosmos.decorator';
 
 export const rendererConfig: RendererConfig = {
-  playgroundUrl: 'http://localhost:5001',
+  playgroundUrl: 'http://localhost:5000',
   rendererUrl: null,
 };
 
@@ -48,22 +49,23 @@ const fixtures = {
   'src/fixtures/OutsideEmbed.fixture.tsx': { module: fixture8 },
   'src/fixtures/MessageInput.fixture.tsx': { module: fixture9 },
   'src/fixtures/MessageActions.fixture.tsx': { module: fixture10 },
-  'src/fixtures/Input.fixture.tsx': { module: fixture11 },
-  'src/fixtures/ImageViewer.fixture.tsx': { module: fixture12 },
-  'src/fixtures/HeaderButton.fixture.tsx': { module: fixture13 },
-  'src/fixtures/GroupListItem.fixture.tsx': { module: fixture14 },
-  'src/fixtures/GroupList.fixture.tsx': { module: fixture15 },
-  'src/fixtures/GalleryPost.fixture.tsx': { module: fixture16 },
-  'src/fixtures/ContactList.fixture.tsx': { module: fixture17 },
-  'src/fixtures/ChatReference.fixture.tsx': { module: fixture18 },
-  'src/fixtures/ChatMessage.fixture.tsx': { module: fixture19 },
-  'src/fixtures/ChannelSwitcherSheet.fixture.tsx': { module: fixture20 },
-  'src/fixtures/ChannelHeader.fixture.tsx': { module: fixture21 },
-  'src/fixtures/ChannelDivider.fixture.tsx': { module: fixture22 },
-  'src/fixtures/Channel.fixture.tsx': { module: fixture23 },
-  'src/fixtures/Button.fixture.tsx': { module: fixture24 },
-  'src/fixtures/AudioEmbed.fixture.tsx': { module: fixture25 },
-  'src/fixtures/ActionSheet.fixture.tsx': { module: fixture26 },
+  'src/fixtures/InputToolbar.fixture.tsx': { module: fixture11 },
+  'src/fixtures/Input.fixture.tsx': { module: fixture12 },
+  'src/fixtures/ImageViewer.fixture.tsx': { module: fixture13 },
+  'src/fixtures/HeaderButton.fixture.tsx': { module: fixture14 },
+  'src/fixtures/GroupListItem.fixture.tsx': { module: fixture15 },
+  'src/fixtures/GroupList.fixture.tsx': { module: fixture16 },
+  'src/fixtures/GalleryPost.fixture.tsx': { module: fixture17 },
+  'src/fixtures/ContactList.fixture.tsx': { module: fixture18 },
+  'src/fixtures/ChatReference.fixture.tsx': { module: fixture19 },
+  'src/fixtures/ChatMessage.fixture.tsx': { module: fixture20 },
+  'src/fixtures/ChannelSwitcherSheet.fixture.tsx': { module: fixture21 },
+  'src/fixtures/ChannelHeader.fixture.tsx': { module: fixture22 },
+  'src/fixtures/ChannelDivider.fixture.tsx': { module: fixture23 },
+  'src/fixtures/Channel.fixture.tsx': { module: fixture24 },
+  'src/fixtures/Button.fixture.tsx': { module: fixture25 },
+  'src/fixtures/AudioEmbed.fixture.tsx': { module: fixture26 },
+  'src/fixtures/ActionSheet.fixture.tsx': { module: fixture27 },
 };
 
 const decorators = {

diff --git a/apps/tlon-mobile/ios/Landscape.xcodeproj/project.pbxproj b/apps/tlon-mobile/ios/Landscape.xcodeproj/project.pbxproj
@@ -488,7 +488,7 @@
 			mainGroup = 83CBB9F61A601CBA00E9B192;
 			packageReferences = (
 				70A62C5F2A5A6B1A00EBED16 /* XCRemoteSwiftPackageReference "SimpleKeychain" */,
-				70D386462A6098F800AFB46E /* XCRemoteSwiftPackageReference "Alamofire.git" */,
+				70D386462A6098F800AFB46E /* XCRemoteSwiftPackageReference "Alamofire" */,
 				70D3866D2A60A3B300AFB46E /* XCRemoteSwiftPackageReference "UrsusSigil" */,
 			);
 			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
@@ -1482,7 +1482,7 @@
 				minimumVersion = 1.0.0;
 			};
 		};
-		70D386462A6098F800AFB46E /* XCRemoteSwiftPackageReference "Alamofire.git" */ = {
+		70D386462A6098F800AFB46E /* XCRemoteSwiftPackageReference "Alamofire" */ = {
 			isa = XCRemoteSwiftPackageReference;
 			repositoryURL = "https://github.com/Alamofire/Alamofire.git";
 			requirement = {
@@ -1506,7 +1506,7 @@
 				minimumVersion = 1.0.0;
 			};
 		};
-		70DBBFE32B7C60B50021EA96 /* XCRemoteSwiftPackageReference "Alamofire.git" */ = {
+		70DBBFE32B7C60B50021EA96 /* XCRemoteSwiftPackageReference "Alamofire" */ = {
 			isa = XCRemoteSwiftPackageReference;
 			repositoryURL = "https://github.com/Alamofire/Alamofire.git";
 			requirement = {
@@ -1532,7 +1532,7 @@
 		};
 		70D386472A6098F800AFB46E /* Alamofire */ = {
 			isa = XCSwiftPackageProductDependency;
-			package = 70D386462A6098F800AFB46E /* XCRemoteSwiftPackageReference "Alamofire.git" */;
+			package = 70D386462A6098F800AFB46E /* XCRemoteSwiftPackageReference "Alamofire" */;
 			productName = Alamofire;
 		};
 		70D3866E2A60A3B300AFB46E /* UrsusSigil */ = {
@@ -1547,7 +1547,7 @@
 		};
 		70DBBFE22B7C60B50021EA96 /* Alamofire */ = {
 			isa = XCSwiftPackageProductDependency;
-			package = 70DBBFE32B7C60B50021EA96 /* XCRemoteSwiftPackageReference "Alamofire.git" */;
+			package = 70DBBFE32B7C60B50021EA96 /* XCRemoteSwiftPackageReference "Alamofire" */;
 			productName = Alamofire;
 		};
 		70DBBFE42B7C60B50021EA96 /* UrsusSigil */ = {

diff --git a/apps/tlon-mobile/ios/Podfile.lock b/apps/tlon-mobile/ios/Podfile.lock
@@ -1816,7 +1816,7 @@ SPEC CHECKSUMS:
   sqlite3: f163dbbb7aa3339ad8fc622782c2d9d7b72f7e9c
   tentap: 61bd1f665af146d1a1ac926f70cff8ee95d0f806
   UMAppLoader: 5df85360d65cabaef544be5424ac64672e648482
-  Yoga: 64cd2a583ead952b0315d5135bf39e053ae9be70
+  Yoga: 1b901a6d6eeba4e8a2e8f308f708691cdb5db312
 
 PODFILE CHECKSUM: 2ba4689327c6a97c2a40ef1fe4918cbab90120c7
 

diff --git a/apps/tlon-mobile/src/fixtures/InputToolbar.fixture.tsx b/apps/tlon-mobile/src/fixtures/InputToolbar.fixture.tsx
@@ -0,0 +1,19 @@
+import { useEditorBridge } from '@10play/tentap-editor';
+import { InputToolbar } from '@tloncorp/ui';
+import { TlonEditorBridge } from '@tloncorp/ui/src/components/MessageInput/toolbarActions';
+
+import { FixtureWrapper } from './FixtureWrapper';
+
+const InputToolbarFixture = () => {
+  const editor = useEditorBridge() as TlonEditorBridge;
+
+  return (
+    <FixtureWrapper fillWidth fillHeight>
+      <InputToolbar hidden={false} editor={editor} />
+    </FixtureWrapper>
+  );
+};
+
+export default {
+  default: InputToolbarFixture,
+};
diff --git a/apps/tlon-mobile/src/fixtures/MessageInput.fixture.tsx b/apps/tlon-mobile/src/fixtures/MessageInput.fixture.tsx
@@ -1,10 +1,11 @@
-import { MessageInput, View } from '@tloncorp/ui';
+import { BigInput, MessageInput, View } from '@tloncorp/ui';
 import { useState } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { FixtureWrapper } from './FixtureWrapper';
 import { group } from './fakeData';
 
-const MessageInputFixture = () => {
+const ChatMessageInputFixture = () => {
   const [inputShouldBlur, setInputShouldBlur] = useState(false);
 
   return (
@@ -32,4 +33,31 @@ const MessageInputFixture = () => {
   );
 };
 
-export default MessageInputFixture;
+const NotebookInputFixture = () => {
+  const [inputShouldBlur, setInputShouldBlur] = useState(false);
+  const { top } = useSafeAreaInsets();
+
+  return (
+    <FixtureWrapper fillWidth>
+      <View paddingTop={top} backgroundColor="$background">
+        <BigInput
+          channelType="notebook"
+          shouldBlur={inputShouldBlur}
+          setShouldBlur={setInputShouldBlur}
+          send={() => {}}
+          channelId="channel-id"
+          groupMembers={group.members ?? []}
+          getDraft={async () => ({})}
+          storeDraft={() => {}}
+          clearDraft={() => {}}
+          placeholder="Write a note..."
+        />
+      </View>
+    </FixtureWrapper>
+  );
+};
+
+export default {
+  chat: ChatMessageInputFixture,
+  notebook: NotebookInputFixture,
+};
diff --git a/apps/tlon-mobile/src/screens/ChannelScreen.tsx b/apps/tlon-mobile/src/screens/ChannelScreen.tsx
@@ -86,15 +86,15 @@ export default function ChannelScreen(props: ChannelScreenProps) {
   });
 
   const sendPost = useCallback(
-    async (content: Story, _channelId: string) => {
+    async (content: Story, _channelId: string, metadata?: db.PostMetadata) => {
       if (!channel) {
         throw new Error('Tried to send message before channel loaded');
       }
       store.sendPost({
         channel: channel,
         authorId: currentUserId,
         content,
-        attachment: uploadInfo.uploadedImage,
+        metadata,
       });
       uploadInfo.resetImageAttachment();
     },

diff --git a/apps/tlon-web/src/chat/ChatContent/ChatContent.tsx b/apps/tlon-web/src/chat/ChatContent/ChatContent.tsx
@@ -215,7 +215,7 @@ export function BlockContent({
   );
 }
 
-function ChatContent({
+function ContentRenderer({
   story,
   isScrolling = false,
   className = '',
@@ -346,4 +346,4 @@ function ChatContent({
   );
 }
 
-export default React.memo(ChatContent);
+export default React.memo(ContentRenderer);
diff --git a/apps/tlon-web/src/chat/ChatMessage/ChatMessage.tsx b/apps/tlon-web/src/chat/ChatMessage/ChatMessage.tsx
@@ -24,7 +24,7 @@ import { useInView } from 'react-intersection-observer';
 import { NavLink, useParams, useSearchParams } from 'react-router-dom';
 import { useEventListener } from 'usehooks-ts';
 
-import ChatContent from '@/chat/ChatContent/ChatContent';
+import ContentRenderer from '@/chat/ChatContent/ChatContent';
 import Author from '@/chat/ChatMessage/Author';
 import ChatMessageOptions from '@/chat/ChatMessage/ChatMessageOptions';
 import DateDivider from '@/chat/ChatMessage/DateDivider';
@@ -471,13 +471,13 @@ const ChatMessage = React.memo<
                   )}
                 >
                   {isHidden ? (
-                    <ChatContent
+                    <ContentRenderer
                       story={hiddenMessage}
                       isScrolling={isScrolling}
                       writId={seal.id}
                     />
                   ) : essay.content ? (
-                    <ChatContent
+                    <ContentRenderer
                       story={essay.content}
                       isScrolling={isScrolling}
                       writId={seal.id}

diff --git a/apps/tlon-web/src/chat/ChatNotice.tsx b/apps/tlon-web/src/chat/ChatNotice.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import AddPersonIcon from '@/components/icons/AddPersonIcon';
 
-import ChatContent from './ChatContent/ChatContent';
+import ContentRenderer from './ChatContent/ChatContent';
 import DateDivider from './ChatMessage/DateDivider';
 
 interface ChatNoticeProps {
@@ -36,7 +36,7 @@ export default function ChatNotice({ writ, newDay }: ChatNoticeProps) {
           <AddPersonIcon className="h-6 w-6 text-gray-600" />
         </div>
         <p className="font-semibold text-gray-400">
-          <ChatContent story={writ.essay.content} />
+          <ContentRenderer story={writ.essay.content} />
         </p>
       </div>
     </div>

diff --git a/apps/tlon-web/src/chat/ChatSearch/ChatSearchResult.tsx b/apps/tlon-web/src/chat/ChatSearch/ChatSearchResult.tsx
@@ -8,7 +8,7 @@ import { Link } from 'react-router-dom';
 
 import ReplyReactions from '@/replies/ReplyReactions/ReplyReactions';
 
-import ChatContent from '../ChatContent/ChatContent';
+import ContentRenderer from '../ChatContent/ChatContent';
 import Author from '../ChatMessage/Author';
 import ChatReactions from '../ChatReactions/ChatReactions';
 
@@ -86,7 +86,7 @@ function ChatSearchResult({
     >
       <Author ship={author} date={unix} />
       <div className="group-one wrap-anywhere relative z-0 flex w-full flex-col space-y-2 py-1 pl-9">
-        <ChatContent story={content} isScrolling={isScrolling} />
+        <ContentRenderer story={content} isScrolling={isScrolling} />
         {reacts &&
           Object.keys(reacts).length > 0 &&
           ('parent-id' in writ.seal ? (

diff --git a/apps/tlon-web/src/components/References/WritBaseReference.tsx b/apps/tlon-web/src/components/References/WritBaseReference.tsx
@@ -4,7 +4,7 @@ import cn from 'classnames';
 import React, { useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import ChatContent from '@/chat/ChatContent/ChatContent';
+import ContentRenderer from '@/chat/ChatContent/ChatContent';
 import useGroupJoin from '@/groups/useGroupJoin';
 import HeapLoadingBlock from '@/heap/HeapLoadingBlock';
 import { useChannelFlag } from '@/logic/channel';
@@ -136,7 +136,7 @@ function WritBaseReference({
           content.filter((c) => 'block' in c).length > 0 ? (
             <span>Nested content references</span>
           ) : (
-            <ChatContent
+            <ContentRenderer
               className="line-clamp-1"
               story={content}
               isScrolling={false}
@@ -159,7 +159,7 @@ function WritBaseReference({
     return (
       <div className="cursor-pointer rounded-lg border-2 border-gray-50 text-base">
         <ReferenceInHeap type="text" contextApp={contextApp}>
-          <ChatContent
+          <ContentRenderer
             className="line-clamp-1 p-2"
             story={content}
             isScrolling={false}
@@ -188,7 +188,7 @@ function WritBaseReference({
       })}
     >
       <div className={'cursor-pointer p-2 group-hover:bg-gray-50'}>
-        <ChatContent
+        <ContentRenderer
           className="p-2"
           story={content}
           isScrolling={false}

diff --git a/apps/tlon-web/src/replies/ReplyMessage.tsx b/apps/tlon-web/src/replies/ReplyMessage.tsx
@@ -23,7 +23,7 @@ import { useInView } from 'react-intersection-observer';
 import { useSearchParams } from 'react-router-dom';
 import { useEventListener } from 'usehooks-ts';
 
-import ChatContent from '@/chat/ChatContent/ChatContent';
+import ContentRenderer from '@/chat/ChatContent/ChatContent';
 import Author from '@/chat/ChatMessage/Author';
 import DateDivider from '@/chat/ChatMessage/DateDivider';
 import ReactionDetails from '@/chat/ChatReactions/ReactionDetails';
@@ -402,13 +402,13 @@ const ReplyMessage = React.memo<
                   )}
                 >
                   {isHidden ? (
-                    <ChatContent
+                    <ContentRenderer
                       story={hiddenMessage}
                       isScrolling={isScrolling}
                       writId={seal.id}
                     />
                   ) : memo.content ? (
-                    <ChatContent
+                    <ContentRenderer
                       story={memo.content}
                       isScrolling={isScrolling}
                       writId={seal.id}