Re-enable lineNumbers in chatbot-note.tsx (commontoolsinc#1798)

Also add mentions to `note.tsx`

Author: bfollington

packages/patterns/chatbot-note.tsx

@@ -53,25 +53,6 @@ const handleCharmLinkClick = handler<
   return navigateTo(detail.charm);
 });
 
-export const Note = recipe<NoteInput>(
-  "Note",
-  ({ content, allCharms }) => {
-    return {
-      [NAME]: "Note",
-      [UI]: (
-        <ct-code-editor
-          $value={content}
-          $mentionable={allCharms}
-          onbacklink-click={handleCharmLinkClick({})}
-          language="text/markdown"
-          style="min-height: 400px;"
-        />
-      ),
-      content,
-    };
-  },
-);
-
 const handleCharmLinkClicked = handler(
   (_: any, { charm }: { charm: Cell<MentionableCharm> }) => {
     return navigateTo(charm);
@@ -222,6 +203,7 @@ export default recipe<LLMTestInput, LLMTestResult>(
                 language="text/markdown"
                 wordWrap
                 tabIndent
+                lineNumbers
               />
               <details>
                 <summary>Mentioned Charms</summary>

packages/patterns/default-app.tsx

@@ -116,11 +116,12 @@ const spawnChatbotNote = handler<
 
 const spawnNote = handler<
   Record<string, never>,
-  Record<string, never>
+  { allCharms: Cell<MentionableCharm[]> }
 >((_, state) => {
   return navigateTo(Note({
     title: "New Note",
     content: "",
+    allCharms: state.allCharms,
   }));
 });
 
@@ -161,7 +162,11 @@ export default recipe<CharmsListInput, CharmsListOutput>(
                 🤖 Chatbot Note
               </ct-button>
               <ct-button
-                onClick={spawnNote({})}
+                onClick={spawnNote({ // slight disagreement between Charm types but they are compatible
+                  allCharms: allCharms as unknown as OpaqueRef<
+                    MentionableCharm[]
+                  >,
+                })}
               >
                 📄 Note
               </ct-button>

packages/patterns/note.tsx

@@ -1,21 +1,33 @@
 /// <cts-enable />
 import {
   Cell,
+  cell,
   Default,
   h,
   handler,
   NAME,
+  navigateTo,
   recipe,
   toSchema,
   UI,
 } from "commontools";
 
+export type MentionableCharm = {
+  [NAME]: string;
+  content?: string;
+  mentioned?: MentionableCharm[];
+};
+
 type Input = {
   title: Default<string, "Untitled Note">;
   content: Default<string, "">;
+  allCharms: Cell<MentionableCharm[]>;
 };
 
-type Output = Input;
+type Output = {
+  mentioned: Default<Array<MentionableCharm>, []>;
+  content: Default<string, "">;
+};
 
 const updateTitle = handler<
   { detail: { value: string } },
@@ -35,9 +47,22 @@ const updateContent = handler<
   },
 );
 
+const handleCharmLinkClick = handler<
+  {
+    detail: {
+      charm: Cell<MentionableCharm>;
+    };
+  },
+  Record<string, never>
+>(({ detail }, _) => {
+  return navigateTo(detail.charm);
+});
+
 export default recipe<Input, Output>(
   "Note",
-  ({ title, content }) => {
+  ({ title, content, allCharms }) => {
+    const mentioned = cell<MentionableCharm[]>([]);
+
     return {
       [NAME]: title,
       [UI]: (
@@ -48,15 +73,22 @@ export default recipe<Input, Output>(
               placeholder="Enter title..."
             />
           </div>
+
           <ct-code-editor
             $value={content}
+            $mentionable={allCharms}
+            $mentioned={mentioned}
+            onbacklink-click={handleCharmLinkClick({})}
             language="text/markdown"
-            style="min-height: 400px;"
+            wordWrap
+            tabIndent
+            lineNumbers
           />
         </ct-screen>
       ),
       title,
       content,
+      mentioned,
     };
   },
 );