release

Veliti · Sep 5, 2023 · 0a0a5df · 0a0a5df
1 parent 64453b5
commit 0a0a5df
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,6 @@
   <link href="style.css" rel="stylesheet">
 </head>
 
-<script src="main.lua" type="application/lua" async></script>
 
 <body style="margin: 0;">
   <nav class="nav">
@@ -27,22 +26,22 @@ <h1 class="nav-text">
     </div>
 
     <main>
+      <script src="main.lua" type="application/lua" async></script>
       <div class="lua-pattern">
         <input id="input-pattern"></input>
         <label for="input-pattern">lua pattern</label>
       </div>
       <div class="lua-text">
         <div class="lua-text-highlighted">
-          <textarea id="input-text"></textarea>
-          <section id="text-highlighted">
-            hello2
-          </section>
+          <textarea id="input-text">hello</textarea>
+          <section id="text-highlighted">Hello world</section>
           <label for="input-text">input</label>
         </div>
+        <small style="color: gray;">* correct highlighting of inner captures not guaranteed
+          😂</small>
       </div>
     </main>
   </div>
-
 </body>
 
 </html>
diff --git a/main.lua b/main.lua
@@ -1,27 +1,53 @@
 local jsdoc = require("js").global.window.document
 
+local input_pattern = jsdoc:querySelector("#input-pattern")
+local input_text = jsdoc:querySelector("#input-text")
+local text_highlighted = jsdoc:querySelector("#text-highlighted")
+
 local inspect = function(t)
-	for key, value in pairs(t) do
+	for key, value in ipairs(t) do
 		print(key, " -> ", value)
 	end
 end
 
-local span_wrap = function(s, classes)
-	return string.format('<span class="%s">%s</span>', classes, s)
+local mark_wrap = function(s, classes)
+	return string.format('<mark class="%s">%s</mark>', classes, s)
 end
 
-local highlight_lines = function(text)
-	-- aa
+---@param text string
+---@param pattern string
+local highlight_lines = function(text, pattern)
+	-- lua pattern moment need to wrap pattern in capture else it stop capturing xD
+	pattern = "(" .. pattern .. ")"
+	local result = text:gsub(pattern, function(...)
+		local captures = { ... }
+		---@type string
+		local insertion = mark_wrap(captures[1], "highlight-primary")
+		for index, value in ipairs(captures) do
+			if index ~= 1 then
+				insertion = insertion:gsub(value, mark_wrap(value, "highlight-secondary"), 1)
+			end
+		end
+		return insertion
+	end)
+	return result
 end
 
-local pattern = jsdoc:querySelector("#input-pattern")
-local text = jsdoc:querySelector("#input-text")
-local text_highlighted = jsdoc:querySelector("#text-highlighted")
-
 local update = function()
-	text_highlighted.innerText = text.value
+	local success, hl = pcall(highlight_lines, input_text.value, input_pattern.value)
+	if success then
+		text_highlighted.innerHTML = hl
+	else
+		text_highlighted.innerHTML = input_text.value
+	end
 end
 
-text:addEventListener("input", function(element, event)
+input_pattern:addEventListener("input", function(element, event)
 	update()
 end)
+
+input_text:addEventListener("input", function(element, event)
+	update()
+end)
+
+update()
diff --git a/style.css b/style.css
@@ -66,23 +66,39 @@ main {
   width: inherit;
   border: 2px solid black;
   border-radius: 10px;
-  font-size: 20px;
+}
+.lua-text-highlighted textarea, section {
+  font-size: 15px;
+  font-family: sans-serif;
+  padding: 10px 10px;
+  margin: 0;
+  border: 0;
 }
 .lua-text-highlighted textarea {
   width:inherit;
+  height: 350px;
+  resize: vertical;
+  border-radius: inherit;
+  -webkit-text-fill-color: transparent;
   background-color: transparent;
-  border: 2px solid transparent;
-  color: red;
-  opacity: 15%;
-  padding: 8px 13px;
-  font-family: monospace;
-  font-size: 1em;
+  z-index: 1;
 }
 .lua-text-highlighted section {
   position: absolute;
   top: 0px;
   left: 0;
-  padding: 8px 13px;
-  font-family: monospace;
-  font-size: 1em;
+  z-index: 0;
+}
+.highlight-primary {
+  border-width: 0 1px 0 1px;
+  border-style: solid;
+  border-color: #0000FF;
+  background-color: #00FFFF40;
+}
+.highlight-secondary {
+  text-decoration: underline dotted orange 2px;
+  background-color: transparent;
+}
+.highlight-error {
+  color: red;
 }