المنطقة العائمة ​

ضع وصفًا قصيرًا أو صورة أو جدولًا صغيرًا على اليسار أو اليمين، ودع المتن ينساب بجانبه. يمكنك تعديل محتوى المنطقة مباشرة داخل المحرر نفسه. يظهر الإطار المتقطع أثناء التحرير فقط، ولا يبقى في المعاينة والعرض المنشور سوى المحتوى والتخطيط.

ضع المؤشر داخل المنطقة في المثال أدناه، واستخدم أدوات الخصائص لتغيير الجانب والحد الأقصى للعرض. في المعاينة، يمكنك رؤية انسياب المتن من دون الإطار المتقطع.

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('ar')
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;
}