refactor: super icons (#1974)

packages/web/src/javascripts/Components/Icon/Icon.tsx

@@ -2,9 +2,10 @@ import { FunctionComponent } from 'react'
 import { VectorIconNameOrEmoji } from '@standardnotes/snjs'
 import { IconNameToSvgMapping } from './IconNameToSvgMapping'
 import { classNames } from '@/Utils/ConcatenateClassNames'
+import { LexicalIconName, LexicalIconNameToSvgMapping } from './LexicalIcons'
 
 type Props = {
-  type: VectorIconNameOrEmoji
+  type: VectorIconNameOrEmoji | LexicalIconName
   className?: string
   ariaLabel?: string
   size?: 'small' | 'medium' | 'normal' | 'large' | 'custom'
@@ -42,8 +43,11 @@ const EmojiSize = {
   custom: '',
 }
 
-const getIconComponent = (type: VectorIconNameOrEmoji) => {
-  return IconNameToSvgMapping[type as keyof typeof IconNameToSvgMapping]
+const getIconComponent = (type: VectorIconNameOrEmoji | LexicalIconName) => {
+  return (
+    IconNameToSvgMapping[type as keyof typeof IconNameToSvgMapping] ||
+    LexicalIconNameToSvgMapping[type as LexicalIconName]
+  )
 }
 
 export const isIconEmoji = (type: VectorIconNameOrEmoji): boolean => {

packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx

@@ -50,6 +50,11 @@ export const IconNameToSvgMapping = {
   'user-add': icons.UserAddIcon,
   'user-switch': icons.UserSwitch,
   'fullscreen-exit': icons.FullscreenExitIcon,
+  'format-align-left': icons.FormatAlignLeftIcon,
+  'format-align-center': icons.FormatAlignCenterIcon,
+  'format-align-right': icons.FormatAlignRightIcon,
+  'format-align-justify': icons.FormatAlignJustifyIcon,
+  drag: icons.DragIcon,
   accessibility: icons.AccessibilityIcon,
   add: icons.AddIcon,
   archive: icons.ArchiveIcon,

packages/web/src/javascripts/Components/Icon/LexicalIcons.tsx

@@ -0,0 +1,27 @@
+import * as icons from '@standardnotes/icons'
+
+export const LexicalIconNameToSvgMapping = {
+  'lexical-code': icons.LexicalCode,
+  'align-center': icons.LexicalTextCenter,
+  'align-justify': icons.LexicalTextJustify,
+  'align-left': icons.LexicalTextLeft,
+  'align-right': icons.LexicalTextRight,
+  'caret-right-fill': icons.LexicalCaretRightFill,
+  'horizontal-rule': icons.LexicalHorizontalRule,
+  'list-ol': icons.LexicalListOL,
+  'list-ul': icons.LexicalListUL,
+  check: icons.LexicalCheck,
+  quote: icons.LexicalQuote,
+  table: icons.LexicalTable,
+  tweet: icons.LexicalTweet,
+  youtube: icons.LexicalYoutube,
+  paragraph: icons.LexicalTextParagraph,
+  h1: icons.TypeH1,
+  h2: icons.TypeH2,
+  h3: icons.TypeH3,
+  h4: icons.TypeH4,
+  h5: icons.TypeH5,
+  h6: icons.TypeH6,
+}
+
+export type LexicalIconName = keyof typeof LexicalIconNameToSvgMapping