Watch for something decorator

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:

import { component, watch, hook } from 'jodit/core/decorators';
import { UIElement } from 'jodit/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:

@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

@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

@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:

@component
class UICardExt extends UICard {
	@watch([
		'card-button:click',
		'card-button:mouseup',
		'card-button:mousedown'
	])
	onMouseEvents(e): void {
		e.preventDefault();
	}
}