Skip to content

Commit fd9daf8

Browse files
simonwsimonw
authored
Create paste-rich-text.html
https://claude.ai/share/91ca3daa-de03-4122-8065-c44e5881f12f
1 parent cc111b5 commit fd9daf8

File tree

1 file changed

+182
-0
lines changed

1 file changed

+182
-0
lines changed

‎paste-rich-text.html

+182
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Rich Text HTML Extractor</title>
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
body {
13+
font-family: Helvetica, Arial, sans-serif;
14+
max-width: 800px;
15+
margin: 0 auto;
16+
padding: 20px;
17+
}
18+
19+
h1, h2 {
20+
font-weight: 500;
21+
}
22+
23+
#paste-area {
24+
width: 100%;
25+
height: 150px;
26+
margin-bottom: 15px;
27+
border: 1px solid #ccc;
28+
padding: 10px;
29+
background-color: #f5f5f5;
30+
font-size: 16px;
31+
font-family: Helvetica, Arial, sans-serif;
32+
}
33+
34+
#output-container {
35+
display: none;
36+
}
37+
38+
#html-output {
39+
width: 100%;
40+
height: 250px;
41+
margin-bottom: 15px;
42+
border: 1px solid #ccc;
43+
padding: 10px;
44+
background-color: #fff;
45+
font-size: 16px;
46+
font-family: monospace;
47+
white-space: pre-wrap;
48+
overflow-x: auto;
49+
}
50+
51+
#preview-container {
52+
margin-top: 20px;
53+
border: 1px solid #ddd;
54+
padding: 15px;
55+
background-color: #fff;
56+
}
57+
58+
.button {
59+
padding: 8px 15px;
60+
cursor: pointer;
61+
background-color: #4285f4;
62+
color: white;
63+
border: none;
64+
border-radius: 4px;
65+
font-size: 16px;
66+
margin-right: 10px;
67+
transition: background-color 0.2s;
68+
}
69+
70+
.button:hover {
71+
background-color: #3367d6;
72+
}
73+
74+
.info-text {
75+
color: #666;
76+
font-style: italic;
77+
margin-bottom: 10px;
78+
}
79+
80+
@media (max-width: 600px) {
81+
body {
82+
padding: 10px;
83+
}
84+
85+
#paste-area, #html-output {
86+
height: 180px;
87+
}
88+
}
89+
</style>
90+
</head>
91+
<body>
92+
<h1>Rich text HTML extractor</h1>
93+
<p>Copy formatted text from a webpage and paste here to extract the HTML:</p>
94+
95+
<div id="paste-area" contenteditable="true"></div>
96+
<p class="info-text">Paste using Ctrl+V or ⌘+V to capture the rich text HTML</p>
97+
98+
<div id="output-container">
99+
<h2>HTML code</h2>
100+
<textarea id="html-output" readonly></textarea>
101+
102+
<button id="copy-button" class="button">Copy HTML</button>
103+
<button id="clear-button" class="button">Clear all</button>
104+
105+
<div id="preview-container">
106+
<h2>Preview</h2>
107+
<div id="preview-content"></div>
108+
</div>
109+
</div>
110+
111+
<script type="module">
112+
// Function to escape HTML entities for display
113+
const escapeHtml = (html) => {
114+
return html
115+
.replace(/&/g, "&amp;")
116+
.replace(/</g, "&lt;")
117+
.replace(/>/g, "&gt;")
118+
.replace(/"/g, "&quot;")
119+
.replace(/'/g, "&#039;");
120+
};
121+
122+
// Get DOM elements
123+
const pasteArea = document.getElementById('paste-area');
124+
const outputContainer = document.getElementById('output-container');
125+
const htmlOutput = document.getElementById('html-output');
126+
const previewContent = document.getElementById('preview-content');
127+
const copyButton = document.getElementById('copy-button');
128+
const clearButton = document.getElementById('clear-button');
129+
130+
// Handle paste event to capture HTML
131+
pasteArea.addEventListener('paste', function(e) {
132+
// Get HTML data from clipboard
133+
const clipboardData = e.clipboardData || window.clipboardData;
134+
const pastedHtml = clipboardData.getData('text/html');
135+
136+
if (pastedHtml) {
137+
// Prevent default paste
138+
e.preventDefault();
139+
140+
// Display the HTML code with escaped characters
141+
htmlOutput.value = pastedHtml;
142+
143+
// Show the output container
144+
outputContainer.style.display = 'block';
145+
146+
// Show preview of how the HTML renders
147+
previewContent.innerHTML = pastedHtml;
148+
149+
// Let user know paste was successful
150+
pasteArea.innerHTML = '<p style="color: green;">Content pasted. HTML extracted.</p>';
151+
}
152+
});
153+
154+
// Reset paste area when clicked
155+
pasteArea.addEventListener('focus', function() {
156+
if (pasteArea.textContent.includes('Content pasted. HTML extracted.')) {
157+
pasteArea.innerHTML = '';
158+
}
159+
});
160+
161+
// Copy HTML to clipboard
162+
copyButton.addEventListener('click', function() {
163+
htmlOutput.select();
164+
document.execCommand('copy');
165+
166+
const originalText = copyButton.textContent;
167+
copyButton.textContent = 'Copied!';
168+
setTimeout(() => {
169+
copyButton.textContent = originalText;
170+
}, 1500);
171+
});
172+
173+
// Clear all content
174+
clearButton.addEventListener('click', function() {
175+
pasteArea.innerHTML = '';
176+
htmlOutput.value = '';
177+
previewContent.innerHTML = '';
178+
outputContainer.style.display = 'none';
179+
});
180+
</script>
181+
</body>
182+
</html>

0 commit comments

Comments
 (0)