diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 6125f50..a1398db 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -17,6 +17,7 @@ import { WhatsNewComponent } from './whats-new/whats-new.component'; import { ImpressumComponent } from './impressum/impressum.component'; import { ConnectViaUrlComponent } from './connect-via-url/connect-via-url.component'; import { DeploySpecComponent } from './user-input/deploy-spec/deploy-spec.component'; +import { PlaygroundComponent } from './playground/playground.component'; const routes: Routes = [ { path: '', component: HomeComponent }, @@ -33,6 +34,7 @@ const routes: Routes = [ { path: 'settings', component: SettingsAdvancedComponent }, { path: 'settings/:settingsName', component: SettingsAdvancedComponent }, { path: 'markdown', component: MarkdownCheatSheetComponent }, + { path: 'playground', component: PlaygroundComponent }, { path: 'help', component: GetHelpComponent }, { path: 'info', component: WhatsNewComponent }, { path: 'impressum', component: ImpressumComponent }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 36b991c..f4336c9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -60,6 +60,7 @@ import { NotificationComponent } from './notification/notification.component'; import { DeploySpecComponent } from './user-input/deploy-spec/deploy-spec.component'; import { HeadingComponent } from './heading/heading.component'; import { CookieMessageComponent } from './cookie-message/cookie-message.component'; +import { PlaygroundComponent } from './playground/playground.component'; @NgModule({ declarations: [ AppComponent, @@ -114,6 +115,7 @@ import { CookieMessageComponent } from './cookie-message/cookie-message.componen DeploySpecComponent, HeadingComponent, CookieMessageComponent, + PlaygroundComponent, ], imports: [ BrowserModule, diff --git a/src/app/edit/edit-content/edit-content.component.ts b/src/app/edit/edit-content/edit-content.component.ts index bb098a5..67ef49f 100644 --- a/src/app/edit/edit-content/edit-content.component.ts +++ b/src/app/edit/edit-content/edit-content.component.ts @@ -99,14 +99,14 @@ export class EditContentComponent { excludeCodeBlocks: boolean, translatePage: boolean ) { - if(!translatePage){ + if (!translatePage) { this.data = await this.translateText( this.data, tolang, excludeCodeBlocks ); this.setData(); - }else{ + } else { this.page.Content = await this.translateText( this.page.Content, tolang, @@ -137,7 +137,7 @@ export class EditContentComponent { let inCodeBlock = false; for (let i = 0; i < lines.length; i++) { let l = lines[i]; - if ((l.startsWith('![') || l.startsWith('?['))) { + if (l.startsWith('![') || l.startsWith('?[')) { newText += l + '\n'; continue; } diff --git a/src/app/markdown-cheat-sheet/markdown-cheat-sheet.component.html b/src/app/markdown-cheat-sheet/markdown-cheat-sheet.component.html index 67146df..974fc78 100644 --- a/src/app/markdown-cheat-sheet/markdown-cheat-sheet.component.html +++ b/src/app/markdown-cheat-sheet/markdown-cheat-sheet.component.html @@ -176,265 +176,21 @@

Markdown Syntax

~~~language
- this = codeblock["fenced"]
+ this = codewindow["not-copyable"]
~~~ - - Strikethrough - - ~~The world is flat.~~ - - - -

- You can - download this cheat sheet as a Markdown file - for use in your Markdown application. -

- - - diff --git a/src/app/markdown-cheat-sheet/markdown-cheat-sheet.component.scss b/src/app/markdown-cheat-sheet/markdown-cheat-sheet.component.scss index a68b37c..504f1d9 100644 --- a/src/app/markdown-cheat-sheet/markdown-cheat-sheet.component.scss +++ b/src/app/markdown-cheat-sheet/markdown-cheat-sheet.component.scss @@ -42,3 +42,21 @@ transform: scale(1.1); } } +.playgroundButton { + transition: 0.3s; + cursor: pointer; + border: none; + font-size: 20px; + background-color: var(--primary-color); + width: 150px; + height: 40px; + margin-bottom: 20px; + border-radius: 5px; + color: var(--inverted-text-color); + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); + margin-right: auto; + &:hover { + background-color: var(--secondary-color); + transform: scale(1.1); + } +} diff --git a/src/app/markdown-cheat-sheet/markdown-cheat-sheet.component.ts b/src/app/markdown-cheat-sheet/markdown-cheat-sheet.component.ts index 04fe4bd..08b7e75 100644 --- a/src/app/markdown-cheat-sheet/markdown-cheat-sheet.component.ts +++ b/src/app/markdown-cheat-sheet/markdown-cheat-sheet.component.ts @@ -12,6 +12,10 @@ export class MarkdownCheatSheetComponent { goBack() { // go to the previous page this.router.navigate(['/']); + } + goToPlayground() { + // go to the previous page + this.router.navigate(['/playground']); } } diff --git a/src/app/markdown-content/markdown-content.component.ts b/src/app/markdown-content/markdown-content.component.ts index 3f48566..641d984 100644 --- a/src/app/markdown-content/markdown-content.component.ts +++ b/src/app/markdown-content/markdown-content.component.ts @@ -147,23 +147,6 @@ export class MarkdownContentComponent { if (i != lines.length) i--; } } - - /* -```javascript -let i = 0 -i++ -let z = 3 -z++ -``` -*/ - - // https://stackoverflow.com/questions/48879695/load-component-via-innerhtml-in-angular5 - - /* this.markdown = this.mdService.parse(x); - for (let codeblock of codeblocks) { - this.markdown += codeblock; - } - console.log(this.markdown); */ } /* private addComponent(template: any) { diff --git a/src/app/playground/playground.component.html b/src/app/playground/playground.component.html new file mode 100644 index 0000000..8c4a8c4 --- /dev/null +++ b/src/app/playground/playground.component.html @@ -0,0 +1,22 @@ + +
+ +

Markdown Playground

+
+ +
+
+ +
+ + + + +
diff --git a/src/app/playground/playground.component.scss b/src/app/playground/playground.component.scss new file mode 100644 index 0000000..1c539ef --- /dev/null +++ b/src/app/playground/playground.component.scss @@ -0,0 +1,64 @@ +.container { + padding-top: 100px; + padding-left: 20px; + color: var(--text-color); + a { + color: var(--text-color); + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + table { + border-collapse: collapse; + border-spacing: 0; + width: 90%; + border: 1px solid var(--text-color); + box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); + th, + td { + text-align: left; + padding: 16px; + } + tr:nth-child(even) { + background-color: var(--header-color); + } + } +} +.backButton { + transition: 0.3s; + cursor: pointer; + border: none; + font-size: 20px; + background-color: var(--primary-color); + width: 100px; + height: 40px; + border-radius: 5px; + color: var(--inverted-text-color); + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); + margin-right: auto; + &:hover { + background-color: var(--secondary-color); + transform: scale(1.1); + } +} +.contentBox { + width: 80%; + margin: 20px auto; + border: 1px solid #ccc; + border-radius: 10px; + box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); + padding: 20px; + font-size: 20px; + textarea { + width: 100%; + border: none; + border-radius: 10px; + resize: vertical; + color: var(--text-color); + background-color: var(--bg-color); + &:focus-visible { + outline: 1px solid #ccc; + } + } +} diff --git a/src/app/playground/playground.component.spec.ts b/src/app/playground/playground.component.spec.ts new file mode 100644 index 0000000..af68955 --- /dev/null +++ b/src/app/playground/playground.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PlaygroundComponent } from './playground.component'; + +describe('PlaygroundComponent', () => { + let component: PlaygroundComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [PlaygroundComponent] + }); + fixture = TestBed.createComponent(PlaygroundComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/playground/playground.component.ts b/src/app/playground/playground.component.ts new file mode 100644 index 0000000..97fe6e7 --- /dev/null +++ b/src/app/playground/playground.component.ts @@ -0,0 +1,73 @@ +import { + Component, + TemplateRef, + ViewChild, + ViewContainerRef, +} from '@angular/core'; +import { Router } from '@angular/router'; +import { LocalStorageService } from '../services/local-storage.service'; + +@Component({ + selector: 'app-playground', + templateUrl: './playground.component.html', + styleUrls: ['./playground.component.scss'], +}) +export class PlaygroundComponent { + data: string = '# Playground'; + + @ViewChild('outlet', { read: ViewContainerRef }) outletRef: + | ViewContainerRef + | undefined; + @ViewChild('content', { read: TemplateRef }) contentRef: + | TemplateRef + | undefined; + + rerender() { + if (!this.outletRef || !this.contentRef) return; + this.outletRef.clear(); + this.outletRef.createEmbeddedView(this.contentRef); + } + + constructor( + private router: Router, + private localStorageService: LocalStorageService + ) {} + + handleKeydown(event: any) { + if (event.key == 'Tab') { + event.preventDefault(); + var start = event.target.selectionStart; + var end = event.target.selectionEnd; + event.target.value = + event.target.value.substring(0, start) + + '\t' + + event.target.value.substring(end); + event.target.selectionStart = event.target.selectionEnd = start + 1; + this.data = event.target.value; + } + } + + onChange() { + console.log(this.data); + this.rerender(); + } + + getData() { + return this.data; + } + + getHeight() { + let height = this.data.split('\n').length * this.getFontSize() * 2; + if (height < 50) return 50; + return height; + } + + getFontSize() { + return this.localStorageService.getFontSize(); + } + + goBack() { + // go to the previous page + this.router.navigate(['/markdown']); + } +} diff --git a/src/utils/MarkdownCompiler.ts b/src/utils/MarkdownCompiler.ts index 3bf37db..0acb6fa 100644 --- a/src/utils/MarkdownCompiler.ts +++ b/src/utils/MarkdownCompiler.ts @@ -1,5 +1,136 @@ +/* import { IrisinterfaceService } from 'src/app/services/irisinterface.service'; + export default class MarkdownCompiler { static compileMarkdown(markdown: string): any[] { - return []; + let lines = markdown.split('\n'); + let blocks: any[] = []; + for (let i = 0; i < lines.length; i++) { + lines[i] = this.replaceHostAndPort(lines[i]); + + if (lines[i].startsWith('~~~')) { + // code window + let language = lines[i].replace('~~~', ''); + + let settings: string[] = []; + if (language.includes('{')) { + let settingString = language.split('{')[1]; + language = language.split('{')[0]; + if (settingString.includes('}')) { + settingString = settingString.split('}')[0]; + } + settings = settingString.split(','); + } + + let title = language; + if (language.toLowerCase() == 'objectscript') { + language = 'javascript'; + title = 'objectscript'; + } + let code = ''; + i++; + while (!lines[i].startsWith('~~~') && i < lines.length) { + lines[i] = this.replaceHostAndPort(lines[i]); + code += lines[i] + '\n'; + i++; + } + code = '\n' + code; + this.blocks.push({ + type: 'codeblock', + code: code, + language: language, + title: title, + settings: settings, + }); + } else if (lines[i].startsWith('![') || lines[i].startsWith('?[')) { + //image + let name = lines[i].split('[')[1].split(']')[0]; + let url = lines[i].split('(')[1].split(')')[0]; + let style = ''; + if (lines[i].split(')')[1].includes('{')) { + style = lines[i].split('{')[1].split('}')[0]; + } + if (lines[i].startsWith('?[')) { + let urlToImage = + 'http://' + + IrisinterfaceService.host + + ':' + + IrisinterfaceService.port + + '/woop/image/get/' + + url; + let newURL = await this.http + .get(urlToImage, { responseType: 'text' }) + .toPromise() + .then((res) => { + return res; + }); + if (newURL != undefined) { + url = newURL; + } else { + console.log('error getting image'); + } + } + this.blocks.push({ + type: 'image', + code: url, + language: style, + title: name, + }); + } else if (lines[i].startsWith('$$$[')) { + //image + let name = lines[i].split('[')[1].split(']')[0]; + let url = lines[i].split('(')[1].split(')')[0]; + /* url = + 'http://' + + IrisinterfaceService.host + + ':' + + IrisinterfaceService.port + + '/woop/file/get/' + + url; */ + this.blocks.push({ + type: 'file', + code: url, + language: '', + title: name, + }); + } else { + let code = ''; + let inCodeBlock = false; + while ( + i < lines.length && + !lines[i].startsWith('~~~') && + !lines[i].startsWith('![') && + !lines[i].startsWith('$$$[') && + !lines[i].startsWith('?[') + ) { + if (lines[i].startsWith('```')) { + inCodeBlock = !inCodeBlock; + } + + if (!inCodeBlock && lines[i].startsWith('//')) { + i++; + continue; + } + lines[i] = this.replaceHostAndPort(lines[i]); + + code += lines[i] + '\n'; + i++; + } + this.blocks.push({ + type: 'textblock', + code: this.mdService.parse(code), + language: '', + title: '', + }); + if (i != lines.length) i--; + } + } + return blocks; + } + + static replaceHostAndPort(s: string): string { + s = s.replace(/\$\$HOST\$\$/g, IrisinterfaceService.host); + s = s.replace(/\$\$PORT\$\$/g, '' + IrisinterfaceService.port); + return s; } } + */