@coolon/angular-ui-powerups 12.4.0-alpha.77 → 12.4.0-alpha.79

package/esm2015/lib/components/text/markdown/markdown.component.js

@@ -1,34 +1,62 @@
 import { __decorate, __metadata } from "tslib";
-import { Component, ElementRef, Input } from '@angular/core';
+import { Component, ElementRef, Inject, Input, PLATFORM_ID } from '@angular/core';
 import { Dsl, StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';
 import * as _ from 'lodash';
 import { MarkdownService } from '../../../services/markdown/markdown.service';
 import { DisposableComponent } from '../../disposable-component';
+/**
+ * @example
+ * <aup-markdown [content]="..."></aup-markdown>
+ * <aup-markdown [content$]="stringValueModel$"></aup-markdown>
+ * <aup-markdown ngPreserveWhitespaces>
+ *   # This is markdown content
+ *
+ *  With a list
+ *    - a
+ *    - b
+ * </aup-markdown>
+ */
 export class MarkdownComponent extends DisposableComponent {
-    constructor(element, markdownService) {
+    constructor(platform, element, markdownService) {
         super();
+        this.platform = platform;
         this.element = element;
         this.markdownService = markdownService;
         this.inline = false;
         const { chain } = Dsl.disposeWith(this);
     }
     ngOnInit() {
-        const { chain } = Dsl.disposeWith(this);
-        chain(this.content$).subscribe(content => {
-            this.element.nativeElement.innerHTML = _.isEmpty(content) ? '' :
-                this.inline ? this.markdownService.renderInline(content) :
-                    this.markdownService.render(content);
-        }, { initialValue: 'evaluate' });
+        const { when } = Dsl.disposeWith(this);
+        when(this.content$).changes(content => this.renderContent(content), { initialValue: 'triggerChangeUnlessNil' });
+        if (_.isNil(this.content) && !_.isEmpty(this.element.nativeElement.innerHTML)) {
+            this.renderContent(this.extractInnerContent(this.element.nativeElement.innerHTML));
+        }
+    }
+    extractInnerContent(content) {
+        const lines = content.split("\n");
+        const prefix = lines.reduce((maxPrefix, line) => {
+            return Math.max(maxPrefix, line.search(/\S/));
+        }, 0);
+        return lines.map(l => l.substr(prefix)).join("\n");
+    }
+    renderContent(content) {
+        if (!_.isNil(content)) {
+            const markdown = this.inline ?
+                this.markdownService.renderInline(content) :
+                this.markdownService.render(content);
+            this.element.nativeElement.innerHTML = markdown;
+        }
     }
 }
 MarkdownComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-markdown',
-                template: "<p>markdown works!</p>\n",
+                template: "<ng-content></ng-content>\n",
                 styles: [":host{display:inline-block}\n"]
             },] }
 ];
 MarkdownComponent.ctorParameters = () => [
+    { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] },
     { type: ElementRef },
     { type: MarkdownService }
 ];

package/esm2015/lib/components/text/markdown/markdown.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/text/markdown/markdown.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAU,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,GAAG,EAAE,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnF,OAAO,KAAK,CAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAOjE,MAAM,OAAO,iBAAkB,SAAQ,mBAAmB;IAaxD,YAA6B,OAAmB,EAAmB,eAAgC;QACjG,KAAK,EAAE,CAAC;QADmB,YAAO,GAAP,OAAO,CAAY;QAAmB,oBAAe,GAAf,eAAe,CAAiB;QAFnG,WAAM,GAAG,KAAK,CAAC;QAIb,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC;IAED,QAAQ;QACN,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACxC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE;YACvC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,GAAG,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;gBAC9D,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;oBACxD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC3C,CAAC,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC,CAAC;IACnC,CAAC;;;YA9BF,SAAS,SAAC;gBACT,QAAQ,EAAE,cAAc;gBACxB,oCAAwC;;aAEzC;;;YAVmB,UAAU;YAGrB,eAAe;;;uBAUrB,KAAK;sBAIL,KAAK;qBAIL,KAAK;;AANN;IADC,aAAa,EAAE;8BACN,UAAU;mDAAS;AAI7B;IADC,iBAAiB,CAAC,UAAU,CAAC;;kDACd","sourcesContent":["import { Component, ElementRef, Input, OnInit } from '@angular/core';\nimport { Dsl, StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';\nimport * as _ from 'lodash';\nimport { MarkdownService } from '../../../services/markdown/markdown.service';\nimport { DisposableComponent } from '../../disposable-component';\n\n@Component({\n  selector: 'aup-markdown',\n  templateUrl: './markdown.component.html',\n  styleUrls: ['./markdown.component.scss']\n})\nexport class MarkdownComponent extends DisposableComponent implements OnInit {\n\n  @Input()\n  @TrackExternal()\n  content$: ValueModel<string>;\n\n  @Input()\n  @StoreInValueModel('content$')\n  content: string;\n\n  @Input()\n  inline = false;\n\n  constructor(private readonly element: ElementRef, private readonly markdownService: MarkdownService) {\n    super();\n    const { chain } = Dsl.disposeWith(this);\n  }\n\n  ngOnInit() {\n    const { chain } = Dsl.disposeWith(this);\n    chain(this.content$).subscribe(content => {\n      this.element.nativeElement.innerHTML = _.isEmpty(content) ? '' :\n        this.inline ? this.markdownService.renderInline(content) :\n          this.markdownService.render(content);\n    }, { initialValue: 'evaluate' });\n  }\n}\n"]}
+{"version":3,"file":"markdown.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/text/markdown/markdown.component.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAC1F,OAAO,EAAE,GAAG,EAAE,iBAAiB,EAAS,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,KAAK,CAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAC;AAC9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,iBAAkB,SAAQ,mBAAmB;IAaxD,YAC+B,QAAgB,EAC5B,OAAgC,EAChC,eAAgC;QACjD,KAAK,EAAE,CAAC;QAHqB,aAAQ,GAAR,QAAQ,CAAQ;QAC5B,YAAO,GAAP,OAAO,CAAyB;QAChC,oBAAe,GAAf,eAAe,CAAiB;QALnD,WAAM,GAAG,KAAK,CAAC;QAOb,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC1C,CAAC;IAED,QAAQ;QACN,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,EAAE,YAAY,EAAE,wBAAwB,EAAE,CAAC,CAAC;QAChH,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YAC7E,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;SACpF;IACH,CAAC;IAEO,mBAAmB,CAAC,OAAe;QACzC,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAClC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,EAAE;YAC9C,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;QAChD,CAAC,EAAE,CAAC,CAAC,CAAC;QACN,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrD,CAAC;IAEO,aAAa,CAAC,OAAe;QACnC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE;YACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;gBAC5B,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;gBAC5C,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACvC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,GAAG,QAAQ,CAAC;SACjD;IACH,CAAC;;;YAjDF,SAAS,SAAC;gBACT,QAAQ,EAAE,cAAc;gBACxB,uCAAwC;;aAEzC;;;YAe0C,MAAM,uBAA5C,MAAM,SAAC,WAAW;YArCH,UAAU;YAGrB,eAAe;;;uBAsBrB,KAAK;sBAIL,KAAK;qBAIL,KAAK;;AANN;IADC,aAAa,EAAE;8BACN,UAAU;mDAAS;AAI7B;IADC,iBAAiB,CAAC,UAAU,CAAC;;kDACd","sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport { Component, ElementRef, Inject, Input, OnInit, PLATFORM_ID } from '@angular/core';\nimport { Dsl, StoreInValueModel, Trace, TrackExternal, ValueModel } from '@coolon/pectin';\nimport * as _ from 'lodash';\nimport { MarkdownService } from '../../../services/markdown/markdown.service';\nimport { DisposableComponent } from '../../disposable-component';\n\n/**\n * @example\n * <aup-markdown [content]=\"...\"></aup-markdown>\n * <aup-markdown [content$]=\"stringValueModel$\"></aup-markdown>\n * <aup-markdown ngPreserveWhitespaces>\n *   # This is markdown content\n *\n *  With a list\n *    - a\n *    - b\n * </aup-markdown>\n */\n@Component({\n  selector: 'aup-markdown',\n  templateUrl: './markdown.component.html',\n  styleUrls: ['./markdown.component.scss']\n})\nexport class MarkdownComponent extends DisposableComponent implements OnInit {\n\n  @Input()\n  @TrackExternal()\n  content$: ValueModel<string>;\n\n  @Input()\n  @StoreInValueModel('content$')\n  content: string;\n\n  @Input()\n  inline = false;\n\n  constructor(\n    @Inject(PLATFORM_ID) private platform: Object,\n    private readonly element: ElementRef<HTMLElement>,\n    private readonly markdownService: MarkdownService) {\n    super();\n    const { chain } = Dsl.disposeWith(this);\n  }\n\n  ngOnInit() {\n    const { when } = Dsl.disposeWith(this);\n    when(this.content$).changes(content => this.renderContent(content), { initialValue: 'triggerChangeUnlessNil' });\n    if (_.isNil(this.content) && !_.isEmpty(this.element.nativeElement.innerHTML)) {\n      this.renderContent(this.extractInnerContent(this.element.nativeElement.innerHTML));\n    }\n  }\n\n  private extractInnerContent(content: string) {\n    const lines = content.split(\"\\n\");\n    const prefix = lines.reduce((maxPrefix, line) => {\n      return Math.max(maxPrefix, line.search(/\\S/));\n    }, 0);\n    return lines.map(l => l.substr(prefix)).join(\"\\n\");\n  }\n\n  private renderContent(content: string) {\n    if (!_.isNil(content)) {\n      const markdown = this.inline ?\n        this.markdownService.renderInline(content) :\n        this.markdownService.render(content);\n      this.element.nativeElement.innerHTML = markdown;\n    }\n  }\n}\n"]}

package/esm2015/lib/components/text/markdown/markdown.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"MarkdownComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../disposable-component","name":"DisposableComponent","line":11,"character":39},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"aup-markdown","template":"<p>markdown works!</p>\n","styles":[":host{display:inline-block}\n"]}]}],"members":{"content$":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":14,"character":3}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":18,"character":3},"arguments":["content$"]}]}],"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":24,"character":40},{"__symbolic":"reference","module":"../../../services/markdown/markdown.service","name":"MarkdownService","line":24,"character":86}]}],"ngOnInit":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"MarkdownComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../disposable-component","name":"DisposableComponent","line":24,"character":39},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"aup-markdown","template":"<ng-content></ng-content>\n","styles":[":host{display:inline-block}\n"]}]}],"members":{"content$":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":27,"character":3}}]}],"content":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":31,"character":3},"arguments":["content$"]}]}],"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":38,"character":5},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_ID","line":38,"character":12}]}],null,null],"parameters":[{"__symbolic":"reference","name":"Object"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":39,"character":30,"arguments":[{"__symbolic":"error","message":"Could not resolve type","line":39,"character":41,"context":{"typeName":"HTMLElement"}}]},{"__symbolic":"reference","module":"../../../services/markdown/markdown.service","name":"MarkdownService","line":40,"character":38}]}],"ngOnInit":[{"__symbolic":"method"}],"extractInnerContent":[{"__symbolic":"method"}],"renderContent":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/services/markdown/markdown.service.js

@@ -6,7 +6,6 @@ export class MarkdownService {
     }
     render(content) {
         return marked.parse(content, {
-            gfm: true,
             smartLists: true
         });
     }

package/esm2015/lib/services/markdown/markdown.service.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.service.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/services/markdown/markdown.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGtD,MAAM,OAAO,eAAe;IAE1B;IACA,CAAC;IAED,MAAM,CAAC,OAAe;QACpB,OAAO,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE;YAC3B,GAAG,EAAE,IAAI;YACT,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;IACL,CAAC;IAED,YAAY,CAAC,OAAe;QAC1B,OAAO,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED,gBAAgB,CAAC,QAAsC;QACrD,MAAM,CAAC,GAAG,CAAC;YACT,UAAU,EAAE,CAAC,qBAAqB,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CAAC,IAAI,CAAC,EAAE,CAAC,0BAA0B,IAAI,QAAQ,CAAC,CAAC,CAAC;SAClG,CAAC,CAAC;IACL,CAAC;;;YArBF,UAAU","sourcesContent":["import { Injectable } from '@angular/core';\n\nimport { marked } from 'marked';\nimport { markdownPillExtension } from './pill-plugin';\n\n@Injectable()\nexport class MarkdownService {\n\n  constructor() {\n  }\n\n  render(content: string) {\n    return marked.parse(content, {\n      gfm: true,\n      smartLists: true\n    });\n  }\n\n  renderInline(content: string) {\n    return marked.parseInline(content);\n  }\n\n  usePillExtension(renderer?: (content: string) => string) {\n    marked.use({\n      extensions: [markdownPillExtension(renderer ?? (text => `<span class='aup-pill'>${text}<span>`))]\n    });\n  }\n}\n\n\n"]}
+{"version":3,"file":"markdown.service.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/services/markdown/markdown.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAGtD,MAAM,OAAO,eAAe;IAE1B;IACA,CAAC;IAED,MAAM,CAAC,OAAe;QACpB,OAAO,MAAM,CAAC,KAAK,CAAC,OAAO,EAAE;YAC3B,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;IACL,CAAC;IAED,YAAY,CAAC,OAAe;QAC1B,OAAO,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED,gBAAgB,CAAC,QAAsC;QACrD,MAAM,CAAC,GAAG,CAAC;YACT,UAAU,EAAE,CAAC,qBAAqB,CAAC,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CAAC,IAAI,CAAC,EAAE,CAAC,0BAA0B,IAAI,QAAQ,CAAC,CAAC,CAAC;SAClG,CAAC,CAAC;IACL,CAAC;;;YApBF,UAAU","sourcesContent":["import { Injectable } from '@angular/core';\n\nimport { marked } from 'marked';\nimport { markdownPillExtension } from './pill-plugin';\n\n@Injectable()\nexport class MarkdownService {\n\n  constructor() {\n  }\n\n  render(content: string) {\n    return marked.parse(content, {\n      smartLists: true\n    });\n  }\n\n  renderInline(content: string) {\n    return marked.parseInline(content);\n  }\n\n  usePillExtension(renderer?: (content: string) => string) {\n    marked.use({\n      extensions: [markdownPillExtension(renderer ?? (text => `<span class='aup-pill'>${text}<span>`))]\n    });\n  }\n}\n\n\n"]}

package/fesm2015/coolon-angular-ui-powerups.js

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, ElementRef, Inject, Host, Optional, Input, HostListener, NgZone, Injectable, Pipe, NgModule, Component, ContentChild, HostBinding, ViewEncapsulation, InjectionToken, ViewChildren, SkipSelf, EventEmitter, ViewChild, Output, Self, TemplateRef, ChangeDetectorRef, ContentChildren, ViewContainerRef, Injector, ComponentFactoryResolver } from '@angular/core';
+import { Directive, ElementRef, Inject, Host, Optional, Input, HostListener, NgZone, Injectable, Pipe, NgModule, Component, ContentChild, HostBinding, ViewEncapsulation, InjectionToken, ViewChildren, SkipSelf, EventEmitter, ViewChild, Output, Self, TemplateRef, ChangeDetectorRef, ContentChildren, ViewContainerRef, PLATFORM_ID, Injector, ComponentFactoryResolver } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -436,7 +436,6 @@ class MarkdownService {
     }
     render(content) {
         return marked.parse(content, {
-            gfm: true,
             smartLists: true
         });
     }
@@ -4262,31 +4261,59 @@ LabelledValueComponent.propDecorators = {
     label: [{ type: Input }]
 };
 
+/**
+ * @example
+ * <aup-markdown [content]="..."></aup-markdown>
+ * <aup-markdown [content$]="stringValueModel$"></aup-markdown>
+ * <aup-markdown ngPreserveWhitespaces>
+ *   # This is markdown content
+ *
+ *  With a list
+ *    - a
+ *    - b
+ * </aup-markdown>
+ */
 class MarkdownComponent extends DisposableComponent {
-    constructor(element, markdownService) {
+    constructor(platform, element, markdownService) {
         super();
+        this.platform = platform;
         this.element = element;
         this.markdownService = markdownService;
         this.inline = false;
         const { chain } = Dsl.disposeWith(this);
     }
     ngOnInit() {
-        const { chain } = Dsl.disposeWith(this);
-        chain(this.content$).subscribe(content => {
-            this.element.nativeElement.innerHTML = _.isEmpty(content) ? '' :
-                this.inline ? this.markdownService.renderInline(content) :
-                    this.markdownService.render(content);
-        }, { initialValue: 'evaluate' });
+        const { when } = Dsl.disposeWith(this);
+        when(this.content$).changes(content => this.renderContent(content), { initialValue: 'triggerChangeUnlessNil' });
+        if (_.isNil(this.content) && !_.isEmpty(this.element.nativeElement.innerHTML)) {
+            this.renderContent(this.extractInnerContent(this.element.nativeElement.innerHTML));
+        }
+    }
+    extractInnerContent(content) {
+        const lines = content.split("\n");
+        const prefix = lines.reduce((maxPrefix, line) => {
+            return Math.max(maxPrefix, line.search(/\S/));
+        }, 0);
+        return lines.map(l => l.substr(prefix)).join("\n");
+    }
+    renderContent(content) {
+        if (!_.isNil(content)) {
+            const markdown = this.inline ?
+                this.markdownService.renderInline(content) :
+                this.markdownService.render(content);
+            this.element.nativeElement.innerHTML = markdown;
+        }
     }
 }
 MarkdownComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-markdown',
-                template: "<p>markdown works!</p>\n",
+                template: "<ng-content></ng-content>\n",
                 styles: [":host{display:inline-block}\n"]
             },] }
 ];
 MarkdownComponent.ctorParameters = () => [
+    { type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] },
     { type: ElementRef },
     { type: MarkdownService }
 ];