Hugging Face's logo

Spaces:
wadood
/
get-span-indices
Running

App Files Community
wadood commited on
Commit
4dd77e2
·
1 Parent(s): a7a27f6

updating index.html to reflect react code

Browse files
Files changed (2) hide show
  1. index.html +9 -146
  2. standalone_index.html +149 -0
index.html CHANGED
@@ -1,149 +1,12 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Text Selection</title>
6
- <style>
7
- #settings {
8
- margin-bottom: 15px;
9
- padding: 10px;
10
- border: 1px solid #ccc;
11
- border-radius: 6px;
12
- background: #fafafa;
13
- width: 90%;
14
- }
15
- #inputBox {
16
- width: 90%;
17
- min-height: 150px;
18
- border: 1px solid #ccc;
19
- padding: 10px;
20
- white-space: pre-wrap;
21
- overflow-wrap: break-word;
22
- }
23
- #results {
24
- margin-top: 15px;
25
- font-family: monospace;
26
- background: #f4f4f4;
27
- padding: 10px;
28
- border-radius: 6px;
29
- border: 1px solid #ddd;
30
- white-space: pre-wrap;
31
- user-select: text;
32
- }
33
- label {
34
- margin-right: 10px;
35
- }
36
- </style>
37
- </head>
38
- <body>
39
- <h3>Highlight text to get indices (accurate whitespace & line break)</h3>
40
-
41
- <!-- Settings Panel -->
42
- <div id="settings">
43
- <strong>Settings (rename keys):</strong><br><br>
44
- <label>Span Text Key: <input id="keySpan" type="text" value="span_text"></label>
45
- <label>Start Key: <input id="keyStart" type="text" value="start"></label>
46
- <label>End Key: <input id="keyEnd" type="text" value="end"></label>
47
- </div>
48
-
49
- <!-- Editable div -->
50
- <div id="inputBox" contenteditable="true"></div>
51
-
52
- <button onclick="getSelectionIndices()">Get Span JSON</button>
53
-
54
- <pre id="results"></pre>
55
-
56
- <script>
57
- let spans = [];
58
- let lastText = "";
59
-
60
- // Convert HTML content to normalized text where line breaks are \n
61
- function getNormalizedText(container) {
62
- let html = container.innerHTML;
63
-
64
- // Replace empty divs with \n
65
- html = html.replace(/<div><br><\/div>/gi, '\n');
66
-
67
- // Replace remaining divs with \n at start, remove closing divs
68
- html = html.replace(/<div>/gi, '\n').replace(/<\/div>/gi, '');
69
-
70
- // Replace <br> with \n
71
- html = html.replace(/<br\s*\/?>/gi, '\n');
72
-
73
- // Replace &nbsp; with space
74
- html = html.replace(/&nbsp;/g, ' ');
75
-
76
- // Strip other tags just in case
77
- html = html.replace(/<[^>]+>/g, '');
78
-
79
- return html;
80
- }
81
-
82
- function getSelectionIndices() {
83
- const container = document.getElementById("inputBox");
84
- const selection = window.getSelection();
85
- if (!selection || !selection.rangeCount) return;
86
-
87
- const range = selection.getRangeAt(0);
88
- if (!container.contains(range.startContainer) || !container.contains(range.endContainer)) return;
89
-
90
- const selectedText = selection.toString();
91
- if (!selectedText) return;
92
-
93
- // Normalize the container text
94
- const normalizedText = getNormalizedText(container);
95
-
96
- // Get text before selection
97
- const preRange = range.cloneRange();
98
- preRange.selectNodeContents(container);
99
- preRange.setEnd(range.startContainer, range.startOffset);
100
-
101
- const tempDiv = document.createElement("div");
102
- tempDiv.appendChild(preRange.cloneContents());
103
- let preText = getNormalizedText(tempDiv);
104
-
105
- const start = preText.length;
106
- const end = start + selectedText.length;
107
-
108
- const spanInfo = { span_text: selectedText, start, end };
109
-
110
- // Prepend and keep last 5 spans
111
- spans.unshift(spanInfo);
112
- spans = spans.slice(0, 5);
113
-
114
- renderSpans();
115
- }
116
-
117
- function renderSpans() {
118
- const keySpan = document.getElementById("keySpan").value || "span_text";
119
- const keyStart = document.getElementById("keyStart").value || "start";
120
- const keyEnd = document.getElementById("keyEnd").value || "end";
121
-
122
- const renamedSpans = spans.map(s => ({
123
- [keySpan]: s.span_text,
124
- [keyStart]: s.start,
125
- [keyEnd]: s.end
126
- }));
127
-
128
- document.getElementById("results").innerText = renamedSpans.length
129
- ? JSON.stringify(renamedSpans, null, 2)
130
- : "";
131
- }
132
-
133
- // Reset spans if input text changes
134
- document.getElementById("inputBox").addEventListener("input", function() {
135
- const currentText = getNormalizedText(this);
136
- if (currentText !== lastText) {
137
- spans = [];
138
- document.getElementById("results").innerText = "";
139
- lastText = currentText;
140
- }
141
- });
142
-
143
- // Re-render spans if key names change
144
- document.getElementById("keySpan").addEventListener("input", renderSpans);
145
- document.getElementById("keyStart").addEventListener("input", renderSpans);
146
- document.getElementById("keyEnd").addEventListener("input", renderSpans);
147
- </script>
148
- </body>
149
  </html>
 
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>Selection App</title>
7
+ </head>
8
+ <body>
9
+ <div id="root"></div>
10
+ <!-- React will inject scripts here in development/production -->
11
+ </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  </html>
standalone_index.html ADDED
@@ -0,0 +1,149 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Text Selection</title>
6
+ <style>
7
+ #settings {
8
+ margin-bottom: 15px;
9
+ padding: 10px;
10
+ border: 1px solid #ccc;
11
+ border-radius: 6px;
12
+ background: #fafafa;
13
+ width: 90%;
14
+ }
15
+ #inputBox {
16
+ width: 90%;
17
+ min-height: 150px;
18
+ border: 1px solid #ccc;
19
+ padding: 10px;
20
+ white-space: pre-wrap;
21
+ overflow-wrap: break-word;
22
+ }
23
+ #results {
24
+ margin-top: 15px;
25
+ font-family: monospace;
26
+ background: #f4f4f4;
27
+ padding: 10px;
28
+ border-radius: 6px;
29
+ border: 1px solid #ddd;
30
+ white-space: pre-wrap;
31
+ user-select: text;
32
+ }
33
+ label {
34
+ margin-right: 10px;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body>
39
+ <h3>Highlight text to get indices (accurate whitespace & line break)</h3>
40
+
41
+ <!-- Settings Panel -->
42
+ <div id="settings">
43
+ <strong>Settings (rename keys):</strong><br><br>
44
+ <label>Span Text Key: <input id="keySpan" type="text" value="span_text"></label>
45
+ <label>Start Key: <input id="keyStart" type="text" value="start"></label>
46
+ <label>End Key: <input id="keyEnd" type="text" value="end"></label>
47
+ </div>
48
+
49
+ <!-- Editable div -->
50
+ <div id="inputBox" contenteditable="true"></div>
51
+
52
+ <button onclick="getSelectionIndices()">Get Span JSON</button>
53
+
54
+ <pre id="results"></pre>
55
+
56
+ <script>
57
+ let spans = [];
58
+ let lastText = "";
59
+
60
+ // Convert HTML content to normalized text where line breaks are \n
61
+ function getNormalizedText(container) {
62
+ let html = container.innerHTML;
63
+
64
+ // Replace empty divs with \n
65
+ html = html.replace(/<div><br><\/div>/gi, '\n');
66
+
67
+ // Replace remaining divs with \n at start, remove closing divs
68
+ html = html.replace(/<div>/gi, '\n').replace(/<\/div>/gi, '');
69
+
70
+ // Replace <br> with \n
71
+ html = html.replace(/<br\s*\/?>/gi, '\n');
72
+
73
+ // Replace &nbsp; with space
74
+ html = html.replace(/&nbsp;/g, ' ');
75
+
76
+ // Strip other tags just in case
77
+ html = html.replace(/<[^>]+>/g, '');
78
+
79
+ return html;
80
+ }
81
+
82
+ function getSelectionIndices() {
83
+ const container = document.getElementById("inputBox");
84
+ const selection = window.getSelection();
85
+ if (!selection || !selection.rangeCount) return;
86
+
87
+ const range = selection.getRangeAt(0);
88
+ if (!container.contains(range.startContainer) || !container.contains(range.endContainer)) return;
89
+
90
+ const selectedText = selection.toString();
91
+ if (!selectedText) return;
92
+
93
+ // Normalize the container text
94
+ const normalizedText = getNormalizedText(container);
95
+
96
+ // Get text before selection
97
+ const preRange = range.cloneRange();
98
+ preRange.selectNodeContents(container);
99
+ preRange.setEnd(range.startContainer, range.startOffset);
100
+
101
+ const tempDiv = document.createElement("div");
102
+ tempDiv.appendChild(preRange.cloneContents());
103
+ let preText = getNormalizedText(tempDiv);
104
+
105
+ const start = preText.length;
106
+ const end = start + selectedText.length;
107
+
108
+ const spanInfo = { span_text: selectedText, start, end };
109
+
110
+ // Prepend and keep last 5 spans
111
+ spans.unshift(spanInfo);
112
+ spans = spans.slice(0, 5);
113
+
114
+ renderSpans();
115
+ }
116
+
117
+ function renderSpans() {
118
+ const keySpan = document.getElementById("keySpan").value || "span_text";
119
+ const keyStart = document.getElementById("keyStart").value || "start";
120
+ const keyEnd = document.getElementById("keyEnd").value || "end";
121
+
122
+ const renamedSpans = spans.map(s => ({
123
+ [keySpan]: s.span_text,
124
+ [keyStart]: s.start,
125
+ [keyEnd]: s.end
126
+ }));
127
+
128
+ document.getElementById("results").innerText = renamedSpans.length
129
+ ? JSON.stringify(renamedSpans, null, 2)
130
+ : "";
131
+ }
132
+
133
+ // Reset spans if input text changes
134
+ document.getElementById("inputBox").addEventListener("input", function() {
135
+ const currentText = getNormalizedText(this);
136
+ if (currentText !== lastText) {
137
+ spans = [];
138
+ document.getElementById("results").innerText = "";
139
+ lastText = currentText;
140
+ }
141
+ });
142
+
143
+ // Re-render spans if key names change
144
+ document.getElementById("keySpan").addEventListener("input", renderSpans);
145
+ document.getElementById("keyStart").addEventListener("input", renderSpans);
146
+ document.getElementById("keyEnd").addEventListener("input", renderSpans);
147
+ </script>
148
+ </body>
149
+ </html>