firefox-main/devtools/client/inspector/markup/views/html-editor.js (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const Editor = require("resource://devtools/client/shared/sourceeditor/editor.js");
const EventEmitter = require("resource://devtools/shared/event-emitter.js");
/**
* A wrapper around the Editor component, that allows editing of HTML.
*
* The main functionality this provides around the Editor is the ability
* to show/hide/position an editor inplace. It only appends once to the
* body, and uses CSS to position the editor. The reason it is done this
* way is that the editor is loaded in an iframe, and calling appendChild
* causes it to reload.
*
* Meant to be embedded inside of an HTML page, as in markup.xhtml.
*/
class HTMLEditor extends EventEmitter {
/**
* @param {HTMLDocument} htmlDocument
* The document to attach the editor to. Will also use this
* document as a basis for listening resize events.
*/
constructor(htmlDocument) {
super();
this.doc = htmlDocument;
this.#container = this.doc.createElement("div");
this.#container.className = "html-editor theme-body";
this.#container.style.display = "none";
this.#editorInner = this.doc.createElement("div");
this.#editorInner.className = "html-editor-inner";
this.#container.appendChild(this.#editorInner);
this.doc.body.appendChild(this.#container);
this.doc.defaultView.addEventListener("resize", this.refresh, true);
const config = {
mode: Editor.modes.html,
lineWrapping: true,
styleActiveLine: false,
keyMap: [
{ key: HTMLEditor.#ctrl("Enter"), run: this.hide },
{ key: "F2", run: this.hide },
{
key: "Escape",
run: this.hide.bind(this, false),
preventDefault: true,
},
],
theme: "mozilla markup-view",
cm6: true,
};
this.#container.addEventListener("click", this.hide);
this.#editorInner.addEventListener("click", HTMLEditor.#stopPropagation);
// Avoid the hijack of the backspace key by the markup when the
// html editor is open.
this.#editorInner.addEventListener("keydown", HTMLEditor.#stopPropagation);
this.editor = new Editor(config);
this.editor.appendToLocalElement(this.#editorInner);
this.hide(false);
}
editor = null;
doc = null;
#container = null;
#editorInner = null;
#attachedElement = null;
#originalValue;
static #ctrl(k) {
return (Services.appinfo.OS == "Darwin" ? "Cmd-" : "Ctrl-") + k;
}
static #stopPropagation(e) {
e.stopPropagation();
}
/**
* Need to refresh position by manually setting CSS values, so this will
* need to be called on resizes and other sizing changes.
*/
refresh = () => {
const element = this.#attachedElement;
if (element) {
this.#container.style.top = element.offsetTop + "px";
this.#container.style.left = element.offsetLeft + "px";
this.#container.style.width = element.offsetWidth + "px";
this.#container.style.height = element.parentNode.offsetHeight + "px";
}
};
/**
* Anchor the editor to a particular element.
*
* @param {DOMNode} element
* The element that the editor will be anchored to.
* Should belong to the HTMLDocument passed into the constructor.
*/
#attach(element) {
this.#detach();
this.#attachedElement = element;
element.classList.add("html-editor-container");
this.refresh();
}
/**
* Unanchor the editor from an element.
*/
#detach() {
if (this.#attachedElement) {
this.#attachedElement.classList.remove("html-editor-container");
this.#attachedElement = undefined;
}
}
/**
* Anchor the editor to a particular element, and show the editor.
*
* @param {DOMNode} element
* The element that the editor will be anchored to.
* Should belong to the HTMLDocument passed into the constructor.
* @param {string} text
* Value to set the contents of the editor to
* @param {Function} cb
* The function to call when hiding
*/
show = (element, text) => {
if (this.isVisible) {
return;
}
this.#originalValue = text;
this.editor.setText(text, { saveTransactionToHistory: false });
this.#attach(element);
this.#container.style.display = "flex";
this.isVisible = true;
this.editor.focus();
this.emit("popupshown");
};
/**
* Hide the editor, optionally committing the changes
*
* @param {boolean} shouldCommit
* A change will be committed by default. If this param
* strictly equals false, no change will occur.
*/
hide = shouldCommit => {
if (!this.isVisible) {
return;
}
this.#container.style.display = "none";
this.#detach();
const newValue = this.editor.getText();
const valueHasChanged = this.#originalValue !== newValue;
const preventCommit = shouldCommit === false || !valueHasChanged;
this.#originalValue = undefined;
this.isVisible = undefined;
this.emit("popuphidden", !preventCommit, newValue);
};
/**
* Destroy this object and unbind all event handlers
*/
destroy() {
this.doc.defaultView.removeEventListener("resize", this.refresh, true);
this.#container.removeEventListener("click", this.hide);
this.#editorInner.removeEventListener("click", HTMLEditor.#stopPropagation);
this.#editorInner.removeEventListener(
"keydown",
HTMLEditor.#stopPropagation
);
this.hide(false);
this.#container.remove();
this.editor.destroy();
}
}
module.exports = HTMLEditor;