ZuiEditor frame

src/features/emails/components/EmailEditor/EmailSettings/BlockListItem.tsx

@@ -1,57 +1,83 @@
+import { Crop75, Image as ImageIcon, Notes, Title } from '@mui/icons-material';
 import { FC } from 'react';
-import { OutputBlockData } from '@editorjs/editorjs';
 
-import { BLOCK_TYPES } from 'features/emails/types';
-import blockProblems from './utils/blockProblems';
-import ButtonBlockListItem from './ButtonBlockListItem';
-import HeaderBlockListItem from './HeaderBlockListItem';
-import ImageBlockListItem from './ImageBlockListItem';
-import TextBlockListItem from './TextBlockListItem';
+import {
+  BlockKind,
+  EmailContentBlock,
+  EmailContentInlineNode,
+  InlineNodeKind,
+} from 'features/emails/types';
+import BlockListItemBase from './BlockListItemBase';
+import editorBlockProblems from 'zui/ZUIEditor/utils/editorBlockProblems';
+import { useMessages } from 'core/i18n';
+import emailMessageIds from 'features/emails/l10n/messageIds';
+import editorMessageIds from 'zui/l10n/messageIds';
 
 interface BlockListItemProps {
-  block: OutputBlockData;
-  onChange: (newData: OutputBlockData['data']) => void;
-  readOnly: boolean;
+  block: EmailContentBlock;
   selected: boolean;
 }
 
-const BlockListItem: FC<BlockListItemProps> = ({
-  block,
-  onChange,
-  readOnly,
-  selected,
-}) => {
-  const problems = blockProblems(block);
+const BlockListItem: FC<BlockListItemProps> = ({ block, selected }) => {
+  const emailMessages = useMessages(emailMessageIds);
+  const editorMessages = useMessages(editorMessageIds.editor);
 
-  if (block.type === BLOCK_TYPES.PARAGRAPH) {
+  const makeTitle = (nodes: EmailContentInlineNode[]): string => {
+    let text = '';
+    nodes.forEach((node) => {
+      if (node.kind == InlineNodeKind.STRING) {
+        text += node.value;
+      } else if (node.kind == InlineNodeKind.VARIABLE) {
+        text += emailMessages.editor.outline.variables[node.name]();
+      } else if ('content' in node) {
+        text += makeTitle(node.content);
+      }
+    });
+    return text;
+  };
+
+  if (block.kind === BlockKind.PARAGRAPH) {
+    const title = makeTitle(block.data.content);
+    const hasErrors = editorBlockProblems(block);
+    return (
+      <BlockListItemBase
+        hasErrors={hasErrors.length > 0}
+        icon={Notes}
+        selected={selected}
+        title={title}
+      />
+    );
+  } else if (block.kind === BlockKind.HEADER) {
+    const title = makeTitle(block.data.content);
     return (
-      <TextBlockListItem
-        data={block.data}
-        hasErrors={!!problems.length}
-        readOnly={readOnly}
+      <BlockListItemBase
+        hasErrors={false}
+        icon={Title}
         selected={selected}
+        title={title}
       />
     );
-  } else if (block.type === BLOCK_TYPES.HEADER) {
-    return <HeaderBlockListItem data={block.data} selected={selected} />;
-  } else if (block.type === BLOCK_TYPES.BUTTON) {
+  } else if (block.kind === BlockKind.BUTTON) {
+    const hasErrors = editorBlockProblems(
+      block,
+      editorMessages.extensions.button.defaultText()
+    );
     return (
-      <ButtonBlockListItem
-        data={block.data}
-        hasErrors={!!problems.length}
-        onChange={onChange}
-        readOnly={readOnly}
+      <BlockListItemBase
+        hasErrors={hasErrors.length > 0}
+        icon={Crop75}
         selected={selected}
+        title={block.data.text}
       />
     );
   } else {
+    //Is image block
     return (
-      <ImageBlockListItem
-        data={block.data}
-        hasErrors={!!problems.length}
-        onChange={onChange}
-        readOnly={readOnly}
+      <BlockListItemBase
+        hasErrors={false}
+        icon={ImageIcon}
         selected={selected}
+        title={block.data.alt}
       />
     );
   }