Add tooltips and update light-pen (#223)

* tooltips

* update light-pen

* clipboarD

* fix ff events

docs/frontend/javascript/controllers/clipboard_controller.js

@@ -4,18 +4,42 @@ import { Controller } from "@hotwired/stimulus"
 export default class ClipboardController extends Controller {
   connect () {
     this.element.addEventListener("clipboard-copy", this.showSuccess)
+    this.element.addEventListener("click", this)
+  }
+
+  handleEvent (evt) {
+    if (evt.type === "click") {
+      this.handleClick(evt)
+      return
+    }
+  }
+
+  handleClick (evt) {
+    const el = /** @type {HTMLElement} */ (this.element.getRootNode()).querySelector(`#${this.element.getAttribute("for")}`)
+    // Only for <light-code>
+    if (el.localName !== "light-code") { return }
+
+    const lightCode = /** @type {import("light-pen/exports/components/light-code/light-code.js").default} */  (el)
+
+    lightCode.code
+    navigator.clipboard.writeText(lightCode.code).then(() => {
+      this.element.dispatchEvent(new Event("clipboard-copy", { bubbles: true, composed: true, cancelable: false }))
+    })
   }
 
   showSuccess = () => {
     this.element.classList.add("clipboard--success")
+    this.element.closest("sl-tooltip").content = "Copied!"
     this.element.classList.remove("clipboard--idle")
     if (this.timeout) {
       clearTimeout(this.timeout)
     }
 
     this.timeout = setTimeout(() => {
+      this.element.closest("sl-tooltip").content = "Copy"
       this.element.classList.remove("clipboard--success")
       this.element.classList.add("clipboard--idle")
     }, 2_000)
   }
 }
+

docs/frontend/styles/overrides/light-pen.css

@@ -1,5 +1,3 @@
-light-preview {
-}
 light-preview::before {
   content: "Preview";
   background: var(--sl-color-neutral-600);
@@ -19,3 +17,30 @@ light-preview {
 light-preview::part(base) {
   border-radius: 0px;
 }
+
+/** light-code */
+light-code::part(code) {
+  font-size: 0.85rem;
+  padding-top: 4px;
+  border-top: 1px solid var(--divider-color);
+}
+
+light-code:defined > [slot="code"] {
+  display: none;
+}
+
+light-code > [slot="code"] {
+  display: block;
+  overflow: auto;
+  /* this creates "hard" line-wrapping where it will scroll horizontally. */
+  white-space: pre;
+  word-break: break-all;
+
+}
+
+light-code[wrap="soft"] > [slot="code"] {
+  /* this creates "soft" line-wrapping. */
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+

docs/package.json

@@ -12,7 +12,7 @@
     "esbuild": "^0.21.5",
     "glob": "^8.1.0",
     "hast-util-to-html": "^9.0.3",
-    "light-pen": "^4.1.0",
+    "light-pen": "^4.2.0",
     "postcss": "^8.4.47",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^14.1.0",

docs/plugins/builders/inspectors.rb

@@ -6,6 +6,7 @@ def build
       grab_headers(document)
       mark_external(document)
       syntax_highlight(document)
+      wrap_light_code(document)
     end
   end
 
@@ -23,15 +24,49 @@ def mark_external(document)
     end
   end
 
+  def wrap_light_code(document)
+    document.css("light-code").each do |el|
+      lang = el["language"].to_s === "" ? "html" : el["language"]
+      lang = Syntax.full_language(lang)
+      id = el["id"] || "code-block-" + SecureRandom.uuid
+      el["id"] = id
+
+      el.wrap("<div class='syntax-block'></div>")
+
+      actions = <<-HTML
+        <div class='syntax-block__actions'>
+          <div class='syntax-block__badge'>
+            #{lang}
+          </div>
+
+          <sl-tooltip content="Copy">
+            <button
+              for='#{id}'
+              class='button clipboard clipboard--idle syntax-block__clipboard'
+              aria-label='Copy to clipboard'
+              data-controller='clipboard'
+              type="button"
+            >
+              <sl-icon class='clipboard__icon--success' name='clipboard-check'></sl-icon>
+              <sl-icon class='clipboard__icon--idle' name='clipboard'></sl-icon>
+            </button>
+          </sl-tooltip>
+        </div>
+      HTML
+
+      el.add_previous_sibling(actions)
+    end
+  end
+
   def syntax_highlight(document)
-    document.css(":not(.syntax-block) > div.highlighter-rouge").each do |el|
+    document.css("div.highlighter-rouge").each do |el|
       text = el.inner_text
       lang = el["class"].scan(/\s?language-.*\s/).last
 
       lang = lang.strip.split("-")[1] if lang
 
       lang = Syntax.full_language(lang)
-      id = SecureRandom.uuid
+      id = "code-block-" + SecureRandom.uuid
 
       el.wrap("<div class='syntax-block'></div>")
 
@@ -41,15 +76,17 @@ def syntax_highlight(document)
             #{lang}
           </div>
 
-          <clipboard-copy
-            for='#{id}'
-            class='button clipboard clipboard--idle syntax-block__clipboard'
-            aria-label='Copy to clipboard'
-            data-controller='clipboard'
-          >
-            <sl-icon class='clipboard__icon--success' name='clipboard-check'></sl-icon>
-            <sl-icon class='clipboard__icon--idle' name='clipboard'></sl-icon>
-          </clipboard-copy>
+          <sl-tooltip content="Copy">
+            <clipboard-copy
+              for='#{id}'
+              class='button clipboard clipboard--idle syntax-block__clipboard'
+              aria-label='Copy to clipboard'
+              data-controller='clipboard'
+            >
+              <sl-icon class='clipboard__icon--success' name='clipboard-check'></sl-icon>
+              <sl-icon class='clipboard__icon--idle' name='clipboard'></sl-icon>
+            </clipboard-copy>
+          </sl-tooltip>
 
           <script type="text/plain" id='#{id}' hidden>#{CGI.escape_html(text)}</script>
         </div>