Merge branch 'master' of github.com:Polymer/code-mirror

code-mirror.html

@@ -4,34 +4,30 @@
 license that can be found in the LICENSE file.
 -->
 <link rel="import" href="../polymer/polymer.html">
-<script src="codemirror-3.14/lib/codemirror.js"></script>
-<script src="codemirror-3.14/mode/xml/xml.js"></script>
-<script src="codemirror-3.14/mode/javascript/javascript.js"></script>
-<script src="codemirror-3.14/mode/css/css.js"></script>
-<script src="codemirror-3.14/mode/vbscript/vbscript.js"></script>
-<script src="codemirror-3.14/mode/htmlmixed/htmlmixed.js"></script>
+<link rel="import" href="codemirror-import.html">
 
 <polymer-element name="code-mirror" attributes="value mode theme tabSize lineNumbers">
   <template>
-    <link rel="stylesheet" href="codemirror-3.14/lib/codemirror.css">
-    <link href="codemirror-3.14/theme/ambiance.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/ambiance-mobile.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/blackboard.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/cobalt.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/eclipse.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/elegant.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/erlang-dark.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/lesser-dark.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/midnight.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/monokai.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/neat.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/night.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/rubyblue.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/solarized.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/twilight.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/vibrant-ink.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/xq-dark.css" rel="stylesheet" />
-    <link href="codemirror-3.14/theme/xq-light.css" rel="stylesheet" />
+    <link rel="stylesheet" href="codemirror-4.0/lib/codemirror.css">
+    <link href="codemirror-4.0/theme/ambiance.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/ambiance-mobile.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/blackboard.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/cobalt.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/eclipse.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/elegant.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/erlang-dark.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/lesser-dark.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/midnight.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/monokai.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/neat.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/night.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/rubyblue.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/solarized.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/twilight.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/vibrant-ink.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/xq-dark.css" rel="stylesheet">
+    <link href="codemirror-4.0/theme/xq-light.css" rel="stylesheet">
+    <link href="codemirror-4.0/addon/fold/foldgutter.css" rel="stylesheet">
 
     <style>
       :host {
@@ -50,12 +46,17 @@
       tabSize: 2,
       lineNumbers: true,
       ready: function() {
+        if (!this.value) {
+          this.value = this.textContent;
+        }
         this.mirror = CodeMirror(this.shadowRoot, {
-          value: this.value,
+          value: this.value || this.textContent,
           mode: this.mode,
           theme: this.theme,
           tabSize: this.tabSize,
-          lineNumbers: this.lineNumbers
+          lineNumbers: this.lineNumbers,
+          foldGutter: true,
+          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
         });
       },
       refresh: function() {
@@ -75,6 +76,9 @@
       },
       lineNumbersChanged: function() {
         this.mirror.setOption('lineNumbers', this.lineNumbers);
+      },
+      focus: function() {
+        this.mirror.focus();
       }
     });
   </script>