public-offering
/
pad.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
working-ace-patch
Richard Hansen 2021-02-25 21:11:30 -05:00
parent 1da4ec1270
commit 7cb6b2f515
1 changed files with 105 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
src/static/js/ace.js
View File

@ -27,9 +27,6 @@
const hooks = require('./pluginfw/hooks'); const hooks = require('./pluginfw/hooks');
const pluginUtils = require('./pluginfw/shared'); const pluginUtils = require('./pluginfw/shared');
const scriptTag =
(source) => `<script type="text/javascript">\n${source.replace(/<\//g, '<\\/')}</script>`;
const Ace2Editor = function () { const Ace2Editor = function () {
const ace2 = Ace2Editor; const ace2 = Ace2Editor;
@ -129,20 +126,24 @@ const Ace2Editor = function () {
return {embeded: embededFiles, remote: remoteFiles}; return {embeded: embededFiles, remote: remoteFiles};
}; };
const pushStyleTagsFor = (buffer, files) => { const addStyleTagsFor = (doc, files) => {
const sorted = sortFilesByEmbeded(files); const sorted = sortFilesByEmbeded(files);
const embededFiles = sorted.embeded; const embededFiles = sorted.embeded;
const remoteFiles = sorted.remote; const remoteFiles = sorted.remote;
if (embededFiles.length > 0) { if (embededFiles.length > 0) {
buffer.push('<style type="text/css">'); const css = embededFiles.map((f) => Ace2Editor.EMBEDED[f]).join('\n');
for (const file of embededFiles) { const style = doc.createElement('style');
buffer.push((Ace2Editor.EMBEDED[file] || '').replace(/<\//g, '<\\/')); style.type = 'text/css';
} style.appendChild(doc.createTextNode(css));
buffer.push('</style>'); doc.head.appendChild(style);
} }
for (const file of remoteFiles) { 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);
} }
}; };
@ -170,47 +171,35 @@ const Ace2Editor = function () {
`../static/skins/${clientVars.skinName}/pad.css?v=${clientVars.randomVersionString}`, `../static/skins/${clientVars.skinName}/pad.css?v=${clientVars.randomVersionString}`,
]; ];
const doctype = '<!doctype 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 iframeHTML = []; 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);
iframeHTML.push(doctype); const style = outerDocument.createElement('style');
iframeHTML.push(`<html class='inner-editor ${clientVars.skinVariants}'><head>`); style.type = 'text/css';
pushStyleTagsFor(iframeHTML, includedCSS); style.title = 'dynamicsyntax';
iframeHTML.push(`<script type="text/javascript" src="../static/js/require-kernel.js?v=${clientVars.randomVersionString}"></script>`); outerDocument.head.appendChild(style);
iframeHTML.push(scriptTag(`(() => { const link = outerDocument.createElement('link');
const require = window.require; link.rel = 'stylesheet';
require.setRootURI('../javascripts/src'); link.type = 'text/css';
require.setLibraryURI('../javascripts/lib'); link.href = 'data:text/css,';
require.setGlobalKeyPath('require'); outerDocument.head.appendChild(link);
window.plugins = require('ep_etherpad-lite/static/js/pluginfw/client_plugins'); outerWindow.editorInfo = Ace2Editor.registry[info.id];
window.plugins.adoptPluginsFromAncestorsOf(window); outerWindow.onload = () => {
outerWindow.onload = null;
window.$ = window.jQuery = require('ep_etherpad-lite/static/js/rjquery').jQuery; const window = outerWindow;
window.Ace2Inner = require('ep_etherpad-lite/static/js/ace2_inner'); const document = outerDocument;
window.plugins.ensure(() => { window.Ace2Inner.init(); });
})()`));
iframeHTML.push('<style type="text/css" title="dynamicsyntax"></style>');
hooks.callAll('aceInitInnerdocbodyHead', {
iframeHTML,
});
iframeHTML.push('</head><body id="innerdocbody" class="innerdocbody" role="application" ' +
'spellcheck="false">&nbsp;</body></html>');
// eslint-disable-next-line node/no-unsupported-features/es-builtins
const gt = typeof globalThis === 'object' ? globalThis : window;
gt.ChildAccessibleAce2Editor = Ace2Editor;
const outerScript = `
window.editorInfo = parent.ChildAccessibleAce2Editor.registry[${JSON.stringify(info.id)}];
window.onload = () => {
window.onload = null;
setTimeout(() => { setTimeout(() => {
const iframe = document.createElement('iframe'); const iframe = document.createElement('iframe');
iframe.name = 'ace_inner'; iframe.name = 'ace_inner';
@ -225,43 +214,64 @@ const Ace2Editor = function () {
window.editorInfo.onEditorReady(); window.editorInfo.onEditorReady();
delete window.editorInfo; delete window.editorInfo;
}; };
const doc = iframe.contentWindow.document; const innerWindow = iframe.contentWindow;
doc.open(); const innerDocument = innerWindow.document;
doc.write(${JSON.stringify(iframeHTML.join('\n'))}); innerDocument.documentElement.classList.add('inner-editor', ...skinVariants);
doc.close(); addStyleTagsFor(innerDocument, includedCSS);
const script = innerDocument.createElement('script');
script.type = 'text/javascript';
script.src = `../static/js/require-kernel.js?v=${clientVars.randomVersionString}`;
innerDocument.head.appendChild(script);
innerWindow.onload = () => {
innerWindow.onload = null;
const window = innerWindow;
const require = window.require;
require.setRootURI('../javascripts/src');
require.setLibraryURI('../javascripts/lib');
require.setGlobalKeyPath('require');
window.plugins = require('ep_etherpad-lite/static/js/pluginfw/client_plugins');
window.plugins.adoptPluginsFromAncestorsOf(window);
window.$ = window.jQuery = require('ep_etherpad-lite/static/js/rjquery').jQuery;
window.Ace2Inner = require('ep_etherpad-lite/static/js/ace2_inner');
window.plugins.ensure(() => window.Ace2Inner.init());
};
const style = innerDocument.createElement('style');
style.type = 'text/css';
style.title = 'dynamicsyntax';
innerDocument.head.appendChild(style);
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);
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;
}, 0); }, 0);
} };
`;
const outerHTML = outerDocument.body.id = 'outerdocbody';
[doctype, `<html class="inner-editor outerdoc ${clientVars.skinVariants}"><head>`]; outerDocument.body.classList.add('outerdocbody', ...pluginUtils.clientPluginNames());
pushStyleTagsFor(outerHTML, includedCSS);
// bizarrely, in FF2, a file with no "external" dependencies won't finish loading properly const sideDiv = outerDocument.createElement('div');
// (throbs busy while typing) sideDiv.id = 'sidediv';
const pluginNames = pluginUtils.clientPluginNames(); sideDiv.classList.add('sidediv');
outerHTML.push( outerDocument.body.appendChild(sideDiv);
'<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'); const lineMetricsDiv = outerDocument.createElement('div');
outerFrame.name = 'ace_outer'; lineMetricsDiv.id = 'linemetricsdiv';
outerFrame.frameBorder = 0; // for IE lineMetricsDiv.appendChild(outerDocument.createTextNode('x'));
outerFrame.title = 'Ether'; outerDocument.body.appendChild(lineMetricsDiv);
info.frame = outerFrame;
document.getElementById(containerId).appendChild(outerFrame);
const editorDocument = outerFrame.contentWindow.document;
editorDocument.open();
editorDocument.write(outerHTML.join(''));
editorDocument.close();
}; };
}; };