jodit 3.13.4 → 3.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jodit",
-	"version": "3.13.4",
+	"version": "3.14.2",
 	"description": "Jodit is awesome and usefully wysiwyg editor with filebrowser",
 	"main": "build/jodit.min.js",
 	"types": "./types/index.d.ts",
@@ -57,32 +57,32 @@
 	"homepage": "https://xdsoft.net/jodit/",
 	"dependencies": {
 		"autobind-decorator": "^2.4.0",
-		"core-js": "^3.21.0"
+		"core-js": "^3.21.1"
 	},
 	"devDependencies": {
 		"@types/ace": "^0.0.48",
-		"@types/node": "^17.0.15",
-		"@typescript-eslint/eslint-plugin": "^5.10.2",
-		"@typescript-eslint/parser": "^5.10.2",
+		"@types/node": "^17.0.18",
+		"@typescript-eslint/eslint-plugin": "^5.12.0",
+		"@typescript-eslint/parser": "^5.12.0",
 		"autoprefixer": "^10.4.2",
-		"axios": "^0.25.0",
+		"axios": "^0.26.0",
 		"chai": "^4.3.6",
 		"classlist-polyfill": "^1.2.0",
 		"compression": "^1.7.4",
 		"cross-env": "^7.0.3",
 		"css-loader": "^6.6.0",
 		"css-minimizer-webpack-plugin": "^3.4.1",
-		"cssnano-preset-advanced": "^5.1.11",
+		"cssnano-preset-advanced": "^5.1.12",
 		"es6-promise": "^4.2.8",
-		"eslint": "^8.8.0",
-		"eslint-config-prettier": "^8.3.0",
+		"eslint": "^8.9.0",
+		"eslint-config-prettier": "^8.4.0",
 		"eslint-plugin-header": "^3.1.1",
 		"eslint-plugin-prettier": "^4.0.0",
 		"eslint-plugin-tsdoc": "^0.2.14",
-		"express": "^4.17.2",
+		"express": "^4.17.3",
 		"file-loader": "^6.2.0",
 		"husky": "^7.0.4",
-		"karma": "^6.3.15",
+		"karma": "^6.3.16",
 		"karma-chai": "^0.1.0",
 		"karma-chrome-launcher": "^3.1.0",
 		"karma-firefox-launcher": "^2.1.2",
@@ -91,10 +91,10 @@
 		"karma-webpack": "^5.0.0",
 		"less": "^4.1.2",
 		"less-loader": "^10.2.0",
-		"lint-staged": "^12.3.3",
+		"lint-staged": "^12.3.4",
 		"merge-stream": "^2.0.0",
 		"mini-css-extract-plugin": "^2.5.3",
-		"mocha": "^9.2.0",
+		"mocha": "^9.2.1",
 		"open": "^8.4.0",
 		"postcss": ">=8.4.6",
 		"postcss-css-variables": "^0.18.0",
@@ -103,10 +103,10 @@
 		"prettier": "^2.5.1",
 		"raw-loader": "^4.0.2",
 		"style-loader": "^3.3.1",
-		"stylelint": "^14.3.0",
+		"stylelint": "^14.5.1",
 		"stylelint-config-idiomatic-order": "v8.1.0",
 		"stylelint-config-prettier": "^9.0.3",
-		"stylelint-config-standard": "^24.0.0",
+		"stylelint-config-standard": "^25.0.0",
 		"stylelint-prettier": "^2.0.0",
 		"synchronous-promise": "^2.0.15",
 		"terser-webpack-plugin": "^5.3.1",
@@ -115,7 +115,7 @@
 		"tslib": "^2.3.1",
 		"typescript": "^4.5.5",
 		"url-loader": "^4.1.1",
-		"webpack": "^5.68.0",
+		"webpack": "^5.69.1",
 		"webpack-cli": "^4.9.2",
 		"webpack-dev-middleware": "^5.3.1",
 		"webpack-dev-server": "^4.7.4",

package/src/README.md

@@ -6,6 +6,7 @@ The editor is initialized on a DOM element. It must already exist on the page:
 ```js
 Jodit.make('#editor');
 ```
+
 You can also set a DOM element right away.
 
 ```js
@@ -17,14 +18,14 @@ The [[Jodit.make]] method returns an instance of [[Jodit]].
 
 ```js
 const jodit = Jodit.make('#editor');
-console.log(jodit.isReady)
+console.log(jodit.isReady);
 ```
 
 This is almost equivalent to
 
 ```js
 const jodit = new Jodit('#editor');
-console.log(jodit.isReady)
+console.log(jodit.isReady);
 ```
 
 > But the `make` method is preferable.
@@ -41,15 +42,15 @@ Jodit instance has a module [[EventEmitter]]
 
 ```js
 const jodit = Jodit.make('#editor');
-jodit.events.on('keydown', (e) => {
-	console.log(e.key)
-})
+jodit.events.on('keydown', e => {
+	console.log(e.key);
+});
 ```
 
 And the [[Select]] module, which allows you to manipulate the content of the editor through HTML insertion
 
 ```js
 const jodit = Jodit.make('#editor');
-jodit.s.focus()
-jodit.s.insertHTML('<p>test</p>')
+jodit.s.focus();
+jodit.s.insertHTML('<p>test</p>');
 ```

package/src/config.ts

@@ -46,20 +46,6 @@ export class Config implements IViewOptions {
 	 */
 	safePluginsList: string[] = ['about', 'enter', 'backspace'];
 
-	/**
-	 * When this option is enabled, the editor's content will be placed in an iframe and isolated from the rest of the page.
-	 *
-	 * @example
-	 * ```javascript
-	 * new Jodit('#editor', {
-	 *    iframe = true;
-	 *    iframeStyle = 'html{margin: 0px;}body{padding:10px;background:transparent;color:#000;position:relative;z-index:2;\
-	 *    user-select:auto;margin:0px;overflow:hidden;}body:after{content:"";clear:both;display:block}';
-	 * });
-	 * ```
-	 */
-	iframe: boolean = false;
-
 	commandToHotkeys!: IDictionary<string | string[]>;
 
 	license: string = '';
@@ -653,18 +639,10 @@ export class Config implements IViewOptions {
 			group: 'list',
 			buttons: []
 		},
-		{
-			group: 'indent',
-			buttons: []
-		},
 		{
 			group: 'font',
 			buttons: []
 		},
-		{
-			group: 'color',
-			buttons: []
-		},
 		'---',
 		{
 			group: 'script',
@@ -687,6 +665,14 @@ export class Config implements IViewOptions {
 			group: 'insert',
 			buttons: []
 		},
+		{
+			group: 'indent',
+			buttons: []
+		},
+		{
+			group: 'color',
+			buttons: []
+		},
 		{
 			group: 'form',
 			buttons: []
@@ -727,15 +713,16 @@ export class Config implements IViewOptions {
 		'|',
 		'font',
 		'fontsize',
-		'brush',
-		'paragraph',
-		'align',
 		'---',
 		'image',
 		'table',
 		'|',
 		'link',
 		'\n',
+		'brush',
+		'paragraph',
+		'align',
+		'|',
 		'hr',
 		'copyformat',
 		'fullsize',
@@ -785,12 +772,17 @@ export class Config implements IViewOptions {
 		'brush',
 		'paragraph',
 		'eraser',
+		'|',
+		'fontsize',
 		'---',
 		'image',
 		'\n',
 		'align',
 		'undo',
 		'redo',
+		'|',
+		'link',
+		'table',
 		'---',
 		'dots'
 	];

package/src/core/component/README.md

@@ -4,90 +4,91 @@ Such elements have a name
 
 ```js
 const jodit = Jodit.male('#editor');
-console.log(jodit.componentName)
-console.log(jodit.statusbar.componentName)
-console.log(jodit.filebrowser.componentName)
-console.log(jodit.uploader.componentName)
+console.log(jodit.componentName);
+console.log(jodit.statusbar.componentName);
+console.log(jodit.filebrowser.componentName);
+console.log(jodit.uploader.componentName);
 ```
 
 And also each component has its current [[STATUSES | status]]:
 
 ```js
 const jodit = Jodit.male('#editor');
-console.log(jodit.componentStatus)
+console.log(jodit.componentStatus);
 ```
 
 You can work on changes in the status of a component through the decorator [[decorators/hook]]
 either through the method [[Component.hookStatus]]
 
 ```ts
-import { Component } from 'jodit/src/core/component'
+import { Component } from 'jodit/src/core/component';
 
 export class SomeComponent extends Component {}
 const cmp = new SomeComponent();
 
 cmp.hookStatus('ready', () => {
-	console.log('Hello world on ready = )')
-})
+	console.log('Hello world on ready = )');
+});
 ```
 
 To set the status, it is enough to call the method [[Component.setStatus]]
 
 ```ts
-import { Component } from 'jodit/src/core/component'
+import { Component } from 'jodit/src/core/component';
 
 export class SomeComponent extends Component {}
 const cmp = new SomeComponent();
-cmp.setStatus('ready')
+cmp.setStatus('ready');
 ```
 
 The component itself can automatically set the ready status:
 
 ```ts
-import type { IJodit } from 'jodit/src/types'
-import { Component } from 'jodit/src/core/component'
+import type { IJodit } from 'jodit/src/types';
+import { Component } from 'jodit/src/core/component';
 
 export class SomeComponent extends Component {
-  constructor(jodit: IJodit) {
-    super(jodit);
-    cmp.setStatus('ready')
-  }
+	constructor(jodit: IJodit) {
+		super(jodit);
+		cmp.setStatus('ready');
+	}
 }
 
 const cmp = new SomeComponent();
-console.log(cmp.isReady)
+console.log(cmp.isReady);
 ```
+
 But it’s better not to do this, because with inheritance, such a component will be “ready” ahead of time:
 
 ```ts
-import type { IJodit, IStatusBar } from 'jodit/src/types'
-import { Component } from 'jodit/src/core/component'
+import type { IJodit, IStatusBar } from 'jodit/src/types';
+import { Component } from 'jodit/src/core/component';
 import { StatusBar } from 'jodit/src/modules';
 
 export class SomeComponent extends Component {
-  constructor(jodit: IJodit) {
-    super(jodit);
-    cmp.setStatus('ready')
-  }
+	constructor(jodit: IJodit) {
+		super(jodit);
+		cmp.setStatus('ready');
+	}
 }
 
 export class SomeAnotherComponent extends SomeComponent {
-  public status: IStatusBar;
-
-  constructor(jodit: IJodit) {
-    super(jodit);
-	  console.log(this.isReady) // true
-    // Errors are possible here, since the status of the component is already 'ready' but you have not yet initialized its fields
-    this.status = new StatusBar(jodit)
-  }
+	public status: IStatusBar;
+
+	constructor(jodit: IJodit) {
+		super(jodit);
+		console.log(this.isReady); // true
+		// Errors are possible here, since the status of the component is already 'ready' but you have not yet initialized its fields
+		this.status = new StatusBar(jodit);
+	}
 }
 ```
 
 Therefore, it is better to use a decorator [[core/decorators/component]]
 
 ```ts
-import type { IJodit, IStatusBar } from 'jodit/src/types'
-import { Component } from 'jodit/src/core/component'
+import type { IJodit, IStatusBar } from 'jodit/src/types';
+import { Component } from 'jodit/src/core/component';
 import { StatusBar } from 'jodit/src/modules';
 import { component } from 'jodit/src/core/decorators';
 
@@ -96,15 +97,15 @@ export class SomeComponent extends Component {}
 
 @component()
 export class SomeAnotherComponent extends SomeComponent {
-  public status: IStatusBar;
+	public status: IStatusBar;
 
-  constructor(jodit: IJodit) {
-    super(jodit);
-	  console.log(this.isReady) // false
-    this.status = new StatusBar(jodit)
-  }
+	constructor(jodit: IJodit) {
+		super(jodit);
+		console.log(this.isReady); // false
+		this.status = new StatusBar(jodit);
+	}
 }
 
 const cmp = new SomeAnotherComponent();
-console.log(cmp.isReady) // true
+console.log(cmp.isReady); // true
 ```

package/src/core/create/README.md

@@ -43,10 +43,10 @@ const jodit = Jodit.make('#editor', {
 });
 
 const p = jodit.createInside.element('p');
-console.log(p.style.cssText) // color: red
+console.log(p.style.cssText); // color: red
 
 const a = jodit.createInside.element('a');
-console.log(a.title) // Some title
+console.log(a.title); // Some title
 ```
 
 To create DOM elements from text, you should also use this module:

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

@@ -3,10 +3,10 @@ The decorator allows you to cache the result of executing any method of the UI c
 ```typescript
 @component()
 class UIComponent extends UIElement {
-  @cache()
-  someHeavyMethod(param1, param2) {
-    return someHeaveCalculation(param1, param2);
-  }
+	@cache()
+	someHeavyMethod(param1, param2) {
+		return someHeaveCalculation(param1, param2);
+	}
 }
 
 const elm = new UIComponent(jodit);

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

@@ -7,11 +7,11 @@ All other decorators start their work only when the component is ready to work.
 class UIHeight extends UIElement {
 	public state = {
 		height: 10
-	}
+	};
 
 	@watch('state.height')
 	protected onChangeHeight() {
-		this.container.style.height = this.state.height + 'px'
+		this.container.style.height = this.state.height + 'px';
 	}
 }
 
@@ -20,16 +20,16 @@ class UIWidth extends UIHeight {
 	public state = {
 		height: 10,
 		width: 10
-	}
+	};
 
 	@watch('state.width')
 	protected onChangeWidth() {
-		this.container.style.width = this.state.width + 'px'
+		this.container.style.width = this.state.width + 'px';
 	}
 
 	constructor(jodit: IJodit) {
 		super(jodit);
-		console.log(this.componentStatus) // beforeReady
+		console.log(this.componentStatus); // beforeReady
 	}
 }
 
@@ -39,11 +39,12 @@ 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: {},
-	}
+		data: {}
+	};
 
 	@watch('state.data')
 	protected onChangeWidth() {
@@ -52,14 +53,14 @@ class UIData extends UIElement {
 
 	@hook('ready')
 	protected onReady() {
-		alert("I'm ready")
+		alert("I'm ready");
 	}
 }
 
 const elm = new UIData(jodit);
 
-fetch('index.php').then((resp) => {
+fetch('index.php').then(resp => {
 	elm.state.data = resp.json();
-	elm.setStatus('ready')
-})
+	elm.setStatus('ready');
+});
 ```

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

@@ -11,18 +11,18 @@ import { UIElement } from 'jodit/src/ui';
 class UISomeReactElement extends UIElement {
 	state = {
 		color: 'red'
-	}
+	};
 
 	render(): string {
 		return `<div>
 			This text must be colored
-		</div>`
+		</div>`;
 	}
 
 	@hook('ready')
 	@watch('state.color')
 	onChangeColor(): void {
-	  this.container.style.color = this.state.color;
+		this.container.style.color = this.state.color;
 	}
 }
 
@@ -33,9 +33,10 @@ 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}`
+
+-   `:{EVENT}`
+-   `{CONTEXT}:{EVENT}`
+-   `{CONTEXT}:{EVENT.NAMESPACE}`
 
 For example, this is how you can hang a click handler on the component container:
 
@@ -44,10 +45,10 @@ For example, this is how you can hang a click handler on the component container
 class UIButtonElement extends UIElement {
 	state = {
 		counter: 0
-	}
+	};
 
 	render(): string {
-		return `<button>text</button>`
+		return `<button>text</button>`;
 	}
 
 	@watch('container:click') // Same this.j.e(this.container, 'click', this.onClick.bind(this))
@@ -57,7 +58,7 @@ class UIButtonElement extends UIElement {
 
 	@watch('state.counter')
 	onClick(): void {
-		this.container.innerText = `Clicked ` + this.state.counter
+		this.container.innerText = `Clicked ` + this.state.counter;
 	}
 }
 ```
@@ -69,13 +70,13 @@ The context can be specified as a path to an object, and even as the name of a B
 class UICard extends UIElement {
 	state = {
 		counter: 0
-	}
+	};
 
 	render(): string {
 		return `<div>
 		  Clicked <span class="&__counter"></span>
 		  <button class="&__card-button">Click</button>
-		</div>`
+		</div>`;
 	}
 
 	@watch('card-button:click') // As this.j.e.on(this.getElm('card-button'), 'click', this.onClick.bind(this))
@@ -85,17 +86,17 @@ class UICard extends UIElement {
 
 	@watch('jodit.editor:focus') // As this.j.e.on(this.j.editor, 'focus', this.onJoditEditorFocus.bind(this))
 	onJoditEditorFocus(): void {
-		alert('Focused')
+		alert('Focused');
 	}
 
 	@watch(':afterSetMode') // As this.j.e.on('afterSetMode', this.onAfterSetMode.bind(this))
 	onAfterSetMode(): void {
-		alert(this.jodit.mode)
+		alert(this.jodit.mode);
 	}
 
 	@watch('state.counter')
 	onClick(): void {
-		this.getElm('counter').innerText = this.state.counter
+		this.getElm('counter').innerText = this.state.counter;
 	}
 }
 ```
@@ -106,7 +107,7 @@ 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))
+	@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++;
 	}
@@ -114,10 +115,15 @@ class UICardExt extends UICard {
 ```
 
 The first argument can be an array:
+
 ```ts
 @component()
 class UICardExt extends UICard {
-	@watch(['card-button:click','card-button:mouseup','card-button:mousedown'])
+	@watch([
+		'card-button:click',
+		'card-button:mouseup',
+		'card-button:mousedown'
+	])
 	onMouseEvents(e): void {
 		e.preventDefault();
 	}

package/src/core/dom/README.md

@@ -2,7 +2,7 @@ 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";
+import { Dom } from 'jodit/src/core/dom';
 
 const elm = document.getElementById('root');
 const div = document.createElement('div');

package/src/core/dom/dom.ts

@@ -155,7 +155,7 @@ export class Dom {
 	}
 
 	/**
-	 * Call function for all nodes between `start` and `end`
+	 * Call functions for all nodes between `start` and `end`
 	 */
 	static between(
 		start: Node,

package/src/core/event-emitter/README.md

@@ -2,9 +2,9 @@ This is the heart of Jodit. All processes inside Jodit mostly flow through event
 
 ```js
 const jodit = Jodit.make('#editor');
-jodit.e.on('someEvent', (param) => alert(`Some event fired for ${param}!!!`));
+jodit.e.on('someEvent', param => alert(`Some event fired for ${param}!!!`));
 jodit.async.setTimeout(() => {
-  jodit.e.fire('someEvent', 'you');
+	jodit.e.fire('someEvent', 'you');
 }, 1000);
 ```
 
@@ -18,22 +18,22 @@ If you don't want to listen to the event anymore, you can unsubscribe from it:
 
 ```js
 jodit.e
-  .one('someEvent', (param) => alert(`Some event fired for ${param}!!!`))
-  .one('someEvent', (param) => alert(`Some event fired for ${param}!!!`))
-  .one('someEvent', (param) => alert(`Some event fired for ${param}!!!`));
+	.one('someEvent', param => alert(`Some event fired for ${param}!!!`))
+	.one('someEvent', param => alert(`Some event fired for ${param}!!!`))
+	.one('someEvent', param => alert(`Some event fired for ${param}!!!`));
 
-jodit.e.off('someEvent') // will unsubscribe from all handlers
+jodit.e.off('someEvent'); // will unsubscribe from all handlers
 ```
 
 ```js
-const handler1 = (param) => alert(`Some event fired for ${param}!!!`);
-const handler2 = (param) => alert(`Some event fired for ${param}!!!`);
-const handler3 = (param) => alert(`Some event fired for ${param}!!!`);
+const handler1 = param => alert(`Some event fired for ${param}!!!`);
+const handler2 = param => alert(`Some event fired for ${param}!!!`);
+const handler3 = param => alert(`Some event fired for ${param}!!!`);
 
 jodit.e
-  .one('someEvent', handler1)
-  .one('someEvent', handler2)
-  .one('someEvent', handler3);
+	.one('someEvent', handler1)
+	.one('someEvent', handler2)
+	.one('someEvent', handler3);
 
-jodit.e.off('someEvent', handler1) // only handler1 will unsubscribe
+jodit.e.off('someEvent', handler1); // only handler1 will unsubscribe
 ```