make css assets static links

fix request uri for safari
add src=about:blank also to outerFrame
2021-03-01 01:25:11 +01:00 · 2021-03-01 01:05:22 +01:00 · 2021-02-28 23:34:32 +01:00 · 2021-02-28 23:27:47 +01:00 · 2021-02-28 18:46:05 +01:00 · 2021-02-28 18:43:25 +01:00
1 changed files with 104 additions and 139 deletions
--- a/src/static/js/ace.js
+++ b/src/static/js/ace.js
@ -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;
@ -89,8 +86,6 @@ const Ace2Editor = function () {
  this.exportText = () => loaded ? info.ace_exportText() : '(awaiting init)\n';
  this.getFrame = () => info.frame || null;
  this.getDebugProperty = (prop) => info.ace_getDebugProperty(prop);
  this.getInInternationalComposition =
@ -129,20 +124,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">');
+      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) {
-      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,149 +161,115 @@ const Ace2Editor = function () {
      doneFunc();
    };
-    (() => {
+    const includedCSS = [
-      const doctype = '<!doctype html>';
+      'http://localhost:9001/static/css/iframe_editor.css',
      `http://localhost:9001/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 : `http://localhost:9001/static/plugins/${p}`),
      `http://localhost:9001/static/skins/${clientVars.skinName}/pad.css?v=${clientVars.randomVersionString}`,
    ];
-      const iframeHTML = [];
+    const outerFrame = document.createElement('iframe');
    outerFrame.name = 'ace_outer';
    outerFrame.title = 'Ether';
    info.frame = outerFrame;
    outerFrame.src = 'about:blank';
-      iframeHTML.push(doctype);
+    const postOuterFrame = () => {
-      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
+      const styleO = outerDocument.createElement('style');
-      // and compressed, putting the compressed code from the named file directly into the
+      styleO.type = 'text/css';
-      // source here.
+      styleO.title = 'dynamicsyntax';
-      // these lines must conform to a specific format because they are passed by the build script:
+      outerDocument.head.appendChild(styleO);
      let includedCSS = [];
      let $$INCLUDE_CSS = (filename) => { includedCSS.push(filename); };
      $$INCLUDE_CSS('../static/css/iframe_editor.css');
-      // disableCustomScriptsAndStyles can be used to disable loading of custom scripts
+      const link = outerDocument.createElement('link');
-      if (!clientVars.disableCustomScriptsAndStyles) {
+      link.rel = 'stylesheet';
-        $$INCLUDE_CSS(`../static/css/pad.css?v=${clientVars.randomVersionString}`);
+      link.type = 'text/css';
-      }
+      link.href = 'data:text/css,';
      outerDocument.head.appendChild(link);
-      let additionalCSS = hooks.callAll('aceEditorCSS').map((path) => {
+      outerWindow.editorInfo = Ace2Editor.registry[info.id];
-        if (path.match(/\/\//)) { // Allow urls to external CSS - http(s):// and //some/path.css
+      const postRequire = () => {
-          return path;
+        const w = document.querySelectorAll('iframe[name=ace_outer]')[0].contentDocument
-        }
+            .querySelectorAll('iframe[name=ace_inner]')[0].contentWindow;
-        return `../static/plugins/${path}`;
+        const require = w.require;
-      });
+        require.setRootURI('http://localhost:9001/javascripts/src');
-      includedCSS = includedCSS.concat(additionalCSS);
+        require.setLibraryURI('../javascripts/lib');
-      $$INCLUDE_CSS(
+        require.setGlobalKeyPath('require');
          `../static/skins/${clientVars.skinName}/pad.css?v=${clientVars.randomVersionString}`);
-      pushStyleTagsFor(iframeHTML, includedCSS);
+        w.Ace2Inner = require('ep_etherpad-lite/static/js/ace2_inner');
      iframeHTML.push(`<script type="text/javascript" src="../static/js/require-kernel.js?v=${clientVars.randomVersionString}"></script>`);
      // fill the cache
      iframeHTML.push(`<script type="text/javascript" src="../javascripts/lib/ep_etherpad-lite/static/js/ace2_inner.js?callback=require.define&v=${clientVars.randomVersionString}"></script>`);
      iframeHTML.push(`<script type="text/javascript" src="../javascripts/lib/ep_etherpad-lite/static/js/ace2_common.js?callback=require.define&v=${clientVars.randomVersionString}"></script>`);
-      iframeHTML.push(scriptTag(
+        w.plugins = require('ep_etherpad-lite/static/js/pluginfw/client_plugins');
-          `\n\
+        w.plugins.adoptPluginsFromAncestorsOf(w);
 require.setRootURI("../javascripts/src");\n\
 require.setLibraryURI("../javascripts/lib");\n\
 require.setGlobalKeyPath("require");\n\
 \n\
 // intentially moved before requiring client_plugins to save a 307
 var Ace2Inner = require("ep_etherpad-lite/static/js/ace2_inner");\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\
 \n\
 plugins.ensure(function () {\n\
  Ace2Inner.init();\n\
 });\n\
 `));
-      iframeHTML.push('<style type="text/css" title="dynamicsyntax"></style>');
+        w.jQuery = require('ep_etherpad-lite/static/js/rjquery').jQuery;
        w.$ = w.jQuery;
-      hooks.callAll('aceInitInnerdocbodyHead', {
+        w.plugins.ensure(() => w.Ace2Inner.init());
-        iframeHTML,
+      };
-      });
+      outerWindow.readyFunc = () => {
        delete outerWindow.readyFunc;
        outerWindow.editorInfo.onEditorReady();
        delete outerWindow.editorInfo;
      };
      const postInnerFrame = () => {
        const innerWindow = iframe.contentWindow;
        const innerDocument = innerWindow.document;
        innerDocument.documentElement.classList.add('inner-editor', ...skinVariants);
        addStyleTagsFor(innerDocument, includedCSS);
-      iframeHTML.push('</head><body id="innerdocbody" class="innerdocbody" role="application" ' +
+        const script = innerDocument.createElement('script');
-                      'class="syntax" spellcheck="false">&nbsp;</body></html>');
+        script.type = 'text/javascript';
        script.src = `http://localhost:9001/static/js/require-kernel.js?v=${clientVars.randomVersionString}`;
        script.onload = postRequire;
        innerDocument.head.appendChild(script);
-      // eslint-disable-next-line node/no-unsupported-features/es-builtins
+        const styleI = innerDocument.createElement('style');
-      const gt = typeof globalThis === 'object' ? globalThis : window;
+        styleI.type = 'text/css';
-      gt.ChildAccessibleAce2Editor = Ace2Editor;
+        styleI.title = 'dynamicsyntax';
        innerDocument.head.appendChild(styleI);
-      const outerScript = `\
+        const headLines = [];
-editorId = ${JSON.stringify(info.id)};\n\
+        hooks.callAll('aceInitInnerdocbodyHead', {iframeHTML: headLines});
-editorInfo = parent.ChildAccessibleAce2Editor.registry[editorId];\n\
+        const tmp = innerDocument.createElement('div');
-window.onload = function () {\n\
+        tmp.innerHTML = headLines.join('\n');
-  window.onload = null;\n\
+        while (tmp.firstChild) innerDocument.head.appendChild(tmp.firstChild);
  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 =
+        innerDocument.body.id = 'innerdocbody';
-          [doctype, `<html class="inner-editor outerdoc ${clientVars.skinVariants}"><head>`];
+        innerDocument.body.classList.add('innerdocbody');
        innerDocument.body.setAttribute('role', 'application');
        innerDocument.body.setAttribute('spellcheck', 'false');
        innerDocument.body.appendChild(innerDocument.createTextNode('\u00A0')); // &nbsp;
      };
      const iframe = outerDocument.createElement('iframe');
      iframe.name = 'ace_inner';
      iframe.title = 'pad';
      iframe.allowTransparency = true; // for IE
      iframe.ace_outerWin = outerWindow;
      iframe.src = 'about:blank';
      iframe.onload = postInnerFrame;
      outerDocument.body.insertBefore(iframe, outerDocument.body.firstChild);
-      includedCSS = [];
+      outerDocument.body.id = 'outerdocbody';
-      $$INCLUDE_CSS = (filename) => { includedCSS.push(filename); };
+      outerDocument.body.classList.add('outerdocbody', ...pluginUtils.clientPluginNames());
      $$INCLUDE_CSS('../static/css/iframe_editor.css');
      $$INCLUDE_CSS(`../static/css/pad.css?v=${clientVars.randomVersionString}`);
      const sideDiv = outerDocument.createElement('div');
      sideDiv.id = 'sidediv';
      sideDiv.classList.add('sidediv');
      outerDocument.body.appendChild(sideDiv);
-      additionalCSS = hooks.callAll('aceEditorCSS').map((path) => {
+      const lineMetricsDiv = outerDocument.createElement('div');
-        if (path.match(/\/\//)) { // Allow urls to external CSS - http(s):// and //some/path.css
+      lineMetricsDiv.id = 'linemetricsdiv';
-          return path;
+      lineMetricsDiv.appendChild(outerDocument.createTextNode('x'));
-        }
+      outerDocument.body.appendChild(lineMetricsDiv);
-        return `../static/plugins/${path}`;
+    };
-      });
+    outerFrame.onload = postOuterFrame;
-      includedCSS = includedCSS.concat(additionalCSS);
+    document.getElementById(containerId).appendChild(outerFrame);
      $$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();
    })();
  };
 };
Author	SHA1	Message	Date
webzwo0i	1d9f8cf760	make css assets static links	2021-03-01 01:25:11 +01:00
webzwo0i	99847027fd	fix request uri for safari	2021-03-01 01:05:22 +01:00
webzwo0i	348105fcbc	add src=about:blank also to outerFrame	2021-02-28 23:34:32 +01:00
webzwo0i	707dc91caa	add iframe.src	2021-02-28 23:27:47 +01:00
webzwo0i	576be344e4	move require of Ace2Inner up	2021-02-28 18:46:05 +01:00
webzwo0i	874f2ccc88	works	2021-02-28 18:43:25 +01:00
Richard Hansen	73cbcc7d3c	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-28 18:43:25 +01:00
Richard Hansen	0c73983d23	ace: Simplify the `aceEditorCSS` hook map function	2021-02-28 18:43:25 +01:00
Richard Hansen	e1415efa03	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-28 18:43:25 +01:00
Richard Hansen	d5130d0d5a	ace: Factor out duplicated `$$INCLUDE_CSS` code	2021-02-28 18:43:25 +01:00
Richard Hansen	012f8ef5a7	ace: Delete unused `clientVars.disableCustomScriptsAndStyles`	2021-02-28 18:43:25 +01:00
Richard Hansen	dc9fda3556	ace: Delete unnecessary IIFE	2021-02-28 18:43:24 +01:00
Richard Hansen	e38a3c5fe2	ace: Lint and simplify script strings	2021-02-28 18:42:37 +01:00
Richard Hansen	6f717578aa	ace: Format script strings for readability	2021-02-28 18:42:34 +01:00
Richard Hansen	50fa336253	ace: Delete ignored class attribute	2021-02-28 18:41:44 +01:00