feature(web): Add syntax highlighting to code blocks and a quick copy button. Fixes #195 (#197)

* Any plans to support copy to clipboard (markdown code) for notes? #195
added a button to copy the markdown and added code highlighting

* Any plans to support copy to clipboard (markdown code) for notes? #195
Changed the copy-button to a generic one
added a safeguard and a message to the copy button if copying is not possible

* Some code cleanups

---------

Co-authored-by: kamtschatka <simon.schatka@gmx.at>
Co-authored-by: MohamedBassem <me@mbassem.com>

1 files changed, 37 insertions, 0 deletions

diff --git a/apps/web/components/ui/copy-button.tsx b/apps/web/components/ui/copy-button.tsx
new file mode 100644
index 00000000..a51ce902
--- /dev/null
+++ b/apps/web/components/ui/copy-button.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";

+import { Check, Copy } from "lucide-react";

+

+export default function CopyBtn({

+  className,

+  getStringToCopy,

+}: {

+  className?: string;

+  getStringToCopy: () => string;

+}) {

+  const [copyOk, setCopyOk] = React.useState(false);

+  const [disabled, setDisabled] = React.useState(false);

+  useEffect(() => {

+    if (!navigator || !navigator.clipboard) {

+      setDisabled(true);

+    }

+  });

+

+  const handleClick = async () => {

+    await navigator.clipboard.writeText(getStringToCopy());

+    setCopyOk(true);

+    setTimeout(() => {

+      setCopyOk(false);

+    }, 2000);

+  };

+

+  return (

+    <button

+      className={className}

+      onClick={handleClick}

+      disabled={disabled}

+      title={disabled ? "Copying is only available over https" : undefined}

+    >

+      {copyOk ? <Check /> : <Copy />}

+    </button>

+  );

+}