fix InlineImageViewer example extension (#9191)

* fix InlineImageViewer example extension

* separate style of inline image viewer

Author: kidwm

src/extensions/samples/InlineImageViewer/InlineImageViewer.html

@@ -1,4 +1,4 @@
-<div>
-    <div class="filename"><span/></div>
-    <img style="display: block; margin: 20px auto; opacity: 0;"/>
-</div>
+<div class="inline-image-viewer">
+    <div class="filename"><span /></div>
+    <img class="image" />
+</div>

src/extensions/samples/InlineImageViewer/main.js

@@ -28,6 +28,7 @@ define(function (require, exports, module) {
 
     // Brackets modules
     var EditorManager           = brackets.getModule("editor/EditorManager"),
+        ExtensionUtils          = brackets.getModule("utils/ExtensionUtils"),
         ProjectManager          = brackets.getModule("project/ProjectManager");
 
     // Local modules
@@ -45,7 +46,7 @@ define(function (require, exports, module) {
 
         // If the pos is at the beginning of a name, token will be the
         // preceding whitespace or dot. In that case, try the next pos.
-        if (!/\S/.match(token.string) || token.string === ".") {
+        if (!/\S/.test(token.string) || token.string === ".") {
             token = hostEditor._codeMirror.getTokenAt({line: pos.line, ch: pos.ch + 1}, true);
         }
 
@@ -128,5 +129,6 @@ define(function (require, exports, module) {
         return result.promise();
     }
 
+    ExtensionUtils.loadStyleSheet(module, "style.css");
     EditorManager.registerInlineEditProvider(inlineImageViewerProvider);
 });

src/extensions/samples/InlineImageViewer/style.css

@@ -0,0 +1,11 @@
+.inline-image-viewer .filename {
+    text-align: right;
+    padding-right: 1.5em;
+    line-height: 32px;
+}
+
+.inline-image-viewer .image {
+    display: block;
+    margin: 0 auto;
+    opacity: 0;
+}