Add documentation for registry

packages/website/content/docs/registries.mdx

@@ -0,0 +1,83 @@
+---
+title: Registries
+---
+
+Registries allow multiple editors with different formats to coexist on the same page.
+
+If you register a format with `Quill.register()`, the format will be registered to a global registry,
+which will be used by all Quill instances.
+
+However, in some cases, you might want to have multiple registries, so that different Quill instances
+can have different formats. For example, you might want to have a Quill instance that only supports
+bold and italic, and another Quill instance that supports bold, italic, and underline.
+
+## Usage
+
+To create a Quill with a custom registry, you can pass in a registry object to the Quill constructor:
+
+```js
+const registry = new Parchment.Registry();
+
+// Register the formats that you need for the editor with `registry.register()`.
+// We will cover this in more detail in the next section.
+
+const quill = new Quill('#editor', {
+  registry,
+  // ...other options
+})
+```
+
+## Register Formats
+
+A custom registry doesn't come with any formats by default. You should register the formats that you need with `registry.register()`.
+There are some essential formats that you will need to register in order to have a functional editor:
+
+<Sandpack
+  defaultShowPreview
+  files={{
+    'index.html': `
+<!-- Include stylesheet -->
+<link href="{{site.cdn}}/quill.snow.css" rel="stylesheet" />
+<div id="editor">
+</div>
+<!-- Include the Quill library -->
+<script src="{{site.cdn}}/quill.js"></script>
+<script src="/index.js"></script>`,
+    "/index.js": `
+const Parchment = Quill.import('parchment');
+
+// Essential formats
+const Block = Quill.import('blots/block');
+const Break = Quill.import('blots/break');
+const Container = Quill.import('blots/container');
+const Cursor = Quill.import('blots/cursor');
+const Inline = Quill.import('blots/inline');
+const Scroll = Quill.import('blots/scroll');
+const Text= Quill.import('blots/text');
+
+const registry = new Parchment.Registry();
+registry.register(
+  Scroll,
+  Block,
+  Break,
+  Container,
+  Cursor,
+  Inline,
+  Text,
+);
+
+const quill = new Quill('#editor', {
+  registry,
+  theme: 'snow'
+});
+`}}
+/>
+
+<Hint>
+You may have noticed that the format buttons on the toolbar above doesn't work.
+This is because we haven't registered any of the corresponding formats yet.
+
+The toolbar module doesn't detect whether a format is available or not, so it will always show the buttons.
+Follow [this guide](/docs/modules/toolbar) to learn more about how to customize the toolbar.
+</Hint>
+

packages/website/src/data/docs.tsx

@@ -79,6 +79,10 @@ const items = [
       },
     ],
   },
+  {
+    title: 'Registries',
+    url: '/docs/registries',
+  },
   {
     title: 'Themes',
     url: '/docs/themes',