Skip to content

Allow readOnly #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dimitrov-adrian wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Allow readOnly #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 33 additions & 20 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,15 @@ class List {
return true;
}

/**
* Notify core that read-only mode is supported
*
* @returns {boolean}
*/
static get isReadOnlySupported() {
return true;
}

/**
* Get Tool toolbox settings
* icon - Tool icon's SVG
Expand All @@ -44,8 +53,9 @@ class List {
* @param {ListData} params.data - previously saved data
* @param {object} params.config - user config for Tool
* @param {object} params.api - Editor.js API
* @param {boolean} params.readOnly - read-only mode flag
*/
constructor({ data, config, api }) {
constructor({ data, config, api, readOnly }) {
/**
* HTML nodes
*
Expand All @@ -56,6 +66,7 @@ class List {
};

this.api = api;
this.readOnly = readOnly;

this.settings = [
{
Expand Down Expand Up @@ -95,7 +106,7 @@ class List {
const style = this._data.style === 'ordered' ? this.CSS.wrapperOrdered : this.CSS.wrapperUnordered;

this._elements.wrapper = this._make('ul', [this.CSS.baseBlock, this.CSS.wrapper, style], {
contentEditable: true,
contentEditable: !this.readOnly,
});

// fill with data
Expand All @@ -105,22 +116,24 @@ class List {
this._elements.wrapper.appendChild(this._make('li', this.CSS.item));
}

// detect keydown on the last item to escape List
this._elements.wrapper.addEventListener('keydown', (event) => {
const [ENTER, BACKSPACE, TAB] = [13, 8, 9]; // key codes

switch (event.keyCode) {
case ENTER:
this.getOutofList(event);
break;
case BACKSPACE:
this.backspace(event);
break;
case TAB:
this.addTab(event);
break;
}
}, false);
if (!this.readOnly) {
// detect keydown on the last item to escape List
this._elements.wrapper.addEventListener('keydown', (event) => {
const [ENTER, BACKSPACE, TAB] = [13, 8, 9]; // key codes

switch (event.keyCode) {
case ENTER:
this.getOutofList(event);
break;
case BACKSPACE:
this.backspace(event);
break;
case TAB:
this.addTab(event);
break;
}
}, false);
}

return this._elements.wrapper;
}
Expand Down Expand Up @@ -358,7 +371,7 @@ class List {
createAllElm(lidata){
const style = this._data.style === 'ordered' ? this.CSS.wrapperOrdered : this.CSS.wrapperUnordered;
const ulElem = this._make('ul', [this.CSS.baseBlock, this.CSS.wrapper, style], {
contentEditable: true,
contentEditable: !this.readOnly,
});

lidata.forEach((item) => {
Expand Down Expand Up @@ -452,7 +465,7 @@ class List {

const style = this._data.style === 'ordered' ? this.CSS.wrapperOrdered : this.CSS.wrapperUnordered;
let ol = this._make('ul', [this.CSS.baseBlock, this.CSS.wrapper, style], {
contentEditable: true,
contentEditable: !this.readOnly,
});

if (this.currentItem.nextSibling != null) {
Expand Down