@@ -50,39 +75,52 @@ export class DeesEditor extends DeesElement {
`;
}
- public async firstUpdated (_changedProperties: Map
): Promise {
+ public async firstUpdated(
+ _changedProperties: Map
+ ): Promise {
super.firstUpdated(_changedProperties);
const container = this.shadowRoot.getElementById('container');
-
- if (!monacoDeferred) {
- monacoDeferred = domtools.plugins.smartpromise.defer();
+
+ if (!DeesEditor.monacoDeferred) {
+ DeesEditor.monacoDeferred = domtools.plugins.smartpromise.defer();
const scriptUrl = `https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/loader.js`;
const script = document.createElement('script');
script.src = scriptUrl;
script.onload = () => {
- monacoDeferred.resolve();
- }
+ DeesEditor.monacoDeferred.resolve();
+ };
document.head.appendChild(script);
}
- await monacoDeferred.promise;
+ await DeesEditor.monacoDeferred.promise;
(window as any).require.config({
- paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor/min/vs" }
+ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor/min/vs' },
});
- (window as any).require([ "vs/editor/editor.main" ], function () {
+ (window as any).require(['vs/editor/editor.main'], async () => {
const editor = ((window as any).monaco.editor as typeof monaco.editor).create(container, {
- value: "function hello() {\n\talert('Hello world!');\n}",
- language: 'markdown',
+ value: this.content,
+ language: this.language,
theme: 'vs-dark',
useShadowDOM: true,
fontSize: 16,
automaticLayout: true,
+ wordWrap: this.wordWrap
});
-
+ this.editorDeferred.resolve(editor);
});
- const css = await (await fetch('https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/editor/editor.main.css')).text();
+ const css = await (
+ await fetch('https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/editor/editor.main.css')
+ ).text();
const styleElement = document.createElement('style');
styleElement.textContent = css;
this.shadowRoot.append(styleElement);
+
+
+ // editor is setup let do the rest
+ const editor = await this.editorDeferred.promise;
+ editor.onDidChangeModelContent(async eventArg => {
+ this.contentSubject.next(editor.getValue());
+ });
+ this.contentSubject.next(editor.getValue());
}
-}
\ No newline at end of file
+}
diff --git a/ts_web/elements/dees-editormarkdown.ts b/ts_web/elements/dees-editormarkdown.ts
new file mode 100644
index 0000000..cc3ad8d
--- /dev/null
+++ b/ts_web/elements/dees-editormarkdown.ts
@@ -0,0 +1,101 @@
+import {
+ DeesElement,
+ property,
+ html,
+ customElement,
+ TemplateResult,
+ css,
+ cssManager,
+} from '@designestate/dees-element';
+import * as domtools from '@designestate/dees-domtools';
+
+import * as smartmarkdown from '@pushrocks/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;
+ }
+
+ .outletContainer h1 {
+
+ }
+ `,
+ ];
+
+ public render() {
+ return html`
+
+
+ note:
+There is something going on.
+
+\`\`\`typescript
+const hello = 'yes'
+\`\`\`
+`}
+ wordWrap="bounded"
+ >
+
+
+
+
+