sgMarkdown

sgMarkdown.ts

module SgDirectives {
    declare function marked(source: string): string;

    function syncHeights(source: HTMLElement, target: HTMLElement) {
        var syncHeight = () => target.style.height = source.offsetHeight + "px";
        syncHeight();
        source.addEventListener("mouseup", syncHeight);
    }

    function link(scope: ng.IScope, jelem: ng.IAugmentedJQuery) {
        var elem = <HTMLElement>jelem[0];
        var textarea = <HTMLElement>elem.querySelector("textarea");
        var preview = <HTMLElement>elem.querySelector("div.sg-markdown-preview");

        if (textarea && preview) {
            syncHeights(textarea, preview);

            var ngModel = textarea.getAttribute("ng-model");
            scope.$watch(ngModel, (newValue: string) => {
                preview.innerHTML = newValue ? marked(newValue) : "";
            });
        }
    }

    export function markdown(): ng.IDirective {
        return {
            restrict: "E",
            templateUrl: "/html/directives/markdown.html",
            link: link,
            transclude: true
        };
    }
}