feat: add shortcuts support (remirror#1370)

Keyboard shortcuts replaces e.g. characters `(c)` by `©`.

.changeset/happy-pets-hang.md

@@ -0,0 +1,6 @@
+---
+'remirror': patch
+'@remirror/preset-wysiwyg': patch
+---
+
+Add keyboard shortcuts

.changeset/many-buttons-eat.md

@@ -0,0 +1,5 @@
+---
+'@remirror/extension-shortcuts': patch
+---
+
+Add support for keyboard shortcuts

docs/extensions/shortcuts-extension.mdx

@@ -0,0 +1,30 @@
+---
+hide_title: true
+title: 'ShortcutsExtension'
+---
+
+# `ShortcutsExtension`
+
+## Summary
+
+Adds shortcut support to the editor, e.g. replaces `(c)` by `©`.
+
+## Usage
+
+### Installation
+
+This extension is installed for you when you install the main `remirror` package.
+
+You can use the imports in the following way.
+
+```ts
+import { ShortcutsExtension } from 'remirror/extensions';
+```
+
+To install it directly you can use
+
+The extension is provided by the `@remirror/extension-shortcuts` package. There are two ways of pulling it into your project.
+
+## API
+
+- [ShortcutsExtension](../api/extension-shortcuts)

packages/remirror/package.json

@@ -113,6 +113,7 @@
     "@remirror/extension-placeholder": "^1.0.11",
     "@remirror/extension-positioner": "^1.1.9",
     "@remirror/extension-search": "^1.0.10",
+    "@remirror/extension-shortcuts": "^1.0.1",
     "@remirror/extension-strike": "^1.0.10",
     "@remirror/extension-sub": "^1.0.10",
     "@remirror/extension-sup": "^1.0.10",

packages/remirror/src/extensions.ts

@@ -35,6 +35,7 @@ export * from '@remirror/extension-paragraph';
 export * from '@remirror/extension-placeholder';
 export * from '@remirror/extension-positioner';
 export * from '@remirror/extension-search';
+export * from '@remirror/extension-shortcuts';
 export * from '@remirror/extension-strike';
 export * from '@remirror/extension-sub';
 export * from '@remirror/extension-sup';

packages/remirror/src/tsconfig.json

@@ -142,6 +142,9 @@
     {
       "path": "../../remirror__extension-search/src"
     },
+    {
+      "path": "../../remirror__extension-shortcuts/src"
+    },
     {
       "path": "../../remirror__extension-strike/src"
     },

packages/remirror__extension-shortcuts/CHANGELOG.md

@@ -0,0 +1,23 @@
+# @remirror/extension-shortcuts
+
+## 1.0.1
+
+> 2021-07-17
+
+### Patch Changes
+
+- [#1002](https://github.com/remirror/remirror/pull/1002) [`b3ea6f10d`](https://github.com/remirror/remirror/commit/b3ea6f10d4917f933971236be936731f75a69a70) Thanks [@ifiokjr](https://github.com/ifiokjr)! - Use carets `^` for versioning of `remirror` packages.
+
+- Updated dependencies [[`b3ea6f10d`](https://github.com/remirror/remirror/commit/b3ea6f10d4917f933971236be936731f75a69a70)]:
+  - @remirror/core@1.0.1
+  - @remirror/pm@1.0.1
+
+## 1.0.0
+
+> 2021-07-17
+
+### Patch Changes
+
+- Updated dependencies [[`8202b65ef`](https://github.com/remirror/remirror/commit/8202b65efbce5a8338c45fd34b3efb676b7e54e7), [`adfb12a4c`](https://github.com/remirror/remirror/commit/adfb12a4cee7031eec4baa10830b0fc0134ebdc8), [`7f3569729`](https://github.com/remirror/remirror/commit/7f3569729c0d843b7745a490feda383b31aa2b7e), [`270edd91b`](https://github.com/remirror/remirror/commit/270edd91ba6badf9468721e35fa0ddc6a21c6dd2), [`b4dfcad36`](https://github.com/remirror/remirror/commit/b4dfcad364a0b41d321fbd26a97377f2b6d4047c), [`e9b10fa5a`](https://github.com/remirror/remirror/commit/e9b10fa5a50dd3e342b75b0a852627db99f22dc2), [`6ab7d2224`](https://github.com/remirror/remirror/commit/6ab7d2224d16ba821d8510e0498aaa9c420922c4), [`270edd91b`](https://github.com/remirror/remirror/commit/270edd91ba6badf9468721e35fa0ddc6a21c6dd2), [`270edd91b`](https://github.com/remirror/remirror/commit/270edd91ba6badf9468721e35fa0ddc6a21c6dd2), [`7024de573`](https://github.com/remirror/remirror/commit/7024de5738a968f2914a999e570d723899815611), [`03d0ae485`](https://github.com/remirror/remirror/commit/03d0ae485079a166a223b902ea72cbe62504b0f0)]:
+  - @remirror/core@1.0.0
+  - @remirror/pm@1.0.0

packages/remirror__extension-shortcuts/__tests__/shortcuts-extension.spec.ts

@@ -0,0 +1,28 @@
+import { extensionValidityTest, renderEditor } from 'jest-remirror';
+import { object } from '@remirror/core';
+
+import { ShortcutsExtension, ShortcutsOptions } from '../';
+
+extensionValidityTest(ShortcutsExtension);
+
+function create(options: ShortcutsOptions = object()) {
+  const extension = new ShortcutsExtension(options);
+  const editor = renderEditor([extension]);
+
+  return { ...editor, editor };
+}
+
+describe('inputRules', () => {
+  it('replaces sequence with shortcut', () => {
+    const {
+      nodes: { p, doc },
+      add,
+    } = create();
+
+    add(doc(p('<cursor>')))
+      .insertText('->')
+      .callback((content) => {
+        expect(content.state.doc).toEqualRemirrorDocument(doc(p('→')));
+      });
+  });
+});

packages/remirror__extension-shortcuts/__tests__/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "__AUTO_GENERATED__": [
+    "To update the configuration edit the following field.",
+    "`package.json > @remirror > tsconfigs > '__tests__'`",
+    "",
+    "Then run: `pnpm -w generate:ts`"
+  ],
+  "extends": "../../../support/tsconfig.base.json",
+  "compilerOptions": {
+    "types": [
+      "jest",
+      "jest-extended",
+      "jest-axe",
+      "@testing-library/jest-dom",
+      "snapshot-diff",
+      "node"
+    ],
+    "declaration": false,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "importsNotUsedAsValues": "remove"
+  },
+  "include": ["./"],
+  "references": [
+    {
+      "path": "../src"
+    },
+    {
+      "path": "../../testing/src"
+    },
+    {
+      "path": "../../remirror/src"
+    },
+    {
+      "path": "../../remirror__core/src"
+    }
+  ]
+}

packages/remirror__extension-shortcuts/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@remirror/extension-shortcuts",
+  "version": "1.0.1",
+  "private": true,
+  "description": "Replace characters with keyboard shortcuts",
+  "keywords": [
+    "remirror",
+    "extension"
+  ],
+  "homepage": "https://github.com/remirror/remirror/tree/HEAD/packages/remirror__extension-shortcuts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/remirror/remirror.git",
+    "directory": "packages/remirror__extension-shortcuts"
+  },
+  "license": "MIT",
+  "contributors": [
+    "Ronny Roeller <[email protected]>"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/remirror-extension-shortcuts.esm.js",
+      "require": "./dist/remirror-extension-shortcuts.cjs.js",
+      "browser": "./dist/remirror-extension-shortcuts.browser.esm.js",
+      "types": "./dist/remirror-extension-shortcuts.cjs.d.ts",
+      "default": "./dist/remirror-extension-shortcuts.esm.js"
+    },
+    "./package.json": "./package.json",
+    "./types/*": "./dist/declarations/src/*.d.ts"
+  },
+  "main": "dist/remirror-extension-shortcuts.cjs.js",
+  "module": "dist/remirror-extension-shortcuts.esm.js",
+  "browser": {
+    "./dist/remirror-extension-shortcuts.cjs.js": "./dist/remirror-extension-shortcuts.browser.cjs.js",
+    "./dist/remirror-extension-shortcuts.esm.js": "./dist/remirror-extension-shortcuts.browser.esm.js"
+  },
+  "types": "dist/remirror-extension-shortcuts.cjs.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@babel/runtime": "^7.13.10",
+    "@remirror/core": "^1.3.0"
+  },
+  "devDependencies": {
+    "@remirror/pm": "^1.0.6"
+  },
+  "peerDependencies": {
+    "@remirror/pm": "^1.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "@remirror": {
+    "sizeLimit": "5 KB"
+  }
+}

packages/remirror__extension-shortcuts/readme.md

@@ -0,0 +1,36 @@
+# @remirror/extension-shortcuts
+
+> **Replace characters with keyboard shortcuts**
+
+[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)
+
+[version]: https://flat.badgen.net/npm/v/@remirror/extension-shortcuts
+[npm]: https://npmjs.com/package/@remirror/extension-shortcuts
+[license]: https://flat.badgen.net/badge/license/MIT/purple
+[size]: https://bundlephobia.com/result?p=@remirror/extension-shortcuts
+[size-badge]: https://flat.badgen.net/bundlephobia/minzip/@remirror/extension-shortcuts
+[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
+[downloads-badge]: https://badgen.net/npm/dw/@remirror/extension-shortcuts/red?icon=npm
+
+## Installation
+
+```bash
+# yarn
+yarn add @remirror/extension-shortcuts
+
+# pnpm
+pnpm add @remirror/extension-shortcuts
+
+# npm
+npm install @remirror/extension-shortcuts
+```
+
+## Usage
+
+The following code creates an instance of this extension.
+
+```ts
+import { ShortcutsExtension } from '@remirror/extension-shortcuts';
+
+const extension = new ShortcutsExtension();
+```

packages/remirror__extension-shortcuts/src/index.ts

@@ -0,0 +1 @@
+export * from './shortcuts-extension';

packages/remirror__extension-shortcuts/src/shortcuts-extension.ts

@@ -0,0 +1,83 @@
+import { extension, InputRule, PlainExtension, plainInputRule } from '@remirror/core';
+
+export interface ShortcutsOptions {}
+
+const SHORTCUTS: Array<[RegExp, string]> = [
+  // Dash
+  [/--$/, '—'],
+  // ellipsis
+  [/\.{3}$/, '…'],
+  // openDoubleQuote
+  [/(?:^|[\s"'(<[{\u2018\u201C])(")$/, '“'],
+  // closeDoubleQuote
+  [/"$/, '”'],
+  // openSingleQuote
+  [/(?:^|[\s"'(<[{\u2018\u201C])(')$/, '‘'],
+  // closeSingleQuote
+  [/'$/, '’'],
+  // leftArrow
+  [/<-$/, '←'],
+  // rightArrow
+  [/->$/, '→'],
+  // copyright
+  [/\(c\)$/, '©'],
+  // trademark
+  [/\(tm\)$/, '™'],
+  // registeredTrademark
+  [/\(r\)$/, '®'],
+  // oneHalf
+  [/1\/2$/, '½'],
+  // plusMinus
+  [/\+\/-$/, '±'],
+  // notEqual
+  [/!=$/, '≠'],
+  // laquo
+  [/<<$/, '«'],
+  // raquo
+  [/>>$/, '»'],
+  // multiplication
+  [/\d+\s?([*x])\s?\d+$/, '×'],
+  // superscriptTwo
+  [/\^2$/, '²'],
+  // superscriptThree
+  [/\^3$/, '³'],
+  // oneQuarter
+  [/1\/4$/, '¼'],
+  // threeQuarters
+  [/3\/4$/, '¾'],
+];
+
+/**
+ * Replace characters with keyboard shortcuts
+ *
+ * Inspired by Tiptap's extension-typography
+ */
+@extension<ShortcutsOptions>({
+  defaultOptions: {},
+})
+export class ShortcutsExtension extends PlainExtension<ShortcutsOptions> {
+  get name() {
+    return 'shortcuts' as const;
+  }
+
+  /**
+   * Manage input rules for emoticons.
+   */
+  createInputRules(): InputRule[] {
+    return SHORTCUTS.map(([regexp, replace]) => {
+      // Replace emoticons
+      return plainInputRule({
+        regexp,
+        transformMatch: () => replace,
+      });
+    });
+  }
+}
+
+declare global {
+  namespace Remirror {
+    interface AllExtensions {
+      template: ShortcutsExtension;
+    }
+  }
+}

packages/remirror__extension-shortcuts/src/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "__AUTO_GENERATED__": [
+    "To update the configuration edit the following field.",
+    "`package.json > @remirror > tsconfigs > 'src'`",
+    "",
+    "Then run: `pnpm -w generate:ts`"
+  ],
+  "extends": "../../../support/tsconfig.base.json",
+  "compilerOptions": {
+    "types": [],
+    "declaration": true,
+    "noEmit": false,
+    "composite": true,
+    "emitDeclarationOnly": true,
+    "outDir": "../dist-types"
+  },
+  "include": ["./"],
+  "references": [
+    {
+      "path": "../../remirror__core/src"
+    }
+  ]
+}

packages/remirror__preset-wysiwyg/__tests__/tsconfig.json

@@ -82,6 +82,9 @@
     {
       "path": "../../remirror__extension-search/src"
     },
+    {
+      "path": "../../remirror__extension-shortcuts/src"
+    },
     {
       "path": "../../remirror__extension-strike/src"
     },

packages/remirror__preset-wysiwyg/package.json

@@ -58,6 +58,7 @@
     "@remirror/extension-link": "^1.1.7",
     "@remirror/extension-list": "^1.2.5",
     "@remirror/extension-search": "^1.0.10",
+    "@remirror/extension-shortcuts": "^1.0.1",
     "@remirror/extension-strike": "^1.0.10",
     "@remirror/extension-trailing-node": "^1.0.10",
     "@remirror/extension-underline": "^1.0.10",

packages/remirror__preset-wysiwyg/src/tsconfig.json

@@ -67,6 +67,9 @@
     {
       "path": "../../remirror__extension-search/src"
     },
+    {
+      "path": "../../remirror__extension-shortcuts/src"
+    },
     {
       "path": "../../remirror__extension-strike/src"
     },