apply changes

Author: HesterG

templates/repo/editor/edit.tmpl

@@ -30,8 +30,8 @@
 			<div class="field">
 				<div class="ui top attached tabular menu" data-write="write" data-preview="preview" data-diff="diff">
 					<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{.locale.Tr "repo.editor.new_file"}}{{else}}{{.locale.Tr "repo.editor.edit_file"}}{{end}}</a>
-					{{if not .IsNewFile}}
 					<a class="item" data-tab="preview" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}/src/{{.BranchNameSubURL}}" data-markup-mode="file">{{svg "octicon-eye"}} {{.locale.Tr "preview"}}</a>
+					{{if not .IsNewFile}}
 					<a class="item" data-tab="diff" data-url="{{.RepoLink}}/_preview/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}" data-context="{{.BranchLink}}">{{svg "octicon-diff"}} {{.locale.Tr "repo.editor.preview_changes"}}</a>
 					{{end}}
 				</div>

web_src/js/features/codeeditor.js

@@ -131,23 +131,35 @@ function getFileBasedOptions(filename, lineWrapExts) {
   };
 }
 
+function togglePreviewDisplay(previewable) {
+  const previewTab = document.querySelector('a[data-tab=preview]');
+  if (!previewTab) {
+    return;
+  }
+  if (previewable) {
+    const newUrl = (previewTab.getAttribute('data-url') || '').replace(/(.*)\/.*/i, `$1/markup`);
+    previewTab.setAttribute('data-url', newUrl);
+    previewTab.style.display = '';
+  } else {
+    previewTab.style.display = 'none';
+    // If the "preview" tab was active, user changes the filename to a non-previewable one,
+    // then the "preview" tab becomes inactive (hidden), so the "write" tab should become active
+    if (previewTab.classList.contains('active')) {
+      const writeTab = document.querySelector('a[data-tab=write]');
+      writeTab.click();
+    }
+  }
+}
+
 export async function createCodeEditor(textarea, filenameInput) {
   const filename = basename(filenameInput.value);
-  const previewLink = document.querySelector('a[data-tab=preview]');
   const previewableExts = (textarea.getAttribute('data-previewable-extensions') || '').split(',');
+  const previewableExtsSet = new Set(previewableExts);
   const lineWrapExts = (textarea.getAttribute('data-line-wrap-extensions') || '').split(',');
-  const previewable = previewableExts.includes(extname(filename));
+  const previewable = previewableExtsSet.has(extname(filename));
   const editorConfig = getEditorconfig(filenameInput);
 
-  if (previewLink) {
-    if (previewable) {
-      const newUrl = (previewLink.getAttribute('data-url') || '').replace(/(.*)\/.*/i, `$1/markup`);
-      previewLink.setAttribute('data-url', newUrl);
-      previewLink.style.display = '';
-    } else {
-      previewLink.style.display = 'none';
-    }
-  }
+  togglePreviewDisplay(previewable);
 
   const {monaco, editor} = await createMonaco(textarea, filename, {
     ...baseOptions,
@@ -157,8 +169,8 @@ export async function createCodeEditor(textarea, filenameInput) {
 
   const debounceInputHandler = debounce(500, () => {
     const filename = filenameInput.value;
-    const isMarkdown = markdownExtsSet.has(extname(filename));
-    togglePreviewDisplay(isMarkdown, hasMarkdown);
+    const previewable = previewableExtsSet.has(extname(filename));
+    togglePreviewDisplay(previewable);
     updateEditor(monaco, editor, filename, lineWrapExts);
   });