@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 1.9 kB
JavaScript
import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import editableSpanStyles from"./EditableSpan.css.js";const{render:render,html:html}=LitHtml;export class EditableSpan extends HTMLElement{static litTagName=LitHtml.literal`devtools-editable-span`;#e=this.attachShadow({mode:"open"});#t=this.#n.bind(this);#s="";connectedCallback(){this.#e.adoptedStyleSheets=[editableSpanStyles],this.#e.addEventListener("focusin",this.#a.bind(this)),this.#e.addEventListener("keydown",this.#o.bind(this)),this.#e.addEventListener("paste",this.#d.bind(this)),this.#e.addEventListener("input",this.#i.bind(this))}set data(e){this.#s=e.value,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get value(){return this.#e.querySelector("span")?.innerText||""}set value(e){this.#s=e;const t=this.#e.querySelector("span");t&&(t.innerText=e)}#o(e){"Enter"===e.key&&(e.preventDefault(),e.target?.blur())}#i(e){this.#s=e.target.innerText}#a(e){const t=e.target,n=window.getSelection(),s=document.createRange();s.selectNodeContents(t),n?.removeAllRanges(),n?.addRange(s)}#d(e){const t=e;if(e.preventDefault(),t.clipboardData){const e=t.clipboardData.getData("text/plain"),n=this.#e.getSelection()?.getRangeAt(0);if(!n)return;n.deleteContents();const s=document.createTextNode(e);n.insertNode(s),n.selectNodeContents(s),n.collapse(!1);const a=window.getSelection();a?.removeAllRanges(),a?.addRange(n)}}#n(){if(!ComponentHelpers.ScheduledRender.isScheduledRender(this))throw new Error("HeaderSectionRow render was not scheduled");render(html`<span contenteditable="true" class="editable" tabindex="0" .innerText=${this.#s}></span>`,this.#e,{host:this})}focus(){requestAnimationFrame((()=>{const e=this.#e.querySelector(".editable");e?.focus()}))}}ComponentHelpers.CustomElements.defineComponent("devtools-editable-span",EditableSpan);