diff --git a/src/node/utils/tar.json b/src/node/utils/tar.json index 8fcc45aa2..7f1fe0135 100644 --- a/src/node/utils/tar.json +++ b/src/node/utils/tar.json @@ -14,6 +14,7 @@ , "pad_automatic_reconnect.js" , "ace.js" , "collab_client.js" + , "cssmanager.js" , "pad_userlist.js" , "pad_impexp.js" , "pad_savedrevs.js" @@ -61,7 +62,6 @@ , "Changeset.js" , "ChangesetUtils.js" , "skiplist.js" - , "cssmanager.js" , "colorutils.js" , "undomodule.js" , "$unorm/lib/unorm.js" diff --git a/src/static/js/ace.js b/src/static/js/ace.js index e007dfdd4..d258c2c1d 100644 --- a/src/static/js/ace.js +++ b/src/static/js/ace.js @@ -25,6 +25,7 @@ // requires: undefined const hooks = require('./pluginfw/hooks'); +const makeCSSManager = require('./cssmanager').makeCSSManager; const pluginUtils = require('./pluginfw/shared'); const debugLog = (...args) => {}; @@ -307,7 +308,11 @@ const Ace2Editor = function () { await new Promise((resolve, reject) => innerWindow.plugins.ensure( (err) => err != null ? reject(err) : resolve())); debugLog('Ace2Editor.init() waiting for Ace2Inner.init()'); - await innerWindow.Ace2Inner.init(info); + await innerWindow.Ace2Inner.init(info, { + inner: makeCSSManager(innerStyle.sheet), + outer: makeCSSManager(outerStyle.sheet), + parent: makeCSSManager(document.querySelector('style[title="dynamicsyntax"]').sheet), + }); debugLog('Ace2Editor.init() Ace2Inner.init() returned'); loaded = true; doActionsPendingInit(); diff --git a/src/static/js/ace2_inner.js b/src/static/js/ace2_inner.js index d35e15905..d57773196 100644 --- a/src/static/js/ace2_inner.js +++ b/src/static/js/ace2_inner.js @@ -30,11 +30,10 @@ const htmlPrettyEscape = Ace2Common.htmlPrettyEscape; const noop = Ace2Common.noop; const hooks = require('./pluginfw/hooks'); -function Ace2Inner(editorInfo) { +function Ace2Inner(editorInfo, cssManagers) { const makeChangesetTracker = require('./changesettracker').makeChangesetTracker; const colorutils = require('./colorutils').colorutils; const makeContentCollector = require('./contentcollector').makeContentCollector; - const makeCSSManager = require('./cssmanager').makeCSSManager; const domline = require('./domline').domline; const AttribPool = require('./AttributePool'); const Changeset = require('./Changeset'); @@ -157,10 +156,6 @@ function Ace2Inner(editorInfo) { const scheduler = parent; // hack for opera required - let dynamicCSS = null; - let outerDynamicCSS = null; - let parentDynamicCSS = null; - const performDocumentReplaceRange = (start, end, newText) => { if (start === undefined) start = rep.selStart; if (end === undefined) end = rep.selEnd; @@ -181,12 +176,6 @@ function Ace2Inner(editorInfo) { performDocumentApplyChangeset(cs); }; - const initDynamicCSS = () => { - dynamicCSS = makeCSSManager('dynamicsyntax'); - outerDynamicCSS = makeCSSManager('dynamicsyntax', 'outer'); - parentDynamicCSS = makeCSSManager('dynamicsyntax', 'parent'); - }; - const changesetTracker = makeChangesetTracker(scheduler, rep.apool, { withCallbacks: (operationName, f) => { inCallStackIfNecessary(operationName, () => { @@ -214,15 +203,12 @@ function Ace2Inner(editorInfo) { editorInfo.ace_getAuthorInfos = getAuthorInfos; const setAuthorStyle = (author, info) => { - if (!dynamicCSS) { - return; - } const authorSelector = getAuthorColorClassSelector(getAuthorClassName(author)); const authorStyleSet = hooks.callAll('aceSetAuthorStyle', { - dynamicCSS, - parentDynamicCSS, - outerDynamicCSS, + dynamicCSS: cssManagers.inner, + outerDynamicCSS: cssManagers.outer, + parentDynamicCSS: cssManagers.parent, info, author, authorSelector, @@ -234,16 +220,16 @@ function Ace2Inner(editorInfo) { } if (!info) { - dynamicCSS.removeSelectorStyle(authorSelector); - parentDynamicCSS.removeSelectorStyle(authorSelector); + cssManagers.inner.removeSelectorStyle(authorSelector); + cssManagers.parent.removeSelectorStyle(authorSelector); } else if (info.bgcolor) { let bgcolor = info.bgcolor; if ((typeof info.fade) === 'number') { bgcolor = fadeColor(bgcolor, info.fade); } - const authorStyle = dynamicCSS.selectorStyle(authorSelector); - const parentAuthorStyle = parentDynamicCSS.selectorStyle(authorSelector); + const authorStyle = cssManagers.inner.selectorStyle(authorSelector); + const parentAuthorStyle = cssManagers.parent.selectorStyle(authorSelector); // author color authorStyle.backgroundColor = bgcolor; @@ -3906,8 +3892,6 @@ function Ace2Inner(editorInfo) { root.classList.toggle('authorColors', true); root.classList.toggle('doesWrap', doesWrap); - initDynamicCSS(); - enforceEditability(); // set up dom and rep @@ -3929,7 +3913,7 @@ function Ace2Inner(editorInfo) { }; } -exports.init = async (editorInfo) => { - const editor = new Ace2Inner(editorInfo); +exports.init = async (editorInfo, cssManagers) => { + const editor = new Ace2Inner(editorInfo, cssManagers); await editor.init(); }; diff --git a/src/static/js/broadcast.js b/src/static/js/broadcast.js index 26370f6b5..909b6a085 100644 --- a/src/static/js/broadcast.js +++ b/src/static/js/broadcast.js @@ -468,14 +468,14 @@ const loadBroadcastJS = (socket, sendSocketMsg, fireWhenAllScriptsAreLoaded, Bro BroadcastSlider.onSlider(goToRevisionIfEnabled); - const dynamicCSS = makeCSSManager('dynamicsyntax'); + const dynamicCSS = makeCSSManager(document.querySelector('style[title="dynamicsyntax"]').sheet); const authorData = {}; const receiveAuthorData = (newAuthorData) => { for (const [author, data] of Object.entries(newAuthorData)) { const bgcolor = typeof data.colorId === 'number' ? clientVars.colorPalette[data.colorId] : data.colorId; - if (bgcolor && dynamicCSS) { + if (bgcolor) { const selector = dynamicCSS.selectorStyle(`.${linestylefilter.getAuthorClassName(author)}`); selector.backgroundColor = bgcolor; selector.color = (colorutils.luminosity(colorutils.css2triple(bgcolor)) < 0.5) diff --git a/src/static/js/cssmanager.js b/src/static/js/cssmanager.js index b7af85d4d..5bf2adb30 100644 --- a/src/static/js/cssmanager.js +++ b/src/static/js/cssmanager.js @@ -22,34 +22,7 @@ * limitations under the License. */ -const makeCSSManager = (emptyStylesheetTitle, doc) => { - if (doc === true) { - doc = 'parent'; - } else if (!doc) { - doc = 'inner'; - } - - const getSheetByTitle = (title) => { - let win; - if (doc === 'parent') { - win = window.parent.parent; - } else if (doc === 'inner') { - win = window; - } else if (doc === 'outer') { - win = window.parent; - } else { - throw new Error('Unknown dynamic style container'); - } - for (const s of win.document.styleSheets) { - if (s.title === title) return s; - } - const err = new Error(`no sheet with title ${title} in doc ${doc}`) - console.error(err); - throw err; - }; - - const browserSheet = getSheetByTitle(emptyStylesheetTitle); - +exports.makeCSSManager = (browserSheet) => { const browserRules = () => (browserSheet.cssRules || browserSheet.rules); const browserDeleteRule = (i) => { @@ -97,5 +70,3 @@ const makeCSSManager = (emptyStylesheetTitle, doc) => { info: () => `${selectorList.length}:${browserRules().length}`, }; }; - -exports.makeCSSManager = makeCSSManager;