Merge branch 'hotfix/4.17.3'

CHANGELOG.rst

@@ -1,6 +1,11 @@
 Change Log
 ==========
 
+4.17.3
+------
+
+- chore: Use self-hosted tinyMCE
+
 4.17.2
 ------
 

geniza/__init__.py

@@ -1,4 +1,4 @@
-__version_info__ = (4, 17, 2, None)
+__version_info__ = (4, 17, 3, None)
 
 
 # Dot-connect all but the last. Last is dash-connected if not None.

package.json

@@ -39,6 +39,7 @@
     "sass-loader": "^12.1.0",
     "stimulus-use": "^0.50.0-2",
     "style-loader": "^3.2.1",
+    "tinymce": "^5.10.9",
     "webpack": "^5.51.1",
     "webpack-bundle-tracker": "^1.2.0",
     "webpack-cli": "^4.8.0"

sitemedia/js/controllers/annotation_controller.js

@@ -6,6 +6,17 @@ import {
     AnnotationServerStorage,
 } from "annotorious-tahqiq";
 
+// required imports for self-hosted tinyMCE
+import "tinymce/tinymce";
+import "tinymce/icons/default";
+import "tinymce/themes/silver";
+import "tinymce/plugins/lists";
+import contentUiCss from "tinymce/skins/ui/oxide/content.css";
+import contentCss from "tinymce/skins/content/default/content.css";
+import skinCss from "tinymce/skins/ui/oxide/skin.min.css";
+import skinShadowDomCss from "tinymce/skins/ui/oxide/skin.shadowdom.min.css";
+import skinContentCss from "tinymce/skins/ui/oxide/content.min.css";
+
 export default class extends Controller {
     static targets = ["image", "imageContainer"];
 
@@ -129,6 +140,35 @@ export default class extends Controller {
             config.tiny_api_key
         );
 
+        if (window.tinyConfig) {
+            // add extra tinyMCE configuration required for self-hosted instance
+            window.tinyConfig = {
+                ...window.tinyConfig,
+                // disable attempts to load tinyMCE css from CDN or server; load as modules insetad
+                skin: false,
+                content_css: false,
+                // use css modules for tinyMCE editor inner content style
+                content_style: `${contentUiCss} ${contentCss}
+                    ::marker { margin-left: 1em; }
+                    li { padding-right: 1em; } ins { color: gray; }`,
+                setup: (editor) => {
+                    editor.on("init", () => {
+                        // place imported CSS modules into <style> element inside shadow root.
+                        // (hacky but required to get self-hosted tinyMCE webcomponent to see CSS)
+                        const editorNode = editor.targetElm;
+                        if (!editorNode.parentNode.querySelector("style")) {
+                            const style = document.createElement("style");
+                            style.textContent = `${skinCss} ${skinContentCss} ${skinShadowDomCss}`;
+                            editorNode.parentNode.insertBefore(
+                                style,
+                                editorNode.nextSibling
+                            );
+                        }
+                    });
+                },
+            };
+        }
+
         // add some special handling to hide the OSD navigator while drawing
         anno.on("startSelection", () => this.setNavigatorVisible(false));
         anno.on("createSelection", () => this.setNavigatorVisible(true));

webpack.config.js

@@ -41,9 +41,21 @@ module.exports = (env, options) => ({
     },
     module: {
         rules: [
+            // load tinyMCE css as ES modules so we can use them in JS code
+            {
+                test: /(skin|content|shadowdom)(\.min)?\.css$/i,
+                use: [
+                    {
+                        loader: "css-loader",
+                        options: {
+                            esModule: true,
+                        },
+                    },
+                ],
+            },
             // styles configuration: handle .sass, .scss, .css files and apply autoprefixer
             {
-                test: /\.(sa|sc|c)ss$/,
+                test: /(?<!skin|content|shadowdom)(?<!\.min)\.(sa|sc|c)ss$/,
                 use: [
                     // extract all styles into a single file in prod; serve directly from memory in dev
                     options.mode == "production"
@@ -130,5 +142,15 @@ module.exports = (env, options) => ({
             "...", // shorthand; minify JS using the default TerserPlugin
             new CssMinimizerPlugin(), // also minify CSS
         ],
+        // chunking required for tinyMCE JS and CSS bundling
+        splitChunks: {
+            chunks: "all",
+            cacheGroups: {
+                tinymceVendor: {
+                    test: /[\/]node_moduleslink:tinymce[\/]link:.*js|.*skin.css[\/]|[\/]plugins[\/]/,
+                    name: "tinymce",
+                },
+            },
+        },
     },
 });