-
Notifications
You must be signed in to change notification settings - Fork 48
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.
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
Feature/disable tool elements #122
base: main
Are you sure you want to change the base?
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
{ | ||
"name": "@editorjs/list", | ||
"version": "2.0.2", | ||
"version": "2.0.3", | ||
"keywords": [ | ||
"codex editor", | ||
"list", | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
import type { API, BlockAPI, PasteConfig, ToolboxConfig } from '@editorjs/editorjs'; | ||
import type { API, BlockAPI, PasteConfig, ToolboxConfig, BlockTool } from '@editorjs/editorjs'; | ||
import type { | ||
BlockToolConstructorOptions, | ||
MenuConfigItem, | ||
|
@@ -31,7 +31,7 @@ export type ListParams = BlockToolConstructorOptions<ListData | OldListData, Lis | |
/** | ||
* Default class of the component used in editor | ||
*/ | ||
export default class EditorjsList { | ||
export default class EditorjsList implements BlockTool { | ||
/** | ||
* Notify core that read-only mode is supported | ||
*/ | ||
|
@@ -52,7 +52,7 @@ export default class EditorjsList { | |
* title - title to show in toolbox | ||
*/ | ||
public static get toolbox(): ToolboxConfig { | ||
return [ | ||
const entries = [ | ||
{ | ||
icon: IconListBulleted, | ||
title: 'Unordered List', | ||
|
@@ -75,6 +75,10 @@ export default class EditorjsList { | |
}, | ||
}, | ||
]; | ||
|
||
return this.displayedEntries ? entries.filter( | ||
ele => this.displayedEntries?.includes(ele.data.style as ListDataStyle) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. you cannot access |
||
) : entries; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. improve naming please |
||
} | ||
|
||
/** | ||
|
@@ -171,6 +175,11 @@ export default class EditorjsList { | |
*/ | ||
private defaultListStyle?: ListConfig['defaultStyle']; | ||
|
||
/** | ||
* | ||
*/ | ||
private static displayedEntries?: ListDataStyle[]; | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. comments missing |
||
/** | ||
* Tool's data | ||
*/ | ||
|
@@ -210,6 +219,8 @@ export default class EditorjsList { | |
*/ | ||
this.defaultListStyle = this.config?.defaultStyle || 'unordered'; | ||
|
||
EditorjsList.displayedEntries = this.config?.displayedEntries; | ||
|
||
const initialData = { | ||
style: this.defaultListStyle, | ||
meta: {}, | ||
|
@@ -274,7 +285,7 @@ export default class EditorjsList { | |
public renderSettings(): MenuConfigItem[] { | ||
const defaultTunes: MenuConfigItem[] = [ | ||
{ | ||
label: this.api.i18n.t('Unordered'), | ||
title: this.api.i18n.t('Unordered'), | ||
icon: IconListBulleted, | ||
closeOnActivate: true, | ||
isActive: this.listStyle == 'unordered', | ||
|
@@ -283,7 +294,7 @@ export default class EditorjsList { | |
}, | ||
}, | ||
{ | ||
label: this.api.i18n.t('Ordered'), | ||
title: this.api.i18n.t('Ordered'), | ||
icon: IconListNumbered, | ||
closeOnActivate: true, | ||
isActive: this.listStyle == 'ordered', | ||
|
@@ -292,7 +303,7 @@ export default class EditorjsList { | |
}, | ||
}, | ||
{ | ||
label: this.api.i18n.t('Checklist'), | ||
title: this.api.i18n.t('Checklist'), | ||
icon: IconChecklist, | ||
closeOnActivate: true, | ||
isActive: this.listStyle == 'checklist', | ||
|
@@ -302,61 +313,18 @@ export default class EditorjsList { | |
}, | ||
]; | ||
|
||
if (this.listStyle === 'ordered') { | ||
const startWithElement = renderToolboxInput( | ||
(index: string) => this.changeStartWith(Number(index)), | ||
{ | ||
value: String((this.data.meta as OrderedListItemMeta).start ?? 1), | ||
placeholder: '', | ||
attributes: { | ||
required: 'true', | ||
}, | ||
sanitize: input => stripNumbers(input), | ||
}); | ||
|
||
const orderedListTunes: MenuConfigItem[] = [ | ||
{ | ||
label: this.api.i18n.t('Start with'), | ||
icon: IconStartWith, | ||
children: { | ||
items: [ | ||
{ | ||
element: startWithElement, | ||
// @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types | ||
type: 'html', | ||
}, | ||
], | ||
}, | ||
}, | ||
]; | ||
|
||
const orderedListCountersTunes: MenuConfigItem = { | ||
label: this.api.i18n.t('Counter type'), | ||
icon: OlCounterIconsMap.get((this.data.meta as OrderedListItemMeta).counterType!), | ||
children: { | ||
items: [], | ||
}, | ||
}; | ||
|
||
/** | ||
* For each counter type in OlCounterType create toolbox item | ||
*/ | ||
OlCounterTypesMap.forEach((_, counterType: string) => { | ||
orderedListCountersTunes.children.items!.push({ | ||
title: this.api.i18n.t(counterType), | ||
icon: OlCounterIconsMap.get(OlCounterTypesMap.get(counterType)!), | ||
isActive: (this.data.meta as OrderedListItemMeta).counterType === OlCounterTypesMap.get(counterType), | ||
closeOnActivate: true, | ||
onActivate: () => { | ||
this.changeCounters(OlCounterTypesMap.get(counterType) as OlCounterType); | ||
}, | ||
}); | ||
}); | ||
// @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types | ||
defaultTunes.push({ type: 'separator' }, ...orderedListTunes, orderedListCountersTunes); | ||
} | ||
|
||
return defaultTunes; | ||
if (EditorjsList.displayedEntries){ | ||
if (this.listStyle === 'ordered') this.addAdditionalTunes(defaultTunes); | ||
} else if (this.listStyle === 'ordered') this.addAdditionalTunes(defaultTunes); | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. no need to check for |
||
return EditorjsList.displayedEntries ? defaultTunes.filter( | ||
tune => { | ||
if ('title' in tune) { | ||
if(tune.title === 'Start with' || tune.title === 'Counter type') return true; | ||
else return EditorjsList.displayedEntries?.includes(tune.title!.toLowerCase() as ListDataStyle); | ||
} else if (('type' in tune) && tune.type === 'separator') return true; | ||
} | ||
) : defaultTunes; | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. you can firstly filter default tunes, and then add additional ones, then you won't need to check for |
||
|
||
/** | ||
|
@@ -453,4 +421,62 @@ export default class EditorjsList { | |
break; | ||
} | ||
} | ||
|
||
/** | ||
* Add additional tunes for ordered list | ||
* @param defaultTunes - default tunes list | ||
*/ | ||
private addAdditionalTunes(defaultTunes: MenuConfigItem[]): void { | ||
const startWithElement = renderToolboxInput( | ||
(index: string) => this.changeStartWith(Number(index)), | ||
{ | ||
value: String((this.data.meta as OrderedListItemMeta).start ?? 1), | ||
placeholder: '', | ||
attributes: { | ||
required: 'true', | ||
}, | ||
sanitize: input => stripNumbers(input), | ||
}); | ||
|
||
const orderedListTunes: MenuConfigItem[] = [ | ||
{ | ||
title: this.api.i18n.t('Start with'), | ||
icon: IconStartWith, | ||
children: { | ||
items: [ | ||
{ | ||
element: startWithElement, | ||
// @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types | ||
type: 'html', | ||
}, | ||
], | ||
}, | ||
}, | ||
]; | ||
|
||
const orderedListCountersTunes: MenuConfigItem = { | ||
title: this.api.i18n.t('Counter type'), | ||
icon: OlCounterIconsMap.get((this.data.meta as OrderedListItemMeta).counterType!), | ||
children: { | ||
items: [], | ||
}, | ||
}; | ||
|
||
/** | ||
* For each counter type in OlCounterType create toolbox item | ||
*/ | ||
OlCounterTypesMap.forEach((_, counterType: string) => { | ||
orderedListCountersTunes.children.items!.push({ | ||
title: this.api.i18n.t(counterType), | ||
icon: OlCounterIconsMap.get(OlCounterTypesMap.get(counterType)!), | ||
isActive: (this.data.meta as OrderedListItemMeta).counterType === OlCounterTypesMap.get(counterType), | ||
closeOnActivate: true, | ||
onActivate: () => { | ||
this.changeCounters(OlCounterTypesMap.get(counterType) as OlCounterType); | ||
}, | ||
}); | ||
}); | ||
// @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types | ||
defaultTunes.push({ type: 'separator' }, ...orderedListTunes, orderedListCountersTunes); | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lets call it
styles
?