Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom control style not working for link #3148

Closed
wandersonalwes opened this issue Dec 8, 2022 · 4 comments
Closed

Custom control style not working for link #3148

wandersonalwes opened this issue Dec 8, 2022 · 4 comments
Labels
Fixed patch Completed issues that will be published with next patch (1.0.X)

Comments

@wandersonalwes
Copy link

wandersonalwes commented Dec 8, 2022

What package has an issue

@mantine/tiptap

Describe the bug

I'm not able to apply a custom style to the link.

sample code:

import React from "react";
import { createStyles } from "@mantine/core";
import { RichTextEditor, Link } from "@mantine/tiptap";
import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";

const useStyles = createStyles((theme) => ({
  control: {
    border: 0,
    width: 30,
    height: 30,

    "&>svg": {
      width: 20,
      height: 20,
      strokeWidth: 1.2
    }
  }
}));

export const Editor = () => {
  const editor = useEditor({
    extensions: [StarterKit, Link],
    content: "Hello"
  });
  const { classes } = useStyles();

  return (
    <RichTextEditor
      editor={editor}
      classNames={{
        control: classes.control
      }}
    >
      <RichTextEditor.ControlsGroup>
        <RichTextEditor.Bold />
        <RichTextEditor.Italic />
        {/* custom style not working here*/}
        <RichTextEditor.Link />
        <RichTextEditor.Unlink />
      </RichTextEditor.ControlsGroup>

      <RichTextEditor.Content />
    </RichTextEditor>
  );
};

What version of @mantine/hooks page do you have in package.json?

^5.8.4

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/affectionate-ritchie-mwfpkn

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

No response

@rtivital
Copy link
Member

rtivital commented Dec 8, 2022

Please provide a sandbox with this template – https://codesandbox.io/s/mantine-template-9ze89?file=/src/App.tsx:0-6
Sandboxes created with Next.js usually do not work

@wandersonalwes
Copy link
Author

Please provide a sandbox with this template – https://codesandbox.io/s/mantine-template-9ze89?file=/src/App.tsx:0-6 Sandboxes created with Next.js usually do not work

https://codesandbox.io/s/mantine-tiptap-link-3etcv6

@rtivital rtivital added the Fixed patch Completed issues that will be published with next patch (1.0.X) label Dec 12, 2022
rtivital added a commit that referenced this issue Dec 12, 2022
@rtivital
Copy link
Member

Fixed in 5.9.4

@wandersonalwes
Copy link
Author

@rtivital Great job 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fixed patch Completed issues that will be published with next patch (1.0.X)
Projects
None yet
Development

No branches or pull requests

2 participants