Merge pull request #62 from reedsy/catchup

Catch up to upsteam

CHANGELOG.md

@@ -1,5 +1,11 @@
 # [Unreleased]
 
+# 2.0.1
+
+- Prevent overriding of theme's default toolbar settings mistakenly [#4120](https://github.com/quilljs/quill/pull/4120)
+- Improve typings for methods that return a Delta [#4136](https://github.com/quilljs/quill/pull/4136)
+- Fix toolbar icons for h3-h6 [#4131](https://github.com/quilljs/quill/pull/4131)
+
 # 2.0.0
 
 We are thrilled to announce the release of Quill 2.0! Please check out the [announcement post](https://slab.com/blog/announcing-quill-2-0/).

README.md

@@ -17,15 +17,9 @@ We need to use our own forked version of the `Delta` class, which adds support f
   <a title="Interactive Playground" href="https://quilljs.com/playground/"><strong>Interactive Playground</strong></a>
 </p>
 <p align="center">
-  <a href="https://github.com/quilljs/quill/actions" title="Build Status">
-    <img src="https://github.com/quilljs/quill/actions/workflows/main.yml/badge.svg" alt="Build Status">
-  </a>
-  <a href="https://npmjs.com/package/quill" title="Version">
-    <img src="https://img.shields.io/npm/v/quill.svg" alt="Version">
-  </a>
-  <a href="https://npmjs.com/package/quill" title="Downloads">
-    <img src="https://img.shields.io/npm/dm/quill.svg" alt="Downloads">
-  </a>
+  <a href="https://github.com/quilljs/quill/actions" title="Build Status"><img src="https://github.com/quilljs/quill/actions/workflows/main.yml/badge.svg" alt="Build Status"></a>
+  <a href="https://npmjs.com/package/quill" title="Version"><img src="https://img.shields.io/npm/v/quill.svg" alt="Version"></a>
+  <a href="https://npmjs.com/package/quill" title="Downloads"><img src="https://img.shields.io/npm/dm/quill.svg" alt="Downloads"></a>
 </p>
 
 <hr/>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "quill-monorepo",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Quill development environment",
   "private": true,
   "author": "Jason Chen <jhchen7@gmail.com>",

packages/quill/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reedsy/quill",
-  "version": "2.0.0-reedsy-5.0.6",
+  "version": "2.0.1-reedsy-5.0.7",
   "description": "Your powerful, rich text editor",
   "author": "Jason Chen <jhchen7@gmail.com>",
   "homepage": "https://quilljs.com",

packages/quill/src/core/quill.ts

@@ -335,7 +335,7 @@ class Quill {
     name: string,
     value: unknown,
     source: EmitterSource = Emitter.sources.API,
-  ) {
+  ): Delta {
     return modify.call(
       this,
       () => {
@@ -558,7 +558,7 @@ class Quill {
     embed: string,
     value: unknown,
     source: EmitterSource = Quill.sources.API,
-  ) {
+  ): Delta {
     return modify.call(
       this,
       () => {
@@ -648,7 +648,7 @@ class Quill {
     return this.emitter.once(...args);
   }
 
-  removeFormat(index: number, length: number, source?: EmitterSource) {
+  removeFormat(index: number, length: number, source?: EmitterSource): Delta {
     [index, length, , source] = overload(index, length, source);
     return modify.call(
       this,
@@ -689,7 +689,7 @@ class Quill {
   setContents(
     delta: Delta | Op[],
     source: EmitterSource = Emitter.sources.API,
-  ) {
+  ): Delta {
     return modify.call(
       this,
       () => {
@@ -742,7 +742,7 @@ class Quill {
   updateContents(
     delta: Delta | Op[],
     source: EmitterSource = Emitter.sources.API,
-  ) {
+  ): Delta {
     return modify.call(
       this,
       () => {
@@ -767,7 +767,7 @@ function expandModuleConfig(config: Record<string, unknown> | undefined) {
       ...expanded,
       [key]: value === true ? {} : value,
     }),
-    {},
+    {} as Record<string, unknown>,
   );
 }
 
@@ -798,23 +798,26 @@ function expandConfig(
   const { modules: quillModuleDefaults, ...quillDefaults } = Quill.DEFAULTS;
   const { modules: themeModuleDefaults, ...themeDefaults } = theme.DEFAULTS;
 
-  const modules: ExpandedQuillOptions['modules'] = merge(
-    {},
-    expandModuleConfig(quillModuleDefaults),
-    expandModuleConfig(themeModuleDefaults),
-    expandModuleConfig(options.modules),
-  );
+  let userModuleOptions = expandModuleConfig(options.modules);
   // Special case toolbar shorthand
   if (
-    modules != null &&
-    modules.toolbar &&
-    modules.toolbar.constructor !== Object
+    userModuleOptions != null &&
+    userModuleOptions.toolbar &&
+    userModuleOptions.toolbar.constructor !== Object
   ) {
-    modules.toolbar = {
-      container: modules.toolbar,
+    userModuleOptions = {
+      ...userModuleOptions,
+      toolbar: { container: userModuleOptions.toolbar },
     };
   }
 
+  const modules: ExpandedQuillOptions['modules'] = merge(
+    {},
+    expandModuleConfig(quillModuleDefaults),
+    expandModuleConfig(themeModuleDefaults),
+    userModuleOptions,
+  );
+
   const config = {
     ...quillDefaults,
     ...omitUndefinedValuesFromOptions(themeDefaults),

packages/quill/src/ui/icons.ts

@@ -13,6 +13,10 @@ import directionRightToLeftIcon from '../assets/icons/direction-rtl.svg';
 import formulaIcon from '../assets/icons/formula.svg';
 import headerIcon from '../assets/icons/header.svg';
 import header2Icon from '../assets/icons/header-2.svg';
+import header3Icon from '../assets/icons/header-3.svg';
+import header4Icon from '../assets/icons/header-4.svg';
+import header5Icon from '../assets/icons/header-5.svg';
+import header6Icon from '../assets/icons/header-6.svg';
 import italicIcon from '../assets/icons/italic.svg';
 import imageIcon from '../assets/icons/image.svg';
 import indentIcon from '../assets/icons/indent.svg';
@@ -50,6 +54,10 @@ export default {
   header: {
     '1': headerIcon,
     '2': header2Icon,
+    '3': header3Icon,
+    '4': header4Icon,
+    '5': header5Icon,
+    '6': header6Icon,
   },
   italic: italicIcon,
   image: imageIcon,

packages/quill/test/types/quill.test-d.ts

@@ -30,8 +30,12 @@ const quill = new Quill('#editor');
 }
 
 {
-  quill.insertEmbed(10, 'image', 'https://example.com/logo.png');
-  quill.insertEmbed(10, 'image', 'https://example.com/logo.png', 'api');
+  assertType<Delta>(
+    quill.insertEmbed(10, 'image', 'https://example.com/logo.png'),
+  );
+  assertType<Delta>(
+    quill.insertEmbed(10, 'image', 'https://example.com/logo.png', 'api'),
+  );
 }
 
 {
@@ -74,22 +78,26 @@ const quill = new Quill('#editor');
 }
 
 {
-  quill.updateContents([{ insert: 'Hello World!' }]);
-  quill.updateContents([{ insert: 'Hello World!' }], 'api');
-  quill.updateContents(new Delta().insert('Hello World!'));
-  quill.updateContents(new Delta().insert('Hello World!'), 'api');
+  assertType<Delta>(quill.updateContents([{ insert: 'Hello World!' }]));
+  assertType<Delta>(quill.updateContents([{ insert: 'Hello World!' }], 'api'));
+  assertType<Delta>(quill.updateContents(new Delta().insert('Hello World!')));
+  assertType<Delta>(
+    quill.updateContents(new Delta().insert('Hello World!'), 'api'),
+  );
 }
 
 {
-  quill.setContents([{ insert: 'Hello World!\n' }]);
-  quill.setContents([{ insert: 'Hello World!\n' }], 'api');
-  quill.setContents(new Delta().insert('Hello World!\n'));
-  quill.setContents(new Delta().insert('Hello World!\n'), 'api');
+  assertType<Delta>(quill.setContents([{ insert: 'Hello World!\n' }]));
+  assertType<Delta>(quill.setContents([{ insert: 'Hello World!\n' }], 'api'));
+  assertType<Delta>(quill.setContents(new Delta().insert('Hello World!\n')));
+  assertType<Delta>(
+    quill.setContents(new Delta().insert('Hello World!\n'), 'api'),
+  );
 }
 
 {
-  quill.format('bold', true);
-  quill.format('bold', true, 'api');
+  assertType<Delta>(quill.format('bold', true));
+  assertType<Delta>(quill.format('bold', true, 'api'));
 }
 
 {
@@ -136,8 +144,8 @@ const quill = new Quill('#editor');
 }
 
 {
-  quill.removeFormat(3, 2);
-  quill.removeFormat(3, 2, 'user');
+  assertType<Delta>(quill.removeFormat(3, 2));
+  assertType<Delta>(quill.removeFormat(3, 2, 'user'));
 }
 
 {

packages/quill/test/unit/core/quill.spec.ts

@@ -764,6 +764,21 @@ describe('Quill', () => {
       });
     });
 
+    test('toolbar container shorthand with theme options', () => {
+      const config = expandConfig(`#${testContainerId}`, {
+        modules: {
+          toolbar: document.querySelector(`#${testContainerId}`),
+        },
+        theme: 'snow',
+      });
+      for (const [format, handler] of Object.entries(
+        Snow.DEFAULTS.modules.toolbar!.handlers ?? {},
+      )) {
+        // @ts-expect-error
+        expect(config.modules.toolbar.handlers[format]).toBe(handler);
+      }
+    });
+
     test('toolbar format array', () => {
       const config = expandConfig(`#${testContainerId}`, {
         modules: {

packages/website/content/guides/how-to-customize-quill.mdx → packages/website/content/docs/customization.mdx

@@ -1,32 +1,29 @@
 ---
-title: How to Customize Quill
+title: Customization
 ---
 
 Quill was designed with customization and extension in mind. This is achieved by implementing a small editor core exposed by a granular, well defined [API](/docs/api). The core is augmented by [modules](/docs/modules), using the same [APIs](/docs/api) you have access to.
 
 In general, common customizations are handled in [configurations](#configurations/), user interfaces by [Themes](#themes) and CSS, functionality by [modules](#modules), and editor contents by [Parchment](#content-and-formatting).
 
-
 ### Configurations
 
 Quill favors Code over Configuration™, but for very common needs, especially where the equivalent code would be lengthy or complex, Quill provides [configuration](/docs/configuration/) options. This would be a good first place to look to determine if you even need to implement any custom functionality.
 
 Two of the most powerful options is `modules` and `theme`. You can drastically change or expand what Quill can and does do by simply adding or removing individual [modules](/docs/modules/) or using a different [theme](/docs/themes/).
 
-
 ### Themes
 
 Quill officially supports a standard toolbar theme [Snow](/docs/themes/#snow) and a floating tooltip theme [Bubble](/docs/themes/#bubble). Since Quill is not confined within an iframe like many legacy editors, many visual modifications can be made with just CSS, using one of the existing themes.
 
 If you would like to drastically change UI interactions, you can omit the `theme` configuration option, which will give you an unstyled Quill editor. You do still need to include a minimal stylesheet that, for example, makes sure spaces render in all browsers and ordered lists are appropriately numbered.
 
 ```html
-<link rel="stylesheet" href="{{site.cdn}}/quill.core.css">
+<link rel="stylesheet" href="{{site.cdn}}/quill.core.css" />
 ```
 
 From there you can implement and attach your own UI elements like custom dropdowns or tooltips. The last section of [Cloning Medium with Parchment](/guides/cloning-medium-with-parchment/#final-polish) provides an example of this in action.
 
-
 ### Modules
 
 Quill is designed with a modular architecture composed of a small editing core, surrounded by modules that augment its functionality. Some of this functionality is quite integral to editing, such as the [History](/docs/modules/history/) module, which manages undo and redo. Because all modules use the same public [API](/docs/api) exposed to the developer, even interchanging core modules is possible, when necessary.
@@ -44,7 +41,7 @@ const quill = new Quill('#editor', {
   },
   theme: 'snow'
 });
-`
+`,
   }}
 />
 
@@ -54,7 +51,6 @@ Nevertheless, staying true to Quill modular design, you can still drastically ch
 
 Finally, you may want to add functionality not provided by existing modules. In this case, it may be convenient to organize this as a Quill module, which the [Building A Custom Module](/guides/building-a-custom-module/) guide covers. Of course, it is certainly valid to just keep this logic separate from Quill, in your application code instead.
 
-
 ### Content and Formatting
 
 Quill allows modification and extension of the contents and formats that it understands through its document model [Parchment](https://github.com/quilljs/parchment/). Content and formats are represented in Parchment as either Blots or Attributors, which roughly correspond to Nodes or Attributes in the DOM.
@@ -72,9 +68,9 @@ Quill.register(SizeStyle, true);
 // Initialize as you would normally
 const quill = new Quill('#editor', {
   modules: {
-    toolbar: true
+    toolbar: true,
   },
-  theme: 'snow'
+  theme: 'snow',
 });
 ```
 
@@ -85,19 +81,23 @@ In addition to choosing the particular Attributor, you can also customize existi
 ```js
 const FontAttributor = Quill.import('attributors/class/font');
 FontAttributor.whitelist = [
-  'sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu'
+  'sofia',
+  'slabo',
+  'roboto',
+  'inconsolata',
+  'ubuntu',
 ];
 Quill.register(FontAttributor, true);
 ```
 
 Note you still need to add styling for these classes into your CSS files.
 
 ```html
-<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
 <style>
-.ql-font-roboto {
-  font-family: 'Roboto', sans-serif;
-}
+  .ql-font-roboto {
+    font-family: 'Roboto', sans-serif;
+  }
 </style>
 ```
 
@@ -127,7 +127,7 @@ quill.setContents(
     .insert('\\n')
 );
 `
-  }}
+}}
 />
 
 #### Extending Blots
@@ -152,9 +152,9 @@ Quill.register(PlainListItem, true);
 // Initialize as you would normally
 const quill = new Quill('#editor', {
   modules: {
-    toolbar: true
+    toolbar: true,
   },
-  theme: 'snow'
+  theme: 'snow',
 });
 ```