terrasea/index.html

## index.html
<html>
  <head>
    <!-- Make polymer work (this is for future reference for the next version of Polymer Dart > 10.0.0) -->
    <link rel="import" href="packages/polymer/polymer.html">
    <!-- Load component(s) -->
    <link rel="import" href="markdown-markup.html">
    <script src="packages/unittest/test_controller.js"></script>
  </head>
  <body>
    <script type="application/dart" src="test.dart"></script>
  </body>
</html>

## markdown-markup.html
<polymer-element name="markdown-markup">
  <template>
    <content></content>
    <span id="destination"></span>
  </template>
  <script type="application/dart" src='markdown_markup.dart'></script>
</polymer-element>

## markdown_markup.dart
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'package:markdown/markdown.dart' show markdownToHtml, InlineSyntax, TextSyntax;

@CustomTag('markdown-markup')
class PolyMarkdown extends PolymerElement {

  List<InlineSyntax> nyanSyntax =
      [new TextSyntax('nyan', sub: '~=[,,_,,]:3')];

  PolyMarkdown.created() : super.created();


  @override
  void enteredView() {
    super.enteredView();

    _tranformAndDisplayContainedMarkdown();
  }


  void _tranformAndDisplayContainedMarkdown() {
    //get the nodes with the markdown
    List<Node> nodes = (shadowRoot.querySelector('content') as ContentElement).getDistributedNodes();

    //transform these nodes to text, representing element tags as their text equivalent, then run them through the Markdown transformer
    String content = markdownToHtml(
        nodes.fold("", (orig, el) => "${orig}${preserveExistingHTMLElements(el)}"),
        inlineSyntaxes: nyanSyntax
        );

    //remove these existing nodes from the DOM
    //@TODO: consider just hiding them, as manipulating the DOM is expensive ie <content style="display: none"></content>
    nodes.forEach((el) => el.remove());


    //insert the resulting transformed text from the markdown into the awaiting HTML tag
    $['destination']
      ..setInnerHtml(
        content,
        validator: new NodeValidatorBuilder()
        ..allowHtml5()
        ..allowElement('a', attributes: ['href'])
        //..allowNavigation(new MyUriPolicy())
      );
  }

  //make sure any HTML elements included are preserved.
  String preserveExistingHTMLElements(Node el) {
    return el is Text ? el.toString() : el is Element ? "<${el.nodeName.toLowerCase()} ${el.attributes.keys.fold("", (orig, key) {
      return '${key}="${el.attributes[key]}"';
    })}>${el.childNodes.fold("", (orig, node) => "${orig}${preserveExistingHTMLElements(node)}")}</${el.nodeName.toLowerCase()}>" : "";
  }
}


class MyUriPolicy implements UriPolicy {
  bool allowsUri(uri) => uri == 'http://slashdot.org';
}

## markdown_markup_test.dart
part of fun_components_test;

class MarkdownMarkupComponent extends PageComponent {
  MarkdownMarkupComponent(el) : super(el);

  Element get currentDestinationElement => component.$['destination'];

  Future flush() {
    return super.flush().then((_) => super.flush());
  }
}

markdown_markup_test() {
  solo_group('[Markdown Markup]', () {
    MarkdownMarkupComponent markdown_component;
    setUp(() {
      schedule(() {
        var markdown = """
heading
=======

<strong id="someid">strong element</strong>

""";
        HtmlElement el = createElement('<markdown-markup>$markdown</markdown-markup>');
        document.body.append(el);
        return Polymer.onReady.then((_) {
          PolymerElement poly = querySelector('markdown-markup');

          markdown_component = new MarkdownMarkupComponent(poly);

          return markdown_component.flush();
        });
      });


      currentSchedule.onComplete.schedule(() => markdown_component.component.remove());
    });


    test('conmtains heading h1 element', () {
      schedule(() {
        expect(markdown_component.currentDestinationElement.querySelector('h1'), isNotNull);
        expect(markdown_component.currentDestinationElement.querySelector('h1').text, equals('heading'));
      });
    });


    test('retains existing html elements', () {
      schedule(() {
        expect(markdown_component.currentDestinationElement.querySelector('strong'), isNotNull);
        expect(markdown_component.currentDestinationElement.querySelector('strong').text, equals('strong element'));
        expect(markdown_component.currentDestinationElement.querySelector('strong').attributes.keys, contains('id'));
        expect(markdown_component.currentDestinationElement.querySelector('strong').attributes['id'], contains('someid'));
      });
    });
  });
}

## test.dart
library fun_components_test;

import 'package:scheduled_test/scheduled_test.dart';
import 'package:unittest/html_config.dart';
import 'dart:html';
import 'dart:async';
import 'package:polymer/polymer.dart';

part 'markdown_markup_test.dart';


main() {
  useHtmlConfiguration(true);
  initPolymer().run(() {
    group("[fun_components]", () {
      markdown_markup_test();
    })
  });
}

createElement(String html) =>
  new Element.html(html, treeSanitizer: new NullTreeSanitizer());

class NullTreeSanitizer implements NodeTreeSanitizer {
  void sanitizeTree(node) {}
}


class PageComponent {
  var component;

  PageComponent(this.component);

  Future flush() {
    Completer completer = new Completer();
    component.async((_) => completer.complete());

    return completer.future;
  }


  String get currentTextDisplay => component.shadowRoot.text;
}
	<html>
	<head>
	<!-- Make polymer work (this is for future reference for the next version of Polymer Dart > 10.0.0) -->
	<link rel="import" href="packages/polymer/polymer.html">
	<!-- Load component(s) -->
	<link rel="import" href="markdown-markup.html">
	<script src="packages/unittest/test_controller.js"></script>
	</head>
	<body>
	<script type="application/dart" src="test.dart"></script>
	</body>
	</html>
	<polymer-element name="markdown-markup">
	<template>
	<content></content>
	<span id="destination"></span>
	</template>
	<script type="application/dart" src='markdown_markup.dart'></script>
	</polymer-element>
	import 'package:polymer/polymer.dart';
	import 'dart:html';
	import 'package:markdown/markdown.dart' show markdownToHtml, InlineSyntax, TextSyntax;

	@CustomTag('markdown-markup')
	class PolyMarkdown extends PolymerElement {

	List<InlineSyntax> nyanSyntax =
	[new TextSyntax('nyan', sub: '~=[,,_,,]:3')];

	PolyMarkdown.created() : super.created();


	@override
	void enteredView() {
	super.enteredView();

	_tranformAndDisplayContainedMarkdown();
	}


	void _tranformAndDisplayContainedMarkdown() {
	//get the nodes with the markdown
	List<Node> nodes = (shadowRoot.querySelector('content') as ContentElement).getDistributedNodes();

	//transform these nodes to text, representing element tags as their text equivalent, then run them through the Markdown transformer
	String content = markdownToHtml(
	nodes.fold("", (orig, el) => "${orig}${preserveExistingHTMLElements(el)}"),
	inlineSyntaxes: nyanSyntax
	);

	//remove these existing nodes from the DOM
	//@TODO: consider just hiding them, as manipulating the DOM is expensive ie <content style="display: none"></content>
	nodes.forEach((el) => el.remove());


	//insert the resulting transformed text from the markdown into the awaiting HTML tag
	$['destination']
	..setInnerHtml(
	content,
	validator: new NodeValidatorBuilder()
	..allowHtml5()
	..allowElement('a', attributes: ['href'])
	//..allowNavigation(new MyUriPolicy())
	);
	}

	//make sure any HTML elements included are preserved.
	String preserveExistingHTMLElements(Node el) {
	return el is Text ? el.toString() : el is Element ? "<${el.nodeName.toLowerCase()} ${el.attributes.keys.fold("", (orig, key) {
	return '${key}="${el.attributes[key]}"';
	})}>${el.childNodes.fold("", (orig, node) => "${orig}${preserveExistingHTMLElements(node)}")}</${el.nodeName.toLowerCase()}>" : "";
	}
	}


	class MyUriPolicy implements UriPolicy {
	bool allowsUri(uri) => uri == 'http://slashdot.org';
	}
	part of fun_components_test;

	class MarkdownMarkupComponent extends PageComponent {
	MarkdownMarkupComponent(el) : super(el);

	Element get currentDestinationElement => component.$['destination'];

	Future flush() {
	return super.flush().then((_) => super.flush());
	}
	}

	markdown_markup_test() {
	solo_group('[Markdown Markup]', () {
	MarkdownMarkupComponent markdown_component;
	setUp(() {
	schedule(() {
	var markdown = """
	heading
	=======

	<strong id="someid">strong element</strong>

	""";
	HtmlElement el = createElement('<markdown-markup>$markdown</markdown-markup>');
	document.body.append(el);
	return Polymer.onReady.then((_) {
	PolymerElement poly = querySelector('markdown-markup');

	markdown_component = new MarkdownMarkupComponent(poly);

	return markdown_component.flush();
	});
	});


	currentSchedule.onComplete.schedule(() => markdown_component.component.remove());
	});


	test('conmtains heading h1 element', () {
	schedule(() {
	expect(markdown_component.currentDestinationElement.querySelector('h1'), isNotNull);
	expect(markdown_component.currentDestinationElement.querySelector('h1').text, equals('heading'));
	});
	});


	test('retains existing html elements', () {
	schedule(() {
	expect(markdown_component.currentDestinationElement.querySelector('strong'), isNotNull);
	expect(markdown_component.currentDestinationElement.querySelector('strong').text, equals('strong element'));
	expect(markdown_component.currentDestinationElement.querySelector('strong').attributes.keys, contains('id'));
	expect(markdown_component.currentDestinationElement.querySelector('strong').attributes['id'], contains('someid'));
	});
	});
	});
	}
	library fun_components_test;

	import 'package:scheduled_test/scheduled_test.dart';
	import 'package:unittest/html_config.dart';
	import 'dart:html';
	import 'dart:async';
	import 'package:polymer/polymer.dart';

	part 'markdown_markup_test.dart';


	main() {
	useHtmlConfiguration(true);
	initPolymer().run(() {
	group("[fun_components]", () {
	markdown_markup_test();
	})
	});
	}

	createElement(String html) =>
	new Element.html(html, treeSanitizer: new NullTreeSanitizer());

	class NullTreeSanitizer implements NodeTreeSanitizer {
	void sanitizeTree(node) {}
	}


	class PageComponent {
	var component;

	PageComponent(this.component);

	Future flush() {
	Completer completer = new Completer();
	component.async((_) => completer.complete());

	return completer.future;
	}


	String get currentTextDisplay => component.shadowRoot.text;
	}