Add markdown code blog wrap toggle

Fixes: #35314

Author: silverwind

options/locale/locale_en-US.ini

@@ -115,6 +115,8 @@ preview = Preview
 loading = Loading…
 files = Files
 
+code_toggle_wrap = Toggle Code Wrap
+
 error = Error
 error404 = The page you are trying to reach either <strong>does not exist</strong> or <strong>you are not authorized</strong> to view it.
 error503 = The server could not complete your request. Please try again later.

public/assets/img/svg/material-wrap-text.svg

@@ -33,6 +33,7 @@ If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly.
 		mermaidMaxSourceCharacters: {{MermaidMaxSourceCharacters}},
 		{{/* this global i18n object should only contain general texts. for specialized texts, it should be provided inside the related modules by: (1) API response (2) HTML data-attribute (3) PageData */}}
 		i18n: {
+			copy: {{ctx.Locale.Tr "copy"}},
 			copy_success: {{ctx.Locale.Tr "copy_success"}},
 			copy_error: {{ctx.Locale.Tr "copy_error"}},
 			error_occurred: {{ctx.Locale.Tr "error.occurred"}},
@@ -41,6 +42,7 @@ If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly.
 			modal_confirm: {{ctx.Locale.Tr "modal.confirm"}},
 			modal_cancel: {{ctx.Locale.Tr "modal.cancel"}},
 			more_items: {{ctx.Locale.Tr "more_items"}},
+			code_toggle_wrap: {{ctx.Locale.Tr "code_toggle_wrap"}},
 		},
 	};
 	{{/* in case some pages don't render the pageData, we make sure it is an object to prevent null access */}}

templates/base/head_script.tmpl

@@ -44,7 +44,7 @@
 @import "./features/console.css";
 
 @import "./markup/content.css";
-@import "./markup/codecopy.css";
+@import "./markup/codeblocks.css";
 @import "./markup/codepreview.css";
 @import "./markup/asciicast.css";
 

web_src/css/index.css

@@ -0,0 +1,35 @@
+.markup .code-block-buttons {
+  position: absolute;
+  top: 8px;
+  right: 6px;
+  display: flex;
+  gap: 4px;
+  visibility: hidden;
+  animation: fadeout 0.2s both;
+}
+
+/* adjustments for comment content having only 14px font size */
+.repository.view.issue .comment-list .comment .markup .code-copy {
+  right: 5px;
+  padding: 8px;
+}
+
+.markup .code-block-buttons .btn {
+  background: var(--color-button) !important;
+  padding: 9px;
+  border: 1px solid var(--color-light-border);
+}
+
+.markup .code-block-buttons .btn:hover {
+  background: var(--color-hover-opaque) !important;
+}
+
+.markup .code-block-buttons .btn[data-active="false"] {
+  color: var(--color-text-light-3);
+}
+
+.markup .code-block-container:hover .code-block-buttons,
+.markup .code-block:hover .code-block-buttons {
+  visibility: visible;
+  animation: fadein 0.2s both;
+}

web_src/css/markup/codeblocks.css

@@ -52,7 +52,7 @@ interface Element {
 
 interface Window {
   __webpack_public_path__: string;
-  config: import('./web_src/js/types.ts').Config;
+  config: import('./types.ts').Config;
   $: typeof import('@types/jquery'),
   jQuery: typeof import('@types/jquery'),
   htmx: typeof import('htmx.org').default,

web_src/css/markup/codecopy.css

@@ -0,0 +1,51 @@
+import {svg, type SvgName} from '../svg.ts';
+import {queryElems, type DOMEvent} from '../utils/dom.ts';
+
+export function makeCodeBlockButton(className: string, name: SvgName): HTMLButtonElement {
+  const button = document.createElement('button');
+  button.classList.add(className, 'btn');
+  button.innerHTML = svg(name, 14);
+  return button;
+}
+
+const getMarkupCodeWrap = () => (localStorage.getItem('wrap-markup-code') || 'false') === 'true';
+const setMarkupCodeWrap = (value: boolean) => localStorage.setItem('wrap-markup-code', String(value));
+
+function updateWrap(container: Element, wrap: boolean) {
+  container.classList.remove(wrap ? 'code-overflow-scroll' : 'code-overflow-wrap');
+  container.classList.add(wrap ? 'code-overflow-wrap' : 'code-overflow-scroll');
+}
+
+export function initMarkupCodeBlocks(elMarkup: HTMLElement): void {
+  // .markup .code-block code
+  queryElems(elMarkup, '.code-block code', (el) => {
+    if (!el.textContent) return;
+
+    const copyBtn = makeCodeBlockButton('code-copy', 'octicon-copy');
+    copyBtn.setAttribute('data-tooltip-content', window.config.i18n.copy);
+    // remove final trailing newline introduced during HTML rendering
+    copyBtn.setAttribute('data-clipboard-text', el.textContent.replace(/\r?\n$/, ''));
+
+    // we only want to use `.code-block-container` if it exists, no matter `.code-block` exists or not.
+    const container = el.closest('.code-block-container') ?? el.closest('.code-block');
+
+    const wrapBtn = makeCodeBlockButton('code-wrap', 'material-wrap-text');
+    const wrap = getMarkupCodeWrap();
+    wrapBtn.setAttribute('data-active', String(wrap));
+    updateWrap(container, wrap);
+
+    wrapBtn.setAttribute('data-tooltip-content', window.config.i18n.code_toggle_wrap);
+    wrapBtn.addEventListener('click', (e) => {
+      const wrap = !getMarkupCodeWrap();
+      updateWrap(container, wrap);
+      (e.currentTarget as HTMLButtonElement).setAttribute('data-active', String(wrap));
+      setMarkupCodeWrap(wrap);
+    });
+
+    const btnContainer = document.createElement('div');
+    btnContainer.classList.add('code-block-buttons');
+    btnContainer.append(wrapBtn);
+    btnContainer.append(copyBtn);
+    container.append(btnContainer);
+  });
+}

web_src/js/globals.d.ts

@@ -1,14 +1,14 @@
 import {initMarkupCodeMermaid} from './mermaid.ts';
 import {initMarkupCodeMath} from './math.ts';
-import {initMarkupCodeCopy} from './codecopy.ts';
+import {initMarkupCodeBlocks} from './codeblocks.ts';
 import {initMarkupRenderAsciicast} from './asciicast.ts';
 import {initMarkupTasklist} from './tasklist.ts';
 import {registerGlobalSelectorFunc} from '../modules/observer.ts';
 
 // code that runs for all markup content
 export function initMarkupContent(): void {
   registerGlobalSelectorFunc('.markup', (el: HTMLElement) => {
-    initMarkupCodeCopy(el);
+    initMarkupCodeBlocks(el);
     initMarkupTasklist(el);
     initMarkupCodeMermaid(el);
     initMarkupCodeMath(el);