Convert plugins involved in dependencies to <link rel="import">-style.

When mixing and matching <script> and <link>-style plugins, the plugins
may be executed in the wrong order. To avoid the problem, switch all
plugins involved in dependencies to the <link> style.

editor/index.html

@@ -199,9 +199,9 @@
   <script src="plugins/collectTests.js"></script>
   <script src="plugins/color-widget.js"></script>
   <script src="plugins/templates.js"></script>
-  <script src="plugins/js-declarations.js"></script>
+  <link rel="import" href="plugins/js-declarations.html">
   <link rel="import" href="plugins/markdown-comments.html">
-  <script src="plugins/markdown-linkify.js"></script>
+  <link rel="import" href="plugins/markdown-linkify.html">
   <link rel="import" href="plugins/scrubbable.html">
 
   <!-- Polyfill for HTML imports -->

editor/plugins/js-declarations.html

@@ -0,0 +1,33 @@
+<script>
+  // An extension that walks JavaScript ASTs, and for all nodes that
+  // introduce a new lexical scope, annotates the node with information about
+  // all declarations in that scope.
+  Moonchild.registerExtension('js-declarations', function(moonchild) {
+    // TODO: Make this extension depend on 'javascript'.
+    moonchild.on('parse', function(ast) {
+      var scopes = [];
+      Moonchild.traverse(ast.value()[0], {
+        enter: function(node) {
+          if (isScopeNode(node)) {
+            var decl = {};
+            moonchild.setExtras(node, decl);
+            scopes.push(decl);
+          }
+          if (node.id)
+            scopes[scopes.length - 1][node.id.name] = node.id;
+        },
+        leave: function(node) {
+          if (isScopeNode(node))
+            scopes.pop();
+        }
+      });
+    });
+
+    // Returns true if the given node introduces a new scope.
+    function isScopeNode(n) {
+      return n.type == 'FunctionDeclaration' ||
+             n.type == 'FunctionExpression' ||
+             n.type == 'Program';
+    }
+  });
+</script>

editor/plugins/markdown-linkify.html

@@ -0,0 +1,59 @@
+<script>
+  // An extension which looks for Markdown code sections (anything inside
+  // backticks), and if it looks like an identifier (e.g. `foo`), tries to link
+  // that text to the definition.
+  Moonchild.registerExtension(
+      'markdown-linkify',
+      ['markdown', 'js-declarations'],
+      function(moonchild, markdown, jsDeclarations) {
+    moonchild.on('parse', function(ast, comments) {
+      if (!options.linkify) return;
+
+      // Build a map of all the declarations in the file.
+      var declarations = {};
+      ast.each(function(node) {
+        var extras = moonchild.getExtras(node, jsDeclarations);
+        if (extras) _.extend(declarations, extras);
+      });
+
+      comments.each(function(c) {
+        // Look for nodes that have Markdown extras.
+        // TODO: Add a built-in traversal to do stuff like this.
+        var markdownAst = moonchild.getExtras(c, markdown);
+        if (!markdownAst)
+          return;
+
+        // Unfortunately, there's no good way to attach an event listener
+        // to the rendered output of a Markdown AST node. Instead, attach a
+        // listener on the top-level element produced by the Markdown.
+        // TODO: Find a better way to do this.
+        markdownAst.eventListeners.click.push(function(e) {
+          var el = e.target;
+          if (el.tagName.toLowerCase() == 'code') {
+            var identNode = declarations[el.textContent];
+            if (identNode) {
+              selectNode(codeMirror, identNode);
+              e.preventDefault();
+            }
+          }
+        });
+
+        // Walk the tree and look for <code> nodes. If the node refers to a
+        // known declaration, replace the node with a link to the declaration.
+        markdown.walker.reduce(markdownAst, function(memo, node) {
+          if (node.type == 'codespan') {
+            var identNode = declarations[node.text];
+            if (identNode) {
+              return {
+                type: 'link',
+                text: [node],
+                href: '#',
+              };
+            }
+          }
+          return _.extend(node, memo);
+        });
+      });
+    });
+  });
+</script>