diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index c6f25a1..b454901 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@designestate/dees-catalog', - version: '1.0.160', + version: '1.0.161', description: 'website for lossless.com' } diff --git a/ts_web/elements/dees-dataview-codebox.ts b/ts_web/elements/dees-dataview-codebox.ts index 88d8fee..0a227bf 100644 --- a/ts_web/elements/dees-dataview-codebox.ts +++ b/ts_web/elements/dees-dataview-codebox.ts @@ -30,9 +30,10 @@ export class DeesDataviewCodebox extends DeesElement { public progLang: string = 'typescript'; @property({ - type: String + type: String, + reflect: true, }) - public codeToDisplay: string = '// no code set'; + public codeToDisplay: string = ''; constructor() { super(); @@ -143,12 +144,15 @@ export class DeesDataviewCodebox extends DeesElement { }) })()} -
${this.codeToDisplay}
+
`;
}
+ @state()
+ private codeToDisplayStore = '';
+
public async updated(_changedProperties) {
super.updated(_changedProperties);
console.log('highlighting now');
@@ -159,11 +163,16 @@ export class DeesDataviewCodebox extends DeesElement {
slottedCodeNodes.push(childNode as Text);
}
});
- if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText) {
- this.codeToDisplay = smartstring.indent.normalize(slottedCodeNodes[0].wholeText);
+ if (this.codeToDisplay && this.codeToDisplay !== this.codeToDisplayStore) {
+ this.codeToDisplayStore = smartstring.indent.normalize(this.codeToDisplay);
+ }
+ if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText && !this.codeToDisplay) {
+ this.codeToDisplayStore = smartstring.indent.normalize(slottedCodeNodes[0].wholeText);
+ this.codeToDisplay = this.codeToDisplayStore;
}
await domtools.plugins.smartdelay.delayFor(0);
const localCodeNode = this.shadowRoot.querySelector('code');
- hlight.highlightBlock(localCodeNode);
+ const html = hlight.highlight(this.codeToDisplayStore, {language: this.progLang, ignoreIllegals: true});
+ localCodeNode.innerHTML = html.value;
}
}