Update docs and guides to use const vs var

website/content/docs/api.mdx

@@ -52,7 +52,7 @@ getContents(index: Number = 0, length: Number = remaining): Delta
 **Examples**
 
 ```javascript
-var delta = quill.getContents();
+const delta = quill.getContents();
 ```
 
 ### getLength
@@ -68,7 +68,7 @@ getLength(): Number
 **Examples**
 
 ```javascript
-var length = quill.getLength();
+const length = quill.getLength();
 ```
 
 ### getText
@@ -86,7 +86,7 @@ getText(index: Number = 0, length: Number = remaining): String
 **Examples**
 
 ```javascript
-var text = quill.getText(0, 10);
+const text = quill.getText(0, 10);
 ```
 
 ### insertEmbed
@@ -364,12 +364,12 @@ getSelection(focus = false): { index: Number, length: Number }
 **Examples**
 
 ```javascript
-var range = quill.getSelection();
+const range = quill.getSelection();
 if (range) {
   if (range.length == 0) {
     console.log('User cursor is at index', range.index);
   } else {
-    var text = quill.getText(range.index, range.length);
+    const text = quill.getText(range.index, range.length);
     console.log('User has highlighted: ', text);
   }
 } else {
@@ -539,7 +539,7 @@ quill.on('selection-change', function (range, oldRange, source) {
     if (range.length == 0) {
       console.log('User cursor is on', range.index);
     } else {
-      var text = quill.getText(range.index, range.length);
+      const text = quill.getText(range.index, range.length);
       console.log('User has highlighted', text);
     }
   } else {
@@ -642,13 +642,13 @@ Quill.find(domNode: Node, bubble: boolean = false): Blot | Quill
 **Examples**
 
 ```javascript
-var container = document.querySelector('#container');
-var quill = new Quill(container);
+const container = document.querySelector('#container');
+const quill = new Quill(container);
 console.log(Quill.find(container) === quill); // Should be true
 
 quill.insertText(0, 'Hello', 'link', 'https://world.com');
-var linkNode = document.querySelector('#container a');
-var linkBlot = Quill.find(linkNode);
+const linkNode = document.querySelector('#container a');
+const linkBlot = Quill.find(linkNode);
 ```
 
 ### getIndex #experimental
@@ -762,11 +762,11 @@ Quill.import(path): any
 **Examples**
 
 ```javascript
-var Parchment = Quill.import('parchment');
-var Delta = Quill.import('delta');
+const Parchment = Quill.import('parchment');
+const Delta = Quill.import('delta');
 
-var Toolbar = Quill.import('modules/toolbar');
-var Link = Quill.import('formats/link');
+const Toolbar = Quill.import('modules/toolbar');
+const Link = Quill.import('formats/link');
 // Similar to ES6 syntax `import Link from 'quill/formats/link';`
 ```
 
@@ -785,7 +785,7 @@ Quill.register(defs: { [String]: any }, supressWarning: Boolean = false)
 **Examples**
 
 ```javascript
-var Module = Quill.import('core/module');
+const Module = Quill.import('core/module');
 
 class CustomModule extends Module {}
 
@@ -817,7 +817,7 @@ addContainer(domNode: Node, refNode?: Node): Element
 **Examples**
 
 ```javascript
-var container = quill.addContainer('ql-custom');
+const container = quill.addContainer('ql-custom');
 ```
 
 ### getModule
@@ -833,5 +833,5 @@ getModule(name: String): any
 **Examples**
 
 ```javascript
-var toolbar = quill.getModule('toolbar');
+const toolbar = quill.getModule('toolbar');
 ```

website/content/docs/configuration.mdx

@@ -10,25 +10,25 @@ Quill allows several ways to customize it to suit your needs. This section is de
 Quill requires a container where the editor will be appended. You can pass in either a CSS selector or a DOM object.
 
 ```javascript
-var editor = new Quill('.editor');  // First matching element will be used
+const editor = new Quill('.editor');  // First matching element will be used
 ```
 
 ```javascript
-var container = document.getElementById('editor');
-var editor = new Quill(container);
+const container = document.getElementById('editor');
+const editor = new Quill(container);
 ```
 
 ```javascript
-var container = $('.editor').get(0);
-var editor = new Quill(container);
+const container = $('.editor').get(0);
+const editor = new Quill(container);
 ```
 
 ### Options
 
 To configure Quill, pass in an options object:
 
 ```javascript
-var options = {
+const options = {
   debug: 'info',
   modules: {
     toolbar: '#toolbar'
@@ -37,7 +37,7 @@ var options = {
   readOnly: true,
   theme: 'snow'
 };
-var editor = new Quill('#editor', options);
+const editor = new Quill('#editor', options);
 ```
 
 The following keys are recognized:

website/content/docs/modules.mdx

@@ -7,7 +7,7 @@ Modules allow Quill's behavior and functionality to be customized. Several offic
 To enable a module, simply include it in Quill's configuration.
 
 ```javascript
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     'history': {          // Enable with custom configurations
       'delay': 2500,
@@ -26,8 +26,8 @@ The [Clipboard](/docs/modules/clipboard/), [Keyboard](/docs/modules/keyboard/),
 Modules may also be extended and re-registered, replacing the original module. Even required modules may be re-registered and replaced.
 
 ```javascript
-var Clipboard = Quill.import('modules/clipboard');
-var Delta = Quill.import('delta');
+const Clipboard = Quill.import('modules/clipboard');
+const Delta = Quill.import('delta');
 
 class PlainClipboard extends Clipboard {
   convert(html = null) {
@@ -43,7 +43,7 @@ class PlainClipboard extends Clipboard {
 Quill.register('modules/clipboard', PlainClipboard, true);
 
 // Will be created with instance of PlainClipboard
-var quill = new Quill('#editor');
+const quill = new Quill('#editor');
 ```
 
 *Note: This particular example was selected to show what is possible. It is often easier to just use an API or configuration the existing module exposes. In this example, the existing Clipboard's [addMatcher](/docs/modules/clipboard/#addmatcher) API is suitable for most paste customization scenarios.*

website/content/docs/modules/clipboard.mdx

@@ -65,7 +65,7 @@ quill.clipboard.dangerouslyPasteHTML(5, '&nbsp;<b>World</b>');
 An array of matchers can be passed into Clipboard's configuration options. These will be appended after Quill's own default matchers.
 
 ```javascript
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     clipboard: {
       matchers: [

website/content/docs/modules/history.mdx

@@ -29,7 +29,7 @@ By default all changes, whether originating from user input or programmatically
 ### Example
 
 ```javascript
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     history: {
       delay: 2000,

website/content/docs/modules/keyboard.mdx

@@ -105,7 +105,7 @@ quill.keyboard.addBinding({ key: Keyboard.keys.ENTER }, {
 When an Array, handler will be called if *any* of the specified formats are active. When an Object, *all* specified formats conditions must be met. In either case, the format property of the context parameter will be an Object of all current active formats, the same returned by `quill.getFormat()`.
 
 ```js
-var context = {
+const context = {
   format: {
     list: true,       // must be on a list, but can be any value
     script: 'super',  // must be exactly 'super', 'sub' will not suffice
@@ -162,7 +162,7 @@ Adding a binding with `quill.keyboard.addBinding` will not run before Quill's be
 Each binding config must contain `key` and `handler` options, and may optionally include any of the `context` options.
 
 ```javascript
-var bindings = {
+const bindings = {
   // This will overwrite the default binding also named 'tab'
   tab: {
     key: 9,
@@ -197,7 +197,7 @@ var bindings = {
   }
 };
 
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     keyboard: {
       bindings: bindings

website/content/docs/modules/syntax.mdx

@@ -21,7 +21,7 @@ hljs.configure({   // optionally configure hljs
   languages: ['javascript', 'ruby', 'python']
 });
 
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     syntax: true,              // Include syntax module
     toolbar: [['code-block']]  // Include button in toolbar

website/content/docs/modules/toolbar.mdx

@@ -58,7 +58,7 @@ The Toolbar module allow users to easily format Quill's contents.
 It can be configured with a custom container and handlers.
 
 ```javascript
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     toolbar: {
       container: '#toolbar', // Selector for toolbar container
@@ -73,7 +73,7 @@ var quill = new Quill('#editor', {
 Because the `container` option is so common, a top level shorthand is also allowed.
 
 ```javascript
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     // Equivalent to { toolbar: { container: '#toolbar' }}
     toolbar: '#toolbar'
@@ -88,9 +88,9 @@ Toolbar controls can either be specified by a simple array of format names or a
 To begin with the simpler array option:
 
 ```javascript
-var toolbarOptions = ['bold', 'italic', 'underline', 'strike'];
+const toolbarOptions = ['bold', 'italic', 'underline', 'strike'];
 
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     toolbar: toolbarOptions
   }
@@ -100,13 +100,13 @@ var quill = new Quill('#editor', {
 Controls can also be grouped by one level of nesting an array. This will wrap controls in a `<span>` with class name `ql-formats`, providing structure for themes to utilize. For example [Snow](/docs/themes/#snow/) adds extra spacing between control groups.
 
 ```javascript
-var toolbarOptions = [['bold', 'italic'], ['link', 'image']];
+const toolbarOptions = [['bold', 'italic'], ['link', 'image']];
 ```
 
 Buttons with custom values can be specified with an Object with the name of the format as its only key.
 
 ```javascript
-var toolbarOptions = [{ header: '3' }];
+const toolbarOptions = [{ header: '3' }];
 ```
 
 Dropdowns are similarly specified by an Object, but with an array of possible values. CSS is used to control the visual labels for dropdown options.
@@ -115,15 +115,15 @@ Dropdowns are similarly specified by an Object, but with an array of possible va
 // Note false, not 'normal', is the correct value
 // quill.format('size', false) removes the format,
 // allowing default styling to work
-var toolbarOptions = [
+const toolbarOptions = [
   { size: [ 'small', false, 'large', 'huge' ]}
 ];
 ```
 
 Note [Themes](/docs/themes/) may also specify default values for dropdowns. For example, [Snow](/docs/themes/#snow/) provides a default list of 35 colors for the `color` and `background` formats, if set to an empty array.
 
 ```javascript
-var toolbarOptions = [
+const toolbarOptions = [
   ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
   ['blockquote', 'code-block'],
 
@@ -143,7 +143,7 @@ var toolbarOptions = [
   ['clean']                                         // remove formatting button
 ];
 
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     toolbar: toolbarOptions
   },
@@ -174,7 +174,7 @@ For use cases requiring even more customization, you can manually create a toolb
 
 <!-- Initialize editor with toolbar -->
 <script>
-  var quill = new Quill('#editor', {
+  const quill = new Quill('#editor', {
     modules: {
       toolbar: '#toolbar'
     }
@@ -196,13 +196,13 @@ Note by supplying your own HTML element, Quill searches for particular input ele
 <div id="editor"></div>
 
 <script>
-  var quill = new Quill('#editor', {
+  const quill = new Quill('#editor', {
     modules: {
       toolbar: '#toolbar',
     },
   });
 
-  var customButton = document.querySelector('#custom-button');
+  const customButton = document.querySelector('#custom-button');
   customButton.addEventListener('click', function () {
     console.log('Clicked!');
   });
@@ -216,12 +216,12 @@ The toolbar controls by default applies and removes formatting, but you can also
 Handler functions will be bound to the toolbar (so using `this` will refer to the toolbar instance) and passed the `value` attribute of the input if the corresponding format is inactive, and `false` otherwise. Adding a custom handler will overwrite the default toolbar and theme behavior.
 
 ```javascript
-var toolbarOptions = {
+const toolbarOptions = {
   handlers: {
     // handlers object will be merged with default handlers object
     link: function (value) {
       if (value) {
-        var href = prompt('Enter the URL');
+        const href = prompt('Enter the URL');
         this.quill.format('link', href);
       } else {
         this.quill.format('link', false);
@@ -230,13 +230,13 @@ var toolbarOptions = {
   }
 };
 
-var quill = new Quill('#editor', {
+const quill = new Quill('#editor', {
   modules: {
     toolbar: toolbarOptions
   }
 });
 
 // Handlers can also be added post initialization
-var toolbar = quill.getModule('toolbar');
+const toolbar = quill.getModule('toolbar');
 toolbar.addHandler('image', showImageUI);
 ```

website/content/docs/quickstart.mdx

@@ -20,7 +20,7 @@ The best way to get started is to try a simple example. Quill is initialized wit
 
 <!-- Initialize Quill editor -->
 <script>
-  var quill = new Quill('#editor', {
+  const quill = new Quill('#editor', {
     theme: 'snow'
   });
 </script>

website/content/docs/themes.mdx

@@ -12,7 +12,7 @@ Themes allow you to easily make your editor look good with minimal effort. Quill
 
 <script src="{{site.cdn}}{{site.version}}/quill.js"></script>
 <script>
-  var quill = new Quill('#editor', {
+  const quill = new Quill('#editor', {
     theme: 'bubble', // Specify theme in configuration
   });
 </script>

website/content/guides/cloning-medium-with-parchment.mdx

@@ -53,7 +53,7 @@ We follow Medium's example here in using `strong` and `em` tags but you could ju
 Quill.register(BoldBlot);
 Quill.register(ItalicBlot);
 
-var quill = new Quill('#editor');
+const quill = new Quill('#editor');
 
 quill.insertText(0, 'Test', { bold: true });
 quill.formatText(0, 4, 'italic', true);