画像 ​

画像アドレスを入れ、幅と配置を調整します。既定では http:、https:、または同じサイト内のパスだけを許可し、新しい画像は中央揃え、幅 60% から始まります。

幅は決められた段階の中だけで保存され、配置は画像を包む段落に保存されます。blob: や data:image/... のプレビューを使うには、画像 wing とエディターの組み立て側の両方でローカル URL を明示的に許可する必要があります。SVG の data URL は許可されません。

npm install nabi-note

import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, tableWings, imageWing,
  youtubeWing, mountViewTools,
} from 'nabi-note'

const selected = [
  ...tableWings,
  imageWing,
  youtubeWing,
]
const locale = createLocale('ja')
const { nabi, registry } = createNabiWith(selected, { locale })

const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!

// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')! })
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })

// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))

// Call from your language selector. Content and editing history stay intact.
// locale.setLocale('ko')

const selected = wings().use('img', {
  allowLocalUrls: false,
}).build()

この wing は文書にアドレスを入れる機能であり、ファイル転送は行いません。ファイルをサーバーへ送るには アップロード wing を接続します。

画像選択画面を接続する ​

mountToolbar() の panels.img で、画像ボタンの既定の URL 入力画面をサービス独自の画像選択画面に置き換えられます。キーにはツールバーのスロット名を使い、指定しなかったツールは既定の入力画面を使います。

mode: 'modal' は画面全体を覆う半透明の背景の上にウィンドウを開きます。mode: 'inline' は PC ではツールボタンの近くに開き、モバイルでは全画面で表示します。モバイル表示かどうかは画面幅と --nabi-mobile-breakpoint で判定し、inline の画面を開いたままこの境界を越えると閉じます。

どちらのモードも空の root だけを用意し、タイトル・入力欄・ボタンは作りません。render で任意の HTML や UI を追加し、閉じるボタンを close() に、画像の選択を insertImage(url, 'pointer') に接続します。従来の関数形式の設定（img: renderer）は表示方法を維持します。

import { mountToolbar } from 'nabi-note'

const toolbar = mountToolbar({
  nabi,
  registry,
  root: toolbarRoot,
  surface: content,
  panels: {
    img: {
      mode: 'inline',
      render: ({ root, signal, close, insertImage }) =>
        mountMyImagePicker(root, {
          signal,
          onClose: close,
          onSelect: (url: string) => insertImage(url, 'pointer'),
        }),
    },
  },
})

mountMyImagePicker はサービス側で実装する関数です。渡された root 内に任意の UI を同期的に作成し、後片付け用の関数を返します。画像一覧の取得やアップロードなどの非同期処理には signal を接続し、選択した画像の URL を onSelect に渡します。この API はファイルを転送せず、画像 URL には既存の許可ルールが適用されます。

insertImage(src, by?) は run('insertImage', { src }, by) と同じで、戻り値と選択の復元規則も共通です。by を省略すると 'keyboard' を使います。render を async 関数にしないでください。

画面を閉じるかツールバーをアンマウントすると、signal が中断され、後片付け用の関数が呼ばれます。run() は画面を閉じ、開いた時点の選択範囲にコマンドを一度適用します。すでに閉じている場合や、開いた後に文書の内容が変わった場合は、コマンドを実行せず false を返します。

カーソルだけを別の場所へ動かした場合は、パネルを開いた元の位置に挿入します。表のセルやフロート領域内で開いた場合は、その中に画像が入ります。文書を編集・置換した後は、元に戻す操作で同じ内容になっても挿入を中止して通知します。パネルを開き直して画像を選んでください。

CSS スタイル ​

画像は .nabi-content img で装飾します。保存された幅と配置はそのままにし、枠線や影のような見た目だけを変えてください。

.article-body img {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.dark .article-body img { box-shadow: 0 8px 24px rgb(0 0 0 / 35%); }

max-inline-size、block-size、幅、配置に関する基本ルールは維持してください。画像サイズは文書に保存された値なので、CSS で強制的に固定すると作成者が選んだ幅と衝突します。