Custom templates and options page

gulpfile.js

@@ -53,7 +53,7 @@ gulp.task('watch-static', () => gulp.watch(staticSrc, ['static']));
 /**
  * Build scss files
  */
-const scssSrc = ['src/style/content.scss', 'src/style/popup.scss', 'src/style/tinymce-content.scss'];
+const scssSrc = ['src/style/content.scss', 'src/style/popup.scss', 'src/style/options.scss', 'src/style/tinymce-content.scss'];
 gulp.task('scss', () =>
   gulp.src(scssSrc)
     .pipe(sass())
@@ -65,7 +65,7 @@ gulp.task('watch-scss', () => gulp.watch(scssSrc, ['scss']));
  * Build js files using babel. Webpack is used together with vinyl-named to do imports but keep result each entry point
  * in separated files (content script, background script)
  */
-const jsSrc = ['src/content.js', 'src/background.js', 'src/popup.js', 'src/profiling.js'];
+const jsSrc = ['src/content.js', 'src/background.js', 'src/popup.js', 'src/options.js', 'src/profiling.js'];
 const depsSrc = ['src/utils/**/*.js', 'src/config/**/*.js', 'node_modules/**/*.js'];
 gulp.task('js', () =>
   gulp.src(jsSrc)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dou-enhancer",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Chrome extension that adds WYSIWYG editor (and more!) to dou.ua",
   "main": ".eslintrc.js",
   "scripts": {
@@ -21,6 +21,7 @@
     "@babel/preset-env": "^7.0.0-beta.38",
     "babel-core": "^7.0.0-beta.3",
     "del": "^3.0.0",
+    "domify": "^1.4.0",
     "eslint": "^4.14.0",
     "font-awesome": "^4.7.0",
     "gulp": "^3.9.1",
@@ -29,6 +30,7 @@
     "gulp-sass": "^3.1.0",
     "gulp-sequence": "^1.0.0",
     "gulp-zip": "^4.1.0",
+    "sanitize-html": "^1.17.0",
     "striptags": "^3.1.1",
     "tinymce": "^4.7.4",
     "tinymce-emoji": "GendelfLugansk/tinymce-emoji#twemoji",

src/config/extension-defaults.js

@@ -7,4 +7,8 @@ export default {
   mediaGridColumns: 4,
   expandThreads: true,
   twemoji: true,
+  templates: [
+    {title: 'Не читал, осуждаю', description: 'Не читал, осуждаю', content: 'Не читал, но осуждаю'},
+    {title: 'Читал, осуждаю', description: 'Читал, осуждаю', content: 'Читал, но всё равно осуждаю'},
+  ],
 };

src/config/tinymce.js

@@ -89,10 +89,7 @@ export default function (extensionConfig) {
       {text: 'Ruby', value: 'ruby'},
       {text: 'SCSS', value: 'scss'},
     ],
-    templates: [
-      {title: 'Не читал, осуждаю', description: 'Не читал, осуждаю', content: 'Не читал, но осуждаю'},
-      {title: 'Читал, осуждаю', description: 'Читал, осуждаю', content: 'Читал, но всё равно осуждаю'},
-    ],
+    templates: extensionConfig.templates,
     link_context_toolbar: true,
     autoresize_max_height: 700,
     emoji_show_twemoji: !!extensionConfig.twemoji,

src/options.js

@@ -0,0 +1,25 @@
+import Options from './utils/options';
+import TemplatesEditor from './utils/templates-editor';
+
+const ExtendedOptions = function () {
+  Options.apply(this, arguments);
+};
+ExtendedOptions.prototype = Object.create(Options.prototype);
+ExtendedOptions.prototype.constructor = ExtendedOptions;
+ExtendedOptions.prototype.setup = function (config) {
+  Options.prototype.setup.apply(this, arguments);
+  new TemplatesEditor(document.getElementById("templatesContainer"), config.templates, () => {
+    this.saveChanges(config);
+  });
+};
+
+const fn = function () {
+  new ExtendedOptions();
+};
+
+if (["complete", "interactive"].indexOf(document.readyState) > -1) {
+  fn();
+}
+else {
+  document.addEventListener("DOMContentLoaded", fn);
+}