1.0.73

.gitea/workflows/default_nottags.yaml

@@ -0,0 +1,66 @@
+name: Default (not tags)
+
+on:
+  push:
+    tags-ignore:
+      - '**'
+
+env:
+  IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
+  NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
+  NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
+  NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
+  NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
+
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm and npmci
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+
+      - name: Run npm prepare
+        run: npmci npm prepare
+
+      - name: Audit production dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --prod
+        continue-on-error: true
+
+      - name: Audit development dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --dev
+        continue-on-error: true
+
+  test:
+    if: ${{ always() }}
+    needs: security
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Test stable
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm test
+
+      - name: Test build
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm build

.gitea/workflows/default_tags.yaml

@@ -0,0 +1,124 @@
+name: Default (tags)
+
+on:
+  push:
+    tags:
+      - '*'
+
+env:
+  IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
+  NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
+  NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
+  NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
+  NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
+
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Audit production dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --prod
+        continue-on-error: true
+
+      - name: Audit development dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --dev
+        continue-on-error: true
+
+  test:
+    if: ${{ always() }}
+    needs: security
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Test stable
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm test
+
+      - name: Test build
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm build
+
+  release:
+    needs: test
+    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Release
+        run: |
+          npmci node install stable
+          npmci npm publish
+
+  metadata:
+    needs: test
+    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+    continue-on-error: true
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Code quality
+        run: |
+          npmci command npm install -g typescript
+          npmci npm install
+
+      - name: Trigger
+        run: npmci trigger
+
+      - name: Build docs and upload artifacts
+        run: |
+          npmci node install stable
+          npmci npm install
+          pnpm install -g @gitzone/tsdoc
+          npmci command tsdoc
+        continue-on-error: true

.gitlab-ci.yml

@@ -1,141 +0,0 @@
-# gitzone ci_default
-image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-
-cache:
-  paths:
-    - .npmci_cache/
-  key: '$CI_BUILD_STAGE'
-
-stages:
-  - security
-  - test
-  - release
-  - metadata
-
-before_script:
-  - npm install -g @shipzone/npmci
-
-# ====================
-# security stage
-# ====================
-mirror:
-  stage: security
-  script:
-    - npmci git mirror
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-auditProductionDependencies:
-  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-  stage: security
-  script:
-    - npmci npm prepare
-    - npmci command npm install --production --ignore-scripts
-    - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command npm audit --audit-level=high --only=prod --production
-  tags:
-    - docker
-  allow_failure: true
-
-auditDevDependencies:
-  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-  stage: security
-  script:
-    - npmci npm prepare
-    - npmci command npm install --ignore-scripts
-    - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command npm audit --audit-level=high --only=dev
-  tags:
-    - docker
-  allow_failure: true
-
-# ====================
-# test stage
-# ====================
-
-testStable:
-  stage: test
-  script:
-    - npmci npm prepare
-    - npmci node install stable
-    - npmci npm install
-    - npmci npm test
-  coverage: /\d+.?\d+?\%\s*coverage/
-  tags:
-    - docker
-
-testBuild:
-  stage: test
-  script:
-    - npmci npm prepare
-    - npmci node install stable
-    - npmci npm install
-    - npmci command npm run build
-  coverage: /\d+.?\d+?\%\s*coverage/
-  tags:
-    - docker
-
-release:
-  stage: release
-  script:
-    - npmci node install stable
-    - npmci npm publish
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-# ====================
-# metadata stage
-# ====================
-codequality:
-  stage: metadata
-  allow_failure: true
-  only:
-    - tags
-  script:
-    - npmci command npm install -g tslint typescript
-    - npmci npm prepare
-    - npmci npm install
-    - npmci command "tslint -c tslint.json ./ts/**/*.ts"
-  tags:
-    - lossless
-    - docker
-    - priv
-
-trigger:
-  stage: metadata
-  script:
-    - npmci trigger
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-pages:
-  stage: metadata
-  script:
-    - npmci node install lts
-    - npmci command npm install -g @gitzone/tsdoc
-    - npmci npm prepare
-    - npmci npm install
-    - npmci command tsdoc
-  tags:
-    - lossless
-    - docker
-    - notpriv
-  only:
-    - tags
-  artifacts:
-    expire_in: 1 week
-    paths:
-      - public
-  allow_failure: true

.vscode/settings.json

@@ -22,6 +22,5 @@
         }
       }
     }
-  ],
+  ]
-  "typescript.tsdk": "node_modules/typescript/lib"
 }

html/index.html

@@ -1,7 +1,6 @@
-<!--gitzone default-->
+<!--gitzone element-->
-<!-- made by Lossless GmbH -->
+<!-- made by Task Venture Capital GmbH -->
 <!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
-<!DOCTYPE html>
 <html lang="en">
   <head>
     <!--Lets set some basic meta tags-->
@@ -10,119 +9,20 @@
       content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
     />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <meta name="theme-color" content="#000000">
-
-    <!--Lets make sure we recognize this as an PWA-->
-    <link rel="manifest" href="/manifest.json" />
-    <link rel="icon" type="image/png" href="/assetbroker/manifest/favicon.png">
 
     <!--Lets load standard fonts-->
+    <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
+    <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
 
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-
-    <link
-      crossorigin="anonymous"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      rel="stylesheet"
-    />
-    <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@100;200;300;400;500;600;700;800&family=Roboto+Slab:wght@100;200;300;400;500;600;700;900&family=Roboto:wght@100;300;400;500;700;900&family=Roboto+Mono:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Just+Me+Again+Down+Here&display=swap" rel="stylesheet">
-
-
-    <!--Lets avoid a rescaling flicker due to default body margins-->
     <style>
       body {
-        background: #000;
         margin: 0px;
+        background: #222222;
       }
     </style>
-    <script>
+
-      projectVersion = '';
+    <script type="module" src="/bundle.js"></script>
-    </script>
   </head>
   <body>
-    <noscript>
-      <style>
-        body {
-          background: #303f9f;
-          font-family: 'Roboto', sans-serif;
-          color: #ffffff;
-        }
-
-        a {
-          color: #ffffff;
-          text-decoration: none;
-        }
-
-        .logo {
-          margin-top: 100px;
-          text-align: center;
-        }
-
-        img {
-          width: 130px;
-        }
-
-        .container {
-          width: 600px;
-          margin: auto;
-          margin-top: 20px;
-          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
-          overflow: hidden;
-          border-radius: 3px;
-          background: #4357d9;
-        }
-        .contentHeader {
-          padding: 20px;
-          text-align: center;
-          font-size: 25px;
-          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .content {
-          padding: 20px;
-        }
-        .footer {
-          padding: 10px;
-          text-align: center;
-        }
-      </style>
-      <div class="logo">
-        <img src="https://assetbroker.lossless.one/brandfiles/lossless/svg-minimal-bright.svg">
-      </div>
-      <div class="container">
-        
-        <div class="contentHeader">
-          We need JavaScript to run properly!
-        </div>
-        <div class="content">
-          This site is being built using lit-element (made by Google). This technology works with
-          JavaScript. Subsequently this website does not work as intended by Lossless GmbH without
-          JavaScript.
-        </div>
-      </div>
-      <div class="footer">
-        <a href="https://lossless.gmbh">Legal Info</a> |
-        <a href="https://lossless.gmbh/privacy">Privacy Policy</a>
-      </div>
-    </noscript>
-    <script type="text/javascript" async defer>
-      window.revenueEnabled = true;
-      const runRevenueCheck = async () => {
-        var e = document.createElement('div');
-        e.id = '476kjuhzgtr764';
-        e.style.display = 'none';
-        document.body.appendChild(e);
-        if (document.getElementById('476kjuhzgtr764')) {
-          window.revenueEnabled = true;
-        } else {
-          window.revenueEnabled = false;
-        }
-        console.log(`revenue enabled: ${window.revenueEnabled}`);
-      };
-
-      runRevenueCheck();
-    </script>
   </body>
-  <script defer type="module" src="/bundle.js"></script>
 </html>

html/index.ts

@@ -1,6 +1,6 @@
 // dees tools
-import * as deesWccTools from '@designestate/dees-wcctools';
+import * as deesWccTools from '@design.estate/dees-wcctools';
-import * as deesDomTools from '@designestate/dees-domtools';
+import * as deesDomTools from '@design.estate/dees-domtools';
 
 // elements and pages
 import * as elements from '../ts_web/elements/index.js';

npmextra.json

@@ -6,7 +6,7 @@
       "gitscope": "designestate",
       "gitrepo": "dees-editor",
       "description": "an advanced editor for markdown documents based on monaco.",
-      "npmPackagename": "@designestate/dees-editor",
+      "npmPackagename": "@design.estate/dees-editor",
       "license": "MIT",
       "projectDomain": "design.estate"
     }

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@designestate/dees-editor",
+  "name": "@design.estate/dees-editor",
-  "version": "1.0.69",
+  "version": "1.0.73",
   "private": false,
   "description": "an advanced editor for markdown documents based on monaco.",
   "main": "dist_ts_web/index.js",
@@ -9,32 +9,30 @@
   "scripts": {
     "test": "tstest test/",
     "build": "tsbuild element --allowimplicitany --skiplibcheck && tsbundle element --allowimplicitany",
-    "watch": "tswatch element"
+    "watch": "tswatch element",
+    "buildDocs": "tsdoc"
   },
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@designestate/dees-domtools": "^2.0.22",
+    "@design.estate/dees-domtools": "^2.0.34",
-    "@designestate/dees-element": "^2.0.15",
+    "@design.estate/dees-element": "^2.0.29",
-    "@designestate/dees-wcctools": "^1.0.74",
+    "@design.estate/dees-wcctools": "^1.0.78",
-    "@gitzone/tsrun": "^1.2.32",
+    "@git.zone/tsrun": "^1.2.46",
     "@losslessone_private/loint-pubapi": "^1.0.13",
-    "@pushrocks/smartexpress": "^4.0.4",
+    "@push.rocks/smartmarkdown": "^3.0.1",
-    "monaco-editor": "^0.33.0",
+    "@webcontainer/api": "^1.1.5",
-    "xterm": "^4.18.0",
+    "monaco-editor": "^0.43.0",
-    "xterm-addon-fit": "^0.5.0"
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.61",
+    "@git.zone/tsbuild": "^2.1.70",
-    "@gitzone/tsbundle": "^2.0.3",
+    "@git.zone/tsbundle": "^2.0.8",
-    "@gitzone/tstest": "^1.0.71",
+    "@git.zone/tstest": "^1.0.81",
-    "@gitzone/tswatch": "^2.0.1",
+    "@git.zone/tswatch": "^2.0.13",
-    "@pushrocks/projectinfo": "^5.0.1",
+    "@push.rocks/projectinfo": "^5.0.2",
-    "@pushrocks/tapbundle": "^5.0.3",
+    "@push.rocks/tapbundle": "^5.0.8"
-    "buffer": "^6.0.3",
-    "process": "^0.11.10",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.17.0"
   },
   "files": [
     "ts/**/*",

readme.md

@@ -2,7 +2,7 @@
 an advanced editor for markdown documents based on monaco.
 
 ## Availabililty and Links
-* [npmjs.org (npm package)](https://www.npmjs.com/package/@designestate/dees-editor)
+* [npmjs.org (npm package)](https://www.npmjs.com/package/@design.estate/dees-editor)
 * [gitlab.com (source)](https://gitlab.com/designestate/dees-editor)
 * [github.com (source mirror)](https://github.com/designestate/dees-editor)
 * [docs (typedoc)](https://designestate.gitlab.io/dees-editor/)
@@ -13,15 +13,14 @@ Status Category | Status Badge
 -- | --
 GitLab Pipelines | [![pipeline status](https://gitlab.com/designestate/dees-editor/badges/master/pipeline.svg)](https://lossless.cloud)
 GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/designestate/dees-editor/badges/master/coverage.svg)](https://lossless.cloud)
-npm | [![npm downloads per month](https://badgen.net/npm/dy/@designestate/dees-editor)](https://lossless.cloud)
+npm | [![npm downloads per month](https://badgen.net/npm/dy/@design.estate/dees-editor)](https://lossless.cloud)
 Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/designestate/dees-editor)](https://lossless.cloud)
 TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
 node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
 Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](https://lossless.cloud)
-PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@designestate/dees-editor)](https://lossless.cloud)
+PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@design.estate/dees-editor)](https://lossless.cloud)
-PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@designestate/dees-editor)](https://lossless.cloud)
+PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@design.estate/dees-editor)](https://lossless.cloud)
-BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/dees-editor)](https://lossless.cloud)
+BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@design.estate/dees-editor)](https://lossless.cloud)
-Platform support | [![Supports Windows 10](https://badgen.net/badge/supports%20Windows%2010/yes/green?icon=windows)](https://lossless.cloud) [![Supports Mac OS X](https://badgen.net/badge/supports%20Mac%20OS%20X/yes/green?icon=apple)](https://lossless.cloud)
 
 ## Usage
 
@@ -33,7 +32,6 @@ We are always happy for code contributions. If you are not the code contributing
 
 For further information read the linked docs at the top of this readme.
 
-> MIT licensed | **©** [Lossless GmbH](https://lossless.gmbh)
+## Legal
+> MIT licensed | **©** [Task Venture Capital GmbH](https://task.vc)
 | By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
-
-[![repo-footer](https://lossless.gitlab.io/publicrelations/repofooter.svg)](https://maintainedby.lossless.com)

test/test.browser.ts

@@ -1,15 +1,15 @@
-import { expect, expectAsync, tap, webhelpers } from '@pushrocks/tapbundle';
+import { expect, expectAsync, tap, webhelpers } from '@push.rocks/tapbundle';
 
 import * as deesEditorLib from '../ts_web/index.js';
 
 tap.test('test dees-editor', async () => {
-  const deesEditor = new deesEditorLib.DeesEditor;
+  const deesEditor = new deesEditorLib.DeesEditor();
-  expect(deesEditor).toBeInstanceOf(deesEditorLib.DeesEditor)
+  expect(deesEditor).toBeInstanceOf(deesEditorLib.DeesEditor);
 });
 
 tap.test('test dees-terminal', async () => {
   const deesTerminal = await webhelpers.fixture(`<dees-terminal></dees-terminal>`);
   expect(deesTerminal).toBeInstanceOf(deesEditorLib.DeesTerminal);
-})
+});
 
-tap.start()
+tap.start();

ts_web/00_commitinfo_data.ts

@@ -2,7 +2,7 @@
  * autocreated commitinfo by @pushrocks/commitinfo
  */
 export const commitinfo = {
-  name: '@designestate/dees-editor',
+  name: '@design.estate/dees-editor',
-  version: '1.0.69',
+  version: '1.0.73',
   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, type TemplateResult } from '@design.estate/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,8 +1,13 @@
-import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';
+import {
-import * as domtools from '@designestate/dees-domtools';
+  DeesElement,
-
+  property,
-const deferred = domtools.plugins.smartpromise.defer();
+  html,
-let monacoDeferred: typeof deferred;
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
 
 import type * as monaco from 'monaco-editor';
 
@@ -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,100 @@
+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`<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;
+        overflow-y: scroll;
+      }
+    `,
+  ];
+
+  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');
+    
+    // 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);
+    })
+  }
+}

ts_web/elements/dees-terminal.ts

@@ -1,5 +1,15 @@
-import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';
+import {
-import * as domtools from '@designestate/dees-domtools';
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+import * as webcontainer from '@webcontainer/api';
 
 import { Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
@@ -12,9 +22,7 @@ declare global {
 
 @customElement('dees-terminal')
 export class DeesTerminal extends DeesElement {
-  public static demo = () => html`
+  public static demo = () => html` <dees-terminal></dees-terminal> `;
-    <dees-terminal></dees-terminal>
-  `;
 
   constructor() {
     super();
@@ -79,7 +87,7 @@ export class DeesTerminal extends DeesElement {
       */
 
       .xterm {
-          font-feature-settings: "liga" 0;
+        font-feature-settings: 'liga' 0;
         position: relative;
         user-select: none;
         -ms-user-select: none;
@@ -122,7 +130,7 @@ export class DeesTerminal extends DeesElement {
       .xterm .composition-view {
         /* TODO: Composition position got messed up somewhere */
         background: #000;
-          color: #FFF;
+        color: #fff;
         display: none;
         position: absolute;
         white-space: nowrap;
@@ -212,10 +220,10 @@ export class DeesTerminal extends DeesElement {
       .xterm-underline {
         text-decoration: underline;
       }
-    `
+    `,
-  ]
+  ];
 
-  public render (): TemplateResult {
+  public render(): TemplateResult {
     return html`
       <div class="mainbox">
         <div id="container"></div>
@@ -223,11 +231,17 @@ export class DeesTerminal extends DeesElement {
     `;
   }
 
-  public async firstUpdated (_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
+  public async firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ): Promise<void> {
+    const domtools = await this.domtoolsPromise;
     super.firstUpdated(_changedProperties);
     const container = this.shadowRoot.getElementById('container');
 
-    const term = new Terminal();
+    const term = new Terminal({
+      convertEol: true,
+      cursorBlink: true,
+    });
     const fitAddon = new FitAddon();
     term.loadAddon(fitAddon);
 
@@ -238,5 +252,23 @@ export class DeesTerminal extends DeesElement {
     fitAddon.fit();
 
     term.write(`dees-terminal custom terminal. \r\n$ `);
+
+    // lets start the webcontainer
+    // Call only once
+    const webcontainerInstance = await webcontainer.WebContainer.boot();
+    const shellProcess = await webcontainerInstance.spawn('jsh');
+    shellProcess.output.pipeTo(
+      new WritableStream({
+        write(data) {
+          term.write(data);
+        },
+      })
+    );
+    const input = shellProcess.input.getWriter();
+    term.onData((data) => {
+      input.write(data);
+    });
+    await domtools.convenience.smartdelay.delayFor(5000);
+    input.write(`pnpm add isomorphic-git @git.zone/tsbuild\n`);
   }
 }

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';

tsconfig.json

@@ -1,8 +1,14 @@
 {
   "compilerOptions": {
     "experimentalDecorators": true,
-    "target": "ES2020",
+    "useDefineForClassFields": false,
-    "module": "ES2020",
+    "target": "ES2022",
-    "moduleResolution": "node12"
+    "module": "ES2022",
-  }
+    "moduleResolution": "nodenext",
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true
+  },
+  "exclude": [
+    "dist_*/**/*.d.ts"
+  ]
 }