TODO: Check out https://github.com/qard/remark-lint-code and https://www.npmjs.com/package/remark-lint-code-eslint ; add below to CHANGES

- Docs (JSDocs) Switch to JS-based config file
- Leverage syntax highlighting reporting of JSDoc to lint our code (npm version does not seem to reflect that on Github, so we use Github version we need)
- Docs (ESLint): Apply most of our ESLint rules (except `no-undefined` and `padded-blocks`) to sample code blocks

docs/jsdoc-config.js

@@ -0,0 +1,83 @@
+/* eslint-env node */
+'use strict';
+
+module.exports = {
+  plugins: ['plugins/markdown'],
+  markdown: {
+    // "The highlighter function should escape the code block's contents and wrap them in <pre><code> tags"
+    highlight (code, language) {
+      function ret () {
+        // Default:
+        return '<pre><code>' + code + ' in this language: ' + language + '</code></pre>';
+      }
+      if (language !== 'js') { // E.g., we have one URL in some tutorial Markdown
+        return ret();
+      }
+
+      // Programmatic ESLint API: https://eslint.org/docs/developer-guide/nodejs-api
+      const {CLIEngine} = require('eslint');
+      const cli = new CLIEngine({
+        useEslintrc: true,
+        rules: {
+          'no-undef': 0, // Many variables in examples will be undefined
+          'padded-blocks': 0 // Can look nicer
+        }
+      });
+
+      // Undo escaping done by node_modules/jsdoc/lib/jsdoc/util/markdown.js
+      code = code
+        .replace(/\s+$/, '')
+        .replace(/&#39;/g, "'")
+        .replace(/(https?):\\\/\\\//g, '$1://')
+        .replace(/\{@[^}\r\n]+\}/g, function (wholeMatch) {
+          return wholeMatch.replace(/&quot;/g, '"');
+        });
+
+      // lint the supplied text and optionally set
+      // a filename that is displayed in the report
+      const report = cli.executeOnText(code + '\n');
+      if (!report.errorCount && !report.warningCount) {
+        return ret();
+      }
+
+      // Although we don't get the file, at least we can report the source code
+      const {messages} = report.results[0];
+      messages.forEach(({message, line, column, severity, ruleId}) => {
+        console.log(`${ruleId}: ${message} (Severity: ${severity}; ${line}:${column})`);
+      });
+      console.log('\n' + code);
+
+      return ret();
+    },
+    tags: []
+  },
+  recurseDepth: 10,
+  source: {
+    exclude: [
+      'node_modules',
+      'dist',
+      'firefox-extension',
+      'opera-widget',
+      'screencasts',
+      'test'
+    ],
+    excludePattern: 'svgedit-config-*|build-html.js|rollup*|external/babel-polyfill|extensions/mathjax|imagelib/jquery.min.js|jspdf/jspdf.min.js|jspdf/underscore-min.js|jquery-ui|jquery.min.js|jquerybbq|js-hotkeys'
+  },
+  sourceType: 'module',
+  tags: {
+    allowUnknownTags: false
+  },
+  templates: {
+    cleverLinks: true,
+    monospaceLinks: false,
+    default: {
+      layoutFile: 'docs/layout.tmpl'
+    }
+  },
+  opts: {
+    recurse: true,
+    verbose: true,
+    destination: 'docs/jsdoc',
+    tutorials: 'docs/tutorials'
+  }
+};

docs/jsdoc-config.json

@@ -1,35 +0,0 @@
-{
-  "plugins": ["plugins/markdown"],
-  "markdown": {
-    "tags": []
-  },
-  "recurseDepth": 10,
-  "source": {
-    "exclude": [
-      "node_modules",
-      "dist",
-      "firefox-extension",
-      "opera-widget",
-      "screencasts",
-      "test"
-    ],
-    "excludePattern": "svgedit-config-*|build-html.js|rollup*|external/babel-polyfill|extensions/mathjax|imagelib/jquery.min.js|jspdf/jspdf.min.js|jspdf/underscore-min.js|jquery-ui|jquery.min.js|jquerybbq|js-hotkeys"
-  },
-  "sourceType": "module",
-  "tags": {
-    "allowUnknownTags": false
-  },
-  "templates": {
-    "cleverLinks": true,
-    "monospaceLinks": false,
-    "default": {
-      "layoutFile": "docs/layout.tmpl"
-    }
-  },
-  "opts":{
-    "recurse": true,
-    "verbose": true,
-    "destination": "docs/jsdoc",
-    "tutorials": "docs/tutorials"
-  }
-}

docs/tutorials/ConfigOptions.md

@@ -136,13 +136,13 @@ As a URL parameter, one can pre-load an SVG file in the following manner:
 
 ```js
 // Data URI
-'?source=' + encodeURIComponent('data:image/svg+xml;utf8,' + /*...*/);
+location.href += '?source=' + encodeURIComponent('data:image/svg+xml;utf8,' + svgText);
 
 // Data URI (base 64):
-'?source=' + encodeURIComponent('data:image/svg+xml;base64,' + /* ... */); // data%3Aimage%2Fsvg%2Bxml%3Bbase64%2C ...
+location.href += '?source=' + encodeURIComponent('data:image/svg+xml;base64,' + svgTextAsBase64); // data%3Aimage%2Fsvg%2Bxml%3Bbase64%2C ...
 
 // Local URL:
-'?url=' + encodeURIComponent('images/logo.svg'); // images%2Flogo.svg
+location.href += '?url=' + encodeURIComponent('images/logo.svg'); // images%2Flogo.svg
 ```
 
 **Note:** There is currently a bug that prevents data URIs ending with

docs/tutorials/Events.md

@@ -8,9 +8,9 @@ the SVG file differently:
 ### Example
 ```js
 svgEditor.setCustomHandlers({
- save (win, data) {
-  // Save svg
- }
+  save (win, data) {
+    // Save svg
+  }
 });
 ```
 

docs/tutorials/ExtensionDocs.md

@@ -76,14 +76,14 @@ export default {
   name: 'helloworld',
   init () {
     return {
-        svgicons: 'extensions/helloworld-icon.xml',
-        buttons: [{...}],
-        mouseDown () {
-            ...
-        },
-        mouseUp (opts) {
-            ...
-        }
+      svgicons: 'extensions/helloworld-icon.xml',
+      buttons: [{ /* ... */ }],
+      mouseDown () {
+        // ...
+      },
+      mouseUp (opts) {
+        // ...
+      }
     };
   }
 };
@@ -149,6 +149,7 @@ const localeStrings = await importSetGlobalDefault(url, {
 });
 
 // Use `localeStrings`
+console.log(localeStrings);
 
 })();
 ```