@teipublisher/pb-components/dist/pb-code-editor.js

Collection of webcomponents underlying TEI Publisher

import{p as e,L as t,h as i,c as o}from"./pb-mixin-e1183270.js";import{t as n}from"./pb-i18n-b62828ba.js";import{J as s,X as r}from"./jinn-codemirror-63cf45e9.js";class l extends s{constructor(){super(),this.unwrap=!1,this.schema=null,this.schemaRoot=null}connectedCallback(){this.schema=this.getAttribute("schema"),this.schemaRoot=this.getAttribute("schema-root"),this.unwrap=this.hasAttribute("unwrap"),super.connectedCallback();const e=this.getAttribute("wrapper");if(e){const t=new DOMParser;let i=t.parseFromString(e,"application/xml"),o=i.getElementsByTagName("parsererror"),n=null;if(o.length)console.error("<jinn-xml-editor> Invalid XML for wrapper attribute: %s",(new XMLSerializer).serializeToString(i));else{if(n=i.firstElementChild,n&&this.hasAttribute("code")){const e=this.getAttribute("code")||"";i=t.parseFromString(e,"application/xml"),o=i.getElementsByTagName("parsererror"),o.length?console.error("<jinn-xml-editor> Invalid XML for code attribute: %s",(new XMLSerializer).serializeToString(i)):i.firstElementChild&&n.appendChild(i.firstElementChild)}this.setValue(n)}}}configure(){var e;const t=this.getToolbarControls(null==(e=this.shadowRoot)?void 0:e.querySelector("[name=toolbar]")),i=this.hasAttribute("check-namespace");this._config=new r(this,t,this.namespace,i,this.unwrap)}emitUpdateEvent(e){if(!this.unwrap)return super.emitUpdateEvent(e);this.updateValue(),super.emitUpdateEvent(this._wrapper)}updateValue(){var e,t;if(!this._wrapper)return console.log("no wrapper !!!"),null;if(this._wrapper.replaceChildren(),this._value)if(this._value instanceof NodeList)for(let t=0;t<this._value.length;t++){const i=this._wrapper.ownerDocument.importNode(this._value[t],!0);null==(e=this._wrapper)||e.appendChild(i)}else{if(!(this._value instanceof Node))throw console.error("<xml-editor> Value is not a node"),new Error("value is not a node");null==(t=this._wrapper)||t.appendChild(this._value)}else console.log("xml editor value is empty")}setValue(e){var t,i;if(!this.unwrap)return super.setValue(e);if((null==(t=this._config)?void 0:t.setFromValue(this._wrapper))===(null==(i=this._config)?void 0:i.setFromValue(e)))return!1;if(e||(this._wrapper=null),"string"==typeof e){const t=(new DOMParser).parseFromString(e,"application/xml");if(!t.firstElementChild)return!1;e=t.firstElementChild}return this._wrapper=e,this._value=null==e?void 0:e.childNodes,!0}getValue(){if(!this.unwrap)return super.getValue();if(!this._wrapper)return null;if(!(this._wrapper instanceof Element))throw new Error("Value is not a node");return this.updateValue(),this._wrapper}}customElements.get("jinn-xml-editor")||window.customElements.define("jinn-xml-editor",l);const a='\n    :host {\n        display: block;\n        width: 100%;\n    }\n    jinn-codemirror {\n        font-size: 1rem;\n        display:block;\n        width:100%;\n    }\n    jinn-codemirror[valid="true"] {\n        outline: thin solid green;\n    }\n    jinn-codemirror[valid="false"] {\n        outline: thin solid red;\n    }\n    #leiden-editor {\n        margin-bottom:0.5rem;\n    }\n    [slot=toolbar] {\n        display: flex;\n    }\n    .hidden {\n        display: none;\n    }\n    #close-leiden {\n        margin-left: .75rem;\n        font-weight: bold;\n    }',d=["Shift","Alt","Meta","Control","ArrowLeft","ArrowRight","ArrowDown","ArrowUp","PageDown","PageUp","Home","End"],h={leiden_plus:"Leiden+",edcs:"EDCS/EDH",default:"Petrae"};function c(e){const t=[];return Object.entries(h).forEach(([i,o])=>{t.push(`<option value="${i}" ${i===e?"selected":""}>${o}</option>`)}),`<select name="modes">${t.join("\n")}</select>`}class u extends HTMLElement{constructor(){super(),this.mode="leiden_plus",this.placeholder="",this.showLeiden=!1,this.xmlEditor=null,this.valid=!0,this.unwrap=!1,this.schema=null,this.schemaRoot=null,this.modeSelect=!1,this.attachShadow({mode:"open"})}set value(e){this.xmlEditor.value=e}get value(){return this.xmlEditor.value}connectedCallback(){var e,t,i,o;this.unwrap=this.hasAttribute("unwrap"),this.schema=this.getAttribute("schema"),this.schemaRoot=this.getAttribute("schema-root"),this.modeSelect=this.hasAttribute("mode-select"),this.mode=this.getAttribute("mode")||"leiden_plus",this.placeholder=this.getAttribute("placeholder")||"",this.showLeiden=this.hasAttribute("show-leiden"),this.shadowRoot.innerHTML=`\n            <style>\n                ${a}\n            </style>\n            <jinn-codemirror id="leiden-editor" class="${this.showLeiden?"":"hidden"}" mode="${this.mode}">\n                <div slot="toolbar">\n                    ${this.modeSelect?c(this.mode):""}\n                    <slot name="leiden-toolbar"></slot>\n                    <button part="button" id="close-leiden">Close</button>\n                </div>\n            </jinn-codemirror>\n            <jinn-xml-editor id="xml-editor" ${this.unwrap?"unwrap":""} schema="${this.schema}"\n                schema-root="${this.schemaRoot}" placeholder="${this.placeholder}">\n                <div slot="toolbar">\n                    <button part="button" id="import" title="Import from Leiden markup">Leiden Editor</button>\n                    <slot name="xml-toolbar"></slot>\n                </div>\n            </jinn-xml-editor>\n        `,this.xmlEditor=null==(e=this.shadowRoot)?void 0:e.querySelector("#xml-editor");const n=null==(t=this.shadowRoot)?void 0:t.querySelector("#leiden-editor"),s=null==(i=this.shadowRoot)?void 0:i.querySelector("#import"),r=null==(o=this.shadowRoot)?void 0:o.querySelector("#close-leiden");if(!(this.xmlEditor&&n&&s&&r))throw new Error("One or more components were not initialized");let l=!0,h=this.showLeiden;n.addEventListener("update",e=>{e.stopPropagation(),this.showLeiden=!1,l&&(this.xmlEditor.content=e.detail.content),l=!0}),this.xmlEditor.addEventListener("keyup",e=>{if(h){if(d.indexOf(e.key)>-1)return;p()}});const u=()=>{s.classList.add("hidden"),n.classList.remove("hidden"),h=!0,n.focus()},p=()=>{var e;n.classList.add("hidden"),s.classList.remove("hidden"),h=!1,null==(e=this.xmlEditor)||e.focus(),l=!1,null==n||n.clear()},m=()=>{var e;if(n.classList.contains("hidden")||this.showLeiden)if(this.xmlEditor.content.length>0){if(!this.valid)return void alert("The XML contains errors. Cannot convert to Leiden+");const t=null==(e=this.xmlEditor)?void 0:e.value;l=!1,n.setMode("leiden_plus",!1),u(),this.unwrap&&t instanceof Element?n.value=t.childNodes:n.value=t}else u(),n.value="";else p()};s.addEventListener("click",()=>{m()}),r.addEventListener("click",()=>{p()}),this.xmlEditor.addEventListener("invalid",e=>{e.stopPropagation(),this.valid=!1,this.setAttribute("valid",this.valid.toString()),this.dispatchEvent(new CustomEvent("invalid",{detail:e.detail,composed:!0,bubbles:!0}))}),this.xmlEditor.addEventListener("valid",e=>{e.stopPropagation(),this.valid=!0,this.setAttribute("valid",this.valid.toString()),this.dispatchEvent(new CustomEvent("valid",{detail:e.detail,composed:!0,bubbles:!0}))}),this.xmlEditor.addEventListener("update",()=>{this.showLeiden&&m(),this.showLeiden=!1},{once:!0})}}customElements.get("jinn-epidoc-editor")||window.customElements.define("jinn-epidoc-editor",u);class p extends(e(t)){static get properties(){return Object.assign(Object.assign({},super.properties),{},{code:{type:String,reflect:!0},mode:{type:String},label:{type:String},placeholder:{type:String},tabSize:{type:Number},linter:{attribute:!0}})}constructor(){super(),this.code="",this.mode="xml",this.placeholder="odd.editor.model.empty",this.tabSize=2,this.label="",this.linter="",this._editor=null}connectedCallback(){super.connectedCallback()}firstUpdated(){super.firstUpdated(),this._editor=this.shadowRoot.getElementById("editor")}render(){return i`
            <div class="label">${this.label}</div>
            <jinn-codemirror id="editor" mode="${this.mode}" code="${this.code}" placeholder="${n(this.placeholder)}"></jinn-codemirror>
        `}getSource(){return this._editor?this._editor.value:""}_setCode(){this.dispatchEvent(new CustomEvent("code-changed",{composed:!0,bubbles:!0,detail:{code:this.getSource()}}))}refresh(){}static get styles(){return o`
            :host {
                display: block;
                width: 100%;
                margin: 0;
                position: relative;
                color:inherit;
            }

            #editor {
              width: 100%;
              height: auto;
            }

            .label {
                color: var(--paper-grey-500);
                margin-bottom:5px;
            }
        `}}customElements.define("pb-code-editor",p);export{p as PbCodeEditor};