चित्र ​

चित्र का पता डालकर उसकी चौड़ाई और संरेखण बदलता है। मूल रूप से केवल http:, https: और उसी site के path अनुमत हैं; नया चित्र बीच में 60% चौड़ाई से शुरू होता है।

चौड़ाई केवल तय चरणों में सहेजी जाती है और संरेखण चित्र को समेटने वाले अनुच्छेद में सहेजा जाता है। blob: और data:image/... preview के लिए image wing और editor assembly, दोनों में local URL स्पष्ट रूप से अनुमत करें। SVG data URL अनुमत नहीं हैं।

npm install nabi-note

import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, tableWings, imageWing,
  youtubeWing, mountViewTools,
} from 'nabi-note'

const selected = [
  ...tableWings,
  imageWing,
  youtubeWing,
]
const locale = createLocale('hi')
const { nabi, registry } = createNabiWith(selected, { locale })

const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!

// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')! })
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().use('img', {
  allowLocalUrls: false,
}).build()

यह wing पता दस्तावेज़ में रखती है, file transfer नहीं करती। file server पर भेजने के लिए upload wing जोड़ें।

इमेज चुनने का पैनल जोड़ना ​

इमेज बटन के डिफ़ॉल्ट URL इनपुट पैनल की जगह अपनी सेवा का इमेज चयन पैनल लगाने के लिए mountToolbar() में panels.img दें। कुंजियाँ टूलबार स्लॉट के नाम हैं; जिन टूल का उल्लेख नहीं है, वे अपने डिफ़ॉल्ट पैनल बनाए रखते हैं।

mode: 'modal' पूरे पृष्ठ को ढकने वाली अर्धपारदर्शी पृष्ठभूमि पर एक विंडो खोलता है। mode: 'inline' डेस्कटॉप पर टूल बटन के पास और मोबाइल पर पूरी स्क्रीन में खुलता है। मोबाइल दृश्य का निर्धारण व्यूपोर्ट की चौड़ाई और --nabi-mobile-breakpoint से होता है; खुले inline पैनल के दौरान यह सीमा पार होने पर पैनल बंद हो जाता है।

दोनों मोड केवल खाली root देते हैं; शीर्षक, इनपुट फ़ील्ड या बटन नहीं बनाते। render में अपना HTML या UI जोड़ें, बंद करने का बटन close() से और इमेज चयन insertImage(url, 'pointer') से जोड़ें। मौजूदा फ़ंक्शन वाली सेटिंग (img: renderer) का प्रदर्शन व्यवहार बना रहता है।

import { mountToolbar } from 'nabi-note'

const toolbar = mountToolbar({
  nabi,
  registry,
  root: toolbarRoot,
  surface: content,
  panels: {
    img: {
      mode: 'inline',
      render: ({ root, signal, close, insertImage }) =>
        mountMyImagePicker(root, {
          signal,
          onClose: close,
          onSelect: (url: string) => insertImage(url, 'pointer'),
        }),
    },
  },
})

mountMyImagePicker एक फ़ंक्शन है जिसे आप अपनी सेवा में लागू करते हैं। यह दिए गए root में आपका UI समकालिक रूप से बनाता है और सफ़ाई के लिए एक फ़ंक्शन लौटाता है। इमेज सूची लाने या अपलोड करने जैसे असमकालिक कामों से signal जोड़ें और चुनी गई इमेज का URL onSelect को दें। यह API फ़ाइलें नहीं भेजता; इमेज URL की अनुमति के मौजूदा नियम लागू रहते हैं।

insertImage(src, by?), run('insertImage', { src }, by) के बराबर है, जिसमें लौटाया गया मान और चयन बहाल करने के नियम भी शामिल हैं। by छोड़ने पर 'keyboard' इस्तेमाल होता है। render को async फ़ंक्शन न बनाएँ।

पैनल बंद करने या टूलबार अनमाउंट करने पर signal रद्द होता है और सफ़ाई फ़ंक्शन चलता है। run() पैनल बंद करता है और खुलने के समय दर्ज चयन पर कमांड एक बार लागू करता है। पैनल पहले ही बंद हो चुका हो या खुलने के बाद दस्तावेज़ की सामग्री बदल गई हो, तो कमांड चलाए बिना false लौटाता है।

यदि केवल कर्सर दूसरी जगह ले जाते हैं, तो चित्र उसी मूल स्थान पर जुड़ता है जहाँ पैनल खोला था। यदि पैनल तालिका की कोशिका या फ़्लोट क्षेत्र में खोला था, तो चित्र उसके अंदर जुड़ता है। दस्तावेज़ में संपादन या उसे बदलने से चित्र जोड़ना रद्द होता है और सूचना दिखती है, भले ही पूर्ववत करने से वही सामग्री लौट आए; पैनल फिर खोलकर चित्र दोबारा चुनें।

CSS शैलियाँ ​

चित्र को .nabi-content img से सजाएँ। सहेजी चौड़ाई और संरेखण कायम रखते हुए केवल सीमा या छाया जैसा रूप बदलें।

.article-body img {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.dark .article-body img { box-shadow: 0 8px 24px rgb(0 0 0 / 35%); }

max-inline-size, block-size, चौड़ाई और संरेखण के मूल नियम न बदलें। चित्र का आकार दस्तावेज़ में सहेजा है; CSS में जबरन आकार तय करने पर लेखक की चौड़ाई से टकराव हो सकता है।