Add code copy buttons using 'markdown-it-copy' plugin

package.json

@@ -16,6 +16,7 @@
     "@viz-js/viz": "^3.11.0",
     "ansi_up": "^6.0.2",
     "axios": "^1.7.9",
+    "clipboard": "^2.0.11",
     "express": "^4.21.2",
     "glob": "11.0.1",
     "highlight.js": "^11.11.1",

src/parser/copycode.ts

@@ -0,0 +1,30 @@
+import MarkdownIt from 'markdown-it';
+import octicons from '@primer/octicons';
+
+const copyIcon = octicons['copy'].toSVG({ class: 'icon-copy' });
+const checkIcon = octicons['check'].toSVG({ class: 'icon-check' });
+const xIcon = octicons['x'].toSVG({ class: 'icon-x' });
+
+export default function copycode(md: MarkdownIt) {
+    const defaultRender = md.renderer.rules.fence!;
+    md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+        const renderedPreBlock = defaultRender(tokens, idx, options, env, self);
+        const content = tokens[idx].content;
+        return `
+<div class="pre-wrapper" style="position: relative">
+    ${renderedPreBlock}
+    <div class="copy-wrapper">
+        <button class="copy-button" data-clipboard-text="${content.replaceAll('"', '&quot;')}">
+            ${copyIcon}
+        </button>
+        <div class="copy-success">
+            ${checkIcon}
+        </div>
+        <div class="copy-fail">
+            ${xIcon}
+        </div>
+    </div>
+</div>
+`;
+    };
+}

src/parser/markdown.ts

@@ -1,5 +1,6 @@
 import MarkdownIt from 'markdown-it';
 import anchor from 'markdown-it-anchor';
+import copycode from './copycode.js';
 import frontMatter from 'markdown-it-front-matter';
 import highlight from './highlight.js';
 import graphviz from './dot.js';
@@ -68,6 +69,7 @@ mdit.use(anchor, {
         placement: 'before',
     }),
 });
+mdit.use(copycode);
 mdit.use(graphviz);
 mdit.use(githubAlerts);
 mdit.use(mermaid);

src/routes/viewer.ts

@@ -88,6 +88,7 @@ router.get(/.*/, async (req: Request, res: Response) => {
             </script>
             ${config.scripts ? `<script type="text/javascript">${config.scripts}</script>` : ''}
             <script type="module" src="/static/client.mjs"></script>
+            <script type="text/javascript" src="/static/clipboard/clipboard.min.js"></script>
         </html>
     `);
 });

static/client.mjs

@@ -67,3 +67,33 @@ ws.addEventListener('message', async (event) => {
 ws.addEventListener('open', () => {
     ws.send(`PATH: ${window.VIV_PATH}`);
 });
+
+/* --------------------------------------------------------------------------
+ * COPY CODE BUTTONS -------------------------------------------------------- */
+
+document.querySelectorAll('.copy-success, .copy-fail').forEach((element) => {
+    element.style.display = 'none';
+});
+
+const Notify = {
+    Success: '.copy-success',
+    Fail: '.copy-fail',
+};
+
+let clipboard = new ClipboardJS('.copy-button');
+
+clipboard.on('success', function (e) {
+    showNotification(e.trigger, Notify.Success);
+});
+
+clipboard.on('error', function (e) {
+    showNotification(e.trigger, Notify.Fail);
+});
+
+function showNotification(btn, notify) {
+    const notificationElement = btn.parentElement.querySelector(notify);
+    notificationElement.style.display = 'flex';
+    setTimeout(() => {
+        notificationElement.style.display = 'none';
+    }, 2000);
+}

static/clipboard

@@ -0,0 +1 @@
+../node_modules/clipboard/dist/

static/colors.css

@@ -19,6 +19,13 @@
     --icon-file: var(--text-secondary);
     --icon-back: var(--text-secondary);
 
+    --copy-button-fg: #aaa;
+    --copy-button-bg: #333;
+    --copy-success-fg: #ddffcc;
+    --copy-success-bg: #5c993d;
+    --copy-fail-fg: #ffcccc;
+    --copy-fail-bg: #993d3d;
+
     --syntax-text: var(--text-primary);
     --syntax-keyword: #aed7ff;
     --syntax-entity: #aeafff;
@@ -69,6 +76,13 @@
         --icon-file: #636c76;
         --icon-back: var(--text-secondary);
 
+        --copy-button-fg: #1f2328;
+        --copy-button-bg: #e7e9eb;
+        --copy-success-fg: #154000;
+        --copy-success-bg: #c7e6b8;
+        --copy-fail-fg: #400000;
+        --copy-fail-bg: #e6b8b8;
+
         /* source for light mode syntax theme:
          * https://github.com/highlightjs/highlight.js/blob/main/src/styles/github.css
          * */

static/markdown.css

@@ -180,6 +180,50 @@ blockquote {
     color: var(--alert-caution);
 }
 
+/* --------------------------------------------------------------------------
+ * COPY-CODE-BUTTON --------------------------------------------------------- */
+
+.copy-wrapper {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+}
+.copy-button, .copy-success, .copy-fail {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 2rem;
+    width: 2rem;
+    padding: 0.4rem;
+    border: 0;
+    border-radius: 0.4rem;
+    background: none;
+    fill: var(--copy-button-fg);
+    cursor: pointer;
+    transition: opacity 0.2s, background 0.2s;
+}
+.copy-button {
+    opacity: 0;
+}
+pre:hover + .copy-wrapper > .copy-button {
+    opacity: 0.3;
+}
+.copy-button:hover {
+    opacity: 1;
+    background-color: var(--copy-button-bg);
+}
+.copy-success {
+    background: var(--copy-success-bg);
+    fill: var(--copy-success-fg);
+}
+.copy-fail {
+    background: var(--copy-fail-bg);
+    fill: var(--copy-fail-fg);
+}
+
 /* --------------------------------------------------------------------------
  * MISCELLANEOUS ------------------------------------------------------------ */
 

yarn.lock

@@ -1174,6 +1174,15 @@ chrome-trace-event@^1.0.2:
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz#05bffd7ff928465093314708c93bdfa9bd1f0f5b"
   integrity sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==
 
+clipboard@^2.0.11:
+  version "2.0.11"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.11.tgz#62180360b97dd668b6b3a84ec226975762a70be5"
+  integrity sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 clone-deep@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
@@ -1649,6 +1658,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@@ -2145,6 +2159,13 @@ globals@^15.14.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-15.14.0.tgz#b8fd3a8941ff3b4d38f3319d433b61bbb482e73f"
   integrity sha512-OkToC372DtlQeje9/zHIo5CT8lRP/FUgEOKBEhU4e0abL7J7CD24fD9ohiLN5hagG/kWCYj4K5oaxxtj2Z0Dig==
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==
+  dependencies:
+    delegate "^3.1.2"
+
 gopd@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
@@ -3120,6 +3141,11 @@ schema-utils@^3.1.1, schema-utils@^3.2.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==
+
 semver@^7.3.4, semver@^7.5.0, semver@^7.5.3, semver@^7.6.0:
   version "7.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.1.tgz#abd5098d82b18c6c81f6074ff2647fd3e7220c9f"
@@ -3378,6 +3404,11 @@ terser@^5.26.0:
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 tinyexec@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-0.3.2.tgz#941794e657a85e496577995c6eef66f53f42b3d2"