Skip to content

readOnly mode support #5

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
VanishMax wants to merge 8 commits into
base: master
Choose a base branch
from
Open

readOnly mode support #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8a456aa
Add support for readOnly mode
VanishMax Jan 12, 2021
5c2d1ff
Improve readOnly mode and create new bundle
VanishMax Jan 12, 2021
4a35536
Prevent creation of contenteditable cells when readOnly and add more …
VanishMax Jan 12, 2021
cf94de0
Merge remote-tracking branch 'upstream/master'
VanishMax Jun 18, 2021
472ab46
Update bundle
VanishMax Jun 18, 2021
fdc2aa7
fix: editable cells on readOnly
hrsy Aug 3, 2021
d3589e5
refactor: change TableConstructor agrs to named
shafua Aug 3, 2021
d74a187
chore: update bundle
hrsy Aug 3, 2021
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
2 changes: 1 addition & 1 deletion dist/bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

27 changes: 18 additions & 9 deletions src/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,14 @@ class Table {
static get enableLineBreaks() {
return true;
}

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

/**
* Get Tool toolbox settings
Expand All @@ -56,12 +64,13 @@ class Table {
* @param {object} config - user config for Tool
* @param {object} api - Editor.js API
*/
constructor({ data, config, api }) {
constructor({ data, config, api, readOnly }) {
this.api = api;
this.wrapper = undefined;
this.config = config;
this.data = data;
this._tableConstructor = new TableConstructor(data, config, api);
this.readOnly = readOnly;
this._tableConstructor = new TableConstructor({ data, config, api, readOnly });

this.actions = [
{
Expand Down Expand Up @@ -232,11 +241,12 @@ class Table {

_createTableConfiguration() {
this.wrapper.innerHTML = "";
this._tableConstructor = new TableConstructor(
this.data,
this.config,
this.api
);
this._tableConstructor = new TableConstructor({
data: this.data,
config: this.config,
api: this.api,
readOnly: this.readOnly,
});
this.wrapper.appendChild(this._tableConstructor.htmlElement);
}
/**
Expand All @@ -263,7 +273,7 @@ class Table {
return {
content: data,
};
}
}
}

/**
Expand Down Expand Up @@ -317,7 +327,6 @@ class Table {
}
return data;
}

}

module.exports = Table;
13 changes: 9 additions & 4 deletions src/table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,19 @@ const CSS = {
export class Table {
/**
* Creates
* @param {boolean} readOnly - read-only mode flag
*/
constructor() {
constructor(readOnly) {
this._numberOfColumns = 0;
this._numberOfRows = 0;
this._element = this._createTableWrapper();
this._table = this._element.querySelector('table');
this._selectedCell = null;
this._attachEvents();
this.readOnly = readOnly;

if (!this.readOnly) {
this._attachEvents();
}
}

/**
Expand Down Expand Up @@ -190,7 +195,7 @@ export class Table {
*/
_createTableWrapper() {
return create('div', [ CSS.wrapper ], null, [
create('table', [ CSS.table ])
create('table', [ CSS.table ])
// This function can be updated so that it will render the table with the give config instead of 3x3
]);
}
Expand All @@ -202,7 +207,7 @@ export class Table {
* @return {HTMLElement} - the area
*/
_createContenteditableArea() {
return create('div', [ CSS.inputField ], { contenteditable: 'true' });
return create('div', [ CSS.inputField ], { contenteditable: !this.readOnly });
}

/**
Expand Down
6 changes: 4 additions & 2 deletions src/tableConstructor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@ export class TableConstructor {
* @param {TableData} data - previously saved data for insert in table
* @param {object} config - configuration of table
* @param {object} api - Editor.js API
* @param {boolean} readOnly - read-only mode flag
*/
constructor(data, config, api) {
constructor({ data, config, api, readOnly }) {
/** creating table */
this._table = new Table();
this.readOnly = readOnly;
this._table = new Table(readOnly);
const size = this._resizeTable(data, config);

this._fillTable(data, size);
Expand Down
10 changes: 8 additions & 2 deletions test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@
</head>
<body>

<button type="button" onclick="toggleReadOnly()">Toggle readonly mode</button>

<div id="editorjs"></div>
</div>
<div class="ce-example__output">
Expand All @@ -48,15 +50,19 @@
rows: 0,
cols: 0
},

},
},
data : {
blocks: [

]
},
})

function toggleReadOnly () {
editor.readOnly.toggle();
}
</script>
</body>
</html>