add close button to modal

src/client/app/composables/codeModal.ts

@@ -18,6 +18,17 @@ export function useCodeModal() {
         sibling.classList.add('open')
       }
 
+      if (
+        el.matches('div[class*="language-"] div.modal-container button.close')
+      ) {
+        const parent = el.parentElement?.parentElement
+        if (!parent) {
+          return
+        }
+
+        parent.classList.remove('open')
+      }
+
       if (el.matches('div[class*="language-"] > div.modal-container')) {
         el.classList.remove('open')
       }

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

@@ -430,7 +430,8 @@
 }
 
 .vp-doc [class*='language-'] > button.copy,
-.vp-doc [class*='language-'] > button.modal {
+.vp-doc [class*='language-'] > button.modal,
+.vp-doc [class*='language-'] > button.close {
   /*rtl:ignore*/
   direction: ltr;
   position: absolute;
@@ -460,6 +461,11 @@
   background-image: var(--vp-icon-expand);
 }
 
+.vp-doc [class*='language-'] > button.close {
+  top: 64px;
+  background-image: var(--vp-icon-close);
+}
+
 .vp-doc
   [class*='language-']:hover:not(:has(.modal-container:hover))
   > button.copy,
@@ -467,13 +473,18 @@
 .vp-doc
   [class*='language-']:hover:not(:has(.modal-container:hover))
   > button.modal,
-.vp-doc [class*='language-'] > button.modal:focus {
+.vp-doc [class*='language-'] > button.modal:focus,
+.vp-doc
+  [class*='language-']:hover:not(:has(.modal-container:hover))
+  > button.close,
+.vp-doc [class*='language-'] > button.close:focus {
   opacity: 1;
 }
 
 .vp-doc [class*='language-'] > button.copy:hover,
 .vp-doc [class*='language-'] > button.copy.copied,
-.vp-doc [class*='language-'] > button.modal:hover {
+.vp-doc [class*='language-'] > button.modal:hover,
+.vp-doc [class*='language-'] > button.close:hover {
   border-color: var(--vp-code-copy-code-hover-border-color);
   background-color: var(--vp-code-copy-code-hover-bg);
 }

src/client/theme-default/styles/icons.css

@@ -89,6 +89,8 @@
   --vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
 
   --vp-icon-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m21 21-6-6m6 6v-4.8m0 4.8h-4.8'/%3E%3Cpath d='M3 16.2V21m0 0h4.8M3 21l6-6'/%3E%3Cpath d='M21 7.8V3m0 0h-4.8M21 3l-6 6'/%3E%3Cpath d='M3 7.8V3m0 0h4.8M3 3l6 6'/%3E%3C/svg%3E");
+
+  --vp-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3'/%3E%3Cpath d='M21 8h-3a2 2 0 0 1-2-2V3'/%3E%3Cpath d='M3 16h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M16 21v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E");
 }
 
 /* social icons - used under CC0 1.0 from https://simpleicons.org/ */

src/node/markdown/plugins/codeModal.ts

@@ -23,14 +23,19 @@ export const codeModalPlugin = (
       return rawCode
     }
 
-    const code =
+    let end = rawCode.lastIndexOf('</div>')
+
+    let innerCode =
+      rawCode.substring(0, end) +
+      `<button title="${options.codeModalButtonTitle}" class="close"></button>` +
+      '</div>'
+
+    const modal =
       `<button title="${options.codeModalButtonTitle}" class="modal"></button>` +
       '<div class="modal-container">' +
-      fence(...args) +
+      innerCode +
       '</div>'
 
-    let end = rawCode.lastIndexOf('</div>')
-
-    return rawCode.substring(0, end) + code + '</div>'
+    return rawCode.substring(0, end) + modal + '</div>'
   }
 }