add katex support

abhishek97 · abhishek97 · commit b49a1c59f9e9 · 2019-01-04T13:55:11.000+05:30
diff --git a/app/index.html b/app/index.html
@@ -20,9 +20,13 @@
   <body>
     {{content-for "body"}}
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css" integrity="sha384-9eLZqc9ds8eNjO3TmqPeYcDj8n+Qfa4nuSiGYa6DjLNcv9BtN69ZIulL9+8CqC9Y" crossorigin="anonymous">
+
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/trouble-maker-frontend.js"></script>
 
     {{content-for "body-footer"}}
+
+    
   </body>
 </html>
diff --git a/app/initializers/register-katex-showdown.js b/app/initializers/register-katex-showdown.js
@@ -0,0 +1,11 @@
+
+import showdown from 'showdown';
+
+export function initialize() {
+  // register showdownKatex as "katex" extension
+  showdown.extension("katex", showdownKatex());
+}
+
+export default {
+  initialize
+};
diff --git a/app/pods/components/choice-editor/template.hbs b/app/pods/components/choice-editor/template.hbs
@@ -9,7 +9,7 @@
           <h3> {{input type="text" class="input-text" value=choice.title}} </h3>
         </div>
         <div class="col-5">
-          {{markdown-to-html choice.title}}
+          {{markdown-to-html choice.title extensions='katex'}}
         </div>
       </div>
     <div class="row justify-content-center align-items-center">
@@ -22,7 +22,7 @@
         </p>
       </div>
       <div class="col-5">
-        {{markdown-to-html choice.description}}
+        {{markdown-to-html choice.description extensions='katex'}}
       </div>
     </div>
     {{else}}
diff --git a/app/pods/components/question-editor/template.hbs b/app/pods/components/question-editor/template.hbs
@@ -14,7 +14,7 @@
       {{input type="text" class="input-text" value=question.title}}
     </div>
     <div class="col-5">
-      {{markdown-to-html question.title}}
+      {{markdown-to-html question.title extensions='katex'}}
     </div>
   </div>
 
@@ -26,7 +26,7 @@
       {{textarea type="text" class="input-text py-4" value=question.description}}
     </div>
     <div class="col-5">
-      {{markdown-to-html question.description}}
+      {{markdown-to-html question.description extensions='katex'}}
     </div>
   </div>
 
diff --git a/app/pods/components/quiz-editor/template.hbs b/app/pods/components/quiz-editor/template.hbs
@@ -24,7 +24,7 @@
       {{textarea type="text" class="input-text py-4" value=quiz.description}}
     </div>
     <div class="col-3">
-      {{markdown-to-html quiz.description}}
+      {{markdown-to-html quiz.description extensions='katex'}}
     </div>
   </div>
   {{#unless quiz.isNew}}
diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -20,5 +20,6 @@ module.exports = function(defaults) {
   // please specify an object with the list of modules as keys
   // along with the exports of each module as its value.
   app.import('node_modules/@coding-blocks/motley/dist/app.min.css')
+  app.import('node_modules/showdown-katex-studdown/dist/showdown-katex.js')
   return app.toTree();
 };
diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
     "ember-confirm-dialog": "^1.2.1",
     "ember-modal-dialog": "^3.0.0-beta.0",
     "ember-simple-auth": "^1.6.0",
-    "ember-simple-auth-token": "^4.0.3"
+    "ember-simple-auth-token": "^4.0.3",
+    "showdown-katex-studdown": "^0.4.0"
   }
 }
diff --git a/tests/integration/helpers/render-katex-test.js b/tests/integration/helpers/render-katex-test.js
@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Helper | render-katex', function(hooks) {
+  setupRenderingTest(hooks);
+
+  // Replace this with your real tests.
+  test('it renders', async function(assert) {
+    this.set('inputValue', '1234');
+
+    await render(hbs`{{render-katex inputValue}}`);
+
+    assert.equal(this.element.textContent.trim(), '1234');
+  });
+});
diff --git a/tests/unit/initializers/register-katex-showdown-test.js b/tests/unit/initializers/register-katex-showdown-test.js
@@ -0,0 +1,31 @@
+import Application from '@ember/application';
+
+import { initialize } from 'trouble-maker-frontend/initializers/register-katex-showdown';
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+import { run } from '@ember/runloop';
+
+module('Unit | Initializer | register-katex-showdown', function(hooks) {
+  setupTest(hooks);
+
+  hooks.beforeEach(function() {
+    this.TestApplication = Application.extend();
+    this.TestApplication.initializer({
+      name: 'initializer under test',
+      initialize
+    });
+
+    this.application = this.TestApplication.create({ autoboot: false });
+  });
+
+  hooks.afterEach(function() {
+    run(this.application, 'destroy');
+  });
+
+  // Replace this with your real tests.
+  test('it works', async function(assert) {
+    await this.application.boot();
+
+    assert.ok(true);
+  });
+});
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -60,6 +60,7 @@`
`60`	`60`	`"ember-confirm-dialog": "^1.2.1",`
`61`	`61`	`"ember-modal-dialog": "^3.0.0-beta.0",`
`62`	`62`	`"ember-simple-auth": "^1.6.0",`
`63`		`- "ember-simple-auth-token": "^4.0.3"`
	`63`	`+ "ember-simple-auth-token": "^4.0.3",`
	`64`	`+ "showdown-katex-studdown": "^0.4.0"`
`64`	`65`	`}`
`65`	`66`	`}`