feat: code editor styles

app/build/css.ts

@@ -12,7 +12,7 @@ export const banner = [
 ].join("\n")
 
 /** Generate CSS */
-export async function css(exclude = ["@istanbul-coverage"] as string[]) {
+export async function css(exclude = ["@istanbul-coverage", "@code-editor"] as string[]) {
   let css = ""
   const files = await Array.fromAsync(expandGlob("styles/**/*.css", { root: fromFileUrl(root), exclude: exclude.map((directory) => `styles/${directory}/*.css`) }))
   files.sort((a, b) => a.path.localeCompare(b.path))

app/build/html.ts

@@ -40,7 +40,8 @@ export async function html() {
   Array.from(document.querySelectorAll(".example:not([data-codeless])")).forEach((_element) => {
     const element = _element as unknown as HTMLElement
     const clone = element.cloneNode(true) as unknown as HTMLElement
-    clone.querySelectorAll("script,.note").forEach((element) => element.remove())
+    clone.querySelectorAll("script:not([data-keep]),.note").forEach((element) => element.remove())
+    clone.querySelectorAll("script[data-keep]").forEach((element) => element.removeAttribute("data-keep"))
     const html = clone.innerHTML.replaceAll(/<template>[\s\S]*?<\/template>/g, "")
     const indent = html.match(/^( *)(?=\S)/m)?.[1]?.length || 0
     const code = html

app/mod.html

@@ -222,6 +222,10 @@ <h1 id="utilities"><a href="#utilities">Utilities</a></h1>
           <h1 id="syntax-highlighting"><a href="#syntax-highlighting">Syntax highlighting</a></h1>
           <!--/styles/@syntax-highlighting/mod.html-->
         </section>
+        <section>
+          <h1 id="code-editor"><a href="#code-editor">Code editor</a></h1>
+          <!--/styles/@code-editor/mod.html-->
+        </section>
         <section>
           <h1 id="istanbul-coverage"><a href="#istanbul-coverage">Istanbul coverage reports</a></h1>
           <!--/styles/@istanbul-coverage/mod.html-->

app/sections/custom-build.html

@@ -63,17 +63,22 @@ <h3 id="custom-build"><a href="#custom-build">🛠️ Create a custom build</a><
         <small>Additional classes intended to be used with the <a href="https://highlightjs.org" target="_blank">highlight.js library</a>.</small>
       </label>
       <label>
-        <input type="checkbox" name="extra" value="@break-words" checked>
-        Break words<br>
-        <small>
-          Apply <code data-hl="css">word-break: break-word; hyphens: auto;</code> to several elements to improve text wrapping.
-        </small>
+        <input type="checkbox" name="extra" value="@code-editor">
+        Code editor<br>
+        <small>Additional classes intended to be used with the <a href="https://highlightjs.org" target="_blank">highlight.js library</a> to create a simple code editor.</small>
       </label>
       <label>
         <input type="checkbox" name="extra" value="@istanbul-coverage">
         Istanbul coverage reports<br>
         <small>Additional classes intended to be used with the <a href="https://istanbul.js.org/" target="_blank">istanbul.js</a> coverage reports.</small>
       </label>
+      <label>
+        <input type="checkbox" name="extra" value="@break-words" checked>
+        Break words<br>
+        <small>
+          Apply <code data-hl="css">word-break: break-word; hyphens: auto;</code> to several elements to improve text wrapping.
+        </small>
+      </label>
     </fieldset>
     <fieldset class="variables">
       <legend>

styles/@code-editor/mod.css

@@ -0,0 +1,49 @@
+.editor {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  border-radius: var(--bd-radius);
+  background: var(--bg-muted);
+}
+
+.editor > textarea, .editor > div.highlight {
+  box-sizing: border-box;
+  padding: 1rem;
+  border: 0;
+  margin: 0;
+  background: transparent;
+  font-family: var(--ft-mono);
+  font-size: 1rem;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.editor > textarea {
+  z-index: 1;
+  border: 1px solid transparent;
+  caret-color: var(--default);
+  color: transparent;
+}
+
+.editor > div.highlight {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.editor > textarea:user-valid {
+  border-color: transparent;
+}
+
+.editor:hover > textarea {
+  border-color: var(--accent);
+}
+
+.editor > textarea:focus {
+  border-color: var(--active);
+}

styles/@code-editor/mod.html

@@ -0,0 +1,61 @@
+<p>
+  <em>matcha.css</em> provides classes that can be used to create a simple code editor with syntax highlighting.
+</p>
+<p>
+  <b>Required structure:</b><br>
+  <small class="muted">Elements marked with <code class="danger">*</code> are required.</small>
+</p>
+<ul class="layout-structure">
+  <li><code data-hl="css">.editor</code><span class="danger">*</span>
+    <ul>
+      <li><code data-hl="css">&gt; textarea</code><span class="danger">*</span></li>
+      <li><code data-hl="css">&gt; div.highlight</code><span class="danger">*</span></li>
+    </ul>
+  </li>
+</ul>
+<section>
+  <div class="example">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <div class="editor">
+      <textarea rows="6">// This element is editable and highlights TypeScript code
+import * as mizu from "https://mizu.sh/mizu.js"
+
+const { version } = mizu
+console.log(`🌊 mizu.js version: ${version}`)
+</textarea>
+      <div class="highlight"></div>
+    </div>
+    <script data-keep>
+      {
+        const editor = document.currentScript.previousElementSibling
+        const textarea = editor.querySelector("textarea")
+        const highlight = editor.querySelector(".highlight")
+        textarea.addEventListener("input", () => coloration(textarea.value))
+        textarea.addEventListener("scroll", function () {
+          highlight.scrollTop = this.scrollTop
+          highlight.scrollLeft = this.scrollLeft
+        })
+        function coloration(value) {
+          highlight.innerHTML = hljs.highlight(value, { language: "typescript" }).value
+        }
+        coloration(textarea.value)
+      }
+    </script>
+  </div>
+  <p class="flash attention">
+    These extra styles does not actually perform syntax highlighting, it is only for styling the code editor.
+    It is required to include a syntax highlighting library like <a href="https://highlightjs.org" target="_blank">highlight.js</a>.
+    See the example code above for a simple implementation.
+  </p>
+  <p class="flash accent">
+    Use with <a href="#syntax-highlighting"><em>matcha.css</em>'s syntax highlighting classes</a> for a extra synergy!
+  </p>
+</section>
+<script>
+  {
+    const link = document.createElement("link")
+    link.rel = "stylesheet"
+    link.href = "styles/@code-editor/mod.css"
+    document.head.appendChild(link)
+  }
+</script>

styles/forms/mod.css

@@ -99,11 +99,15 @@ textarea {
   cursor: not-allowed;
 }
 
-:is(textarea, select, input:not([type="radio"],[type="checkbox"],[type="range"],[type="submit"],[type="image"])):user-invalid {
+textarea:user-invalid,
+select:user-invalid,
+input:not([type="radio"],[type="checkbox"],[type="range"],[type="submit"],[type="image"]):user-invalid {
   border: 1px solid var(--danger);
 }
 
-:is(textarea, select, input:not([type="radio"],[type="checkbox"],[type="range"],[type="submit"],[type="image"])):user-valid {
+textarea:user-valid,
+select:user-valid,
+input:not([type="radio"],[type="checkbox"],[type="range"],[type="submit"],[type="image"]):user-valid {
   border: 1px solid var(--success);
 }