spec.tsx

import { createReactInlineContentSpec } from "@blocknote/react";
import { InlineWorkPackageChip } from "./InlineWorkPackageChip";
import { linkToWorkPackage } from "../../services/openProjectApi";

export const openProjectWorkPackageInlineSpec = createReactInlineContentSpec(
  {
    type: "openProjectWorkPackageInline" as const,
    propSchema: {
      wpid: { default: "" },
      instanceId: { default: "" },
      size: { default: "s" },
    },
    content: "none",
  },
  {
    render: ({ inlineContent, contentRef, editor }) => (
      <InlineWorkPackageChip inlineContent={inlineContent} contentRef={contentRef} editor={editor}/>
    ),

    toExternalHTML: ({ inlineContent }) => {
      const { wpid, instanceId, size } = inlineContent.props;
      if (!wpid || wpid.startsWith("pending:")) return <></>;
      return (
        <a
          href={linkToWorkPackage(Number(wpid))}
          target="_blank"
          rel="noopener noreferrer"
          data-inline-wp={wpid}
          data-inline-wp-instance={instanceId}
          data-inline-wp-size={size ?? "s"}
        >
          #{wpid}
        </a>
      );
    },
  }
);