@react-native/debugger-frontend/dist/third-party/front_end/ui/components/markdown_view/markdown_view.js

Debugger frontend for React Native based on Chrome DevTools

import"../../legacy/legacy.js";import*as e from"../../../core/host/host.js";import*as t from"../../../core/i18n/i18n.js";import*as s from"../../../third_party/codemirror.next/codemirror.next.js";import"../buttons/buttons.js";import*as o from"../text_editor/text_editor.js";import*as r from"../../lit/lit.js";import{html as i,render as n}from"../../lit/lit.js";import*as a from"../../visual_logging/visual_logging.js";import"../icon_button/icon_button.js";var c={cssText:`*{margin:0;padding:0;box-sizing:border-box}:host{display:block;--code-block-max-code-height:none;--code-block-background-color:var(--sys-color-surface2)}.codeblock{box-sizing:border-box;color:var(--sys-color-on-surface)}.codeblock .editor-wrapper{color:var(--sys-color-on-surface);background:var(--code-block-background-color);padding:10px 5px 0;border-bottom-left-radius:var(--sys-shape-corner-extra-small);border-bottom-right-radius:var(--sys-shape-corner-extra-small)}.codeblock .editor-wrapper:has(.heading){padding:var(--sys-size-3) var(--sys-size-4) 0 5px}.codeblock:not(:has(.toolbar)) .editor-wrapper{border-radius:var(--sys-shape-corner-extra-small)}.codeblock .editor-wrapper .code{max-height:var(--code-block-max-code-height);overflow:auto;padding-bottom:10px}.heading{display:flex;justify-content:space-between;align-items:center;height:var(--sys-size-11)}.heading-text{font:var(--sys-typescale-body5-bold);padding-left:var(--sys-size-4);padding-right:var(--sys-size-2)}.codeblock .lang{padding:var(--sys-size-4) 0;flex:1}.codeblock .copy-button-container{display:flex;justify-content:center;align-items:center;font-size:var(--sys-typescale-body5-size);span{padding-right:var(--sys-size-4)}}.notice{margin-top:var(--sys-size-2);padding:var(--sys-size-4) var(--sys-size-5);background-color:var(--code-block-background-color);border-radius:var(--sys-shape-corner-extra-small);.link{font:var(--sys-typescale-body4-regular);color:var(--sys-color-primary);text-decoration-line:underline}}\n/*# sourceURL=${import.meta.resolve("./codeBlock.css")} */\n`};const d=new CSSStyleSheet;d.replaceSync(c.cssText);const{html:l}=r,h={code:"Code",copy:"Copy code",copied:"Copied to clipboard",disclaimer:"Use code snippets with caution"},p=t.i18n.registerUIStrings("ui/components/markdown_view/CodeBlock.ts",h),m=t.i18n.getLocalizedString.bind(void 0,p);class g extends HTMLElement{#e=this.attachShadow({mode:"open"});#t="";#s="";#o=1e3;#r;#i=!1;#n;#a=new s.Compartment;#c=!1;#d;#l=!0;connectedCallback(){this.#e.adoptedStyleSheets=[d],this.#h()}set code(e){this.#t=e,this.#n=s.EditorState.create({doc:this.#t,extensions:[o.Config.baseConfiguration(this.#t),s.EditorState.readOnly.of(!0),s.EditorView.lineWrapping,this.#a.of(s.javascript.javascript())]}),this.#h()}get code(){return this.#t}set codeLang(e){this.#s=e,this.#h()}set timeout(e){this.#o=e,this.#h()}set displayNotice(e){this.#c=e,this.#h()}set header(e){this.#d=e,this.#h()}set showCopyButton(e){this.#l=e,this.#h()}#p(){e.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.#t),this.#i=!0,this.#h(),clearTimeout(this.#r),this.#r=setTimeout((()=>{this.#i=!1,this.#h()}),this.#o)}#m(){return l`<p class="notice">
      <x-link class="link" href="https://support.google.com/legal/answer/13505487" jslog=${a.link("code-disclaimer").track({click:!0})}>
        ${m(h.disclaimer)}
      </x-link>
    </p>`}#g(){return l`
      <div class="copy-button-container">
        <devtools-button
          .data=${{variant:"icon",size:"SMALL",jslogContext:"copy",iconName:"copy",title:m(h.copy)}}
          @click=${this.#p}
        ></devtools-button>
        ${this.#i?l`<span>${m(h.copied)}</span>`:r.nothing}
      </div>`}#u(){if(!this.#n)throw new Error("Unexpected: trying to render the text editor without editorState");return l`
      <div class="code">
        <devtools-text-editor .state=${this.#n}></devtools-text-editor>
      </div>
    `}#h(){const e=(this.#d??this.#s)||m(h.code);r.render(l`<div class='codeblock' jslog=${a.section("code")}>
      <div class="editor-wrapper">
        <div class="heading">
          <h4 class="heading-text">${e}</h4>
          ${this.#l?this.#g():r.nothing}
        </div>
        ${this.#u()}
      </div>
      ${this.#c?this.#m():r.nothing}
    </div>`,this.#e,{host:this});const t=this.#e?.querySelector("devtools-text-editor")?.editor;if(!t)return;let o=s.html.html({autoCloseTags:!1,selfClosingTags:!0});switch(this.#s){case"js":o=s.javascript.javascript();break;case"ts":o=s.javascript.javascript({typescript:!0});break;case"jsx":o=s.javascript.javascript({jsx:!0});break;case"css":o=s.css.css()}t.dispatch({effects:this.#a.reconfigure(o)})}}customElements.define("devtools-code-block",g);var u=Object.freeze({__proto__:null,CodeBlock:g}),w={cssText:`.markdown-image{display:block}\n/*# sourceURL=${import.meta.resolve("./markdownImage.css")} */\n`};const k=new Map([]),f=e=>{const t=k.get(e);if(!t)throw new Error(`Markdown image with key '${e}' is not available, please check MarkdownImagesMap.ts`);return t};var v=Object.freeze({__proto__:null,getMarkdownImage:f,markdownImages:k});const y=new CSSStyleSheet;y.replaceSync(w.cssText);const{html:b,Directives:{ifDefined:x}}=r;class C extends HTMLElement{#e=this.attachShadow({mode:"open"});#w;#k;connectedCallback(){this.#e.adoptedStyleSheets=[y]}set data(e){const{key:t,title:s}=e,o=f(t);this.#w=o,this.#k=s,this.#h()}#f(){if(!this.#w)return b``;const{src:e,color:t,width:s="100%",height:o="100%"}=this.#w;return b`
      <devtools-icon .data=${{iconPath:e,color:t,width:s,height:o}}></devtools-icon>
    `}#v(){if(!this.#w)return b``;const{src:e,width:t="100%",height:s="100%"}=this.#w;return b`
      <img class="markdown-image" src=${e} alt=${x(this.#k)} width=${t} height=${s} />
    `}#h(){if(!this.#w)return;const{isIcon:e}=this.#w,t=e?this.#f():this.#v();r.render(t,this.#e,{host:this})}}customElements.define("devtools-markdown-image",C);var $=Object.freeze({__proto__:null,MarkdownImage:C}),T={cssText:`.devtools-link{color:var(--sys-color-primary);outline-offset:2px;text-decoration:underline}\n/*# sourceURL=${import.meta.resolve("./markdownLink.css")} */\n`};const S=new Map([["issuesContrastWCAG21AA","https://www.w3.org/TR/WCAG21/#contrast-minimum"],["issuesContrastWCAG21AAA","https://www.w3.org/TR/WCAG21/#contrast-enhanced"],["issuesContrastSuggestColor","https://developers.google.com/web/updates/2020/08/devtools#accessible-color"],["issuesCSPSetStrict","https://web.dev/strict-csp"],["issuesCSPWhyStrictOverAllowlist","https://web.dev/strict-csp/#why-a-strict-csp-is-recommended-over-allowlist-csps"],["issueCorsPreflightRequest","https://web.dev/cross-origin-resource-sharing/#preflight-requests-for-complex-http-calls"],["issueQuirksModeDoctype","https://web.dev/doctype/"],["sameSiteAndSameOrigin","https://web.dev/same-site-same-origin/"],["punycodeReference","https://wikipedia.org/wiki/Punycode"],["https://xhr.spec.whatwg.org/","https://xhr.spec.whatwg.org/"],["https://goo.gle/chrome-insecure-origins","https://goo.gle/chrome-insecure-origins"],["https://webrtc.org/web-apis/chrome/unified-plan/","https://webrtc.org/web-apis/chrome/unified-plan/"],["https://developer.chrome.com/blog/enabling-shared-array-buffer/","https://developer.chrome.com/blog/enabling-shared-array-buffer/"],["https://developer.chrome.com/docs/extensions/mv3/","https://developer.chrome.com/docs/extensions/mv3/"],["https://developer.chrome.com/blog/immutable-document-domain/","https://developer.chrome.com/blog/immutable-document-domain/"],["https://github.com/WICG/shared-element-transitions/blob/main/debugging_overflow_on_images.md","https://github.com/WICG/shared-element-transitions/blob/main/debugging_overflow_on_images.md"],["https://developer.chrome.com/docs/extensions/reference/privacy/#property-websites-privacySandboxEnabled","https://developer.chrome.com/docs/extensions/reference/privacy/#property-websites-privacySandboxEnabled"],["PNASecureContextRestrictionFeatureStatus","https://chromestatus.com/feature/5954091755241472"],["https://w3c.github.io/uievents/#legacy-event-types","https://w3c.github.io/uievents/#legacy-event-types"],["manageCookiesHelpPage","https://support.google.com/chrome/answer/95647"],["gracePeriodStagedControlExplainer","https://developers.google.com/privacy-sandbox/blog/grace-period-opt-out"],["signatureHeader","https://www.rfc-editor.org/rfc/rfc9421.html#name-the-signature-http-field"],["signatureInputHeader","https://www.rfc-editor.org/rfc/rfc9421.html#name-the-signature-input-http-fi"],["signatureParameters","https://www.rfc-editor.org/rfc/rfc9421.html#name-signature-parameters"],["sfDictionary","https://www.rfc-editor.org/rfc/rfc8941.html#name-dictionaries"],["sfByteSequence","https://www.rfc-editor.org/rfc/rfc8941.html#name-byte-sequences"],["sfInnerList","https://www.rfc-editor.org/rfc/rfc8941.html#name-inner-lists"],["componentParameterSf","https://www.rfc-editor.org/rfc/rfc9421.html#name-strict-serialization-of-htt"],["componentParameterReq","https://www.rfc-editor.org/rfc/rfc9421.html#content-request-response"],["unencodedDigestHeader","https://lpardue.github.io/draft-pardue-http-identity-digest/draft-pardue-httpbis-identity-digest.html"],["storagePartitioningExplainer","https://developers.google.com/privacy-sandbox/cookies/storage-partitioning"],["storageAccessAPI","https://developer.mozilla.org/en-US/docs/Web/API/StorageAccessHandle/createObjectURL"]]),_=e=>{if(/^https:\/\/www\.chromestatus\.com\//.test(e))return e;if(/^https:\/\/developer\.chrome\.com\//.test(e))return e;if(/^https:\/\/developers\.google\.com\//.test(e))return e;if(/^https:\/\/web\.dev\//.test(e))return e;if("https://philipwalton.com/articles/the-state-of-es5-on-the-web/"===e)return e;const t=S.get(e);if(!t)throw new Error(`Markdown link with key '${e}' is not available, please check MarkdownLinksMap.ts`);return t};var j=Object.freeze({__proto__:null,getMarkdownLink:_,markdownLinks:S});const M=new CSSStyleSheet;M.replaceSync(T.cssText);class L extends HTMLElement{#e=this.attachShadow({mode:"open"});#y="";#b="";connectedCallback(){this.#e.adoptedStyleSheets=[M]}set data(e){const{key:t,title:s}=e,o=_(t);this.#y=s,this.#b=o,this.#h()}#h(){const e=i`<x-link class="devtools-link" href=${this.#b} jslog=${a.link().track({click:!0})}
    >${this.#y}</x-link>`;n(e,this.#e,{host:this})}}customElements.define("devtools-markdown-link",L);var z=Object.freeze({__proto__:null,MarkdownLink:L}),E={cssText:`:host{--code-background-color:var(--sys-color-surface4)}@keyframes typing{from{width:0}to{width:100%}}@keyframes expand{from{height:0}to{height:auto}}.animating{overflow:hidden;white-space:nowrap;animation:typing 0.4s steps(40,end)}devtools-code-block.animating{animation:expand 0.1s linear}.pending{display:none!important}.message{line-height:18px;font-size:12px;color:var(--sys-color-on-surface);user-select:text}.message p{margin:0}.message p:not(:first-child){margin-block-start:2px}.message p:not(:last-child){margin-bottom:10px}.message ul{list-style-type:none;padding-inline-start:var(--sys-size-8)}.message ul ul{padding-inline-start:19px}.message li{margin-top:8px;display:list-item;list-style-type:disc}.message code{color:var(--sys-color-on-surface);font-family:var(--monospace-font-family);font-size:11px;user-select:text;cursor:text;background-color:var(--code-background-color);border-radius:2px;padding:1px 3px}devtools-code-block{margin-bottom:var(--sys-size-5)}.citation{text-decoration:underline;color:var(--sys-color-primary);background-color:transparent;cursor:pointer;outline-offset:var(--sys-size-2);border:none;padding:0;font-size:10px;font-family:var(--default-font-family)}h1.insight, h2.insight, h3.insight, h4.insight, h5.insight, h6.insight{font:var(--sys-typescale-body4-bold);margin:var(--sys-size-1) 0 10px}\n/*# sourceURL=${import.meta.resolve("./markdownView.css")} */\n`};const A=new CSSStyleSheet;A.replaceSync(E.cssText);const I=r.html,F=r.render;class D extends HTMLElement{#e=this.attachShadow({mode:"open"});#x=[];#C=new H;#$=!1;#T=!1;connectedCallback(){this.#e.adoptedStyleSheets=[A]}set data(e){this.#x=e.tokens,e.renderer&&(this.#C=e.renderer),e.animationEnabled?(this.#$=!0,this.#C.addCustomClasses({paragraph:"pending",heading:"pending",list_item:"pending",code:"pending"})):this.#S(),this.#_()}#S(){const e=this.#e.querySelectorAll(".animating");for(const t of e)t.classList.remove("animating");const t=this.#e.querySelectorAll(".pending");for(const e of t)e.classList.remove("pending");this.#T=!1,this.#$=!1,this.#C.removeCustomClasses({paragraph:"pending",heading:"pending",list_item:"pending",code:"pending"})}#j(){if(this.#T)return;this.#T=!0;const e=()=>{const t=this.#e.querySelector(".pending");t?(t.addEventListener("animationend",(()=>{t.classList.remove("animating"),e()}),{once:!0}),t.classList.remove("pending"),t.classList.add("animating")):this.#T=!1};e()}#_(){this.#h(),this.#$&&this.#j()}#h(){F(I`
      <div class='message'>
        ${this.#x.map((e=>this.#C.renderToken(e)))}
      </div>
    `,this.#e,{host:this})}}customElements.define("devtools-markdown-view",D);class H{#M={};addCustomClasses(e){for(const[t,s]of Object.entries(e))this.#M[t]||(this.#M[t]=new Set),this.#M[t].add(s)}removeCustomClasses(e){for(const[t,s]of Object.entries(e))this.#M[t]&&this.#M[t].delete(s)}customClassMapForToken(e){const t=this.#M[e]||new Set,s=Object.fromEntries([...t].map((e=>[e,!0])));return r.Directives.classMap(s)}renderChildTokens(e){if("tokens"in e&&e.tokens)return e.tokens.map((e=>this.renderToken(e)));throw new Error("Tokens not found")}unescape(e){const t=new Map([["&amp;","&"],["&lt;","<"],["&gt;",">"],["&quot;",'"'],["&#39;","'"]]);return e.replace(/&(amp|lt|gt|quot|#39);/g,(e=>{const s=t.get(e);return s||e}))}renderText(e){return"tokens"in e&&e.tokens?I`${this.renderChildTokens(e)}`:I`${this.unescape("text"in e?e.text:"")}`}renderHeading(e){const t=this.customClassMapForToken("heading");switch(e.depth){case 1:return I`<h1 class=${t}>${this.renderText(e)}</h1>`;case 2:return I`<h2 class=${t}>${this.renderText(e)}</h2>`;case 3:return I`<h3 class=${t}>${this.renderText(e)}</h3>`;case 4:return I`<h4 class=${t}>${this.renderText(e)}</h4>`;case 5:return I`<h5 class=${t}>${this.renderText(e)}</h5>`;default:return I`<h6 class=${t}>${this.renderText(e)}</h6>`}}renderCodeBlock(e){return I`<devtools-code-block
      class=${this.customClassMapForToken("code")}
      .code=${this.unescape(e.text)}
      .codeLang=${e.lang||""}>
    </devtools-code-block>`}templateForToken(e){switch(e.type){case"paragraph":return I`<p class=${this.customClassMapForToken("paragraph")}>${this.renderChildTokens(e)}</p>`;case"list":return I`<ul class=${this.customClassMapForToken("list")}>${e.items.map((e=>this.renderToken(e)))}</ul>`;case"list_item":return I`<li class=${this.customClassMapForToken("list_item")}>${this.renderChildTokens(e)}</li>`;case"text":return this.renderText(e);case"codespan":return I`<code class=${this.customClassMapForToken("codespan")}>${this.unescape(e.text)}</code>`;case"code":return this.renderCodeBlock(e);case"space":return I``;case"link":return I`<devtools-markdown-link
        class=${this.customClassMapForToken("link")}
        .data=${{key:e.href,title:e.text}}></devtools-markdown-link>`;case"image":return I`<devtools-markdown-image
        class=${this.customClassMapForToken("image")}
        .data=${{key:e.href,title:e.text}}></devtools-markdown-image>`;case"heading":return this.renderHeading(e);case"strong":return I`<strong class=${this.customClassMapForToken("strong")}>${this.renderText(e)}</strong>`;case"em":return I`<em class=${this.customClassMapForToken("em")}>${this.renderText(e)}</em>`;default:return null}}renderToken(e){const t=this.templateForToken(e);if(null===t)throw new Error(`Markdown token type '${e.type}' not supported.`);return t}}var U=Object.freeze({__proto__:null,MarkdownInsightRenderer:class extends H{#L;constructor(e){super(),this.#L=e||(()=>{}),this.addCustomClasses({heading:"insight"})}renderToken(e){const t=this.templateForToken(e);return null===t?I`${e.raw}`:t}sanitizeUrl(e){try{const t=new URL(e);return"https:"===t.protocol||"http:"===t.protocol?t.toString():null}catch{return null}}detectCodeLanguage(e){return e.lang?e.lang:/^(\.|#)?[\w:\[\]="'-\.]* ?{/m.test(e.text)||/^@import/.test(e.text)?"css":/^(var|const|let|function|async|import)\s/.test(e.text)?"js":""}templateForToken(e){switch(e.type){case"heading":return this.renderHeading(e);case"link":case"image":return this.sanitizeUrl(e.href)?I`${e.text??e.href}`:null;case"code":return I`<devtools-code-block
          class=${this.customClassMapForToken("code")}
          .code=${this.unescape(e.text)}
          .codeLang=${this.detectCodeLanguage(e)}
          .displayNotice=${!0}>
        </devtools-code-block>`;case"citation":return I`<sup><button
            class="citation"
            jslog=${a.link("inline-citation").track({click:!0})}
            @click=${this.#L.bind(this,Number(e.linkText))}
          >[${e.linkText}]</button></sup>`}return super.templateForToken(e)}},MarkdownLitRenderer:H,MarkdownView:D});export{u as CodeBlock,$ as MarkdownImage,v as MarkdownImagesMap,z as MarkdownLink,j as MarkdownLinksMap,U as MarkdownView};