feat(react-components): rewrite React components using mui

chore: remove circular dependency
remirror · Sep 9, 2022 · e11fd11 · e11fd11
1 parent e78fc93
commit e11fd11
Show file tree

Hide file tree

Showing 105 changed files with 1,824 additions and 3,285 deletions.
diff --git a/packages/remirror__core-utils/src/command-utils.ts b/packages/remirror__core-utils/src/command-utils.ts
@@ -308,6 +308,21 @@ export function isChrome(minVersion = 0): boolean {
   return parsedAgent ? Number.parseInt(assertGet(parsedAgent, 2), 10) >= minVersion : false;
 }
 
+/**
+ * Taken from https://stackoverflow.com/a/4900484
+ *
+ * Check that the browser is safari. Supports passing a minimum version to check
+ * that it is a greater than or equal to this version.
+ */
+export function isSafari(minVersion = 0): boolean {
+  const isMac = navigator.userAgent.match(/Mac/);
+  const parsedAgent = navigator.userAgent.match(/Safari\/(\d+)\./);
+
+  return isMac && !isChrome() && parsedAgent
+    ? Number.parseInt(assertGet(parsedAgent, 2), 10) >= minVersion
+    : false;
+}
+
 /**
  * Checks the selection for the current state and updates the active transaction
  * to a selection that is consistent with the initial selection.

diff --git a/packages/remirror__core-utils/src/index.ts b/packages/remirror__core-utils/src/index.ts
@@ -6,6 +6,7 @@ export type {
 } from './command-utils';
 export {
   isChrome,
+  isSafari,
   lift,
   preserveSelection,
   removeMark,

diff --git a/packages/remirror__core/src/builtins/keymap-extension.ts b/packages/remirror__core/src/builtins/keymap-extension.ts
@@ -603,8 +603,8 @@ export type ShortcutMap = Record<NamedShortcut, string>;
 export const DEFAULT_SHORTCUTS: ShortcutMap = {
   [NamedShortcut.Copy]: 'Mod-c',
   [NamedShortcut.Cut]: 'Mod-x',
-  [NamedShortcut.Paste]: 'Mod-p',
-  [NamedShortcut.PastePlain]: 'Mod-Shift-p',
+  [NamedShortcut.Paste]: 'Mod-v',
+  [NamedShortcut.PastePlain]: 'Mod-Shift-v',
   [NamedShortcut.SelectAll]: 'Mod-a',
   [NamedShortcut.Undo]: 'Mod-z',
   [NamedShortcut.Redo]: environment.isMac ? 'Shift-Mod-z' : 'Mod-y',

diff --git a/packages/remirror__extension-callout/src/callout-extension.ts b/packages/remirror__extension-callout/src/callout-extension.ts
@@ -25,7 +25,7 @@ import { TextSelection } from '@remirror/pm/state';
 import { EditorView } from '@remirror/pm/view';
 import { ExtensionCalloutTheme } from '@remirror/theme';
 
-import type { CalloutAttributes, CalloutOptions } from './callout-types';
+import type { CalloutExtensionAttributes, CalloutOptions } from './callout-types';
 import {
   dataAttributeEmoji,
   dataAttributeType,
@@ -164,7 +164,7 @@ export class CalloutExtension extends NodeExtension<CalloutOptions> {
    * ```
    */
   @command(toggleCalloutOptions)
-  toggleCallout(attributes: CalloutAttributes = {}): CommandFunction {
+  toggleCallout(attributes: CalloutExtensionAttributes = {}): CommandFunction {
     return toggleWrap(this.type, attributes);
   }
 
@@ -179,7 +179,7 @@ export class CalloutExtension extends NodeExtension<CalloutOptions> {
    * ```
    */
   @command(toggleCalloutOptions)
-  updateCallout(attributes: CalloutAttributes, pos?: number): CommandFunction {
+  updateCallout(attributes: CalloutExtensionAttributes, pos?: number): CommandFunction {
     return updateNodeAttributes(this.type)(attributes, pos);
   }
 

diff --git a/packages/remirror__extension-callout/src/callout-types.ts b/packages/remirror__extension-callout/src/callout-types.ts
@@ -35,7 +35,7 @@ export interface CalloutOptions {
   renderEmoji?: (node: ProsemirrorNode, view: EditorView, getPos: () => number) => HTMLElement;
 }
 
-export interface CalloutAttributes extends ProsemirrorAttributes {
+export interface CalloutExtensionAttributes extends ProsemirrorAttributes {
   /**
    * The type of callout, for instance `info`, `warning`, `error`, `success` or `blank`.
    *

diff --git a/packages/remirror__extension-callout/src/callout-utils.ts b/packages/remirror__extension-callout/src/callout-utils.ts
@@ -11,7 +11,7 @@ import {
 } from '@remirror/core';
 import { ExtensionCalloutMessages } from '@remirror/messages';
 
-import type { CalloutAttributes } from './callout-types';
+import type { CalloutExtensionAttributes } from './callout-types';
 
 export const dataAttributeType = 'data-callout-type';
 
@@ -21,9 +21,9 @@ export const dataAttributeEmoji = 'data-callout-emoji';
  * Check that the attributes exist and are valid for the codeBlock
  * updateAttributes.
  */
-export function isValidCalloutAttributes(
+export function isValidCalloutExtensionAttributes(
   attributes: ProsemirrorAttributes,
-): attributes is CalloutAttributes {
+): attributes is CalloutExtensionAttributes {
   if (attributes && isObject(attributes)) {
     const attributesChecklist = Object.entries(attributes).map(([key, value]) => {
       switch (key) {
@@ -49,9 +49,9 @@ export function isValidCalloutAttributes(
  * This is used to update the type of the callout.
  */
 export function updateNodeAttributes(type: NodeType) {
-  return (attributes: CalloutAttributes, pos?: number): CommandFunction =>
+  return (attributes: CalloutExtensionAttributes, pos?: number): CommandFunction =>
     ({ state: { tr, selection, doc }, dispatch }) => {
-      if (!isValidCalloutAttributes(attributes)) {
+      if (!isValidCalloutExtensionAttributes(attributes)) {
         throw new Error('Invalid attrs passed to the updateAttributes method');
       }
 
@@ -79,7 +79,7 @@ const { DESCRIPTION, LABEL } = ExtensionCalloutMessages;
 
 export const toggleCalloutOptions: Remirror.CommandDecoratorOptions = {
   icon: ({ attrs }) => {
-    switch (attrs?.type as CalloutAttributes['type']) {
+    switch (attrs?.type as CalloutExtensionAttributes['type']) {
       case 'error':
         return 'closeCircleLine';
       case 'success':

diff --git a/packages/remirror__extension-callout/src/index.ts b/packages/remirror__extension-callout/src/index.ts
@@ -1 +1,2 @@
 export * from './callout-extension';
+export type { CalloutExtensionAttributes, CalloutOptions } from './callout-types';
diff --git a/packages/remirror__extension-code-block/src/code-block-extension.ts b/packages/remirror__extension-code-block/src/code-block-extension.ts
@@ -255,7 +255,7 @@ export class CodeBlockExtension extends NodeExtension<CodeBlockOptions> {
    * remove the code block altogether.
    */
   @command(toggleCodeBlockOptions)
-  toggleCodeBlock(attributes: Partial<CodeBlockAttributes>): CommandFunction {
+  toggleCodeBlock(attributes: Partial<CodeBlockAttributes> = {}): CommandFunction {
     return toggleBlockItem({
       type: this.type,
       toggleType: this.options.toggleName,

diff --git a/packages/remirror__extension-code-block/src/code-block-utils.ts b/packages/remirror__extension-code-block/src/code-block-utils.ts
@@ -22,7 +22,7 @@ import {
   range,
   TextProps,
 } from '@remirror/core';
-import { ExtensionCodeMessages } from '@remirror/messages';
+import { ExtensionCodeBlockMessages } from '@remirror/messages';
 import { TextSelection } from '@remirror/pm/state';
 import { Decoration } from '@remirror/pm/view';
 
@@ -343,7 +343,7 @@ export function getLanguageFromDom(codeElement: HTMLElement): string | undefined
   );
 }
 
-const { DESCRIPTION, LABEL } = ExtensionCodeMessages;
+const { DESCRIPTION, LABEL } = ExtensionCodeBlockMessages;
 export const toggleCodeBlockOptions: Remirror.CommandDecoratorOptions = {
   icon: 'bracesLine',
   description: ({ t }) => t(DESCRIPTION),

diff --git a/packages/remirror__extension-history/src/history-extension.ts b/packages/remirror__extension-history/src/history-extension.ts
@@ -7,6 +7,8 @@ import {
   environment,
   extension,
   Handler,
+  Helper,
+  helper,
   isFunction,
   keyBinding,
   KeyBindingProps,
@@ -20,7 +22,7 @@ import {
   Static,
 } from '@remirror/core';
 import { ExtensionHistoryMessages as Messages } from '@remirror/messages';
-import { history, redo, undo } from '@remirror/pm/history';
+import { history, redo, redoDepth, undo, undoDepth } from '@remirror/pm/history';
 
 export interface HistoryOptions {
   /**
@@ -197,6 +199,22 @@ export class HistoryExtension extends PlainExtension<HistoryOptions> {
   redo(): NonChainableCommandFunction {
     return nonChainable(this.wrapMethod(redo, this.options.onRedo));
   }
+
+  /**
+   * Returns the amount of undoable events available from the current state, or provide a custom state.
+   */
+  @helper()
+  undoDepth(state: EditorState = this.store.getState()): Helper<number> {
+    return undoDepth(state);
+  }
+
+  /**
+   * Returns the amount of redoable events available from the current state, or provide a custom state.
+   */
+  @helper()
+  redoDepth(state: EditorState = this.store.getState()): Helper<number> {
+    return redoDepth(state);
+  }
 }
 
 declare global {

diff --git a/packages/remirror__extension-list/src/task-list-extension.ts b/packages/remirror__extension-list/src/task-list-extension.ts
@@ -55,7 +55,7 @@ export class TaskListExtension extends NodeExtension {
   /**
    * Toggle the task list for the current selection.
    */
-  @command({ icon: 'listCheck', label: ({ t }) => t(Messages.TASK_LIST_LABEL) })
+  @command({ icon: 'checkboxMultipleLine', label: ({ t }) => t(Messages.TASK_LIST_LABEL) })
   toggleTaskList(): CommandFunction {
     return toggleList(this.type, assertGet(this.store.schema.nodes, 'taskListItem'));
   }

diff --git a/packages/remirror__i18n/src/en/messages.po b/packages/remirror__i18n/src/en/messages.po
@@ -273,7 +273,7 @@ msgstr "Bulleted list"
 #: packages/remirror__messages/src/extension-callout-messages.ts:14
 msgid "extension.command.toggle-callout.description"
 msgstr ""
-"{level, select, info {Create an information callout block}\n"
+"{type, select, info {Create an information callout block}\n"
 "warning {Create a warning callout block}\n"
 "error {Create an error callout block}\n"
 "success {Create a success callout block}\n"
@@ -283,7 +283,7 @@ msgstr ""
 #: packages/remirror__messages/src/extension-callout-messages.ts:4
 msgid "extension.command.toggle-callout.label"
 msgstr ""
-"{level, select, info {Information Callout}\n"
+"{type, select, info {Information Callout}\n"
 "warning {Warning Callout}\n"
 "error {Error Callout}\n"
 "success {Success Callout}\n"

diff --git a/packages/remirror__i18n/src/en/messages.ts b/packages/remirror__i18n/src/en/messages.ts
@@ -67,7 +67,7 @@
   'extension.command.toggle-bullet-list.description': 'Bulleted list',
   'extension.command.toggle-callout.description': [
     [
-      'level',
+      'type',
       'select',
       {
         info: 'Create an information callout block',
@@ -80,7 +80,7 @@
   ],
   'extension.command.toggle-callout.label': [
     [
-      'level',
+      'type',
       'select',
       {
         info: 'Information Callout',

diff --git a/packages/remirror__icons/src/all-icons.ts b/packages/remirror__icons/src/all-icons.ts
@@ -4992,21 +4992,6 @@ export const checkboxMultipleFill: IconTree[] = [
   },
 ];
 
-/**
- * The icon for `checkbox-multiple-line.svg` created by [RemixIcons](https://remixicons.com).
- * ![Checkbox Multiple Line](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/icons/System/checkbox-multiple-line.svg)
- */
-export const checkboxMultipleLine: IconTree[] = [
-  { tag: 'path', attr: { fill: 'none', d: 'M0 0h24v24H0z' } },
-  {
-    tag: 'path',
-    attr: {
-      fillRule: 'nonzero',
-      d: 'M7 7V3a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-4v3.993c0 .556-.449 1.007-1.007 1.007H3.007A1.006 1.006 0 0 1 2 20.993l.003-12.986C2.003 7.451 2.452 7 3.01 7H7zm2 0h6.993C16.549 7 17 7.449 17 8.007V15h3V4H9v3zm6 2H4.003L4 20h11V9zm-6.497 9l-3.536-3.536 1.414-1.414 2.122 2.122 4.242-4.243 1.414 1.414L8.503 18z',
-    },
-  },
-];
-
 /**
  * The icon for `china-railway-fill.svg` created by [RemixIcons](https://remixicons.com).
  * ![China Railway Fill](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/icons/Map/china-railway-fill.svg)

diff --git a/packages/remirror__icons/src/core-icons.ts b/packages/remirror__icons/src/core-icons.ts
@@ -303,6 +303,21 @@ export const checkboxCircleLine: IconTree[] = [
   },
 ];
 
+/**
+ * The icon for `checkbox-multiple-line.svg` created by [RemixIcons](https://remixicons.com).
+ * ![Checkbox Multiple Line](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/icons/System/checkbox-multiple-line.svg)
+ */
+export const checkboxMultipleLine: IconTree[] = [
+  { tag: 'path', attr: { fill: 'none', d: 'M0 0h24v24H0z' } },
+  {
+    tag: 'path',
+    attr: {
+      fillRule: 'nonzero',
+      d: 'M7 7V3a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-4v3.993c0 .556-.449 1.007-1.007 1.007H3.007A1.006 1.006 0 0 1 2 20.993l.003-12.986C2.003 7.451 2.452 7 3.01 7H7zm2 0h6.993C16.549 7 17 7.449 17 8.007V15h3V4H9v3zm6 2H4.003L4 20h11V9zm-6.497 9l-3.536-3.536 1.414-1.414 2.122 2.122 4.242-4.243 1.414 1.414L8.503 18z',
+    },
+  },
+];
+
 /**
  * The icon for `clipboard-fill.svg` created by [RemixIcons](https://remixicons.com).
  * ![Clipboard Fill](https://cdn.jsdelivr.net/npm/remixicon@2.5.0/icons/Document/clipboard-fill.svg)

diff --git a/packages/remirror__react-components/package.json b/packages/remirror__react-components/package.json
@@ -38,7 +38,10 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.13.10",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.3.0",
     "@lingui/core": "^3.14.0",
+    "@mui/material": "^5.8.5",
     "@popperjs/core": "^2.9.2",
     "@remirror/core": "^2.0.0-beta.16",
     "@remirror/extension-positioner": "^2.0.0-beta.16",
@@ -55,11 +58,7 @@
     "create-context-state": "^2.0.0-beta.15",
     "match-sorter": "^6.3.0",
     "multishift": "^2.0.0-beta.16",
-    "react-color": "^2.19.3",
-    "react-popper": "^2.2.5",
-    "reakit": "^1.3.11",
-    "reakit-system-palette": "^0.14.2",
-    "reakit-utils": "^0.15.2"
+    "react-color": "^2.19.3"
   },
   "devDependencies": {
     "@remirror/pm": "^2.0.0-beta.16",

diff --git a/packages/remirror__react-components/src/button-groups/basic-formatting-button-group.tsx b/packages/remirror__react-components/src/button-groups/basic-formatting-button-group.tsx
@@ -0,0 +1,19 @@
+import React, { FC, ReactNode } from 'react';
+
+import { ToggleBoldButton, ToggleItalicButton, ToggleUnderlineButton } from '../buttons';
+import { CommandButtonGroup } from './command-button-group';
+
+export interface BasicFormattingButtonGroupProps {
+  children?: ReactNode | ReactNode[];
+}
+
+export const BasicFormattingButtonGroup: FC<BasicFormattingButtonGroupProps> = ({ children }) => {
+  return (
+    <CommandButtonGroup>
+      <ToggleBoldButton />
+      <ToggleItalicButton />
+      <ToggleUnderlineButton />
+      {children}
+    </CommandButtonGroup>
+  );
+};
diff --git a/packages/remirror__react-components/src/button-groups/callout-type-button-group.tsx b/packages/remirror__react-components/src/button-groups/callout-type-button-group.tsx
@@ -0,0 +1,25 @@
+import React, { FC, ReactNode } from 'react';
+
+import { ToggleCalloutButton } from '../buttons';
+import { CommandButtonGroup } from './command-button-group';
+
+export interface CalloutTypeButtonGroupProps {
+  children?: ReactNode | ReactNode[];
+}
+
+const INFO_CALLOUT = { type: 'info' };
+const WARNING_CALLOUT = { type: 'warning' };
+const ERROR_CALLOUT = { type: 'error' };
+const SUCCESS_CALLOUT = { type: 'success' };
+
+export const CalloutTypeButtonGroup: FC<CalloutTypeButtonGroupProps> = ({ children }) => {
+  return (
+    <CommandButtonGroup>
+      <ToggleCalloutButton attrs={INFO_CALLOUT} />
+      <ToggleCalloutButton attrs={WARNING_CALLOUT} />
+      <ToggleCalloutButton attrs={ERROR_CALLOUT} />
+      <ToggleCalloutButton attrs={SUCCESS_CALLOUT} />
+      {children}
+    </CommandButtonGroup>
+  );
+};
diff --git a/packages/remirror__react-components/src/button-groups/command-button-group.tsx b/packages/remirror__react-components/src/button-groups/command-button-group.tsx
@@ -0,0 +1,21 @@
+import { Box, BoxProps } from '@mui/material';
+import React, { FC, ReactNode } from 'react';
+
+export interface CommandButtonGroupProps extends Omit<BoxProps, 'children'> {
+  children: ReactNode | ReactNode[];
+}
+
+export const CommandButtonGroup: FC<CommandButtonGroupProps> = (props) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        width: 'fit-content',
+        bgcolor: 'background.paper',
+        color: 'text.secondary',
+      }}
+      {...props}
+    />
+  );
+};
diff --git a/packages/remirror__react-components/src/button-groups/data-transfer-button-group.tsx b/packages/remirror__react-components/src/button-groups/data-transfer-button-group.tsx
@@ -0,0 +1,19 @@
+import React, { FC, ReactNode } from 'react';
+
+import { CopyButton, CutButton, PasteButton } from '../buttons';
+import { CommandButtonGroup } from './command-button-group';
+
+export interface DataTransferButtonGroupProps {
+  children?: ReactNode | ReactNode[];
+}
+
+export const DataTransferButtonGroup: FC<DataTransferButtonGroupProps> = ({ children }) => {
+  return (
+    <CommandButtonGroup>
+      <CopyButton />
+      <CutButton />
+      <PasteButton />
+      {children}
+    </CommandButtonGroup>
+  );
+};