【実装】Notion calloutブロックをNext.jsでカラフルなUIコンポーネントとして表示する

{
  "type": "callout",
  "callout": {
    "icon": { "type": "emoji", "emoji": "💡" },
    "color": "green_background",
    "rich_text": [{ "plain_text": "これは重要なTipsです" }]
  }
}

> これは重要なTipsです

Notion Blocks → :::calloutマーカー付きMarkdown → プレースホルダー → 最終HTML

function blocksToMarkdown(blocks: Block[]): string {
  return blocks.map(block => {
    switch (block.type) {
      case 'callout': {
        const icon = block.callout.icon?.emoji || '💡';
        const color = block.callout.color || 'default';
        const text = richTextToMarkdown(block.callout.rich_text);
        return `:::callout{icon="${icon}" color="${color}"}\n${text}\n:::`;
      }
      // ... 他のブロックタイプ
    }
  }).join('\n\n');
}

💡Tips
これは重要なTipsです

type CalloutData = {
  icon: string;
  color: string;
  content: string;
};

function replaceCalloutsWithPlaceholders(markdown: string): {
  markdown: string;
  callouts: Map<string, CalloutData>;
} {
  const callouts = new Map<string, CalloutData>();
  let index = 0;
  
  const replaced = markdown.replace(
    /:::callout\{icon="([^"]*)"\s+color="([^"]*)"\}\n([\s\S]*?)\n:::/g,
    (_, icon, color, content) => {
      const placeholder = `CALLOUT_PLACEHOLDER_${index++}`;
      callouts.set(placeholder, { icon, color, content });
      return placeholder;
    }
  );
  
  return { markdown: replaced, callouts };
}

function restoreCallouts(html: string, callouts: Map<string, CalloutData>): string {
  let result = html;
  
  callouts.forEach((data, placeholder) => {
    // プレースホルダーがpタグで囲まれている場合も考慮
    const regex = new RegExp(`(<p>)?${placeholder}(</p>)?`, 'g');
    const calloutHtml = `
      <div class="callout callout-${data.color}">
        <span class="callout-icon">${data.icon}</span>
        <div class="callout-content">${data.content}</div>
      </div>`;
    result = result.replace(regex, calloutHtml);
  });
  
  return result;
}

// ページコンポーネントでの使用
const markdownBody = blocksToMarkdown(blocks);

// Step 1: calloutをプレースホルダーに置換
const { markdown, callouts } = replaceCalloutsWithPlaceholders(markdownBody);

// Step 2: Markdown → HTML変換
const htmlContent = markdownToHtml(markdown);

// Step 3: プレースホルダーをcallout HTMLに復元
const finalHtml = restoreCallouts(htmlContent, callouts);

.callout {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 8px;
  margin: 16px 0;
  border-left: 4px solid;
}

.callout-icon {
  font-size: 1.4em;
  flex-shrink: 0;
}

.callout-content {
  flex: 1;
  line-height: 1.7;
}

/* ブルー系 */
.callout-blue_background {
  background-color: #e7f3fe;
  border-left-color: #2196f3;
}

/* グリーン系 */
.callout-green_background {
  background-color: #e8f5e9;
  border-left-color: #4caf50;
}

/* イエロー系 */
.callout-yellow_background {
  background-color: #fff8e1;
  border-left-color: #ff9800;
}

/* レッド系 */
.callout-red_background {
  background-color: #ffebee;
  border-left-color: #f44336;
}

/* パープル系 */
.callout-purple_background {
  background-color: #f3e5f5;
  border-left-color: #9c27b0;
}

/* ピンク系 */
.callout-pink_background {
  background-color: #fce4ec;
  border-left-color: #e91e63;
}

/* オレンジ系 */
.callout-orange_background {
  background-color: #fff3e0;
  border-left-color: #ff5722;
}

/* グレー系（デフォルト） */
.callout-gray_background,
.callout-default {
  background-color: #f5f5f5;
  border-left-color: #9e9e9e;
}

[data-theme='dark'] .callout-blue_background {
  background-color: #1a2733;
  border-left-color: #64b5f6;
}

[data-theme='dark'] .callout-green_background {
  background-color: #1a2e1a;
  border-left-color: #81c784;
}

[data-theme='dark'] .callout-yellow_background {
  background-color: #2e2a1a;
  border-left-color: #ffb74d;
}

[data-theme='dark'] .callout-red_background {
  background-color: #2e1a1a;
  border-left-color: #e57373;
}

[data-theme='dark'] .callout-purple_background {
  background-color: #261a2e;
  border-left-color: #ba68c8;
}

[data-theme='dark'] .callout-pink_background {
  background-color: #2e1a22;
  border-left-color: #f06292;
}

[data-theme='dark'] .callout-orange_background {
  background-color: #2e221a;
  border-left-color: #ff8a65;
}

[data-theme='dark'] .callout-gray_background,
[data-theme='dark'] .callout-default {
  background-color: #2a2a2a;
  border-left-color: #757575;
}

case 'quote': {
  const text = richTextToMarkdown(block.quote.rich_text);
  const color = block.quote.color || 'default';
  // quoteもcalloutマーカーで出力（アイコンは引用符）
  return `:::callout{icon="💬" color="${color}"}\n${text}\n:::`;
}