Skip to content

feat: allow initializing editor in the context of a different document, window or shadow root #459

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: allow initializing editor in the context of a different document, window or shadow root #459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion source/Clipboard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ const _onPaste = function (this: Squire, event: ClipboardEvent): void {
// No interface. Includes all versions of IE :(
// --------------------------------------------

const body = document.body;
const body = this._document.body;
const range = this.getSelection();
const startContainer = range.startContainer;
const startOffset = range.startOffset;
Expand Down
58 changes: 31 additions & 27 deletions source/Editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,8 @@ interface SquireConfig {

class Squire {
_root: HTMLElement;
_document: Document;
_window: Window;
_config: SquireConfig;

_isFocused: boolean;
Expand Down Expand Up @@ -124,6 +126,8 @@ class Squire {

constructor(root: HTMLElement, config?: Partial<SquireConfig>) {
this._root = root;
this._document = root.ownerDocument || document;
this._window = this._document.defaultView || window;

this._config = this._makeConfig(config);

Expand Down Expand Up @@ -235,9 +239,10 @@ class Squire {
RETURN_DOM_FRAGMENT: true,
FORCE_BODY: false,
});
const doc = this._document;
return frag
? document.importNode(frag, true)
: document.createDocumentFragment();
? doc.importNode(frag, true)
: doc.createDocumentFragment();
},
didError: (error: any): void => console.log(error),
};
Expand Down Expand Up @@ -358,7 +363,8 @@ class Squire {
// an infinite loop. So we detect whether we're actually
// focused/blurred before firing.
if (/^(?:focus|blur)/.test(type)) {
const isFocused = this._root === document.activeElement;
const shadow = this._root.getRootNode(); // either Document, ShadowRoot or orphan node itself
const isFocused = 'activeElement' in shadow && this._root === shadow.activeElement;
if (type === 'focus') {
if (!isFocused || this._isFocused) {
return this;
Expand Down Expand Up @@ -417,7 +423,7 @@ class Squire {
this._events.set(type, handlers);
if (!this.customEvents.has(type)) {
if (type === 'selectionchange') {
target = document;
target = this._document;
}
target.addEventListener(type, this, true);
}
Expand All @@ -444,7 +450,7 @@ class Squire {
this._events.delete(type);
if (!this.customEvents.has(type)) {
if (type === 'selectionchange') {
target = document;
target = this._document;
}
target.removeEventListener(type, this, true);
}
Expand Down Expand Up @@ -548,7 +554,7 @@ class Squire {
end.remove();

if (!range) {
range = document.createRange();
range = this._document.createRange();
}
range.setStart(startContainer, startOffset);
range.setEnd(endContainer, endOffset);
Expand Down Expand Up @@ -580,7 +586,7 @@ class Squire {
}

getSelection(): Range {
const selection = window.getSelection();
const selection = this._window.getSelection();
const root = this._root;
let range: Range | null = null;
// If not focused, always rely on cached selection; another function may
Expand All @@ -603,7 +609,7 @@ class Squire {
range = this._lastSelection;
// Check the editor is in the live document; if not, the range has
// probably been rewritten by the browser and is bogus
if (!document.contains(range.commonAncestorContainer)) {
if (!root.getRootNode().contains(range.commonAncestorContainer)) {
range = null;
}
}
Expand All @@ -621,7 +627,7 @@ class Squire {
if (!this._isFocused) {
this._enableRestoreSelection();
} else {
const selection = window.getSelection();
const selection = this._window.getSelection();
if (selection) {
if ('setBaseAndExtent' in Selection.prototype) {
selection.setBaseAndExtent(
Expand Down Expand Up @@ -1174,7 +1180,7 @@ class Squire {
let offset = range.startOffset;
let textNode: Text;
if (!startContainer || !(startContainer instanceof Text)) {
const text = document.createTextNode('');
const text = this._document.createTextNode('');
startContainer.insertBefore(
text,
startContainer.childNodes[offset],
Expand Down Expand Up @@ -1521,11 +1527,9 @@ class Squire {
// formatted text.
let fixer: Node | Text | null | undefined;
if (range.collapsed) {
if (cantFocusEmptyTextNodes) {
fixer = document.createTextNode(ZWS);
} else {
fixer = document.createTextNode('');
}
fixer = this._document.createTextNode(
cantFocusEmptyTextNodes ? ZWS : ''
);
insertNodeInRange(range, fixer!);
}

Expand Down Expand Up @@ -1697,7 +1701,7 @@ class Squire {
}
insertNodeInRange(
range,
document.createTextNode(url.slice(protocolEnd)),
this._document.createTextNode(url.slice(protocolEnd)),
);
}
attributes = Object.assign(
Expand Down Expand Up @@ -1806,7 +1810,7 @@ class Squire {
const endIndex = index + match[0].length;
if (index) {
parent.insertBefore(
document.createTextNode(data.slice(0, index)),
this._document.createTextNode(data.slice(0, index)),
node,
);
}
Expand Down Expand Up @@ -1979,7 +1983,7 @@ class Squire {
node = range.startContainer;
const offset = range.startOffset;
if (!(node instanceof Text)) {
node = document.createTextNode('');
node = this._document.createTextNode('');
parent.insertBefore(node, parent.firstChild);
}
// If blank line: split and insert default block
Expand Down Expand Up @@ -2111,7 +2115,7 @@ class Squire {
(!nodeAfterSplit.textContent ||
nodeAfterSplit.textContent === ZWS)
) {
child = document.createTextNode('') as Text;
child = this._document.createTextNode('') as Text;
replaceWith(nodeAfterSplit, child);
nodeAfterSplit = child;
break;
Expand Down Expand Up @@ -2540,7 +2544,7 @@ class Squire {
if (range.collapsed || isContainer(range.commonAncestorContainer)) {
this.modifyBlocks((frag) => {
const root = this._root;
const output = document.createDocumentFragment();
const output = this._document.createDocumentFragment();
const blockWalker = getBlockWalker(frag, root);
let node: Element | Text | null;
// 1. Extract inline content; drop all blocks and contains.
Expand All @@ -2563,7 +2567,7 @@ class Squire {
if (!brBreaksLine[l]) {
detach(br);
} else {
replaceWith(br, document.createTextNode('\n'));
replaceWith(br, this._document.createTextNode('\n'));
}
}
// 3. Remove <code>; its format clashes with <pre>
Expand All @@ -2573,7 +2577,7 @@ class Squire {
replaceWith(nodes[l], empty(nodes[l]));
}
if (output.childNodes.length) {
output.appendChild(document.createTextNode('\n'));
output.appendChild(this._document.createTextNode('\n'));
}
output.appendChild(empty(node));
}
Expand Down Expand Up @@ -2620,11 +2624,11 @@ class Squire {
while ((node = walker.nextNode())) {
let value = node.data;
value = value.replace(/ (?= )/g, ' '); // sp -> nbsp
const contents = document.createDocumentFragment();
const contents = this._document.createDocumentFragment();
let index: number;
while ((index = value.indexOf('\n')) > -1) {
contents.appendChild(
document.createTextNode(value.slice(0, index)),
this._document.createTextNode(value.slice(0, index)),
);
contents.appendChild(createElement('BR'));
value = value.slice(index + 1);
Expand Down Expand Up @@ -2679,7 +2683,7 @@ class Squire {
this.createDefaultBlock([
this._removeFormatting(
node as Element,
document.createDocumentFragment(),
this._document.createDocumentFragment(),
),
]),
);
Expand Down Expand Up @@ -2726,8 +2730,8 @@ class Squire {

// Split end point first to avoid problems when end and start
// in same container.
const formattedNodes = document.createDocumentFragment();
const cleanNodes = document.createDocumentFragment();
const formattedNodes = this._document.createDocumentFragment();
const cleanNodes = this._document.createDocumentFragment();
const nodeAfterSplit = split(endContainer, endOffset, stopNode, root);
let nodeInSplit = split(startContainer, startOffset, stopNode, root);
let nextNode: ChildNode | null;
Expand Down
2 changes: 1 addition & 1 deletion source/keyboard/KeyHandlers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ const keyHandlers: Record<string, KeyHandler> = {
if (node.nodeName === 'CODE') {
let next = node.nextSibling;
if (!(next instanceof Text)) {
const textNode = document.createTextNode(' '); // nbsp
const textNode = self._document.createTextNode(' '); // nbsp
node.parentNode!.insertBefore(textNode, next);
next = textNode;
}
Expand Down
6 changes: 1 addition & 5 deletions source/node/MergeSplit.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,7 @@ const fixCursor = (node: Node): Node => {
}
}
if (!child) {
if (cantFocusEmptyTextNodes) {
fixer = document.createTextNode(ZWS);
} else {
fixer = document.createTextNode('');
}
fixer = document.createTextNode(cantFocusEmptyTextNodes ? ZWS : '');
}
} else if (
(node instanceof Element || node instanceof DocumentFragment) &&
Expand Down
2 changes: 1 addition & 1 deletion source/range/Boundaries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const isNodeContainedInRange = (
node: Node,
partial: boolean,
): boolean => {
const nodeRange = document.createRange();
const nodeRange = (node.ownerDocument || document).createRange();
nodeRange.selectNode(node);
if (partial) {
// Node must not finish before range starts or start after range
Expand Down
6 changes: 3 additions & 3 deletions source/range/InsertDelete.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ function createRange(
endContainer?: Node,
endOffset?: number,
): Range {
const range = document.createRange();
const range = (startContainer.ownerDocument || document).createRange();
range.setStart(startContainer, startOffset);
if (endContainer && typeof endOffset === 'number') {
range.setEnd(endContainer, endOffset);
Expand Down Expand Up @@ -108,7 +108,7 @@ const extractContentsOfRange = (
common: Node | null,
root: Element,
): DocumentFragment => {
const frag = document.createDocumentFragment();
const frag = (root.ownerDocument || document).createDocumentFragment();
if (range.collapsed) {
return frag;
}
Expand Down Expand Up @@ -363,7 +363,7 @@ const insertTreeFragmentIntoRange = (
}
if (/*isBlock( container ) && */ offset !== getLength(container)) {
// Collect any inline contents of the block after the range point
blockContentsAfterSplit = document.createDocumentFragment();
blockContentsAfterSplit = (root.ownerDocument || document).createDocumentFragment();
while ((node = container.childNodes[offset])) {
blockContentsAfterSplit.appendChild(node);
}
Expand Down