تصویر ​

تصویر کا URL شامل کریں اور اس کی چوڑائی اور سیدھ بدلیں۔ طے شدہ طور پر پتے http:، https: یا اسی سائٹ کے راستوں تک محدود ہوتے ہیں، اور نئی تصویر ابتدا میں 60٪ چوڑائی پر درمیان میں ہوتی ہے۔

چوڑائی صرف مقررہ درجوں میں محفوظ ہوتی ہے، اور سیدھ تصویر کو سمیٹنے والے پیراگراف پر محفوظ ہوتی ہے۔ blob: یا data:image/... پیش نظارے استعمال کرنے کے لیے تصویر ونگ اور ایڈیٹر اسمبلی، دونوں میں مقامی URLs کو واضح طور پر اجازت دیں۔ SVG data URLs کی اجازت نہیں ہے۔

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

یہ ونگ دستاویز میں ایک پتہ شامل کرتا ہے؛ یہ فائلیں اپ لوڈ نہیں کرتا۔ فائلیں سرور کو بھیجنے کے لیے اپ لوڈ ونگ جوڑیں۔

تصویر منتخب کرنے کی ونڈو جوڑنا ​

تصویر کے بٹن کی پہلے سے طے شدہ 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 چوڑائی نافذ کرنا مصنف کی منتخب کردہ چوڑائی سے متصادم ہو سکتا ہے۔