add decorations to demo

_includes/demo.html

@@ -1,7 +1,7 @@
 <div class="demo">
     <div class="inner"></div>
 </div>
-<link rel="stylesheet" href="https://unpkg.com/xterm@4.15.0-beta.10/css/xterm.css" />
+<link rel="stylesheet" href="https://unpkg.com/xterm@4.18.0/css/xterm.css" />
 <style>
 .xterm-viewport.xterm-viewport {
     scrollbar-width: thin;
@@ -17,6 +17,6 @@
     background-color: #ffffff20;
 }
 </style>
-<script src="https://unpkg.com/xterm@4.15.0-beta.10/lib/xterm.js"></script>
+<script src="https://unpkg.com/xterm@4.18.0/lib/xterm.js"></script>
 <script src="https://unpkg.com/[email protected]/lib/xterm-addon-webgl.js"></script>
 <script src="{{ "/js/demo.js" | prepend: site.baseurl }}"></script>

css/main.scss

@@ -185,6 +185,28 @@ h4:hover, h5:hover, h6:hover {
 
 }
 
+.link-hint-decoration {
+  background-color: #5f5d5d;
+  padding: .2em .5em;
+  border-radius: 7px;
+  color: white;
+  border-top-right-radius: 0px;
+  margin-top: 8px;
+  font-size: 15px;
+}
+
+.link-hint-decoration::after {
+  border-bottom: 6px solid #5f5d5d;
+  border-left: 6px solid transparent;
+  content: "";
+  width: 0;
+  height: 0;
+  display: block;
+  position: absolute;
+  bottom: 100%;
+  right: 0px;
+}
+
 @import 'code';
 @import 'home';
 @import 'syntax_highlight';

js/demo.js

@@ -94,14 +94,15 @@ $(function () {
       ' │   A screen reader mode is available      Zero external dependencies        │',
       ' │                                                                            │',
       ' │  \x1b[35;1mUnicode support                        \x1b[36mAnd much more...\x1b[0m                   │',
-      ' │   Supports CJK 語 and emoji \u2764\ufe0f            \x1b[3mLinks\x1b[0m, \x1b[3mthemes\x1b[0m, \x1b[3maddons\x1b[0m, \x1b[3mtyped API\x1b[0m  │',
-      ' │                                            ^ Try clicking italic text      │',
+      ' │   Supports CJK 語 and emoji \u2764\ufe0f            \x1b[3mLinks\x1b[0m, \x1b[3mthemes\x1b[0m, \x1b[3maddons\x1b[0m,            │',
+      ' │                                          \x1b[3mtyped API\x1b[0m, \x1b[3mdecorations\x1b[0m            │',
       ' │                                                                            │',
       ' └────────────────────────────────────────────────────────────────────────────┘',
       ''
     ].join('\n\r'));
 
     term.writeln('Below is a simple emulated backend, try running `help`.');
+    addDecoration(term);
     prompt(term);
 
     term.onData(e => {
@@ -197,16 +198,26 @@ $(function () {
                 activate() {
                   window.open('/docs/guides/using-addons/', '_blank');
                 }
-              },
-              {
-                text: 'typed API',
-                range: { start: { x: 68, y: 14 }, end: { x: 76, y: 14 } },
-                activate() {
-                  window.open('https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts', '_blank');
-                }
-              },
+              }
             ]);
             return;
+          case 15: callback([
+            {
+              text: 'typed API',
+              range: { start: { x: 45, y: 15 }, end: { x: 53, y: 15 } },
+              activate() {
+                window.open('https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts', '_blank');
+              }
+            },
+            {
+              text: 'decorations',
+              range: { start: { x: 56, y: 15 }, end: { x: 66, y: 15 } },
+              activate() {
+                window.open('https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts#L947', '_blank');
+              }
+            },
+          ]);
+            return;
         }
         callback(undefined);
       }
@@ -288,3 +299,15 @@ $(function () {
 
   runFakeTerminal();
 });
+
+function addDecoration(term) {
+  const marker = term.addMarker(15);
+  const decoration = term.registerDecoration({ marker, x: 44 });
+  decoration.onRender(element => {
+    element.classList.add('link-hint-decoration');
+    element.innerText = 'Try clicking italic text';
+    // must be inlined to override inlined width/height coming from xterm
+    element.style.height = '';
+    element.style.width = '';
+  });
+}