Kayan bölge ​

Kısa bir açıklama, görsel veya küçük tabloyu sola ya da sağa yerleştirip ana metnin yanında akmasını sağlayın. Alanın içeriğini aynı düzenleyicide doğrudan değiştirebilirsiniz. Kesik çizgili kenarlık yalnızca düzenleme sırasında görünür; önizlemede ve yayımlanan görünümde yalnızca içerik ve yerleşim kalır.

Aşağıdaki örnekte imleci alanın içine yerleştirin ve özellik araçlarıyla tarafını ve en fazla genişliğini değiştirin. Önizlemede, kesik çizgili kenarlık olmadan metnin nasıl aktığını görebilirsiniz.

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

Kayan bölgeler temel kanatlara dahildir. Yalnızca gereken kanatları birleştiriyorsanız wings().use('float') kullanın veya floatWing öğesini doğrudan kaydedin. Alanın içinde kullanılacak görsel, tablo, liste ve diğer içeriklerin kanatlarını da kaydedin.

Oluşturma ve yerleştirme ​

İmleci ana metne yerleştirip Kayan bölge düğmesine basarak boş bir alan oluşturun. Varsayılan taraf sağ, en fazla genişlik %40’tır. Önce birden fazla paragraf seçip düğmeye basarsanız seçimin dokunduğu tüm paragraflar bütünüyle tek bir alana sarılır. Mevcut bir kayan bölgeyi tekrar saramaz veya içine başka bir kayan bölge oluşturamazsınız.

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

İmleç alanın içindeyken özellik araçlarından sol veya sağ tarafı ve en fazla genişliği değiştirin. 20%, 30%, 40% veya 50% arasından seçim yapabilirsiniz. Değer tüm ekranın değil, ana metnin genişliğine göredir; içerik kısaysa alanın gerçek genişliği daha dar olabilir.

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

Metin, görsel ve tablo yapıştırma, blok dönüştürme ve yükleme alanın içinde kalır. İçteki tabloyu silmek yalnızca o tabloyu kaldırır. Seçim alanın hem içini hem dışını kapsadığında iç blokları ekleyemez veya dönüştüremezsiniz.

Genişlik değerinin yanındaki Kayan bölgeyi kaldır düğmesi içeriği silmeden ana metne geri taşır. Oluşturma, yerleşim değişiklikleri ve sarmayı kaldırma işlemleri geri alma ve yinelemeyi destekler.

nabi.applyCommand('unwrapFloat')

Metnin alanın çevresinde akışı ​

Sonraki paragraflar alanın yanında akar; alan bittiğinde ana metnin tam genişliğine döner. Sonraki başlık, tablo, kod bloğu, ayırıcı veya yeni kayan bölge önceki alanın altında başlar.

Ana metnin genişliği 36rem değerinin altındaysa alan ve metin tek sütun olarak yerleştirilir. Yazdırmada da tek sütun kullanılır; kaydedilen taraf ve en fazla genişlik korunur. Belge karşılaştırma görünümü her alanın tarafını ve en fazla genişliğini korur, ancak değişiklikleri okumayı kolaylaştırmak için sonraki bloğu altında ayrı gösterir.

Kaydetme ve yükleme ​

JSON, float düğümünün a.side ve a.w değerlerini iç bloklarıyla birlikte kaydeder. HTML’de, normal bir nesne paragrafının içindeki div üzerinde data-nabi-float ve data-nabi-float-width öznitelikleri kullanılır.

<div data-nabi-p>
  <div data-nabi-float="right" data-nabi-float-width="40">
    <p>Ana metnin yanına yerleştirilecek açıklama.</p>
  </div>
</div>
<p>Bu paragraf alanın yanında devam eder.</p>

Markdown dışa aktarımı alanı HTML olarak korur. Rastgele CSS float stilleri içe aktarılmadığı için kaydetme ve geri yüklemede NABI NOTE tarafından oluşturulmuş JSON veya HTML kullanın. Taraf ve genişliği korumak için düzenleyici, SSR, önizleme ve yayımlanan görünümde aynı kanatları ve CSS’i bağlayın.

CSS stilleri ​

Alanın renklerini ve boşluklarını [data-nabi-float] seçicisiyle biçimlendirebilirsiniz. Dış paragraf yerleşimi ve en fazla genişliği yönettiği için float, display veya genişliği doğrudan geçersiz kılmayın.

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