code-mirror/code-mirror.html at master · barmstro/code-mirror · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
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>

<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" />

    <style>
      :host {
        display: block;
      }
      .CodeMirror {
        height: 100%;
      }
    </style>
  </template>
  <script>
    Polymer('code-mirror', {
      value: '',
      mode: 'htmlmixed',
      theme: 'xq-light',
      tabSize: 2,
      lineNumbers: true,
      ready: function() {
        this.mirror = CodeMirror(this.shadowRoot, {
          value: this.value,
          mode: this.mode,
          theme: this.theme,
          tabSize: this.tabSize,
          lineNumbers: this.lineNumbers
        });
      },
      refresh: function() {
        this.mirror.refresh();
      },
      valueChanged: function() {
        this.mirror.setValue(this.value);
      },
      modeChanged: function() {
        this.mirror.setOption('mode', this.mode);
      },
      themeChanged: function() {
        this.mirror.setOption('theme', this.theme);
      },
      tabSizeChanged: function() {
        this.mirror.setOption('tabSize', this.tabSize);
      },
      lineNumbersChanged: function() {
        this.mirror.setOption('lineNumbers', this.lineNumbers);
      }
    });
  </script>
</polymer-element>