@supersoniks/concorde 5.1.0 → 5.1.2

package/src/docs/code.ts

@@ -7,42 +7,18 @@ import { query } from "lit/decorators/query.js";
 
 import SDUIUtils from "../core/components/functional/sdui/sdui-utils";
 
-import "./prism/prism";
-import { prismCSS } from "./prism";
-import * as Prism from "prismjs";
-import "prismjs/plugins/normalize-whitespace/prism-normalize-whitespace";
-import "prismjs/components/prism-json"; // Language
-import "prismjs/components/prism-typescript"; // Language
-import "prismjs/components/prism-javascript"; // Language
-import "prismjs/components/prism-bash"; // Language
-// import "prismjs/components/prism-css"; // Language
-import "prismjs/components/prism-markup"; // Language
-
-let normalizeWhitespaceDefaultsApplied = false;
-
-function normalizeDocsCodeLanguage(language: string): string {
-  return language === "html" ? "markup" : language;
-}
-
-function applyNormalizeWhitespaceDefaults(): void {
-  if (normalizeWhitespaceDefaultsApplied) return;
-  normalizeWhitespaceDefaultsApplied = true;
-  Prism.plugins.NormalizeWhitespace.setDefaults({
-    "remove-trailing": true,
-    "remove-indent": true,
-    "left-trim": true,
-    "right-trim": true,
-    "remove-initial-line-feed": true,
-    "tabs-to-tabs": 2,
-  });
-}
+import {
+  docsCodeCSS,
+  highlightDocsCode,
+  normalizeDocsCodeLanguage,
+} from "./shiki";
 
 const tagName = "sonic-code";
 @customElement(tagName)
 export class DocsCode extends LitElement {
   static styles = [
     tailwind,
-    prismCSS,
+    docsCodeCSS,
     css`
       :host(:not([inline])) {
         display: block;
@@ -53,11 +29,7 @@ export class DocsCode extends LitElement {
         display: inline-block;
       }
       pre {
-        font-size: 13px !important;
         padding-right: 5rem !important;
-        border: 1px solid var(--sc-base-200);
-        border-radius: var(--sc-rounded);
-        margin: 0 !important;
       }
       .custom-scroll {
         overflow: auto !important;
@@ -82,6 +54,34 @@ export class DocsCode extends LitElement {
         border-radius: var(--sc-rounded);
         border: solid 0.15rem transparent;
       }
+
+      /* Tall blocks are folded behind a fade; a click unfolds them */
+      pre.collapsible {
+        transition: max-height 0.4s ease;
+      }
+      pre.collapsible:not(.expanded) {
+        max-height: var(--docs-code-max-height, 15rem);
+        overflow-y: hidden !important;
+      }
+      pre.overflowing:not(.expanded) {
+        cursor: pointer;
+      }
+      /* fade the code only: the block keeps its background and corners */
+      pre.overflowing:not(.expanded) > code {
+        display: block;
+        /* span the longest line, or the mask would clip horizontal overflow */
+        width: max-content;
+        min-width: 100%;
+        /* fade over the last 11rem; on hover the mask slides down a little */
+        mask-image: linear-gradient(to bottom, #000 calc(100% - 11rem), transparent);
+        mask-size: 100% var(--docs-code-max-height, 20rem);
+        mask-repeat: no-repeat;
+        mask-position: 0 -2rem;
+        transition: mask-position 0.35s ease;
+      }
+      pre.overflowing:not(.expanded):hover > code {
+        mask-position: 0 0;
+      }
     `,
   ];
 
@@ -90,6 +90,8 @@ export class DocsCode extends LitElement {
   @property({ type: Boolean, reflect: true }) showCode = false;
   @property({ type: Boolean, reflect: true }) toggleCode = false;
   @property({ type: Boolean, reflect: true }) noEdit = false;
+  /** Markup shown as code only: no live preview (e.g. PHP / Vue snippets). */
+  @property({ type: Boolean, reflect: true }) noPreview = false;
 
   @property() language = "markup";
   @property({ attribute: false }) defaultCode?: string;
@@ -101,14 +103,16 @@ export class DocsCode extends LitElement {
   private templateEl: HTMLTemplateElement | null = null;
 
   @state() codeEdited = false;
+  @state() private overflowing = false;
+  @state() private expanded = false;
 
   /** Live preview only for markup (avoid injecting HTML from JS/TS examples). */
-  private get prismLanguage(): string {
+  private get highlightLanguage(): string {
     return normalizeDocsCodeLanguage(this.language);
   }
 
   private get rendersLiveOutput(): boolean {
-    return this.prismLanguage === "markup";
+    return this.highlightLanguage === "html" && !this.noPreview;
   }
 
   connectedCallback() {
@@ -128,29 +132,12 @@ export class DocsCode extends LitElement {
     }
   }
 
-  private normalizeSourceForHighlight(source: string): string {
-    applyNormalizeWhitespaceDefaults();
-    const nw = Prism.plugins.NormalizeWhitespace;
-    return nw
-      .normalize(source)
-      .replaceAll('=""', "")
-      .replaceAll(""", '"')
-      .replaceAll('"{', "'{")
-      .replaceAll('}"', "}'")
-      .replaceAll("&", "&");
-  }
-
-  private highlightSource(source: string): string {
-    const lang = this.prismLanguage;
-    const grammar = Prism.languages[lang];
-    if (!grammar) {
-      return source;
+  private async applyHighlightFromSource(source: string | undefined) {
+    if (!source) {
+      this.currentCode = undefined;
+      return;
     }
-    return Prism.highlight(
-      this.normalizeSourceForHighlight(source),
-      grammar,
-      lang,
-    );
+    this.currentCode = await highlightDocsCode(source, this.language);
   }
 
   private syncFromTemplate() {
@@ -158,11 +145,7 @@ export class DocsCode extends LitElement {
     this.defaultCode = this.readTemplateSourceCode();
     this.codeEdited = false;
 
-    if (this.defaultCode) {
-      this.currentCode = this.highlightSource(this.defaultCode);
-    } else {
-      this.currentCode = undefined;
-    }
+    void this.applyHighlightFromSource(this.defaultCode);
 
     if (this.rendersLiveOutput) {
       this.codeOutput = this.defaultCode;
@@ -175,11 +158,7 @@ export class DocsCode extends LitElement {
     this.defaultCode = this.readTemplateSourceCode();
     this.codeEdited = false;
 
-    if (this.defaultCode) {
-      this.currentCode = this.highlightSource(this.defaultCode);
-    } else {
-      this.currentCode = undefined;
-    }
+    void this.applyHighlightFromSource(this.defaultCode);
 
     if (this.rendersLiveOutput) {
       this.codeOutput = this.defaultCode;
@@ -204,7 +183,7 @@ export class DocsCode extends LitElement {
     const template = this.templateEl ?? this.querySelector("template");
     if (!template) return "";
 
-    if (this.prismLanguage === "markup") {
+    if (this.highlightLanguage === "html") {
       return this.decodeTemplateEntities(template.innerHTML);
     }
 
@@ -231,7 +210,7 @@ export class DocsCode extends LitElement {
     if (this.defaultCode) {
       this.currentCode = "";
       window.requestAnimationFrame(() => {
-        this.currentCode = this.highlightSource(this.defaultCode || "");
+        void this.applyHighlightFromSource(this.defaultCode);
       });
     }
     if (this.rendersLiveOutput) {
@@ -269,6 +248,7 @@ export class DocsCode extends LitElement {
 
   updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
+    this.measureOverflow();
     if (
       changedProperties.has("codeOutput") ||
       changedProperties.has("language")
@@ -298,12 +278,38 @@ export class DocsCode extends LitElement {
     }
   }
 
+  private measureOverflow() {
+    const pre = this.codePreview;
+    if (!pre || this.inline || this.expanded) return;
+    // Folding to hide only a few lines is just friction: show those in full.
+    if (
+      pre.scrollHeight > pre.clientHeight + 4 &&
+      pre.scrollHeight < pre.clientHeight * 1.3
+    ) {
+      this.expanded = true;
+      return;
+    }
+    const overflowing = pre.scrollHeight > pre.clientHeight + 4;
+    if (overflowing !== this.overflowing) this.overflowing = overflowing;
+  }
+
+  private expand() {
+    if (!this.overflowing || this.expanded) return;
+    const pre = this.codePreview;
+    pre.style.maxHeight = `${pre.scrollHeight}px`;
+    // Release the height once unfolded, so edited code can still grow.
+    pre.addEventListener("transitionend", () => (pre.style.maxHeight = ""), {
+      once: true,
+    });
+    this.expanded = true;
+  }
+
   handleGetSDUI() {
     SDUIUtils.toJson(this.templateEl?.content.children);
   }
 
   render() {
-    const isMarkup = this.prismLanguage === "markup";
+    const isMarkup = this.rendersLiveOutput;
 
     return html`
       <div
@@ -316,7 +322,11 @@ export class DocsCode extends LitElement {
           : nothing}
 
         <div class="relative">
-          <div class="flex justify-end absolute right-2 gap-1 mt-2">
+          <div
+            class="flex justify-end gap-1 z-10 ${this.showCode && this.currentCode
+              ? "absolute right-2 mt-2"
+              : ""}"
+          >
             ${this.codeEdited
               ? html`<sonic-button
                   size="2xs"
@@ -383,10 +393,13 @@ export class DocsCode extends LitElement {
           <div>
             <pre
               id="codePreview"
-              class="rounded-md custom-scroll language-${this.prismLanguage} ${!this
-                .showCode || !this.currentCode
+              class="rounded-md custom-scroll language-${this
+                .highlightLanguage} ${!this.showCode || !this.currentCode
                 ? "hidden"
-                : ""}"
+                : ""} ${this.inline ? "" : "collapsible"} ${this.overflowing
+                ? "overflowing"
+                : ""} ${this.expanded ? "expanded" : ""}"
+              @click=${this.expand}
               ?contenteditable=${!this.noEdit}
               spellcheck="false"
               @input=${this.updateCodeRender}