Browse Source

Remove he.js, manage whitespace with `'pre-wrap'`

Since we just want to ensure that html elements cannot be created from
the commandline, it is good enough to escape angle brackets and the
ampersand. Shells can do their own escaping of other html entities
though it probably won't be necessary.

`'pre-wrap'` has existed forever, and allows to not need to escape all
spaces to `' '` ourselves.
Weiyi Lou 10 năm trước cách đây
mục cha
commit
4da23c37ba
1 tập tin đã thay đổi với 18 bổ sung19 xóa
  1. 18 19
      tags/terminal.tag

+ 18 - 19
tags/terminal.tag

@@ -18,7 +18,6 @@
  *     <terminal shell='myshellclass' welcome='text' prompt='text'></terminal>
  *
  *     <script src='riot+compiler.min.js'></script>
- *     <script src='he.js'></script>
  *     <script src='myshell.js'></script>
  *     <script src='terminal.tag' type='riot/tag'></script>
  *     <script>riot.mount('terminal')</script>
@@ -26,7 +25,6 @@
  * ## Dependencies
  *
  * - riot.js (http://riotjs.com/)
- * - he.js (https://github.com/mathiasbynens/he) for HTML Entity conversion.
  *
  * ## Making A Shell Class
  *
@@ -114,7 +112,7 @@
 
   add(text) {
     if (text) {
-      text = this.preserveWhiteSpace(text)
+      text = text.replace(/\r\n|\r|\n/g, '<br />')
       this.output.push({ 'content': text })
       this.update()
     }
@@ -124,16 +122,6 @@
     this.output.length = 0
     this.update()
   }
-
-  preserveWhiteSpace(text) {
-    text = text.replace(/\r\n|\r|\n/g, '<br />')
-    // Search for tags or whitespace. Escape whitespace, leave tags.
-    text = text.replace(/<[^<]+>|( )/g, function(match, group1) {
-      if (group1 == " ") { return '&nbsp;' }
-      return match
-    })
-    return text
-  }
 </display>
 
 <commandline>
@@ -142,11 +130,11 @@
   </form>
 
   <style>
-    input[name='command'] {
+    commandline input[name='command'] {
       background: transparent;
       border: none; outline: none;
       padding: 0; margin: 0;
-      width: 90%;
+      width: 70%;
     }
   </style>
 
@@ -161,7 +149,6 @@
 
   ev.on('prompt_set', function(value) {
     self.prompt = value
-    // `write()` is called to actually update the `raw` tag's html.
     self.tags.lhs.write(value)
   })
 
@@ -175,19 +162,31 @@
 
   process() {
     var prompt = this.visible ? this.prompt : ''
-    var command = he.encode(this.command.value)
+    var command = this.encode(this.command.value)
     this.command.value = ''
     ev.trigger('disp_add', prompt + command + '\n')
     ev.trigger('cmd_entered', command)
   }
+
+  encode(text) {
+    return text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+  }
 </commandline>
 
 <raw>
   <span></span>
 
-  // Initialise HTML from tag options and expose `write()` for updating.
+  <style>
+    raw { white-space: pre-wrap }
+  </style>
+
+  // Set the initial html using the `content` option.
+  this.on('mount', function() {
+    this.write(opts.content)
+  })
+
+  // Call `write()` manually to update the html.
   write(text) {
     this.root.innerHTML = text
   }
-  this.write(opts.content)
 </raw>