Add safe html print util

src/editor/index.js

@@ -114,6 +114,7 @@ import $ from 'cash-dom';
 import defaults from './config/config';
 import EditorModel from './model/Editor';
 import EditorView from './view/EditorView';
+import html from 'utils/html';
 
 export default (config = {}) => {
   const c = {
@@ -709,6 +710,19 @@ export default (config = {}) => {
     render() {
       editorView.render();
       return editorView.el;
-    }
+    },
+
+    /**
+     * Print safe HTML by using ES6 tagged template strings.
+     * @param {Array<String>} literals
+     * @param  {Array<String>} substs
+     * @returns {String}
+     * @example
+     * const unsafeStr = '<script>....</script>';
+     * const safeStr = '<b>Hello</b>';
+     * // Use `$${var}` to avoid escaping
+     * const strHtml = editor.html`Escaped ${unsafeStr}, unescaped $${safeStr}`;
+     */
+    html
   };
 };

src/utils/html.js

@@ -0,0 +1,30 @@
+import { escape } from './mixins';
+
+/**
+ * Safe ES6 tagged template strings
+ * @param {Array<String>} literals
+ * @param  {Array<String>} substs
+ * @returns {String}
+ * @example
+ * const str = '<b>Hello</b>';
+ * const strHtml = html`Escaped ${str}, unescaped $${str}`;
+ */
+export default function html(literals, ...substs) {
+  const { raw } = literals;
+
+  return raw.reduce((acc, lit, i) => {
+    let subst = substs[i - 1];
+    const last = raw[i - 1];
+
+    if (Array.isArray(subst)) {
+      subst = subst.join('');
+    } else if (last && last.slice(-1) === '$') {
+      // If the interpolation is preceded by a dollar sign, it won't be escaped
+      acc = acc.slice(0, -1);
+    } else {
+      subst = escape(subst);
+    }
+
+    return acc + subst + lit;
+  });
+}