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

Copy Code Fix, added Copy Button & Download HTML button #57

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Copy Code Fix, added Copy Button & Download HTML button #57

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
17ec62b
Update PreviewModal.tsx
Woahai321 Nov 18, 2023
879b00e
Add copy button in code block
Woahai321 Nov 18, 2023
99b8a23
fixed constant and conditions
Woahai321 Nov 18, 2023
a572c0c
Update PreviewModal.tsx
Woahai321 Nov 19, 2023
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
78 changes: 71 additions & 7 deletions components/PreviewModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
"use client";

import { use, useEffect, useState } from "react";
import Prism from "prismjs";
import "prismjs/components/prism-cshtml";

import "prismjs/themes/prism-tomorrow.css";

export function PreviewModal({
Expand All @@ -14,6 +12,7 @@ export function PreviewModal({
setHtml: (html: string | null) => void;
}) {
const [activeTab, setActiveTab] = useState<"preview" | "code">("preview");
const [copySuccess, setCopySuccess] = useState(false);

useEffect(() => {
const highlight = async () => {
Expand All @@ -26,6 +25,26 @@ export function PreviewModal({
return null;
}

const downloadHtml = () => {
const blob = new Blob([html], { type: 'text/html' });
const url = URL.createObjectURL(blob);

const link = document.createElement('a');
link.href = url;
link.download = 'index.html';
link.click();
};

const copyToClipboard = () => {
navigator.clipboard.writeText(html || '').then(() => {
setCopySuccess(true);
setTimeout(() => {
setCopySuccess(false);
}, 2000);
});
};


return (
<div
onClick={(e) => {
Expand Down Expand Up @@ -55,9 +74,30 @@ export function PreviewModal({
>
Code
</TabButton>

<button
className="p-2 rounded-md hover:bg-gray-200 focus:outline-none focus:ring"
onClick={downloadHtml}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
className="w-6 h-6 text-gray-600"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
</button>

</div>

<button
<button
className="p-2 rounded-md hover:bg-gray-200 focus:outline-none focus:ring"
onClick={() => {
setHtml(null);
Expand All @@ -79,14 +119,38 @@ export function PreviewModal({
></path>
</svg>
</button>

</div>

{activeTab === "preview" ? (
<iframe className="w-full h-full" srcDoc={html} />
) : (
<pre className="overflow-auto p-4">
<code className="language-markup">{html}</code>
</pre>
<div className="overflow-auto relative">
<pre className="p-4" style={{ userSelect: 'text' }}>
<code className="language-markup">{html}</code>
</pre>
<button
className="absolute top-1 right-0 m-2 p-2 rounded-md bg-gray-900 hover:bg-gray-700 focus:outline-none focus:ring flex items-center"
onClick={copyToClipboard}
title="Copy to Clipboard"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="white"
viewBox="0 0 24 24"
stroke="currentColor"
className="w-5 h-5 text-gray-300"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1}
d="M2 4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-4H4a2 2 0 0 1-2-2V4zm8 12v4h10V10h-4v4a2 2 0 0 1-2 2h-4zm4-2V4H4v10h10z"
/>
</svg>
{copySuccess && <span className="text-white ml-2">Copied!</span>}
</button>
</div>
)}
</div>
);
Expand Down