@doist/typist 2.3.1 → 3.0.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [3.0.0](https://github.com/Doist/typist/compare/v2.3.1...v3.0.0) (2024-01-18)
+
+### ⚠ BREAKING CHANGES
+
+-   **extensions:** The `smartToggleBulletList` and
+    `smartToggleOrderedList` commands were renamed to have the same name as
+    the built-in toggle functions so that they can easily be used by the
+    default keyboard shortcuts without having to change the
+    `addKeyboardShortcuts` function.
+
+The `BulletList` and `OrderedList` extensions now take an additional
+option, `smartToggle` (default: `false`), that indicates whether hard
+breaks should be replaced by paragraphs before toggling the
+selection into a bullet/ordered list, or not.
+
+### Features
+
+-   **extensions:** Overwrite built-in List/Ordered toggle functions with a `smartToggle` option ([#620](https://github.com/Doist/typist/issues/620)) ([059da61](https://github.com/Doist/typist/commit/059da61605370f8a3534d3c7669acbc952ea40d3))
+
 ## [2.3.1](https://github.com/Doist/typist/compare/v2.3.0...v2.3.1) (2024-01-17)
 
 ### Bug Fixes

package/dist/extensions/rich-text/rich-text-bullet-list.d.ts

@@ -1,27 +1,20 @@
 import type { BulletListOptions } from '@tiptap/extension-bullet-list';
 /**
- * Augment the official `@tiptap/core` module with extra commands, relevant for this extension, so
- * that the compiler knows about them.
+ * The options available to customize the `RichTextBulletList` extension.
  */
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        richTextBulletList: {
-            /**
-             * Smartly toggles the selection into a bullet list, converting any hard breaks into
-             * paragraphs before doing so.
-             *
-             * @see https://discuss.prosemirror.net/t/how-to-convert-a-selection-of-text-lines-into-paragraphs/6099
-             */
-            smartToggleBulletList: () => ReturnType;
-        };
-    }
-}
+type RichTextBulletListOptions = {
+    /**
+     * Replace hard breaks in the selection with paragraphs before toggling the selection into a
+     * bullet list. By default, hard breaks are not replaced.
+     */
+    smartToggle: boolean;
+} & BulletListOptions;
 /**
- * Custom extension that extends the built-in `BulletList` extension to add a smart toggle command
- * with support for hard breaks, which are automatically converted into paragraphs before toggling
- * the selection into a bullet list.
+ * Custom extension that extends the built-in `BulletList` extension to add an option for smart
+ * toggling, which takes into account hard breaks in the selection, and converts them into
+ * paragraphs before toggling the selection into a bullet list.
  */
-declare const RichTextBulletList: import("@tiptap/core").Node<BulletListOptions, any>;
+declare const RichTextBulletList: import("@tiptap/core").Node<RichTextBulletListOptions, any>;
 export { RichTextBulletList };
-export type { BulletListOptions as RichTextBulletListOptions };
+export type { RichTextBulletListOptions };
 //# sourceMappingURL=rich-text-bullet-list.d.ts.map

package/dist/extensions/rich-text/rich-text-bullet-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text-bullet-list.d.ts","sourceRoot":"","sources":["../../../src/extensions/rich-text/rich-text-bullet-list.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AAEtE;;;GAGG;AACH,OAAO,QAAQ,cAAc,CAAC;IAC1B,UAAU,QAAQ,CAAC,UAAU;QACzB,kBAAkB,EAAE;YAChB;;;;;eAKG;YACH,qBAAqB,EAAE,MAAM,UAAU,CAAA;SAC1C,CAAA;KACJ;CACJ;AAED;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,qDAqDtB,CAAA;AAEF,OAAO,EAAE,kBAAkB,EAAE,CAAA;AAE7B,YAAY,EAAE,iBAAiB,IAAI,yBAAyB,EAAE,CAAA"}
+{"version":3,"file":"rich-text-bullet-list.d.ts","sourceRoot":"","sources":["../../../src/extensions/rich-text/rich-text-bullet-list.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AAEtE;;GAEG;AACH,KAAK,yBAAyB,GAAG;IAC7B;;;OAGG;IACH,WAAW,EAAE,OAAO,CAAA;CACvB,GAAG,iBAAiB,CAAA;AAErB;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,6DA+DtB,CAAA;AAEF,OAAO,EAAE,kBAAkB,EAAE,CAAA;AAE7B,YAAY,EAAE,yBAAyB,EAAE,CAAA"}

package/dist/extensions/rich-text/rich-text-bullet-list.js

@@ -3,39 +3,48 @@ import { ListItem } from '@tiptap/extension-list-item';
 import { TextStyle } from '@tiptap/extension-text-style';
 import { Fragment, Slice } from '@tiptap/pm/model';
 /**
- * Custom extension that extends the built-in `BulletList` extension to add a smart toggle command
- * with support for hard breaks, which are automatically converted into paragraphs before toggling
- * the selection into a bullet list.
+ * Custom extension that extends the built-in `BulletList` extension to add an option for smart
+ * toggling, which takes into account hard breaks in the selection, and converts them into
+ * paragraphs before toggling the selection into a bullet list.
  */
 const RichTextBulletList = BulletList.extend({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            smartToggle: false,
+        };
+    },
     addCommands() {
         const { editor, name, options } = this;
         return {
             ...this.parent?.(),
-            smartToggleBulletList() {
+            toggleBulletList() {
                 return ({ commands, state, tr, chain }) => {
-                    const { schema } = state;
-                    const { selection } = tr;
-                    const { $from, $to } = selection;
-                    const hardBreakPositions = [];
-                    // Find and store the positions of all hard breaks in the selection
-                    tr.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
-                        if (node.type.name === 'hardBreak') {
-                            hardBreakPositions.push(pos);
-                        }
-                    });
-                    // Replace each hard break with a slice that closes and re-opens a paragraph,
-                    // effectively inserting a "paragraph break" in place of a "hard break"
-                    // (this is performed in reverse order to compensate for content shifting that
-                    // occurs with each replacement, ensuring accurate insertion points)
-                    hardBreakPositions.reverse().forEach((pos) => {
-                        tr.replace(pos, pos + 1, Slice.maxOpen(Fragment.fromArray([
-                            schema.nodes.paragraph.create(),
-                            schema.nodes.paragraph.create(),
-                        ])));
-                    });
+                    // Replace hard breaks in the selection with paragraphs before toggling?
+                    if (options.smartToggle) {
+                        const { schema } = state;
+                        const { selection } = tr;
+                        const { $from, $to } = selection;
+                        const hardBreakPositions = [];
+                        // Find and store the positions of all hard breaks in the selection
+                        tr.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+                            if (node.type.name === 'hardBreak') {
+                                hardBreakPositions.push(pos);
+                            }
+                        });
+                        // Replace each hard break with a slice that closes and re-opens a paragraph,
+                        // effectively inserting a "paragraph break" in place of a "hard break"
+                        // (this is performed in reverse order to compensate for content shifting that
+                        // occurs with each replacement, ensuring accurate insertion points)
+                        hardBreakPositions.reverse().forEach((pos) => {
+                            tr.replace(pos, pos + 1, Slice.maxOpen(Fragment.fromArray([
+                                schema.nodes.paragraph.create(),
+                                schema.nodes.paragraph.create(),
+                            ])));
+                        });
+                    }
                     // Toggle the selection into a bullet list, optionally keeping attributes
-                    // (this is a verbatim copy of the built-in`toggleBulletList` command)
+                    // (this is a verbatim copy of the built-in `toggleBulletList` command)
                     if (options.keepAttributes) {
                         return chain()
                             .toggleList(name, options.itemTypeName, options.keepMarks)

package/dist/extensions/rich-text/rich-text-ordered-list.d.ts

@@ -1,27 +1,20 @@
 import type { OrderedListOptions } from '@tiptap/extension-ordered-list';
 /**
- * Augment the official `@tiptap/core` module with extra commands, relevant for this extension, so
- * that the compiler knows about them.
+ * The options available to customize the `RichTextOrderedList` extension.
  */
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        richTextOrderedList: {
-            /**
-             * Smartly toggles the selection into an oredered list, converting any hard breaks into
-             * paragraphs before doing so.
-             *
-             * @see https://discuss.prosemirror.net/t/how-to-convert-a-selection-of-text-lines-into-paragraphs/6099
-             */
-            smartToggleOrderedList: () => ReturnType;
-        };
-    }
-}
+type RichTextOrderedListOptions = {
+    /**
+     * Replace hard breaks in the selection with paragraphs before toggling the selection into a
+     * bullet list. By default, hard breaks are not replaced.
+     */
+    smartToggle: boolean;
+} & OrderedListOptions;
 /**
- * Custom extension that extends the built-in `OrderedList` extension to add a smart toggle command
- * with support for hard breaks, which are automatically converted into paragraphs before toggling
- * the selection into an ordered list.
+ * Custom extension that extends the built-in `OrderedList` extension to add an option for smart
+ * toggling, which takes into account hard breaks in the selection, and converts them into
+ * paragraphs before toggling the selection into a bullet list.
  */
-declare const RichTextOrderedList: import("@tiptap/core").Node<OrderedListOptions, any>;
+declare const RichTextOrderedList: import("@tiptap/core").Node<RichTextOrderedListOptions, any>;
 export { RichTextOrderedList };
-export type { OrderedListOptions as RichTextOrderedListOptions };
+export type { RichTextOrderedListOptions };
 //# sourceMappingURL=rich-text-ordered-list.d.ts.map

package/dist/extensions/rich-text/rich-text-ordered-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text-ordered-list.d.ts","sourceRoot":"","sources":["../../../src/extensions/rich-text/rich-text-ordered-list.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAExE;;;GAGG;AACH,OAAO,QAAQ,cAAc,CAAC;IAC1B,UAAU,QAAQ,CAAC,UAAU;QACzB,mBAAmB,EAAE;YACjB;;;;;eAKG;YACH,sBAAsB,EAAE,MAAM,UAAU,CAAA;SAC3C,CAAA;KACJ;CACJ;AAED;;;;GAIG;AACH,QAAA,MAAM,mBAAmB,sDAqDvB,CAAA;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAE9B,YAAY,EAAE,kBAAkB,IAAI,0BAA0B,EAAE,CAAA"}
+{"version":3,"file":"rich-text-ordered-list.d.ts","sourceRoot":"","sources":["../../../src/extensions/rich-text/rich-text-ordered-list.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAExE;;GAEG;AACH,KAAK,0BAA0B,GAAG;IAC9B;;;OAGG;IACH,WAAW,EAAE,OAAO,CAAA;CACvB,GAAG,kBAAkB,CAAA;AAEtB;;;;GAIG;AACH,QAAA,MAAM,mBAAmB,8DA+DvB,CAAA;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAE9B,YAAY,EAAE,0BAA0B,EAAE,CAAA"}

package/dist/extensions/rich-text/rich-text-ordered-list.js

@@ -3,39 +3,48 @@ import { OrderedList } from '@tiptap/extension-ordered-list';
 import { TextStyle } from '@tiptap/extension-text-style';
 import { Fragment, Slice } from '@tiptap/pm/model';
 /**
- * Custom extension that extends the built-in `OrderedList` extension to add a smart toggle command
- * with support for hard breaks, which are automatically converted into paragraphs before toggling
- * the selection into an ordered list.
+ * Custom extension that extends the built-in `OrderedList` extension to add an option for smart
+ * toggling, which takes into account hard breaks in the selection, and converts them into
+ * paragraphs before toggling the selection into a bullet list.
  */
 const RichTextOrderedList = OrderedList.extend({
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            smartToggle: false,
+        };
+    },
     addCommands() {
         const { editor, name, options } = this;
         return {
             ...this.parent?.(),
-            smartToggleOrderedList() {
+            toggleOrderedList() {
                 return ({ commands, state, tr, chain }) => {
-                    const { schema } = state;
-                    const { selection } = tr;
-                    const { $from, $to } = selection;
-                    const hardBreakPositions = [];
-                    // Find and store the positions of all hard breaks in the selection
-                    tr.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
-                        if (node.type.name === 'hardBreak') {
-                            hardBreakPositions.push(pos);
-                        }
-                    });
-                    // Replace each hard break with a slice that closes and re-opens a paragraph,
-                    // effectively inserting a "paragraph break" in place of a "hard break"
-                    // (this is performed in reverse order to compensate for content shifting that
-                    // occurs with each replacement, ensuring accurate insertion points)
-                    hardBreakPositions.reverse().forEach((pos) => {
-                        tr.replace(pos, pos + 1, Slice.maxOpen(Fragment.fromArray([
-                            schema.nodes.paragraph.create(),
-                            schema.nodes.paragraph.create(),
-                        ])));
-                    });
+                    // Replace hard breaks in the selection with paragraphs before toggling?
+                    if (options.smartToggle) {
+                        const { schema } = state;
+                        const { selection } = tr;
+                        const { $from, $to } = selection;
+                        const hardBreakPositions = [];
+                        // Find and store the positions of all hard breaks in the selection
+                        tr.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+                            if (node.type.name === 'hardBreak') {
+                                hardBreakPositions.push(pos);
+                            }
+                        });
+                        // Replace each hard break with a slice that closes and re-opens a paragraph,
+                        // effectively inserting a "paragraph break" in place of a "hard break"
+                        // (this is performed in reverse order to compensate for content shifting that
+                        // occurs with each replacement, ensuring accurate insertion points)
+                        hardBreakPositions.reverse().forEach((pos) => {
+                            tr.replace(pos, pos + 1, Slice.maxOpen(Fragment.fromArray([
+                                schema.nodes.paragraph.create(),
+                                schema.nodes.paragraph.create(),
+                            ])));
+                        });
+                    }
                     // Toggle the selection into a bullet list, optionally keeping attributes
-                    // (this is a verbatim copy of the built-in`toggleBulletList` command)
+                    // (this is a verbatim copy of the built-in `toggleBulletList` command)
                     if (options.keepAttributes) {
                         return chain()
                             .toggleList(name, options.itemTypeName, options.keepMarks)

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@doist/typist",
     "description": "The mighty Tiptap-based rich-text editor React component that powers Doist products.",
-    "version": "2.3.1",
+    "version": "3.0.0",
     "license": "MIT",
     "homepage": "https://typist.doist.dev/",
     "repository": "https://github.com/Doist/typist",
@@ -88,18 +88,18 @@
         "@semantic-release/changelog": "6.0.3",
         "@semantic-release/exec": "6.0.3",
         "@semantic-release/git": "10.0.1",
-        "@storybook/addon-a11y": "7.6.8",
-        "@storybook/addon-essentials": "7.6.8",
-        "@storybook/addons": "7.6.8",
+        "@storybook/addon-a11y": "7.6.9",
+        "@storybook/addon-essentials": "7.6.9",
+        "@storybook/addons": "7.6.9",
         "@storybook/csf": "0.1.2",
         "@storybook/mdx2-csf": "1.1.0",
-        "@storybook/react": "7.6.8",
-        "@storybook/react-vite": "7.6.8",
+        "@storybook/react": "7.6.9",
+        "@storybook/react-vite": "7.6.9",
         "@testing-library/dom": "9.3.4",
         "@testing-library/jest-dom": "6.2.0",
         "@testing-library/react": "14.1.2",
         "@types/lodash-es": "4.17.12",
-        "@types/react": "18.2.47",
+        "@types/react": "18.2.48",
         "@types/react-dom": "18.2.18",
         "@types/react-syntax-highlighter": "15.5.11",
         "@types/turndown": "5.0.4",
@@ -123,21 +123,21 @@
         "jsdom": "23.2.0",
         "lint-staged": "15.2.0",
         "npm-run-all": "4.1.5",
-        "prettier": "3.2.1",
+        "prettier": "3.2.4",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-icons": "5.0.1",
         "react-markdown": "8.0.7",
         "react-syntax-highlighter": "15.5.0",
         "rimraf": "5.0.5",
-        "semantic-release": "22.0.12",
+        "semantic-release": "23.0.0",
         "tippy.js": "6.3.7",
-        "storybook": "7.6.8",
+        "storybook": "7.6.9",
         "storybook-css-modules": "1.0.8",
         "type-fest": "4.9.0",
         "typescript": "5.3.3",
         "typescript-plugin-css-modules": "5.0.2",
-        "vitest": "1.2.0"
+        "vitest": "1.2.1"
     },
     "peerDependencies": {
         "@react-hookz/web": "^14.2.3 || >=15.x",