codex-team / codex-team/editor.js
Default paragraph block showing incorrect custom inline tools
- Dominant language
- TypeScript
- Stars
- 31.9k
- Forks
- 2.2k
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 1
Description
### The Problem
It appears that the default paragraph block shows custom inline tools when they are not specified in the config options, **unless** the button in the custom inline tool has the class `ce-inline-tool`.
### Example
```
// client.js
...
const editor= new EditorJS(
{
...
tools: {
paragraph: {
inlineToolbar: ['bold', 'italic']
},
header: {
class: Header,
config: {
minHeader: 2,
maxHeader: 6,
defaultLevel: 2
}
},
list: {
class: List,
inlineToolbar: ['indent', 'outdent']
},
indent: {
class: ListIndent
},
outdent: {
class: ListOutdent
}
},
...
}
);
...
// ListIndent.js
class ListIndent {
static get isInline() {
return true;
}
constructor({data, config, api}) {
this.data = data;
this.config = config;
this.api = api;
this.button = null;
this.state = false;
}
render() {
this.button = document.createElement('button');
this.button.type = 'button';
this.button.innerHTML = ``;
this.button.classList = 'ce-inline-tool'; // broken when this line is not here
return this.button;
}
surround(range) {
if (!this.state) {
return;
}
const elt = range.commonAncestorContainer.parentElement;
const listItemText = elt.innerHTML;
const prev = elt.previousSibling;
const prevUL = [...prev.childNodes].filter(n => n.tagName && n.tagName.toUpperCase() === 'UL');
const listToAdd = prevUL.length ? prevUL[0] : document.createElement('UL');
const newListItem = document.createElement('LI');
newListItem.innerHTML = listItemText;
listToAdd.appendChild(newListItem);
if (!prevUL.length)
prev.appendChild(listToAdd);
elt.parentElement.removeChild(elt);
}
checkState(selection) {
const text = selection.anchorNode;
if (!text) {
return;
}
const anchorElement = text instanceof Element ? text : text.parentElement;
const state = anchorElement && anchorElement.previousSibling && anchorElement.previousSibling.tagName && anchorElement.previousSibling.tagName.toUpperCase() === 'LI';
this.state = state;
}
}
```
### Screenshot

Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.