';
targets.set(this, pre);
this.style.cssText += `
tab-size: 2;
white-space: pre;
font-family: monospace;
color: transparent;
background-color: transparent;
`;
// setup internal class
const {autoHeight, language, tabSize} = this;
if (autoHeight) {
delete this.autoHeight;
this.autoHeight = autoHeight;
}
if (language) {
delete this.language;
this.language = language;
}
if (tabSize) {
delete this.tabSize;
this.tabSize = tabSize;
}
}
/**
* Avoid vertical scrollbar.
* @type {boolean}
*/
get autoHeight() {
return this.hasAttribute('auto-height');
}
set autoHeight(value) {
if (value) {
this.style.resize = 'none';
this.setAttribute('auto-height', '');
}
else {
this.style.resize = null;
this.removeAttribute('auto-height');
}
}
/**
* The used language, compatible with hljs.
* @type {string}
*/
get language() {
return this.getAttribute('language');
}
set language(name) {
this.setAttribute('language', name);
}
/**
* The tab-size value.
* @type {string}
*/
get tabSize() {
return this.getAttribute('tab-size');
}
set tabSize(value) {
this.setAttribute('tab-size', value);
}
/**
* Set code to highlight.
* @type {string}
*/
get value() {
return super.value;
}
set value(code) {
super.value = code;
this.oninput();
}
attributeChangedCallback(name, _, value) {
switch (name) {
case 'auto-height':
this.style.height = null;
if (value != null) {
this.value = this.value.trimEnd();
_autoHeight.call(this);
}
break;
case 'disabled':
if (FF)
targets.get(this).style.pointerEvents = this.disabled ? 'all' : 'none';
break;
case 'language':
let className = 'hljs';
if (value)
className += ' language-' + value;
targets.get(this).querySelector('code').className = className;
break;
case 'tab-size':
this.style.tabSize = value;
targets.get(this).style.tabSize = value;
break;
}
}
connectedCallback() {
components.add(this);
this.parentElement.insertBefore(targets.get(this), this.nextSibling);
this.oninput();
_backgroundColor.call(this);
resizeObserver.observe(this, options);
this.addEventListener('keydown', this);
this.addEventListener('scroll', this);
this.addEventListener('input', this);
}
disconnectedCallback() {
components.delete(this);
targets.get(this).remove();
resizeObserver.unobserve(this);
this.removeEventListener('keydown', this);
this.removeEventListener('scroll', this);
this.removeEventListener('input', this);
}
handleEvent(event) { this['on' + event.type](event); }
onkeydown(event) {
if (event.key === 'Tab') {
HighlightedCode.insertText('\t');
event.preventDefault();
}
}
oninput() {
dropIdle(this.idle);
const idle = (this.idle = setIdle(
() => {
const {language, value} = this;
const code = targets.get(this).querySelector('code');
// Please note no language is very slow!
if (!language)
code.className = 'hljs';
code.innerHTML = (
language ?
hljs.highlight(value, {language}) :
hljs.highlightAuto(value)
).value + '