3.8.2

3.8.1

💥 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

🚀 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 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

Big refactoring and Bug fix

3.6.1

🐛 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

🚀 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;
	}
}),

🏠 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;
}

Groups buttons

🏠 Internal

• Removed useAceEditor option. #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 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.

🚀 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 #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: #577 Thanks @s-renier-taonix-fr

New option statusbar: boolean = true

Issue #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: #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');
    });

3.4.29

🐛 Bug Fix

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

🚀 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>'
		}
	]
});

Bug fix

Read more https://github.com/xdan/jodit/blob/master/CHANGELOG.MD#3426

Big refactoring and Bug fix

See more https://github.com/xdan/jodit/blob/master/CHANGELOG.MD#34

New plugins system = Build-in plugins + Extra plugins + Build system

Plugin system was changed

Before

Jodit.plugins.insertText = function (editor) {
    editor.events.on('someEvent', function (text) {
        editor.selection.insertHTMl('Hello ' + text);
    });
};

Now

Jodit.plugins.add('insertText', function (editor) {
    editor.events.on('someEvent', function (text) {
        editor.selection.insertHTMl('Hello ' + text);
    });
});
console.log(Jodit.plugins.get('insertText'));
Jodit.plugins.remove('insertText');

extraPlugins options

Inside plugin you can use several fields:

// emoji.js

class Emoji {
    hasStyle = true; //
    requires = ['autocomplete'];
    init(editor) {
        // this code will be execute only after autocomplete.init
    }
}

Jodit.plugins.add('emoji', Emoji);

And inside you init code

Jodit.make('#editor', {
	basePath: 'https://sitename.com/somepath/',
	extraPlugins: ['emoji']
});

It will try to download

https://sitename.com/somepath/plugins/emoji/emoji.js

hasStyle = true; means try download and include in page style file:

https://sitename.com/somepath/plugins/emoji/emoji.css

In plugins/example folder you can find example.

extraPlugins option allows append in editor extra plugins from npm, bower etc.

Build System

In Build system was added gulp subsystem for build extra plugins.
You can make extra plugins like plugins/example and after build,
this plugin will not be inside jodit.min.js file. It will be in separate
folder (eg build/plugins/emoji/).

Also in root you can find make.js file for install your plugin
in build system.

Modern Browser Support

In build directory you can find several files

jodit.css
jodit.js   

jodit.es2018.css
jodit.es2018.js

jodit.es2018.min.css 
jodit.es2018.min.js  
          
jodit.min.css        
jodit.min.js

jodit.min.js - This file contains usual ES5 syntax and can be used in IE11, it has polyfills for compatable with ie11
jodit.min.es2018.js - This file contains ES2018 syntax(async,await, arrow function etc.) and can be used in modern browsers, it does not have any polyfills. This file is 79kb smaller than the es5 version.

Use jodit.min.es2018.js if you use Jodit only in moder browsers.

License

Now you can use Jodit under MIT or GPL2-or-later or Commercial licenses.
Jodit is licensed under a triple license system (MIT or GPL version 2-or-later or Commercial). This means you are free to choose with which of these licenses you want to use this library.
It does not mean what for commercial products you need commercial license. You can use any of these licenses in commercial and non commercial products.

Bug fixes

• tests can be runned from github.io
• Fixed bug in table cell after pressing enter
• Added cleanHTML.fillEmptyParagraph=true option. It is fill in empty block tags
• In inline mode - editor does not apply:  min-height, height and width options
• Remove old license info from editor
• Fixed #45
• Fixed #47
• Fixed #43
• Fixed #46
• Fixed #43
• Fixed #42
• Changed all images on local in tests
• Fixed #39
• Fixed licence and examples in README.MD
• Fix #41
• Fix #37. Added cleanHTML.removeOldTags щзÐs options
• Fix bug in redoundo manager
• Fixed bug in enter plugin, when cursor was in latest - 1 position and enter was pressed it was not splited
• Added uploader.insertImageAsBase64URI option for issue https://github.com/jodit/jodit-angular/issues/
• Fix #36
• Fixed bug #34
• Fixed #35
• Fixed #25 - Better image upload response status check
• Fix bug in fullsize mode