Add fallback icon and title to popover

package.json

@@ -94,7 +94,7 @@
     "url": "https://opencollective.com/editorjs"
   },
   "dependencies": {
-    "@codexteam/icons": "^0.0.4",
+    "@codexteam/icons": "^0.1.0",
     "codex-notifier": "^1.1.2",
     "codex-tooltip": "^1.0.5",
     "html-janitor": "^2.0.4",

src/components/i18n/locales/en/messages.json

@@ -18,7 +18,8 @@
     },
     "popover": {
       "Filter": "",
-      "Nothing found": ""
+      "Nothing found": "",
+      "Untitled": ""
     }
   },
   "toolNames": {

src/components/modules/toolbar/blockSettings.ts

@@ -116,6 +116,7 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
       searchable: true,
       filterLabel: I18n.ui(I18nInternalNS.ui.popover, 'Filter'),
       nothingFoundLabel: I18n.ui(I18nInternalNS.ui.popover, 'Nothing found'),
+      untitledLabel: I18n.ui(I18nInternalNS.ui.popover, 'Untitled'),
       items: tunesItems.map(tune => this.resolveTuneAliases(tune)),
       customContent: customHtmlTunesContainer,
       customContentFlippableItems: this.getControls(customHtmlTunesContainer),

src/components/modules/toolbar/index.ts

@@ -405,6 +405,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
       i18nLabels: {
         filter: I18n.ui(I18nInternalNS.ui.popover, 'Filter'),
         nothingFound: I18n.ui(I18nInternalNS.ui.popover, 'Nothing found'),
+        untitled: I18n.ui(I18nInternalNS.ui.popover, 'Untitled')
       },
     });
 

src/components/ui/toolbox.ts

@@ -36,7 +36,7 @@ export enum ToolboxEvent {
 /**
  * Available i18n dict keys that should be passed to the constructor
  */
-type ToolboxTextLabelsKeys = 'filter' | 'nothingFound';
+type ToolboxTextLabelsKeys = 'filter' | 'nothingFound' | 'untitled';
 
 /**
  * Toolbox
@@ -127,6 +127,7 @@ export default class Toolbox extends EventsDispatcher<ToolboxEvent> {
       searchable: true,
       filterLabel: this.i18nLabels.filter,
       nothingFoundLabel: this.i18nLabels.nothingFound,
+      untitledLabel: this.i18nLabels.untitled,
       items: this.toolboxItemsToBeDisplayed,
     });
 

src/components/utils/popover.ts

@@ -7,6 +7,8 @@ import { isMobileScreen, keyCodes, cacheable } from '../utils';
 import ScrollLocker from './scroll-locker';
 import { PopoverItem, PopoverItemWithConfirmation } from '../../../types';
 import { capitalize } from '../utils';
+import { IconDotCircle } from '@codexteam/icons';
+
 /**
  * Event that can be triggered by the Popover
  */
@@ -98,6 +100,11 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
    */
   private readonly nothingFoundLabel: string;
 
+  /**
+   * text that will be displayed instead of title for title-less items
+   */
+  private readonly untitledLabel: string = 'Untitled';
+
   /**
    * Style classes
    */
@@ -170,22 +177,24 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
    * @param options.className - additional class name to be added to the popover wrapper
    * @param options.filterLabel - label for the search Field
    * @param options.nothingFoundLabel - label of the 'nothing found' message
+   * @param options.untitledLabel - text that will be displayed instead of title for title-less items
    * @param options.customContent - arbitrary html element to be inserted before items list
    * @param options.customContentFlippableItems - list of html elements inside custom content area that should be available for keyboard navigation
    * @param options.scopeElement - editor container element
    */
-  constructor({ items, className, searchable, filterLabel, nothingFoundLabel, customContent, customContentFlippableItems, scopeElement }: {
+  constructor({ items, className, searchable, filterLabel, nothingFoundLabel, untitledLabel, customContent, customContentFlippableItems, scopeElement }: {
     items: PopoverItem[];
     className?: string;
     searchable?: boolean;
     filterLabel: string;
     nothingFoundLabel: string;
+    untitledLabel?: string;
     customContent?: HTMLElement;
     customContentFlippableItems?: HTMLElement[];
     scopeElement: HTMLElement;
   }) {
     super();
-    this.items = items.map(this.fillItemTitle);
+    this.items = items.map((item) => this.fillItemTitle(item));
     this.customContent = customContent;
     this.customContentFlippableItems = customContentFlippableItems;
     this.className = className || '';
@@ -195,6 +204,7 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
 
     this.filterLabel = filterLabel;
     this.nothingFoundLabel = nothingFoundLabel;
+    this.untitledLabel = untitledLabel;
 
     this.render();
     this.enableFlipper();
@@ -438,7 +448,7 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
     });
 
     el.appendChild(Dom.make('div', Popover.CSS.itemIcon, {
-      innerHTML: item.icon || item.name.substring(0, 1).toUpperCase(),
+      innerHTML: item.icon || IconDotCircle,
     }));
 
     el.appendChild(label);
@@ -733,7 +743,7 @@ export default class Popover extends EventsDispatcher<PopoverEvent> {
 
     return {
       ...item,
-      title: capitalize(item.name),
+      title: this.untitledLabel,
     };
   }
 }

yarn.lock

@@ -852,9 +852,10 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
-"@codexteam/icons@^0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.0.4.tgz#8b72dcd3f3a1b0d880bdceb2abebd74b46d3ae13"
+"@codexteam/icons@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@codexteam/icons/-/icons-0.1.0.tgz#a02885fe8699f69902d05b077b5f1cd48a2ca6b9"
+  integrity sha512-jW1fWnwtWzcP4FBGsaodbJY3s1ZaRU+IJy1pvJ7ygNQxkQinybJcwXoyt0a5mWwu/4w30A42EWhCrZn8lp4fdw==
 
 "@codexteam/shortcuts@^1.1.1":
   version "1.2.0"