फ़्लोट क्षेत्र ​

छोटा विवरण, चित्र या छोटी तालिका बाएँ या दाएँ रखकर मुख्य पाठ को उसके बगल में बहने दें। क्षेत्र की सामग्री उसी संपादक में सीधे बदल सकते हैं। बिंदीदार सीमा केवल संपादन के दौरान दिखती है; पूर्वावलोकन और प्रकाशित दृश्य में केवल सामग्री और व्यवस्था रहती है।

नीचे के उदाहरण में क्षेत्र के अंदर कर्सर रखकर गुण उपकरणों से दिशा और अधिकतम चौड़ाई बदलें। पूर्वावलोकन में बिंदीदार सीमा के बिना मुख्य पाठ का बहाव देख सकते हैं।

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

फ़्लोट क्षेत्र मूल wing में शामिल है। केवल आवश्यक wing चुनते समय wings().use('float') इस्तेमाल करें या floatWing सीधे पंजीकृत करें। क्षेत्र के अंदर इस्तेमाल होने वाले चित्र, तालिका और सूची आदि के wing भी पंजीकृत करें।

बनाना और रखना ​

मुख्य पाठ में कर्सर रखकर फ़्लोट क्षेत्र बटन दबाने से खाली क्षेत्र बनता है। मूल दिशा दाईं ओर और अधिकतम चौड़ाई 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, पूर्वावलोकन और प्रकाशित दृश्य में समान wing और 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;
}