ناحیهٔ شناور ​

یک توضیح کوتاه، تصویر یا جدول کوچک را در چپ یا راست قرار دهید تا متن اصلی در کنارش جریان یابد. محتوای ناحیه را می‌توانید مستقیماً در همان ویرایشگر تغییر دهید. کادر خط‌چین فقط هنگام ویرایش نمایش داده می‌شود؛ در پیش‌نمایش و نمای منتشرشده فقط محتوا و چیدمان باقی می‌ماند.

نشانگر را در ناحیهٔ مثال زیر بگذارید و با ابزارهای ویژگی، سمت و حداکثر عرض را تغییر دهید. در پیش‌نمایش می‌توانید جریان متن را بدون کادر خط‌چین ببینید.

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('fa')
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')

const selected = wings().allBasic().build()

ناحیه‌های شناور در بال‌های پایه وجود دارند. اگر فقط بال‌های موردنیاز را کنار هم می‌گذارید، از wings().use('float') استفاده کنید یا floatWing را مستقیماً ثبت کنید. بال‌های تصویر، جدول، فهرست و سایر محتوای مورد استفاده در ناحیه را نیز ثبت کنید.

ساخت و جای‌گذاری ​

نشانگر را در متن اصلی قرار دهید و ناحیه شناور را بزنید تا ناحیه‌ای خالی ساخته شود. پیش‌فرض، سمت راست با حداکثر عرض 40% است. اگر پیش از زدن دکمه چند پاراگراف را انتخاب کنید، همهٔ پاراگراف‌هایی که انتخاب به آن‌ها می‌رسد به‌طور کامل در یک ناحیه قرار می‌گیرند. نمی‌توانید ناحیهٔ شناور موجود را دوباره دربر بگیرید یا ناحیهٔ شناور دیگری درون آن بسازید.

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

وقتی نشانگر در ناحیه است، از ابزارهای ویژگی برای تغییر سمت چپ یا راست و حداکثر عرض استفاده کنید. عرض را از میان 20%، 30%، 40% و 50% انتخاب کنید. این درصد بر اساس عرض متن اصلی است، نه کل صفحه؛ اگر محتوا کوتاه باشد، عرض واقعی ناحیه می‌تواند کمتر باشد.

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

چسباندن متن، تصویر و جدول، تبدیل بلوک و بارگذاری درون ناحیه باقی می‌مانند. حذف جدول داخلی فقط همان جدول را پاک می‌کند. وقتی انتخاب هم داخل و هم بیرون ناحیه را دربر می‌گیرد، درج یا تبدیل بلوک‌های داخلی ممکن نیست.

دکمهٔ لغو ناحیه شناور کنار مقدار عرض، محتوا را بدون حذف به متن اصلی برمی‌گرداند. ساخت، تغییر چیدمان و برداشتن پوشش همگی از واگرد و انجام دوباره پشتیبانی می‌کنند.

nabi.applyCommand('unwrapFloat')

جریان متن در کنار ناحیه ​

پاراگراف‌های بعدی در کنار ناحیه جریان می‌یابند و پس از پایان آن به عرض کامل متن اصلی برمی‌گردند. عنوان، جدول، بلوک کد، جداکننده یا ناحیهٔ شناور تازهٔ بعدی، زیر ناحیهٔ قبلی آغاز می‌شود.

اگر عرض متن اصلی کمتر از 36rem باشد، ناحیه و متن در یک ستون قرار می‌گیرند. چاپ نیز از یک ستون استفاده می‌کند و سمت و حداکثر عرض ذخیره‌شده را نگه می‌دارد. نمای مقایسهٔ سند، سمت و حداکثر عرض هر ناحیه را حفظ می‌کند، اما بلوک بعدی را جداگانه زیر آن نشان می‌دهد تا خواندن تغییرات آسان‌تر شود.

ذخیره و بارگذاری ​

JSON، مقادیر a.side و a.w گرهٔ float را همراه بلوک‌های داخلی ذخیره می‌کند. HTML از ویژگی‌های data-nabi-float و data-nabi-float-width روی یک div درون پاراگراف شیء معمولی استفاده می‌کند.

<div data-nabi-p>
  <div data-nabi-float="right" data-nabi-float-width="40">
    <p>توضیحی که کنار متن اصلی قرار می‌گیرد.</p>
  </div>
</div>
<p>این پاراگراف در کنار ناحیه ادامه می‌یابد.</p>

هنگام خروجی Markdown، ناحیه به‌صورت HTML حفظ می‌شود. سبک‌های دلخواه CSS float وارد نمی‌شوند؛ بنابراین برای ذخیره و بازیابی از JSON یا HTML تولیدشده توسط NABI NOTE استفاده کنید. بال‌ها و CSS یکسان را در ویرایشگر، SSR، پیش‌نمایش و نمای منتشرشده متصل کنید تا سمت و عرض حفظ شوند.

سبک‌های CSS ​

رنگ‌ها و فاصله‌های داخل ناحیه را می‌توانید با انتخابگر [data-nabi-float] تنظیم کنید. پاراگراف بیرونی، چیدمان و حداکثر عرض را مدیریت می‌کند؛ پس float، display یا عرض را مستقیماً بازنویسی نکنید.

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