victor HF staff commited on
Commit
90a51a8
·
1 Parent(s): 0123ef3

feat: Add toggle for direct HTML input with dynamic input switching

Browse files
Files changed (2) hide show
  1. index.html +5 -1
  2. 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
- <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" required>
 
 
 
 
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
- // Fetch HTML content from the server
42
- const response = await fetch(
43
- `/fetch-html?url=${encodeURIComponent(urlInput)}`
44
- );
45
- if (!response.ok) {
46
- throw new Error("Failed to fetch HTML content");
 
 
 
 
 
 
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);