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

छोटे वर्णन, प्रतिमा किंवा छोटा तक्ता डावीकडे किंवा उजवीकडे ठेवा आणि मुख्य मजकूर त्याच्या शेजारून वाहू द्या. भागातील सामग्री त्याच संपादकात थेट बदलता येते. तुटक सीमा फक्त संपादनावेळी दिसते; पूर्वावलोकन व प्रकाशित दृश्यात फक्त सामग्री आणि मांडणी राहते.

खालील उदाहरणातील भागात कर्सर ठेवून गुणधर्म साधनांमधून दिशा व कमाल रुंदी बदला. पूर्वावलोकनात तुटक सीमेशिवाय मुख्य मजकूर कसा वाहतो ते पाहता येते.

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