[@mantine/tiptap] Fix control styles API working incorrectly for Link…

… and Color control (#3148)
mantinedev · Dec 12, 2022 · 366b17e · 366b17e
1 parent a64e66f
commit 366b17e
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 47 deletions.
diff --git a/src/mantine-tiptap/src/RichTextEditor.context.ts b/src/mantine-tiptap/src/RichTextEditor.context.ts
@@ -1,12 +1,17 @@
+import { Styles, ClassNames } from '@mantine/core';
 import { createSafeContext } from '@mantine/utils';
 import { Editor } from '@tiptap/react';
 import { RichTextEditorLabels } from './labels';
+import type { RichTextEditorStylesNames } from './RichTextEditor';
 
 interface RichTextEditorContext {
   editor: Editor;
   labels: RichTextEditorLabels;
   withCodeHighlightStyles: boolean;
   withTypographyStyles: boolean;
+  classNames: ClassNames<RichTextEditorStylesNames>;
+  styles: Styles<RichTextEditorStylesNames>;
+  unstyled: boolean;
 }
 
 export const [RichTextEditorProvider, useRichTextEditorContext] =

diff --git a/src/mantine-tiptap/src/RichTextEditor.story.tsx b/src/mantine-tiptap/src/RichTextEditor.story.tsx
@@ -305,3 +305,25 @@ export function PlaceholderExtension() {
     </div>
   );
 }
+
+export function ControlStylesApi() {
+  const editor = useEditor({
+    extensions: [StarterKit, Link],
+    content: '',
+  });
+
+  return (
+    <div style={{ padding: 40 }}>
+      <RichTextEditor editor={editor} styles={{ control: { backgroundColor: 'pink' } }}>
+        <RichTextEditor.Toolbar>
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Bold />
+            <RichTextEditor.Link />
+          </RichTextEditor.ControlsGroup>
+        </RichTextEditor.Toolbar>
+
+        <RichTextEditor.Content />
+      </RichTextEditor>
+    </div>
+  );
+}
diff --git a/src/mantine-tiptap/src/RichTextEditor.tsx b/src/mantine-tiptap/src/RichTextEditor.tsx
@@ -1,12 +1,6 @@
 /* eslint-disable react/no-unused-prop-types */
 import React, { useMemo, forwardRef } from 'react';
-import {
-  Box,
-  useComponentDefaultProps,
-  DefaultProps,
-  Selectors,
-  StylesApiProvider,
-} from '@mantine/core';
+import { Box, useComponentDefaultProps, DefaultProps, Selectors } from '@mantine/core';
 import { Editor } from '@tiptap/react';
 import { ForwardRefWithStaticComponents } from '@mantine/utils';
 import { RichTextEditorProvider } from './RichTextEditor.context';
@@ -115,15 +109,21 @@ export const RichTextEditor: RichTextEditorComponent = forwardRef<
   const mergedLabels = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
 
   return (
-    <StylesApiProvider classNames={classNames} styles={styles} unstyled={unstyled}>
-      <RichTextEditorProvider
-        value={{ editor, labels: mergedLabels, withCodeHighlightStyles, withTypographyStyles }}
-      >
-        <Box className={cx(classes.root, className)} {...others} ref={ref}>
-          {children}
-        </Box>
-      </RichTextEditorProvider>
-    </StylesApiProvider>
+    <RichTextEditorProvider
+      value={{
+        editor,
+        labels: mergedLabels,
+        withCodeHighlightStyles,
+        withTypographyStyles,
+        classNames,
+        styles,
+        unstyled,
+      }}
+    >
+      <Box className={cx(classes.root, className)} {...others} ref={ref}>
+        {children}
+      </Box>
+    </RichTextEditorProvider>
   );
 }) as any;
 

diff --git a/src/mantine-tiptap/src/Toolbar/Toolbar.tsx b/src/mantine-tiptap/src/Toolbar/Toolbar.tsx
@@ -1,11 +1,6 @@
 import React, { forwardRef } from 'react';
-import {
-  Group,
-  DefaultProps,
-  useComponentDefaultProps,
-  Selectors,
-  useContextStylesApi,
-} from '@mantine/core';
+import { Group, DefaultProps, useComponentDefaultProps, Selectors } from '@mantine/core';
+import { useRichTextEditorContext } from '../RichTextEditor.context';
 import useStyles from './Toolbar.styles';
 
 export type ToolbarStylesNames = Selectors<typeof useStyles>;
@@ -31,10 +26,15 @@ export const Toolbar = forwardRef<HTMLDivElement, RichTextEditorToolbarProps>((p
     props
   );
 
-  const { classNames, styles, unstyled } = useContextStylesApi();
+  const ctx = useRichTextEditorContext();
   const { classes, cx } = useStyles(
     { sticky, stickyOffset },
-    { name: 'RichTextEditor', classNames, styles, unstyled }
+    {
+      name: 'RichTextEditor',
+      classNames: ctx.classNames,
+      styles: ctx.styles,
+      unstyled: ctx.unstyled,
+    }
   );
 
   return (

diff --git a/src/mantine-tiptap/src/controls/ColorPickerControl/ColorPickerControl.tsx b/src/mantine-tiptap/src/controls/ColorPickerControl/ColorPickerControl.tsx
@@ -10,7 +10,6 @@ import {
   ActionIcon,
   Tooltip,
   ColorPickerProps,
-  useContextStylesApi,
   useComponentDefaultProps,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
@@ -41,8 +40,7 @@ export const ColorPickerControl = forwardRef<HTMLButtonElement, ColorPickerContr
       props
     );
 
-    const { unstyled } = useContextStylesApi();
-    const { editor, labels } = useRichTextEditorContext();
+    const { editor, labels, unstyled } = useRichTextEditorContext();
     const [opened, { toggle, close }] = useDisclosure(false);
     const [state, setState] = useState<'palette' | 'colorPicker'>('palette');
     const currentColor = editor?.getAttributes('textStyle').color || '#000';

diff --git a/src/mantine-tiptap/src/controls/Control/Control.tsx b/src/mantine-tiptap/src/controls/Control/Control.tsx
@@ -1,11 +1,6 @@
 import React, { forwardRef } from 'react';
-import {
-  UnstyledButton,
-  DefaultProps,
-  Selectors,
-  useContextStylesApi,
-  useComponentDefaultProps,
-} from '@mantine/core';
+import { UnstyledButton, DefaultProps, Selectors, useComponentDefaultProps } from '@mantine/core';
+import { useRichTextEditorContext } from '../../RichTextEditor.context';
 import useStyles from './Control.styles';
 
 export type ControlStylesNames = Selectors<typeof useStyles>;
@@ -36,7 +31,7 @@ export const Control = forwardRef<HTMLButtonElement, RichTextEditorControlProps>
     props
   );
 
-  const { classNames, styles, unstyled } = useContextStylesApi();
+  const { classNames, styles, unstyled } = useRichTextEditorContext();
   const { classes, cx } = useStyles(null, {
     name: 'RichTextEditor',
     classNames,

diff --git a/src/mantine-tiptap/src/controls/ControlsGroup/ControlsGroup.tsx b/src/mantine-tiptap/src/controls/ControlsGroup/ControlsGroup.tsx
@@ -1,11 +1,6 @@
 import React, { forwardRef } from 'react';
-import {
-  DefaultProps,
-  Box,
-  useComponentDefaultProps,
-  Selectors,
-  useContextStylesApi,
-} from '@mantine/core';
+import { DefaultProps, Box, useComponentDefaultProps, Selectors } from '@mantine/core';
+import { useRichTextEditorContext } from '../../RichTextEditor.context';
 import useStyles from './ControlsGroup.styles';
 
 export type ControlsGroupStylesNames = Selectors<typeof useStyles>;
@@ -18,13 +13,13 @@ const defaultProps: Partial<RichTextEditorControlsGroupProps> = {};
 
 export const ControlsGroup = forwardRef<HTMLDivElement, RichTextEditorControlsGroupProps>(
   (props, ref) => {
-    const { classNames, styles, unstyled } = useContextStylesApi();
     const { className, children, ...others } = useComponentDefaultProps(
       'RichTextEditorControlsGroup',
       defaultProps,
       props
     );
 
+    const { classNames, styles, unstyled } = useRichTextEditorContext();
     const { classes, cx } = useStyles(null, {
       name: 'RichTextEditor',
       classNames,

diff --git a/src/mantine-tiptap/src/controls/LinkControl/LinkControl.tsx b/src/mantine-tiptap/src/controls/LinkControl/LinkControl.tsx
@@ -9,7 +9,6 @@ import {
   PopoverProps,
   Selectors,
   useComponentDefaultProps,
-  useContextStylesApi,
 } from '@mantine/core';
 import { useDisclosure, useInputState, useWindowEvent } from '@mantine/hooks';
 import { ControlBase, RichTextEditorControlBaseProps } from '../ControlBase/ControlBase';
@@ -40,9 +39,8 @@ export const LinkControl = forwardRef<HTMLButtonElement, RichTextEditorLinkContr
       props
     );
 
-    const { classNames, styles, unstyled } = useContextStylesApi();
+    const { editor, labels, classNames, styles, unstyled } = useRichTextEditorContext();
     const { classes } = useStyles(null, { name: 'RichTextEditor', classNames, styles, unstyled });
-    const { editor, labels } = useRichTextEditorContext();
     const [url, setUrl] = useInputState('');
     const [external, setExternal] = useState(false);
     const [opened, { open, close }] = useDisclosure(false);