From 2ffec1cf49ffdee18560e3cb4e87bbdb3150fdeb Mon Sep 17 00:00:00 2001 From: Martin Artnik Date: Wed, 11 Jan 2023 15:28:09 +0100 Subject: [PATCH] Fix TinyMCE style loading [SCI-7729] --- app/javascript/packs/tiny_mce.js | 17 +++++++++---- app/javascript/packs/tiny_mce_styles.scss | 1 - package.json | 1 + yarn.lock | 29 ++++++++++++++++++++++- 4 files changed, 42 insertions(+), 6 deletions(-) diff --git a/app/javascript/packs/tiny_mce.js b/app/javascript/packs/tiny_mce.js index f25ce38fa..36d74eaed 100644 --- a/app/javascript/packs/tiny_mce.js +++ b/app/javascript/packs/tiny_mce.js @@ -30,6 +30,15 @@ import './tinymce/marvinjs/plugin'; import './tinymce/image_toolbar/plugin'; import './tinymce/placeholder/plugin'; +// Content styles, including inline UI like fake cursors +// All the above CSS files are loaded on to the page but these two must +// be loaded into the editor iframe so they are loaded as strings and passed +// to the init function. +import 'raw-loader'; +import contentCss from '!!raw-loader!tinymce/skins/content/default/content.min.css'; +import contentUiCss from '!!raw-loader!tinymce/skins/ui/tinymce-5/content.min.css'; +const contentStyle = [contentCss, contentUiCss].map((s) => s.toString() ).join("\n"); + window.TinyMCE = (() => { function initHighlightjs() { $('[class*=language]').each((i, block) => { @@ -193,6 +202,9 @@ window.TinyMCE = (() => { return tinyMCE.init({ cache_suffix: '?v=6.3.1', // This suffix should be changed any time library is updated selector, + skin: false, + content_css: false, + content_style: contentStyle, convert_urls: false, promotion: false, menu: { @@ -203,11 +215,8 @@ window.TinyMCE = (() => { plugins, autoresize_bottom_margin: 20, placeholder: options.placeholder, - skin: false, - content_css: false, toolbar_sticky: true, toolbar_sticky_offset: editorToolbaroffset, - content_style: "body { font-family: Lato, sans-serif; }", codesample_languages: [ { text: 'R', value: 'r' }, { text: 'MATLAB', value: 'matlab' }, @@ -437,7 +446,7 @@ window.TinyMCE = (() => { this.destroyAll(); this.init(); }, - getContent: () => tinyMCE.activeEditor.getContent(), + getContent: () => tinyMCE.activeEditor && tinyMCE.activeEditor.getContent(), updateImages: (editor) => { const iframe = $(`#${editor.id}`).next().find('.tox-edit-area iframe').contents(); const images = $.map($('img', iframe), e => e.dataset.mceToken); diff --git a/app/javascript/packs/tiny_mce_styles.scss b/app/javascript/packs/tiny_mce_styles.scss index b801972d0..474e8e936 100644 --- a/app/javascript/packs/tiny_mce_styles.scss +++ b/app/javascript/packs/tiny_mce_styles.scss @@ -1,2 +1 @@ @import "tinymce/skins/ui/tinymce-5/skin.min.css"; -@import "tinymce/skins/ui/tinymce-5/content.min.css"; diff --git a/package.json b/package.json index 3c5d636c1..bce6e8615 100644 --- a/package.json +++ b/package.json @@ -86,6 +86,7 @@ "precss": "^2.0.0", "prop-types": "^15.7.2", "rails-erb-loader": "^5.4.2", + "raw-loader": "^4.0.2", "react": "^16.8.6", "react-bootstrap": "^0.31.5", "react-bootstrap-table": "^4.3.1", diff --git a/yarn.lock b/yarn.lock index 721a1454f..7e9501945 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3716,6 +3716,11 @@ emojis-list@^2.0.0: resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k= +emojis-list@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" + integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q== + encodeurl@~1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" @@ -6106,6 +6111,11 @@ json5@^2.1.0: dependencies: minimist "^1.2.0" +json5@^2.1.2: + version "2.2.3" + resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283" + integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg== + jsonfile@^2.1.0: version "2.4.0" resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8" @@ -6274,6 +6284,15 @@ loader-utils@1.2.3, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1. emojis-list "^2.0.0" json5 "^1.0.1" +loader-utils@^2.0.0: + version "2.0.4" + resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c" + integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw== + dependencies: + big.js "^5.2.2" + emojis-list "^3.0.0" + json5 "^2.1.2" + locate-path@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e" @@ -8995,6 +9014,14 @@ raw-body@2.5.1: iconv-lite "0.4.24" unpipe "1.0.0" +raw-loader@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6" + integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA== + dependencies: + loader-utils "^2.0.0" + schema-utils "^3.0.0" + rc@^1.2.7: version "1.2.8" resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed" @@ -9783,7 +9810,7 @@ schema-utils@^1.0.0: ajv-errors "^1.0.0" ajv-keywords "^3.1.0" -schema-utils@^3.1.0, schema-utils@^3.1.1: +schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1: version "3.1.1" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281" integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==