ng-realmark/component/diff.component.js

Real-time Markdown W/ Markdown three way merge

import { Component, Input } from '@angular/core';
import { RealMarkService } from '../service/realmark.service';
import { Sanitizer, SecurityContext } from '@angular/core';
var DiffComponent = /** @class */ (function () {
    function DiffComponent(realMarkService, sanitizer) {
        this.realMarkService = realMarkService;
        this.sanitizer = sanitizer;
        this._showMarkdown = true;
        this._showDeleted = false;
        this.showDeletedText = "Hide Deleted";
        this.showMarkdownText = "Show Markdown";
        this._content = "";
        this._original = "";
    }
    Object.defineProperty(DiffComponent.prototype, "showDeleted", {
        set: function (value) {
            this._showDeleted = value;
            this.updateDiff();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DiffComponent.prototype, "showMarkdown", {
        set: function (value) {
            this._showMarkdown = value;
            this.updateDiff();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DiffComponent.prototype, "content", {
        set: function (value) {
            this._content = value;
            this.updateDiff();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(DiffComponent.prototype, "original", {
        set: function (value) {
            this._original = value;
            this.updateDiff();
        },
        enumerable: true,
        configurable: true
    });
    /**
     * Changes value of showDeleted and re-evaluate compateMarkdown. Also updates button text.
     */
    DiffComponent.prototype.deletedClick = function () {
        if (this._showDeleted) {
            this._showDeleted = false;
            this.showDeletedText = "Show Deleted";
        }
        else {
            this._showDeleted = true;
            this.showDeletedText = "Hide Deleted";
        }
        this.updateDiff();
    };
    /**
     * Changes value of showMarkdown and re-evaluate compateMarkdown. Also updates button text.
     */
    DiffComponent.prototype.markdownClick = function () {
        if (this._showMarkdown) {
            this._showMarkdown = false;
            this.showMarkdownText = "Hide Markdown";
        }
        else {
            this._showMarkdown = true;
            this.showMarkdownText = "Show Markdown";
        }
        this.updateDiff();
    };
    /**
     * set element to update and run updateDiff().
     */
    DiffComponent.prototype.ngOnInit = function () {
        this.updateDiff();
    };
    DiffComponent.prototype.updateDiff = function () {
        var _this = this;
        var html = this.realMarkService.compareMarkdown(this._content, this._original, this._showDeleted, this._showMarkdown, this.codeBlock);
        var builtRows = html.map(function (r) {
            var num1 = r.originalLine;
            var num2 = r.newLine;
            var sidebarNums = "<td class='diff-num1'>" + num1 + "</td><td class='diff-num2'>" + num2 + "</td>";
            if (!r.text) {
                return "<tr class='diff-" + r.type + "'>" + sidebarNums + "<td width='100%'></td></tr>";
            }
            else if (r.format === "text") { // if line contains markdown which needs to be converted to html
                return "<tr class='diff-" + r.type + "'>" + sidebarNums + "<td width='100%'>" + _this.sanitizer.sanitize(SecurityContext.HTML, _this.realMarkService.process(r.text)) + "</td></tr>";
            }
            else if (r.format === "code") { // automatically wrap in codeBlock
                return "<tr class='diff-" + r.type + "'>" + sidebarNums + "<td width='100%'>" + _this.sanitizer.sanitize(SecurityContext.HTML, _this.realMarkService.process("```" + _this.codeBlock + "\n" + r.text + "\n```")) + "</td></tr>";
            }
            return "<tr class='diff-" + r.type + "'>" + sidebarNums + "<td width='100%'> " + _this.sanitizer.sanitize(SecurityContext.HTML, r.text) + "</td></tr>";
        }).join("\n");
        this.output = builtRows ? builtRows : "";
    };
    DiffComponent.decorators = [
        { type: Component, args: [{
                    selector: 'realmark-diff',
                    template: "\n    <header>\n      <button *ngIf=\"contentRef.innerHTML.trim()\" (click)=\"deletedClick()\">{{showDeletedText}}</button>\n      <button *ngIf=\"!codeBlock  && contentRef.innerHTML.trim()\" (click)=\"markdownClick()\">{{showMarkdownText}}</button>\n      <p #contentRef><ng-content></ng-content></p>\n    </header>\n    <table [innerHTML]=\"output\"></table>\n  "
                },] },
    ];
    /** @nocollapse */
    DiffComponent.ctorParameters = function () { return [
        { type: RealMarkService },
        { type: Sanitizer }
    ]; };
    DiffComponent.propDecorators = {
        codeBlock: [{ type: Input }],
        showDeleted: [{ type: Input }],
        showMarkdown: [{ type: Input }],
        content: [{ type: Input }],
        original: [{ type: Input }]
    };
    return DiffComponent;
}());
export { DiffComponent };
//# sourceMappingURL=diff.component.js.map