ErdEditorElement

ویرایشگر یک HTMLElement ساده است.
تعریف نوع آن به شرح زیر است.

interface ErdEditorElement extends HTMLElement {
  readonly: boolean;
  systemDarkMode: boolean; // system dark/light auto
  enableThemeBuilder: boolean;
  enableLocalePicker: boolean;
  enableWelcomeScreen: boolean;
  value: string;
  readonly runtimeValue: string;
  focus: () => void;
  blur: () => void;
  clear: () => void;
  destroy: () => void;
  setInitialValue: (value: string) => void;
  setPresetTheme: (themeOptions: Partial<ThemeOptions>) => void;
  setSystemAppearance: (appearance: 'dark' | 'light' | null) => void;
  setTheme: (theme: Partial<Theme>) => void;
  setLocale: (locale: LocaleOption) => void;
  setSystemLocale: (locale: string | null) => void;
  setKeyBindingMap: (
    keyBindingMap: Partial<
      Omit<
        KeyBindingMap,
        | 'edit'
        | 'stop'
        | 'undo'
        | 'redo'
        | 'zoomIn'
        | 'zoomOut'
        | 'zoomReset'
      >
    >
  ) => void;
  setSchemaSQL: SetSchema;
  setSchemaGraphQL: SetSchema;
  setSchemaDBML: SetSchema;
  setSchemaAML: SetSchema;
  setSchemaJSON: (
    value: string,
    options?: { mode?: 'replace' | 'append' }
  ) => void;
  getSchemaSQL: (
    databaseVendor?: DatabaseVendor,
    options?: SchemaSQLOptions
  ) => string;
  getSharedStore: (
    config?: SharedStoreConfig & {
      mouseTracker?: boolean;
      focusTracker?: boolean;
    }
  ) => SharedStore;
  setDiffValue: (value: string) => void;
}

ویرایشگر درون یک shadow root بسته رندر می‌شود، بنابراین editor.shadowRoot برابر null است و استایل‌های صفحه نه به درون آن نفوذ می‌کنند و نه از آن به بیرون.
با هیچ انتخابگر CSS نمی‌توان به چیزی درون آن دسترسی داشت — به‌جای آن، برای استایل‌دهی از setTheme و خاصیت‌های سفارشی --erd-editor-* استفاده کنید.

readonly، system-dark-mode، enable-theme-builder، enable-locale-picker و enable-welcome-screen تنها صفت‌ها هستند و مقدار پیش‌فرض هر پنج مورد false است. دو مورد آخر در نسخهٔ 4.0.0 اضافه شده‌اند. هر یک مقدار خود را همان‌طور می‌خواند که readonly توضیح می‌دهد.

از نسخهٔ 4.1.0، زبانهٔ ERD یک کاوشگر دارد؛ درختی از نمودار که در سمت چپ بوم جای گرفته و یافتن و جایگزینی در بالای آن قرار دارد. هیچ صفت، خاصیت، متد یا رویدادی آن را باز یا بسته نمی‌کند یا وضعیتش را گزارش نمی‌دهد: کاوشگر از دکمهٔ Explorer در نوار ابزار، از Toggle Explorer در جست‌وجوی سریع یا منوی زمینهٔ بوم، یا با کلید میان‌بر findReplace باز می‌شود.
در هر عنصر، کاوشگر در ابتدا بسته است. باز بودن آن، عرض آن، وضعیت جمع‌شدن آن و جست‌وجوی آن تا وقتی عنصر وجود دارد باقی می‌مانند، در جابه‌جایی بین زبانه‌ها و در هر بارگذاری، از جمله setInitialValue، و هرگز در value، runtimeValue، تاریخچهٔ واگرد یا یک مخزن مشترک قرار نمی‌گیرند.

readonly

قابلیت ویرایش ویرایشگر را تعیین می‌کند.
تا وقتی این صفت تنظیم شده است، مقداردهی به value، clear()، setSchemaSQL()، setSchemaGraphQL()، setSchemaDBML()، setSchemaAML()، setSchemaJSON()، واگرد و ازنو همگی نادیده گرفته می‌شوند و رویداد change هرگز ارسال نمی‌شود. به‌جای آن، سند را با setInitialValue بارگذاری کنید.
مشاهده همچنان کار می‌کند: بزرگ‌نمایی، جابه‌جایی نما، ابزار دست، حالت ذن، زبانهٔ بوم، زبانهٔ مصورسازی در هر دو حالتش، از جمله تمرکز روی جدول‌ها، سامانهٔ پایگاه داده و تنظیمات خروجی SQL و مولد کد همگی همچنان اعمال می‌شوند، بنابراین در نمایشگر فقط خواندنی هم می‌توان SQL را برای سامانهٔ پایگاه دادهٔ دیگری صادر کرد یا کد تولیدشده را خواند.
از نسخهٔ 4.1.0، کاوشگر هم باز می‌شود و انتخاب یکی از ردیف‌های آن، مانند یک ویرایشگر قابل ویرایش، به چیزی می‌رود که آن ردیف نمایانگر آن است. یافتن و جایگزینی در بالای آن فقط جست‌وجو می‌کند، بدون پیکان Toggle Replace و بدون ردیف جایگزینی، و رفتن به یک مورد منطبق همچنان آن را در دید قرار می‌دهد و انتخابش می‌کند. عنوان پنل Explorer است و راهنمای ابزار دکمهٔ نوار ابزار در هر ویرایشگری Explorer (Ctrl + F) (Windows/Linux) یا Explorer (⌘ + F) (Mac) است. از نسخهٔ 3.10.0 تا 4.0.0، یافتن و جایگزینی به‌صورت یک پنل شناور فقط برای یافتن با عنوان Find باز می‌شد.
کادر گفت‌وگوی ویژگی‌های جدول همچنان باز می‌شود و از نسخهٔ 3.10.0 نشان Read only را کنار عنوانش نمایش می‌دهد و زبانهٔ Indexes آن هیچ امکان ویرایشی ارائه نمی‌دهد؛ ویژگی‌های جدول را ببینید.
از نسخهٔ 4.0.0، ویرایشگر فقط خواندنی هیچ‌یک از گزینه‌های Import and Add، New Table Group، Group selected tables، Remove from group (گروه‌های جدول را ببینید) و Map Columns را ارائه نمی‌دهد و صفحهٔ خوش‌آمد را نمایش نمی‌دهد. دکمه‌های قفل در زبانهٔ تنظیمات چیزی را تغییر نمی‌دهند و اسکریپت‌های Before tables و After tables در زبانهٔ طرح‌واره SQL قابل ویرایش نیستند.
از نسخهٔ 4.1.0، این ویرایشگر هیچ‌یک از دکمه‌های New Table، New Memo و New Table Group را هم در نوار ابزار بوم نمایش نمی‌دهد و کلیدهای میان‌بر addTableGroup و groupSelectedTables کاری انجام نمی‌دهند.
گزینه‌های This window only در زبانهٔ طرح‌واره SQL، یعنی Statements، Header و Tables، هرگز ذخیره نمی‌شوند و همچنان اعمال می‌شوند؛ کادر گفت‌وگوی Export image، سازندهٔ طرح زمینه و انتخابگر زبان نمایش هم همچنان کار می‌کنند. انتخاب در سازندهٔ طرح زمینه یا انتخابگر زبان نمایش همچنان changePresetTheme یا changeLocale را ارسال می‌کند.
صفت بدون مقدار، ="" و ="true" همگی به‌صورت true خوانده می‌شوند. ="false" به‌صورت false خوانده می‌شود و هر رشتهٔ دیگری هم همین‌طور — از جمله الگوی رایج HTML، یعنی readonly="readonly".

editor.readonly = true;
// or
editor.setAttribute('readonly', 'true');

<erd-editor readonly></erd-editor>

systemDarkMode

تعیین می‌کند که آیا ویرایشگر به‌طور خودکار با حالت تیره/روشن سیستم همگام شود.
از نسخهٔ 4.0.0، روشن کردن آن appearance طرح زمینه را روی 'system' می‌گذارد، مانند setPresetTheme({ appearance: 'system' }). سپس ویرایشگر حالت روشن یا تیره‌ای را نشان می‌دهد که سیستم‌عامل گزارش می‌کند، یا حالتی را که setSystemAppearance تعیین می‌کند، و با تغییر آن، حالت نمایش را عوض می‌کند.
فراخوانی بعدی setPresetTheme با 'light' یا 'dark'، یا انتخاب Light یا Dark در سازندهٔ طرح زمینه یا جست‌وجوی سریع، جایگزین 'system' می‌شود و باقی می‌ماند: تغییر بعدی سیستم‌عامل دیگر آن را بازنویسی نمی‌کند، حتی با اینکه systemDarkMode هنوز true است. پیش از نسخهٔ 4.0.0، تغییر بعدی سیستم‌عامل آن را بازنویسی می‌کرد.
خاموش کردن آن وقتی ظاهر 'system' است، حالت روشن یا تیره‌ای را که در آن لحظه نمایش داده می‌شود نگه می‌دارد. خاموش کردن آن پس از اینکه ظاهر از 'system' به حالت دیگری تغییر کرده است، ظاهر را همان‌طور که هست باقی می‌گذارد.
تغییر آن هیچ رویدادی ارسال نمی‌کند.

editor.systemDarkMode = true;
// or
editor.setAttribute('system-dark-mode', 'true');

<erd-editor system-dark-mode></erd-editor>

enableThemeBuilder

تعیین می‌کند که آیا رابط کاربری‌ای برای تنظیم آسان طرح‌های زمینهٔ آماده ارائه شود.
این صفت دکمهٔ Theme را در نوار ابزار نمایش می‌دهد که سازندهٔ طرح زمینه را با Accent color، Gray color و Appearance باز می‌کند. از نسخهٔ 4.0.0، Appearance علاوه بر Light و Dark گزینهٔ System را هم ارائه می‌دهد و تا وقتی این صفت روشن است، جست‌وجوی سریع Theme را با System، Light و Dark فهرست می‌کند. زبان و طرح زمینه را ببینید.

editor.enableThemeBuilder = true;
// or
editor.setAttribute('enable-theme-builder', 'true');

<erd-editor enable-theme-builder></erd-editor>

تغییر طرح زمینهٔ آماده از این پنل یا از جست‌وجوی سریع، رویداد changePresetTheme را ارسال می‌کند.

enableLocalePicker

از نسخهٔ 4.0.0، تعیین می‌کند که آیا رابط کاربری‌ای برای انتخاب زبان نمایش ویرایشگر ارائه شود.
این صفت دکمهٔ Display Language را در نوار ابزار نمایش می‌دهد که وقتی هر دو دکمه نمایش داده شوند، پس از Theme قرار می‌گیرد. این دکمه انتخابگر زبان نمایش را باز می‌کند و جست‌وجوی سریع Display Language را فهرست می‌کند. هر دو گزینهٔ System و 25 زبان را ارائه می‌دهند؛ زبان و طرح زمینه را ببینید.
همچنین تعیین می‌کند که ویرایشگر پیش از فراخوانی setLocale یا انتخاب یک زبان چه چیزی نشان دهد: تا وقتی روشن است 'system' و تا وقتی خاموش است انگلیسی، بنابراین عنصری که هیچ چیزی را پیکربندی نمی‌کند همان انگلیسی همیشگی را نشان می‌دهد. با روشن یا خاموش کردن آن، ویرایشگر بی‌درنگ بین این دو جابه‌جا می‌شود. وقتی زبانی تنظیم یا انتخاب شد، آن انتخاب، روشن یا خاموش بودن این صفت هر چه باشد، باقی می‌ماند.
برای اینکه نخستین فریم از 'system' پیروی کند، آن را پیش از افزوده شدن عنصر به صفحه تنظیم کنید.
هر انتخاب، changeLocale را ارسال می‌کند.

editor.enableLocalePicker = true;
// or
editor.setAttribute('enable-locale-picker', 'true');

<erd-editor enable-locale-picker></erd-editor>

enableWelcomeScreen

از نسخهٔ 4.0.0، تعیین می‌کند که آیا نمودار خالی با صفحهٔ خوش‌آمد به خواننده خوش‌آمد بگوید.
تا وقتی سند هیچ جدول، هیچ یادداشت نمایش‌داده‌شده و هیچ گروه جدول نمایش‌داده‌شده‌ای ندارد، این صفحه روی زبانهٔ ERD قرار می‌گیرد. تا وقتی readonly تنظیم شده است، در حالت ذن، یا تا وقتی ویژگی‌های جدول، نمایشگر تفاوت‌ها، سفر در زمان یا پیش‌نمایش چیدمان خودکار باز است، نمایش داده نمی‌شود. نخستین جدول، یادداشت نمایش‌داده‌شده یا گروه جدول نمایش‌داده‌شده آن را کنار می‌زند و واگردی که به نمودار خالی برگردد آن را بازمی‌گرداند.
ردیف‌های New Table، New Memo و Command Palette در آن، نخستین ترکیب کلید addTable، addMemo و search را همان‌طور که setKeyBindingMap باقی گذاشته است نشان می‌دهند و برای نامی که خالی گذاشته شده است چیزی نشان نمی‌دهند. پیکان‌های آن فقط در جایی به دکمه‌های Theme و Display Language اشاره می‌کنند که enableThemeBuilder و enableLocalePicker آن‌ها را نمایش دهند.
در منوی آن، ↑، ↓، Home و End بین ردیف‌ها حرکت می‌کنند و رفتار پیش‌فرضشان لغو و انتشارشان متوقف می‌شود. انتشار Enter و Space متوقف می‌شود اما رفتار پیش‌فرضشان لغو نمی‌شود، بنابراین ردیف دارای فوکوس آن‌ها را دریافت می‌کند، و Escape در میان قالب‌های Import به عقب برمی‌گردد و رفتار پیش‌فرضش لغو و انتشارش متوقف می‌شود. هر کلید دیگری طبق معمول به ویرایشگر و صفحه می‌رسد.
این صفحه چیزی را در سند تغییر نمی‌دهد، بنابراین value را همان‌طور که بود باقی می‌گذارد و هیچ رویداد change ارسال نمی‌کند.
آن را پس از اینکه setInitialValue سند را بارگذاری کرد روشن کنید، همان‌طور که میزبان‌های رسمی انجام می‌دهند، تا این صفحه هرگز روی فایلی که هنوز در حال بارگذاری است لحظه‌ای ظاهر نشود.

editor.enableWelcomeScreen = true;
// or
editor.setAttribute('enable-welcome-screen', 'true');

<erd-editor enable-welcome-screen></erd-editor>

value

getter

سند فعلی را به‌صورت یک رشتهٔ JSON برمی‌گرداند، مطابق طرح‌واره‌ای که ویرایشگر تعریف می‌کند.
از نسخهٔ 4.0.0، این مقدار شکل ذخیره‌سازی است، یعنی سند به همان شکلی که در فایل نگه داشته می‌شود، که همان چیزی است که صادر کردن با قالب json می‌نویسد و میزبان‌های رسمی ذخیره می‌کنند. این مقدار فقط موجودیت‌های حذف‌نشده را در بر دارد، بدون موجودیت‌های حذف‌شده، ترتیب لایه‌ها یا چیزهایی که ویرایشگر خودش محاسبه می‌کند، مانند عرض‌های اندازه‌گیری‌شده، نشانه‌های کلید و نقاط اتصال رابطه‌ها. موجودیت‌های آن با ترتیبی ثابت کلیدگذاری می‌شوند، با دو فاصله تورفتگی دارد و با یک نویسهٔ خط جدید پایان می‌یابد، بنابراین یک سند همیشه بایت‌های یکسانی تولید می‌کند.
هر تنظیمی که قفل آن روشن است با مقداری نوشته می‌شود که روی آن قفل شده است، نه آن‌طور که روی صفحه‌نمایش دیده می‌شود. قفل Viewport مقادیر originX، originY و zoomLevel را نگه می‌دارد و هر یک از Canvas Type، Language، Table Name Case، Column Name Case و Bracket Type تنظیم خودش را نگه می‌دارد. هر تنظیم دیگری همان‌طور که هست نوشته می‌شود و lockSettings همیشه نوشته می‌شود. برای بیت‌ها، Settings را ببینید.
در یک سند جدید همهٔ قفل‌ها روشن‌اند، چه سندی باشد که عنصر پیش از دریافت مقدار نشان می‌دهد و چه سندی که از یک مقدار خالی بارگذاری شده است. value آن مبدأ را روی 0, 0، سطح بزرگ‌نمایی را روی 1، زبانه را روی زبانهٔ ERD و زبان کد مولد کد، شیوه‌های نگارش نام و نوع علامت نقل‌قول را روی مقادیر پیش‌فرض نگه می‌دارد، تا وقتی قفل متناظر خاموش شود.
پیش از نسخهٔ 4.0.0، این مقدار کل سند را به همان شکلی که ویرایشگر نگه می‌داشت، با اعمال ignoreSaveSettings، برمی‌گرداند. اکنون سند به شکلی که ویرایشگر نگه می‌دارد runtimeValue است و ignoreSaveSettings دیگر خوانده یا نوشته نمی‌شود.

const data = editor.value;

setter

وضعیتی از ویرایشگر را که پیش‌تر ذخیره شده است بارگذاری می‌کند. این کار کل سند را جایگزین می‌کند — ابتدا سند فعلی پاک می‌شود.
مانند clear()، setInitialValue() و متدهای setSchema* در حالت پیش‌فرضشان mode: 'replace'، نمای حالت جریان در زبانهٔ مصورسازی را هم دور می‌ریزد: چیدمان آن، جدول‌هایی که به آن‌ها محدود شده است، نمایش ردیف، بزرگ‌نمایی و جابه‌جایی نما. افزودن (mode: 'append') آن را دور نمی‌ریزد.
در فهرست تاریخچه ثبت می‌شود، به‌طوری که Undo, Redo ممکن می‌شود، و رویداد change را ارسال می‌کند.
شکل ذخیره‌سازی، یک runtimeValue یا فایلی را که نسخه‌ای قدیمی‌تر ذخیره کرده است می‌پذیرد.
رشتهٔ خالی، یا هر چیزی که رشته نیست، به‌جای ایجاد خطا یک سند جدید بارگذاری می‌کند، پس پیش از مقداردهی، مقدار را بررسی کنید.
این سند جدید همان سندی است که setInitialValue('') آغاز می‌کند: خالی، با تنظیمات پیش‌فرض و از نسخهٔ 4.0.0 با همهٔ قفل‌ها در حالت روشن. در 3.10.x این سند نه موقعیت پیمایش را ذخیره می‌کرد و نه سطح بزرگ‌نمایی را، و پیش از آن هر دو را ذخیره می‌کرد.
مخزن مشترک این بارگذاری را همراه با JSON کامل سند جدید برای همکاران بازارسال می‌کند، بنابراین هر همتا، از جمله نسخه‌ای قدیمی‌تر، همان سند را بارگذاری می‌کند.
از نسخهٔ 4.0.0، قفل‌های سند بارگذاری‌شده، و مقادیر قفل‌شده‌ای که value پس از آن می‌نویسد، از متن گرفته می‌شوند و نما در جایی قرار می‌گیرد که متن تعیین می‌کند، یا اگر هیچ بخشی از نمودار آنجا رسم نشود، روی نمودار. برای هر تنظیم دیگری که متن قفل می‌کند — زبانه، زبان کد مولد کد، شیوه‌های نگارش نام و نوع علامت نقل‌قول — ویرایشگر همچنان همان چیزی را نشان می‌دهد که پیش از بارگذاری نشان می‌داد. تنظیمی که متن آن را بدون قفل می‌گذارد، مقدار متن را می‌گیرد. در مقابل، setInitialValue همهٔ مقادیر موجود در متن را می‌گیرد؛ برای متنی که هیچ قفلی را نام نمی‌برد هم آن را ببینید.
متنی که JSON نیست، مانند فایلی که نشانگرهای تداخل ادغام در آن باقی مانده است، هم خطایی ایجاد نمی‌کند: سند خالی می‌شود، تنظیمات آن همان‌طور که بودند باقی می‌مانند و خطای تجزیه در کنسول ثبت می‌شود.
تا وقتی readonly تنظیم شده است نادیده گرفته می‌شود؛ برای بارگذاری در ویرایشگر فقط خواندنی از setInitialValue استفاده کنید.

editor.value = 'json...';

runtimeValue

از نسخهٔ 4.0.0، سند را به شکلی که این ویرایشگر نگه می‌دارد، به‌صورت یک رشتهٔ JSON برمی‌گرداند. این خاصیت setter ندارد، بنابراین مقداردهی به آن در کد حالت strict خطا پرتاب می‌کند.
این مقدار چیزهایی را در بر دارد که value کنار می‌گذارد: موجودیت‌های حذف‌شده و ترتیب آن‌ها، ترتیب لایه‌ها، عرض‌های اندازه‌گیری‌شده، نشانه‌های کلید، نقاط اتصال رابطه‌ها و توالی‌ها. در اینجا هم تنظیمات قفل‌شده با مقادیر قفل‌شده‌شان نوشته می‌شوند.
از آن برای مقداردهی اولیهٔ ویرایشگر دیگری که به نشستی در حال اجرا می‌پیوندد، مانند یک همکار یا نمای دومی از همان سند، از طریق setInitialValue آن استفاده کنید. در این صورت، واگرد یک حذف که نشست بعداً ارسال می‌کند، موجودیت را در آنجا به‌طور کامل بازمی‌گرداند، در حالی که ویرایشگری که از value مقداردهی اولیه شده است هیچ موجودیت حذف‌شده‌ای ندارد و به‌جای آن یک جدول خالی و بی‌نام بازمی‌گرداند. ویرایش مشارکتی را ببینید.
دیگر هیچ چیز موجودیت‌های حذف‌شده را جمع‌آوری نمی‌کند، بنابراین تا دفعهٔ بعد که سند از فایلش باز شود در آن باقی می‌مانند.
هرگز آن را در فایل ننویسید: value را ذخیره کنید که JSON Schema آن را می‌پذیرد و این مقدار را نمی‌پذیرد.

otherEditor.setInitialValue(editor.runtimeValue);

setInitialValue

وضعیتی از ویرایشگر را که پیش‌تر ذخیره شده است بارگذاری می‌کند. خود این بارگذاری در فهرست تاریخچه ثبت نمی‌شود، بنابراین نمی‌توان آن را واگرد کرد، و هیچ رویداد change ارسال نمی‌شود.
این متد تاریخچهٔ واگرد را هم پاک می‌کند، بنابراین هیچ کاری که پیش از بارگذاری انجام شده است روی سند بارگذاری‌شده واگرد یا ازنو انجام نمی‌شود.
شکل ذخیره‌سازی، یک runtimeValue یا فایلی را که نسخه‌ای قدیمی‌تر ذخیره کرده است می‌پذیرد و برخلاف مقداردهی به value، همهٔ تنظیمات موجود در متن، از جمله زبانه و تنظیمات کد، را می‌گیرد.
رشتهٔ خالی، یا هر چیزی که رشته نیست، به‌جای ایجاد خطا یک سند جدید بارگذاری می‌کند، بنابراین setInitialValue('') یک نمودار خالی را آغاز می‌کند.
از نسخهٔ 4.0.0، در این سند جدید، که همان چیزی است که عنصر پیش از دریافت هر مقداری نشان می‌دهد، همهٔ قفل‌ها روشن‌اند. پیمایش، بزرگ‌نمایی، جابه‌جایی بین زبانه‌ها و تغییر زبان کد مولد کد، شیوه‌های نگارش نام یا نوع علامت نقل‌قول، value را همان‌طور که بود باقی می‌گذارند و هیچ رویداد change ارسال نمی‌کنند. در 3.10.x این سند نه موقعیت پیمایش را ذخیره می‌کرد و نه سطح بزرگ‌نمایی را، و پیش از آن هر دو را ذخیره می‌کرد.
سندی که از متن بارگذاری می‌شود قفل‌هایی را که نام می‌برد نگه می‌دارد. سندی که هیچ قفلی را نام نمی‌برد — هر فایلی که پیش از نسخهٔ 4.0.0 ذخیره شده است، ignoreSaveSettings آن هر چه بوده باشد، و فایل .vuerd نسخهٔ v2 — با همهٔ قفل‌ها در حالت روشن، با Viewport قفل‌شده روی مبدأ 0, 0 و سطح بزرگ‌نمایی 1، در زبانهٔ ERD و با زبان کد، شیوه‌های نگارش نام و نوع علامت نقل‌قولی که ذخیره کرده بود باز می‌شود.
در هر دو حالت، نما در نمای سند باز می‌شود — نمایی که متن ذخیره کرده است، اگر قفل‌هایش را نام ببرد، و مبدأ 0, 0 با سطح بزرگ‌نمایی 1، اگر هیچ قفلی را نام نبرد — یا اگر هیچ بخشی از نمودار آنجا رسم نشود، روی نمودار. Viewport قفل‌شده همچنان مقادیر قفل‌شدهٔ خود را در value نگه می‌دارد.
از نسخهٔ 4.0.0، این متد وضعیت همکاری سندی را که پیش‌تر نگه داشته می‌شد هم دور می‌ریزد و مخزن مشترک این ویرایشگر که از قبل مشترک شده است، دوباره وضعیت ویرایشگرهای دیگر را از آن‌ها درخواست می‌کند، بنابراین ویرایشگری که در یک نشست در حال اجرا دوباره بارگذاری شده است خود را به‌روز می‌کند. چنین ویرایشگری را با runtimeValue ویرایشگری دیگر مقداردهی اولیه کنید.
متنی که JSON نیست هم خطایی ایجاد نمی‌کند: سند خالی می‌شود، تنظیمات آن همان‌طور که بودند باقی می‌مانند و خطای تجزیه در کنسول ثبت می‌شود.
برخلاف مقداردهی به value، این متد با readonly مسدود نمی‌شود، بنابراین راه بارگذاری سند در نمایشگر فقط خواندنی همین است.

editor.setInitialValue('json...');

بارگذاری در شروع، ذخیره هنگام تغییر.

editor.setInitialValue(localStorage.getItem('my-diagram') ?? '');
editor.addEventListener('change', () => {
  localStorage.setItem('my-diagram', editor.value);
});

رویدادها

change، changePresetTheme و changeLocale تنها سه رویداد عمومی هستند؛ changeLocale در نسخهٔ 4.0.0 اضافه شده است.
این عنصر برای سازوکار داخلی خودش رویدادهای داخلی @dineug/erd-editor/internal-* را هم روی خودش ارسال می‌کند؛ این رویدادها بخشی از API نیستند.

change

وقتی در ویرایشگر تغییری رخ دهد، یک رویداد ارسال می‌کند.
این رویداد با تأخیر تجمیعی 200 میلی‌ثانیه ارسال می‌شود و تا وقتی readonly برابر true است ارسال نمی‌شود.
این رویداد برای هر تغییری در سند ارسال می‌شود — ویرایش در رابط کاربری، مقداردهی به value، clear()، هر یک از متدهای setSchema* و از نسخهٔ 4.0.0، setSchemaJSON() و Import and Add. setInitialValue آن را ارسال نمی‌کند.
هیچ کاری که درون حالت جریان در زبانهٔ مصورسازی انجام شود آن را ارسال نمی‌کند — بزرگ‌نمایی، جابه‌جایی نما، جابه‌جایی کارت‌ها، Tidy Up، نمایش ردیف یا محدود کردن نما از یک کارت — زیرا هیچ‌یک از این‌ها تغییری در سند نیست.
از نسخهٔ 4.0.0، تغییر تنظیمی که قفل آن روشن است هم آن را ارسال نمی‌کند، زیرا فقط آنچه را روی صفحه‌نمایش دیده می‌شود تغییر می‌دهد و هرگز value را تغییر نمی‌دهد: پیمایش یا بزرگ‌نمایی بوم ERD تا وقتی Viewport قفل است، جابه‌جایی زبانه تا وقتی Canvas Type قفل است و تغییر زبان کد مولد کد، شیوهٔ نگارش نام جدول، شیوهٔ نگارش نام ستون یا نوع علامت نقل‌قول تا وقتی قفل مربوط به خودش روشن است. فقط همین تغییرها کنار گذاشته می‌شوند، بنابراین دسته‌ای که سند را هم ویرایش کند همچنان آن را ارسال می‌کند. قفل کردن یا باز کردن قفل یک تنظیم آن را ارسال می‌کند.
در یک سند جدید و در هر فایلی که پیش از نسخهٔ 4.0.0 ذخیره شده است همهٔ قفل‌ها روشن‌اند، بنابراین به‌طور پیش‌فرض پیمایش، بزرگ‌نمایی و جابه‌جایی بین زبانه‌ها چیزی ارسال نمی‌کنند. این شامل تمرکز روی جدول‌ها از زبانهٔ ERD، دکمهٔ کارت پیوند خارجی که از حالت جریان به زبانهٔ ERD بازمی‌گردد، رفتن به یک ردیف کاوشگر یا یک مورد منطبق جست‌وجو و باز کردن کاوشگر یا رفتن به یک نتیجهٔ جست‌وجوی سریع از زبانه‌ای دیگر می‌شود. هر یک از این‌ها فقط تا وقتی قفلی که آن را پوشش می‌دهد خاموش است یک رویداد change ارسال می‌کند: Canvas Type برای جابه‌جایی زبانه و Viewport برای پیمایشی که دکمهٔ کارت، نتیجهٔ جست‌وجوی سریع، ردیف کاوشگر یا مورد منطبق جست‌وجو نیز انجام می‌دهد. از نسخهٔ 4.1.0، همهٔ این پیمایش‌ها از یک قاعده پیروی می‌کنند، مقصد پرش، بنابراین نتیجهٔ جدول در جست‌وجوی سریع دیگر هر بار پیمایش نمی‌کند و پرشی که قاعده نما را در جای خود باقی می‌گذارد هیچ پیمایشی برای ارسال ایجاد نمی‌کند. باز کردن، بستن یا تغییر اندازهٔ کاوشگر بوم را بدون جابه‌جا کردن مبدأ آن باریک‌تر یا پهن‌تر می‌کند و این کار هم چیزی ارسال نمی‌کند. پیش از نسخهٔ 4.0.0، پیمایش، بزرگ‌نمایی و جابه‌جایی بین زبانه‌ها همیشه آن را ارسال می‌کردند، حتی وقتی editor.value یکسان می‌ماند.
برای صرف‌نظر کردن از نوشتن‌هایی که چیزی را تغییر نمی‌دهند، editor.value را با مقداری که آخرین بار ذخیره کرده‌اید مقایسه کنید، نه با فایلی که بارگذاری کرده‌اید: فایلی که نسخه‌ای قدیمی‌تر نوشته است، فایل v2 یا فایلی که دستی ویرایش شده است، می‌تواند بلافاصله پس از بارگذاری در value متفاوت از آب درآید، زیرا value آن را به شکل ذخیره‌سازی می‌نویسد. فایلی که قفل Viewport آن خاموش است و مبدأ آن هیچ بخشی از نمودار را روی این صفحه‌نمایش رسم نمی‌کند هم همین‌طور است: بارگذاری، نما را روی نمودار می‌برد و value جایی را که نما در آن قرار می‌گیرد می‌نویسد. از نسخهٔ 4.0.0، عرض‌های اندازه‌گیری‌شده دیگر باعث این موضوع نمی‌شوند، زیرا value هیچ عرضی را نگه نمی‌دارد. میزبانی که فایل می‌نویسد می‌تواند به‌جای آن، ویرایش را با مقدار changed در مخزن رونوشت از تغییر نما تشخیص دهد؛ on@change را ببینید.
این رویداد خاصیت detail ندارد و نه bubble می‌شود و نه از مرز shadow root عبور می‌کند، بنابراین روی خود عنصر به آن گوش دهید و editor.value را در تابع شنونده بخوانید.

editor.addEventListener('change', event => {
  const data = event.target.value;
});

changePresetTheme

هنگامی ارسال می‌شود که طرح زمینهٔ آماده از سازندهٔ طرح زمینهٔ داخلی، یا از نسخهٔ 4.0.0 از Theme در جست‌وجوی سریع، تغییر کند. هر انتخابی آن را ارسال می‌کند، از جمله انتخاب گزینه‌ای که از قبل فعال است.
فراخوانی setPresetTheme یا setSystemAppearance توسط خودتان، یا روشن یا خاموش کردن systemDarkMode، آن را ارسال نمی‌کند.
event.detail همان ThemeOptions کامل پس از انتخاب است — { appearance, grayColor, accentColor } — نه مقدار جزئی‌ای که درخواست شده بود. از نسخهٔ 4.0.0، تا وقتی System انتخاب شده است، appearance آن 'system' است، نه حالت روشن یا تیره‌ای که نشان می‌دهد، بنابراین آن را همان‌طور که هست ذخیره کنید و به setPresetTheme برگردانید.

editor.addEventListener('changePresetTheme', event => {
  const themeOptions = event.detail;
});

changeLocale

از نسخهٔ 4.0.0، هنگامی ارسال می‌شود که زبانی در ویرایشگر انتخاب شود، از انتخابگر زبان نمایش یا از Display Language در جست‌وجوی سریع، که هر دو را enableLocalePicker روشن می‌کند.
این رویداد پس از اعمال زبان و با هر انتخاب، از جمله انتخاب گزینه‌ای که از قبل فعال است، ارسال می‌شود. setLocale و setSystemLocale هرگز آن را ارسال نمی‌کنند و تغییر زبان‌های مرورگر هم آن را ارسال نمی‌کند. تغییر زبان هیچ رویداد change ارسال نمی‌کند.
event.detail برابر { locale } است، یک LocaleOption: اگر System انتخاب شده باشد 'system' و در غیر این صورت کد زبان. عنصر انتخاب را به خاطر نمی‌سپارد، بنابراین آن را ذخیره کنید و در بارگذاری بعدی به setLocale بدهید.
مانند رویداد change، این رویداد bubble نمی‌شود، بنابراین روی خود عنصر به آن گوش دهید.

editor.addEventListener('changeLocale', event => {
  const { locale } = event.detail; // 'system' | 'ko-KR' | ...
});

focus

فوکوس را به ویرایشگر می‌دهد.

editor.focus();

blur

فوکوس را از ویرایشگر برمی‌دارد.

editor.blur();

clear

سند را خالی می‌کند و همهٔ جدول‌ها، ستون‌ها، رابطه‌ها، شاخص‌ها و یادداشت‌ها و از نسخهٔ 4.0.0 همهٔ گروه‌های جدول را حذف می‌کند.
همهٔ تنظیمات باقی می‌مانند، از جمله پایگاه داده، موقعیت نما، سطح بزرگ‌نمایی، گزینه‌های نمایش جدول، هر قفل با مقداری که نگه می‌دارد و اسکریپت‌های Before tables و After tables در زبانهٔ طرح‌واره SQL، بنابراین فایل پاک‌شده همچنان همان چیزهایی را ذخیره می‌کند که پیش‌تر ذخیره می‌کرد. برای آغاز یک سند جدید، به‌جای آن '' را به value اختصاص دهید یا setInitialValue('') را فراخوانی کنید.
در فهرست تاریخچه ثبت می‌شود، بنابراین می‌توان آن را واگرد کرد، و رویداد change را ارسال می‌کند. واگرد، سند را به همان شکلی که ویرایشگر نگه می‌داشت، با هر تنظیم قفل‌شده در مقدار قفل‌شده‌اش، بازمی‌گرداند. تا وقتی readonly تنظیم شده است نادیده گرفته می‌شود.

editor.clear();

destroy

نمونهٔ ویرایشگر را به‌طور کامل از بین می‌برد، به‌طوری که دیگر نمی‌توان از آن دوباره استفاده کرد.
شنونده‌ها و اشتراک‌های ویرایشگر را آزاد می‌کند و همهٔ مخزن‌های مشترکی را که getSharedStore برگردانده است از بین می‌برد.
دستهٔ دنباله‌ای که مخزن مشترک هنوز نگه داشته است همراه با آن دور ریخته می‌شود؛ برای ارسال آن، ابتدا flushStreamBuffers آن مخزن را فراخوانی کنید.

editor.destroy();

setKeyBindingMap

میان‌برهای صفحه‌کلید را دوباره تعریف می‌کند.
edit، stop، undo، redo، zoomIn، zoomOut و zoomReset ثابت‌اند و نمی‌توان آن‌ها را دوباره تعریف کرد.
فقط بیست‌ویک نام زیر نوشته می‌شوند؛ هر چیز دیگری در شیء، از جمله نام‌های ثابت، نادیده گرفته می‌شود.
از نسخهٔ 3.10.0، search را می‌توان دوباره تعریف کرد و findReplace اضافه شده است. پیش از آن، search ثابت بود. removeSelection از نسخهٔ 4.0.0 اضافه شده است. addTableGroup و groupSelectedTables از نسخهٔ 4.1.0 اضافه شده‌اند.
مقدار هر کلید میان‌بر باید یک ShortcutOption[] باشد. رشتهٔ تنها نادیده گرفته می‌شود، بنابراین { addTable: [{ shortcut: 'Alt+KeyN' }] } را به‌جای { addTable: 'Alt+KeyN' } بنویسید.
آرایهٔ خالی پذیرفته می‌شود و هیچ کلیدی را تخصیص نمی‌دهد: setKeyBindingMap({ findReplace: [] }) کلیدهای Ctrl + F (Windows/Linux) یا ⌘ + F (Mac) را به صفحه وامی‌گذارد و { search: [] } همین کار را برای Ctrl + K (Windows/Linux) یا ⌘ + K (Mac) انجام می‌دهد. دکمهٔ Search در نوار ابزار همچنان جست‌وجوی سریع را باز می‌کند، دکمهٔ Explorer در نوار ابزار همچنان کاوشگر را باز و بسته می‌کند و Toggle Explorer در جست‌وجوی سریع و در منوی زمینهٔ بوم همچنان جست‌وجوی کاوشگر را باز می‌کند یا کاوشگر را می‌بندد؛ هیچ‌یک از این‌ها برای نامی که خالی گذاشته شده است میان‌بری نشان نمی‌دهد. { removeSelection: [] } کلیدهای Delete و Backspace را به صفحه وامی‌گذارد و در این صورت گزینه‌های حذف در منوهای جدول، یادداشت و گروه جدول (Delete، Delete selected، Delete column، Delete columns) هیچ میان‌بری نشان نمی‌دهند.
از نسخهٔ 4.1.0، { addTableGroup: [] } کلید Alt + G (Windows/Linux) یا ⌥ + G (Mac) را به صفحه وامی‌گذارد و { groupSelectedTables: [] } کلیدهای T و سپس G را به صفحه وامی‌گذارد. New Table Group در نوار ابزار بوم، در منوی زمینهٔ بوم و در جست‌وجوی سریع، Group selected tables در منوی جدول و Group Selected Tables در جست‌وجوی سریع همچنان کار می‌کنند، بدون اینکه میان‌بری نشان داده شود. راهنمای ابزار دکمه‌های New Table، New Memo و New Table Group در نوار ابزار بوم، نخستین ترکیب کلید addTable، addMemo و addTableGroup را نام می‌برد، یا برای کلید میان‌بری که خالی گذاشته شده است فقط نام دکمه را.
این فراخوانی یک ادغام جزئی است: نام‌هایی که کنار می‌گذارید مقادیر پیش‌فرض خود را نگه می‌دارند و دو بار فراخوانی آن تغییرات قبلی را حفظ می‌کند. هیچ getter برای کلیدهای میان‌بر فعلی وجود ندارد: createKeyBindingMap مقادیر پیش‌فرض را برمی‌گرداند، نه آنچه setKeyBindingMap تغییر داده است.

type ShortcutOption = {
  shortcut: string;
  preventDefault?: boolean;
  stopPropagation?: boolean;
};

const defaultKeyBindingMap: Omit<
  KeyBindingMap,
  | 'edit'
  | 'stop'
  | 'undo'
  | 'redo'
  | 'zoomIn'
  | 'zoomOut'
  | 'zoomReset'
> = {
  search: [
    { shortcut: '$mod+KeyK', preventDefault: true, stopPropagation: true },
  ],
  findReplace: [
    { shortcut: '$mod+KeyF', preventDefault: true, stopPropagation: true },
  ],
  addTable: [{ shortcut: 'Alt+KeyN', preventDefault: true }],
  addColumn: [{ shortcut: 'Alt+Enter', preventDefault: true }],
  addMemo: [{ shortcut: 'Alt+KeyM', preventDefault: true }],
  addTableGroup: [
    { shortcut: 'Alt+KeyG', preventDefault: true, stopPropagation: true },
  ],
  groupSelectedTables: [{ shortcut: 'KeyT KeyG', preventDefault: true }],
  removeTable: [
    { shortcut: '$mod+Backspace', preventDefault: true },
    { shortcut: '$mod+Delete', preventDefault: true },
  ],
  removeColumn: [
    { shortcut: 'Alt+Backspace', preventDefault: true },
    { shortcut: 'Alt+Delete', preventDefault: true },
  ],
  removeSelection: [
    { shortcut: 'Delete', preventDefault: true },
    { shortcut: 'Backspace', preventDefault: true },
  ],
  primaryKey: [{ shortcut: 'Alt+KeyK', preventDefault: true }],
  selectAllTable: [
    { shortcut: '$mod+KeyA', preventDefault: true },
    { shortcut: '$mod+Alt+KeyA', preventDefault: true },
  ],
  selectAllColumn: [{ shortcut: 'Alt+KeyA', preventDefault: true }],
  relationshipZeroOne: [{ shortcut: '$mod+Alt+Digit1', preventDefault: true }],
  relationshipZeroN: [{ shortcut: '$mod+Alt+Digit2', preventDefault: true }],
  relationshipOneOnly: [{ shortcut: '$mod+Alt+Digit3', preventDefault: true }],
  relationshipOneN: [{ shortcut: '$mod+Alt+Digit4', preventDefault: true }],
  tableProperties: [{ shortcut: 'Alt+Space', preventDefault: true }],
  focusView: [
    { shortcut: 'Alt+KeyF', preventDefault: true, stopPropagation: true },
  ],
  handTool: [{ shortcut: 'Space', preventDefault: true }],
  zenMode: [
    { shortcut: 'Alt+KeyZ', preventDefault: true, stopPropagation: true },
  ],
};

// example
editor.setKeyBindingMap({
  addTable: [{ shortcut: '$mod+KeyN', preventDefault: true }],
});

selectAllTable، handTool، removeSelection و از نسخهٔ 4.1.0، groupSelectedTables جای خود را به مکان‌نما می‌دهند: تا وقتی فوکوس در یک فیلد ورودی، یک ناحیهٔ متنی یا یک contenteditable است، به‌جای رسیدن به بوم، $mod + A متن را انتخاب می‌کند، Space یک فاصله تایپ می‌کند، Delete و Backspace متن را پاک می‌کنند و T و سپس G همان دو حرف را تایپ می‌کند. رفتار پیش‌فرض هیچ‌یک از این کلیدها لغو نمی‌شود. هر کلیدی که آن‌ها را دوباره به آن تخصیص دهید، همین رفتار را دارد.

از نسخهٔ 4.0.0، removeSelection (Delete یا Backspace) موارد انتخاب‌شده را در زبانهٔ ERD در یک گام واگرد و بدون پرسیدن حذف می‌کند. وقتی جدول دارای فوکوس تنها مورد انتخاب‌شده باشد، یک یا چند ستون آن انتخاب شده باشند و سطح بزرگ‌نمایی ردیف‌های آن را رسم کند، آن ستون‌ها را حذف می‌کند؛ در غیر این صورت همهٔ جدول‌ها، یادداشت‌ها و گروه‌های جدول انتخاب‌شده را حذف می‌کند و جدول‌های درون گروه باقی می‌مانند. حذف جدول و یادداشت را ببینید.
نگه داشتن کلید فقط یک بار حذف می‌کند و تا وقتی ویرایشگر خانه، یادداشت یا نام گروه جدول باز است چیزی حذف نمی‌شود. بیرون از فیلدهای متنی و پنل‌هایی که جلوی عبور کلیدهای میان‌بر را می‌گیرند (createKeyBindingMap را ببینید)، تا وقتی ویرایشگر فوکوس دارد، رفتار پیش‌فرض این کلید در همهٔ زبانه‌ها لغو می‌شود، روی دکمهٔ دارای فوکوس نوار ابزار هم، و در ویرایشگر فقط خواندنی نیز، که در آن چیزی حذف نمی‌کند.

از نسخهٔ 4.1.0، addTableGroup (Alt+KeyG) رسم New Table Group را در زبانهٔ ERD آماده می‌کند، به‌طوری که فشردن بعدی دکمهٔ اصلی ماوس روی بوم گروه را رسم می‌کند، و فشار دادن دوبارهٔ آن آماده‌سازی رسم را لغو می‌کند، مانند دکمهٔ New Table Group در نوار ابزار بوم. groupSelectedTables (KeyT KeyG، T و سپس G) جدول‌های انتخاب‌شده را در یک گروه جدید قرار می‌دهد و ویرایشگر نام آن را باز می‌کند، مانند Group selected tables در منوی زمینهٔ جدول. اگر هیچ جدولی انتخاب نشده باشد چیزی اضافه نمی‌کند؛ یادداشت یا گروه جدول انتخاب‌شده به حساب نمی‌آید. رسم گروه و گروه‌بندی جدول‌های انتخاب‌شده را ببینید.
هر دو فقط در جایی عمل می‌کنند که منوها امکان گروه را ارائه می‌دهند: نه تا وقتی readonly تنظیم شده است، نه تا وقتی گزینهٔ نمایش Table Groups گروه‌ها را پنهان کرده است و نه تا وقتی ویرایشگر خانه، یادداشت یا نام گروه جدول باز است. مانند دیگر کلیدهای میان‌بر بوم، فقط در زبانهٔ ERD عمل می‌کنند و نه تا وقتی جست‌وجوی سریع، ویژگی‌های جدول، نمایشگر تفاوت‌ها، سفر در زمان، پیش‌نمایش چیدمان خودکار، Export image یا Map Columns باز است. در جایی که کاری انجام نمی‌دهند، رفتار پیش‌فرض کلید همچنان لغو می‌شود، مگر اینکه groupSelectedTables جای خود را به مکان‌نما بدهد. انتشار addTableGroup هم، مانند focusView و zenMode، متوقف می‌شود، بنابراین شنوندهٔ keydown صفحه در فاز bubbling هرگز آن را دریافت نمی‌کند.

از نسخهٔ 3.10.0، findReplace ($mod+KeyF) یافتن و جایگزینی را باز می‌کند. از نسخهٔ 4.1.0، کاوشگری را که یافتن و جایگزینی در آن قرار دارد باز و بسته می‌کند و زبانهٔ میان‌برها آن را با نام Toggle Explorer فهرست می‌کند.
تا وقتی دکمهٔ Explorer در نوار ابزار فشرده نمایش داده می‌شود (کاوشگر در زبانهٔ ERD باز است و حالت ذن آن را پنهان نکرده است)، این کلید کاوشگر را می‌بندد، مگر اینکه جست‌وجوی سریع، ویژگی‌های جدول، سازندهٔ طرح زمینه، انتخابگر زبان نمایش، کادر گفت‌وگوی Export image یا Map Columns باز باشد. در غیر این صورت، هر کدام از این‌ها را که باز است می‌بندد، زبانهٔ ERD را از هر زبانهٔ دیگری به جلو می‌آورد و کاوشگر را با مکان‌نما در فیلد Find آن و عبارت جست‌وجوی انتخاب‌شده باز می‌کند. ویرایشگری که برای نمایش کاوشگر در کنار بوم بیش از حد باریک است، آن را باز نگه می‌دارد اما کنار می‌برد و اعلان Widen the window to show the Explorer را نشان می‌دهد. پیش از نسخهٔ 4.1.0، این کلید پنل شناور یافتن و جایگزینی را باز می‌کرد یا صفحه‌کلید را به فیلد آن برمی‌گرداند و هرگز آن را نمی‌بست.
این کلید جای خود را به مکان‌نما نمی‌دهد: تا وقتی ویرایشگر فوکوس دارد، در همهٔ زبانه‌ها، از بوم یا از یک فیلد ورودی درون ویرایشگر، دریافت می‌شود. رفتار پیش‌فرض آن لغو می‌شود، بنابراین مرورگر نوار یافتن را باز نمی‌کند، و انتشارش متوقف می‌شود، بنابراین هیچ شنوندهٔ keydown صفحه در فاز bubbling آن را دریافت نمی‌کند. وقتی ویرایشگر خانه یا یادداشت، یا از نسخهٔ 4.0.0 ویرایشگر نام گروه جدول، باز است، رفتار پیش‌فرض آن همچنان لغو و انتشارش متوقف می‌شود، اما کاری انجام نمی‌دهد.
تا وقتی نمایشگر تفاوت‌ها، سفر در زمان یا پیش‌نمایش چیدمان خودکار، در هر زبانه‌ای، باز است، یا تا وقتی روش ورودی (IME) هنوز در حال ترکیب است، نه رفتار پیش‌فرض آن لغو می‌شود و نه انتشارش متوقف می‌شود، بنابراین قابلیت یافتن خود مرورگر یا میزبان آن را دریافت می‌کند. درون کاوشگر، انتشار فشاری که هنوز در حال ترکیب است همان‌جا متوقف می‌شود، هرچند رفتار پیش‌فرضش لغو نمی‌شود. هر کلیدی که findReplace را دوباره به آن تخصیص دهید، همین رفتار را دارد.

focusView فقط در زبانهٔ ERD عمل می‌کند. وقتی دست‌کم یک جدول انتخاب شده باشد، زبانهٔ مصورسازی را در حالت جریان باز می‌کند، محدودشده به آن جدول‌ها و هر جدولی که با یک رابطه به آن‌ها متصل است؛ یادداشت یا گروه جدول انتخاب‌شده به حساب نمی‌آید و اگر هیچ جدولی انتخاب نشده باشد کاری انجام نمی‌دهد. تمرکز روی جدول‌ها را ببینید.

stop (Escape) در زبانهٔ ERD به ویرایشگر باز خانه یا یادداشت، یا رابطه‌ای که در حال رسم است، پایان می‌دهد و انتخاب را همان‌طور که هست باقی می‌گذارد. از نسخهٔ 4.0.0، به ویرایشگر نام گروه جدول، بدون نوشتن نام، و به رسم New Table Group هم پایان می‌دهد. ویرایشگر روی این فشار کلید preventDefault() را فراخوانی می‌کند.
وقتی هیچ‌یک از این‌ها باز نباشد، Escape انتخاب و خانهٔ دارای فوکوس را پاک می‌کند و رفتار پیش‌فرضش لغو نمی‌شود. بنابراین خارج شدن از ویرایش و پاک کردن انتخاب به دو بار فشار دادن کلید نیاز دارد.
جز در کاوشگر، قالب‌های Import در صفحهٔ خوش‌آمد و انتخابگرها و کادرهای گفت‌وگوی زیر، ویرایشگر هرگز جلوی انتشار Escape را نمی‌گیرد، بنابراین صفحه‌ای که خودش به آن گوش می‌دهد، برای نمونه برای بستن کادر گفت‌وگوی خودش، هر دو فشار کلید را دریافت می‌کند و می‌تواند از فشاری که defaultPrevented آن true است صرف‌نظر کند.
تا وقتی جست‌وجوی سریع، ویژگی‌های جدول، نمایشگر تفاوت‌ها، پیش‌نمایش چیدمان خودکار یا سفر در زمان باز است، Escape به‌جای آن، همان را می‌بندد و انتخاب را همان‌طور که هست باقی می‌گذارد. رفتار پیش‌فرض این فشار کلید هم لغو نمی‌شود.
از نسخهٔ 4.0.0، کادر گفت‌وگوی باز Export image یا Map Columns هم Escape را دریافت می‌کند، خودش را می‌بندد و انتخاب را همان‌طور که هست باقی می‌گذارد. هر یک از آن‌ها هنگام باز شدن صفحه‌کلید را در اختیار می‌گیرد و رفتار پیش‌فرض آن Escape لغو و انتشارش متوقف می‌شود.
از نسخهٔ 4.1.0، کلید Escape که با فوکوس درون کاوشگر، در درخت، فیلدها یا دکمه‌های آن، فشار داده شود، صفحه‌کلید را به بوم برمی‌گرداند و کاوشگر را باز و انتخاب را همان‌طور که هست باقی می‌گذارد. ویرایشگر روی آن هم preventDefault() و هم stopPropagation() را فراخوانی می‌کند، بنابراین هرگز به شنوندهٔ keydown صفحه در فاز bubbling نمی‌رسد.
کلید Escape روی بوم هرگز کاوشگر را نمی‌بندد. پیش از نسخهٔ 4.1.0، Escape درون پنل یافتن و جایگزینی آن را می‌بست و فشار آن روی بوم، پنل را با همان فشاری که انتخاب را پاک می‌کرد می‌بست.
از نسخهٔ 4.0.0، انتخابگر زبان نمایش و انتخابگر رنگ با Escape بسته می‌شوند: درون آن‌ها رفتار پیش‌فرض این کلید لغو و انتشارش متوقف می‌شود و روی بوم، آن‌ها را با همان فشاری که انتخاب را پاک می‌کند می‌بندد، بدون اینکه رفتار پیش‌فرضش لغو یا انتشارش متوقف شود.
کلید Escape که تا وقتی روش ورودی (IME) هنوز در حال ترکیب است فشار داده شود، به ترکیب تعلق دارد. ویرایشگر باز را همان‌طور که هست باقی می‌گذارد و رفتار پیش‌فرضش لغو نمی‌شود، بنابراین صفحه می‌تواند از فشاری که isComposing آن true است، یا keyCode آن 229 است، هم صرف‌نظر کند. درون کاوشگر، انتشار چنین فشاری، مانند هر کلیدی که آنجا در میانهٔ ترکیب فشار داده شود، متوقف هم می‌شود و صفحه‌کلید در فیلد باقی می‌ماند.
پیش از نسخهٔ 3.9.2، یک بار فشار دادن Escape هم به ویرایش یا رسم پایان می‌داد و هم انتخاب را پاک می‌کرد و ویرایشگر هرگز رفتار پیش‌فرض آن را لغو نمی‌کرد.

createKeyBindingMap

از نسخهٔ 3.9.2، بسته createKeyBindingMap() و همراه با آن انواع KeyBindingMap، KeyBindingName و ShortcutOption را صادر می‌کند.
این تابع کلیدهای میان‌بر پیش‌فرض، یعنی هر 28 نام از جمله نام‌های ثابت، را در هر فراخوانی به‌صورت یک نگاشت جدید برمی‌گرداند، بنابراین تغییر نگاشتی که برمی‌گرداند چیز دیگری را تغییر نمی‌دهد.
هر ویرایشگری از همین مقادیر آغاز می‌کند و فراخوانی setKeyBindingMap در آن منعکس نمی‌شود.
فقط createKeyBindingMap در زمان اجرا صادر می‌شود؛ سه مورد دیگر نوع هستند.

type KeyBindingName =
  | 'edit'
  | 'stop'
  | 'search'
  | 'findReplace'
  | 'undo'
  | 'redo'
  | 'addTable'
  | 'addColumn'
  | 'addMemo'
  | 'addTableGroup'
  | 'groupSelectedTables'
  | 'removeTable'
  | 'removeColumn'
  | 'removeSelection'
  | 'primaryKey'
  | 'selectAllTable'
  | 'selectAllColumn'
  | 'relationshipZeroOne'
  | 'relationshipZeroN'
  | 'relationshipOneOnly'
  | 'relationshipOneN'
  | 'tableProperties'
  | 'focusView'
  | 'zoomIn'
  | 'zoomOut'
  | 'zoomReset'
  | 'handTool'
  | 'zenMode';

type KeyBindingMap = Record<KeyBindingName, ShortcutOption[]>;

declare function createKeyBindingMap(): KeyBindingMap;

// example
import { createKeyBindingMap } from '@dineug/erd-editor';

const shortcuts = Object.values(createKeyBindingMap())
  .flat()
  .map(({ shortcut }) => shortcut); // 'Enter', 'Escape', '$mod+KeyK', ...

هر shortcut یک ترکیب کلید با نحو tinykeys است که کلیدش را با KeyboardEvent.code نام می‌برد و در آن $mod در macOS برابر ⌘ و در جاهای دیگر Control است.
از نسخهٔ 4.0.0، ویرایشگر این ترکیب‌های کلید را به‌جای tinykeys خودش و با همان نحو می‌خواند. یک کلید با code خود، یا با key خود با هر بزرگی و کوچکی حروف، تطبیق داده می‌شود و یک فشار کلید فقط وقتی تطبیق می‌یابد که دقیقاً کلیدهای تغییردهنده‌ای که نام می‌برد نگه داشته شده باشند. AltGraph در Windows به‌عنوان Control و Alt و در macOS به‌عنوان Alt حساب می‌شود. فشارهایی که با یک فاصله از هم جدا شده‌اند یک توالی کلید را تشکیل می‌دهند که پس از یک ثانیه بدون keydown از نو آغاز می‌شود.
از نسخهٔ 4.1.0، یکی از مقادیر پیش‌فرض یک توالی کلید است: groupSelectedTables برابر KeyT KeyG است، یعنی T و سپس G. توالی کلید با فشاری که آن را کامل می‌کند اجرا می‌شود و فقط همان فشار preventDefault و stopPropagation آن را می‌گیرد، بنابراین با مقادیر پیش‌فرض T به صفحه می‌رسد و فقط رفتار پیش‌فرض G لغو می‌شود. منوها، جست‌وجوی سریع و زبانهٔ میان‌برها توالی کلید را به‌صورت یک کلید برای هر فشار نشان می‌دهند.
نام‌های ثابت به Enter (edit)، Escape (stop)، $mod+KeyZ (undo)، $mod+Shift+KeyZ (redo)، $mod+Equal (zoomIn)، $mod+Minus (zoomOut) و $mod+Digit0 (zoomReset) تخصیص یافته‌اند. edit و stop هیچ پرچمی ندارند؛ پنج مورد دیگر preventDefault و stopPropagation را دارند. بقیه همان مقادیر پیش‌فرض بالا هستند، از جمله search و findReplace.

ویرایشگر روی عنصر خودش به این کلیدها گوش می‌دهد، بنابراین میزبانی که کلیدها را پیش از ویرایشگر دریافت می‌کند، با کلیدهای میان‌بر سراسری یا شنوندهٔ keydown در فاز capture، باید تا وقتی ویرایشگر فوکوس دارد اجازهٔ عبور آن‌ها را بدهد.
فهرست کلیدهایی را که باید عبور کنند از createKeyBindingMap() بسازید و کلیدهای میان‌بری را که به setKeyBindingMap داده‌اید جایگزین مقادیر پیش‌فرض کنید.
از نسخهٔ 3.10.0، این فهرست شامل $mod+KeyF، ترکیب کلید یافتن خود مرورگر، است. میزبانی که می‌خواهد قابلیت یافتن خودش را روی این ترکیب کلید نگه دارد، setKeyBindingMap({ findReplace: [] }) را فراخوانی می‌کند.
از نسخهٔ 4.0.0، این فهرست Delete و Backspace بدون کلید تغییردهنده را هم در بر دارد. میزبانی که می‌خواهد این کلیدها را برای خودش نگه دارد، setKeyBindingMap({ removeSelection: [] }) را فراخوانی می‌کند.
از نسخهٔ 4.1.0، این فهرست Alt+KeyG و توالی کلید KeyT KeyG را هم در بر دارد که به‌صورت یک رشته می‌آید: آن را در محل فاصله جدا کنید و اجازهٔ عبور هر فشار، از جمله T و G بدون کلید تغییردهنده، را بدهید، زیرا توالی کلیدی که یک فشار آن جا بیفتد هرگز کامل نمی‌شود. میزبانی که می‌خواهد این کلیدها را برای خودش نگه دارد، setKeyBindingMap({ addTableGroup: [] }) یا setKeyBindingMap({ groupSelectedTables: [] }) را فراخوانی می‌کند.

تا وقتی فوکوس درون کاوشگر است، در درخت آن، فیلدهای Find و Replace آن یا دکمه‌هایش، findReplace، search، undo، redo، zoomIn، zoomOut و zoomReset به ویرایشگر می‌رسند، بنابراین findReplace در آنجا همان‌طور عمل می‌کند که روی بوم. هر کلید میان‌بر دیگری، آن‌طور که در حال حاضر تنظیم شده است، در کاوشگر متوقف می‌شود، توالی کلید با آخرین فشارش (با مقادیر پیش‌فرض، G بدون کلید تغییردهنده)، و همچنین کلیدهای جهت‌نما، Tab، Enter، Space، Home، End و هر کلیدی که تا وقتی روش ورودی (IME) هنوز در حال ترکیب است فشار داده شود. جز Escape که صفحه‌کلید را به بوم برمی‌گرداند، انتشار این کلیدها بدون لغو رفتار پیش‌فرضشان متوقف می‌شود، بنابراین در فیلدها، دکمه‌ها و درخت کاوشگر مانند کلیدهای معمولی عمل می‌کنند و نه به بوم می‌رسند و نه به شنوندهٔ keydown صفحه در فاز bubbling: Alt + N در آنجا هیچ جدولی اضافه نمی‌کند و Delete چیزی را حذف نمی‌کند. رفتار پیش‌فرض کلیدهایی که بین ردیف‌های درخت حرکت می‌کنند، آن‌ها را جمع می‌کنند یا به آن‌ها می‌روند، و Enter در فیلد Find یا Replace، که بین موارد منطبق حرکت می‌کند یا جایگزین می‌کند، هم لغو می‌شود.
هر کلید دیگری، مانند ترکیب کلید ذخیره یا پالت فرمان میزبان، طبق معمول به صفحه می‌رسد. کلیدها در کاوشگر را ببینید. پیش از نسخهٔ 4.1.0، پنل شناور یافتن و جایگزینی جلوی عبور کلیدها را به همین شکل می‌گرفت، جز Home، End، آخرین فشار یک توالی کلید و Space تا وقتی handTool به کلید دیگری تخصیص یافته بود.
از نسخهٔ 4.0.0، انتخابگر زبان نمایش هم جلوی عبور کلیدها را به همین شکل می‌گیرد: همان هفت کلید میان‌بر عبور می‌کنند و انتشار هر کلید میان‌بر دیگر (از نسخهٔ 4.1.0، توالی کلید با آخرین فشارش)، کلیدهای جهت‌نما و Tab در آنجا بدون لغو رفتار پیش‌فرضشان متوقف می‌شود، همان‌طور که انتشار هر کلیدی که تا وقتی روش ورودی (IME) هنوز در حال ترکیب است فشار داده شود. ↑، ↓، Home، End، Enter و Space روی یکی از ردیف‌های آن، بین ردیف‌ها حرکت می‌کنند یا یکی را انتخاب می‌کنند و رفتار پیش‌فرضشان هم لغو می‌شود.

$mod

کلید Control را بسته به محیط تغییر می‌دهد.

• Mac: $mod = Meta (⌘)
• Windows/Linux: $mod = Control

جدول کلیدهای میان‌بر

از خاصیت‌های key, code رویداد صفحه‌کلید استفاده می‌کند.
برای موقعیت‌های مطلق از code و برای مقادیر ورودی از key استفاده کنید.

Windows	macOS	key	code
N/A	Command / ⌘	Meta	MetaLeft / MetaRight
Alt	Option / ⌥	Alt	AltLeft / AltRight
Control	Control / ^	Control	ControlLeft / ControlRight
Shift	Shift	Shift	ShiftLeft / ShiftRight
Space	Space	N/A	Space
Enter	Return	Enter	Enter
Esc	Esc	Escape	Escape
Backspace	Delete / ⌫	Backspace	Backspace
Delete	fn + Delete	Delete	Delete
1، 2 و غیره	1، 2 و غیره	1، 2 و غیره	Digit1، Digit2 و غیره
a، b و غیره	a، b و غیره	a، b و غیره	KeyA، KeyB و غیره
-	-	-	Minus
=	=	=	Equal
+	+	+	Equal

طرح زمینه

setPresetTheme

یک طرح زمینهٔ آماده تنظیم می‌کند.
مقادیر پیش‌فرض appearance: 'dark'، grayColor: 'slate' و accentColor: 'indigo' هستند.
هر فیلد به‌طور جداگانه اعمال می‌شود، بنابراین فراخوانی جزئی دو فیلد دیگر را همان‌طور که هستند باقی می‌گذارد. مقداری که یکی از نام‌های زیر نباشد نادیده گرفته می‌شود و این فراخوانی هرگز خطا پرتاب نمی‌کند.
از نسخهٔ 4.0.0، appearance مقدار 'system'، یعنی System در سازندهٔ طرح زمینه، را هم می‌پذیرد. این مقدار حالت روشن یا تیره‌ای را نشان می‌دهد که سیستم‌عامل گزارش می‌کند، یا حالتی را که setSystemAppearance تعیین می‌کند، و با تغییر آن، حالت نمایش را عوض می‌کند.

type ThemeOptions = {
  appearance: 'dark' | 'light' | 'system';
  grayColor: 'gray' | 'mauve' | 'slate' | 'sage' | 'olive' | 'sand';
  accentColor:
    | 'gray'
    | 'gold'
    | 'bronze'
    | 'brown'
    | 'yellow'
    | 'amber'
    | 'orange'
    | 'tomato'
    | 'red'
    | 'ruby'
    | 'crimson'
    | 'pink'
    | 'plum'
    | 'purple'
    | 'violet'
    | 'iris'
    | 'indigo'
    | 'blue'
    | 'cyan'
    | 'teal'
    | 'jade'
    | 'green'
    | 'grass'
    | 'lime'
    | 'mint'
    | 'sky';
};

// example
editor.setPresetTheme({ appearance: 'light' });

setSystemAppearance

از نسخهٔ 4.0.0، برای میزبانی که حالت روشن و تیرهٔ خودش را دارد، مانند طرح زمینهٔ یک IDE، تعیین می‌کند که ظاهر 'system' حالت روشن را نشان دهد یا تیره. تا وقتی یکی از آن‌ها تعیین شده است، تغییرات سیستم‌عامل نادیده گرفته می‌شوند.
null، یا هر مقداری جز 'dark' یا 'light'، دوباره به پیروی از سیستم‌عامل بازمی‌گردد.
تا وقتی ظاهر 'light' یا 'dark' است، چیزی را روی صفحه‌نمایش تغییر نمی‌دهد، اما مقدار نگه داشته می‌شود و به محض اینکه ظاهر 'system' شود اعمال می‌شود. در غیر این صورت بی‌درنگ اعمال می‌شود. چیزی ارسال نمی‌کند و changePresetTheme همچنان 'system' را گزارش می‌دهد.
میزبان‌های VS Code، JetBrains و Obsidian آن را با حالت روشن یا تیرهٔ خودشان فراخوانی می‌کنند و هر بار که آن حالت تغییر کند دوباره فراخوانی می‌کنند.

editor.setPresetTheme({ appearance: 'system' });
editor.setSystemAppearance('light'); // null follows the OS again

setTheme

امکان سفارشی‌سازی طرح زمینه را فراهم می‌کند.
هر فراخوانی کل لایهٔ سفارشی را جایگزین می‌کند، بنابراین برای تغییر یک توکن روی بازنویسی‌ای که از قبل وجود دارد، کل شیء را دوباره ارسال کنید و برای بازگشت به طرح زمینهٔ آماده {} را ارسال کنید.
فقط نام توکن‌های زیر، با مقادیر رشته‌ای، نگه داشته می‌شوند؛ هر چیز دیگری بدون خطا کنار گذاشته می‌شود.
این لایه روی طرح زمینهٔ آماده قرار می‌گیرد، بنابراین فراخوانی بعدی setPresetTheme طرح زمینهٔ آمادهٔ زیرین را عوض می‌کند، در حالی که بازنویسی‌های شما باقی می‌مانند.

JavaScript

type Theme = {
  grayColor1: string;
  grayColor2: string;
  grayColor3: string;
  grayColor4: string;
  grayColor5: string;
  grayColor6: string;
  grayColor7: string;
  grayColor8: string;
  grayColor9: string;
  grayColor10: string;
  grayColor11: string;
  grayColor12: string;

  accentColor1: string;
  accentColor2: string;
  accentColor3: string;
  accentColor4: string;
  accentColor5: string;
  accentColor6: string;
  accentColor7: string;
  accentColor8: string;
  accentColor9: string;
  accentColor10: string;
  accentColor11: string;
  accentColor12: string;

  canvasBackground: string;
  canvasBoundaryBackground: string;

  tableBackground: string;
  tableHeaderBackground: string;
  tableSelect: string;
  tableBorder: string;
  tableShadow: string;

  tableGroupHeaderBackground: string;
  tableGroupBackground: string;
  tableGroupBorder: string;

  memoBackground: string;
  memoSelect: string;
  memoBorder: string;
  memoShadow: string;

  columnSelect: string;
  columnSelectHover: string;
  columnHover: string;

  relationshipHover: string;

  visualizationLink: string;
  visualizationColumn: string;
  visualizationRelationship: string;

  toolbarBackground: string;

  contextMenuBackground: string;
  contextMenuSelect: string;
  contextMenuHover: string;
  contextMenuBorder: string;

  minimapBorder: string;
  minimapShadow: string;
  minimapViewportBorder: string;
  minimapViewportBorderHover: string;

  toastBackground: string;
  toastBorder: string;
  toastSuccess: string;
  toastError: string;

  findReplaceError: string;

  mapColumnsError: string;

  schemaSqlWarningBackground: string;
  schemaSqlWarningForeground: string;

  dragSelectBackground: string;
  dragSelectBorder: string;

  scrollbarTrack: string;
  scrollbarThumb: string;
  scrollbarThumbHover: string;

  foreground: string;
  active: string;
  placeholder: string;

  focus: string;
  inputActive: string;

  keyPK: string;
  keyFK: string;
  keyPFK: string;

  treeBackground: string;
  treeRowHover: string;
  treeRowCurrent: string;
  treeMuted: string;
  treeMatch: string;

  explorerBackground: string;
  explorerBorder: string;

  diffInsertForeground: string;
  diffDeleteForeground: string;
  diffModifyForeground: string;
  diffRenameForeground: string;
};

// example
editor.setTheme({
  canvasBackground: '#1b1b1f',
  tableBackground: '#242429',
  keyPK: '#ffc53d',
});

tableShadow و memoShadow رنگ سایه‌ای هستند که جدول‌ها و یادداشت‌ها روی بوم ERD می‌اندازند. طرح زمینهٔ آمادهٔ تیره آن‌ها را transparent می‌گذارد که هیچ سایه‌ای نمی‌اندازد، مانند ارسال none یا یک رشتهٔ خالی به setTheme؛ طرح زمینهٔ آمادهٔ روشن از rgba(0, 0, 0, 0.18) استفاده می‌کند.

از نسخهٔ 4.0.0، نه توکن دیگر نیز وجود دارد:

• tableGroupHeaderBackground، tableGroupBackground و tableGroupBorder نوار عنوان، بدنه و حاشیهٔ گروه جدولی را رنگ می‌کنند که رنگ خودش را ندارد.
• toastSuccess و toastError نشانهٔ اعلانی را رنگ می‌کنند که نتیجهٔ پایان یک کار را گزارش می‌دهد.
• findReplaceError و mapColumnsError خطاهایی را رنگ می‌کنند که یافتن و جایگزینی و کادر گفت‌وگوی «نگاشت ستون‌ها» نشان می‌دهند. یافتن و جایگزینی پیش‌تر از diffDeleteForeground استفاده می‌کرد، بنابراین بازنویسی آن دیگر رنگ آن را تغییر نمی‌دهد.
• schemaSqlWarningBackground و schemaSqlWarningForeground هشدارهای گزینه‌های زبانهٔ طرح‌واره SQL را رنگ می‌کنند.

از نسخهٔ 4.1.0، نه توکن دیگر نیز وجود دارد:

• treeBackground، treeRowHover، treeRowCurrent، treeMuted و treeMatch درختی را رنگ می‌کنند که کاوشگر و نمایشگر تفاوت‌ها به‌طور مشترک دارند: پس‌زمینهٔ آن، که فیلدهای Find و Replace کاوشگر را هم پر می‌کند؛ ردیف زیر نشانگر ماوس، ردیف صفحه‌کلید تا وقتی درخت فوکوس دارد و دکمهٔ زیر نشانگر ماوس در سرآیند و جست‌وجوی کاوشگر؛ ردیف مورد منطبق فعلی جست‌وجو؛ متن کم‌رنگ مانند شمارش‌ها، انواع داده و پیکان‌های جمع کردن؛ و نشانه‌ای که پشت متن یافته‌شده در جست‌وجو قرار می‌گیرد.
• explorerBackground و explorerBorder پنل کاوشگر و خطوط آن را رنگ می‌کنند: لبهٔ آن در کنار بوم، خط زیر جست‌وجوی آن و حاشیه‌های فیلدهای آن و دکمه‌هایی که Search In باز می‌کند. explorerBorder لبهٔ درخت نمایشگر تفاوت‌ها، خط زیر فیلد Filter by name آن و حاشیهٔ آن فیلد را هم رسم می‌کند. نمادهای کلید در کاوشگر رنگ keyPK، keyFK و keyPFK را می‌گیرند.
• diffModifyForeground و diffRenameForeground آنچه را نمایشگر تفاوت‌ها به‌عنوان تغییریافته و تغییر نام‌یافته علامت می‌زند، در درخت آن و روی هر دو سند، رنگ می‌کنند. diffModifyForeground همچنین دور جدول، یادداشت یا گروه جدولی را که جابه‌جا شده، اندازه‌اش تغییر کرده، رنگش عوض شده یا گروهش تغییر کرده است، صرف‌نظر از هر تغییر دیگری در آن، خط می‌کشد و خط اتصال کلید خارجی‌ای را که تغییر کرده است رسم می‌کند.

diffInsertForeground و diffDeleteForeground اکنون آنچه را نمایشگر تفاوت‌ها به‌عنوان افزوده و حذف‌شده علامت می‌زند، در درخت آن و روی سندی که آن را در بر دارد، به یک شکل در متن، حاشیه‌ها و خطوط اتصال رنگ می‌کنند. diffInsertBackground، diffDeleteBackground، diffCrossBackground و diffCrossForeground در نسخهٔ 4.1.0 حذف شدند، زیرا نمایشگر تفاوت‌ها دیگر خانه‌ها را پر نمی‌کند. setTheme آن‌ها را مانند هر نام دیگری که در Theme نیست کنار می‌گذارد و قلاب‌های آن‌ها، یعنی --erd-editor-diff-insert-background، --erd-editor-diff-delete-background، --erd-editor-diff-cross-background و --erd-editor-diff-cross-foreground، دیگر خوانده نمی‌شوند.

متغیرهای CSS

هر توکن در Theme یک قلاب CSS متناظر دارد که نامش --erd-editor- به‌اضافهٔ کلید به شیوهٔ kebab-case است: grayColor10 برابر --erd-editor-gray-color-10، keyPK برابر --erd-editor-key-pk و keyPFK برابر --erd-editor-key-pfk است.
این قلاب‌ها به درون ویرایشگر به ارث می‌رسند، بنابراین آن‌ها را هر جا که می‌خواهید اعمال شوند تنظیم کنید. روی :root طرح زمینهٔ همهٔ ویرایشگرهای صفحه را تعیین می‌کنند؛ روی خود عنصر فقط طرح زمینهٔ همان یکی را.

erd-editor {
  --erd-editor-canvas-background: #1b1b1f;
}

از نسخهٔ 3.4.0، توکن‌های dargSelect که املای نادرستی داشتند به‌صورت dragSelect نوشته می‌شوند و قلاب‌های آن‌ها از --erd-editor-darg-select-background و --erd-editor-darg-select-border به --erd-editor-drag-select-background و --erd-editor-drag-select-border تغییر کرده‌اند. شیوه‌نامه‌ای که هنوز از نام‌های قدیمی استفاده می‌کند نادیده گرفته می‌شود.

مقادیر پیش‌فرض طرح زمینه

:root {
  --erd-editor-gray-color-1: #111113;
  --erd-editor-gray-color-2: #18191b;
  --erd-editor-gray-color-3: #212225;
  --erd-editor-gray-color-4: #272a2d;
  --erd-editor-gray-color-5: #2e3135;
  --erd-editor-gray-color-6: #363a3f;
  --erd-editor-gray-color-7: #43484e;
  --erd-editor-gray-color-8: #5a6169;
  --erd-editor-gray-color-9: #696e77;
  --erd-editor-gray-color-10: #777b84;
  --erd-editor-gray-color-11: #b0b4ba;
  --erd-editor-gray-color-12: #edeef0;
  --erd-editor-accent-color-1: #11131f;
  --erd-editor-accent-color-2: #141726;
  --erd-editor-accent-color-3: #182449;
  --erd-editor-accent-color-4: #1d2e62;
  --erd-editor-accent-color-5: #253974;
  --erd-editor-accent-color-6: #304384;
  --erd-editor-accent-color-7: #3a4f97;
  --erd-editor-accent-color-8: #435db1;
  --erd-editor-accent-color-9: #3e63dd;
  --erd-editor-accent-color-10: #5472e4;
  --erd-editor-accent-color-11: #9eb1ff;
  --erd-editor-accent-color-12: #d6e1ff;
  --erd-editor-canvas-background: #212225;
  --erd-editor-canvas-boundary-background: #111113;
  --erd-editor-table-background: #18191b;
  --erd-editor-table-header-background: #2e3135;
  --erd-editor-table-select: #435db1;
  --erd-editor-table-border: #363a3f;
  --erd-editor-table-shadow: transparent;
  --erd-editor-table-group-header-background: #43484e;
  --erd-editor-table-group-background: #d3edf81d;
  --erd-editor-table-group-border: #43484e;
  --erd-editor-memo-background: #18191b;
  --erd-editor-memo-select: #435db1;
  --erd-editor-memo-border: #363a3f;
  --erd-editor-memo-shadow: transparent;
  --erd-editor-column-select: #182449;
  --erd-editor-column-select-hover: #1d2e62;
  --erd-editor-column-hover: #272a2d;
  --erd-editor-relationship-hover: #435db1;
  --erd-editor-visualization-link: #43484e;
  --erd-editor-visualization-column: #5a6169;
  --erd-editor-visualization-relationship: #5a6169;
  --erd-editor-toolbar-background: #111113;
  --erd-editor-context-menu-background: #18191b;
  --erd-editor-context-menu-select: #272a2d;
  --erd-editor-context-menu-hover: #3a4f97;
  --erd-editor-context-menu-border: #363a3f;
  --erd-editor-minimap-border: black;
  --erd-editor-minimap-shadow: black;
  --erd-editor-minimap-viewport-border: #3a4f97;
  --erd-editor-minimap-viewport-border-hover: #435db1;
  --erd-editor-toast-background: #18191b;
  --erd-editor-toast-border: #363a3f;
  --erd-editor-toast-success: #3dd68c;
  --erd-editor-toast-error: #ff9592;
  --erd-editor-find-replace-error: #ff9592;
  --erd-editor-map-columns-error: #ff9592;
  --erd-editor-schema-sql-warning-background: #500f1c;
  --erd-editor-schema-sql-warning-foreground: #ff9592;
  --erd-editor-drag-select-background: #253974;
  --erd-editor-drag-select-border: #435db1;
  --erd-editor-scrollbar-track: #ddeaf814;
  --erd-editor-scrollbar-thumb: #696e77;
  --erd-editor-scrollbar-thumb-hover: #777b84;
  --erd-editor-foreground: #b0b4ba;
  --erd-editor-active: #edeef0;
  --erd-editor-placeholder: #e5edfd7b;
  --erd-editor-focus: #435db1;
  --erd-editor-input-active: #5472e4;
  --erd-editor-key-pk: #ffc53d;
  --erd-editor-key-fk: #e54666;
  --erd-editor-key-pfk: #00a2c7;
  --erd-editor-tree-background: #111113;
  --erd-editor-tree-row-hover: #212225;
  --erd-editor-tree-row-current: #1d2e62;
  --erd-editor-tree-muted: #b0b4ba;
  --erd-editor-tree-match: #253974;
  --erd-editor-explorer-background: #111113;
  --erd-editor-explorer-border: #363a3f;
  --erd-editor-diff-insert-foreground: #3dd68c;
  --erd-editor-diff-delete-foreground: #ff9592;
  --erd-editor-diff-modify-foreground: #ffca16;
  --erd-editor-diff-rename-foreground: #70b8ff;
}

زبان نمایش

از نسخهٔ 4.0.0، متن خود ویرایشگر — منوها، پنل‌ها، کادرهای گفت‌وگو، جست‌وجوی سریع، اعلان‌ها و واژه‌هایی که روی نمودار رسم می‌کند مانند unnamed، از جمله در تصویرهای صادرشده — به 25 زبان در دسترس است. نام جدول‌ها و ستون‌ها، SQL، انواع داده و کد تولیدشده هرگز ترجمه نمی‌شوند. زبان و طرح زمینه را ببینید.
پیش از فراخوانی setLocale یا انتخاب یک زبان، ویرایشگر انگلیسی را نشان می‌دهد، یا تا وقتی enableLocalePicker روشن است از 'system' پیروی می‌کند.
ویرایشگر lang و dir را روی ریشهٔ خودش درون shadow root بسته تنظیم می‌کند، هرگز روی عنصر میزبان یا صفحه، بنابراین صفحهٔ راست‌به‌چپ ویرایشگر را وارونه نمی‌کند و زبان راست‌به‌چپ صفحه را وارونه نمی‌کند. عبری، عربی و فارسی رابط کاربری ویرایشگر را راست‌به‌چپ می‌چینند؛ خود نمودار هرگز قرینه نمی‌شود. از نسخهٔ 4.1.0، کاوشگر در همهٔ زبان‌ها در سمت چپ بوم می‌ماند و ردیف‌های خودش در این سه زبان راست‌به‌چپ خوانده می‌شوند.
بسته انواع LocaleCode (یکی از کدهای زیر) و LocaleOption را صادر می‌کند.

type LocaleOption = LocaleCode | 'system';

کد	نام نمایشی	زبان
id-ID	Bahasa Indonesia	اندونزیایی
de-DE	Deutsch	آلمانی
en	English	انگلیسی
es-ES	Español	اسپانیایی
eu-ES	Euskara	باسکی
fr-FR	Français	فرانسوی
it-IT	Italiano	ایتالیایی
nl-NL	Nederlands	هلندی
pl-PL	Polski	لهستانی
pt-PT	Português	پرتغالی
pt-BR	Português Brasileiro	پرتغالی برزیل
ro-RO	Română	رومانیایی
sk-SK	Slovenčina	اسلواکیایی
sl-SI	Slovenščina	اسلوونیایی
sv-SE	Svenska	سوئدی
tr-TR	Türkçe	ترکی
ru-RU	Русский	روسی
uk-UA	Українська	اوکراینی
he-IL	עברית	عبری
ar-SA	العربية	عربی
fa-IR	فارسی	فارسی
ja-JP	日本語	ژاپنی
zh-CN	简体中文	چینی ساده‌شده
zh-TW	繁體中文	چینی سنتی
ko-KR	한국어	کره‌ای

setLocale

زبان نمایش را تنظیم می‌کند: 'system' یا یکی از کدهای بالا. هر چیز دیگری، مانند 'ko' به‌تنهایی، کدی ناشناخته یا مقداری که رشته نیست، بدون خطا نادیده گرفته می‌شود.
پیش از بازگشت اعمال می‌شود، بنابراین زبانی که پیش از افزوده شدن عنصر به صفحه تنظیم شود در نخستین فریم آن حاضر است.
هیچ چیزی ارسال نمی‌کند، نه changeLocale و نه change، و به هیچ‌یک از value، تاریخچهٔ واگرد یا مخزن مشترک دست نمی‌زند.
این انتخاب، روشن یا خاموش بودن enableLocalePicker هر چه باشد، باقی می‌ماند و setLocale('system') با خاموش بودن انتخابگر هم از سیستم پیروی می‌کند.
ویرایشگر چیزی ذخیره نمی‌کند. برای نگه داشتن انتخاب خواننده، به changeLocale گوش دهید و آن را در بارگذاری بعدی بازگردانید.

editor.enableLocalePicker = true;
editor.setLocale(localStorage.getItem('locale') ?? 'system');
editor.addEventListener('changeLocale', event => {
  localStorage.setItem('locale', event.detail.locale);
});

setSystemLocale

برای میزبانی که زبان نمایش خودش را دارد، زبانی را که 'system' نمایانگر آن است به‌صورت یک برچسب BCP 47 تعیین می‌کند. میزبان‌های VS Code، JetBrains و Obsidian آن را با زبان نمایش خودشان فراخوانی می‌کنند.
فاصله‌های ابتدا و انتهای برچسب حذف می‌شوند. null، رشتهٔ خالی یا مقداری که رشته نیست به navigator.languages مرورگر بازمی‌گردد که ویرایشگر با تغییر آن از آن پیروی می‌کند.
فقط تا وقتی گزینهٔ فعال 'system' است اهمیت دارد و بی‌درنگ اعمال می‌شود. ردیف System در انتخابگر، زبانی را که به آن تبدیل می‌شود نام می‌برد.
برچسب، یا هر یک از زبان‌های مرورگر به ترتیب، بر اساس زیربرچسب زبانش و بدون توجه به بزرگی و کوچکی حروف و زیرخط‌ها، به نخستین زبانی که ویرایشگر دارد تبدیل می‌شود: de-AT به de-DE و en-GB به en تبدیل می‌شود. چینی بر اساس خط نوشتاری‌اش تعیین می‌شود، Hant به zh-TW و Hans به zh-CN، و بدون آن بر اساس منطقه، TW، HK و MO به zh-TW و هر منطقهٔ دیگری به zh-CN. pt به pt-BR تبدیل می‌شود، مگر اینکه منطقه‌ای جز BR نام برده شده باشد. وقتی هیچ زبانی مطابقت نداشته باشد، ویرایشگر انگلیسی را نشان می‌دهد.

editor.setLocale('system');
editor.setSystemLocale('pt-PT'); // null follows the browser again

setSchemaSQL

یک فایل طرح‌واره SQL بارگذاری می‌کند.
به‌طور پیش‌فرض، به‌جای ادغام در سند فعلی، آن را جایگزین می‌کند؛ mode را در ادامه ببینید. تنظیماتی که از قبل دارید، از جمله هر قفل و مقدار قفل‌شدهٔ آن، جز موقعیت نما و سطح بزرگ‌نمایی، حفظ می‌شوند و جدول‌ها پس از خوانده شدن فایل چیده می‌شوند، در ردیف‌ها، مگر اینکه placement در ادامه چیز دیگری بخواهد. با قفل بودن Viewport، value پس از آن نمایی را می‌نویسد که وارد کردن از آن آغاز می‌شود، یعنی مبدأ 0, 0 با سطح بزرگ‌نمایی 1. بنابراین در سندی که در عنصری وارد شود که هرگز مقداری دریافت نکرده است، مانند یک سند جدید، همهٔ قفل‌ها روشن‌اند.
در فهرست تاریخچه ثبت می‌شود، به‌طوری که Undo, Redo ممکن می‌شود، و رویداد change را ارسال می‌کند. رشتهٔ خالی نادیده گرفته می‌شود و تا وقتی readonly تنظیم شده است، این فراخوانی کاری انجام نمی‌دهد.
setSchemaGraphQL، setSchemaDBML و setSchemaAML هم به همین شکل رفتار می‌کنند و تجزیه‌گرهای آن‌ها هرگز شکست نمی‌خورند: متنی که نتوانند بخوانند، به‌جای ایجاد خطا، یک سند خالی بارگذاری می‌کند.
از نسخهٔ 4.0.0، هر چهار متد یک آرگومان دوم اختیاری، { placement, mode }، می‌پذیرند:

• placement: 'grid'، مقدار پیش‌فرض، جدول‌ها را مانند گذشته بی‌درنگ در ردیف‌ها قرار می‌دهد و فراخوانی چیزی برنمی‌گرداند.
• placement: 'auto' ابتدا جدول‌ها را بر اساس رابطه‌هایشان می‌چیند، مانند Import در ویرایشگر، و یک Promise برمی‌گرداند که وقتی وارد کردن در یک گام واگرد انجام شد resolve می‌شود. کمتر از دو جدول، نبودن رابطه، چیدمانی که شکست بخورد، صفحه‌ای بدون SharedWorker یا Cancel روی اعلان Placing tables باعث می‌شود جدول‌ها به‌جای آن در ردیف‌ها قرار بگیرند. بارگذاری دیگری در این فاصله — وارد کردن جایگزین‌کنندهٔ دیگر، مقداردهی به value، setInitialValue()، clear()، بارگذاری یک همکار، یا واگرد یا ازنو انجام دادن یک بارگذاری یا clear() — جای آن را می‌گیرد و Promise بدون اینکه چیزی بارگذاری شده باشد resolve می‌شود. واردسازی‌هایی که به این شکل چیده می‌شوند به ترتیبی که آغاز شده‌اند قرار می‌گیرند.
• mode: 'replace'، مقدار پیش‌فرض، سند را جایگزین می‌کند. mode: 'append' فایل را مانند وارد کردن و افزودن زیر نمودار اضافه می‌کند و همهٔ جدول‌هایی را که از قبل وجود دارند، و همهٔ تنظیمات جز زبانه و موقعیت نما را، همان‌طور که هستند باقی می‌گذارد. اگر در زبانهٔ دیگری باشید، ابتدا زبانهٔ ERD نمایش داده می‌شود. جدول‌های جدید، و تا وقتی گروه‌های جدول نمایش داده می‌شوند، گروه‌های جدولی که یک فایل DBML می‌آورد، انتخاب می‌شوند و نما به سمت آن‌ها پیمایش می‌کند، مگر اینکه از قبل به‌خوبی دیده شوند، طبق قاعده‌ای که از نسخهٔ 4.1.0 همهٔ پرش‌ها از آن پیروی می‌کنند؛ مقصد پرش را ببینید. یک بار واگرد، کل افزوده را حذف می‌کند. متنی که نتواند بخواند چیزی اضافه نمی‌کند و سند را همان‌طور که هست باقی می‌گذارد.

تا وقتی readonly تنظیم شده است، جایگزینی نادیده گرفته می‌شود، افزودن چیزی اضافه نمی‌کند و فراخوانی با placement: 'auto' بی‌درنگ resolve می‌شود.
از نسخهٔ 3.10.0، setSchemaSQL فایل را بر اساس پایگاه دادهٔ فعلی سند می‌خواند: وقتی Databricks انتخاب شده باشد، رشته‌های درون نقل‌قول تکی از نویسه‌های گریز با بک‌اسلش در Spark پیروی می‌کنند. توضیحات را ببینید.
از نسخهٔ 3.10.0، setSchemaSQL قید UNIQUE روی دو یا چند ستون را به‌جای پرچم یکتا روی هر ستون، به‌صورت یک شاخص یکتا می‌خواند. کلیدها و شاخص‌های یکتا را ببینید.
از نسخهٔ 3.10.0، وارد کردن SQL، DBML و AML کنش‌های ON DELETE و ON UPDATE کلیدهای خارجی‌ای را که می‌خوانند حفظ می‌کند.
از نسخهٔ 4.0.0، setSchemaSQL کل عبارت DEFAULT یک ستون را حفظ می‌کند، ADD DEFAULT … FOR و توضیحات MS_Description در SQL Server را می‌خواند، ستون‌های serial و identity در PostgreSQL را به افزایش خودکار تبدیل می‌کند، UNSIGNED و ZEROFILL را در نوع داده نگه می‌دارد و کلید اصلی‌ای را که ALTER TABLE … ADD PRIMARY KEY با CLUSTERED، NONCLUSTERED یا USING BTREE علامت می‌زند می‌خواند. طرح‌واره SQL را ببینید.
برای نحوی که هر تجزیه‌گر می‌پذیرد، وارد کردن یا صادر کردن فایل‌ها را ببینید.

type SetSchema = {
  (
    value: string,
    options: { placement: 'auto'; mode?: 'replace' | 'append' }
  ): Promise<void>;
  (
    value: string,
    options?: { placement?: 'grid'; mode?: 'replace' | 'append' }
  ): void;
};

// example
editor.setSchemaSQL('Schema SQL...');
// or
await editor.setSchemaSQL('Schema SQL...', { placement: 'auto' });
// or
editor.setSchemaSQL('Schema SQL...', { mode: 'append' });

setSchemaGraphQL

یک سند GraphQL SDL بارگذاری می‌کند.
تعریف‌های نوع شیء به جدول تبدیل می‌شوند و فیلدی که نوعش جدول دیگری است به رابطه تبدیل می‌شود.

editor.setSchemaGraphQL('GraphQL SDL...');

setSchemaDBML

یک فایل DBML بارگذاری می‌کند، قالبی که dbdiagram.io و dbdocs از آن استفاده می‌کنند.
از نسخهٔ 4.0.0، هر TableGroup به یک گروه جدول تبدیل می‌شود و headercolor یک جدول به رنگ آن تبدیل می‌شود. DBML را ببینید.

editor.setSchemaDBML('DBML...');

setSchemaAML

یک فایل AML (Azimutt Markup Language) بارگذاری می‌کند. هم نگارش فعلی و هم نگارش قدیمی v1 پذیرفته می‌شوند.
از نسخهٔ 4.0.0، رنگ یک موجودیت، یکی از نام‌های رنگ Azimutt یا یک مقدار هگز درون نقل‌قول، به رنگ جدول آن تبدیل می‌شود. AML را ببینید.

editor.setSchemaAML('AML...');

setSchemaJSON

از نسخهٔ 4.0.0، یک سند .erd.json، مانند متنی که value برمی‌گرداند، بارگذاری می‌کند.
در حالت پیش‌فرض mode: 'replace'، سند را مانند مقداردهی به value بارگذاری می‌کند: در فهرست تاریخچه ثبت می‌شود، رویداد change را ارسال می‌کند و قفل‌های سند را به همان شکل می‌گیرد. برخلاف value، رشتهٔ خالی یا مقداری که رشته نیست، به‌جای آغاز یک سند جدید، نادیده گرفته می‌شود. متنی که JSON نیست، مانند value، سند را خالی می‌کند.
mode: 'append' جدول‌ها، رابطه‌ها، شاخص‌ها، یادداشت‌ها و گروه‌های جدول سند را با شناسه‌های جدید زیر نمودار اضافه می‌کند، جای آن‌ها را نسبت به یکدیگر حفظ می‌کند و تنظیمات سند را کنار می‌گذارد، همان‌طور که وارد کردن و افزودن با یک فایل json انجام می‌دهد. متنی که نتواند بخواند، یا سندی که هیچ جدول و هیچ یادداشتی ندارد، چیزی اضافه نمی‌کند. در غیر این صورت، مانند افزودن با setSchemaSQL قرار می‌گیرد و یادداشت‌ها و گروه‌های جدول جدیدش همراه با جدول‌هایش انتخاب می‌شوند، هر نوع تا وقتی نمایش داده می‌شود.
پس از قرار گرفتن سند بازمی‌گردد و تا وقتی readonly تنظیم شده است نادیده گرفته می‌شود.

editor.setSchemaJSON('json...');
// or
editor.setSchemaJSON('json...', { mode: 'append' });

getSchemaSQL

وضعیت فعلی ویرایشگر را به‌صورت طرح‌واره SQL صادر می‌کند.
اگر databaseVendor مشخص نشود، بر اساس سامانهٔ پایگاه داده‌ای که در حال حاضر تنظیم شده است عمل می‌کند. با نامی که در فهرست زیر نباشد هم به همین شکل و بدون ایجاد خطا رفتار می‌شود.
نام‌ها با نوع علامت نقل‌قولی که ویرایشگر نشان می‌دهد نقل‌قول می‌شوند. تا وقتی Bracket Type قفل است، این نوع می‌تواند با نوعی که value ذخیره می‌کند، یعنی همان نوعی که erd_read عامل کدنویسی با آن نقل‌قول می‌کند، متفاوت باشد.
از نسخهٔ 4.0.0، آرگومان اختیاری options دستورها و سرآیند را انتخاب می‌کند، همان‌طور که گزینه‌های زبانهٔ طرح‌واره SQL انجام می‌دهند. SchemaSQLOptions به‌عنوان یک نوع صادر می‌شود.

• statements: 'create'، مقدار پیش‌فرض؛ 'ifNotExists' که در MySQL، MariaDB، PostgreSQL، SQLite و Databricks عبارت IF NOT EXISTS را می‌نویسد و در جاهای دیگر به 'create' برمی‌گردد؛ یا 'recreate' که جدول‌ها را پیش از ایجادشان حذف می‌کند و Snowflake به‌جای آن CREATE OR REPLACE TABLE را می‌نویسد.
• header: 'none'، مقدار پیش‌فرض؛ 'use' که به پایگاه داده یا طرح‌وارهٔ سند جابه‌جا می‌شود؛ یا 'createAndUse' که ابتدا اگر وجود نداشته باشد آن را ایجاد می‌کند و سپس به آن جابه‌جا می‌شود. سامانهٔ پایگاه داده‌ای که گزینهٔ درخواست‌شده را ندارد، مانند همان زبانه به گزینهٔ دیگری برمی‌گردد: Oracle برای 'createAndUse' همان 'use' را می‌نویسد، PostgreSQL برای 'use' هیچ سرآیندی نمی‌نویسد و SQLite هیچ سرآیندی نمی‌نویسد. سرآیند فقط تا وقتی نوشته می‌شود که نام پایگاه دادهٔ سند یک شناسهٔ ساده باشد — حروف ASCII، ارقام و _، بدون اینکه با رقم آغاز شود.

گزینه‌ای که ذکر نشود، یا گزینه‌ای با مقدار ناشناخته، مقدار پیش‌فرض خود را می‌گیرد، بنابراین فراخوانی بدون گزینه، مانند گذشته، دستورهای CREATE ساده را بدون سرآیند می‌نویسد.
از نسخهٔ 4.0.0، خروجی همیشه اسکریپت‌های Before tables و After tables سند را در بر دارد، به این ترتیب: سرآیند، اسکریپت پیش از جدول‌ها، دستورهای حذف، جدول‌ها، اسکریپت پس از جدول‌ها. گزینه‌های Statements، Header و Tables خود زبانهٔ طرح‌واره SQL هرگز بر این فراخوانی اثر نمی‌گذارند و این فراخوانی همیشه کل سند را می‌نویسد.
از نسخهٔ 3.10.0، هر کلید خارجی بندهای ON DELETE و ON UPDATE رابطه را در بر دارد. یک بند فقط وقتی نوشته می‌شود که کنش آن تنظیم شده باشد و سامانهٔ پایگاه داده آن را بپذیرد، بنابراین کنشی که آن سامانه نمی‌پذیرد نوشته نمی‌شود و مقدار پیش‌فرض آن اعمال می‌شود. از نسخهٔ 4.0.0، Snowflake فقط NO ACTION را می‌پذیرد. برای آنچه هر پایگاه داده می‌نویسد، ON DELETE و ON UPDATE را ببینید.
از نسخهٔ 3.10.0، نقل‌قول تکی درون توضیح جدول یا توضیح ستون گریز داده می‌شود، بنابراین توضیحی مانند it's دیگر دستور را خراب نمی‌کند. هر سامانهٔ پایگاه داده‌ای که توضیحات را به‌صورت لیترال رشته‌ای می‌نویسد آن را دوتایی می‌کند، جز Databricks که پیش از هر نقل‌قول و هر بک‌اسلش یک بک‌اسلش قرار می‌دهد. SQLite همچنان توضیحات را به‌صورت خط‌های -- می‌نویسد.
از نسخهٔ 4.0.0، چندین پایگاه داده نام کلیدها، مقادیر پیش‌فرض و افزایش خودکار را هم به شکل متفاوتی می‌نویسند. آنچه DDL می‌نویسد را ببینید.

type DatabaseVendor =
  | 'Databricks'
  | 'MariaDB'
  | 'MSSQL'
  | 'MySQL'
  | 'Oracle'
  | 'PostgreSQL'
  | 'Snowflake'
  | 'SQLite';

type SchemaSQLOptions = {
  statements?: 'create' | 'ifNotExists' | 'recreate';
  header?: 'none' | 'use' | 'createAndUse';
};

const schemaSQL = editor.getSchemaSQL();
// or
const postgresSQL = editor.getSchemaSQL('PostgreSQL');
// or
const mysqlSQL = editor.getSchemaSQL('MySQL', {
  statements: 'ifNotExists',
  header: 'createAndUse',
});

getSharedStore

مخزنی برای ویرایش مشارکتی بلادرنگ برمی‌گرداند.
config برابر { getNickname?, mouseTracker?, focusTracker? } است. مقدار پیش‌فرض هر دو ردیاب true است: mouseTracker نشانگر ماوس این ویرایشگر را برای دیگران پخش می‌کند و focusTracker خانهٔ دارای فوکوس، انتخاب و مستطیل انتخاب آن را پخش می‌کند.
ویرایش مشارکتی را ببینید.

const sharedStore = editor.getSharedStore({
  mouseTracker: false,
  focusTracker: false,
});

setDiffValue

نمایشگر تفاوت‌ها را باز می‌کند و سندی را که در حال حاضر باز است با سندی که ارسال می‌کنید مقایسه می‌کند.
چیزی برنمی‌گرداند و سند را تغییر نمی‌دهد، بنابراین بستن نمایشگر، ویرایشگر را دقیقاً همان‌طور که بود باقی می‌گذارد.
مقدار خالی، یا هر چیزی که رشته نیست، با یک سند خالی مقایسه می‌شود.
این همان لایهٔ رویی نمایشگر تفاوت‌ها در منوی زمینهٔ بوم است.
از نسخهٔ 4.1.0، محتوای دو سند را ابتدا بر اساس شناسه و تنها پس از آن بر اساس آنچه هر کدام نگه می‌دارد، مانند نام جدول یا متن یادداشت، با هم جفت می‌کند؛ چه چیزی مقایسه می‌شود را ببینید. بنابراین در مقایسه با نسخهٔ قدیمی‌تری از همان سند، مانند یک بازبینی Git از فایل آن، تغییر نام به‌صورت یک مورد تغییر نام‌یافته نمایش داده می‌شود؛ در مقایسه با سندی که شناسه‌هایش متفاوت است، به‌صورت یک حذف و یک افزوده نمایش داده می‌شود. نمایشگر آنچه را تغییر کرده است در درختی کنار دو سند فهرست می‌کند و تغییرات را به‌جای پر کردن خانه‌ها با رنگ علامت می‌زند.

editor.setDiffValue('prev json...');