فلوٹ علاقہ ​

مختصر وضاحت، تصویر یا چھوٹا جدول بائیں یا دائیں رکھیں اور مرکزی متن کو اس کے پہلو میں بہنے دیں۔ علاقے کا مواد اسی ایڈیٹر میں براہ راست بدلا جا سکتا ہے۔ ٹوٹی لکیر کا حاشیہ صرف ترمیم کے دوران دکھائی دیتا ہے؛ پیش نظارے اور شائع شدہ منظر میں صرف مواد اور ترتیب باقی رہتے ہیں۔

نیچے دی گئی مثال کے علاقے میں کرسر رکھیں اور خصوصیات کے ٹولز سے جانب اور زیادہ سے زیادہ چوڑائی بدلیں۔ پیش نظارے میں آپ ٹوٹی لکیر کے حاشیے کے بغیر متن کا بہاؤ دیکھ سکتے ہیں۔

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('ur')
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 میں float نوڈ کے a.side اور a.w اندرونی بلاکوں سمیت محفوظ ہوتے ہیں۔ HTML میں عام آبجیکٹ پیراگراف کے اندر div پر data-nabi-float اور data-nabi-float-width اوصاف استعمال ہوتے ہیں۔

<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 یا چوڑائی براہ راست تبدیل نہ کریں۔

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