jodit 3.23.3 → 3.24.2

package/src/core/ui/popup/popup.test.js

@@ -3,126 +3,101 @@
  * Released under MIT see LICENSE.txt in the project root for license information.
  * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
-describe('Test popup', function () {
-	const position = Jodit.modules.Helpers.position;
-
-	let textBox;
-	const elms = [];
-
-	beforeEach(function () {
-		textBox = document.createElement('div');
-		Object.assign(textBox.style, {
-			position: 'fixed',
-			display: 'flex',
-			flexWrap: 'wrap',
-			top: 0,
-			left: 0,
-			width: '100%',
-			height: '100%',
-			background: 'red'
-		});
-		document.body.appendChild(textBox);
-
-		for (let i = 0; i < 4; i += 1) {
-			for (let j = 0; j < 4; j += 1) {
-				const elmBox = document.createElement('div');
-
-				Object.assign(elmBox.style, {
-					width: '25%',
-					height: '25%',
-					background:
-						'rgb(' +
-						(i * 30 + 128) +
-						',' +
-						(j * 30 + 28) +
-						', ' +
-						(i * 10 + j * 10 + 100) +
-						')'
-				});
+('popup' in window.skipTest ? describe.skip : describe)(
+	'Test popup',
+	function () {
+		const position = Jodit.modules.Helpers.position;
+
+		let textBox;
+		const elms = [];
+
+		beforeEach(function () {
+			textBox = document.createElement('div');
+			Object.assign(textBox.style, {
+				position: 'fixed',
+				display: 'flex',
+				flexWrap: 'wrap',
+				top: 0,
+				left: 0,
+				width: '100%',
+				height: '100%',
+				background: 'red'
+			});
+			document.body.appendChild(textBox);
+
+			for (let i = 0; i < 4; i += 1) {
+				for (let j = 0; j < 4; j += 1) {
+					const elmBox = document.createElement('div');
+
+					Object.assign(elmBox.style, {
+						width: '25%',
+						height: '25%',
+						background:
+							'rgb(' +
+							(i * 30 + 128) +
+							',' +
+							(j * 30 + 28) +
+							', ' +
+							(i * 10 + j * 10 + 100) +
+							')'
+					});
 
-				textBox.appendChild(elmBox);
-				elms.push(elmBox);
+					textBox.appendChild(elmBox);
+					elms.push(elmBox);
+				}
 			}
-		}
-	});
-
-	afterEach(function () {
-		textBox && textBox.remove();
-		elms.length = 0;
-	});
-
-	const aliases = {
-		leftTop: function () {
-			return elms[0];
-		},
-		rightTop: function () {
-			return elms[3];
-		},
-		leftBottom: function () {
-			return elms[12];
-		},
-		rightBottom: function () {
-			return elms[15];
-		},
-		center: function () {
-			return elms[5];
-		}
-	};
-
-	const openPopup = function (getBound, content, strategy) {
-		const editor = getJodit();
-
-		const popup = new Jodit.modules.Popup(editor);
-
-		if (strategy) {
-			popup.strategy = strategy;
-		}
-
-		popup.setContent(content || 'Test content').open(getBound);
-
-		return {
-			left: parseInt(popup.container.style.left, 10),
-			top: parseInt(popup.container.style.top, 10),
-			width: popup.container.offsetWidth,
-			height: popup.container.offsetHeight
-		};
-	};
+		});
 
-	describe('Open popup on some target', function () {
-		describe('Usual case - there is enough space under element', function () {
-			it('should show popup under element', function () {
-				const div = appendTestDiv();
-				div.innerText = 'test';
+		afterEach(function () {
+			textBox && textBox.remove();
+			elms.length = 0;
+		});
 
-				const gb = function () {
-					return position(div);
-				};
+		const aliases = {
+			leftTop: function () {
+				return elms[0];
+			},
+			rightTop: function () {
+				return elms[3];
+			},
+			leftBottom: function () {
+				return elms[12];
+			},
+			rightBottom: function () {
+				return elms[15];
+			},
+			center: function () {
+				return elms[5];
+			}
+		};
 
-				const pos = openPopup(gb);
+		const openPopup = function (getBound, content, strategy) {
+			const editor = getJodit();
 
-				expect(pos.left).equals(gb().left);
-				expect(pos.top).equals(gb().top + gb().height);
-			});
-		});
+			const popup = new Jodit.modules.Popup(editor);
 
-		describe('Corners', function () {
-			describe('Change default strategy', function () {
-				it('should show popup to match the strategy', function () {
-					const gb = function () {
-						return position(aliases.center());
-					};
+			if (strategy) {
+				popup.strategy = strategy;
+			}
 
-					const pos = openPopup(gb, false, 'rightBottom');
+			popup.setContent(content || 'Test content').open(getBound);
 
-					expect(pos.left + pos.width).equals(gb().left + gb().width);
-					expect(pos.top).equals(gb().top + gb().height);
-				});
-			});
+			return {
+				left: parseInt(popup.container.style.left, 10),
+				top: parseInt(popup.container.style.top, 10),
+				width: popup.container.offsetWidth,
+				height: popup.container.offsetHeight
+			};
+		};
 
-			describe('Left-Top', function () {
+		describe('Open popup on some target', function () {
+			describe('Usual case - there is enough space under element', function () {
 				it('should show popup under element', function () {
+					const div = appendTestDiv();
+					div.innerText = 'test';
+
 					const gb = function () {
-						return position(aliases.leftTop());
+						return position(div);
 					};
 
 					const pos = openPopup(gb);
@@ -132,80 +107,110 @@ describe('Test popup', function () {
 				});
 			});
 
-			describe('Right-Top', function () {
-				describe('Small popup', function () {
-					it('should show popup under element', function () {
+			describe('Corners', function () {
+				describe('Change default strategy', function () {
+					it('should show popup to match the strategy', function () {
 						const gb = function () {
-							return position(aliases.rightTop());
+							return position(aliases.center());
 						};
 
-						const pos = openPopup(gb);
+						const pos = openPopup(gb, false, 'rightBottom');
 
-						expect(pos.left).equals(gb().left);
+						expect(pos.left + pos.width).equals(
+							gb().left + gb().width
+						);
 						expect(pos.top).equals(gb().top + gb().height);
 					});
 				});
 
-				describe('Big popup', function () {
-					it("should show popup under element but right corner should be under target's right-bottom corner", function () {
+				describe('Left-Top', function () {
+					it('should show popup under element', function () {
 						const gb = function () {
-							return position(aliases.rightTop());
+							return position(aliases.leftTop());
 						};
 
-						const pos = openPopup(gb, 'testO'.repeat(30));
+						const pos = openPopup(gb);
 
-						expect(pos.left + pos.width).equals(
-							gb().left + gb().width
-						);
+						expect(pos.left).equals(gb().left);
 						expect(pos.top).equals(gb().top + gb().height);
 					});
 				});
-			});
 
-			describe('Left-Bottom', function () {
-				describe('Small popup', function () {
-					it('should show popup above element', function () {
-						const gb = function () {
-							return position(aliases.leftBottom());
-						};
+				describe('Right-Top', function () {
+					describe('Small popup', function () {
+						it('should show popup under element', function () {
+							const gb = function () {
+								return position(aliases.rightTop());
+							};
 
-						const pos = openPopup(gb);
+							const pos = openPopup(gb);
 
-						expect(pos.left).equals(gb().left);
-						expect(pos.top + pos.height).equals(gb().top);
+							expect(pos.left).equals(gb().left);
+							expect(pos.top).equals(gb().top + gb().height);
+						});
+					});
+
+					describe('Big popup', function () {
+						it("should show popup under element but right corner should be under target's right-bottom corner", function () {
+							const gb = function () {
+								return position(aliases.rightTop());
+							};
+
+							const pos = openPopup(gb, 'testO'.repeat(30));
+
+							expect(pos.left + pos.width).equals(
+								gb().left + gb().width
+							);
+							expect(pos.top).equals(gb().top + gb().height);
+						});
 					});
 				});
-			});
 
-			describe('Right-Bottom', function () {
-				describe('Small popup', function () {
-					it('should show popup above element', function () {
-						const gb = function () {
-							return position(aliases.rightBottom());
-						};
+				describe('Left-Bottom', function () {
+					describe('Small popup', function () {
+						it('should show popup above element', function () {
+							const gb = function () {
+								return position(aliases.leftBottom());
+							};
 
-						const pos = openPopup(gb);
+							const pos = openPopup(gb);
 
-						expect(pos.left).equals(gb().left);
-						expect(pos.top + pos.height).equals(gb().top);
+							expect(pos.left).equals(gb().left);
+							expect(pos.top + pos.height).equals(gb().top);
+						});
 					});
 				});
 
-				describe('Big popup', function () {
-					it("should show popup above the element but right corner should be above target's right-top corner", function () {
-						const gb = function () {
-							return position(aliases.rightBottom());
-						};
+				describe('Right-Bottom', function () {
+					describe('Small popup', function () {
+						it('should show popup above element', function () {
+							const gb = function () {
+								return position(aliases.rightBottom());
+							};
 
-						const pos = openPopup(gb, 'testO'.repeat(30));
+							const pos = openPopup(gb);
 
-						expect(pos.left + pos.width).equals(
-							gb().left + gb().width
-						);
-						expect(pos.top + pos.height).equals(gb().top);
+							expect(pos.left).equals(gb().left);
+							expect(pos.top + pos.height).equals(gb().top);
+						});
+					});
+
+					describe('Big popup', function () {
+						it("should show popup above the element but right corner should be above target's right-top corner", function () {
+							const gb = function () {
+								return position(aliases.rightBottom());
+							};
+
+							const pos = openPopup(gb, 'testO'.repeat(30));
+
+							expect(pos.left + pos.width).equals(
+								gb().left + gb().width
+							);
+							expect(pos.top + pos.height).equals(gb().top);
+						});
 					});
 				});
 			});
 		});
-	});
-});
+	}
+);

package/src/{plugins/backspace/interface.d.ts → core/vdom/on-demand.ts}

@@ -4,8 +4,10 @@
  * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-/**
- * @module plugins/backspace
- */
-
-export type DeleteMode = 'char' | 'word' | 'sentence';
+class OnDemand {
+	state: {
+		cursor: {
+			startContainer;
+		};
+	};
+}

package/src/core/vdom/render/index.ts

@@ -98,7 +98,7 @@ export class VDomRender {
 
 	private commitDeletion(fiber: CanUndef<IFiber>, domParent: Node): void {
 		if (fiber?.dom) {
-			domParent.removeChild(fiber.dom);
+			fiber.dom.isConnected && domParent.removeChild(fiber.dom);
 		} else {
 			this.commitDeletion(fiber?.child, domParent);
 		}
@@ -232,8 +232,6 @@ export class VDomRender {
 		const box = document.createElement('div');
 		box.innerHTML = html;
 
-		return domToVDom(
-			box.children.length > 1 || !box.firstChild ? box : box.firstChild
-		);
+		return domToVDom(box);
 	}
 }

package/src/core/vdom/render/patcher.ts

@@ -0,0 +1,14 @@
+/*!
+ * Jodit Editor (https://xdsoft.net/jodit/)
+ * Released under MIT see LICENSE.txt in the project root for license information.
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+import type { VDomRender } from './index';
+
+export class Patcher {
+	constructor(
+		private readonly render: VDomRender,
+		private readonly updateWip: () => void
+	) {}
+}

package/src/core/vdom/v-dom-jodit.less

@@ -1,8 +1,25 @@
 .jodit-v-dom-container {
+	display: flex;
 	min-height: 100px;
 	padding: 10px;
 	border: 1px solid #ccc;
 
+	> * {
+		width: 33.3333%;
+	}
+
+	> *:not(:nth-child(1)) {
+		padding-left: 10px;
+		border-left: 1px solid #ccc;
+	}
+
+	.jodit-v-dom-editor {
+		outline: none;
+	}
+
+	.jodit-v-dom-ast-mirror {
+	}
+
 	&:empty {
 		&:before {
 			content: 'Test';

package/src/core/vdom/v-dom-jodit.ts

@@ -6,28 +6,67 @@
 
 import './v-dom-jodit.less';
 
+import type { IEventEmitter } from '../../types';
 import type { IVDom } from './interface';
 import { VDomRender } from './render';
+import { EventEmitter } from '../event-emitter';
 
 export class VDomJodit {
 	private container: HTMLElement;
+	private editor: HTMLElement;
+	private mirror: HTMLElement;
+	private astMirror: HTMLElement;
 
 	private vdom!: IVDom;
 
 	private render: VDomRender = new VDomRender();
+	private render2: VDomRender = new VDomRender();
+	private event: IEventEmitter = new EventEmitter();
 
 	set value(v: string) {
 		this.vdom = this.render.htmlToVDom(v);
-		this.render.render(this.vdom, this.container);
+		this.render.render(this.vdom, this.editor);
 	}
 
 	private constructor(elm: HTMLInputElement) {
 		this.container = document.createElement('div');
+		this.editor = document.createElement('div');
+		this.mirror = document.createElement('div');
+		this.astMirror = document.createElement('pre');
 		elm.style.display = 'none';
 		elm.parentElement?.insertBefore(this.container, elm);
-		this.container.setAttribute('contenteditable', 'true');
+		this.editor.setAttribute('contenteditable', 'true');
+
 		this.container.classList.add('jodit-v-dom-container');
+		this.editor.classList.add('jodit-v-dom-editor');
+		this.astMirror.classList.add('jodit-v-dom-ast-mirror');
+		this.container.appendChild(this.editor);
+		this.container.appendChild(this.astMirror);
+		this.container.appendChild(this.mirror);
 		this.value = elm.value;
+		this.event.on(document, 'selectionchange', () => {
+			console.log(111);
+		});
+
+		document.execCommand('defaultParagraphSeparator', false, 'p');
+
+		const config = {
+			attributes: true,
+			childList: true,
+			subtree: true,
+			characterData: true
+		};
+		const callback = (mutationList: MutationRecord[]): void => {
+			for (const mutation of mutationList) {
+				console.log(mutation);
+			}
+			const vdom = this.render2.htmlToVDom(this.editor.innerHTML);
+			this.astMirror.textContent = JSON.stringify(vdom, null, ' ');
+
+			this.render2.render(vdom, this.mirror);
+		};
+		const observer = new MutationObserver(callback);
+		observer.observe(this.editor, config);
 
 		this.preventAllInputEvents();
 	}
@@ -38,7 +77,67 @@ export class VDomJodit {
 
 	private preventAllInputEvents(): void {
 		this.container.addEventListener('keydown', e => {
-			e.preventDefault();
+			// e.preventDefault();
 		});
 	}
 }
+
+const vdom = {
+	type: 'div',
+	props: {
+		children: [
+			{
+				type: 'h1',
+				props: {
+					style: { color: '#f00' },
+					children: [
+						{
+							type: 'TEXT_ELEMENT',
+							props: {
+								nodeValue: 'This is a title'
+							}
+						}
+					]
+				}
+			},
+			{
+				type: 'p',
+				props: {
+					className: 'test',
+					children: [
+						{
+							type: 'TEXT_ELEMENT',
+							props: {
+								nodeValue: 'This is a paragraph'
+							}
+						}
+					]
+				}
+			}
+		]
+	}
+};
+const state = {
+	cursor: {
+		startContainer: vdom.props.children[0].props.children[0],
+		startOffset: 0
+	},
+	vdom
+};
+
+export function insertChar(char: string): void {
+	const { startContainer, startOffset } = state.cursor;
+	const text = startContainer.props.nodeValue;
+	const before = text.slice(0, startOffset);
+	const after = text.slice(startOffset);
+	startContainer.props.nodeValue = before + char + after;
+	state.cursor.startOffset += 1;
+
+	// wipRoot = {
+	// 	dom: startContainer.dom,
+	// 	props: startContainer.props,
+	// }
+	//
+	// nextUnitOfWork = wipRoot
+	// deletions = []
+}

package/src/core/view/view.ts

@@ -94,7 +94,7 @@ export abstract class View extends Component implements IViewBased, Mods, Elms {
 	 */
 	readonly buffer: IStorage = Storage.makeStorage();
 
-	readonly message: IMessages;
+	message: IMessages;
 
 	/**
 	 * Container for persistent set/get value
@@ -262,7 +262,7 @@ export abstract class View extends Component implements IViewBased, Mods, Elms {
 
 		this.container = this.c.div(`jodit ${this.componentName}`);
 		this.progressbar = new ProgressBar(this);
-		this.message = new UIMessages(this);
+		this.message = new UIMessages(this, this.container);
 	}
 
 	private __modulesInstances: Map<string, IComponent> = new Map();

package/src/index.ts

@@ -74,3 +74,5 @@ Object.keys(Languages)
 	});
 
 export { DefaultJodit as Jodit };
+
+export class CommitMode {}

package/src/jodit.ts

@@ -45,6 +45,7 @@ import {
 	Select,
 	StatusBar,
 	STATUSES,
+	UIMessages,
 	ViewWithToolbar
 } from 'jodit/modules/';
 
@@ -169,7 +170,7 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 	 * Factory for creating Jodit instance
 	 */
 	static make(element: HTMLElement | string, options?: object): Jodit {
-		return new Jodit(element, options);
+		return new this(element, options);
 	}
 
 	/**
@@ -1359,6 +1360,9 @@ export class Jodit extends ViewWithToolbar implements IJodit, Dlgs {
 
 		container.appendChild(workplace);
 
+		this.message.destruct();
+		this.message = new UIMessages(this, workplace);
+
 		if (element.parentNode && element !== container) {
 			element.parentNode.insertBefore(container, element);
 		}