Help! I made a dropdown-menu component, and want to add it to the toolbar, but output is empty.

[yswang0927]

I made a dropdown-menu component:

import type { Component } from 'atomico'
import { c, html, useEffect, useRef, useState } from 'atomico';
import clsx from 'clsx';

// add custom-component: dropdown

export interface DropdownProps {
  title: string;
  icon: () => unknown;
  items: Array<{
    icon: () => unknown;
    text: string;
    onClick: (e: MouseEvent) => void;
  }>;
}

const dropdownComponent: Component<DropdownProps> = ({ 
  title, 
  icon, 
  items 
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLElement>();

  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      if (!dropdownRef.current?.contains(e.target as Node)) {
        setIsOpen(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  return html`
    <host>
      <div 
        class=${clsx('dropdown', isOpen && 'dropdown-show')}
        ref=${dropdownRef}
      >
        <button
          type="button"
          title=${title}
          class=${clsx('toolbar-item', 'dropdown-toggle', 'has-text')}
          onmousedown=${(e: MouseEvent) => {
            e.preventDefault();
            setIsOpen(!isOpen);
          }}
        >
          ${icon?.() ?? ''}
          <span class="toolbar-item-text">${title}</span>
        </button>
        <ul class="dropdown-menu">
          ${items?.map(item => html`
            <li>
              <a 
                class="dropdown-item" 
                onmousedown=${item.onClick}
              >
                <span class="dropdown-item-icon">${item.icon()}</span>
                ${item.text}
              </a>
            </li>
          `)}
        </ul>
      </div>
    </host>
  `;
};

dropdownComponent.props = {
  title: String,
  icon: Function,
  items: Array,
};

export const DropdownElement = c(dropdownComponent)
customElements.define('milkdown-dropdown', DropdownElement)

and I modified the toolbar sourcecode crepe/src/feature/toolbar/component.ts to add it:

// ... 
import { DropdownElement } from '../dropdown'

// ai dropdown menu config
const aiDropdown = new DropdownElement({
    title: 'AI Assist',
    icon: () => config?.aiIcon?.() ?? aiStarIcon,
    items: [
      {
        icon: () => aiStarIcon,
        text: 'Content Continue',
        onClick: (e) => {
          e.preventDefault();
        }
      },
     {
        icon: () => aiStarIcon,
        text: 'Translation',
        onClick: (e) => {
          e.preventDefault();
        }
      }
    ]
});

// ...

return html`<host>
 ....
  <div class="divider"></div>
  ${aiDropdown}
</host>`

but, the dropdown menu not render in the toolbar.