codex-team / codex-team/editor.js

Default paragraph block showing incorrect custom inline tools

Open
#851 1 comment 0 reactions 0 assignees View on GitHub
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
![image](https://user-images.githubusercontent.com/33760077/61416647-6b5eaf80-a8c2-11e9-991c-aff07293e4a8.png)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.