import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager, } from '@design.estate/dees-element'; import * as domtools from '@design.estate/dees-domtools'; import * as smartmarkdown from '@push.rocks/smartmarkdown'; const deferred = domtools.plugins.smartpromise.defer(); declare global { interface HTMLElementTagNameMap { 'dees-editormarkdown': DeesEditorMarkdown; } } @customElement('dees-editormarkdown') export class DeesEditorMarkdown extends DeesElement { public static demo = () => html``; public static styles = [ cssManager.defaultStyles, css` .gridcontainer { position: absolute; height: 100%; width: 100%; display: grid; grid-template-columns: 60% 40%; } .editorContainer { position: relative; } .outletContainer { background: #111; color: #fff; font-family: 'Roboto Slab'; padding: 20px; overflow-y: scroll; } `, ]; public render() { return html`
note: There is something going on. \`\`\`typescript const hello = 'yes' \`\`\` `} wordWrap="bounded" >
`; } public async firstUpdated(_changedPropertiesArg) { await super.firstUpdated(_changedPropertiesArg); const editor = this.shadowRoot.querySelector('dees-editor'); // lets care about wiring the markdown stuff. const markdownOutlet = this.shadowRoot.querySelector('dees-editormarkdownoutlet'); const smartmarkdownInstance = new smartmarkdown.SmartMarkdown(); const mdParsedResult = await smartmarkdownInstance.getMdParsedResultFromMarkdown('loading...') editor.contentSubject.subscribe(async contentArg => { await mdParsedResult.updateFromMarkdownString(contentArg) const html = mdParsedResult.html; markdownOutlet.updateHtmlText(html); }) } }