From 835e72d5dc58acfc9b8b8ed4b409a35ae6adabfc Mon Sep 17 00:00:00 2001 From: HesterG Date: Wed, 22 Mar 2023 09:54:13 +0800 Subject: [PATCH 01/11] new file preview --- web_src/js/features/codeeditor.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/web_src/js/features/codeeditor.js b/web_src/js/features/codeeditor.js index 4f5ea317b4767..776ff9856ee8b 100644 --- a/web_src/js/features/codeeditor.js +++ b/web_src/js/features/codeeditor.js @@ -156,6 +156,8 @@ export async function createCodeEditor(textarea, filenameInput) { filenameInput.addEventListener('keyup', () => { const filename = filenameInput.value; + const _isMarkdown = markdownExts.includes(extname(filename)); + togglePreviewDisplay(_isMarkdown, previewFileModes); updateEditor(monaco, editor, filename, lineWrapExts); }); From d7c0dead578c25e09e0173d495fdfbcdb3bd3f46 Mon Sep 17 00:00:00 2001 From: HesterG Date: Wed, 22 Mar 2023 13:54:11 +0800 Subject: [PATCH 02/11] change names and comments --- web_src/js/features/codeeditor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/codeeditor.js b/web_src/js/features/codeeditor.js index 776ff9856ee8b..8fbb1a4cdc106 100644 --- a/web_src/js/features/codeeditor.js +++ b/web_src/js/features/codeeditor.js @@ -156,8 +156,8 @@ export async function createCodeEditor(textarea, filenameInput) { filenameInput.addEventListener('keyup', () => { const filename = filenameInput.value; - const _isMarkdown = markdownExts.includes(extname(filename)); - togglePreviewDisplay(_isMarkdown, previewFileModes); + const isNewFilenameMarkdown = markdownExts.includes(extname(filename)); + togglePreviewDisplay(isNewFilenameMarkdown, previewFileModes); updateEditor(monaco, editor, filename, lineWrapExts); }); From ce3e1e7b3edb2b453f2b166fa612a2aa24d3885e Mon Sep 17 00:00:00 2001 From: HesterG Date: Wed, 22 Mar 2023 13:54:48 +0800 Subject: [PATCH 03/11] change name --- web_src/js/features/codeeditor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/codeeditor.js b/web_src/js/features/codeeditor.js index 8fbb1a4cdc106..85a02b961129d 100644 --- a/web_src/js/features/codeeditor.js +++ b/web_src/js/features/codeeditor.js @@ -156,8 +156,8 @@ export async function createCodeEditor(textarea, filenameInput) { filenameInput.addEventListener('keyup', () => { const filename = filenameInput.value; - const isNewFilenameMarkdown = markdownExts.includes(extname(filename)); - togglePreviewDisplay(isNewFilenameMarkdown, previewFileModes); + const isMarkdown = markdownExts.includes(extname(filename)); + togglePreviewDisplay(isMarkdown, previewFileModes); updateEditor(monaco, editor, filename, lineWrapExts); }); From 0345acf117d2ef3a4ba94ddc134bbdd66781d03b Mon Sep 17 00:00:00 2001 From: HesterG Date: Wed, 22 Mar 2023 14:13:02 +0800 Subject: [PATCH 04/11] change to input event --- web_src/js/features/codeeditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/codeeditor.js b/web_src/js/features/codeeditor.js index 85a02b961129d..77d2f3ca21362 100644 --- a/web_src/js/features/codeeditor.js +++ b/web_src/js/features/codeeditor.js @@ -154,7 +154,7 @@ export async function createCodeEditor(textarea, filenameInput) { ...getEditorConfigOptions(editorConfig), }); - filenameInput.addEventListener('keyup', () => { + filenameInput.addEventListener('input', () => { const filename = filenameInput.value; const isMarkdown = markdownExts.includes(extname(filename)); togglePreviewDisplay(isMarkdown, previewFileModes); From c661efceeace5cd5cbfdc4b42902da3e447f41c8 Mon Sep 17 00:00:00 2001 From: HesterG Date: Thu, 23 Mar 2023 09:26:44 +0800 Subject: [PATCH 05/11] add debounce and use set.has --- package-lock.json | 9 +++++++++ package.json | 1 + web_src/js/features/codeeditor.js | 9 ++++++--- web_src/js/utils.js | 5 +++++ 4 files changed, 21 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2f277f180f307..93adf5622f83b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,6 +37,7 @@ "pretty-ms": "8.0.0", "sortablejs": "1.15.0", "swagger-ui-dist": "4.18.1", + "throttle-debounce": "5.0.0", "tippy.js": "6.3.7", "tributejs": "5.1.3", "uint8-to-base64": "0.2.0", @@ -8839,6 +8840,14 @@ "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", "dev": true }, + "node_modules/throttle-debounce": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz", + "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==", + "engines": { + "node": ">=12.22" + } + }, "node_modules/tinybench": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.4.0.tgz", diff --git a/package.json b/package.json index e5f346f207b92..a5d09157a65dc 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "pretty-ms": "8.0.0", "sortablejs": "1.15.0", "swagger-ui-dist": "4.18.1", + "throttle-debounce": "5.0.0", "tippy.js": "6.3.7", "tributejs": "5.1.3", "uint8-to-base64": "0.2.0", diff --git a/web_src/js/features/codeeditor.js b/web_src/js/features/codeeditor.js index 77d2f3ca21362..e248ab1556d48 100644 --- a/web_src/js/features/codeeditor.js +++ b/web_src/js/features/codeeditor.js @@ -1,4 +1,5 @@ -import {basename, extname, isObject, isDarkTheme} from '../utils.js'; +import {basename, extname, isObject, isDarkTheme, containsEle} from '../utils.js'; +import {debounce} from 'throttle-debounce'; const languagesByFilename = {}; const languagesByExt = {}; @@ -154,13 +155,15 @@ export async function createCodeEditor(textarea, filenameInput) { ...getEditorConfigOptions(editorConfig), }); - filenameInput.addEventListener('input', () => { + const debounceInputHandler = debounce(500, () => { const filename = filenameInput.value; - const isMarkdown = markdownExts.includes(extname(filename)); + const isMarkdown = containsEle(markdownExts, extname(filename)); togglePreviewDisplay(isMarkdown, previewFileModes); updateEditor(monaco, editor, filename, lineWrapExts); }); + filenameInput.addEventListener('input', debounceInputHandler); + return editor; } diff --git a/web_src/js/utils.js b/web_src/js/utils.js index b3ffbf29885fb..e32af4ad1bc88 100644 --- a/web_src/js/utils.js +++ b/web_src/js/utils.js @@ -161,3 +161,8 @@ export function useLightTextOnBackground(backgroundColor) { const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255; return brightness < 0.35; } + +// return whether an array has an element +export function containsEle(arr, element) { + return new Set(arr).has(element); +} From 755b99d1d2e8de805f08e252937eeafea0113bc6 Mon Sep 17 00:00:00 2001 From: HesterG Date: Thu, 23 Mar 2023 12:16:27 +0800 Subject: [PATCH 06/11] only create set once --- web_src/js/features/codeeditor.js | 6 +++--- web_src/js/utils.js | 4 ---- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/web_src/js/features/codeeditor.js b/web_src/js/features/codeeditor.js index e248ab1556d48..a36c8edb20881 100644 --- a/web_src/js/features/codeeditor.js +++ b/web_src/js/features/codeeditor.js @@ -1,4 +1,4 @@ -import {basename, extname, isObject, isDarkTheme, containsEle} from '../utils.js'; +import {basename, extname, isObject, isDarkTheme} from '../utils.js'; import {debounce} from 'throttle-debounce'; const languagesByFilename = {}; @@ -157,8 +157,8 @@ export async function createCodeEditor(textarea, filenameInput) { const debounceInputHandler = debounce(500, () => { const filename = filenameInput.value; - const isMarkdown = containsEle(markdownExts, extname(filename)); - togglePreviewDisplay(isMarkdown, previewFileModes); + const isMarkdown = markdownExtsSet.has(extname(filename)); + togglePreviewDisplay(isMarkdown, hasMarkdown); updateEditor(monaco, editor, filename, lineWrapExts); }); diff --git a/web_src/js/utils.js b/web_src/js/utils.js index e32af4ad1bc88..ae8218b538fb1 100644 --- a/web_src/js/utils.js +++ b/web_src/js/utils.js @@ -162,7 +162,3 @@ export function useLightTextOnBackground(backgroundColor) { return brightness < 0.35; } -// return whether an array has an element -export function containsEle(arr, element) { - return new Set(arr).has(element); -} From 6d301b928abbfd3fe3dce38dd647014d9d9cc7a3 Mon Sep 17 00:00:00 2001 From: HesterG Date: Thu, 23 Mar 2023 12:18:34 +0800 Subject: [PATCH 07/11] remove --- web_src/js/utils.js | 1 - 1 file changed, 1 deletion(-) diff --git a/web_src/js/utils.js b/web_src/js/utils.js index ae8218b538fb1..b3ffbf29885fb 100644 --- a/web_src/js/utils.js +++ b/web_src/js/utils.js @@ -161,4 +161,3 @@ export function useLightTextOnBackground(backgroundColor) { const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255; return brightness < 0.35; } - From 8846ca3f0878f0977fb83de8f9100ef19e7eb566 Mon Sep 17 00:00:00 2001 From: HesterG Date: Fri, 24 Mar 2023 15:10:29 +0800 Subject: [PATCH 08/11] apply changes --- templates/repo/editor/edit.tmpl | 2 +- web_src/js/features/codeeditor.js | 38 ++++++++++++++++++++----------- 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl index 737027f59006b..1ff97778a2abc 100644 --- a/templates/repo/editor/edit.tmpl +++ b/templates/repo/editor/edit.tmpl @@ -30,8 +30,8 @@
{{svg "octicon-code"}} {{if .IsNewFile}}{{.locale.Tr "repo.editor.new_file"}}{{else}}{{.locale.Tr "repo.editor.edit_file"}}{{end}} - {{if not .IsNewFile}} {{svg "octicon-eye"}} {{.locale.Tr "preview"}} + {{if not .IsNewFile}} {{svg "octicon-diff"}} {{.locale.Tr "repo.editor.preview_changes"}} {{end}}
diff --git a/web_src/js/features/codeeditor.js b/web_src/js/features/codeeditor.js index a36c8edb20881..28872218537d7 100644 --- a/web_src/js/features/codeeditor.js +++ b/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); }); From 9ff906a383f727d9181c1c4b116b65d3f93ad2c2 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 25 Mar 2023 20:43:02 +0100 Subject: [PATCH 09/11] simplify variable --- web_src/js/features/codeeditor.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/web_src/js/features/codeeditor.js b/web_src/js/features/codeeditor.js index 28872218537d7..f00f17e0c1355 100644 --- a/web_src/js/features/codeeditor.js +++ b/web_src/js/features/codeeditor.js @@ -153,10 +153,9 @@ function togglePreviewDisplay(previewable) { export async function createCodeEditor(textarea, filenameInput) { const filename = basename(filenameInput.value); - const previewableExts = (textarea.getAttribute('data-previewable-extensions') || '').split(','); - const previewableExtsSet = new Set(previewableExts); + const previewableExts = new Set((textarea.getAttribute('data-previewable-extensions') || '').split(',')); const lineWrapExts = (textarea.getAttribute('data-line-wrap-extensions') || '').split(','); - const previewable = previewableExtsSet.has(extname(filename)); + const previewable = previewableExts.has(extname(filename)); const editorConfig = getEditorconfig(filenameInput); togglePreviewDisplay(previewable); @@ -169,7 +168,7 @@ export async function createCodeEditor(textarea, filenameInput) { const debounceInputHandler = debounce(500, () => { const filename = filenameInput.value; - const previewable = previewableExtsSet.has(extname(filename)); + const previewable = previewableExts.has(extname(filename)); togglePreviewDisplay(previewable); updateEditor(monaco, editor, filename, lineWrapExts); }); From d12881272266e75b94ea0ca9ffd85ce59afbdb5d Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 25 Mar 2023 20:46:40 +0100 Subject: [PATCH 10/11] remove handler variable --- web_src/js/features/codeeditor.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/web_src/js/features/codeeditor.js b/web_src/js/features/codeeditor.js index f00f17e0c1355..11b7200d25fab 100644 --- a/web_src/js/features/codeeditor.js +++ b/web_src/js/features/codeeditor.js @@ -166,14 +166,12 @@ export async function createCodeEditor(textarea, filenameInput) { ...getEditorConfigOptions(editorConfig), }); - const debounceInputHandler = debounce(500, () => { + filenameInput.addEventListener('input', debounce(500, () => { const filename = filenameInput.value; const previewable = previewableExts.has(extname(filename)); togglePreviewDisplay(previewable); updateEditor(monaco, editor, filename, lineWrapExts); - }); - - filenameInput.addEventListener('input', debounceInputHandler); + })); return editor; } From 00e372dc017119b85abb55394f4950f1a2ba2629 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 25 Mar 2023 20:48:55 +0100 Subject: [PATCH 11/11] misc tweaks --- web_src/js/features/codeeditor.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/web_src/js/features/codeeditor.js b/web_src/js/features/codeeditor.js index 11b7200d25fab..40bc6d618f547 100644 --- a/web_src/js/features/codeeditor.js +++ b/web_src/js/features/codeeditor.js @@ -132,10 +132,9 @@ function getFileBasedOptions(filename, lineWrapExts) { } function togglePreviewDisplay(previewable) { - const previewTab = document.querySelector('a[data-tab=preview]'); - if (!previewTab) { - return; - } + 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); @@ -145,7 +144,7 @@ function togglePreviewDisplay(previewable) { // 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]'); + const writeTab = document.querySelector('a[data-tab="write"]'); writeTab.click(); } }