xdan/jodit 3.5.1

Groups buttons

on GitHub

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