Google Git
Sign in
dart/tools.git/39e913f2^!/.
commit
39e913f2ee758ac14e757219895c86f3e6ab1609
[log]
author
Sam Rawlins <srawlins@google.com>
Fri Aug 05 14:06:39 2016 -0700
committer
Sam Rawlins <sam.rawlins@gmail.com>
Fri Aug 05 17:37:46 2016 -0700
tree
96e93ea0d0a64f17de0f01e967ed026af871a1fc
parent
0fb113a904ed805a71c2c1decf74c7c291a74d57 [diff]
Basic live editor

diff --git a/pkgs/markdown/CHANGELOG.md b/pkgs/markdown/CHANGELOG.md
index 2c03a83..2deea9e 100644
--- a/pkgs/markdown/CHANGELOG.md
+++ b/pkgs/markdown/CHANGELOG.md

@@ -1,4 +1,4 @@
-## 0.11.0-dev
+## 0.11.0
 
 * Parse HTML blocks more accurately, according to
   [CommonMark](http://spec.commonmark.org/0.24/#html-blocks).

diff --git a/pkgs/markdown/example/app.dart b/pkgs/markdown/example/app.dart
new file mode 100644
index 0000000..015a267
--- /dev/null
+++ b/pkgs/markdown/example/app.dart

@@ -0,0 +1,56 @@
+import 'dart:async';
+import 'dart:html';
+import 'package:markdown/markdown.dart' as md;
+
+final markdownInput = querySelector('#markdown') as TextAreaElement;
+final htmlDiv = querySelector('#html') as DivElement;
+final nullSanitizer = new NullTreeSanitizer();
+const typing = const Duration(milliseconds: 150);
+final introText = r'''Markdown is the **best**!
+
+* It has lists.
+* It has [links](http://dartlang.org).
+* It has _so much more_...''';
+
+void main() {
+  markdownInput.onKeyUp.listen(_renderMarkdown);
+
+  String savedMarkdown = window.localStorage['markdown'];
+
+  if (savedMarkdown != null &&
+      savedMarkdown.isNotEmpty &&
+      savedMarkdown != introText) {
+    markdownInput.value = savedMarkdown;
+    _renderMarkdown();
+  } else {
+    _typeItOut(introText, 82);
+  }
+}
+
+void _renderMarkdown([Event event]) {
+  var markdown = markdownInput.value;
+  htmlDiv.setInnerHtml(md.markdownToHtml(markdown),
+      treeSanitizer: nullSanitizer);
+  if (event != null) {
+    // Not simulated typing. Store it.
+    window.localStorage['markdown'] = markdown;
+  }
+}
+
+void _typeItOut(String msg, int pos) {
+  addCharacter() {
+    if (pos > msg.length) {
+      return;
+    }
+    markdownInput.value = msg.substring(0, pos);
+    markdownInput.focus();
+    _renderMarkdown();
+    pos++;
+    new Timer(typing, addCharacter);
+  }
+  new Timer(typing, addCharacter);
+}
+
+class NullTreeSanitizer implements NodeTreeSanitizer {
+  void sanitizeTree(Node node) {}
+}

diff --git a/pkgs/markdown/example/index.html b/pkgs/markdown/example/index.html
new file mode 100644
index 0000000..adb95cd
--- /dev/null
+++ b/pkgs/markdown/example/index.html

@@ -0,0 +1,42 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="style.css"></link>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400">
+    <script type="application/dart" src="app.dart"></script>
+    <script src="packages/browser/dart.js"></script>
+    <title>Dart Markdown Live Editor</title>
+  </head>
+  <body>
+    <div class="container">
+    <header>
+      <div class="toolbar">
+        <h2>Dart Markdown Live Editor</h2>
+        <span style="display: flex; flex: 1;"></span>
+        <a class="" href="https://github.com/dart-lang/markdown">
+          <svg class="octicon" height="32" version="1.1" viewBox="0 0 16 16" width="32">
+            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
+          </svg>
+        </a>
+      </div>
+    </header>
+    <div class="main">
+      <div class="card">
+        <div class="toolbar">
+          <h2>Markdown</h2>
+        </div>
+        <div style="padding: 8px; display: flex; height: 100%;">
+          <textarea rows="16" id="markdown">
+          </textarea>
+        </div>
+      </div>
+      <div class="card">
+        <div class="toolbar">
+          <h2>HTML</h2>
+        </div>
+        <div style="padding: 8px;" id="html"></div>
+      </div>
+    </div>
+    </div>
+  </body>
+</html>

diff --git a/pkgs/markdown/example/style.css b/pkgs/markdown/example/style.css
new file mode 100644
index 0000000..069ff97
--- /dev/null
+++ b/pkgs/markdown/example/style.css

@@ -0,0 +1,104 @@
+html, body {
+  background-color: rgb(250, 250, 250);
+  font-family: Roboto,"Helvetica Neue",sans-serif;
+  font-size: 16px;
+  margin: 0;
+}
+
+.container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.main {
+  align-items: stretch;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  margin: 32px;
+}
+
+.card {
+  /* Styled like Material Cards. */
+  color: rgba(0, 0, 0, 0.87);
+  background-color: white;
+  border-radius: 2px;
+  box-sizing: border-box;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2),
+              0 1px 1px 0 rgba(0, 0, 0, .14),
+              0 2px 1px -1px rgba(0, 0, 0, .12);
+  margin: 8px;
+
+  /* Positioned next to each other. */
+  display: flex;
+  flex: 1 1 50%;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 50%;
+  min-height: 400px;
+}
+
+.toolbar {
+  /* Styled like Material Toolbar. */
+  align-items: center;
+  background-color: #22d3c5; /* Taken from webdev.dartlang.org. */
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  font-size: 20px;
+  line-height: 1.4;
+  margin: 0;
+  min-height: 64px;
+  padding: 0 16px;
+  position: relative;
+  width: 100%;
+}
+
+.toolbar h2 {
+  font-size: inherit;
+  font-weight: inherit;
+  margin: inherit;
+}
+
+.toolbar a:link,
+.toolbar a:visited {
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.toolbar svg {
+  fill: currentColor;
+}
+
+.card .toolbar {
+  border-radius: 3px 3px 0 0;
+}
+
+.textarea-container {
+  display: flex;
+  height: 100%;
+  padding: 8px;
+}
+
+textarea {
+  border-color: rgba(0, 0, 0, 0.12);
+  border-width: 0 0 1px;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.87);
+  font-family: "Roboto Mono",monospace;
+  font-size: 100%;
+  line-height: 26px;
+  overflow: hidden;
+  padding: 2px 2px 1px;
+  width: 100%;
+}
+
+textarea:focus {
+  border-color: #22d3c5; /* Taken from webdev.dartlang.org. */
+  border-width: 0 0 2px;
+  outline: 0;
+  padding-bottom: 0;
+}

diff --git a/pkgs/markdown/pubspec.yaml b/pkgs/markdown/pubspec.yaml
index 3f13a21..1bd960e 100644
--- a/pkgs/markdown/pubspec.yaml
+++ b/pkgs/markdown/pubspec.yaml

@@ -1,5 +1,5 @@
 name: markdown
-version: 0.11.0-dev
+version: 0.11.0
 author: Dart Team <misc@dartlang.org>
 description: A library for converting markdown to HTML.
 homepage: https://github.com/dart-lang/markdown
@@ -7,6 +7,8 @@
   sdk: '>=1.12.0 <2.0.0'
 dev_dependencies:
   args: '^0.13.3+1'
+  # Only for example/app.dart.
+  browser: any
   collection: ^1.2.0
   html: '^0.12.2'
   path: '^1.3.1'