jodit 3.10.2 → 3.12.2

package/src/core/decorators/component/README.md

@@ -0,0 +1,65 @@
+Any UI component inherited from [[UIElement]] must have a component decorator
+This decorator calls `setStatus('ready')` after the `new UI()` operation
+All other decorators start their work only when the component is ready to work.
+
+```typescript
+@component()
+class UIHeight extends UIElement {
+	public state = {
+		height: 10
+	}
+
+	@watch('state.height')
+	protected onChangeHeight() {
+		this.container.style.height = this.state.height + 'px'
+	}
+}
+
+@component()
+class UIWidth extends UIHeight {
+	public state = {
+		height: 10,
+		width: 10
+	}
+
+	@watch('state.width')
+	protected onChangeWidth() {
+		this.container.style.width = this.state.width + 'px'
+	}
+
+	constructor(jodit: IJodit) {
+		super(jodit);
+		console.log(this.componentStatus) // beforeReady
+	}
+}
+
+const elm = new UIWidth(jodit);
+console.log(elm.componentStatus); // ready
+elm.state.width = 100;
+```
+
+You can choose not to use a decorator when you need to independently manage the readiness of a component to work.
+```ts
+class UIData extends UIElement {
+	public state = {
+		data: {},
+	}
+
+	@watch('state.data')
+	protected onChangeWidth() {
+		this.container.innerText = this.state.data.content;
+	}
+
+	@hook('ready')
+	protected onReady() {
+		alert("I'm ready")
+	}
+}
+
+const elm = new UIData(jodit);
+
+fetch('index.php').then((resp) => {
+	elm.state.data = resp.json();
+	elm.setStatus('ready')
+})
+```

package/src/core/decorators/{component.ts → component/component.ts}

@@ -1,10 +1,16 @@
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
- * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import { isFunction } from '../helpers';
+/**
+ * [[include:core/decorators/component/README.md]]
+ * @packageDocumentation
+ * @module decorators/component
+ */
+
+import { isFunction } from '../../helpers';
 
 interface ComponentCompatible {
 	className?: () => string;

package/src/core/decorators/debounce/README.md

@@ -0,0 +1,44 @@
+Wraps a component method in [[Async.debounce]]. This makes it possible to reduce the load on 'heavy' functions.
+For example:
+
+```typescript
+import { component, watch, debounce } from 'jodit/src/core/decorators';
+import { Dom } from 'jodit/src/core/dom';
+
+@component()
+class UIInputSuggestion extends UIElement {
+	override render(): string {
+		return `<div>
+			<input class="&__inputElement" type="text"/>
+			<div class="&__suggestions"></div>
+		</div>`; // container
+	}
+
+	state = {
+		suggestions: []
+	};
+
+	// adds a listener for the container to the `input` event
+	@watch(':inputElement.input')
+	@debounce(100)
+	protected onInputQuery(): void {
+		fetch('search.php?q=' + encodeURIComponent(this.container.value)).then(
+			resp => {
+				this.state.suggestions = resp.json();
+			}
+		);
+	}
+
+	@watch('state.suggestions') // react on change `state.suggestions`
+	@debounce(100)
+	protected onChangeSuggestions(): void {
+		Dom.detach(this.getElm('suggestions')); // clear liist
+
+		this.state.suggestions.forEach(item => {
+			const elm = this.jodit.ci.div();
+			elm.innerText = item.title;
+			this.getElm('suggestions').appendChild(div);
+		});
+	}
+}
+```

package/src/core/decorators/{debounce.ts → debounce/debounce.ts}

@@ -1,7 +1,13 @@
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
- * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+/**
+ * [[include:core/decorators/debounce/README.md]]
+ * @packageDocumentation
+ * @module decorators/debounce
  */
 
 import type {
@@ -10,19 +16,16 @@ import type {
 	IViewComponent,
 	IAsyncParams,
 	DecoratorHandler
-} from '../../types';
+} from '../../../types';
 import {
-	error,
 	isFunction,
 	isNumber,
 	isPlainObject,
 	isViewObject
-} from '../helpers';
-import { Component, STATUSES } from '../component';
+} from '../../helpers/checker';
+import { Component, STATUSES } from '../../component';
+import { error } from '../../helpers/utils/error';
 
-/**
- * Wrap function in debounce wrapper
- */
 export function debounce<V = IViewComponent | IViewBased>(
 	timeout?: number | ((ctx: V) => number | IAsyncParams) | IAsyncParams,
 	firstCallImmediately: boolean = false,

package/src/core/decorators/hook/README.md

@@ -0,0 +1,16 @@
+Sets a handler for changing the component's status.
+
+```ts
+import { component, hook } from 'jodit/src/core/decorators';
+import { UIElement } from 'jodit/src/ui';
+
+@component()
+class UISomeElement extends UIElement {
+	@hook('ready')
+	protected onReadyHandler(): void {
+		alert('Component ise ready');
+	}
+}
+```
+
+Component statuses can be viewed in [[STATUSES]]

package/src/core/decorators/{hook.ts → hook/hook.ts}

@@ -1,7 +1,13 @@
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
- * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+/**
+ * [[include:core/decorators/hook/README.md]]
+ * @packageDocumentation
+ * @module decorators/hook
  */
 
 import type {
@@ -9,9 +15,10 @@ import type {
 	IDictionary,
 	IViewBased,
 	IViewComponent
-} from '../../types';
-import type { Component } from '../component';
-import { error, isFunction } from '../helpers';
+} from '../../../types';
+import type { Component } from '../../component';
+import { isFunction } from '../../helpers/checker';
+import { error } from '../../helpers/utils/error';
 
 /**
  * Call on some component status

package/src/core/decorators/idle/README.md

@@ -0,0 +1 @@
+Wrap function in [[Async.requestIdleCallback]] wrapper

package/src/core/decorators/{idle.ts → idle/idle.ts}

@@ -1,20 +1,24 @@
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
- * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
+
+/**
+ * [[include:core/decorators/idle/README.md]]
+ * @packageDocumentation
+ * @module decorators/idle
+ */
+
 import type {
 	DecoratorHandler,
 	IDictionary,
 	IViewBased,
 	IViewComponent
-} from '../../types';
-import { Component, STATUSES } from '../component';
-import { error, isFunction, isViewObject } from '../helpers';
+} from '../../../types';
+import { Component, STATUSES } from '../../component';
+import { error, isFunction, isViewObject } from '../../helpers';
 
-/**
- * Wrap function in requestIdleCallback wrapper*
- */
 export function idle<V = IViewComponent | IViewBased>(): DecoratorHandler {
 	return <T extends Component & IDictionary>(
 		target: IDictionary,

package/src/core/decorators/index.ts

@@ -1,16 +1,22 @@
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
- * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-export * from './cache';
-export * from './component';
-export * from './debounce';
-export * from './idle';
-export * from './hook';
-export * from './nonenumerable';
-export * from './persistent';
-export * from './wait';
-export * from './watch';
+/**
+ * [[include:core/decorators/README.md]]
+ * @packageDocumentation
+ * @module decorators
+ */
+
+export * from './cache/cache';
+export * from './component/component';
+export * from './debounce/debounce';
+export * from './idle/idle';
+export * from './hook/hook';
+export * from './nonenumerable/nonenumerable';
+export * from './persistent/persistent';
+export * from './wait/wait';
+export * from './watch/watch';
 export { default as autobind } from 'autobind-decorator';

package/src/core/decorators/nonenumerable/README.md

@@ -0,0 +1,15 @@
+Decorator that sets the enumerable property of a class field to false.
+
+```ts
+import { nonenumerable } from 'jodit/src/core/decorators';
+
+class SomeComponent {
+	@nonenumerable
+	somePrivateProp: number = 1;
+
+	anotherPublicProp: number = 2;
+}
+
+const elm = new SomeComponent();
+console.log(Object.keys(elm)); // ['anotherPublicProp']
+```

package/src/core/decorators/{nonenumerable.ts → nonenumerable/nonenumerable.ts}

@@ -1,12 +1,15 @@
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
- * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
 /**
- * Decorator that sets the enumerable property of a class field to false.
+ * [[include:core/decorators/nonenumerable/README.md]]
+ * @packageDocumentation
+ * @module decorators/nonenumerable
  */
+
 export const nonenumerable = (target: object, propertyKey: string): void => {
 	const descriptor =
 		Object.getOwnPropertyDescriptor(target, propertyKey) || {};

package/src/core/decorators/persistent/README.md

@@ -0,0 +1,23 @@
+Allow save value inside persistent storage as set/get to property
+
+```typescript
+import { component, persistent } from './src/core/decorators';
+
+@component
+class Item extends UIElement {
+	@persistent
+	options = {
+		some: true
+	};
+}
+
+const item = new Item(jodit);
+console.log(item.options); // {some: true}
+
+item.options = {
+	some: false
+};
+
+const item2 = new Item(jodit); // or reload page
+console.log(item.options); // {some: false}
+```

package/src/core/decorators/{persistent.ts → persistent/persistent.ts}

@@ -1,16 +1,19 @@
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
- * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import type { IComponent, IDictionary, IViewComponent } from '../../types';
-import { STATUSES } from '../component';
-import { isViewObject } from '../helpers';
-
 /**
- * Allow save value inside persistent storage as set/get to property
+ * [[include:core/decorators/persistent/README.md]]
+ * @packageDocumentation
+ * @module decorators/persistent
  */
+
+import type { IComponent, IDictionary, IViewComponent } from '../../../types';
+import { STATUSES } from '../../component';
+import { isViewObject } from '../../helpers';
+
 export function persistent<T extends IComponent>(
 	target: T,
 	propertyKey: string

package/src/core/decorators/wait/README.md

@@ -0,0 +1,20 @@
+Wrap function in wait wrapper, it will be called after `condition` returns `true`
+
+```typescript
+import { component, wait } from 'jodit/src/core/decorators';
+import { UIElement } from 'jodit/src/ui';
+
+@component()
+class UISomeElement extends UIElement {
+	@wait(() => typeof jQuery !== 'undefined')
+	protected runOnLoadJQuery(html: string): void {
+		jQuery(this.container).html(html);
+		alert('Run');
+	}
+}
+
+const elm = new UISomeElement(jodit);
+elm.runOnLoadJQuery('<h1>One</h1>'); // Do nothing
+// jQuery is loaded
+// alert
+```

package/src/core/decorators/{wait.ts → wait/wait.ts}

@@ -1,16 +1,19 @@
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
- * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
  */
 
-import type { IViewBased, IViewComponent } from '../../types';
-import { error, isFunction, isViewObject } from '../helpers';
-import { STATUSES } from '../component';
-
 /**
- * Wrap function in wait wrapper, it will be called after `condition` returns `true`
+ * [[include:core/decorators/wait/README.md]]
+ * @packageDocumentation
+ * @module decorators/wait
  */
+
+import type { IViewBased, IViewComponent } from '../../../types';
+import { error, isFunction, isViewObject } from '../../helpers';
+import { STATUSES } from '../../component';
+
 export function wait<T extends IViewBased>(
 	condition: (ctx: T) => boolean
 ): Function;

package/src/core/decorators/watch/README.md

@@ -0,0 +1,125 @@
+The decorator allows you to hang handlers on changes to the internal fields of the component,
+as well as on any events [[EventEmitter]]
+
+For example, we will make a reactive component that will change its color when its field changes:
+
+```ts
+import { component, watch, hook } from 'jodit/src/core/decorators';
+import { UIElement } from 'jodit/src/ui';
+
+@component()
+class UISomeReactElement extends UIElement {
+	state = {
+		color: 'red'
+	}
+
+	render(): string {
+		return `<div>
+			This text must be colored
+		</div>`
+	}
+
+	@hook('ready')
+	@watch('state.color')
+	onChangeColor(): void {
+	  this.container.style.color = this.state.color;
+	}
+}
+
+const elm = new UISomeReactElement(jodit);
+elm.state.color = 'yellow';
+```
+
+The decorator can also be used to hang event handlers [[EventEmitter]]
+
+Then the call signature has its own syntax:
+- `:{EVENT}`
+- `{CONTEXT}:{EVENT}`
+- `{CONTEXT}:{EVENT.NAMESPACE}`
+
+For example, this is how you can hang a click handler on the component container:
+
+```ts
+@component()
+class UIButtonElement extends UIElement {
+	state = {
+		counter: 0
+	}
+
+	render(): string {
+		return `<button>text</button>`
+	}
+
+	@watch('container:click') // Same this.j.e(this.container, 'click', this.onClick.bind(this))
+	onClick(): void {
+		this.state.counter++;
+	}
+
+	@watch('state.counter')
+	onClick(): void {
+		this.container.innerText = `Clicked ` + this.state.counter
+	}
+}
+```
+
+The context can be specified as a path to an object, and even as the name of a BEM interface element
+
+```ts
+@component()
+class UICard extends UIElement {
+	state = {
+		counter: 0
+	}
+
+	render(): string {
+		return `<div>
+		  Clicked <span class="&__counter"></span>
+		  <button class="&__card-button">Click</button>
+		</div>`
+	}
+
+	@watch('card-button:click') // As this.j.e.on(this.getElm('card-button'), 'click', this.onClick.bind(this))
+	onClick(): void {
+		this.state.counter++;
+	}
+
+	@watch('jodit.editor:focus') // As this.j.e.on(this.j.editor, 'focus', this.onJoditEditorFocus.bind(this))
+	onJoditEditorFocus(): void {
+		alert('Focused')
+	}
+
+	@watch(':afterSetMode') // As this.j.e.on('afterSetMode', this.onAfterSetMode.bind(this))
+	onAfterSetMode(): void {
+		alert(this.jodit.mode)
+	}
+
+	@watch('state.counter')
+	onClick(): void {
+		this.getElm('counter').innerText = this.state.counter
+	}
+}
+```
+
+Also, the context can be set differently by setting it as the second parameter,
+or by setting the function as the second parameter that will return the context
+
+```ts
+@component()
+class UICardExt extends UICard {
+	@watch(':click', (ctx) => ctx.getElm('card-button')) // As this.j.e.on(this.getElm('card-button'), 'click', this.onClick.bind(this))
+	onClick(): void {
+		this.state.counter++;
+	}
+}
+```
+
+The first argument can be an array:
+```ts
+@component()
+class UICardExt extends UICard {
+	@watch(['card-button:click','card-button:mouseup','card-button:mousedown'])
+	onMouseEvents(e): void {
+		e.preventDefault();
+	}
+}
+```

package/src/core/decorators/{watch.ts → watch/watch.ts}

@@ -1,7 +1,13 @@
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
  * Released under MIT see LICENSE.txt in the project root for license information.
- * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ * Copyright (c) 2013-2022 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
+ */
+
+/**
+ * [[include:core/decorators/watch/README.md]]
+ * @packageDocumentation
+ * @module decorators/watch
  */
 
 import type {
@@ -10,16 +16,12 @@ import type {
 	IComponent,
 	IDictionary,
 	IViewComponent
-} from '../../types';
-import {
-	error,
-	isFunction,
-	isPlainObject,
-	isViewObject,
-	splitArray
-} from '../helpers';
-import { ObserveObject } from '../events';
-import { STATUSES } from '../component';
+} from '../../../types';
+import { isFunction, isPlainObject, isViewObject } from '../../helpers/checker';
+import { ObservableObject } from '../../event-emitter';
+import { STATUSES } from '../../component';
+import { splitArray } from '../../helpers/array/split-array';
+import { error } from '../../helpers/utils/error';
 
 export function getPropertyDescriptor(
 	obj: unknown,
@@ -94,10 +96,10 @@ export function watch(
 
 				let value: any = component[key];
 
-				if (value instanceof ObserveObject) {
+				if (value instanceof ObservableObject) {
 					value.on(`change.${field}`, callback);
 				} else if (isPlainObject(value) && parts.length > 1) {
-					const observe = ObserveObject.create(value, [key]);
+					const observe = ObservableObject.create(value, [key]);
 					observe.on(`change.${field}`, callback);
 					(component as any)[key] = observe;
 				} else {
@@ -118,7 +120,7 @@ export function watch(
 							}
 
 							if (isPlainObject(value)) {
-								value = ObserveObject.create(value, [key]);
+								value = ObservableObject.create(value, [key]);
 								value.on('change.' + field, callback);
 							}
 

package/src/core/dom/README.md

@@ -0,0 +1,13 @@
+A module for working with the DOM. All of its methods are static.
+For example, you can insert an element in front of another element:
+
+```js
+import { Dom } from "jodit/src/core/dom";
+
+const elm = document.getElementById('root');
+const div = document.createElement('div');
+
+Dom.before(elm, div);
+```
+
+The rest of the methods can be found in the [[Dom | documentation]]