Spaces:
Sleeping
Sleeping
feat: Add toggle for direct HTML input with dynamic input switching
Browse files- index.html +5 -1
- script.js +31 -8
index.html
CHANGED
@@ -9,7 +9,11 @@
|
|
9 |
<body>
|
10 |
<div class="w-dvh grid h-dvh grid-rows-[50px,1fr] overflow-hidden max-2xl:text-sm">
|
11 |
<div class="flex px-3 items-center gap-3 2xl:gap-5 whitespace-nowrap">
|
12 |
-
<
|
|
|
|
|
|
|
|
|
13 |
<label>
|
14 |
<input type="checkbox" id="extract-main-content"> Extract main content
|
15 |
</label>
|
|
|
9 |
<body>
|
10 |
<div class="w-dvh grid h-dvh grid-rows-[50px,1fr] overflow-hidden max-2xl:text-sm">
|
11 |
<div class="flex px-3 items-center gap-3 2xl:gap-5 whitespace-nowrap">
|
12 |
+
<label>
|
13 |
+
<input type="checkbox" id="input-html-toggle"> Input HTML
|
14 |
+
</label>
|
15 |
+
<input type="url" id="url-input" placeholder="Enter URL" class="bg-gray-100 h-8 w-96 rounded-md px-2 border border-gray-200">
|
16 |
+
<textarea id="html-input" class="hidden bg-gray-100 h-8 w-96 rounded-md px-2 border border-gray-200" placeholder="Paste HTML here"></textarea>
|
17 |
<label>
|
18 |
<input type="checkbox" id="extract-main-content"> Extract main content
|
19 |
</label>
|
script.js
CHANGED
@@ -1,5 +1,21 @@
|
|
1 |
const { convertHtmlToMarkdown } = htmlToSMD;
|
2 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
3 |
function isValidUrl(string) {
|
4 |
try {
|
5 |
new URL(string);
|
@@ -14,10 +30,12 @@ document
|
|
14 |
.addEventListener("submit", async function (e) {
|
15 |
e.preventDefault();
|
16 |
|
|
|
17 |
const urlInput = document.getElementById("url-input").value;
|
|
|
18 |
const markdownOutput = document.getElementById("markdown-output");
|
19 |
|
20 |
-
if (!isValidUrl(urlInput)) {
|
21 |
alert("Please enter a valid URL");
|
22 |
return;
|
23 |
}
|
@@ -38,14 +56,19 @@ document
|
|
38 |
};
|
39 |
|
40 |
try {
|
41 |
-
|
42 |
-
|
43 |
-
|
44 |
-
|
45 |
-
|
46 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
47 |
}
|
48 |
-
const htmlContent = await response.text();
|
49 |
|
50 |
// Convert HTML to Markdown
|
51 |
const markdown = await convertHtmlToMarkdown(htmlContent, options);
|
|
|
1 |
const { convertHtmlToMarkdown } = htmlToSMD;
|
2 |
|
3 |
+
// Handle toggle between URL and HTML input
|
4 |
+
document.getElementById("input-html-toggle").addEventListener("change", function(e) {
|
5 |
+
const urlInput = document.getElementById("url-input");
|
6 |
+
const htmlInput = document.getElementById("html-input");
|
7 |
+
|
8 |
+
if (e.target.checked) {
|
9 |
+
urlInput.classList.add("hidden");
|
10 |
+
htmlInput.classList.remove("hidden");
|
11 |
+
urlInput.removeAttribute("required");
|
12 |
+
} else {
|
13 |
+
urlInput.classList.remove("hidden");
|
14 |
+
htmlInput.classList.add("hidden");
|
15 |
+
urlInput.setAttribute("required", "");
|
16 |
+
}
|
17 |
+
});
|
18 |
+
|
19 |
function isValidUrl(string) {
|
20 |
try {
|
21 |
new URL(string);
|
|
|
30 |
.addEventListener("submit", async function (e) {
|
31 |
e.preventDefault();
|
32 |
|
33 |
+
const isHtmlInput = document.getElementById("input-html-toggle").checked;
|
34 |
const urlInput = document.getElementById("url-input").value;
|
35 |
+
const htmlInput = document.getElementById("html-input").value;
|
36 |
const markdownOutput = document.getElementById("markdown-output");
|
37 |
|
38 |
+
if (!isHtmlInput && !isValidUrl(urlInput)) {
|
39 |
alert("Please enter a valid URL");
|
40 |
return;
|
41 |
}
|
|
|
56 |
};
|
57 |
|
58 |
try {
|
59 |
+
let htmlContent;
|
60 |
+
if (isHtmlInput) {
|
61 |
+
htmlContent = htmlInput;
|
62 |
+
} else {
|
63 |
+
// Fetch HTML content from the server
|
64 |
+
const response = await fetch(
|
65 |
+
`/fetch-html?url=${encodeURIComponent(urlInput)}`
|
66 |
+
);
|
67 |
+
if (!response.ok) {
|
68 |
+
throw new Error("Failed to fetch HTML content");
|
69 |
+
}
|
70 |
+
htmlContent = await response.text();
|
71 |
}
|
|
|
72 |
|
73 |
// Convert HTML to Markdown
|
74 |
const markdown = await convertHtmlToMarkdown(htmlContent, options);
|