Jodit Versions Save

3.15.3

:boom: Breaking Change

• Observer module renamed to History, accessed via Jodit.history
• Jodit.observer field deprecated and will be removed in future releases
• Changed to history in observer settings. The observer field has been deprecated.
• Removed stack field from History class (former Observer).
• Separated default editor timeout and history.timeout. Now the second setting is just for history. Timeouts for all asynchronous operations in Jodit now apply the defaultTimeout setting

Before:

const editor = Jodit.make({
	observer: {
		timeout: 122,
		maxHistoryLength: 100
	}
});
console.log(editor.defaultTimeout); // 122
editor.observer.stack.clear();

Now:

const editor = Jodit.make({
	defaultTimeout: 122,
	history: {
		timeout: 1000,
		maxHistoryLength: 100
	}
});
console.log(editor.defaultTimeout); // 122
editor.history.clear();

• When adding information to the editor via Jodit.value, the history of changes will be process immediately, without a timeout. Read more https://github.com/xdan/jodit/issues/792

:bug: Bug Fix

• Colors popup closes when I select the secondary tab (Text) #171

:rocket: New Feature

• Plugin for setting line spacing

:bug: Bug Fix

• Previewing data not showing table content #780

:boom: Breaking Change

• ObserveObject removed
• Added observable function which makes object observable. In this case, the function returns the same object.

const obj = {
	a: 1,
	b: {
		c: 5
	}
};

const obsObj = Jodit.modules.observable(obj);
console.log(obj === obsObj); // true
obsObj.on('change', () => {
	console.log('Object changed');
});
obsObj.on('change.a', () => {
	console.log('Key a changed');
});
obsObj.on('change.b.c', () => {
	console.log('Key b.c changed');
});

obj.a = 6;
// Object changed
// Key a changed

obj.b = { c: 6 };
// Object changed

obj.b.c = 8;
// Object changed
// Key b.c changed

:bug: Bug Fix

• Fixed autotest in Chrome on Windows

3.10.2

:boom: Breaking Change

• The hotkeys have been castled in the Delete plugin: Was:

const hotkeys = {
	delete: ['delete', 'cmd+backspace'],
	deleteWord: ['ctrl+delete', 'cmd+alt+backspace', 'ctrl+alt+backspace'],
	backspace: ['backspace'],
	backspaceWord: ['ctrl+backspace']
};

But the setting was called incorrectly, when the combination was pressed, not one word was deleted, but a whole sentence. Now added one more setting:

const hotkeys = {
	delete: ['delete', 'cmd+backspace'],
	deleteWord: ['ctrl+delete', 'cmd+alt+backspace', 'ctrl+alt+backspace'],
	deleteSentence: ['ctrl+shift+delete', 'cmd+shift+delete'],
	backspace: ['backspace'],
	backspaceWord: ['ctrl+backspace'],
	backspaceSentence: ['ctrl+shift+backspace', 'cmd+shift+backspace']
};

:bug: Bug Fix

• fixed sync between WYSIWYG and source editor

:rocket: New Feature

• Feature request: Open the inline toolbar without having to highlight text. #600 Allow open inline toolbar. This feature is implemented on the basis of the inline-popup plugin, a setting has been added to it: popup.toolbar, which lists the buttons that will be shown in such a toolbar. Added the showInline method to the ToolbarEditorCollection itself:

const editor = Jodit.make('#editor', {
	preset: 'inline',
	popup: {
		toolbar: Jodit.atom(['bold', 'italic', 'image'])
	}
});
editor.s.focus();

editor.toolbar.showInline();
// or
editor.e.fire('showInlineToolbar');

Also added ToolbarCollection.hide and ToolbarCollection.show methods.

const editor = Jodit.make('#editor');
editor.toolbar.hide();
editor.toolbar.show();

• Allow use prototype as component name

console.log(Jodit.modules.UIButton.getFullElName('element')); // jodit-ui-button__element
console.log(Jodit.modules.UIButton.componentName); // jodit-ui-button

• Remember last opened folder with FileBrowser #675 Boolean option filebrowser.saveStateInStorage split to dictionary:

interface IFileBrowserOptions: {}
	saveStateInStorage: false | {
		storeLastOpenedFolder?: boolean;
		storeView?: boolean;
		storeSortBy?: boolean;
	};
}

By default:

{
	saveStateInStorage: {
		storeLastOpenedFolder: true,
		storeView: true,
		storeSortBy: true
	}
}

Disable it:

Jodit.make('#editor', {
	filebrowser: {
		saveStateInStorage: false
	}
});

// or

Jodit.make('#editor', {
	filebrowser: {
		saveStateInStorage: {
			storeLastOpenedFolder: false
		}
	}
});

• Spacer in Button Toolbar In addition to the | metacharacters and \n which stand for separator and newline, the --- metacharacter has appeared, which allows you to add a spacer element which pushes all buttons behind the spacer to the right side of the toolbar and creates space in the middle.

Jodit.make('#editor', {
	buttons: [
		'source',
		'bold',
		'|',
		'---',
		'|',
		'brush',
		'about',
		'\n',
		'italic'
	]
});

:boom: Breaking Change

• Removed Travis.CI 👋👋👋
• EventsNative module - renamed to EventEmitter

const editor = Jodit.make('#editor');

console.log(editor.e instanceof Jodit.modules.EventEmitter); // true
console.log(editor.events instanceof Jodit.modules.EventEmitter); // true
console.log(editor.events instanceof Jodit.modules.EventsNative); // true, deprecated

• BOOM: Move Ajax class into request folder.

import { Ajax } from 'jodit/src/core/request';

• Changed the signature of the send method in the Ajax API and is closer to the fetch () API

const editor = Jodit.make('#editor');

// Before
await new Ajax(editor, {
	url: 'index.php'
}).send(); // {success: true, data: ...}

// Now
await new Ajax(editor, {
	url: 'index.php'
})
	.send()˚
	.then(resp => resp.json()); // {success: true, data: ...}

• In .npmignore added:
  • build-system/
  • test.html
  • .eslintrc.js
  • .eslintignore
  • .editorconfig
  • .gitignore
  • .prettierrc.json
  • .stylelintrc
  • app.css
  • composer.json

:rocket: New Feature

In Dom module added nextGen and eachGen methods. These methods return generators:

const editor = Jodit.make('#editor');
editor.value = '<ul><li><img>1</li><li>2</li><li>3</li></ul>';

const gen = Dom.nextGen(editor.editor.querySelector('img'), editor.editor);
let next = gen.next();

while (!next.done) {
	console.log(next.value); // 1, LI, 2, LI, 3
	next = gen.next();
}

const gen2 = Dom.eachGen(editor.editor);
let next2 = gen2.next();

while (!next2.done) {
	console.log(next2.value); // UL, LI, 1, LI, 2, LI, 3
	next2 = gen2.next();
}

:bug: Bug Fix

• Indent doesn't work in table cell #729
• cleanHTML replaceOldTags doesn't seem to do anything #728
• Fixed Resize column table #712
• Font and font size settings are not applied to all text if part of it has been changed earlier #706
• Delete multi rows and colums #690
• When {"enter": "BR"} option is enabled, adding a heading to the text causes it to become wrapped by a "h*" tag #547
• Issue with clear format on

  tags #680

3.8.1

:boom: Breaking Change

• Rename Style to CommitStyle

const editor = Jodit.make('#editor');

const style = new Jodit.ns.CommitStyle({
	style: {
		color: 'red'
	}
});

editor.execCommand('selectall');
style.apply(editor);

• Dom refactoring: from isNode,isElement,isHTMLElement removed Window argument.

Before

const editor = Jodit.make('#editor', { iframe: true });
Dom.isNode({}, editor.ow); // false
Dom.isNode(document.body, window); // true
Dom.isNode(document.body, editor.ow); // true
Dom.isNode(editor.od.body, editor.ow); // true
Dom.isNode(editor.ed.body, editor.ow); // false

Now

const editor = Jodit.make('#editor', { iframe: true });
Dom.isNode({}); // false
Dom.isNode(document.body); // true
Dom.isNode(document.body); // true
Dom.isNode(editor.od.body); // true
Dom.isNode(editor.ed.body); // true

:rocket: New Feature

• Added KeyArrowOutside, allowing to go outside of an inline element if there is no other element after that.
• Dictionary of variable values in css, a complete list can be found here https://github.com/xdan/jodit/blob/master/src/styles/variables.less#L25

  const editor = Jodit.make('#editor', {
  	styleValues: {
  		'color-icon': '#0f0',
  		'color-text': 'red',
  		colorBorder: 'black',
  		'color-panel': 'blue'
  	}
  });
  

:bug: Bug Fix

• Toolbar buttons are not read by screen reader correctly #725
• Bug : table & background color #722
• Video links are not reliably converted to an IFrame. #714
• Eraser delete "" tag! #705

3.6.1

:bug: Bug Fix

• <style> tag wrapping problem #620
• Disable Link Checking #618
• Changing text style undoes text alignment #614
• tag is always wraped

  once when toggle the wysiwyg/source mode #612
• Error when resizing tables and tables cells. #611
• Backspace and Delete have an errant character #597

:rocket: New Feature

• Added classSpan plugin. Applying some className to selected text. Thanks https://github.com/s-renier-taonix-fr

const editor = new Jodit('#editor', {
 	controls: {
 		classSpan: {
 			list: {
 				class1: 'Classe 1',
 				class2: 'Classe 2',
 				class3: 'Classe 3',
 				class4: 'Classe 4',
 				class5: 'Classe 5'
 			}
 		}
 	}
});

• Added UIFileInput element.
• Added UIButtonGroup element.

const group = new UIButtonGroup(jodit, {
	label: 'Theme',
	name: 'theme',
	value: this.state.theme,
	radio: true,
	options: [
		{ value: 'default', text: 'Light' },
		{ value: 'dark', text: 'Dark' }
	],
	onChange: (values) => {
		this.state.theme = values[0].value as string;
	}
}),

:house: Internal

• Enabled "importsNotUsedAsValues": "error" in tsconfig
• Refactoring Filebrowser module
• Refactoring Dialog module
• Added "stylelint-config-idiomatic-order" in style linter
• Added "en" bundle without another languages.
• Replaced Config system. You can change default setting in you extensions.

// before
const a = new Jodit();
a.options.allowResizeY; // true
Jodit.defaultOptions.allowResizeY = false;
a.options.allowResizeY; // true

// Now
const a = new Jodit();
a.options.allowResizeY; // true
Jodit.defaultOptions.allowResizeY = false;
a.options.allowResizeY; // false

• Added promisify mode in debounce and throttle decorators.
• Removed src/core/ui/form/validators/key-validator.ts.
• Added Async.requestIdlePromise method.
• Removed Helpers.extend method.
• Added Helpers.loadImage method.
• Changed render method in state/ui system.

// Before
@component()
class UIBtn extends UIElement {
	className() {
		return 'UIBtn';
	}

	createContainer() {
		const button = this.j.c.element('button');
		button.style.color = 'red';

		button.classList.add(this.getFullElName('button'))

		this.j.e.on('click', button, this.onClick);
		return button;
	}

	@autobind
	onClick() {
		alert('click');
	}
}

// Now
@component()
class UIBtn extends UIElement {
	className() {
		return 'UIBtn';
	}

	render() {
		return `<button class="&__button" style="color:red"></button>`;
	}

	@watch('container:click')
	onClick() {
		alert('click');
	}
}

and styles

.jodit-ui-btn__button {
	border: 1px solid #ccc;
}

:house: Internal

• Removed useAceEditor option. https://github.com/xdan/jodit/issues/544
• Added component and persistent decorators

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}

• In UIInput added autocomplete, clearButton, icon options.

:bug: Bug Fix

• Clear formatting control does not clear all styles (keeps underline and strikethrough) #575
• Reset in size change not rescaling image #568
• Backspace in beginning of a styled line does not affect the line positioning #567
• Table cell elements are always left-aligned #550
• editor.destruct throws error #543
• How i can get Iframe without parent element ... #540
• Layout bug and drag&drop image loading #536
• Popups are not showing at all on Legacy Edge #531
• Fixed a bug when the search bar was shown in the scrolling editor, the editor was scrolled up. And the search box was not in sticky mode.

:rocket: New Feature

Jodit.atom

Jodit.Array and Jodit.Object marked as deprecated. In 3.5 they will be removed. Instead, use Jodit.atom.

const editor = Jodit.make('#editor', {
    buttons: Jodit.atom(['bold', 'italic']),
    popup: {
        img: Jodit.atom({
            // full rewrite
        })
    }
});

New option observer.maxHistoryLength: number = Infinity

Related with https://github.com/xdan/jodit/issues/574. In some cases need to limit size of undo history.

New options in link.plugin

• @property {"input"|"select"|""} link.modeClassName="input" Use an input text to ask the classname or a select or not ask
• @property {boolean} link.selectMultipleClassName=true Allow multiple choises (to use with modeClassName="select")
• @property {number} link.selectSizeClassName=3 The size of the select (to use with modeClassName="select")
• @property {IUIOption[]} link.selectOptionsClassName=[] The list of the option for the select (to use with modeClassName="select")
• ex: [

•   	{ value: "", text: "" },
  

•   	{ value: "val1", text: "text1" },
  

•   	{ value: "val2", text: "text2" },
  

•   	{ value: "val3", text: "text3" }
  

•   ]
  

PR: https://github.com/xdan/jodit/pull/577 Thanks @s-renier-taonix-fr

New option statusbar: boolean = true

Issue https://github.com/xdan/jodit/issues/535

const editor = Jodit.make('#editor', {
   statusbar: false
});
console.log(editor.statusbar.isShown); // false
editor.statusbar.show();
console.log(editor.statusbar.isShown); // true

Buttons groups

The buttons option can contain named groups of buttons. Each plugin decides which button belongs to which group. Thus, if you turn off the plugin, then its buttons will not be shown either. Available groups: ["source", "font-style", "script", "list", "indent", "font", "color", "media", "state", "clipboard", "insert", "history", "search", "other", "info"];

const editor = Jodit.make('#editor', {
    buttons: [
        {
            group: "custom",
            buttons: []
        },
        "bold"
    ]
});

Jodit.defaultOptions.controls.someButton = {
    icon: 'pencil',
    command: 'selectall'
};

Jodit.plugins.add('somePlugin', function (editor) {
    editor.registerButton({
        name: 'someButton',
        group: 'custom'
    });
})

Hotkeys for BackSpace and Delete and remove part of text

Added hotkey settings for Delete and Backspace buttons. And added hotkey ctrl+backspace for removing left part of text. Issue: https://github.com/xdan/jodit/issues/532

Jodit.make('#editor', {
    delete: Jodit.atom({
        hotkeys: {
            delete: ['delete', 'cmd+backspace'],
            deleteWord: ['ctrl+delete', 'cmd+alt+backspace', 'ctrl+alt+backspace'],
            backspace: ['backspace'],
            backspaceWord: ['ctrl+backspace']
        }
    })
});

Added one method in event system

const editor = Jodit.make('#editor');

editor.events
    .one('keydown', () => {
        console.log('Fire only one time');
    })
    .on('keydown', () => {
        console.log('Fire everytime');
    });

:bug: Bug Fix

• #526 Editor disable in ifram with split_mode
• #519 Insert link scrolls user to top of text area

:rocket: New Feature

Added extraIcons option. By default, you can only install an icon from the Jodit suite. You can add your icon to the set using the Jodit.modules.Icon.set (name, svg Code) method. But for a declarative declaration, you can use this option.

Jodit.modules.Icon.set('someIcon', '<svg><path.../></svg>');
const editor = Jodit.make({
	extraButtons: [
		{
			name: 'someButton',
			icon: 'someIcon'
		}
	]
});

const editor = Jodit.make({
	extraIcons: {
		someIcon: '<svg><path.../></svg>'
	},
	extraButtons: [
		{
			name: 'someButton',
			icon: 'someIcon'
		}
	]
});

const editor = Jodit.make({
	extraButtons: [
		{
			name: 'someButton',
			icon: '<svg><path.../></svg>'
		}
	]
});