fix: Limit title length to 50 characters in cellUpdate function

packages/shared/src/schemas/cells.ts

@@ -65,7 +65,7 @@ export const SrcbookMetadataSchema = z.object({
 ///////////////////////////////////////////
 
 export const TitleCellUpdateAttrsSchema = z.object({
-  text: z.string(),
+  text: z.string().max(44, 'Title must be 44 characters or fewer'),
 });
 
 export const MarkdownCellUpdateAttrsSchema = z.object({

packages/web/src/components/import-export-srcbook-modal.tsx

@@ -32,6 +32,11 @@ export function ImportSrcbookModal({
   async function onChange(entry: FsObjectType) {
     setError(null);
 
+    if (entry.basename.length > 44) {
+      setError('Srcbook title should be less than 44 characters');
+      return;
+    }
+
     const { error: importError, result: importResult } = await importSrcbook({ path: entry.path });
 
     if (importError) {

packages/web/src/components/ui/heading.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
+import { Info } from 'lucide-react';
 
 const className =
   'flex w-full rounded-md border border-transparent bg-transparent px-1 py-1 transition-colors hover:border-input hover:shadow-sm focus-visible:shadow-md focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50';
@@ -10,27 +11,51 @@ export function EditableH1(props: {
   className?: string;
   onUpdated: (text: string) => void;
 }) {
-  const ref = React.useRef<HTMLHeadingElement | null>(null);
+  const ref = React.useRef<HTMLTextAreaElement | null>(null);
+  const [heading, setHeading] = React.useState<string>(props.text);
+  const [isMaxHeadingLengthExceeded, setIsMaxHeadingLengthExceeded] =
+    React.useState<boolean>(false);
+  const maxHeadingLength = 50;
+
+  const handleChange = (newValue: string) => {
+    if (newValue.length > maxHeadingLength) {
+      setIsMaxHeadingLengthExceeded(true);
+      setTimeout(() => {
+        setIsMaxHeadingLengthExceeded(false);
+      }, 2000);
+      return;
+    }
+    setHeading(newValue);
+  };
 
   return (
-    <h1
-      className={cn(className, props.className)}
-      ref={ref}
-      contentEditable
-      suppressContentEditableWarning={true}
-      onBlur={(e) => {
-        const text = e.currentTarget.innerHTML;
-        if (text !== props.text) {
-          props.onUpdated(text);
-        }
-      }}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' && ref.current) {
-          ref.current.blur();
-        }
-      }}
-    >
-      {props.text}
-    </h1>
+    <div>
+      <textarea
+        className={cn(className, props.className)}
+        value={heading}
+        onBlur={(e) => {
+          const text = e.currentTarget.value;
+          if (text !== props.text) {
+            props.onUpdated(text);
+          }
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && ref.current) {
+            ref.current.blur();
+          }
+        }}
+        onChange={(e) => {
+          handleChange(e.target.value);
+        }}
+        ref={ref}
+        rows={1}
+      />
+      {isMaxHeadingLengthExceeded && (
+        <div className="bg-error text-error-foreground flex items-center rounded-sm border border-transparent px-[10px] py-2 text-sm leading-none font-medium">
+          <Info size={14} className="mr-1.5" />
+          Max heading length exceeded
+        </div>
+      )}
+    </div>
   );
 }