[ENG-1647] Auto-resize content input and add fileName character limit in node creation dialog (#977)

* [ENG-1647] Auto-resize content input and add 512-char limit in node creation dialog

- Convert Content <input> to <textarea> with auto-resize on each keystroke
- Add maxLength={512} matching Obsidian's filename character limit
- Show inline error message when character limit is reached
- Convert locked state <input> to <textarea> for visual consistency

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Update character limit from 512 to 255 to match OS filesystem limit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Extract character limit to MAX_NODE_TITLE_LENGTH constant

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* move order

* address PR comments

* address PR comments

* lint

* Refactor: move trim logic from useEffect into handleNodeTypeChange

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Fix: clear selectedFileRef on node type change to prevent stale async override

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: trangdoan982

apps/obsidian/src/components/ModifyNodeModal.tsx

@@ -13,6 +13,31 @@ import type DiscourseGraphPlugin from "~/index";
 import { QueryEngine } from "~/services/QueryEngine";
 import { isProvisionalSchema } from "~/utils/typeUtils";
 import { getNodeTypeIdForFile } from "~/utils/relationsStore";
+import { formatNodeName } from "~/utils/createNode";
+
+// APFS and ext4 both enforce a 255 UTF-8 byte limit per filename component.
+const MAX_FILENAME_BYTES = 255;
+const MD_EXTENSION_BYTES = 3; // ".md"
+
+const getByteLength = (str: string): number =>
+  new TextEncoder().encode(str).byteLength;
+
+// Remove characters from the end until the string fits within maxBytes.
+const trimToByteLimit = (str: string, maxBytes: number): string => {
+  if (getByteLength(str) <= maxBytes) return str;
+  let trimmed = str;
+  while (trimmed.length > 0 && getByteLength(trimmed) > maxBytes) {
+    trimmed = trimmed.slice(0, -1);
+  }
+  return trimmed;
+};
+
+const computeMaxTitleBytes = (nodeType: DiscourseNode | null): number => {
+  const formatOverhead = nodeType
+    ? getByteLength(formatNodeName("", nodeType) ?? "")
+    : 0;
+  return Math.max(1, MAX_FILENAME_BYTES - MD_EXTENSION_BYTES - formatOverhead);
+};
 
 type ModifyNodeFormProps = {
   nodeTypes: DiscourseNode[];
@@ -59,12 +84,17 @@ export const ModifyNodeForm = ({
     string | undefined
   >(undefined);
   const queryEngine = useRef(new QueryEngine(plugin.app));
-  const titleInputRef = useRef<HTMLInputElement>(null);
+  const titleInputRef = useRef<HTMLTextAreaElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
   const menuRef = useRef<HTMLUListElement>(null);
   const debounceTimeoutRef = useRef<number | null>(null);
   const selectedFileRef = useRef<TFile | null>(null);
 
+  const maxTitleBytes = useMemo(
+    () => computeMaxTitleBytes(selectedNodeType),
+    [selectedNodeType],
+  );
+
   // Search for nodes when query changes (only in create mode)
   useEffect(() => {
     if (isEditMode) {
@@ -131,7 +161,7 @@ export const ModifyNodeForm = ({
       popover.style.left = `${inputRect.left}px`;
       popover.style.width = `${inputRect.width}px`;
     }
-  }, [isOpen]);
+  }, [isOpen, query]);
 
   useEffect(() => {
     if (menuRef.current && isOpen && activeIndex >= 0) {
@@ -152,6 +182,13 @@ export const ModifyNodeForm = ({
     titleInputRef.current?.focus();
   }, []);
 
+  useEffect(() => {
+    const el = titleInputRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [query]);
+
   // Determine available relationships based on current file and selected node type
   const availableRelationships = useMemo(() => {
     if (!currentFile || !selectedNodeType || isEditMode) {
@@ -256,7 +293,7 @@ export const ModifyNodeForm = ({
     }, 50);
   }, []);
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (selectedExistingNode) {
       // If locked, only handle Escape
       if (e.key === "Escape") {
@@ -292,16 +329,26 @@ export const ModifyNodeForm = ({
     const newSelectedType =
       nodeTypes.find((nt) => nt.id === selectedId) || null;
     setSelectedNodeType(newSelectedType);
+
     if (selectedExistingNode) {
+      selectedFileRef.current = null;
       setSelectedExistingNode(null);
       setQuery("");
       setTitle("");
+    } else {
+      const newMaxBytes = computeMaxTitleBytes(newSelectedType);
+      if (getByteLength(query) > newMaxBytes) {
+        const trimmed = trimToByteLimit(query, newMaxBytes);
+        setQuery(trimmed);
+        setTitle(trimmed);
+      }
     }
+
     setSelectedRelationshipKey(undefined);
   };
 
-  const handleQueryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newQuery = e.target.value;
+  const handleQueryChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newQuery = trimToByteLimit(e.target.value, maxTitleBytes);
     setQuery(newQuery);
     setTitle(newQuery);
     if (selectedExistingNode) {
@@ -377,12 +424,12 @@ export const ModifyNodeForm = ({
           {selectedExistingNode ? (
             // Locked state: show selected node with clear button
             <div className="relative flex w-full items-start">
-              <input
-                type="text"
+              <textarea
                 value={selectedExistingNode.basename}
                 readOnly
                 disabled={isSubmitting}
-                className="resize-vertical font-inherit border-background-modifier-border bg-background-secondary text-text-normal max-h-[6em] min-h-[2.5em] w-full cursor-default overflow-y-auto rounded-md border p-2 pr-8"
+                rows={1}
+                className="font-inherit border-background-modifier-border bg-background-secondary text-text-normal min-h-[2.5em] w-full cursor-default resize-none overflow-y-auto rounded-md border p-2 pr-8"
               />
               <button
                 onClick={handleClearSelection}
@@ -397,9 +444,8 @@ export const ModifyNodeForm = ({
           ) : (
             // Search input with popover (only in create mode)
             <div className="relative w-full">
-              <input
+              <textarea
                 ref={titleInputRef}
-                type="text"
                 placeholder={
                   isEditMode
                     ? "Enter new content"
@@ -419,9 +465,15 @@ export const ModifyNodeForm = ({
                   setTimeout(() => setIsFocused(false), 200);
                 }}
                 disabled={isSubmitting}
-                className="resize-vertical font-inherit border-background-modifier-border bg-background-primary text-text-normal max-h-[6em] min-h-[2.5em] w-full overflow-y-auto rounded-md border p-2"
+                rows={1}
+                className="font-inherit border-background-modifier-border bg-background-primary text-text-normal min-h-[2.5em] w-full resize-none overflow-hidden rounded-md border p-2"
                 autoComplete="off"
               />
+              {getByteLength(query) >= maxTitleBytes && (
+                <p className="text-error mt-1 text-xs">
+                  Character limit reached
+                </p>
+              )}
               {isOpen && !isEditMode && (
                 <div
                   ref={popoverRef}