@chrysb/alphaclaw 0.3.4 → 0.3.5-beta.0

package/lib/public/js/components/file-viewer.js

@@ -8,7 +8,11 @@ import {
 } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { marked } from "https://esm.sh/marked";
-import { fetchFileContent, saveFileContent } from "../lib/api.js";
+import {
+  fetchBrowseFileDiff,
+  fetchFileContent,
+  saveFileContent,
+} from "../lib/api.js";
 import {
   formatFrontmatterValue,
   getFileSyntaxKind,
@@ -24,7 +28,7 @@ import {
 import { ActionButton } from "./action-button.js";
 import { LoadingSpinner } from "./loading-spinner.js";
 import { SegmentedControl } from "./segmented-control.js";
-import { SaveFillIcon } from "./icons.js";
+import { LockLineIcon, SaveFillIcon } from "./icons.js";
 import { showToast } from "./toast.js";
 
 const html = htm.bind(h);
@@ -32,6 +36,12 @@ const kFileViewerModeStorageKey = "alphaclaw.browse.fileViewerMode";
 const kLegacyFileViewerModeStorageKey = "alphaclawBrowseFileViewerMode";
 const kEditorSelectionStorageKey = "alphaclaw.browse.editorSelectionByPath";
 const kProtectedBrowsePaths = new Set(["openclaw.json", "devices/paired.json"]);
+const kLockedBrowsePaths = new Set([
+  "hooks/bootstrap/agents.md",
+  "hooks/bootstrap/tools.md",
+  ".alphaclaw/hourly-git-sync.sh",
+  ".alphaclaw/.cli-device-auto-approved",
+]);
 const kLoadingIndicatorDelayMs = 1000;
 const kFileRefreshIntervalMs = 5000;
 
@@ -49,6 +59,20 @@ const normalizePolicyPath = (inputPath) =>
     .trim()
     .toLowerCase();
 
+const matchesPolicyPath = (policyPathSet, normalizedPath) => {
+  const safeNormalizedPath = String(normalizedPath || "").trim();
+  if (!safeNormalizedPath) return false;
+  for (const policyPath of policyPathSet) {
+    if (
+      safeNormalizedPath === policyPath ||
+      safeNormalizedPath.endsWith(`/${policyPath}`)
+    ) {
+      return true;
+    }
+  }
+  return false;
+};
+
 const readStoredFileViewerMode = () => {
   try {
     const storedMode = String(
@@ -68,35 +92,38 @@ const clampSelectionIndex = (value, maxValue) => {
   return Math.max(0, Math.min(maxValue, numericValue));
 };
 
-const readStoredEditorSelection = (filePath) => {
-  const safePath = String(filePath || "").trim();
-  if (!safePath) return null;
+const readEditorSelectionStorageMap = () => {
   try {
-    const rawStorageValue = window.localStorage.getItem(kEditorSelectionStorageKey);
-    if (!rawStorageValue) return null;
+    const rawStorageValue = window.localStorage.getItem(
+      kEditorSelectionStorageKey,
+    );
+    if (!rawStorageValue) return {};
     const parsedStorageValue = JSON.parse(rawStorageValue);
-    if (!parsedStorageValue || typeof parsedStorageValue !== "object") return null;
-    const selection = parsedStorageValue[safePath];
-    if (!selection || typeof selection !== "object") return null;
-    return {
-      start: selection.start,
-      end: selection.end,
-    };
+    if (!parsedStorageValue || typeof parsedStorageValue !== "object")
+      return {};
+    return parsedStorageValue;
   } catch {
-    return null;
+    return {};
   }
 };
 
+const readStoredEditorSelection = (filePath) => {
+  const safePath = String(filePath || "").trim();
+  if (!safePath) return null;
+  const storageMap = readEditorSelectionStorageMap();
+  const selection = storageMap[safePath];
+  if (!selection || typeof selection !== "object") return null;
+  return {
+    start: selection.start,
+    end: selection.end,
+  };
+};
+
 const writeStoredEditorSelection = (filePath, selection) => {
   const safePath = String(filePath || "").trim();
   if (!safePath || !selection || typeof selection !== "object") return;
   try {
-    const rawStorageValue = window.localStorage.getItem(kEditorSelectionStorageKey);
-    const parsedStorageValue = rawStorageValue ? JSON.parse(rawStorageValue) : {};
-    const nextStorageValue =
-      parsedStorageValue && typeof parsedStorageValue === "object"
-        ? parsedStorageValue
-        : {};
+    const nextStorageValue = readEditorSelectionStorageMap();
     nextStorageValue[safePath] = {
       start: selection.start,
       end: selection.end,
@@ -108,10 +135,11 @@ const writeStoredEditorSelection = (filePath, selection) => {
   } catch {}
 };
 
-
 export const FileViewer = ({
   filePath = "",
   isPreviewOnly = false,
+  browseView = "edit",
+  onRequestEdit = () => {},
 }) => {
   const normalizedPath = String(filePath || "").trim();
   const normalizedPolicyPath = normalizePolicyPath(normalizedPath);
@@ -121,11 +149,15 @@ export const FileViewer = ({
   const [loading, setLoading] = useState(false);
   const [showDelayedLoadingSpinner, setShowDelayedLoadingSpinner] =
     useState(false);
+  const [diffLoading, setDiffLoading] = useState(false);
+  const [diffError, setDiffError] = useState("");
+  const [diffContent, setDiffContent] = useState("");
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState("");
   const [isFolderPath, setIsFolderPath] = useState(false);
   const [frontmatterCollapsed, setFrontmatterCollapsed] = useState(false);
-  const [externalChangeNoticeShown, setExternalChangeNoticeShown] = useState(false);
+  const [externalChangeNoticeShown, setExternalChangeNoticeShown] =
+    useState(false);
   const [protectedEditBypassPaths, setProtectedEditBypassPaths] = useState(
     () => new Set(),
   );
@@ -147,11 +179,17 @@ export const FileViewer = ({
   );
   const hasSelectedPath = normalizedPath.length > 0;
   const canEditFile = hasSelectedPath && !isFolderPath && !isPreviewOnly;
+  const isDiffView = String(browseView || "edit") === "diff";
   const isDirty = canEditFile && content !== initialContent;
+  const isLockedFile =
+    canEditFile && matchesPolicyPath(kLockedBrowsePaths, normalizedPolicyPath);
   const isProtectedFile =
-    canEditFile && kProtectedBrowsePaths.has(normalizedPolicyPath);
+    canEditFile &&
+    !isLockedFile &&
+    matchesPolicyPath(kProtectedBrowsePaths, normalizedPolicyPath);
   const isProtectedLocked =
     isProtectedFile && !protectedEditBypassPaths.has(normalizedPolicyPath);
+  const isEditBlocked = isLockedFile || isProtectedLocked;
   const syntaxKind = useMemo(
     () => getFileSyntaxKind(normalizedPath),
     [normalizedPath],
@@ -315,7 +353,9 @@ export const FileViewer = ({
             dispatchEvent: (event) => window.dispatchEvent(event),
           });
           setExternalChangeNoticeShown(false);
-          window.dispatchEvent(new CustomEvent("alphaclaw:browse-tree-refresh"));
+          window.dispatchEvent(
+            new CustomEvent("alphaclaw:browse-tree-refresh"),
+          );
           return;
         }
         if (!externalChangeNoticeShown) {
@@ -331,7 +371,10 @@ export const FileViewer = ({
         fileRefreshInFlightRef.current = false;
       }
     };
-    const intervalId = window.setInterval(refreshFromDisk, kFileRefreshIntervalMs);
+    const intervalId = window.setInterval(
+      refreshFromDisk,
+      kFileRefreshIntervalMs,
+    );
     return () => {
       window.clearInterval(intervalId);
     };
@@ -347,6 +390,36 @@ export const FileViewer = ({
     externalChangeNoticeShown,
   ]);
 
+  useEffect(() => {
+    let active = true;
+    if (!hasSelectedPath || !isDiffView || isPreviewOnly) {
+      setDiffLoading(false);
+      setDiffError("");
+      setDiffContent("");
+      return () => {
+        active = false;
+      };
+    }
+    const loadDiff = async () => {
+      setDiffLoading(true);
+      setDiffError("");
+      try {
+        const data = await fetchBrowseFileDiff(normalizedPath);
+        if (!active) return;
+        setDiffContent(String(data?.content || ""));
+      } catch (nextError) {
+        if (!active) return;
+        setDiffError(nextError.message || "Could not load diff");
+      } finally {
+        if (active) setDiffLoading(false);
+      }
+    };
+    loadDiff();
+    return () => {
+      active = false;
+    };
+  }, [hasSelectedPath, isDiffView, isPreviewOnly, normalizedPath]);
+
   useEffect(() => {
     if (loadedFilePathRef.current !== normalizedPath) return;
     if (!canEditFile || !hasSelectedPath || loading) return;
@@ -371,26 +444,79 @@ export const FileViewer = ({
   ]);
 
   useEffect(() => {
-    if (!canEditFile || loading || !hasSelectedPath) return;
-    if (loadedFilePathRef.current !== normalizedPath) return;
-    if (restoredSelectionPathRef.current === normalizedPath) return;
-    const textareaElement = editorTextareaRef.current;
-    if (!textareaElement) return;
+    if (!canEditFile || loading || !hasSelectedPath) return () => {};
+    if (loadedFilePathRef.current !== normalizedPath) return () => {};
+    if (restoredSelectionPathRef.current === normalizedPath) return () => {};
+    if (viewMode !== "edit") return () => {};
     const storedSelection = readStoredEditorSelection(normalizedPath);
-    restoredSelectionPathRef.current = normalizedPath;
-    if (!storedSelection) return;
-    const maxIndex = String(content || "").length;
-    const start = clampSelectionIndex(storedSelection.start, maxIndex);
-    const end = clampSelectionIndex(storedSelection.end, maxIndex);
-    textareaElement.setSelectionRange(start, Math.max(start, end));
-  }, [canEditFile, loading, hasSelectedPath, normalizedPath, content]);
-
-  const handleSave = async () => {
-    if (!canEditFile || saving || !isDirty || isProtectedLocked) return;
+    if (!storedSelection) {
+      restoredSelectionPathRef.current = normalizedPath;
+      return () => {};
+    }
+    let frameId = 0;
+    let attempts = 0;
+    const restoreSelection = () => {
+      const textareaElement = editorTextareaRef.current;
+      if (!textareaElement) {
+        attempts += 1;
+        if (attempts < 6)
+          frameId = window.requestAnimationFrame(restoreSelection);
+        return;
+      }
+      const maxIndex = String(content || "").length;
+      const start = clampSelectionIndex(storedSelection.start, maxIndex);
+      const end = clampSelectionIndex(storedSelection.end, maxIndex);
+      textareaElement.focus();
+      textareaElement.setSelectionRange(start, Math.max(start, end));
+      window.requestAnimationFrame(() => {
+        const nextTextareaElement = editorTextareaRef.current;
+        if (!nextTextareaElement) return;
+        const safeContent = String(content || "");
+        const safeStart = clampSelectionIndex(start, safeContent.length);
+        const lineIndex =
+          safeContent.slice(0, safeStart).split("\n").length - 1;
+        const computedStyle = window.getComputedStyle(nextTextareaElement);
+        const parsedLineHeight = Number.parseFloat(
+          computedStyle.lineHeight || "",
+        );
+        const lineHeight =
+          Number.isFinite(parsedLineHeight) && parsedLineHeight > 0
+            ? parsedLineHeight
+            : 20;
+        const nextScrollTop = Math.max(
+          0,
+          lineIndex * lineHeight - nextTextareaElement.clientHeight * 0.4,
+        );
+        nextTextareaElement.scrollTop = nextScrollTop;
+        if (editorLineNumbersRef.current) {
+          editorLineNumbersRef.current.scrollTop = nextScrollTop;
+        }
+        if (editorHighlightRef.current) {
+          editorHighlightRef.current.scrollTop = nextScrollTop;
+        }
+        viewScrollRatioRef.current = getScrollRatio(nextTextareaElement);
+      });
+      restoredSelectionPathRef.current = normalizedPath;
+    };
+    frameId = window.requestAnimationFrame(restoreSelection);
+    return () => {
+      if (frameId) window.cancelAnimationFrame(frameId);
+    };
+  }, [
+    canEditFile,
+    loading,
+    hasSelectedPath,
+    normalizedPath,
+    content,
+    viewMode,
+  ]);
+
+  const handleSave = useCallback(async () => {
+    if (!canEditFile || saving || !isDirty || isEditBlocked) return;
     setSaving(true);
     setError("");
     try {
-      const data = await saveFileContent(normalizedPath, content);
+      await saveFileContent(normalizedPath, content);
       setInitialContent(content);
       setExternalChangeNoticeShown(false);
       clearStoredFileDraft(normalizedPath);
@@ -402,11 +528,7 @@ export const FileViewer = ({
           detail: { path: normalizedPath },
         }),
       );
-      if (data.synced === false) {
-        showToast("Saved, but git sync failed", "error");
-      } else {
-        showToast("Saved and synced", "success");
-      }
+      showToast("Saved", "success");
     } catch (saveError) {
       const message = saveError.message || "Could not save file";
       setError(message);
@@ -414,7 +536,31 @@ export const FileViewer = ({
     } finally {
       setSaving(false);
     }
-  };
+  }, [
+    canEditFile,
+    saving,
+    isDirty,
+    isEditBlocked,
+    normalizedPath,
+    content,
+    initialContent,
+  ]);
+
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      const isSaveShortcut =
+        (event.metaKey || event.ctrlKey) &&
+        !event.shiftKey &&
+        !event.altKey &&
+        String(event.key || "").toLowerCase() === "s";
+      if (!isSaveShortcut) return;
+      if (!canEditFile || isPreviewOnly || isDiffView || viewMode !== "edit") return;
+      event.preventDefault();
+      void handleSave();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [canEditFile, isPreviewOnly, isDiffView, viewMode, handleSave]);
 
   const handleEditProtectedFile = () => {
     if (!normalizedPolicyPath) return;
@@ -426,7 +572,7 @@ export const FileViewer = ({
   };
 
   const handleContentInput = (event) => {
-    if (isProtectedLocked || isPreviewOnly) return;
+    if (isEditBlocked || isPreviewOnly) return;
     const nextContent = event.target.value;
     setContent(nextContent);
     if (hasSelectedPath && canEditFile) {
@@ -571,7 +717,8 @@ export const FileViewer = ({
         ${isPreviewOnly
           ? html`<div class="file-viewer-preview-pill">Preview</div>`
           : null}
-        ${isMarkdownFile &&
+        ${!isDiffView &&
+        isMarkdownFile &&
         html`
           <${SegmentedControl}
             className="mr-2.5"
@@ -583,20 +730,49 @@ export const FileViewer = ({
             onChange=${handleChangeViewMode}
           />
         `}
-        <${ActionButton}
-          onClick=${handleSave}
-          disabled=${loading || !isDirty || !canEditFile || isProtectedLocked}
-          loading=${saving}
-          tone=${isDirty ? "primary" : "secondary"}
-          size="sm"
-          idleLabel="Save"
-          loadingLabel="Saving..."
-          idleIcon=${SaveFillIcon}
-          idleIconClassName="file-viewer-save-icon"
-          className="file-viewer-save-action"
-        />
+        ${!isDiffView
+          ? html`
+              <${ActionButton}
+                onClick=${handleSave}
+                disabled=${loading || !isDirty || !canEditFile || isEditBlocked}
+                loading=${saving}
+                tone=${isDirty ? "primary" : "secondary"}
+                size="sm"
+                idleLabel="Save"
+                loadingLabel="Saving..."
+                idleIcon=${SaveFillIcon}
+                idleIconClassName="file-viewer-save-icon"
+                className="file-viewer-save-action"
+              />
+            `
+          : null}
       </div>
-      ${isProtectedFile
+      ${isDiffView
+        ? html`
+            <div class="file-viewer-protected-banner file-viewer-diff-banner">
+              <div class="file-viewer-protected-banner-text">
+                Viewing unsynced changes
+              </div>
+              <${ActionButton}
+                onClick=${() => onRequestEdit(normalizedPath)}
+                tone="secondary"
+                size="sm"
+                idleLabel="View file"
+              />
+            </div>
+          `
+        : null}
+      ${!isDiffView && isLockedFile
+        ? html`
+            <div class="file-viewer-protected-banner is-locked">
+              <${LockLineIcon} className="file-viewer-protected-banner-icon" />
+              <div class="file-viewer-protected-banner-text">
+                This file is managed by Alpha Claw and cannot be edited.
+              </div>
+            </div>
+          `
+        : null}
+      ${!isDiffView && isProtectedFile
         ? html`
             <div class="file-viewer-protected-banner">
               <div class="file-viewer-protected-banner-text">
@@ -683,139 +859,215 @@ ${formattedValue}</pre
                   Folder selected. Choose a file from this folder in the tree.
                 </div>
               `
-            : html`
-                ${isMarkdownFile
-                  ? html`
-                      <div
-                        class=${`file-viewer-preview ${viewMode === "preview" ? "" : "file-viewer-pane-hidden"}`}
-                        ref=${previewRef}
-                        onscroll=${handlePreviewScroll}
-                        aria-hidden=${viewMode === "preview" ? "false" : "true"}
-                        dangerouslySetInnerHTML=${{ __html: previewHtml }}
-                      ></div>
-                      <div
-                        class=${`file-viewer-editor-shell ${viewMode === "edit" ? "" : "file-viewer-pane-hidden"}`}
-                        aria-hidden=${viewMode === "edit" ? "false" : "true"}
-                      >
+            : isDiffView
+              ? html`
+                  <div class="file-viewer-diff-shell">
+                    ${diffLoading
+                      ? html`
+                          <div class="file-viewer-loading-shell">
+                            <${LoadingSpinner} className="h-4 w-4" />
+                          </div>
+                        `
+                      : diffError
+                        ? html`
+                            <div
+                              class="file-viewer-state file-viewer-state-error"
+                            >
+                              ${diffError}
+                            </div>
+                          `
+                        : html`
+                            <pre class="file-viewer-diff-pre">
+${(diffContent || "").split("\n").map((line, lineIndex) => {
+                                const lineClass =
+                                  line.startsWith("+") &&
+                                  !line.startsWith("+++")
+                                    ? "is-added"
+                                    : line.startsWith("-") &&
+                                        !line.startsWith("---")
+                                      ? "is-removed"
+                                      : line.startsWith("@@")
+                                        ? "is-hunk"
+                                        : line.startsWith("diff ") ||
+                                            line.startsWith("index ") ||
+                                            line.startsWith("--- ") ||
+                                            line.startsWith("+++ ")
+                                          ? "is-header"
+                                          : "";
+                                return html`
+                                  <div
+                                    key=${`${lineIndex}:${line.slice(0, 20)}`}
+                                    class=${`file-viewer-diff-line ${lineClass}`.trim()}
+                                  >
+                                    ${line || " "}
+                                  </div>
+                                `;
+                              })}
+                            </pre
+                            >
+                          `}
+                  </div>
+                `
+              : html`
+                  ${isMarkdownFile
+                    ? html`
                         <div
-                          class="file-viewer-editor-line-num-col"
-                          ref=${editorLineNumbersRef}
+                          class=${`file-viewer-preview ${viewMode === "preview" ? "" : "file-viewer-pane-hidden"}`}
+                          ref=${previewRef}
+                          onscroll=${handlePreviewScroll}
+                          aria-hidden=${viewMode === "preview"
+                            ? "false"
+                            : "true"}
+                          dangerouslySetInnerHTML=${{ __html: previewHtml }}
+                        ></div>
+                        <div
+                          class=${`file-viewer-editor-shell ${viewMode === "edit" ? "" : "file-viewer-pane-hidden"}`}
+                          aria-hidden=${viewMode === "edit" ? "false" : "true"}
                         >
-                          ${editorLineNumbers.map(
-                            (lineNumber) => html`
-                              <div
-                                class="file-viewer-editor-line-num"
-                                key=${lineNumber}
-                                ref=${(element) => {
-                                  editorLineNumberRowRefs.current[
-                                    lineNumber - 1
-                                  ] = element;
-                                }}
-                              >
-                                ${lineNumber}
-                              </div>
-                            `,
-                          )}
-                        </div>
-                        <div class="file-viewer-editor-stack">
                           <div
-                            class="file-viewer-editor-highlight"
-                            ref=${editorHighlightRef}
+                            class="file-viewer-editor-line-num-col"
+                            ref=${editorLineNumbersRef}
                           >
-                            ${highlightedEditorLines.map(
-                              (line) => html`
+                            ${editorLineNumbers.map(
+                              (lineNumber) => html`
                                 <div
-                                  class="file-viewer-editor-highlight-line"
-                                  key=${line.lineNumber}
+                                  class="file-viewer-editor-line-num"
+                                  key=${lineNumber}
                                   ref=${(element) => {
-                                    editorHighlightLineRefs.current[
-                                      line.lineNumber - 1
+                                    editorLineNumberRowRefs.current[
+                                      lineNumber - 1
                                     ] = element;
                                   }}
                                 >
-                                  <span
-                                    class="file-viewer-editor-highlight-line-content"
-                                    dangerouslySetInnerHTML=${{
-                                      __html: line.html,
-                                    }}
-                                  ></span>
+                                  ${lineNumber}
                                 </div>
                               `,
                             )}
                           </div>
-                          <textarea
-                            class="file-viewer-editor file-viewer-editor-overlay"
-                            ref=${editorTextareaRef}
-                            value=${content}
-                            onInput=${handleContentInput}
-                            onScroll=${handleEditorScroll}
-                            onSelect=${handleEditorSelectionChange}
-                            onKeyUp=${handleEditorSelectionChange}
-                            onClick=${handleEditorSelectionChange}
-                            spellcheck=${false}
-                            autocorrect="off"
-                            autocapitalize="off"
-                            autocomplete="off"
-                            data-gramm="false"
-                            data-gramm_editor="false"
-                            data-enable-grammarly="false"
-                            wrap="soft"
-                          ></textarea>
-                        </div>
-                      </div>
-                    `
-                  : html`
-                      <div class="file-viewer-editor-shell">
-                        <div
-                          class="file-viewer-editor-line-num-col"
-                          ref=${editorLineNumbersRef}
-                        >
-                          ${editorLineNumbers.map(
-                            (lineNumber) => html`
-                              <div
-                                class="file-viewer-editor-line-num"
-                                key=${lineNumber}
-                                ref=${(element) => {
-                                  editorLineNumberRowRefs.current[
-                                    lineNumber - 1
-                                  ] = element;
-                                }}
-                              >
-                                ${lineNumber}
-                              </div>
-                            `,
-                          )}
+                          <div class="file-viewer-editor-stack">
+                            <div
+                              class="file-viewer-editor-highlight"
+                              ref=${editorHighlightRef}
+                            >
+                              ${highlightedEditorLines.map(
+                                (line) => html`
+                                  <div
+                                    class="file-viewer-editor-highlight-line"
+                                    key=${line.lineNumber}
+                                    ref=${(element) => {
+                                      editorHighlightLineRefs.current[
+                                        line.lineNumber - 1
+                                      ] = element;
+                                    }}
+                                  >
+                                    <span
+                                      class="file-viewer-editor-highlight-line-content"
+                                      dangerouslySetInnerHTML=${{
+                                        __html: line.html,
+                                      }}
+                                    ></span>
+                                  </div>
+                                `,
+                              )}
+                            </div>
+                            <textarea
+                              class="file-viewer-editor file-viewer-editor-overlay"
+                              ref=${editorTextareaRef}
+                              value=${content}
+                              onInput=${handleContentInput}
+                              onScroll=${handleEditorScroll}
+                              onSelect=${handleEditorSelectionChange}
+                              onKeyUp=${handleEditorSelectionChange}
+                              onClick=${handleEditorSelectionChange}
+                              disabled=${isEditBlocked || isPreviewOnly}
+                              readonly=${isEditBlocked || isPreviewOnly}
+                              spellcheck=${false}
+                              autocorrect="off"
+                              autocapitalize="off"
+                              autocomplete="off"
+                              data-gramm="false"
+                              data-gramm_editor="false"
+                              data-enable-grammarly="false"
+                              wrap="soft"
+                            ></textarea>
+                          </div>
                         </div>
-                        ${shouldUseHighlightedEditor
-                          ? html`
-                              <div class="file-viewer-editor-stack">
+                      `
+                    : html`
+                        <div class="file-viewer-editor-shell">
+                          <div
+                            class="file-viewer-editor-line-num-col"
+                            ref=${editorLineNumbersRef}
+                          >
+                            ${editorLineNumbers.map(
+                              (lineNumber) => html`
                                 <div
-                                  class="file-viewer-editor-highlight"
-                                  ref=${editorHighlightRef}
+                                  class="file-viewer-editor-line-num"
+                                  key=${lineNumber}
+                                  ref=${(element) => {
+                                    editorLineNumberRowRefs.current[
+                                      lineNumber - 1
+                                    ] = element;
+                                  }}
                                 >
-                                  ${highlightedEditorLines.map(
-                                    (line) => html`
-                                      <div
-                                        class="file-viewer-editor-highlight-line"
-                                        key=${line.lineNumber}
-                                        ref=${(element) => {
-                                          editorHighlightLineRefs.current[
-                                            line.lineNumber - 1
-                                          ] = element;
-                                        }}
-                                      >
-                                        <span
-                                          class="file-viewer-editor-highlight-line-content"
-                                          dangerouslySetInnerHTML=${{
-                                            __html: line.html,
+                                  ${lineNumber}
+                                </div>
+                              `,
+                            )}
+                          </div>
+                          ${shouldUseHighlightedEditor
+                            ? html`
+                                <div class="file-viewer-editor-stack">
+                                  <div
+                                    class="file-viewer-editor-highlight"
+                                    ref=${editorHighlightRef}
+                                  >
+                                    ${highlightedEditorLines.map(
+                                      (line) => html`
+                                        <div
+                                          class="file-viewer-editor-highlight-line"
+                                          key=${line.lineNumber}
+                                          ref=${(element) => {
+                                            editorHighlightLineRefs.current[
+                                              line.lineNumber - 1
+                                            ] = element;
                                           }}
-                                        ></span>
-                                      </div>
-                                    `,
-                                  )}
+                                        >
+                                          <span
+                                            class="file-viewer-editor-highlight-line-content"
+                                            dangerouslySetInnerHTML=${{
+                                              __html: line.html,
+                                            }}
+                                          ></span>
+                                        </div>
+                                      `,
+                                    )}
+                                  </div>
+                                  <textarea
+                                    class="file-viewer-editor file-viewer-editor-overlay"
+                                    ref=${editorTextareaRef}
+                                    value=${content}
+                                    onInput=${handleContentInput}
+                                    onScroll=${handleEditorScroll}
+                                    onSelect=${handleEditorSelectionChange}
+                                    onKeyUp=${handleEditorSelectionChange}
+                                    onClick=${handleEditorSelectionChange}
+                                    disabled=${isEditBlocked || isPreviewOnly}
+                                    readonly=${isEditBlocked || isPreviewOnly}
+                                    spellcheck=${false}
+                                    autocorrect="off"
+                                    autocapitalize="off"
+                                    autocomplete="off"
+                                    data-gramm="false"
+                                    data-gramm_editor="false"
+                                    data-enable-grammarly="false"
+                                    wrap="soft"
+                                  ></textarea>
                                 </div>
+                              `
+                            : html`
                                 <textarea
-                                  class="file-viewer-editor file-viewer-editor-overlay"
+                                  class="file-viewer-editor"
                                   ref=${editorTextareaRef}
                                   value=${content}
                                   onInput=${handleContentInput}
@@ -823,7 +1075,8 @@ ${formattedValue}</pre
                                   onSelect=${handleEditorSelectionChange}
                                   onKeyUp=${handleEditorSelectionChange}
                                   onClick=${handleEditorSelectionChange}
-                                  readonly=${isProtectedLocked || isPreviewOnly}
+                                  disabled=${isEditBlocked || isPreviewOnly}
+                                  readonly=${isEditBlocked || isPreviewOnly}
                                   spellcheck=${false}
                                   autocorrect="off"
                                   autocapitalize="off"
@@ -833,32 +1086,10 @@ ${formattedValue}</pre
                                   data-enable-grammarly="false"
                                   wrap="soft"
                                 ></textarea>
-                              </div>
-                            `
-                          : html`
-                              <textarea
-                                class="file-viewer-editor"
-                                ref=${editorTextareaRef}
-                                value=${content}
-                                onInput=${handleContentInput}
-                                onScroll=${handleEditorScroll}
-                                onSelect=${handleEditorSelectionChange}
-                                onKeyUp=${handleEditorSelectionChange}
-                                onClick=${handleEditorSelectionChange}
-                                readonly=${isProtectedLocked || isPreviewOnly}
-                                spellcheck=${false}
-                                autocorrect="off"
-                                autocapitalize="off"
-                                autocomplete="off"
-                                data-gramm="false"
-                                data-gramm_editor="false"
-                                data-enable-grammarly="false"
-                                wrap="soft"
-                              ></textarea>
-                            `}
-                      </div>
-                    `}
-              `}
+                              `}
+                        </div>
+                      `}
+                `}
     </div>
   `;
 };