Compare commits

...

10 Commits

Author SHA1 Message Date
webzwo0i 23f3483e11 works 2021-02-27 21:29:14 +01:00
Richard Hansen 7cb6b2f515 ace: Build the outer and inner iframes programmatically
This makes the code easier to read and it silences Chrome's
`document.write()` warning:
https://developers.google.com/web/updates/2016/08/removing-document-write
2021-02-26 02:00:09 -05:00
Richard Hansen 1da4ec1270 ace: Simplify the `aceEditorCSS` hook map function 2021-02-26 01:52:16 -05:00
Richard Hansen 5778d50166 ace: Delete unused `$$INCLUDE_CSS` logic
Nothing "compiles" the file by replacing `$$INCLUDE_CSS()` calls
anymore so it is safe to simplify the code.
2021-02-26 01:47:44 -05:00
Richard Hansen d9dcf749bb ace: Factor out duplicated `$$INCLUDE_CSS` code 2021-02-26 01:44:38 -05:00
Richard Hansen 55f02c1246 ace: Delete unused `clientVars.disableCustomScriptsAndStyles` 2021-02-26 01:40:58 -05:00
Richard Hansen 1ce7d1117b ace: Delete unnecessary IIFE 2021-02-26 01:37:52 -05:00
Richard Hansen 0e7f4aff52 ace: Lint and simplify script strings 2021-02-26 01:17:51 -05:00
Richard Hansen 3d5d83890a ace: Format script strings for readability 2021-02-25 22:32:17 -05:00
Richard Hansen ce00cc33e6 ace: Delete ignored class attribute 2021-02-25 22:29:11 -05:00
1 changed files with 104 additions and 137 deletions

View File

@ -27,9 +27,6 @@
const hooks = require('./pluginfw/hooks');
const pluginUtils = require('./pluginfw/shared');
const scriptTag =
(source) => `<script type="text/javascript">\n${source.replace(/<\//g, '<\\/')}</script>`;
const Ace2Editor = function () {
const ace2 = Ace2Editor;
@ -129,20 +126,24 @@ const Ace2Editor = function () {
return {embeded: embededFiles, remote: remoteFiles};
};
const pushStyleTagsFor = (buffer, files) => {
const addStyleTagsFor = (doc, files) => {
const sorted = sortFilesByEmbeded(files);
const embededFiles = sorted.embeded;
const remoteFiles = sorted.remote;
if (embededFiles.length > 0) {
buffer.push('<style type="text/css">');
for (const file of embededFiles) {
buffer.push((Ace2Editor.EMBEDED[file] || '').replace(/<\//g, '<\\/'));
}
buffer.push('</style>');
const css = embededFiles.map((f) => Ace2Editor.EMBEDED[f]).join('\n');
const style = doc.createElement('style');
style.type = 'text/css';
style.appendChild(doc.createTextNode(css));
doc.head.appendChild(style);
}
for (const file of remoteFiles) {
buffer.push(`<link rel="stylesheet" type="text/css" href="${encodeURI(file)}"/>`);
const link = doc.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = encodeURI(file);
doc.head.appendChild(link);
}
};
@ -162,145 +163,111 @@ const Ace2Editor = function () {
doneFunc();
};
(() => {
const doctype = '<!doctype html>';
const includedCSS = [
'../static/css/iframe_editor.css',
`../static/css/pad.css?v=${clientVars.randomVersionString}`,
// Allow urls to external CSS - http(s):// and //some/path.css
...hooks.callAll('aceEditorCSS').map((p) => /\/\//.test(p) ? p : `../static/plugins/${p}`),
`../static/skins/${clientVars.skinName}/pad.css?v=${clientVars.randomVersionString}`,
];
const iframeHTML = [];
const outerFrame = document.createElement('iframe');
outerFrame.name = 'ace_outer';
outerFrame.frameBorder = 0; // for IE
outerFrame.title = 'Ether';
info.frame = outerFrame;
document.getElementById(containerId).appendChild(outerFrame);
iframeHTML.push(doctype);
iframeHTML.push(`<html class='inner-editor ${clientVars.skinVariants}'><head>`);
const outerWindow = outerFrame.contentWindow;
const outerDocument = outerWindow.document;
const skinVariants = clientVars.skinVariants.split(' ').filter((x) => x !== '');
outerDocument.documentElement.classList.add('inner-editor', 'outerdoc', ...skinVariants);
addStyleTagsFor(outerDocument, includedCSS);
// calls to these functions ($$INCLUDE_...) are replaced when this file is processed
// and compressed, putting the compressed code from the named file directly into the
// source here.
// these lines must conform to a specific format because they are passed by the build script:
let includedCSS = [];
let $$INCLUDE_CSS = (filename) => { includedCSS.push(filename); };
$$INCLUDE_CSS('../static/css/iframe_editor.css');
const styleO = outerDocument.createElement('style');
styleO.type = 'text/css';
styleO.title = 'dynamicsyntax';
outerDocument.head.appendChild(styleO);
// disableCustomScriptsAndStyles can be used to disable loading of custom scripts
if (!clientVars.disableCustomScriptsAndStyles) {
$$INCLUDE_CSS(`../static/css/pad.css?v=${clientVars.randomVersionString}`);
const link = outerDocument.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'data:text/css,';
outerDocument.head.appendChild(link);
outerWindow.editorInfo = Ace2Editor.registry[info.id];
const iframe = outerDocument.createElement('iframe');
iframe.name = 'ace_inner';
iframe.title = 'pad';
iframe.scrolling = 'no';
iframe.frameBorder = 0;
iframe.allowTransparency = true; // for IE
iframe.ace_outerWin = outerWindow;
const innerOnloadHandler = () => {
const require = window[1].frames[0].require;
if(!require) {
setTimeout(innerOnloadHandler, 10);
} else {
require.setRootURI('../javascripts/src');
require.setLibraryURI('../javascripts/lib');
require.setGlobalKeyPath('require');
const plugins = require('ep_etherpad-lite/static/js/pluginfw/client_plugins');
plugins.adoptPluginsFromAncestorsOf(window);
const jQuery = require('ep_etherpad-lite/static/js/rjquery').jQuery;
window[1].frames[0].$ = jQuery;
const Ace2Inner = require('ep_etherpad-lite/static/js/ace2_inner');
plugins.ensure(() => Ace2Inner.init());
}
};
iframe.addEventListener('load', innerOnloadHandler);
outerDocument.body.insertBefore(iframe, outerDocument.body.firstChild);
outerWindow.readyFunc = () => {
delete outerWindow.readyFunc;
outerWindow.editorInfo.onEditorReady();
delete outerWindow.editorInfo;
};
const innerWindow = iframe.contentWindow;
const innerDocument = innerWindow.document;
innerDocument.documentElement.classList.add('inner-editor', ...skinVariants);
addStyleTagsFor(innerDocument, includedCSS);
let additionalCSS = hooks.callAll('aceEditorCSS').map((path) => {
if (path.match(/\/\//)) { // Allow urls to external CSS - http(s):// and //some/path.css
return path;
}
return `../static/plugins/${path}`;
});
includedCSS = includedCSS.concat(additionalCSS);
$$INCLUDE_CSS(
`../static/skins/${clientVars.skinName}/pad.css?v=${clientVars.randomVersionString}`);
const script = innerDocument.createElement('script');
script.type = 'text/javascript';
script.src = `../static/js/require-kernel.js?v=${clientVars.randomVersionString}`;
innerDocument.head.appendChild(script);
pushStyleTagsFor(iframeHTML, includedCSS);
iframeHTML.push(`<script type="text/javascript" src="../static/js/require-kernel.js?v=${clientVars.randomVersionString}"></script>`);
const styleI = innerDocument.createElement('style');
styleI.type = 'text/css';
styleI.title = 'dynamicsyntax';
innerDocument.head.appendChild(styleI);
iframeHTML.push(scriptTag(
`\n\
require.setRootURI("../javascripts/src");\n\
require.setLibraryURI("../javascripts/lib");\n\
require.setGlobalKeyPath("require");\n\
\n\
var plugins = require("ep_etherpad-lite/static/js/pluginfw/client_plugins");\n\
plugins.adoptPluginsFromAncestorsOf(window);\n\
\n\
$ = jQuery = require("ep_etherpad-lite/static/js/rjquery").jQuery; // Expose jQuery #HACK\n\
var Ace2Inner = require("ep_etherpad-lite/static/js/ace2_inner");\n\
\n\
plugins.ensure(function () {\n\
Ace2Inner.init();\n\
});\n\
`));
const headLines = [];
hooks.callAll('aceInitInnerdocbodyHead', {iframeHTML: headLines});
const tmp = innerDocument.createElement('div');
tmp.innerHTML = headLines.join('\n');
while (tmp.firstChild) innerDocument.head.appendChild(tmp.firstChild);
iframeHTML.push('<style type="text/css" title="dynamicsyntax"></style>');
innerDocument.body.id = 'innerdocbody';
innerDocument.body.classList.add('innerdocbody');
innerDocument.body.setAttribute('role', 'application');
innerDocument.body.setAttribute('spellcheck', 'false');
innerDocument.body.appendChild(innerDocument.createTextNode('\u00A0')); // &nbsp;
hooks.callAll('aceInitInnerdocbodyHead', {
iframeHTML,
});
outerDocument.body.id = 'outerdocbody';
outerDocument.body.classList.add('outerdocbody', ...pluginUtils.clientPluginNames());
iframeHTML.push('</head><body id="innerdocbody" class="innerdocbody" role="application" ' +
'class="syntax" spellcheck="false">&nbsp;</body></html>');
const sideDiv = outerDocument.createElement('div');
sideDiv.id = 'sidediv';
sideDiv.classList.add('sidediv');
outerDocument.body.appendChild(sideDiv);
// eslint-disable-next-line node/no-unsupported-features/es-builtins
const gt = typeof globalThis === 'object' ? globalThis : window;
gt.ChildAccessibleAce2Editor = Ace2Editor;
const outerScript = `\
editorId = ${JSON.stringify(info.id)};\n\
editorInfo = parent.ChildAccessibleAce2Editor.registry[editorId];\n\
window.onload = function () {\n\
window.onload = null;\n\
setTimeout(function () {\n\
var iframe = document.createElement("IFRAME");\n\
iframe.name = "ace_inner";\n\
iframe.title = "pad";\n\
iframe.scrolling = "no";\n\
var outerdocbody = document.getElementById("outerdocbody");\n\
iframe.frameBorder = 0;\n\
iframe.allowTransparency = true; // for IE\n\
outerdocbody.insertBefore(iframe, outerdocbody.firstChild);\n\
iframe.ace_outerWin = window;\n\
readyFunc = function () {\n\
editorInfo.onEditorReady();\n\
readyFunc = null;\n\
editorInfo = null;\n\
};\n\
var doc = iframe.contentWindow.document;\n\
doc.open();\n\
var text = (${JSON.stringify(iframeHTML.join('\n'))});\n\
doc.write(text);\n\
doc.close();\n\
}, 0);\n\
}`;
const outerHTML =
[doctype, `<html class="inner-editor outerdoc ${clientVars.skinVariants}"><head>`];
includedCSS = [];
$$INCLUDE_CSS = (filename) => { includedCSS.push(filename); };
$$INCLUDE_CSS('../static/css/iframe_editor.css');
$$INCLUDE_CSS(`../static/css/pad.css?v=${clientVars.randomVersionString}`);
additionalCSS = hooks.callAll('aceEditorCSS').map((path) => {
if (path.match(/\/\//)) { // Allow urls to external CSS - http(s):// and //some/path.css
return path;
}
return `../static/plugins/${path}`;
});
includedCSS = includedCSS.concat(additionalCSS);
$$INCLUDE_CSS(
`../static/skins/${clientVars.skinName}/pad.css?v=${clientVars.randomVersionString}`);
pushStyleTagsFor(outerHTML, includedCSS);
// bizarrely, in FF2, a file with no "external" dependencies won't finish loading properly
// (throbs busy while typing)
const pluginNames = pluginUtils.clientPluginNames();
outerHTML.push(
'<style type="text/css" title="dynamicsyntax"></style>',
'<link rel="stylesheet" type="text/css" href="data:text/css,"/>',
scriptTag(outerScript),
'</head>',
'<body id="outerdocbody" class="outerdocbody ', pluginNames.join(' '), '">',
'<div id="sidediv" class="sidediv"><!-- --></div>',
'<div id="linemetricsdiv">x</div>',
'</body></html>');
const outerFrame = document.createElement('IFRAME');
outerFrame.name = 'ace_outer';
outerFrame.frameBorder = 0; // for IE
outerFrame.title = 'Ether';
info.frame = outerFrame;
document.getElementById(containerId).appendChild(outerFrame);
const editorDocument = outerFrame.contentWindow.document;
editorDocument.open();
editorDocument.write(outerHTML.join(''));
editorDocument.close();
})();
const lineMetricsDiv = outerDocument.createElement('div');
lineMetricsDiv.id = 'linemetricsdiv';
lineMetricsDiv.appendChild(outerDocument.createTextNode('x'));
outerDocument.body.appendChild(lineMetricsDiv);
};
};