Add custom header level icons

app/src/routes/editor/LayersPanel/Tree/NodeIcon.tsx

@@ -8,6 +8,7 @@ import {
  Link2Icon,
  ListBulletIcon,
  Pencil2Icon,
+ PilcrowIcon,
  SectionIcon,
  TextIcon,
  VideoIcon,
@@ -16,6 +17,12 @@ import {
  ViewVerticalIcon,
 } from '@radix-ui/react-icons';
 import { LayerNode } from '/common/models/element/layers';
+import H1Icon from '/src/assets/header-level-icons/h1.svg';
+import H2Icon from '/src/assets/header-level-icons/h2.svg';
+import H3Icon from '/src/assets/header-level-icons/h3.svg';
+import H4Icon from '/src/assets/header-level-icons/h4.svg';
+import H5Icon from '/src/assets/header-level-icons/h5.svg';
+import H6Icon from '/src/assets/header-level-icons/h6.svg';
 
 interface NodeIconProps {
  iconClass: string;
@@ -28,7 +35,21 @@ const NodeIcon = ({ iconClass, node }: NodeIconProps) => {
  }
 
  const tagName = node.tagName.toUpperCase();
- if (['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'STRONG', 'EM', 'SPAN', 'I'].includes(tagName)) {
+ if (tagName === 'H1') {
+ return <img src={H1Icon} className={iconClass} alt="H1" />;
+ } else if (tagName === 'H2') {
+ return <img src={H2Icon} className={iconClass} alt="H2" />;
+ } else if (tagName === 'H3') {
+ return <img src={H3Icon} className={iconClass} alt="H3" />;
+ } else if (tagName === 'H4') {
+ return <img src={H4Icon} className={iconClass} alt="H4" />;
+ } else if (tagName === 'H5') {
+ return <img src={H5Icon} className={iconClass} alt="H5" />;
+ } else if (tagName === 'H6') {
+ return <img src={H6Icon} className={iconClass} alt="H6" />;
+ } else if (tagName === 'P') {
+ return <PilcrowIcon className={iconClass} />;
+ } else if (['STRONG', 'EM', 'SPAN', 'I'].includes(tagName)) {
  return <TextIcon className={iconClass} />;
  } else if (tagName === 'A') {
  return <Link2Icon className={iconClass} />;

app/src/routes/editor/LayersPanel/Tree/TreeNode.tsx

@@ -182,6 +182,10 @@ const TreeNode = observer(
  >
  {instance?.component
  ? instance.component
+: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'].includes(
+ node.data.tagName.toLowerCase(),
+ )
+ ? ''
  : node.data.tagName.toLowerCase()}
  {' ' + node.data.textContent}
  </span>