codex-team / codex-team/editor.js
Shortcut is already registered.
- Dominant language
- TypeScript
- Stars
- 31.9k
- Forks
- 2.2k
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 1
Description
Describe a bug.
Adding Editor Layout to page breaks page because plugin things there's a shortcut already linked to "CMD+L" but I am the only shortcut with that command. When i remove the shortcut the page loads, but I can't figure out why it's breaking the page. It doesn't matter what shortcut i put for editor-layout because it says that the shortcut is already linked to the editor.js.
Steps to reproduce:
1. Download repo
2. Build
3. Build and add this to page https://github.com/hata6502/editorjs-layout to page
4.
Config
const editorConfig = {
/**
* Enable/Disable the read only mode
*/
readOnly: false,
/**
* Wrapper of Editor
*/
holder: 'editorjs',
/**
* Common Inline Toolbar settings
* - if true (or not specified), the order from 'tool' property will be used
* - if an array of tool names, this order will be used
*/
// inlineToolbar: ['link', 'marker', 'bold', 'italic'],
// inlineToolbar: true,
/**
* Tools list
*/
tools: {
/**
* Each Tool is a Plugin. Pass them via 'class' option with necessary settings {@link docs/tools.md}
*/
oneheader: {
class: EditorJSLayout.LayoutBlockTool,
config: {
EditorJS,
editorJSConfig,
enableLayoutEditing: false,
enableLayoutSaving: true,
initialData: {
itemContent: {
1: {
blocks: [{
type: "paragraph",
data: {
text: "Start typing here",
},
}, ]
},
},
layout: {
type: "container",
id: "",
className: "",
style: "",
children: [{
type: "item",
id: "",
className: "",
style: "",
itemContentId: "1",
}, ],
},
},
},
toolbox: {
icon: `
`,
title: "1 column",
},
},
header2column: {
class: EditorJSLayout.LayoutBlockTool,
config: {
EditorJS,
editorJSConfig,
enableLayoutEditing: false,
enableLayoutSaving: true,
initialData: {
itemContent: {
1: {
blocks: [{
type: "paragraph",
data: {
text: "Start typing here",
},
}, ]
},
2: {
blocks: [{
type: "paragraph",
data: {
text: "Start typing here",
},
}, ]
},
3: {
blocks: [{
type: "paragraph",
data: {
text: "Start typing here",
},
}, ]
},
},
layout: {
type: "container",
id: "",
className: "",
style: "",
children: [{
type: "item",
id: "",
className: "",
style: "",
itemContentId: "1",
},
{
type: "item",
id: "",
className: "",
style: "",
itemContentId: "2",
},
{
type: "item",
id: "",
className: "",
style: "",
itemContentId: "3",
},
],
},
},
},
toolbox: {
icon: `
`,
title: "2 columns with header",
},
},
header: {
class: Header,
// inlineToolbar: ['marker', 'link'],
config: {
placeholder: 'Header'
},
},
/**
* Or pass class directly without any configuration
*/
image: SimpleImage,
list: {
class: NestedList,
inlineToolbar: true,
},
checklist: {
class: Checklist,
inlineToolbar: true,
},
quote: {
class: Quote,
inlineToolbar: true,
config: {
quotePlaceholder: 'Enter a quote',
captionPlaceholder: 'Quote\'s author',
},
},
warning: Warning,
marker: {
class: Marker,
},
code: {
class: CodeTool,
},
delimiter: Delimiter,
inlineCode: {
class: InlineCode,
},
linkTool: LinkTool,
raw: RawTool,
embed: Embed,
table: {
class: Table,
inlineToolbar: true,
},
},
/**
* This Tool will be used as default
*/
defaultBlock: 'paragraph',
/**
* Initial Editor data
*/
data: {
},
onReady: function(){
saveButton.click();
},
onChange: function(api, event) {
console.log('something changed', event);
},
}
/**
* To initialize the Editor, create a new instance with configuration object
* @see docs/installation.md for mode details
*/
// Object.assign(editorConfig.tools, editorjs_layout);
// debugger;
var editor = new EditorJS(editorConfig);
/**
* Saving button
*/
const saveButton = document.getElementById('saveButton');
/**
* Toggle read-only button
*/
const toggleReadOnlyButton = document.getElementById('toggleReadOnlyButton');
const readOnlyIndicator = document.getElementById('readonly-state');
/**
* Saving example
*/
saveButton.addEventListener('click', function () {
editor.save()
.then((savedData) => {
cPreview.show(savedData, document.getElementById("output"));
})
.catch((error) => {
console.error('Saving error', error);
});
});
/**
* Toggle read-only example
*/
toggleReadOnlyButton.addEventListener('click', async () => {
const readOnlyState = await editor.readOnly.toggle();
readOnlyIndicator.textContent = readOnlyState ? 'On' : 'Off';
});
/**
* Button for displaying blocks borders. Useful for UI development
*/
const showBlocksBoundariesButton = document.getElementById("showBlocksBoundariesButton");
showBlocksBoundariesButton.addEventListener('click', () => {
document.body.classList.toggle("show-block-boundaries")
})
/**
* Button for enabling the 'Thin' mode
*/
const enableThinModeButton = document.getElementById("enableThinModeButton");
enableThinModeButton.addEventListener('click', () => {
document.body.classList.toggle("thin-mode")
editor.destroy();
editor = new EditorJS(editorConfig);
})
/**
* Toggler for toggling the dark mode
*/
const darkThemeToggler = document.getElementById("darkThemeToggler");
darkThemeToggler.addEventListener('click', () => {
document.body.classList.toggle("dark-mode");
localStorage.setItem('theme', document.body.classList.contains("dark-mode") ? 'dark' : 'default');
})
Expected behavior:
The page should load with no issues
Screenshots:
Device, Browser, OS:
Editor.js version:
v2.27.0
Plugins you use with their versions:
editorjs-layout
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.