diff --git a/package.json b/package.json
index d9057c7..2dad172 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@editorjs/list",
- "version": "2.0.0",
+ "version": "2.0.1",
"keywords": [
"codex editor",
"list",
diff --git a/src/index.ts b/src/index.ts
index f228177..4cb763d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,12 +5,13 @@ import type {
ToolConfig
} from '@editorjs/editorjs/types/tools';
import { IconListBulleted, IconListNumbered, IconChecklist } from '@codexteam/icons';
+import { IconStartWith } from './styles/icons/index.js';
import type { ListConfig, ListData, ListDataStyle, ListItem, OldListData } from './types/ListParams';
import ListTabulator from './ListTabulator';
import { CheckListRenderer, OrderedListRenderer, UnorderedListRenderer } from './ListRenderer';
import type { ListRenderer } from './types/ListRenderer';
import { renderToolboxInput } from './utils/renderToolboxInput';
-import { type OlCounterType, OlCounterTypesMap } from './types/OlCounterType';
+import { OlCounterIconsMap, type OlCounterType, OlCounterTypesMap } from './types/OlCounterType';
/**
* Build styles
@@ -316,6 +317,7 @@ export default class EditorjsList {
const orderedListTunes: MenuConfigItem[] = [
{
label: this.api.i18n.t('Start with'),
+ icon: IconStartWith,
children: {
items: [
{
@@ -329,7 +331,8 @@ export default class EditorjsList {
];
const orderedListCountersTunes: MenuConfigItem = {
- label: this.api.i18n.t('Counters type'),
+ label: this.api.i18n.t('Counter type'),
+ icon: OlCounterIconsMap.get((this.data.meta as OrderedListItemMeta).counterType!),
children: {
items: [],
},
@@ -338,10 +341,10 @@ export default class EditorjsList {
/**
* 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: () => {
@@ -349,8 +352,8 @@ export default class EditorjsList {
},
});
});
-
- defaultTunes.push(...orderedListTunes, orderedListCountersTunes);
+ // @ts-expect-error ts(2820) can not use PopoverItem enum from editor.js types
+ defaultTunes.push({ type: 'separator' }, ...orderedListTunes, orderedListCountersTunes);
}
return defaultTunes;
diff --git a/src/styles/icons/index.ts b/src/styles/icons/index.ts
new file mode 100644
index 0000000..f4bb03a
--- /dev/null
+++ b/src/styles/icons/index.ts
@@ -0,0 +1,10 @@
+/**
+ * This file exports icons needed for Editorjs List plugin, but this icons are not released yet
+ * @todo remove this file and use icons from codex-team/icons package, when version with this icons will be released
+ */
+export const IconNumber = '';
+export const IconLowerRoman = '';
+export const IconUpperRoman = '';
+export const IconUpperAlpha = '';
+export const IconLowerAlpha = '';
+export const IconStartWith = '';
diff --git a/src/types/OlCounterType.ts b/src/types/OlCounterType.ts
index b39e2ee..b1b151a 100644
--- a/src/types/OlCounterType.ts
+++ b/src/types/OlCounterType.ts
@@ -1,7 +1,9 @@
+import { IconNumber, IconLowerRoman, IconUpperRoman, IconLowerAlpha, IconUpperAlpha } from '../styles/icons/index.js';
+
export type OlCounterType = 'numeric' | 'upper-roman' | 'lower-roman' | 'upper-alpha' | 'lower-alpha';
/**
- * Enum that represents all of the supported styles of the counters for ordered list
+ * Map that represents all of the supported styles of the counters for ordered list
*/
export const OlCounterTypesMap = new Map([
/**
@@ -29,3 +31,33 @@ export const OlCounterTypesMap = new Map([
*/
['Upper Alpha', 'upper-alpha'],
]);
+
+/**
+ * Map that represents relation between supported counter types and theirs icons to be displayed in toolbox
+ */
+export const OlCounterIconsMap = new Map([
+ /**
+ * Value that represents Icon for Numeric counter type
+ */
+ ['numeric', IconNumber],
+
+ /**
+ * Value that represents Icon for Lower Roman counter type
+ */
+ ['lower-roman', IconLowerRoman],
+
+ /**
+ * Value that represents Icon for Upper Roman counter type
+ */
+ ['upper-roman', IconUpperRoman],
+
+ /**
+ * Value that represents Icon for Lower Alpha counter type
+ */
+ ['lower-alpha', IconLowerAlpha],
+
+ /**
+ * Value that represents Icon for Upper Alpha counter type
+ */
+ ['upper-alpha', IconUpperAlpha],
+]);