jodit 3.12.3 → 3.13.2

package/src/core/ui/button/group/group.ts

@@ -15,10 +15,11 @@ import type {
 	IUIButton,
 	IUIOption,
 	IViewBased
-} from '../../../../types';
+} from 'jodit/types';
 import { UIGroup } from '../../group';
-import { component } from '../../../decorators';
+import { component } from 'jodit/core/decorators';
 import { UIButton } from '../button/button';
+import { assert } from 'jodit/core/helpers';
 
 @component
 export class UIButtonGroup extends UIGroup {
@@ -41,7 +42,9 @@ export class UIButtonGroup extends UIGroup {
 	protected override appendChildToContainer(
 		childContainer: HTMLElement
 	): void {
-		this.getElm('options').appendChild(childContainer);
+		const options = this.getElm('options');
+		assert(options != null, 'Options does not exist');
+		options.appendChild(childContainer);
 	}
 
 	constructor(

package/src/core/ui/element.ts

@@ -12,13 +12,14 @@ import type {
 	IDictionary,
 	IUIElement,
 	IViewBased,
-	Nullable
-} from '../../types';
-import { ViewComponent } from '../component';
-import { Dom } from '../dom';
-import { Elms, Mods } from '../traits';
-import { isString } from '../helpers';
-import { Icon } from './icon';
+	Nullable,
+	ModType
+} from 'jodit/types';
+import { ViewComponent } from 'jodit/core/component';
+import { Dom } from 'jodit/core/dom';
+import { Elms, Mods } from 'jodit/core/traits';
+import { isString } from 'jodit/core/helpers';
+import { Icon } from 'jodit/core/ui/icon';
 
 export abstract class UIElement<T extends IViewBased = IViewBased>
 	extends ViewComponent<T>
@@ -67,8 +68,7 @@ export abstract class UIElement<T extends IViewBased = IViewBased>
 	/**
 	 * Find match parent
 	 */
-	// tslint:disable-next-line:ban-types
-	closest<T extends IUIElement>(type: Function | IUIElement): Nullable<T> {
+	closest<T extends IUIElement>(type: Function | T): Nullable<T> {
 		const c =
 			typeof type === 'object'
 				? (pe: IUIElement) => pe === type
@@ -115,7 +115,7 @@ export abstract class UIElement<T extends IViewBased = IViewBased>
 	/** @see [[Mods.setMod]] */
 	setMod(
 		name: string,
-		value: string | boolean | null,
+		value: ModType,
 		container: HTMLElement = this.container
 	): this {
 		Mods.setMod.call(this, name, value, container);
@@ -123,12 +123,12 @@ export abstract class UIElement<T extends IViewBased = IViewBased>
 	}
 
 	/** @see [[Mods.getMod]] */
-	getMod(name: string): string | boolean | null {
+	getMod(name: string): ModType {
 		return Mods.getMod.call(this, name);
 	}
 
 	/** @see [[Elms.getElm]]*/
-	getElm(elementName: string): HTMLElement {
+	getElm(elementName: string): Nullable<HTMLElement> {
 		return Elms.getElm.call(this, elementName);
 	}
 

package/src/core/ui/form/block/block.ts

@@ -10,10 +10,10 @@
 
 import './block.less';
 
-import type { IUIElement, IViewBased } from '../../../../types';
-import { UIGroup } from '../../group';
-import { attr } from '../../../helpers/utils';
-import { component } from '../../../decorators';
+import type { IUIElement, IViewBased } from 'jodit/types';
+import { UIGroup } from 'jodit/core/ui/group';
+import { attr } from 'jodit/core/helpers/utils';
+import { component } from 'jodit/core/decorators';
 
 @component
 export class UIBlock extends UIGroup {

package/src/core/ui/form/form.ts

@@ -10,11 +10,10 @@
  * @module ui/form
  */
 
-import type { IDictionary, IUIForm, IUIInput, IUISelect } from '../../../types';
-import { UIGroup } from '../group';
-import { UIInput, UISelect } from './inputs';
-import { attr } from '../../helpers/utils';
-import { component } from '../../decorators';
+import type { IDictionary, IUIForm, IUIInput, IUISelect } from 'jodit/types';
+import { UIGroup, UIInput, UISelect } from 'jodit/core/ui';
+import { attr } from 'jodit/core/helpers/utils';
+import { component } from 'jodit/core/decorators';
 
 @component
 export class UIForm extends UIGroup implements IUIForm {

package/src/core/ui/form/inputs/area/area.ts

@@ -10,9 +10,9 @@
 
 import './area.less';
 
-import type { IUITextArea, IViewBased } from '../../../../../types';
-import { UIInput } from '../input/input';
-import { component } from '../../../../decorators';
+import type { IUITextArea, IViewBased } from 'jodit/types';
+import { UIInput } from 'jodit/core/ui/form/inputs/input/input';
+import { component } from 'jodit/core/decorators';
 
 @component
 export class UITextArea extends UIInput implements IUITextArea {

package/src/core/ui/form/inputs/checkbox/checkbox.ts

@@ -10,10 +10,10 @@
 
 import './checkbox.less';
 
-import type { IViewBased, IUICheckBox } from '../../../../../types';
-import { UIInput } from '../input/input';
-import { component, watch, hook } from '../../../../decorators';
-import { Dom } from '../../../../dom';
+import type { IViewBased, IUICheckBox } from 'jodit/types';
+import { UIInput } from 'jodit/core/ui/form/inputs/input/input';
+import { component, watch, hook } from 'jodit/core/decorators';
+import { Dom } from 'jodit/core/dom';
 
 @component
 export class UICheckbox extends UIInput implements IUICheckBox {
@@ -64,7 +64,7 @@ export class UICheckbox extends UIInput implements IUICheckBox {
 	protected onChangeSwitch(): void {
 		this.setMod('switch', this.state.switch);
 
-		let slider: HTMLElement | null = this.getElm('switch-slider');
+		let slider = this.getElm('switch-slider');
 
 		if (this.state.switch) {
 			if (!slider) {

package/src/core/ui/form/inputs/file/file.ts

@@ -10,10 +10,10 @@
 
 import './file.less';
 
-import type { IUIButton, IUIInput, IViewBased } from '../../../../../types';
-import { UIInput } from '../input/input';
-import { component } from '../../../../decorators';
-import { UIButton } from '../../../button';
+import type { IUIButton, IUIInput, IViewBased } from 'jodit/types';
+import { UIInput } from 'jodit/core/ui/form/inputs/input/input';
+import { component } from 'jodit/core/decorators';
+import { UIButton } from 'jodit/core/ui/button';
 
 @component
 export class UIFileInput extends UIInput {

package/src/core/ui/form/inputs/input/input.ts

@@ -15,18 +15,18 @@ import type {
 	IUIInput,
 	IUIInputValidator,
 	IViewBased
-} from '../../../../../types';
-import { UIElement } from '../../../element';
-import { attr, toArray } from '../../../../helpers';
-import { Dom } from '../../../../dom';
-import { autobind, component, debounce, watch } from '../../../../decorators';
-import { Icon } from '../../../icon';
-import { inputValidators } from '../../validators';
+} from 'jodit/types';
+import { UIElement } from 'jodit/core/ui/element';
+import { attr, toArray } from 'jodit/core/helpers';
+import { Dom } from 'jodit/core/dom';
+import { autobind, component, debounce, watch } from 'jodit/core/decorators';
+import { Icon } from 'jodit/core/ui/icon';
+import { inputValidators } from 'jodit/core/ui/form/validators';
 
 @component
 export class UIInput extends UIElement implements IUIInput {
 	/** @override */
-	className(): string {
+	override className(): string {
 		return 'UIInput';
 	}
 

package/src/core/ui/form/inputs/select/select.ts

@@ -10,11 +10,14 @@
 
 import './select.less';
 
-import type { IUISelect, IViewBased } from '../../../../../types';
-import { attr } from '../../../../helpers';
-import { component } from '../../../../decorators';
-import { UIInput } from '../input/input';
-import { inputValidators, selectValidators } from '../../validators';
+import type { IUISelect, IViewBased } from 'jodit/types';
+import { attr } from 'jodit/core/helpers';
+import { component } from 'jodit/core/decorators';
+import { UIInput } from 'jodit/core/ui/form/inputs/input/input';
+import {
+	inputValidators,
+	selectValidators
+} from 'jodit/core/ui/form/validators';
 
 @component
 export class UISelect extends UIInput implements IUISelect {

package/src/core/ui/form/validators/input.ts

@@ -8,8 +8,8 @@
  * @module ui/form
  */
 
-import type { IUIInput, IUIInputValidator } from '../../../../types';
-import { isURL, trim } from '../../../helpers';
+import type { IUIInput, IUIInputValidator } from 'jodit/types';
+import { isURL, trim } from 'jodit/core/helpers';
 
 /**
  * Input is required

package/src/core/ui/form/validators/select.ts

@@ -8,8 +8,8 @@
  * @module ui/form
  */
 
-import type { IUIInputValidator } from '../../../../types';
-import { trim } from '../../../helpers';
+import type { IUIInputValidator } from 'jodit/types';
+import { trim } from 'jodit/core/helpers';
 
 /**
  * Select is required

package/src/core/ui/group/group.ts

@@ -17,12 +17,12 @@ import type {
 	IUIElement,
 	IUIGroup,
 	IViewBased
-} from '../../../types';
-import type { IDictionary } from '../../../types';
+} from 'jodit/types';
+import type { IDictionary } from 'jodit/types';
 import { UIElement } from '../element';
-import { component, watch } from '../../decorators';
-import { isArray } from '../../helpers';
-import { Dom } from '../../dom';
+import { component, watch } from 'jodit/core/decorators';
+import { assert, isArray } from 'jodit/core/helpers';
+import { Dom } from 'jodit/core/dom';
 
 @component
 export class UIGroup<T extends IViewBased = IViewBased>
@@ -93,7 +93,9 @@ export class UIGroup<T extends IViewBased = IViewBased>
 		}
 
 		if (distElement) {
-			this.getElm(distElement).appendChild(elm.container);
+			const distElm = this.getElm(distElement);
+			assert(distElm != null, 'Element does not exist');
+			distElm.appendChild(elm.container);
 		} else {
 			this.appendChildToContainer(elm.container);
 		}

package/src/core/ui/group/list.less

@@ -39,7 +39,7 @@
 	padding: 0;
 	border-right: 1px solid var(--color-border);
 	border-left: 0;
-	margin: 2px 2px;
+	margin: 2px;
 	cursor: default;
 }
 

package/src/core/ui/group/list.ts

@@ -19,17 +19,16 @@ import type {
 	IViewBased,
 	Nullable,
 	ButtonsOption
-} from '../../../types';
-
-import { UIButton } from '../button';
-import { getStrongControlTypes } from '../helpers/get-strong-control-types';
-import { component, watch } from '../../decorators';
-import { UIGroup } from './group';
-import { UISpacer } from './spacer';
-import { UISeparator } from './separator';
-import { isButtonGroup } from '../helpers/buttons';
-import { getControlType } from '../helpers/get-control-type';
-import { splitArray } from '../../helpers';
+} from 'jodit/types';
+import { getStrongControlTypes } from 'jodit/core/ui/helpers/get-strong-control-types';
+import { component, watch } from 'jodit/core/decorators';
+import { UIGroup } from 'jodit/core/ui/group/group';
+import { UISeparator } from 'jodit/core/ui/group/separator';
+import { UISpacer } from 'jodit/core/ui/group/spacer';
+import { UIButton } from 'jodit/core/ui/button/button/button';
+import { isButtonGroup } from 'jodit/core/ui/helpers/buttons';
+import { getControlType } from 'jodit/core/ui/helpers/get-control-type';
+import { splitArray } from 'jodit/core/helpers/array';
 
 @component
 export class UIList<T extends IViewBased = IViewBased>
@@ -165,6 +164,11 @@ export class UIList<T extends IViewBased = IViewBased>
 						.forEach(addButton);
 				}
 			} else {
+				if (!group) {
+					group = this.makeGroup();
+					line.append(group);
+				}
+
 				const control = getControlType(item, this.j.o.controls);
 				isNotRemoved(control) && addButton(control);
 			}

package/src/core/ui/group/separator.ts

@@ -8,13 +8,12 @@
  * @module ui/group
  */
 
-import { UIElement } from '../element';
-import { component } from '../../decorators';
+import { UIElement } from 'jodit/core/ui/element';
+import { component } from 'jodit/core/decorators';
 
 @component
 export class UISeparator extends UIElement {
-	/** @override */
-	className(): string {
+	override className(): string {
 		return 'UISeparator';
 	}
 }

package/src/core/ui/group/spacer.ts

@@ -8,12 +8,12 @@
  * @module ui/group
  */
 
-import { UIElement } from '../element';
-import { component } from '../../decorators';
+import { UIElement } from 'jodit/core/ui';
+import { component } from 'jodit/core/decorators';
 
 @component
 export class UISpacer extends UIElement {
-	className(): string {
+	override className(): string {
 		return 'UISpacer';
 	}
 }

package/src/core/ui/helpers/buttons.ts

@@ -14,8 +14,8 @@ import type {
 	ButtonsGroups,
 	IControlType,
 	IJodit
-} from '../../../types';
-import { isArray } from '../../helpers/checker';
+} from 'jodit/types';
+import { isArray } from 'jodit/core/helpers/checker';
 
 export const isButtonGroup = (
 	item: ButtonsGroup | string | IControlType

package/src/core/ui/helpers/get-control-type.ts

@@ -14,9 +14,9 @@ import type {
 	IControlType,
 	IControlTypeStrong,
 	IDictionary
-} from '../../../types';
-import { ConfigFlatten, isString } from '../../helpers';
-import { Config } from '../../../config';
+} from 'jodit/types';
+import { ConfigFlatten, isString } from 'jodit/core/helpers';
+import { Config } from 'jodit/config';
 
 /**
  * Get control for button name

package/src/core/ui/helpers/get-strong-control-types.ts

@@ -13,11 +13,11 @@ import type {
 	Controls,
 	IControlTypeStrong,
 	IDictionary
-} from '../../../types';
+} from 'jodit/types';
 import { getControlType } from './get-control-type';
-import { Config } from '../../../config';
-import { isArray } from '../../helpers/checker';
-import { ConfigProto, keys } from '../../helpers';
+import { Config } from 'jodit/config';
+import { isArray } from 'jodit/core/helpers/checker';
+import { ConfigProto, keys } from 'jodit/core/helpers';
 
 export function getStrongControlTypes(
 	items: Buttons | IDictionary<string>,

package/src/core/ui/icon.ts

@@ -13,8 +13,8 @@ import type {
 	IDictionary,
 	IUIIconState,
 	IViewBased
-} from '../../types';
-import { css } from '../helpers';
+} from 'jodit/types';
+import { css } from 'jodit/core/helpers';
 
 export class Icon {
 	private static icons: IDictionary<string> = {};

package/src/core/ui/popup/popup.ts

@@ -22,8 +22,8 @@ import type {
 	IViewBased,
 	Nullable,
 	PopupStrategy
-} from '../../../types';
-import { Dom } from '../../dom';
+} from 'jodit/types';
+import { Dom } from 'jodit/core/dom';
 import {
 	attr,
 	css,
@@ -33,10 +33,10 @@ import {
 	markOwner,
 	position,
 	ucfirst
-} from '../../helpers';
-import { eventEmitter, getContainer } from '../../global';
-import { UIElement } from '../element';
-import { autobind, throttle } from '../../decorators';
+} from 'jodit/core/helpers';
+import { eventEmitter, getContainer } from 'jodit/core/global';
+import { UIElement } from 'jodit/core/ui';
+import { autobind, throttle } from 'jodit/core/decorators';
 
 type getBoundFunc = () => IBound;
 
@@ -370,7 +370,7 @@ export class Popup extends UIElement implements IPopup {
 		}
 
 		const target =
-			(isFunction(e.composedPath) && e.composedPath()[0]) ?? e.target;
+			(isFunction(e.composedPath) && e.composedPath()[0]) || e.target;
 
 		if (!target) {
 			this.close();

package/src/core/ui/progress-bar/progress-bar.ts

@@ -12,8 +12,8 @@
 
 import './progress-bar.less';
 
-import type { IJodit, IProgressBar } from '../../../types';
-import { Dom } from '../../dom';
+import type { IJodit, IProgressBar } from 'jodit/types';
+import { Dom } from 'jodit/core/dom';
 import { UIElement } from '../element';
 
 export class ProgressBar extends UIElement implements IProgressBar {

package/src/core/view/view-with-toolbar.ts

@@ -18,14 +18,14 @@ import type {
 	IPluginButton,
 	IViewOptions,
 	ButtonsGroups
-} from '../../types';
+} from 'jodit/types';
 import { View } from './view';
-import { isString, resolveElement, splitArray } from '../helpers';
-import { Dom } from '../dom';
-import { makeCollection } from '../../modules/toolbar/factory';
+import { isString, resolveElement, splitArray } from 'jodit/core/helpers';
+import { Dom } from 'jodit/core/dom';
+import { makeCollection } from 'jodit/modules/toolbar/factory';
 import { STATUSES } from '../component';
 import { isButtonGroup } from '../ui/helpers/buttons';
-import { autobind } from '../decorators';
+import { autobind } from 'jodit/core/decorators';
 
 export abstract class ViewWithToolbar extends View implements IViewWithToolbar {
 	TOOLBAR!: IToolbarCollection;

package/src/core/view/view.ts

@@ -21,7 +21,7 @@ import type {
 	Nullable,
 	IDictionary,
 	IEventEmitter
-} from '../../types';
+} from 'jodit/types';
 import { Storage } from '../storage';
 import {
 	camelCase,
@@ -31,8 +31,8 @@ import {
 	isDestructable,
 	isFunction,
 	isVoid
-} from '../helpers';
-import { BASE_PATH } from '../constants';
+} from 'jodit/core/helpers';
+import { BASE_PATH } from 'jodit/core/constants';
 import {
 	Component,
 	STATUSES,
@@ -43,7 +43,7 @@ import {
 } from '../../modules';
 import { Async } from '../async';
 import { modules } from '../global';
-import { hook } from '../decorators';
+import { hook } from 'jodit/core/decorators';
 import { Elms, Mods } from '../traits';
 import { EventEmitter } from '../event-emitter';
 
@@ -53,7 +53,7 @@ export abstract class View extends Component implements IViewBased, Mods, Elms {
 	readonly mods: IDictionary<string | boolean | null> = {};
 
 	/** @see [[Mods.setMod]] */
-	setMod(name: string, value: string | boolean | null): this {
+	setMod(...[name, value]: Parameters<typeof Mods.setMod>): this {
 		Mods.setMod.call(this, name, value);
 		return this;
 	}
@@ -64,7 +64,7 @@ export abstract class View extends Component implements IViewBased, Mods, Elms {
 	}
 
 	/** @see [[Elms.getElm]]*/
-	getElm(elementName: string): HTMLElement {
+	getElm(elementName: string): Nullable<HTMLElement> {
 		return Elms.getElm.call(this, elementName);
 	}
 

package/src/langs/README.md

@@ -1 +1,124 @@
-Jodit internationalization
+Jodit internationalization module.
+
+In order for Jodit to show the interface in your language, you just need to enable it in the settings:
+
+```js
+Jodit.make('#editor', {
+	language: 'ru'
+});
+```
+
+List of available languages:
+
+```
+ar,
+cs_cz,
+de,
+en,
+es,
+fr,
+he,
+hu,
+id,
+it,
+ja,
+ko,
+nl,
+pl,
+pt_br,
+ru,
+tr,
+zh_cn,
+zh_tw
+```
+
+If you do not find your language, then you can create a language file yourself by [copying any of the other languages](https://github.com/xdan/jodit/tree/master/src/langs)
+After that just add its content like a field [[Jodit.langs]]
+
+```js
+// File './somepath/sml.js' - some language
+Jodit.langs.sml = {
+	'Type something': 'Scrivi qualcosa...',
+	Advanced: 'Avanzato',
+	'About Jodit': 'A proposito di Jodit',
+	'Jodit Editor': 'Jodit Editor'
+	// ...
+};
+```
+
+And include this file after Jodit
+
+```html
+<script src="./node_modules/jodit/build/jodit.es2018.min.js"></script>
+<script src="./somepath/sml.js"></script>
+<script>
+	Jodit.make('#editor', {
+		language: 'sml'
+	});
+</script>
+```
+
+If you don't like how `Jodit` has translated one or another part of the app into your native language, you can either [make a Pull Request](https://github.com/xdan/jodit/edit/master/src/langs/ar.js)
+Or redefine the desired string combinations and translate them in your own way:
+
+```js
+Jodit.make('#editor', {
+	language: 'ru',
+	i18n: {
+		ru: {
+			'Type something': 'Введите что-либо тут...'
+		}
+	}
+});
+```
+
+To use internationalization in your own plugin, use the method [[Jodit.i18n]]
+
+```js
+const editor = new Jodit('#redactor', {
+	language: 'ru'
+});
+console.log(editor.i18n('Type something')); //'Введите что-либо тут...'
+```
+
+## UIElement
+
+For convenience, if in the [[UIElement]] descendant in the `render` method, return a string in the format:
+```
+~Some text~
+```
+It will be automatically passed through [[Jodit.i18n]]
+
+For example:
+
+```js
+class UIBox extends Jodit.modules.UIElement {
+	render() {
+		return `<div>
+		    <div class="&__some-element">~Some text~</div>
+		</div>`
+  }
+}
+
+const editor = Jodit.make('#editor', {
+  language: 'en',
+  i18n: {
+    en: {
+      'Some text': 'Another text'
+    }
+  }
+})
+const box = new UIBox(editor);
+console.log(box.container.outerHTML); //<div class="jodit-ui-box"><div class="jodit-ui-box__some-element">Another text</div></div>
+```
+
+It's the same as doing this:
+```js
+class UIBox extends Jodit.modules.UIElement {
+	render() {
+		return `<div>
+		    <div class="&__some-element">${this.jodit.i18n('Some text')}</div>
+		</div>`
+  }
+}
+```