SDK 0.5 — 本文の表（テーブル）レンダリングに対応しました

@sharedan/cms-sdk0.5を npm に公開しました。管理画面のブロックエディタに追加した「表（テーブル）」に、公開側レンダラrenderProseMirror()が対応します。表を含む本文を、そのまま<table>として描画できるようになりました。破壊的変更はありません。

npm install @sharedan/cms-sdk@^0.5

追加されたもの

renderProseMirror()がtable/tableRow/tableHeader/tableCellに対応
結合セル—colspan/rowspanを<th>/<td>に反映
列幅— エディタでリサイズした列幅（colwidth）を<colgroup>として出力

使い方はこれまでと変わりません。本文JSONを渡すだけで、中の表もHTMLになります。

const post = await cms.posts.get('news', slug);
const html = renderProseMirror(post.body);
// 本文中の表も <table> として出力される

出力されるHTML

表は<table><colgroup>?<tbody>…</tbody></table>の形で出力されます。たとえばこんな表は——

プラン	月額
スタンダード	9,800円

次のHTMLになります。

<table>
  <tbody>
    <tr><th><p>プラン</p></th><th><p>月額</p></th></tr>
    <tr><td><p>スタンダード</p></td><td><p>9,800円</p></td></tr>
  </tbody>
</table>

いくつか、CSSを書くうえで知っておくと便利なポイントがあります。

見出し行のセルは<th>、通常セルは<td>です。ProseMirror の表はどの行でもヘッダセルを持てるので、<th>は先頭行とは限りません。
<thead>は使いません。見出し行も含めてすべて<tbody>の中に入ります。見出しの装飾は<thead>ではなくtable thをセレクタにしてください。
セルの中身は段落（<p>）で包まれます。余白調整などはtable td pを対象にすると狙いやすいです。

結合セル（colspan / rowspan）

エディタでセルを結合すると、colspan/rowspanが属性として反映されます（値が 2 以上のときだけ付与、1のときは付けません）。

<tr>
  <th colspan="2"><p>2026年 料金</p></th>
</tr>
<tr>
  <td rowspan="2"><p>基本</p></td>
  <td><p>…</p></td>
</tr>

列幅（colgroup）

エディタで列幅をリサイズすると、各セルに列幅（colwidth）が保存されます。renderProseMirror()は先頭行から列幅を集め、<colgroup>として出力します。

<table>
  <colgroup><col style="width:160px"><col></colgroup>
  <tbody>…</tbody>
</table>

一度もリサイズしていない表には<colgroup>は付きません。ブラウザの自動列幅にまかせます。
幅が指定された列だけwidthが入り、未指定の列は素の<col>になります。
colspanで結合された列も、指定どおりの本数に展開して幅を割り当てます。

枠線・余白・折り返し・レスポンシブ（横スクロール）といった見た目は、本文コンテナ側のCSSで整えてください。レンダラはスタイルを持ちません。

.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--border); padding: 8px 12px; }
.prose th { background: #f6f8fa; text-align: left; }
/* 幅の広い表はコンテナ側で横スクロールに */
.prose .table-scroll { overflow-x: auto; }

アップグレード

0.4 系からそのまま更新できます。既存コードの変更は不要です。

npm install @sharedan/cms-sdk@^0.5

esm.sh 経由で読み込んでいる場合は、import URL のバージョンを上げるだけです。

import { renderProseMirror } from 'https://esm.sh/@sharedan/cms-sdk@0.5';

ひとつだけ注意点があります。表を「表として」描画するには 0.5 以上が必要です。0.5 未満のSDKはtableノードを知らないため、表が正しいレイアウトになりません。本文に表を使い始めるサイトは、先にSDKを 0.5 へ上げてください。

未知のノード・マークを無視する（＝出力HTMLの形はレンダラが決める）方針は、0.5 でも変わりません。設計の考え方はProseMirror JSON を安全にHTMLへにまとめています。