wip

Author: ToBinio

src/client/app/composables/copyCode.ts

@@ -7,7 +7,8 @@ export function useCopyCode() {
       const el = e.target as HTMLElement
       if (el.matches('div[class*="language-"] > button.copy')) {
         const parent = el.parentElement
-        const sibling = el.nextElementSibling?.nextElementSibling
+        const sibling =
+          el.nextElementSibling?.nextElementSibling?.nextElementSibling
         if (!parent || !sibling) {
           return
         }
@@ -41,6 +42,17 @@ export function useCopyCode() {
           timeoutIdMap.set(el, timeoutId)
         })
       }
+
+      if (el.matches('div[class*="language-"] > button.modal')) {
+        const parent = el.parentElement
+        const sibling = el.nextElementSibling?.nextElementSibling
+          ?.nextElementSibling as HTMLDialogElement
+        if (!parent || !sibling) {
+          return
+        }
+
+        sibling.showModal()
+      }
     })
   }
 }

src/client/theme-default/styles/components/vp-doc.css

@@ -454,8 +454,35 @@
     opacity 0.25s;
 }
 
+.vp-doc [class*='language-'] > button.modal {
+  /*rtl:ignore*/
+  direction: ltr;
+  position: absolute;
+  top: 64px;
+  /*rtl:ignore*/
+  right: 12px;
+  z-index: 3;
+  border: 1px solid var(--vp-code-copy-code-border-color);
+  border-radius: 4px;
+  width: 40px;
+  height: 40px;
+  background-color: var(--vp-code-copy-code-bg);
+  opacity: 0;
+  cursor: pointer;
+  background-image: var(--vp-icon-copy);
+  background-position: 50%;
+  background-size: 20px;
+  background-repeat: no-repeat;
+  transition:
+    border-color 0.25s,
+    background-color 0.25s,
+    opacity 0.25s;
+}
+
 .vp-doc [class*='language-']:hover > button.copy,
-.vp-doc [class*='language-'] > button.copy:focus {
+.vp-doc [class*='language-'] > button.copy:focus,
+.vp-doc [class*='language-']:hover > button.modal,
+.vp-doc [class*='language-'] > button.modal:focus {
   opacity: 1;
 }
 

src/node/markdown/plugins/preWrapper.ts

@@ -22,8 +22,12 @@ export function preWrapperPlugin(md: MarkdownIt, options: Options) {
     return (
       `<div class="language-${lang}${getAdaptiveThemeMarker(options)}${active}">` +
       `<button title="${options.codeCopyButtonTitle}" class="copy"></button>` +
+      `<button title="${options.codeCopyButtonTitle}" class="modal"></button>` +
       `<span class="lang">${lang}</span>` +
       fence(...args) +
+      '<dialog>' +
+      fence(...args) +
+      '</dialog>' +
       '</div>'
     )
   }