79b1e9c Add clipboard button to code blocks — radicle-explorer

Radicle web interface

Add clipboard button to code blocks

Sebastian Martinez committed 2 years ago

commit 79b1e9c9f8fa6f52c8c9f976c5077e682d6ee5a1
parent 905b933e4a4a41122e314082d325c373a2ef9fe0

3 files changed +28 -0

modified src/components/Clipboard.svelte

@@ -1,3 +1,5 @@

 <svelte:options customElement="radicle-clipboard" />
 <script lang="ts" strictEvents>
   import debounce from "lodash/debounce";
   import { createEventDispatcher } from "svelte";

modified src/components/Markdown.svelte

@@ -135,6 +135,12 @@

     const treeChanges: Promise<void>[] = [];
     for (const node of nodes) {
       const preElement = node.parentElement as HTMLElement;
       const copyButton = document.createElement("radicle-clipboard");
       copyButton.setAttribute("text", node.textContent || "");
       copyButton.setAttribute("small", "");
       preElement.prepend(copyButton);
       const className = Array.from(node.classList).find(name =>
         name.startsWith(prefix),
       );

@@ -196,6 +202,22 @@

     border-bottom: 1px solid var(--color-border-hint);
   }
   .markdown :global(radicle-clipboard) {
     display: none;
     position: absolute;
     right: 0.5rem;
     top: 0.5rem;
   }
   .markdown :global(radicle-clipboard) {
     background-color: var(--color-fill-ghost);
     border-radius: var(--border-radius-small);
   }
   .markdown :global(pre:hover radicle-clipboard) {
     display: flex;
   }
   .markdown :global(h3) {
     font-size: calc(var(--font-size-medium) * 0.9);
     font-weight: var(--font-weight-semibold);

@@ -268,6 +290,7 @@

   }
   .markdown :global(pre) {
     position: relative;
     font-family: var(--font-family-monospace);
     font-size: var(--font-size-regular);
     background-color: var(--color-fill-ghost);

modified svelte.config.js

@@ -2,4 +2,7 @@ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

 export default {
   preprocess: vitePreprocess(),
   compilerOptions: {
     customElement: true,
   },
 };