fix(core): update

This commit is contained in:
Philipp Kunz 2022-05-20 16:26:03 +02:00
parent 1e01b59d32
commit cd5a083fa8
7 changed files with 2573 additions and 542 deletions

2871
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -20,6 +20,7 @@
"@gitzone/tsrun": "^1.2.32", "@gitzone/tsrun": "^1.2.32",
"@losslessone_private/loint-pubapi": "^1.0.13", "@losslessone_private/loint-pubapi": "^1.0.13",
"@pushrocks/smartexpress": "^4.0.4", "@pushrocks/smartexpress": "^4.0.4",
"@pushrocks/smartmarkdown": "^2.0.14",
"monaco-editor": "^0.33.0", "monaco-editor": "^0.33.0",
"xterm": "^4.18.0", "xterm": "^4.18.0",
"xterm-addon-fit": "^0.5.0" "xterm-addon-fit": "^0.5.0"
@ -30,11 +31,7 @@
"@gitzone/tstest": "^1.0.71", "@gitzone/tstest": "^1.0.71",
"@gitzone/tswatch": "^2.0.1", "@gitzone/tswatch": "^2.0.1",
"@pushrocks/projectinfo": "^5.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": [ "files": [
"ts/**/*", "ts/**/*",

View File

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

View File

@ -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;
}
}

View File

@ -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'; import * as domtools from '@designestate/dees-domtools';
const deferred = domtools.plugins.smartpromise.defer();
let monacoDeferred: typeof deferred;
import type * as monaco from 'monaco-editor'; import type * as monaco from 'monaco-editor';
declare global { declare global {
@ -14,9 +19,30 @@ declare global {
@customElement('dees-editor') @customElement('dees-editor')
export class DeesEditor extends DeesElement { 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() { constructor() {
super(); super();
@ -27,7 +53,6 @@ export class DeesEditor extends DeesElement {
domtools.elementBasic.staticStyles, domtools.elementBasic.staticStyles,
css` css`
:host { :host {
} }
* { * {
@ -39,10 +64,10 @@ export class DeesEditor extends DeesElement {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
` `,
] ];
public render (): TemplateResult { public render(): TemplateResult {
return html` return html`
<div class="mainbox"> <div class="mainbox">
<div id="container"></div> <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); super.firstUpdated(_changedProperties);
const container = this.shadowRoot.getElementById('container'); 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 scriptUrl = `https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/loader.js`;
const script = document.createElement('script'); const script = document.createElement('script');
script.src = scriptUrl; script.src = scriptUrl;
script.onload = () => { script.onload = () => {
monacoDeferred.resolve(); DeesEditor.monacoDeferred.resolve();
} };
document.head.appendChild(script); document.head.appendChild(script);
} }
await monacoDeferred.promise; await DeesEditor.monacoDeferred.promise;
(window as any).require.config({ (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, { 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', theme: 'vs-dark',
useShadowDOM: true, useShadowDOM: true,
fontSize: 16, fontSize: 16,
automaticLayout: true, 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'); const styleElement = document.createElement('style');
styleElement.textContent = css; styleElement.textContent = css;
this.shadowRoot.append(styleElement); 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());
} }
} }

View File

@ -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);
})
}
}

View File

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