fix(core): update

package.json

@@ -20,6 +20,7 @@
     "@gitzone/tsrun": "^1.2.32",
     "@losslessone_private/loint-pubapi": "^1.0.13",
     "@pushrocks/smartexpress": "^4.0.4",
+    "@pushrocks/smartmarkdown": "^2.0.14",
     "monaco-editor": "^0.33.0",
     "xterm": "^4.18.0",
     "xterm-addon-fit": "^0.5.0"
@@ -30,11 +31,7 @@
     "@gitzone/tstest": "^1.0.71",
     "@gitzone/tswatch": "^2.0.1",
     "@pushrocks/projectinfo": "^5.0.1",
-    "@pushrocks/tapbundle": "^5.0.3",
+    "@pushrocks/tapbundle": "^5.0.3"
-    "buffer": "^6.0.3",
-    "process": "^0.11.10",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.17.0"
   },
   "files": [
     "ts/**/*",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@designestate/dees-editor',
-  version: '1.0.69',
+  version: '1.0.70',
   description: 'an advanced editor for markdown documents based on monaco.'
 }

ts_web/elements/dees-editor-markdownoutlet.ts

@@ -0,0 +1,42 @@
+import { customElement, DeesElement, html, TemplateResult } from '@designestate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-editormarkdownoutlet': DeesEditorMarkdownOutlet;
+  }
+}
+
+@customElement('dees-editormarkdownoutlet')
+export class DeesEditorMarkdownOutlet extends DeesElement {
+  // DEMO
+  public static demo = () => html`<dees-editormarkdownoutlet></dees-editormarkdownoutlet>`;
+
+  // INSTANCE
+  private outlet: HTMLElement;
+
+  public render(): TemplateResult {
+    return html`
+      <div class="outlet markdown-body">
+        <h1>Hi there</h1>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    await super.firstUpdated(_changedProperties);
+    const styleElement = document.createElement('style');
+    const cssText = await (
+      await fetch('https://unpkg.com/github-markdown-css@5.1.0/github-markdown-dark.css')
+    ).text();
+    styleElement.textContent = cssText;
+    this.shadowRoot.append(styleElement);
+  }
+
+  public async updateHtmlText(htmlTextArg: string) {
+    await this.updateComplete;
+    if (!this.outlet) {
+      this.outlet = this.shadowRoot.querySelector('.outlet');
+    }
+    this.outlet.innerHTML = htmlTextArg;
+  }
+}

ts_web/elements/dees-editor.ts

@@ -1,9 +1,14 @@
-import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  TemplateResult,
+  css,
+  cssManager,
+} from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 
-const deferred = domtools.plugins.smartpromise.defer();
-let monacoDeferred: typeof deferred;
-
 import type * as monaco from 'monaco-editor';
 
 declare global {
@@ -14,9 +19,30 @@ declare global {
 
 @customElement('dees-editor')
 export class DeesEditor extends DeesElement {
-  public static demo = () => html`
+  // DEMO
-    <dees-editor></dees-editor>
+  public static demo = () => html` <dees-editor></dees-editor> `;
-  `;
+
+  // STATIC
+  public static monacoDeferred: ReturnType<typeof domtools.plugins.smartpromise.defer>;
+
+  // INSTANCE
+  public editorDeferred = domtools.plugins.smartpromise.defer<monaco.editor.IStandaloneCodeEditor>();
+  public language = 'typescript';
+
+  @property({
+    type: String
+  })
+  public content = "function hello() {\n\talert('Hello world!');\n}";
+
+  @property({
+    type: Object
+  })
+  public contentSubject = new domtools.rxjs.Subject<string>();
+
+  @property({
+    type: Boolean
+  })
+  public wordWrap: monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] = 'off';
 
   constructor() {
     super();
@@ -27,7 +53,6 @@ export class DeesEditor extends DeesElement {
     domtools.elementBasic.staticStyles,
     css`
       :host {
-        
       }
 
       * {
@@ -39,10 +64,10 @@ export class DeesEditor extends DeesElement {
         height: 100%;
         width: 100%;
       }
-    `
+    `,
-  ]
+  ];
 
-  public render (): TemplateResult {
+  public render(): TemplateResult {
     return html`
       <div class="mainbox">
         <div id="container"></div>
@@ -50,39 +75,52 @@ export class DeesEditor extends DeesElement {
     `;
   }
 
-  public async firstUpdated (_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
+  public async firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ): Promise<void> {
     super.firstUpdated(_changedProperties);
     const container = this.shadowRoot.getElementById('container');
-    
+
-    if (!monacoDeferred) {
+    if (!DeesEditor.monacoDeferred) {
-      monacoDeferred = domtools.plugins.smartpromise.defer();
+      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}",
+        value: this.content,
-        language: 'markdown',
+        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());
   }
-}
+}

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`<dees-editormarkdown></dees-editormarkdown>`;
+
+  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`
+      <div class="gridcontainer">
+        <div class="editorContainer">
+          <dees-editor
+            .language=${'markdown'}
+            .content=${`# a test content
+
+This is test content that is of longer form an hopefully starts to wrap when I need it. And yes, it does perfectly. nice.
+
+Test | Hello
+--- | ---
+Yeah | So good
+
+This is real asset I think. Why would we want to leave that on the table? Can you tell my that?
+
+Why are we here?
+
+Do you know?
+
+> note:
+There is something going on.
+
+\`\`\`typescript
+const hello = 'yes'
+\`\`\`
+`}
+            wordWrap="bounded"
+          ></dees-editor>
+        </div>
+        <div class="outletContainer">
+          <dees-editormarkdownoutlet></dees-editormarkdownoutlet>
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(_changedPropertiesArg) {
+    await super.firstUpdated(_changedPropertiesArg);
+    const editor = this.shadowRoot.querySelector('dees-editor');
+    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);
+    })
+  }
+}

ts_web/elements/index.ts

@@ -1,2 +1,4 @@
 export * from './dees-editor.js';
+export * from './dees-editormarkdown.js';
+export * from './dees-editor-markdownoutlet.js';
 export * from './dees-terminal.js';