Merge pull request #2589 from appwrite/feat-SER-418-revamp-copy-as-markdown

Author: TorstenDittmann

bun.lock

@@ -24,30 +24,30 @@
         "optimize:all": "bun ./scripts/optimize-all.js"
     },
     "dependencies": {
-        "@sentry/sveltekit": "^10.22.0",
+        "@sentry/sveltekit": "^10.28.0",
         "h3": "^1.15.4",
-        "sharp": "^0.34.4"
+        "sharp": "^0.34.5"
     },
     "devDependencies": {
         "@appwrite.io/console": "^0.6.4",
         "@appwrite.io/pink": "~0.26.0",
         "@appwrite.io/pink-icons": "~0.26.0",
         "@appwrite.io/repo": "github:appwrite/appwrite#aa98fbb2dc0e08def0a7cca7fe0515de643154ca",
-        "@eslint/compat": "^1.4.0",
-        "@eslint/js": "^9.36.0",
+        "@eslint/compat": "^1.4.1",
+        "@eslint/js": "^9.39.1",
         "@fingerprintjs/fingerprintjs": "^4.6.2",
         "@internationalized/date": "3.5.0",
         "@melt-ui/pp": "^0.3.2",
         "@melt-ui/svelte": "^0.86.6",
         "@number-flow/svelte": "^0.3.9",
-        "@playwright/test": "^1.56.1",
+        "@playwright/test": "^1.57.0",
         "@sveltejs/adapter-node": "^5.3.3",
-        "@sveltejs/enhanced-img": "^0.8.4",
-        "@sveltejs/kit": "^2.48.0",
+        "@sveltejs/enhanced-img": "^0.8.5",
+        "@sveltejs/kit": "^2.49.1",
         "@sveltejs/vite-plugin-svelte": "^6.2.1",
-        "@tailwindcss/postcss": "^4.1.16",
-        "@turf/boolean-point-in-polygon": "^7.2.0",
-        "@types/bun": "^1.3.1",
+        "@tailwindcss/postcss": "^4.1.17",
+        "@turf/boolean-point-in-polygon": "^7.3.1",
+        "@types/bun": "^1.3.3",
         "@types/compression": "^1.8.1",
         "@types/glob": "^8.1.0",
         "@types/jsdom": "^21.1.7",
@@ -65,17 +65,17 @@
         "embla-carousel-auto-scroll": "^8.6.0",
         "embla-carousel-svelte": "^8.6.0",
         "embla-carousel-wheel-gestures": "^8.1.0",
-        "eslint": "^9.36.0",
+        "eslint": "^9.39.1",
         "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-svelte": "^3.12.4",
+        "eslint-plugin-svelte": "^3.13.0",
         "fuse.js": "^7.1.0",
-        "globals": "^16.4.0",
+        "globals": "^16.5.0",
         "highlight.js": "^11.11.1",
         "linkedom": "^0.18.12",
         "markdown-it": "^14.1.0",
         "meilisearch": "^0.37.0",
         "melt": "^0.29.3",
-        "motion": "^12.23.24",
+        "motion": "^12.23.25",
         "motion-legacy": "npm:motion@^10.18.0",
         "node-appwrite": "^16.0.0",
         "node-fetch": "^3.3.2",
@@ -84,30 +84,30 @@
         "oslllo-svg-fixer": "^3.0.0",
         "plausible-tracker": "^0.3.9",
         "postcss": "^8.5.6",
-        "posthog-js": "^1.280.1",
+        "posthog-js": "^1.301.1",
         "posthog-node": "^4.18.0",
-        "prettier": "^3.6.2",
+        "prettier": "^3.7.4",
         "prettier-plugin-svelte": "^3.4.0",
-        "prettier-plugin-tailwindcss": "^0.7.1",
-        "proj4": "^2.19.10",
+        "prettier-plugin-tailwindcss": "^0.7.2",
+        "proj4": "^2.20.2",
         "remeda": "^2.32.0",
         "reodotdev": "^1.0.0",
-        "sass": "^1.93.2",
-        "svelte": "^5.42.2",
-        "svelte-check": "^4.3.3",
+        "sass": "^1.94.2",
+        "svelte": "^5.45.5",
+        "svelte-check": "^4.3.4",
         "svelte-markdoc-preprocess": "3.0.0",
         "svelte-markdown": "^0.4.1",
         "svg-dotted-map": "^2.0.1",
         "svgtofont": "^4.2.3",
-        "tailwind-merge": "^3.3.1",
-        "tailwindcss": "^4.1.16",
+        "tailwind-merge": "^3.4.0",
+        "tailwindcss": "^4.1.17",
         "tslib": "^2.8.1",
         "typescript": "^5.9.3",
-        "typescript-eslint": "^8.46.2",
+        "typescript-eslint": "^8.48.1",
         "vaul-svelte": "1.0.0-next.7",
-        "vite": "^7.1.19",
+        "vite": "^7.2.10",
         "vite-plugin-dynamic-import": "^1.6.0",
-        "vite-plugin-image-optimizer": "^2.0.2",
+        "vite-plugin-image-optimizer": "^2.0.3",
         "vite-plugin-manifest-sri": "^0.2.0",
         "vitest": "^3.2.4",
         "zod": "^3.25.76"

package.json

@@ -1,45 +1,119 @@
 <script lang="ts">
-    import { getContext } from 'svelte';
-    import { handleCopy } from '$lib/utils/copy';
+    import { page } from '$app/stores';
+    import { getPageMarkdown } from '$lib/remote/markdown.remote';
+    import { copyToClipboard } from '$lib/utils/copy';
     import { cn } from '$lib/utils/cn';
-    import { rawContent } from '$routes/docs/+layout.svelte';
+    import { writable } from 'svelte/store';
+    import { Button, Icon, SplitButton } from '$lib/components/ui';
+    import { Tooltip } from '$lib/components';
+    import { createDropdownMenu, melt } from '@melt-ui/svelte';
 
     interface CopyAsMarkdownProps {
         class?: string;
     }
 
-    const { copy, copied } = handleCopy($rawContent ?? '', 2000);
-
     const { class: classNames }: CopyAsMarkdownProps = $props();
+
+    const markdown = getPageMarkdown($page.route.id);
+    const copied = writable(false);
+    let timeout: ReturnType<typeof setTimeout> | undefined = undefined;
+
+    const copy = () => {
+        if (timeout) clearTimeout(timeout);
+        copyToClipboard(markdown.current ?? '');
+        copied.set(true);
+        timeout = setTimeout(() => copied.set(false), 2000);
+    };
+
+    const {
+        elements: { trigger, menu },
+        states: { open }
+    } = createDropdownMenu({
+        forceVisible: true,
+        positioning: { placement: 'bottom-end' }
+    });
+
+    const viewInNewTab = () => {
+        const { pathname } = window.location;
+        const url = pathname.endsWith('.md') ? pathname : `${pathname}.md`;
+        window.open(url, '_blank', 'noopener,noreferrer');
+    };
 </script>
 
-{#if $rawContent}
-    <button
-        class={cn(
-            'text-caption hover:text-accent text-secondary ml-4 flex cursor-pointer items-center gap-2.5 rounded-md p-1.5 transition-colors',
-            classNames
-        )}
-        onclick={copy}
-    >
-        <svg xmlns="http://www.w3.org/2000/svg" class="w-6" viewBox="0 0 208 128"
-            ><rect
-                width="198"
-                height="118"
-                x="5"
-                y="5"
-                ry="10"
-                stroke="currentColor"
-                stroke-width="10"
-                fill="none"
-            /><path
-                d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39zm125 0l-30-33h20V30h20v35h20z"
-                fill="currentColor"
-            />
-        </svg>
-        {#if $copied}
-            Copied
-        {:else}
-            Copy page as markdown
+{#if !markdown.loading && markdown.current}
+    <div class={cn('copy-ctl inline-flex items-center', classNames)}>
+        <SplitButton>
+            <Tooltip disabled={!$copied}>
+                <Button
+                    variant="secondary"
+                    onclick={copy}
+                    aria-label="Copy page as Markdown"
+                    splitPosition="first"
+                    class="text-sm"
+                >
+                    <Icon name="copy" aria-hidden="true" class="text-sm" />
+                    <span>Copy page</span>
+                </Button>
+                {#snippet tooltip()}
+                    Copied
+                {/snippet}
+            </Tooltip>
+
+            <button
+                class="web-button is-secondary is-split is-split-last text-sm"
+                use:melt={$trigger}
+                aria-label="Open options"
+            >
+                {#if $open}
+                    <span class="web-icon-chevron-up" aria-hidden="true"></span>
+                {:else}
+                    <span class="web-icon-chevron-down" aria-hidden="true"></span>
+                {/if}
+            </button>
+        </SplitButton>
+
+        {#if $open}
+            <div class="menu-wrapper web-select-menu is-normal menu z-1" use:melt={$menu}>
+                <ul class="text-sub-body">
+                    <li>
+                        <button type="button" class="menu-btn text-sm" onclick={copy}>
+                            <Icon name="copy" aria-hidden="true" class="text-sm" />
+                            <span>Copy as Markdown</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button type="button" class="menu-btn text-sm" onclick={viewInNewTab}>
+                            <Icon name="external-icon" aria-hidden="true" class="text-sm" />
+                            <span>View as Markdown</span>
+                        </button>
+                    </li>
+                </ul>
+            </div>
         {/if}
-    </button>
+    </div>
 {/if}
+
+<style>
+    .copy-ctl {
+        align-items: center;
+    }
+    .menu-wrapper {
+        padding: 4px;
+        z-index: 100;
+    }
+    .menu-btn {
+        height: 32px;
+        min-height: 32px;
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        border-radius: 0.5rem;
+        padding: 6px 8px;
+        width: 100%;
+        text-align: left;
+    }
+    .menu-btn:hover {
+        cursor: pointer;
+        background-color: hsl(var(--web-color-offset));
+    }
+</style>

pnpm-lock.yaml

@@ -81,5 +81,4 @@
             style:transform={`translateY(${position}px)`}
         ></div>
     </div>
-    <CopyAsMarkdown />
 </nav>

src/icons/optimized/external-icon.svg

@@ -16,11 +16,14 @@
     });
 
     export type Variant = VariantProps<typeof button>['variant'];
+    export type SplitPosition = 'first' | 'middle' | 'last' | 'only';
+    export const BUTTON_SPLIT_CONTEXT = Symbol('button-split-context');
 </script>
 
 <script lang="ts">
     import type { Snippet } from 'svelte';
     import type { Action } from 'svelte/action';
+    import { getContext } from 'svelte';
     import { cn } from '$lib/utils/cn';
     import { trackEvent, type TrackEventArgs } from '$lib/actions/analytics';
     import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
@@ -33,6 +36,7 @@
         action?: Action;
         children: Snippet;
         event?: string | TrackEventArgs;
+        splitPosition?: SplitPosition;
     } & VariantProps<typeof button> &
         ButtonOrAnchorProps;
 
@@ -43,10 +47,17 @@
         children,
         class: classes,
         event,
+        splitPosition,
         ...rest
     }: Props = $props();
 
-    const buttonClasses = cn(button({ variant }), classes);
+    const isSplit = getContext<boolean>(BUTTON_SPLIT_CONTEXT);
+    const splitClasses = isSplit
+        ? splitPosition
+            ? `is-split is-split-${splitPosition}`
+            : 'is-split'
+        : '';
+    const buttonClasses = cn(button({ variant }), splitClasses, classes);
 </script>
 
 {#if href}