Component system

"/": (state, _dispatch, view) => {
  if (!view) return false;

  const { $head, empty } = state.selection;

  // Check if CodeMirror is currently focused (inside a code snippet)
  const activeElement = document.activeElement;
  if (activeElement) {
    const cmEditor = activeElement.closest(".cm-editor");
    const cmContent = activeElement.closest(".cm-content");
    if (cmEditor || cmContent) {
      // CodeMirror is focused, don't trigger command menu
      return false;
    }
  }

  // Only trigger if selection is empty and we're in a paragraph
  if (empty && $head.parent.type.name === "paragraph") {
    const parentStart = $head.start($head.depth);
    const isAtStart = $head.pos === parentStart;
    const isEmptyParagraph = $head.parent.content.size === 0;

    if (isEmptyParagraph || isAtStart) {
      const coords = view.coordsAtPos($head.pos);
      const { top, left } = clampDialogPosition(coords.bottom + 5, coords.left);

      setDialogPosition({ top, left });
      setCurrentMenuType("commands");
      openDialog();
      return true;
    }
  }

  return false;
}

export const CardNodeView = React.forwardRef<HTMLDivElement, NodeViewComponentProps>(
  function Card({ nodeProps, ...props }, ref) {
    const title = nodeProps.node.attrs.title || "Card Title";
    const icon = nodeProps.node.attrs.icon;
    const showIcon = nodeProps.node.attrs.showIcon ?? true;
    const horizontal = nodeProps.node.attrs.horizontal ?? false;

    // Render logic with editable controls
    return (
      <div className={cardClasses}>
        {/* Card content with clickable title/icon for editing */}
      </div>
    );
  }
);

export const cardNodeSpec: NodeSpec = {
  group: "block",
  content: "block*",
  attrs: {
    title: { default: "Card Title" },
    icon: { default: null },
    showIcon: { default: true },
    horizontal: { default: false },
    href: { default: null },
  },
  selectable: true,

  parseDOM: [
    {
      tag: "card",
      getAttrs: (dom) => ({
        title: dom.getAttribute("title") || "Card Title",
        icon: dom.getAttribute("icon") || null,
        showIcon: dom.getAttribute("show-icon") !== "false",
        horizontal: dom.getAttribute("horizontal") === "true",
        href: dom.getAttribute("href") || null,
      }),
    },
  ],

  toDOM: (node) => [
    "card",
    {
      title: node.attrs.title,
      icon: node.attrs.icon,
      "show-icon": node.attrs.showIcon.toString(),
      horizontal: node.attrs.horizontal.toString(),
      href: node.attrs.href,
    },
    0,
  ],
};

export function insertCard(state: EditorState): Transaction {
  const { from, to } = state.selection;

  const attrs = {
    title: "Card Title",
    icon: null,
    showIcon: true,
    horizontal: false,
    href: null,
  };

  const card = state.schema.nodes.card.create(
    attrs, 
    state.schema.nodes.paragraph.create()
  );

  let tr = state.tr;
  if (from !== to) {
    tr = tr.delete(from, to);
  }
  tr = tr.replaceSelectionWith(card);

  // Position cursor inside the card content
  const insertPos = tr.selection.from;
  const innerPos = insertPos + 1;
  tr = tr.setSelection(Selection.near(tr.doc.resolve(innerPos)));

  return tr;
}

async function loadIcon(iconName: string): Promise<React.ComponentType<any> | null> {
  const normalizedName = normalizeIconName(iconName);

  // Check cache first
  if (iconCache.has(normalizedName)) {
    return iconCache.get(normalizedName)!;
  }

  try {
    const mod = await import("lucide-react");
    const IconComponent = (mod as any)[normalizedName];

    if (IconComponent) {
      iconCache.set(normalizedName, IconComponent);
      return IconComponent;
    }
  } catch (error) {
    console.error(`Failed to load icon "${iconName}":`, error);
    return null;
  }
}

export const commandMenuSetup: CommandItem[] = [
  { id: "h1", name: "Heading 1", icon: Heading1, description: "Big section heading", write: "# " },
  { id: "h2", name: "Heading 2", icon: Heading2, description: "Medium section heading", write: "## " },
  { id: "h3", name: "Heading 3", icon: Heading3, description: "Small section heading", write: "### " },
  { id: "paragraph", name: "Text", icon: AlignLeft, description: "Just start writing with plain text", write: "" },
  { id: "bullet", name: "Bulleted list", icon: List, description: "Create a simple bulleted list", write: "- " },
  {
    id: "code",
    name: "Code",
    icon: Code,
    description: "Capture a code snippet",
    componentName: "code_snippet",
  },
  { id: "quote", name: "Quote", icon: Quote, description: "Capture a quote", write: "> " },
  { separator: true },
  {
    id: "card",
    name: "Card",
    icon: CreditCard,
    description: "Create a horizontal or vertical card",
    componentName: "card",
  },
  {
    id: "callout",
    name: "Callout",
    icon: AlertCircle,
    description: "Add a callout (info, warning, caution, etc.)",
    componentName: "callout",
  },
  // ... more components
];