|
|
|
@ -1,49 +1,27 @@
|
|
|
|
|
import * as hooks from "./pluginfw/hooks.js";
|
|
|
|
|
import { makeCSSManager as makeCSSManager$0 } from "./cssmanager.js";
|
|
|
|
|
import * as pluginUtils from "./pluginfw/shared.js";
|
|
|
|
|
import {Ace2EditorInfo, AceDocType} from "../module/Ace2EditorInfo";
|
|
|
|
|
import {clientVars} from "../../node/handler/PadMessageHandler";
|
|
|
|
|
import {CustomWindow} from "../module/CustomWindow";
|
|
|
|
|
'use strict';
|
|
|
|
|
/**
|
|
|
|
|
* This code is mostly from the old Etherpad. Please help us to comment this code.
|
|
|
|
|
* This helps other people to understand this code better and helps them to improve it.
|
|
|
|
|
* TL;DR COMMENTS ON THIS FILE ARE HIGHLY APPRECIATED
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Copyright 2009 Google Inc.
|
|
|
|
|
*
|
|
|
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
|
* you may not use this file except in compliance with the License.
|
|
|
|
|
* You may obtain a copy of the License at
|
|
|
|
|
*
|
|
|
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
*
|
|
|
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
|
|
|
* distributed under the License is distributed on an "AS-IS" BASIS,
|
|
|
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
|
* See the License for the specific language governing permissions and
|
|
|
|
|
* limitations under the License.
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
// requires: top
|
|
|
|
|
// requires: undefined
|
|
|
|
|
|
|
|
|
|
const hooks = require('./pluginfw/hooks');
|
|
|
|
|
const makeCSSManager = require('./cssmanager').makeCSSManager;
|
|
|
|
|
const pluginUtils = require('./pluginfw/shared');
|
|
|
|
|
const makeCSSManager = { makeCSSManager: makeCSSManager$0 }.makeCSSManager;
|
|
|
|
|
|
|
|
|
|
const debugLog = (...args) => { };
|
|
|
|
|
|
|
|
|
|
// The inner and outer iframe's locations are about:blank, so relative URLs are relative to that.
|
|
|
|
|
// Firefox and Chrome seem to do what the developer intends if given a relative URL, but Safari
|
|
|
|
|
// errors out unless given an absolute URL for a JavaScript-created element.
|
|
|
|
|
const absUrl = (url) => new URL(url, window.location.href).href;
|
|
|
|
|
|
|
|
|
|
const eventFired = async (obj, event, cleanups = [], predicate = () => true) => {
|
|
|
|
|
if (typeof cleanups === 'function') {
|
|
|
|
|
predicate = cleanups;
|
|
|
|
|
cleanups = [];
|
|
|
|
|
}
|
|
|
|
|
await new Promise((resolve, reject) => {
|
|
|
|
|
await new Promise<void>((resolve, reject) => {
|
|
|
|
|
let cleanup;
|
|
|
|
|
const successCb = () => {
|
|
|
|
|
if (!predicate()) return;
|
|
|
|
|
if (!predicate())
|
|
|
|
|
return;
|
|
|
|
|
debugLog(`Ace2Editor.init() ${event} event on`, obj);
|
|
|
|
|
cleanup();
|
|
|
|
|
resolve();
|
|
|
|
@ -64,14 +42,13 @@ const eventFired = async (obj, event, cleanups = [], predicate = () => true) =>
|
|
|
|
|
obj.addEventListener('error', errorCb);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Resolves when the frame's document is ready to be mutated. Browsers seem to be quirky about
|
|
|
|
|
// iframe ready events so this function throws the kitchen sink at the problem. Maybe one day we'll
|
|
|
|
|
// find a concise general solution.
|
|
|
|
|
const frameReady = async (frame) => {
|
|
|
|
|
// Can't do `const doc = frame.contentDocument;` because Firefox seems to asynchronously replace
|
|
|
|
|
// the document object after the frame is first created for some reason. ¯\_(ツ)_/¯
|
|
|
|
|
const doc = () => frame.contentDocument;
|
|
|
|
|
const doc:AceDocType = () => frame.contentDocument;
|
|
|
|
|
const cleanups = [];
|
|
|
|
|
try {
|
|
|
|
|
await Promise.race([
|
|
|
|
@ -81,28 +58,27 @@ const frameReady = async (frame) => {
|
|
|
|
|
eventFired(doc(), 'DOMContentLoaded', cleanups),
|
|
|
|
|
eventFired(doc(), 'readystatechange', cleanups, () => doc.readyState === 'complete'),
|
|
|
|
|
]);
|
|
|
|
|
} finally {
|
|
|
|
|
for (const cleanup of cleanups) cleanup();
|
|
|
|
|
}
|
|
|
|
|
finally {
|
|
|
|
|
for (const cleanup of cleanups)
|
|
|
|
|
cleanup();
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const Ace2Editor = function () {
|
|
|
|
|
let info = {editor: this};
|
|
|
|
|
let info:Ace2EditorInfo = { editor: this };
|
|
|
|
|
let loaded = false;
|
|
|
|
|
|
|
|
|
|
let actionsPendingInit = [];
|
|
|
|
|
|
|
|
|
|
const pendingInit = (func) => function (...args) {
|
|
|
|
|
const action = () => func.apply(this, args);
|
|
|
|
|
if (loaded) return action();
|
|
|
|
|
if (loaded)
|
|
|
|
|
return action();
|
|
|
|
|
actionsPendingInit.push(action);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const doActionsPendingInit = () => {
|
|
|
|
|
for (const fn of actionsPendingInit) fn();
|
|
|
|
|
for (const fn of actionsPendingInit)
|
|
|
|
|
fn();
|
|
|
|
|
actionsPendingInit = [];
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// The following functions (prefixed by 'ace_') are exposed by editor, but
|
|
|
|
|
// execution is delayed until init is complete
|
|
|
|
|
const aceFunctionsPendingInit = [
|
|
|
|
@ -124,7 +100,6 @@ const Ace2Editor = function () {
|
|
|
|
|
'execCommand',
|
|
|
|
|
'replaceRange',
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
for (const fnName of aceFunctionsPendingInit) {
|
|
|
|
|
// Note: info[`ace_${fnName}`] does not exist yet, so it can't be passed directly to
|
|
|
|
|
// pendingInit(). A simple wrapper is used to defer the info[`ace_${fnName}`] lookup until
|
|
|
|
@ -133,12 +108,9 @@ const Ace2Editor = function () {
|
|
|
|
|
info[`ace_${fnName}`].apply(this, args);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.exportText = () => loaded ? info.ace_exportText() : '(awaiting init)\n';
|
|
|
|
|
|
|
|
|
|
this.getInInternationalComposition =
|
|
|
|
|
() => loaded ? info.ace_getInInternationalComposition() : null;
|
|
|
|
|
|
|
|
|
|
// prepareUserChangeset:
|
|
|
|
|
// Returns null if no new changes or ACE not ready. Otherwise, bundles up all user changes
|
|
|
|
|
// to the latest base text into a Changeset, which is returned (as a string if encodeAsString).
|
|
|
|
@ -148,7 +120,6 @@ const Ace2Editor = function () {
|
|
|
|
|
// prepareUserChangeset will return an updated changeset that takes into account the latest user
|
|
|
|
|
// changes, and modify the changeset to be applied by applyPreparedChangesetToBase accordingly.
|
|
|
|
|
this.prepareUserChangeset = () => loaded ? info.ace_prepareUserChangeset() : null;
|
|
|
|
|
|
|
|
|
|
const addStyleTagsFor = (doc, files) => {
|
|
|
|
|
for (const file of files) {
|
|
|
|
|
const link = doc.createElement('link');
|
|
|
|
@ -158,17 +129,14 @@ const Ace2Editor = function () {
|
|
|
|
|
doc.head.appendChild(link);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this.destroy = pendingInit(() => {
|
|
|
|
|
info.ace_dispose();
|
|
|
|
|
info.frame.parentNode.removeChild(info.frame);
|
|
|
|
|
info = null; // prevent IE 6 closure memory leaks
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.init = async function (containerId, initialCode) {
|
|
|
|
|
debugLog('Ace2Editor.init()');
|
|
|
|
|
this.importText(initialCode);
|
|
|
|
|
|
|
|
|
|
const includedCSS = [
|
|
|
|
|
`../static/css/iframe_editor.css?v=${clientVars.randomVersionString}`,
|
|
|
|
|
`../static/css/pad.css?v=${clientVars.randomVersionString}`,
|
|
|
|
@ -177,12 +145,9 @@ const Ace2Editor = function () {
|
|
|
|
|
(p) => /\/\//.test(p) ? p : `../static/plugins/${p}`),
|
|
|
|
|
`../static/skins/${clientVars.skinName}/pad.css?v=${clientVars.randomVersionString}`,
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const skinVariants = clientVars.skinVariants.split(' ').filter((x) => x !== '');
|
|
|
|
|
|
|
|
|
|
const outerFrame = document.createElement('iframe');
|
|
|
|
|
outerFrame.name = 'ace_outer';
|
|
|
|
|
outerFrame.frameBorder = 0; // for IE
|
|
|
|
|
outerFrame.title = 'Ether';
|
|
|
|
|
// Some browsers do strange things unless the iframe has a src or srcdoc property:
|
|
|
|
|
// - Firefox replaces the frame's contentWindow.document object with a different object after
|
|
|
|
@ -197,25 +162,20 @@ const Ace2Editor = function () {
|
|
|
|
|
info.frame = outerFrame;
|
|
|
|
|
document.getElementById(containerId).appendChild(outerFrame);
|
|
|
|
|
const outerWindow = outerFrame.contentWindow;
|
|
|
|
|
|
|
|
|
|
debugLog('Ace2Editor.init() waiting for outer frame');
|
|
|
|
|
await frameReady(outerFrame);
|
|
|
|
|
debugLog('Ace2Editor.init() outer frame ready');
|
|
|
|
|
|
|
|
|
|
// Firefox might replace the outerWindow.document object after iframe creation so this variable
|
|
|
|
|
// is assigned after the Window's load event.
|
|
|
|
|
const outerDocument = outerWindow.document;
|
|
|
|
|
|
|
|
|
|
// <html> tag
|
|
|
|
|
outerDocument.documentElement.classList.add('outer-editor', 'outerdoc', ...skinVariants);
|
|
|
|
|
|
|
|
|
|
// <head> tag
|
|
|
|
|
addStyleTagsFor(outerDocument, includedCSS);
|
|
|
|
|
const outerStyle = outerDocument.createElement('style');
|
|
|
|
|
outerStyle.type = 'text/css';
|
|
|
|
|
outerStyle.title = 'dynamicsyntax';
|
|
|
|
|
outerDocument.head.appendChild(outerStyle);
|
|
|
|
|
|
|
|
|
|
// <body> tag
|
|
|
|
|
outerDocument.body.id = 'outerdocbody';
|
|
|
|
|
outerDocument.body.classList.add('outerdocbody', ...pluginUtils.clientPluginNames());
|
|
|
|
@ -231,30 +191,24 @@ const Ace2Editor = function () {
|
|
|
|
|
lineMetricsDiv.id = 'linemetricsdiv';
|
|
|
|
|
lineMetricsDiv.appendChild(outerDocument.createTextNode('x'));
|
|
|
|
|
outerDocument.body.appendChild(lineMetricsDiv);
|
|
|
|
|
|
|
|
|
|
const innerFrame = outerDocument.createElement('iframe');
|
|
|
|
|
innerFrame.name = 'ace_inner';
|
|
|
|
|
innerFrame.title = 'pad';
|
|
|
|
|
innerFrame.scrolling = 'no';
|
|
|
|
|
innerFrame.frameBorder = 0;
|
|
|
|
|
innerFrame.allowTransparency = true; // for IE
|
|
|
|
|
innerFrame.frameBorder = String(0);
|
|
|
|
|
// The iframe MUST have a src or srcdoc property to avoid browser quirks. See the comment above
|
|
|
|
|
// outerFrame.srcdoc.
|
|
|
|
|
innerFrame.src = 'empty.html';
|
|
|
|
|
outerDocument.body.insertBefore(innerFrame, outerDocument.body.firstChild);
|
|
|
|
|
const innerWindow = innerFrame.contentWindow;
|
|
|
|
|
|
|
|
|
|
const innerWindow = innerFrame.contentWindow as unknown as CustomWindow;
|
|
|
|
|
debugLog('Ace2Editor.init() waiting for inner frame');
|
|
|
|
|
await frameReady(innerFrame);
|
|
|
|
|
debugLog('Ace2Editor.init() inner frame ready');
|
|
|
|
|
|
|
|
|
|
// Firefox might replace the innerWindow.document object after iframe creation so this variable
|
|
|
|
|
// is assigned after the Window's load event.
|
|
|
|
|
const innerDocument = innerWindow.document;
|
|
|
|
|
|
|
|
|
|
// <html> tag
|
|
|
|
|
innerDocument.documentElement.classList.add('inner-editor', ...skinVariants);
|
|
|
|
|
|
|
|
|
|
// <head> tag
|
|
|
|
|
addStyleTagsFor(innerDocument, includedCSS);
|
|
|
|
|
const requireKernel = innerDocument.createElement('script');
|
|
|
|
@ -276,15 +230,12 @@ const Ace2Editor = function () {
|
|
|
|
|
innerDocument.head.appendChild(innerStyle);
|
|
|
|
|
const headLines = [];
|
|
|
|
|
hooks.callAll('aceInitInnerdocbodyHead', { iframeHTML: headLines });
|
|
|
|
|
innerDocument.head.appendChild(
|
|
|
|
|
innerDocument.createRange().createContextualFragment(headLines.join('\n')));
|
|
|
|
|
|
|
|
|
|
innerDocument.head.appendChild(innerDocument.createRange().createContextualFragment(headLines.join('\n')));
|
|
|
|
|
// <body> tag
|
|
|
|
|
innerDocument.body.id = 'innerdocbody';
|
|
|
|
|
innerDocument.body.classList.add('innerdocbody');
|
|
|
|
|
innerDocument.body.setAttribute('spellcheck', 'false');
|
|
|
|
|
innerDocument.body.appendChild(innerDocument.createTextNode('\u00A0')); //
|
|
|
|
|
|
|
|
|
|
debugLog('Ace2Editor.init() waiting for require kernel load');
|
|
|
|
|
await eventFired(requireKernel, 'load');
|
|
|
|
|
debugLog('Ace2Editor.init() require kernel loaded');
|
|
|
|
@ -292,17 +243,13 @@ const Ace2Editor = function () {
|
|
|
|
|
require.setRootURI(absUrl('../javascripts/src'));
|
|
|
|
|
require.setLibraryURI(absUrl('../javascripts/lib'));
|
|
|
|
|
require.setGlobalKeyPath('require');
|
|
|
|
|
|
|
|
|
|
// intentially moved before requiring client_plugins to save a 307
|
|
|
|
|
innerWindow.Ace2Inner = require('ep_etherpad-lite/static/js/ace2_inner');
|
|
|
|
|
innerWindow.plugins = require('ep_etherpad-lite/static/js/pluginfw/client_plugins');
|
|
|
|
|
innerWindow.plugins.adoptPluginsFromAncestorsOf(innerWindow);
|
|
|
|
|
|
|
|
|
|
innerWindow.$ = innerWindow.jQuery = require('ep_etherpad-lite/static/js/rjquery').jQuery;
|
|
|
|
|
|
|
|
|
|
debugLog('Ace2Editor.init() waiting for plugins');
|
|
|
|
|
await new Promise((resolve, reject) => innerWindow.plugins.ensure(
|
|
|
|
|
(err) => err != null ? reject(err) : resolve()));
|
|
|
|
|
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, {
|
|
|
|
|
inner: makeCSSManager(innerStyle.sheet),
|
|
|
|
@ -315,5 +262,4 @@ const Ace2Editor = function () {
|
|
|
|
|
debugLog('Ace2Editor.init() done');
|
|
|
|
|
};
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
exports.Ace2Editor = Ace2Editor;
|
|
|
|
|
export { Ace2Editor };
|