Support Projection (#386)

* Support projection in demo site * Support projection * Fix readme
microsoft · Feb 7, 2020 · f0cfa2e · f0cfa2e
1 parent eec45f2
commit f0cfa2e
Show file tree

Hide file tree

Showing 51 changed files with 731 additions and 216 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "roosterjs",
-    "version": "7.9.2",
+    "version": "7.10.0",
     "description": "Framework-independent javascript editor",
     "repository": {
         "type": "git",
@@ -35,9 +35,9 @@
         "glob": "7.1.4",
         "husky": "^3.0.1",
         "jasmine-core": "3.4.0",
-        "karma": "4.1.0",
-        "karma-chrome-launcher": "2.2.0",
-        "karma-jasmine": "2.0.1",
+        "karma": "4.4.1",
+        "karma-chrome-launcher": "3.1.0",
+        "karma-jasmine": "3.1.0",
         "karma-phantomjs-launcher": "1.0.4",
         "karma-sourcemap-loader": "0.3.7",
         "karma-webpack": "4.0.2",

diff --git a/packages/roosterjs-cross-window/LICENSE b/packages/roosterjs-cross-window/LICENSE
@@ -0,0 +1,25 @@
+    RoosterJS
+    Copyright (c) Microsoft Corporation
+    All rights reserved.
+
+    MIT License
+
+    Copyright (c) Microsoft Corporation. All rights reserved.
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE
diff --git a/packages/roosterjs-cross-window/README.md b/packages/roosterjs-cross-window/README.md
@@ -0,0 +1,3 @@
+# roosterjs-cross-window
+
+This package provides type check utilities that support cross-window scenario.
diff --git a/packages/roosterjs-cross-window/lib/index.ts b/packages/roosterjs-cross-window/lib/index.ts
@@ -0,0 +1,7 @@
+export { default as isDocumentFragment } from './typeUtils/isDocumentFragment';
+export { default as isHTMLElement } from './typeUtils/isHTMLElement';
+export { default as isHTMLOListElement } from './typeUtils/isHTMLOListElement';
+export { default as isHTMLTableCellElement } from './typeUtils/isHTMLTableCellElement';
+export { default as isHTMLTableElement } from './typeUtils/isHTMLTableElement';
+export { default as isNode } from './typeUtils/isNode';
+export { default as isRange } from './typeUtils/isRange';
diff --git a/packages/roosterjs-cross-window/lib/test/typeUtilsTest.ts b/packages/roosterjs-cross-window/lib/test/typeUtilsTest.ts
@@ -0,0 +1,193 @@
+import isDocumentFragment from '../typeUtils/isDocumentFragment';
+import isHTMLElement from '../typeUtils/isHTMLElement';
+import isHTMLOListElement from '../typeUtils/isHTMLOListElement';
+import isHTMLTableCellElement from '../typeUtils/isHTMLTableCellElement';
+import isHTMLTableElement from '../typeUtils/isHTMLTableElement';
+import isNode from '../typeUtils/isNode';
+import isRange from '../typeUtils/isRange';
+import { getTargetWindow } from '../typeUtils/safeInstanceOf';
+
+describe('typeUtils', () => {
+    let iframe: HTMLIFrameElement;
+    let iframeDocument: Document;
+
+    beforeEach(() => {
+        iframe = document.createElement('IFRAME') as HTMLIFrameElement;
+        iframe.src = 'about:blank';
+        document.body.appendChild(iframe);
+        iframeDocument = iframe.contentDocument;
+        iframeDocument.write('<html><body></body></html>');
+    });
+
+    afterEach(() => {
+        document.body.removeChild(iframe);
+        iframe = null;
+        iframeDocument = null;
+    });
+
+    it('getTargetWindow for Node', () => {
+        const localNode = document.createTextNode('test 1');
+        const remoteNode = iframeDocument.createTextNode('test 2');
+        const localWindow = getTargetWindow(localNode);
+        const remoteWindow = getTargetWindow(remoteNode);
+        expect(localWindow).toBe(<any>window, 'localNode => getTargetWindow');
+        expect(localWindow).not.toBe(
+            <any>iframeDocument.defaultView,
+            'localNode => getTargetWindow'
+        );
+        expect(remoteWindow).not.toBe(<any>window, 'remoteNode => getTargetWindow');
+        expect(remoteWindow).toBe(<any>iframeDocument.defaultView, 'remoteNode => getTargetWindow');
+    });
+
+    it('getTargetWindow for Range', () => {
+        const localRange = document.createRange();
+        const remoteRange = iframeDocument.createRange();
+        const localWindow = getTargetWindow(localRange);
+        const remoteWindow = getTargetWindow(remoteRange);
+        expect(localWindow).toBe(<any>window, 'localNode => getTargetWindow');
+        expect(localWindow).not.toBe(
+            <any>iframeDocument.defaultView,
+            'localNode => getTargetWindow'
+        );
+        expect(remoteWindow).not.toBe(<any>window, 'remoteNode => getTargetWindow');
+        expect(remoteWindow).toBe(<any>iframeDocument.defaultView, 'remoteNode => getTargetWindow');
+    });
+
+    it('isNode', () => {
+        const localNode = document.createTextNode('test 1');
+        const remoteNode = iframeDocument.createTextNode('test 2');
+        const localRange = document.createRange();
+        const remoteRange = iframeDocument.createRange();
+        const detachNode = getDetachedNode('test');
+
+        expect(isNode(localNode)).toBeTruthy('local node => isNode');
+        expect(isNode(remoteNode)).toBeTruthy('remote node => isNode');
+        expect(isNode(localRange)).toBeFalsy('local range => isNode');
+        expect(isNode(remoteRange)).toBeFalsy('remote range => isNode');
+        expect(isNode(detachNode)).toBeTruthy('detached node => isNode');
+        expect(isNode({})).toBeFalsy('object => isNode');
+    });
+
+    it('isRange', () => {
+        const localNode = document.createTextNode('test 1');
+        const remoteNode = iframeDocument.createTextNode('test 2');
+        const localRange = document.createRange();
+        const remoteRange = iframeDocument.createRange();
+
+        expect(isRange(localNode)).toBeFalsy('local node => isRange');
+        expect(isRange(remoteNode)).toBeFalsy('remote node => isRange');
+        expect(isRange(localRange)).toBeTruthy('local range => isRange');
+        expect(isRange(remoteRange)).toBeTruthy('remote range => isRange');
+        expect(isRange({})).toBeFalsy('object => isRange');
+    });
+
+    it('isHTMLElement', () => {
+        const localNode = document.createTextNode('test 1');
+        const remoteNode = iframeDocument.createTextNode('test 2');
+        const localElement = document.createElement('DIV');
+        const remoteElement = iframeDocument.createElement('DIV');
+        const detachNode = getDetachedNode('test');
+        const detachElement = getDetachedNode('<div>test</div>');
+
+        expect(isHTMLElement(localNode)).toBeFalsy('local node => isHTMLElement');
+        expect(isHTMLElement(remoteNode)).toBeFalsy('remote node => isHTMLElement');
+        expect(isHTMLElement(localElement)).toBeTruthy('local element => isHTMLElement');
+        expect(isHTMLElement(remoteElement)).toBeTruthy('remote element => isHTMLElement');
+        expect(isHTMLElement(detachNode)).toBeFalsy('detached node => isHTMLElement');
+        expect(isHTMLElement(detachElement)).toBeTruthy('detached element => isHTMLElement');
+        expect(isHTMLElement({})).toBeFalsy('object => isHTMLElement');
+    });
+
+    it('isDocumentFragment', () => {
+        const localNode = document.createTextNode('test 1');
+        const remoteNode = iframeDocument.createTextNode('test 2');
+        const localFragment = document.createDocumentFragment();
+        const remoteFragment = iframeDocument.createDocumentFragment();
+
+        expect(isDocumentFragment(localNode)).toBeFalsy('local node => isDocumentFragment');
+        expect(isDocumentFragment(remoteNode)).toBeFalsy('remote node => isDocumentFragment');
+        expect(isDocumentFragment(localFragment)).toBeTruthy(
+            'local fragment => isDocumentFragment'
+        );
+        expect(isDocumentFragment(remoteFragment)).toBeTruthy(
+            'remote fragment => isDocumentFragment'
+        );
+        expect(isDocumentFragment({})).toBeFalsy('object => isDocumentFragment');
+    });
+
+    it('isHTMLOListElement', () => {
+        const localNode = document.createTextNode('test 1');
+        const remoteNode = iframeDocument.createTextNode('test 2');
+        const localElement = document.createElement('OL');
+        const remoteElement = iframeDocument.createElement('OL');
+        const detachNode = getDetachedNode('test');
+        const detachElement = getDetachedNode('<OL></OL>');
+
+        expect(isHTMLOListElement(localNode)).toBeFalsy('local node => isHTMLOListElement');
+        expect(isHTMLOListElement(remoteNode)).toBeFalsy('remote node => isHTMLOListElement');
+        expect(isHTMLOListElement(localElement)).toBeTruthy('local element => isHTMLOListElement');
+        expect(isHTMLOListElement(remoteElement)).toBeTruthy(
+            'remote element => isHTMLOListElement'
+        );
+        expect(isHTMLOListElement(detachNode)).toBeFalsy('detached node => isHTMLOListElement');
+        expect(isHTMLOListElement(detachElement)).toBeTruthy(
+            'detached element => isHTMLOListElement'
+        );
+        expect(isHTMLOListElement({})).toBeFalsy('object => isHTMLOListElement');
+    });
+
+    it('isHTMLTableCellElement', () => {
+        const localNode = document.createTextNode('test 1');
+        const remoteNode = iframeDocument.createTextNode('test 2');
+        const localElement = document.createElement('TD');
+        const remoteElement = iframeDocument.createElement('TD');
+        const detachNode = getDetachedNode('test');
+        const detachElement = (<HTMLTableElement>(
+            new DOMParser().parseFromString('<TABLE><TR><TD></TD></TR></TABLE>', 'text/html').body
+                .firstChild
+        )).rows[0].cells[0];
+
+        expect(isHTMLTableCellElement(localNode)).toBeFalsy('local node => isHTMLTableCellElement');
+        expect(isHTMLTableCellElement(remoteNode)).toBeFalsy(
+            'remote node => isHTMLTableCellElement'
+        );
+        expect(isHTMLTableCellElement(localElement)).toBeTruthy(
+            'local element => isHTMLTableCellElement'
+        );
+        expect(isHTMLTableCellElement(remoteElement)).toBeTruthy(
+            'remote element => isHTMLTableCellElement'
+        );
+        expect(isHTMLTableCellElement(detachNode)).toBeFalsy(
+            'detached node => isHTMLTableCellElement'
+        );
+        expect(isHTMLTableCellElement(detachElement)).toBeTruthy(
+            'detached element => isHTMLTableCellElement'
+        );
+        expect(isHTMLTableCellElement({})).toBeFalsy('object => isHTMLTableCellElement');
+    });
+
+    it('isHTMLTableElement', () => {
+        const localNode = document.createTextNode('test 1');
+        const remoteNode = iframeDocument.createTextNode('test 2');
+        const localElement = document.createElement('TABLE');
+        const remoteElement = iframeDocument.createElement('TABLE');
+        const detachNode = getDetachedNode('test');
+        const detachElement = getDetachedNode('<TABLE></TABLE>');
+
+        expect(isHTMLTableElement(localNode)).toBeFalsy('local node => isHTMLTableElement');
+        expect(isHTMLTableElement(remoteNode)).toBeFalsy('remote node => isHTMLTableElement');
+        expect(isHTMLTableElement(localElement)).toBeTruthy('local element => isHTMLTableElement');
+        expect(isHTMLTableElement(remoteElement)).toBeTruthy(
+            'remote element => isHTMLTableElement'
+        );
+        expect(isHTMLTableElement(detachNode)).toBeFalsy('detached node => isHTMLTableElement');
+        expect(isHTMLTableElement(detachElement)).toBeTruthy(
+            'detached element => isHTMLTableElement'
+        );
+        expect(isHTMLTableElement({})).toBeFalsy('object => isHTMLTableElement');
+    });
+});
+
+function getDetachedNode(html: string) {
+    return new DOMParser().parseFromString(html, 'text/html').body.firstChild;
+}
diff --git a/packages/roosterjs-cross-window/lib/typeUtils/isDocumentFragment.ts b/packages/roosterjs-cross-window/lib/typeUtils/isDocumentFragment.ts
@@ -0,0 +1,9 @@
+import safeInstanceOf from './safeInstanceOf';
+
+/**
+ * Check if the given object is DocumentFragment
+ * @param obj The object to check
+ */
+export default function isDocumentFragment(obj: any): obj is DocumentFragment {
+    return safeInstanceOf(obj as Node, 'DocumentFragment');
+}
diff --git a/packages/roosterjs-cross-window/lib/typeUtils/isHTMLElement.ts b/packages/roosterjs-cross-window/lib/typeUtils/isHTMLElement.ts
@@ -0,0 +1,9 @@
+import safeInstanceOf from './safeInstanceOf';
+
+/**
+ * Check if the given object is HTMLElement
+ * @param obj The object to check
+ */
+export default function isHTMLElement(obj: any): obj is HTMLElement {
+    return safeInstanceOf(obj as Node, 'HTMLElement');
+}
diff --git a/packages/roosterjs-cross-window/lib/typeUtils/isHTMLOListElement.ts b/packages/roosterjs-cross-window/lib/typeUtils/isHTMLOListElement.ts
@@ -0,0 +1,9 @@
+import safeInstanceOf from './safeInstanceOf';
+
+/**
+ * Check if the given object is HTMLOListElement
+ * @param obj The object to check
+ */
+export default function isHTMLOListElement(obj: any): obj is HTMLOListElement {
+    return safeInstanceOf(obj as Node, 'HTMLOListElement');
+}
diff --git a/packages/roosterjs-cross-window/lib/typeUtils/isHTMLTableCellElement.ts b/packages/roosterjs-cross-window/lib/typeUtils/isHTMLTableCellElement.ts
@@ -0,0 +1,9 @@
+import safeInstanceOf from './safeInstanceOf';
+
+/**
+ * Check if the given object is HTMLTableCellElement
+ * @param obj The object to check
+ */
+export default function isHTMLTableCellElement(obj: any): obj is HTMLTableCellElement {
+    return safeInstanceOf(obj as Node, 'HTMLTableCellElement');
+}
diff --git a/packages/roosterjs-cross-window/lib/typeUtils/isHTMLTableElement.ts b/packages/roosterjs-cross-window/lib/typeUtils/isHTMLTableElement.ts
@@ -0,0 +1,9 @@
+import safeInstanceOf from './safeInstanceOf';
+
+/**
+ * Check if the given object is HTMLTableElement
+ * @param obj The object to check
+ */
+export default function isHTMLTableElement(obj: any): obj is HTMLTableElement {
+    return safeInstanceOf(obj as Node, 'HTMLTableElement');
+}
diff --git a/packages/roosterjs-cross-window/lib/typeUtils/isNode.ts b/packages/roosterjs-cross-window/lib/typeUtils/isNode.ts
@@ -0,0 +1,9 @@
+import safeInstanceOf from './safeInstanceOf';
+
+/**
+ * Check if the given object is Node
+ * @param obj The object to check
+ */
+export default function isNode(obj: any): obj is Node {
+    return safeInstanceOf(obj as Node, 'Node');
+}
diff --git a/packages/roosterjs-cross-window/lib/typeUtils/isRange.ts b/packages/roosterjs-cross-window/lib/typeUtils/isRange.ts
@@ -0,0 +1,9 @@
+import safeInstanceOf from './safeInstanceOf';
+
+/**
+ * Check if the given object is Range
+ * @param obj The object to check
+ */
+export default function isRange(obj: any): obj is Range {
+    return safeInstanceOf(obj as Node, 'Range');
+}
diff --git a/packages/roosterjs-cross-window/lib/typeUtils/safeInstanceOf.ts b/packages/roosterjs-cross-window/lib/typeUtils/safeInstanceOf.ts
@@ -0,0 +1,41 @@
+export interface TargetWindow {
+    Node: Node;
+    HTMLElement: HTMLElement;
+    HTMLOListElement: HTMLOListElement;
+    HTMLTableElement: HTMLTableElement;
+    HTMLTableCellElement: HTMLTableCellElement;
+    Range: Range;
+    DocumentFragment: DocumentFragment;
+}
+
+/**
+ * Try get window from the given node or range
+ * @param source Source node or range
+ */
+export function getTargetWindow(source: Node | Range): TargetWindow {
+    const node = source && ((<Range>source).commonAncestorContainer || <Node>source);
+    const document =
+        node &&
+        (node.ownerDocument ||
+            (Object.prototype.toString.apply(node) == '[object HTMLDocument]'
+                ? <Document>node
+                : null));
+
+    // If document exists but document.defaultView doesn't exist, it is a detached object, just use current window instead
+    const targetWindow = document && ((document.defaultView || window) as any);
+    return targetWindow as TargetWindow;
+}
+
+/**
+ * Check if the given object is instance of the target type
+ * @param obj Object to check
+ * @param typeName Target type name
+ */
+export default function safeInstanceOf<T extends keyof TargetWindow>(
+    obj: Node | Range,
+    typeName: T
+): obj is TargetWindow[T] {
+    const targetWindow = getTargetWindow(obj);
+    const targetType = targetWindow && (targetWindow[typeName] as any);
+    return targetType && obj instanceof targetType;
+}
diff --git a/packages/roosterjs-cross-window/package.json b/packages/roosterjs-cross-window/package.json
@@ -0,0 +1,7 @@
+{
+    "name": "roosterjs-cross-window",
+    "description": "Cross window utilities for roosterjs",
+    "dependencies": {},
+    "main": "./lib/index.ts",
+    "version": "1.0.0"
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# roosterjs-cross-window

		This package provides type check utilities that support cross-window scenario.