NABI NOTE
ドキュメント

フロート領域 ​

短い説明や画像、小さな表を左右に置き、本文をその横に回り込ませます。領域内の内容も同じエディターで直接編集できます。点線の枠は編集中だけ表示され、プレビューと公開画面には内容と配置だけが残ります。

下の例の領域内にカーソルを置き、プロパティツールで左右の位置と最大幅を変えてみてください。プレビューでは、点線のない状態で本文が続く様子を確認できます。

ウィング
既定の書体高さ
HTMLエディタを読み込んでいます…
JSONnabi-treeエディタを読み込んでいます…
インストール
npm install nabi-note
コード
import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, boldWing, linkWing,
  headingWing, alignWing, dropCapWing, bulletListWing, orderedListWing,
  taskListWing, quoteWing, floatWing, detailsWing, codeWing,
  dividerWing, tableWings, imageWing, youtubeWing, uploadWing,
  mountUpload, mountUploadView, mountViewTools,
} from 'nabi-note'

const selected = [
  boldWing,
  linkWing,
  headingWing,
  alignWing,
  dropCapWing,
  bulletListWing,
  orderedListWing,
  taskListWing,
  quoteWing,
  floatWing,
  detailsWing,
  codeWing,
  dividerWing,
  ...tableWings,
  imageWing,
  youtubeWing,
  uploadWing,
]
const locale = createLocale('ja')
const { nabi, registry } = createNabiWith(selected, { locale })

// Bring your own highlighter (Prism, highlight.js, Shiki, …) — the wing stays as it is
// and only the attach is swapped (`makeCodeAttach` ships from the same door)
// { ...codeWing, attach: makeCodeAttach({ highlight: (source, lang) => [{ text: source }] }) }

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

const view = mountUploadView({ nabi, surface: content, locale })
const upload = mountUpload({
  nabi, root: content, locale,
  // your upload goes here — report progress with task.onProgress(0–100)
  uploader: async (task) => ({ uri: 'https://cdn.example/uploaded' }),
  extensions: ['png', 'jpg', 'pdf'], maxFileSize: 10 * 1024 * 1024,
  onStart: (tasks) => view.start(tasks),
  onProgress: (id, percent) => view.progress(id, percent),
  onSettle: () => view.settle(),
  onDone: () => view.done(),
})

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

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')!, onFiles: upload.take })
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')
ts
const selected = wings().allBasic().build()

フロート領域は基本ウィングに含まれます。必要なウィングだけで構成する場合は、wings().use('float') を使うか、floatWing を直接登録します。領域内で使う画像・表・リストなどのウィングも一緒に登録してください。

作成と配置 ​

本文にカーソルを置き、フロート領域 ボタンを押すと空の領域が作成されます。既定値は右側、最大幅 40% です。複数の段落を選択してから押すと、選択範囲が触れる段落全体を1つの領域にまとめます。既存のフロート領域を再び包んだり、領域内に別のフロート領域を作ったりすることはできません。

ts
nabi.applyCommand('insertFloat', { side: 'right', w: 40 })

領域内にカーソルがあるとき、プロパティツールで左右の位置と最大幅を変更します。最大幅は 20%、30%、40%、50% から選びます。画面全体ではなく本文の幅を基準とし、内容が短ければ実際の領域はさらに狭くなることがあります。

ts
nabi.applyCommand('setFloatSide', { side: 'left' })
nabi.applyCommand('setFloatWidth', { w: 30 })

文章・画像・表の貼り付け、ブロックの変換、アップロードは領域内に留まります。内部の表を削除すると、その表だけが消えます。領域の内外をまたいで選択している状態では、内部ブロックの挿入・変換を適用できません。

幅の値の横にある フロート領域を解除 ボタンは、中身を本文へ戻します。内容は削除されません。作成・配置の変更・解除は、すべて元に戻す・やり直すに対応しています。

ts
nabi.applyCommand('unwrapFloat')

本文の回り込み ​

後続の段落は領域の横に回り込み、領域が終わると本文の全幅に戻ります。次の見出し、表、コード、区切り線、新しいフロート領域は、前の領域より下から始まります。

本文の幅が 36rem 未満になると、領域と本文を1列に配置します。印刷時も1列で表示しますが、保存された左右の位置と最大幅は保持します。文書の比較画面では、各領域の左右の配置と最大幅を保ちつつ、次のブロックをその下に分けて表示し、変更を読み取りやすくします。

保存と読み込み ​

JSON には、float ノードの a.side と a.w、内部のブロックを一緒に保存します。HTML では、通常のオブジェクト段落内の div に data-nabi-float と data-nabi-float-width 属性を使います。

html
<div data-nabi-p>
  <div data-nabi-float="right" data-nabi-float-width="40">
    <p>本文の横に置く説明です。</p>
  </div>
</div>
<p>この段落は領域の横に続きます。</p>

Markdown への書き出しでは HTML として保持します。任意の CSS float スタイルを取り込む仕組みではないため、保存と復元には NABI NOTE が生成した JSON または HTML を使ってください。方向と幅を維持するには、エディター、SSR、プレビュー、公開画面に同じウィングと CSS を接続する必要があります。

CSS スタイル ​

領域内の色や余白は [data-nabi-float] セレクターで装飾できます。外側の段落が配置と最大幅を管理するため、float、display、幅を直接上書きしないでください。

css
.brand-note .nabi-content [data-nabi-float] {
  background: var(--nabi-soft);
  border-radius: var(--nabi-radius);
  padding: .75rem;
}