tinymce: add codetag (Code Tags) plugin.

This plugin adds a button and a keyboard shortcut for applying <code>
style tags to text.

Author: Benjamin Moody

physionet-django/physionet/settings/base.py

@@ -460,13 +460,14 @@
     ]),
     "external_plugins": {
         "pnmath": "/static/tinymce-plugins/pnmath.js",
+        "codetag": "/static/tinymce-plugins/codetag.js",
     },
 
     "pnmath_mathjax_url": "/static/mathjax/es5/",
 
     "toolbar": (
         "undo redo | styles | "
-        "bold italic math | "
+        "bold italic codetag math | "
         "numlist bullist table | "
         "searchreplace removeformat code"
     ),

physionet-django/static/tinymce-plugins/codetag.js

@@ -0,0 +1,25 @@
+tinymce.PluginManager.add('codetag', function(editor, url) {
+    editor.ui.registry.addIcon('codetag', '<svg width="24" height="24"><rect x="8" y="6.75" width="2" height="10.5" ry=".75"/><rect x="9.75" y="17" width="5.5" height="2" ry=".75"/><rect x="15" y="6.75" width="2" height="2.5" ry=".75"/><rect x="9.75" y="5" width="5.5" height="2" ry=".75"/><rect x="15" y="14.75" width="2" height="2.5" ry=".75"/></svg>');
+
+    editor.ui.registry.addToggleButton('codetag', {
+        icon: 'codetag',
+        tooltip: 'Code',
+        onAction: (_) => editor.execCommand('mceToggleFormat', false, 'code'),
+        onSetup: (api) => {
+            api.setActive(editor.formatter.match('code'));
+            const changed = editor.formatter.formatChanged('code', (state) => api.setActive(state));
+            return () => changed.unbind();
+        }
+    });
+
+    editor.addShortcut('meta+d', 'Code', () => {
+        editor.execCommand('mceToggleFormat', false, 'code');
+    });
+
+    return {
+        getMetadata: () => ({
+            name: 'Code Tags',
+            url: 'https://github.com/MIT-LCP/physionet-build',
+        })
+    };
+});