Fix missing client side updates (#154)

srcbookdev · Jul 24, 2024 · 9eac033 · 9eac033
1 parent 2f69b26
commit 9eac033
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/packages/web/src/components/cells/code.tsx b/packages/web/src/components/cells/code.tsx
@@ -71,7 +71,7 @@ export default function CodeCell(props: {
     { enableOnFormTags: ['textarea'] },
   );
 
-  const { updateCell, clearOutput } = useCells();
+  const { updateCell: updateCellOnClient, clearOutput } = useCells();
 
   function setFilenameError(error: string | null) {
     _setFilenameError(error);
@@ -97,7 +97,7 @@ export default function CodeCell(props: {
   }, [cell.id, channel]);
 
   function updateFilename(filename: string) {
-    updateCell({ ...cell, filename });
+    updateCellOnClient({ ...cell, filename });
     channel.push('cell:rename', {
       sessionId: session.id,
       cellId: cell.id,
@@ -133,7 +133,7 @@ export default function CodeCell(props: {
     setShowStdio(true);
 
     // Update client side only. The server will know it's running from the 'cell:exec' event.
-    updateCell({ ...cell, status: 'running' });
+    updateCellOnClient({ ...cell, status: 'running' });
     clearOutput(cell.id);
 
     // Add artificial delay to allow debounced updates to propagate
@@ -156,6 +156,7 @@ export default function CodeCell(props: {
   }
 
   function onAcceptDiff() {
+    updateCellOnClient({ ...cell, source: newSource });
     updateCellOnServer(cell, { source: newSource });
     setPrompt('');
     setPromptMode('off');

diff --git a/packages/web/src/components/cells/markdown.tsx b/packages/web/src/components/cells/markdown.tsx
@@ -9,6 +9,7 @@ import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import DeleteCellWithConfirmation from '@/components/delete-cell-dialog';
 import useTheme from '@/components/use-theme';
+import { useCells } from '../use-cell';
 
 marked.use({ gfm: true });
 
@@ -18,7 +19,8 @@ export default function MarkdownCell(props: {
   onDeleteCell: (cell: CellType) => void;
 }) {
   const { codeTheme } = useTheme();
-  const cell = props.cell;
+  const { updateCell: updateCellOnClient } = useCells();
+  const { cell, updateCellOnServer, onDeleteCell } = props;
   const defaultState = cell.text ? 'view' : 'edit';
   const [status, setStatus] = useState<'edit' | 'view'>(defaultState);
   const [text, setText] = useState(cell.text);
@@ -28,7 +30,7 @@ export default function MarkdownCell(props: {
     if (status === 'edit') {
       setText(cell.text);
     }
-  }, [status, cell]);
+  }, [status, cell.text]);
 
   const keyMap = Prec.highest(
     keymap.of([
@@ -67,15 +69,16 @@ export default function MarkdownCell(props: {
     setError(error);
 
     if (error === null) {
-      props.updateCellOnServer(cell, { text });
+      updateCellOnClient({ ...cell, text });
+      updateCellOnServer(cell, { text });
       setStatus('view');
       return true;
     }
   }
 
   return (
     <div
-      id={`cell-${props.cell.id}`}
+      id={`cell-${cell.id}`}
       onDoubleClick={() => setStatus('edit')}
       className={cn(
         'group/cell relative w-full rounded-md border border-transparent hover:border-border transition-all',
@@ -88,7 +91,7 @@ export default function MarkdownCell(props: {
           <div className="p-1 w-full hidden group-hover/cell:flex items-center justify-between z-10">
             <div className="flex items-center gap-2">
               <h5 className="pl-2 text-sm font-mono font-bold">Markdown</h5>
-              <DeleteCellWithConfirmation onDeleteCell={() => props.onDeleteCell(cell)}>
+              <DeleteCellWithConfirmation onDeleteCell={() => onDeleteCell(cell)}>
                 <Button variant="secondary" size="icon" className="border-transparent">
                   <Trash2 size={16} />
                 </Button>
@@ -121,7 +124,7 @@ export default function MarkdownCell(props: {
             <div className="p-1 w-full flex items-center justify-between z-10">
               <div className="flex items-center gap-2">
                 <h5 className="pl-2 text-sm font-mono font-bold">Markdown</h5>
-                <DeleteCellWithConfirmation onDeleteCell={() => props.onDeleteCell(cell)}>
+                <DeleteCellWithConfirmation onDeleteCell={() => onDeleteCell(cell)}>
                   <Button variant="secondary" size="icon" className="border-transparent">
                     <Trash2 size={16} />
                   </Button>
@@ -143,7 +146,7 @@ export default function MarkdownCell(props: {
                 value={text}
                 basicSetup={{ lineNumbers: false, foldGutter: false }}
                 extensions={[markdown(), keyMap, EditorView.lineWrapping]}
-                onChange={(source) => setText(source)}
+                onChange={setText}
               />
             </div>
           </div>