Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Any plans to support copy to clipboard (markdown code) for notes? #195 #197

Merged
merged 3 commits into from
Jun 9, 2024
Merged

Any plans to support copy to clipboard (markdown code) for notes? #195 #197

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
573052b
Any plans to support copy to clipboard (markdown code) for notes? #195
kamtschatka Jun 5, 2024
5258c68
Any plans to support copy to clipboard (markdown code) for notes? #195
kamtschatka Jun 8, 2024
7a37bae
Some code cleanups
MohamedBassem Jun 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/mobile/components/bookmarks/BookmarkCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,7 @@ function TextCard({ bookmark }: { bookmark: ZBookmark }) {
throw new Error("Wrong content type rendered");
}
const content = bookmark.content.text;
// TODO: replace this markdown also? I am not really sure how to test if everything still works
kamtschatka marked this conversation as resolved.
Show resolved Hide resolved
return (
<View className="flex max-h-96 gap-2 p-2">
{bookmark.title && (
Expand Down
9 changes: 3 additions & 6 deletions apps/web/components/dashboard/bookmarks/TextCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
"use client";

import { useState } from "react";
import { MarkdownComponent } from "@/components/ui/markdown-component";
import { api } from "@/lib/trpc";
import { bookmarkLayoutSwitch } from "@/lib/userLocalSettings/bookmarksLayout";
import { cn } from "@/lib/utils";
import Markdown from "react-markdown";

import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
import { isBookmarkStillTagging } from "@hoarder/shared-react/utils/bookmarkUtils";
Expand Down Expand Up @@ -45,18 +45,15 @@ export default function TextCard({

return (
<>
{/* TODO: Where is that used? Is it simply unused?*/}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the bookmark card shown in the BookmarkGrid.

Screenshot 2024-06-07 at 11 03 14 AM

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the thing is, if I remove the BookmarkedTextViewer, nothing changes, so I am not quite sure what it does?
Hovering the element in the React Extension does not highlight it either and previewModalOpen is only bound to this component, nothing else, so I don't think that value can actually change?

<BookmarkedTextViewer
content={bookmarkedText.text}
open={previewModalOpen}
setOpen={setPreviewModalOpen}
/>
<BookmarkLayoutAdaptingCard
title={bookmark.title}
content={
<Markdown className="prose dark:prose-invert">
{bookmarkedText.text}
</Markdown>
}
content={<MarkdownComponent>{bookmarkedText.text}</MarkdownComponent>}
footer={null}
wrapTags={true}
bookmark={bookmark}
Expand Down
6 changes: 2 additions & 4 deletions apps/web/components/dashboard/preview/TextContentSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { MarkdownComponent } from "@/components/ui/markdown-component";
import { ScrollArea } from "@radix-ui/react-scroll-area";
import Markdown from "react-markdown";

import type { ZBookmark } from "@hoarder/shared/types/bookmarks";

Expand All @@ -9,9 +9,7 @@ export function TextContentSection({ bookmark }: { bookmark: ZBookmark }) {
}
return (
<ScrollArea className="h-full">
<Markdown className="prose mx-auto dark:prose-invert">
{bookmark.content.text}
</Markdown>
<MarkdownComponent>{bookmark.content.text}</MarkdownComponent>
</ScrollArea>
);
}
40 changes: 40 additions & 0 deletions apps/web/components/ui/code-copy-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import React from "react";
import { Copy, CopyCheck } from "lucide-react";

function getStringToCopy(child: React.ReactNode): string {
if (
React.isValidElement(child) &&
"props" in child &&
"children" in child.props
) {
const element = child as React.ReactElement<{ children: string }>;
return element.props.children;
}
return "";
}

export default function CodeCopyBtn({
kamtschatka marked this conversation as resolved.
Show resolved Hide resolved
children: child,
}: {
children: React.ReactNode;
}) {
const [copyOk, setCopyOk] = React.useState(false);

const handleClick = async () => {
await navigator.clipboard.writeText(getStringToCopy(child));
kamtschatka marked this conversation as resolved.
Show resolved Hide resolved
setCopyOk(true);
setTimeout(() => {
setCopyOk(false);
}, 500);
};

return (
<div className="absolute right-2 top-2 transform cursor-pointer text-xl text-white transition-all duration-300 ease-in-out hover:scale-110 hover:opacity-90">
kamtschatka marked this conversation as resolved.
Show resolved Hide resolved
{copyOk ? (
<CopyCheck onClick={handleClick}></CopyCheck>
) : (
<Copy onClick={handleClick}></Copy>
)}
</div>
);
}
46 changes: 46 additions & 0 deletions apps/web/components/ui/markdown-component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from "react";
import CodeCopyBtn from "@/components/ui/code-copy-button";
import Markdown from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { dracula } from "react-syntax-highlighter/dist/cjs/styles/prism";

export function MarkdownComponent({
children: markdown,
}: {
children: string;
}) {
const Pre = ({ children }: { children?: React.ReactNode }) => (
<pre className="relative mx-auto mb-12 shadow-lg">
<CodeCopyBtn>{children}</CodeCopyBtn>
kamtschatka marked this conversation as resolved.
Show resolved Hide resolved
{children}
</pre>
);
return (
<Markdown
className="prose mx-auto dark:prose-invert"
components={{
pre: Pre,
code({ className, children, ...props }) {
const match = /language-(\w+)/.exec(className ?? "");
return match ? (
// @ts-expect-error i have absolutely no idea what it complains about and passing refs to it also does not solve it
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the error you're getting?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

Types of property ref are incompatible.
Type LegacyRef<HTMLElement> | undefined is not assignable to type LegacyRef<SyntaxHighlighter> | undefined

Types of property ref are incompatible.
Type LegacyRef<HTMLElement> | undefined is not assignable to type LegacyRef<SyntaxHighlighter> | undefined
Type (instance: HTMLElement | null) => void is not assignable to type LegacyRef<SyntaxHighlighter> | undefined
Type (instance: HTMLElement | null) => void is not assignable to type (instance: SyntaxHighlighter | null) => void
Types of parameters instance and instance are incompatible.
Type SyntaxHighlighter | null is not assignable to type HTMLElement | null
Type Component<SyntaxHighlighterProps, {}, any> is missing the following properties from type HTMLElement:
accessKey, accessKeyLabel, autocapitalize, dir
, and 290 more.

<SyntaxHighlighter
PreTag="div"
language={match[1]}
{...props}
style={dracula}
>
{String(children).replace(/\n$/, "")}
</SyntaxHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
}}
>
{markdown}
</Markdown>
);
}
2 changes: 2 additions & 0 deletions apps/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
"react-markdown": "^9.0.1",
"react-masonry-css": "^1.0.16",
"react-select": "^5.8.0",
"react-syntax-highlighter": "^15.5.0",
"sharp": "^0.33.3",
"superjson": "^2.2.1",
"tailwind-merge": "^2.2.1",
Expand All @@ -76,6 +77,7 @@
"@types/emoji-mart": "^3.0.14",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"@types/react-syntax-highlighter": "^15.5.13",
"autoprefixer": "^10.4.17",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
Expand Down
Loading
Loading