NABI NOTE
دستاویزات

CDN استعمال کرنا ​

ایسے جامد صفحے پر جہاں پیکیج نصب کرنا مشکل ہو، آپ CDN سے NABI NOTE کا براؤزر بنڈل اور CSS لوڈ کر سکتے ہیں۔ نیچے کی مثال بلڈ کے وقت پیکیج کا ورژن خود بخود پڑھ کر پتے بناتی ہے اور عالمی آبجیکٹ NabiNote سے ایڈیٹر تیار کرتی ہے۔

نیچے دیا گیا کوڈ کے نام سے محفوظ کریں اور براؤزر میں کھولیں — فوراً چل کر دکھائی دے گا۔

<!doctype html>
<html lang="ur" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>NABI NOTE</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nabi-note@1.0.0/dist/nabi.css">
  <style>
    html, body { height: 100%; margin: 0; }
    /* ایڈیٹر کی کم از کم اونچائی — پہلی بار کھلتے ہی ایک لکیر کے ڈبے جیسا نہ لگے۔ قدر آزادانہ بدل سکتے ہیں۔ */
    #app { height: 100vh; }
    #editor { flex: 1; min-height: 0; overflow-y: auto; }
  </style>
</head>
<body>

<div id="app" class="nabi">
  <div id="chrome" class="nabi-toolbar">
    <div class="nabi-toolbar-row">
      <span id="tools"></span>
      <div id="toolbar"></div>
    </div>
    <div id="context"></div>
  </div>
  <div id="editor" class="nabi-content"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/nabi-note@1.0.0/dist/browser/nabi-note.min.js"></script>
<script>
  var N = NabiNote
  var app = document.querySelector('#app')
  var surface = document.querySelector('#editor')

  // اپ لوڈ کے سوا سب wing شامل ہیں۔
  // فونٹ میں صرف sans اور serif رکھے گئے ہیں۔
  // ہر نظام مختلف فونٹ سپورٹ کرتا ہے، اس لیے mono اور cursive کو الگ import کرنا پڑتا ہے
  // تاکہ ہر پلیٹ فارم پر پہچانا جا سکے۔ تفصیل "typeface" کی دستاویز میں دیکھیں۔
  var wings = N.wings().allBasic().use('save').use('open').use('tf', { values: ['sans', 'serif'] })

  var made = N.createNabiWith(wings, {
    locale: 'ur',
    ask: {
      message: function (text) { window.alert(text) },
      confirm: function (text) { return window.confirm(text) }
    }
  })
  var nabi = made.nabi
  var registry = made.registry

  N.mountSurface({ nabi: nabi, registry: registry, root: surface, locale: 'ur' })
  N.mountPickedMark({ nabi: nabi, surface: surface })

  var settle = N.watchSettle(document, { surface: surface })
  var shared = { nabi: nabi, registry: registry, surface: surface, settle: settle, locale: 'ur' }

  var history = N.mountLocalHistory({ nabi: nabi, storage: N.browserHistoryStorage(window) })
  var file = N.mountFile({
    nabi: nabi, registry: registry, store: N.browserFileStore(document),
    name: function () { return 'note' }, locale: 'ur'
  })

  var toolbar = N.mountToolbar(Object.assign({}, shared, {
    root: document.querySelector('#toolbar'),
    file: file,
    onHost: function (w) {
      if (w !== 'localHistory') return
      N.openHistoryPanel({
        history: history, surface: surface, locale: 'ur', sessionId: history.sessionId,
        render: function (record) {
          return N.renderStoredHtml(JSON.parse(record.body), registry) || ''
        }
      })
    }
  }))
  var context = N.mountContextToolbar(Object.assign({}, shared, { root: document.querySelector('#context') }))

  N.mountHints({ toolbar: toolbar, context: context, root: document.querySelector('#chrome'), surface: surface })
  N.mountViewTools({ nabi: nabi, surface: surface, root: app, container: document.querySelector('#tools'), locale: 'ur' })

  nabi.setHtml('')

  // قدر بدلنے پر callback کی مثال
  // nabi.onChange(function () { user_callback(nabi.getJson()) })
</script>

</body>
</html>

NABI NOTE میں دھیان رکھنے کی باتیں ​

  • تعیناتی کے کوڈ میں CSS اور براؤزر JavaScript کے لیے ایک ہی مقررہ ورژن استعمال کریں۔ latest جیسے بغیر ورژن کے پتے سے نئے ورژن کے دن رویہ بدل سکتا ہے۔
  • براؤزر بنڈل بنیادی API کو window.NabiNote کے طور پر دیتا ہے۔ nabi-note/ssr، nabi-note/viewer اور nabi-note/diff کے لیے الگ عالمی بنڈل موجود نہیں ہیں۔
  • مثال میں فائل محفوظ کرنا اور مقامی تاریخ صارف کے براؤزر میں چلتے ہیں۔ اگر سرور پر محفوظ کرنا یا اکاؤنٹ ہم وقت سازی درکار ہو تو getJson() کا نتیجہ اپنی ایپلیکیشن API کو بھیجیں۔
  • اپ لوڈ شامل کرتے وقت صرف upload wing نہیں، اصل بھیجنے والا فنکشن اور ضروری image یا link wings بھی جوڑیں۔ فائل کی پڑتال اپ لوڈ سرور کی ذمہ داری ہے۔
  • براؤزر بنڈل میں HTML parser شامل ہے۔ اس لیے setHtml()، HTML فائل کھولنے یا HTML چسپاں کرنے کے لیے الگ parser اختیار یا نجی API کی ضرورت نہیں۔

CDN صرف لوڈ کرنے کے طریقے میں مختلف ہے۔ محفوظ کرنے کی شکل اور ان پٹ کی پڑتال npm کے ذریعے نصب کرنے جیسی ہی ہے، اس لیے بنیادی استعمال بھی دیکھیں۔