62 |
63 | {/* We truncate in the middle, since the beginning and end of a URL are often the most
64 | important parts */}
65 | {truncateMiddle(currentHref, 50)}
66 |
67 |
68 |
69 |
70 |
78 |
86 |
87 |
88 | );
89 | }
90 |
--------------------------------------------------------------------------------
/src/controls/MenuButtonHighlightColor.tsx:
--------------------------------------------------------------------------------
1 | ///
2 | import { useRichTextEditorContext } from "../context";
3 | import { FormatInkHighlighterNoBar } from "../icons";
4 | import {
5 | MenuButtonColorPicker,
6 | type MenuButtonColorPickerProps,
7 | } from "./MenuButtonColorPicker";
8 |
9 | export interface MenuButtonHighlightColorProps
10 | extends Partial {
11 | /**
12 | * Shows this as the current highlight color (in the color picker) if a
13 | * highlight is active for the selected editor text but no specific color was
14 | * specified for it.
15 | *
16 | * The Tiptap Highlight extension uses HTML `` elements, so this default
17 | * color should be chosen based on any styling applied to mark
18 | * background-color on your page.
19 | *
20 | * This prop is set to "#ffff00" (yellow) by default, as this is what most
21 | * browsers will show, per the W3 spec defaults
22 | * https://stackoverflow.com/a/34969133/4543977.
23 | */
24 | defaultMarkColor?: string;
25 | }
26 |
27 | /**
28 | * Control for a user to choose a text highlight color, for the
29 | * @tiptap/extension-highlight when it's configured with
30 | * `Highlight.configure({ multicolor: true })`.
31 | *
32 | * See also MenuButtonHighlightToggle for a simple "on off" highlight toggle
33 | * control, for use with the Highlight extension when not using multicolor.
34 | */
35 | export default function MenuButtonHighlightColor({
36 | defaultMarkColor = "#ffff00",
37 | ...menuButtonProps
38 | }: MenuButtonHighlightColorProps) {
39 | const editor = useRichTextEditorContext();
40 | const currentHighlightColor = editor?.isActive("highlight")
41 | ? // If there's no color set for the highlight (as can happen with the
42 | // highlight keyboard shortcut, toggleHighlight/setHighlight when no
43 | // explicit color is provided, and the "==thing==" syntax), fall back to
44 | // the provided defaultMarkColor
45 | // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
46 | (editor.getAttributes("highlight").color as string | null | undefined) ||
47 | defaultMarkColor
48 | : "";
49 | return (
50 | {
56 | if (newColor) {
57 | editor?.chain().focus().setHighlight({ color: newColor }).run();
58 | } else {
59 | editor?.chain().focus().unsetHighlight().run();
60 | }
61 | }}
62 | disabled={!editor?.isEditable || !editor.can().toggleHighlight()}
63 | {...menuButtonProps}
64 | labels={{
65 | removeColorButton: "None",
66 | removeColorButtonTooltipTitle: "Remove highlighting from this text",
67 | ...menuButtonProps.labels,
68 | }}
69 | />
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/src/MenuBar.tsx:
--------------------------------------------------------------------------------
1 | import { Collapse } from "@mui/material";
2 | import { makeStyles } from "tss-react/mui";
3 | import { Z_INDEXES, getUtilityClasses } from "./styles";
4 |
5 | export type MenuBarClasses = ReturnType["classes"];
6 |
7 | export type MenuBarProps = {
8 | /**
9 | * Whether to hide the menu bar. When changing between false/true, uses the
10 | * collapse animation. By default false
11 | */
12 | hide?: boolean;
13 | /**
14 | * If true, the menu bar will not "stick" above the editor content on the
15 | * page as you scroll down past where it normally sits.
16 | */
17 | disableSticky?: boolean;
18 | /**
19 | * The menu bar's sticky `top` offset, when `disableSticky=false`.
20 | *
21 | * Useful if there's other fixed/sticky content above the editor (like an app
22 | * navigation toolbar). By default 0.
23 | */
24 | stickyOffset?: number;
25 | /** The set of controls (buttons, etc) to include in the menu bar. */
26 | children?: React.ReactNode;
27 | /** Class applied to the outermost `root` element. */
28 | className?: string;
29 | /** Override or extend existing styles. */
30 | classes?: Partial;
31 | };
32 |
33 | const menuBarClasses: MenuBarClasses = getUtilityClasses("MenuBar", [
34 | "root",
35 | "sticky",
36 | "nonSticky",
37 | "content",
38 | ]);
39 |
40 | const useStyles = makeStyles<{ stickyOffset?: number }>({
41 | name: { MenuBar },
42 | })((theme, { stickyOffset }) => {
43 | return {
44 | root: {
45 | borderBottomColor: theme.palette.divider,
46 | borderBottomStyle: "solid",
47 | borderBottomWidth: 1,
48 | },
49 |
50 | sticky: {
51 | position: "sticky",
52 | top: stickyOffset ?? 0,
53 | zIndex: Z_INDEXES.MENU_BAR,
54 | background: theme.palette.background.default,
55 | },
56 |
57 | nonSticky: {},
58 |
59 | content: {},
60 | };
61 | });
62 |
63 | /**
64 | * A collapsible, optionally-sticky container for showing editor controls atop
65 | * the editor content.
66 | */
67 | export default function MenuBar({
68 | hide,
69 | disableSticky,
70 | stickyOffset,
71 | children,
72 | className,
73 | classes: overrideClasses,
74 | }: MenuBarProps) {
75 | const { classes, cx } = useStyles(
76 | { stickyOffset },
77 | {
78 | props: { classes: overrideClasses },
79 | }
80 | );
81 | return (
82 |
99 |
{children}
100 |
101 | );
102 | }
103 |
--------------------------------------------------------------------------------
/src/utils/DebounceRender.tsx:
--------------------------------------------------------------------------------
1 | import type { DebounceSettings, DebouncedFunc } from "lodash";
2 | import debounce from "lodash/debounce";
3 | import { Component } from "react";
4 |
5 | export type DebounceRenderProps = {
6 | /**
7 | * The wait in ms for debouncing. Any changes to this prop after initial
8 | * render are ignored.
9 | */
10 | wait?: number;
11 | /**
12 | * Options to use for lodash's debounce call. Any changes to this prop after
13 | * initial render are ignored.
14 | */
15 | options?: DebounceSettings;
16 | /** Content to render at debounced intervals as props change */
17 | children: React.ReactNode;
18 | };
19 |
20 | /**
21 | * This component debounces the rendering of its children.
22 | *
23 | * WARNING: Use with caution! This component should *only* be used when there
24 | * are updates triggered via "force-update" (like via Tiptap's `useEditor` hook
25 | * which updates upon ProseMirror editor changes to the selection, content,
26 | * etc.). For ordinary React components, traditional memoization techniques
27 | * around props and state (like useCallback, useMemo, memo, etc.) should be used
28 | * instead.
29 | *
30 | * This component is provided for a very narrow use-case: with our menu
31 | * controls, without debouncing the controls would re-render per editor state
32 | * change (e.g. for every character typed or for caret movement), which can bog
33 | * things down a bit, like when holding down backspace or typing very quickly.
34 | * (This is due to the way that Tiptap's useEditor re-renders upon changes in
35 | * the ProseMirror state, which is to force-update
36 | * https://github.com/ueberdosis/tiptap/blob/b0198eb14b98db5ca691bd9bfe698ffaddbc4ded/packages/react/src/useEditor.ts#L105-L113,
37 | * rather than in response to prop changes. Because of the force re-render, and
38 | * since we *do* want to watch editor updates, we have to debounce rendering a
39 | * bit less conventionally, rather than using callbacks, memo, etc.). We do
40 | * want/need the menu controls to update very frequently, since we need them to
41 | * reflect the state of the current cursor position and editor nodes/marks,
42 | * etc., but we want rendering to stay performant, so the `wait` and `options`
43 | * defaults below are a reasonable enough balance.
44 | */
45 | export default class DebounceRender extends Component {
46 | // Similar to the approach from
47 | // https://github.com/podefr/react-debounce-render, except as a component
48 | // instead of an HOC.
49 | public updateDebounced: DebouncedFunc<() => void>;
50 |
51 | constructor(props: DebounceRenderProps) {
52 | super(props);
53 | this.updateDebounced = debounce(
54 | // eslint-disable-next-line @typescript-eslint/unbound-method
55 | this.forceUpdate,
56 | props.wait ?? 170,
57 | props.options ?? {
58 | leading: true,
59 | trailing: true,
60 | maxWait: 300,
61 | }
62 | );
63 | }
64 |
65 | shouldComponentUpdate() {
66 | this.updateDebounced();
67 | return false;
68 | }
69 |
70 | componentWillUnmount() {
71 | this.updateDebounced.cancel();
72 | }
73 |
74 | render() {
75 | return this.props.children;
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/controls/MenuButton.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ToggleButton,
3 | toggleButtonClasses,
4 | type ToggleButtonProps,
5 | } from "@mui/material";
6 | import type { ReactNode, RefObject } from "react";
7 | import { makeStyles } from "tss-react/mui";
8 | import type { Except, SetOptional } from "type-fest";
9 | import MenuButtonTooltip, {
10 | type MenuButtonTooltipProps,
11 | } from "./MenuButtonTooltip";
12 |
13 | export interface MenuButtonProps
14 | extends SetOptional, "value"> {
15 | /**
16 | * The label that will be displayed in a tooltip when hovering. Also used as
17 | * the underlying ToggleButton `value` if a separate `value` prop is not
18 | * included.
19 | */
20 | tooltipLabel: MenuButtonTooltipProps["label"];
21 | /**
22 | * (Optional) An array of the keyboard shortcut keys that trigger this action
23 | * will be displayed in a tooltip when hovering. If empty, no keyboard
24 | * shortcut is displayed.
25 | *
26 | * Use the literal string "mod" to represent Cmd on Mac and Ctrl on Windows
27 | * and Linux.
28 | *
29 | * Example: ["mod", "Shift", "7"] is the array that should be provided as the
30 | * combination for toggling an ordered list.
31 | *
32 | * For the list of pre-configured Tiptap shortcuts, see
33 | * https://tiptap.dev/api/keyboard-shortcuts.
34 | */
35 | tooltipShortcutKeys?: MenuButtonTooltipProps["shortcutKeys"];
36 | /**
37 | * The icon component to use for the button, rendered as button `children` if
38 | * provided. Must accept a className.
39 | */
40 | IconComponent?: React.ElementType<{ className: string }>;
41 | /**
42 | * Override the default button content instead of displaying the
43 | * .
44 | */
45 | children?: ReactNode;
46 | /** Attaches a `ref` to the ToggleButton's root button element. */
47 | buttonRef?: RefObject;
48 | }
49 |
50 | export const MENU_BUTTON_FONT_SIZE_DEFAULT = "1.25rem";
51 |
52 | const useStyles = makeStyles({ name: { MenuButton } })({
53 | root: {
54 | // Use && for additional specificity, since MUI's conditional "disabled"
55 | // styles also set the border
56 | [`&& .${toggleButtonClasses.root}`]: {
57 | border: "none",
58 | padding: 5,
59 | },
60 | },
61 |
62 | menuButtonIcon: {
63 | fontSize: MENU_BUTTON_FONT_SIZE_DEFAULT,
64 | },
65 | });
66 |
67 | /**
68 | * A general-purpose base component for showing an editor control for use in a
69 | * menu.
70 | */
71 | export default function MenuButton({
72 | tooltipLabel,
73 | tooltipShortcutKeys,
74 | IconComponent,
75 | buttonRef,
76 | children,
77 | ...toggleButtonProps
78 | }: MenuButtonProps) {
79 | const { classes } = useStyles();
80 | return (
81 |
82 |
86 |
92 | {children ??
93 | (IconComponent && (
94 |
95 | ))}
96 |
97 |
98 |
99 | );
100 | }
101 |
--------------------------------------------------------------------------------
/src/controls/MenuButtonImageUpload.tsx:
--------------------------------------------------------------------------------
1 | import type { Editor } from "@tiptap/core";
2 | import { useRef, type ComponentPropsWithoutRef } from "react";
3 | import type { SetOptional } from "type-fest";
4 | import { useRichTextEditorContext } from "../context";
5 | import { insertImages, type ImageNodeAttributes } from "../utils";
6 | import MenuButtonAddImage, {
7 | type MenuButtonAddImageProps,
8 | } from "./MenuButtonAddImage";
9 |
10 | export interface MenuButtonImageUploadProps
11 | extends SetOptional {
12 | /**
13 | * Take an array of user-selected files to upload, and return an array of
14 | * image node attributes. Typically will be an async function (i.e. will
15 | * return a promise) used to upload the files to a server and return URLs at
16 | * which the image files can be viewed subsequently.
17 | */
18 | onUploadFiles: (
19 | files: File[]
20 | ) => ImageNodeAttributes[] | Promise;
21 | /**
22 | * Handler called with the result from `onUploadFiles`, taking the uploaded
23 | * files and inserting them into the Tiptap content. If not provided, by
24 | * default uses mui-tiptap's `insertImages` utility, which inserts the images
25 | * at the user's current caret position (replacing selected content if there
26 | * is selected content).
27 | */
28 | insertImages?: ({
29 | images,
30 | editor,
31 | }: {
32 | images: ImageNodeAttributes[];
33 | editor: Editor | null;
34 | }) => void;
35 | /**
36 | * Override props used for the hidden file input. For instance, to restrict to
37 | * single file uploads with `multiple={false}`. Use `accept` to customize
38 | * which file types are accepted (by default "image/*" to restrict to standard
39 | * image formats; see
40 | * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept).
41 | */
42 | inputProps?: Partial>;
43 | }
44 |
45 | /**
46 | * Render a button for uploading one or more images to insert into the editor
47 | * content. You must provide the `onUploadFiles` prop in order to specify how to
48 | * handle the user-selected files, like uploading them to a server which returns
49 | * a servable image URL, or converting the image files into a local object URL
50 | * or base64-encoded image URL.
51 | */
52 | export default function MenuButtonImageUpload({
53 | onUploadFiles,
54 | inputProps,
55 | ...props
56 | }: MenuButtonImageUploadProps) {
57 | const editor = useRichTextEditorContext();
58 |
59 | const fileInput = useRef(null);
60 |
61 | const handleAndInsertNewFiles = async (files: FileList) => {
62 | if (!editor || editor.isDestroyed || files.length === 0) {
63 | return;
64 | }
65 | const attributesForImages = await onUploadFiles(Array.from(files));
66 | insertImages({
67 | editor,
68 | images: attributesForImages,
69 | });
70 | };
71 |
72 | return (
73 | <>
74 | fileInput.current?.click()}
77 | {...props}
78 | />
79 | {
85 | if (event.target.files) {
86 | await handleAndInsertNewFiles(event.target.files);
87 | }
88 | }}
89 | style={{ display: "none" }} // Hide this input
90 | {...inputProps}
91 | />
92 |
93 | );
94 | }
95 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing Guidelines
2 |
3 | _Pull requests, bug reports, and all other forms of contribution are welcomed and highly encouraged!_ :octocat:
4 |
5 | ## How can I contribute?
6 |
7 | ### GitHub issues
8 |
9 | If you encounter a problem with this library or if you have a new feature you'd like to see in this project, please create [a new issue](https://github.com/sjdemartini/mui-tiptap/issues/new/choose).
10 |
11 | ### GitHub pull requests
12 |
13 | Please leverage the repository's own tools to make sure the code is aligned with our standards. See the [Development setup](#development-setup) notes below. If you're using VSCode, it's easiest to use the recommended extensions (`.vscode/extensions.json`) to get integrated linting and autoformatting.
14 |
15 | It's recommended to run all check commands before submitting the PR (`type:check`, `format:check`, `lint:check`, `spell:check`, `test:coverage`).
16 |
17 | ## Development setup
18 |
19 | 1. Set up [pnpm](https://pnpm.io/installation)
20 | 2. Run `pnpm install`
21 | 3. Run `pnpm dev` and view the demo site at the printed localhost URL
22 |
23 | This package uses Vite with Hot Module Replacement (HMR), so file edits should reflect immediately in your browser during local development.
24 |
25 | To instead test a "built" version of this package which is installed into an "external" module, you can run `pnpm example`, which runs a server with the separate application in the `example/` directory.
26 |
27 | ### Adding a new icon
28 |
29 | When the `@mui/icons-material` icon set is insufficient, it can be helpful to browse a larger set of free open-source icons and add what’s needed directly to `mui-tiptap`. This also avoids any additional third-party JS dependencies.
30 |
31 | 1. Download an icon (e.g. from https://iconbuddy.app, which aggregates and organizes thousands of free icons from many separate icon libraries and sources)
32 | 2. Create a new tsx file in `src/icons/`
33 | 3. If icon edits or customizations are needed, https://yqnn.github.io/svg-path-editor/ and https://boxy-svg.com/app are handy free web-based tools. Typically you will want to work with and export in a "0 0 24 24" viewBox, since that is what MUI icons use by default.
34 | 4. Copy the `` from the downloaded SVG, and in the new TSX file, pass that as the argument to the `createSvgIcon` helper from `@mui/material`. (If there are multiple ``s, put them within a React Fragment.)
35 | 5. Export the icon component in that new file and in `src/icons/index.ts`.
36 |
37 | ## Releasing a new version (for maintainers)
38 |
39 | When a new version should be cut since some new changes have landed on the `main` branch, do the following to publish it:
40 |
41 | 1. Go to the `main` branch and pull in the latest changes.
42 | 2. Run `npm version `, depending on what's appropriate per semver conventions for the latest changes.
43 | - This will create a commit that updates the `version` in `package.json`, and add a git tag for that new commit.
44 | 3. Push the commit and tags (ex: `git push origin main` and `git push --tags`)
45 | 4. The `release.yml` GitHub Actions workflow will run and should publish to npm upon completion.
46 | 5. Once the new version has been successfully published to npm, create a "Release" in GitHub for to the newly pushed tag, per the steps [here](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository#creating-a-release), which can auto-generate release notes that can be edited and cleaned up for clarity and succinctness.
47 |
--------------------------------------------------------------------------------
/src/controls/ColorSwatchButton.tsx:
--------------------------------------------------------------------------------
1 | import Check from "@mui/icons-material/Check";
2 | import {
3 | forwardRef,
4 | type ComponentPropsWithoutRef,
5 | type ElementRef,
6 | } from "react";
7 | import { makeStyles } from "tss-react/mui";
8 | import type { Except } from "type-fest";
9 |
10 | export interface ColorSwatchButtonProps
11 | // Omit the default "color" prop so that it can't be confused for the `value`
12 | // prop
13 | extends Except, "color"> {
14 | /**
15 | * What color is shown with this swatch. If not provided, shows a checkerboard
16 | * pattern, typically used as "not set" or "transparent".
17 | */
18 | value?: string;
19 | /**
20 | * An optional human-friendly name for this color, used as an aria-label for
21 | * the button.
22 | */
23 | label?: string;
24 | /**
25 | * Whether this swatch color is the currently active color. If true, shows an
26 | * overlaid checkmark as a visual indicator.
27 | */
28 | active?: boolean;
29 | /** If given, sets the padding between the color and the border of the swatch. */
30 | padding?: string | number;
31 | }
32 |
33 | /**
34 | * Renders a button in the given color `value`, useful for showing and allowing
35 | * selecting a color preset.
36 | */
37 | export const ColorSwatchButton = forwardRef<
38 | ElementRef<"button">,
39 | ColorSwatchButtonProps
40 | >(({ value: colorValue, label, padding, active, ...buttonProps }, ref) => {
41 | const { classes, cx, theme } = useStyles();
42 | return (
43 |
68 | );
69 | });
70 |
71 | const useStyles = makeStyles({ name: { ColorSwatchButton } })((theme) => ({
72 | root: {
73 | height: theme.spacing(2.5),
74 | width: theme.spacing(2.5),
75 | minWidth: theme.spacing(2.5),
76 | borderRadius: theme.shape.borderRadius,
77 | borderColor:
78 | theme.palette.mode === "dark"
79 | ? theme.palette.grey[700]
80 | : theme.palette.grey[400],
81 | borderStyle: "solid",
82 | borderWidth: 1,
83 | cursor: "pointer",
84 | // Use background-clip with content-box so that if a `padding` is specified by the
85 | // user, it adds a gap between the color and the border.
86 | padding: 0,
87 | backgroundClip: "content-box",
88 | },
89 |
90 | activeIcon: {
91 | height: "100%",
92 | width: "80%",
93 | verticalAlign: "middle",
94 | },
95 |
96 | colorNotSet: {
97 | // To indicate that a color hasn't been chosen, we'll use a checkerboard pattern
98 | // (https://stackoverflow.com/a/65129916/4543977)
99 | background: `repeating-conic-gradient(
100 | ${theme.palette.grey[400]} 0% 25%, ${theme.palette.common.white} 0% 50%)
101 | 50% / 12px 12px`,
102 | backgroundClip: "content-box",
103 | },
104 | }));
105 |
106 | ColorSwatchButton.displayName = "ColorSwatchButton";
107 |
--------------------------------------------------------------------------------
/src/controls/MenuButtonTextColor.tsx:
--------------------------------------------------------------------------------
1 | ///
2 | import type { Editor } from "@tiptap/core";
3 | import { useRichTextEditorContext } from "../context";
4 | import { FormatColorTextNoBar } from "../icons";
5 | import { getAttributesForEachSelected } from "../utils";
6 | import {
7 | MenuButtonColorPicker,
8 | type MenuButtonColorPickerProps,
9 | } from "./MenuButtonColorPicker";
10 |
11 | export interface MenuButtonTextColorProps
12 | extends Partial {
13 | /**
14 | * Used to indicate the default color of the text in the Tiptap editor, if no
15 | * color has been set with the color extension (or if color has been *unset*
16 | * with the extension). Typically should be set to the same value as the MUI
17 | * `theme.palette.text.primary`.
18 | */
19 | defaultTextColor?: string;
20 | }
21 |
22 | // Tiptap will return any textStyle attributes when calling
23 | // `getAttributes("textStyle")`, but here we care about `color`, so add more
24 | // explicit typing for that. Based on
25 | // https://github.com/ueberdosis/tiptap/blob/6cbc2d423391c950558721510c1b4c8614feb534/packages/extension-color/src/color.ts#L37-L51
26 | interface TextStyleAttrs extends ReturnType {
27 | color?: string | null;
28 | }
29 |
30 | export default function MenuButtonTextColor({
31 | IconComponent = FormatColorTextNoBar,
32 | tooltipLabel = "Text color",
33 | defaultTextColor = "",
34 | ...menuButtonProps
35 | }: MenuButtonTextColorProps) {
36 | const editor = useRichTextEditorContext();
37 |
38 | // Determine if all of the selected content shares the same set color.
39 | const allCurrentTextStyleAttrs: TextStyleAttrs[] = editor
40 | ? getAttributesForEachSelected(editor.state, "textStyle")
41 | : [];
42 | const isTextStyleAppliedToEntireSelection = !!editor?.isActive("textStyle");
43 | const currentColors: string[] = allCurrentTextStyleAttrs.map(
44 | // Treat any null/missing color as the default color
45 | // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
46 | (attrs) => attrs.color || defaultTextColor
47 | );
48 | if (!isTextStyleAppliedToEntireSelection) {
49 | // If there is some selected content that does not have textStyle, we can
50 | // treat it the same as a selected textStyle mark with color set to the
51 | // default
52 | currentColors.push(defaultTextColor);
53 | }
54 | const numUniqueCurrentColors = new Set(currentColors).size;
55 |
56 | let currentColor;
57 | if (numUniqueCurrentColors === 1) {
58 | // There's exactly one color in the selected content, so show that
59 | currentColor = currentColors[0];
60 | } else if (numUniqueCurrentColors > 1) {
61 | // There are multiple colors (either explicitly, or because some of the
62 | // selection has a color set and some does not and is using the default
63 | // color). Similar to other rich text editors like Google Docs, we'll treat
64 | // this as "unset" and not show a color indicator in the button or a
65 | // "current" color when interacting with the color picker.
66 | currentColor = "";
67 | } else {
68 | // Since no color was set anywhere in the selected content, we should show
69 | // the default color
70 | currentColor = defaultTextColor;
71 | }
72 |
73 | return (
74 | {
79 | editor?.chain().focus().setColor(newColor).run();
80 | }}
81 | disabled={!editor?.isEditable || !editor.can().setColor("#000")}
82 | {...menuButtonProps}
83 | labels={{ removeColorButton: "Reset", ...menuButtonProps.labels }}
84 | />
85 | );
86 | }
87 |
--------------------------------------------------------------------------------
/src/controls/MenuButtonTooltip.tsx:
--------------------------------------------------------------------------------
1 | import { Tooltip, Typography, alpha, type TooltipProps } from "@mui/material";
2 | import { makeStyles } from "tss-react/mui";
3 | import { getModShortcutKey } from "../utils/platform";
4 |
5 | export type MenuButtonTooltipProps = {
6 | /**
7 | * Used to display what this button is responsible for. Ex: "Ordered list".
8 | */
9 | label: string;
10 | /**
11 | * An array representing the set of keys that should be pressed to trigger
12 | * this action (for its keyboard shortcut), so that this can be displayed to
13 | * the user. If empty, no keyboard shortcut is displayed.
14 | *
15 | * Use the literal string "mod" to represent Cmd on Mac and Ctrl on Windows
16 | * and Linux.
17 | *
18 | * Example: ["mod", "Shift", "7"] is the array that should be provided as the
19 | * combination for toggling an ordered list.
20 | *
21 | * For the list of pre-configured Tiptap shortcuts, see
22 | * https://tiptap.dev/api/keyboard-shortcuts.
23 | */
24 | shortcutKeys?: string[];
25 | /** Where the tooltip should be placed. By default "top" (above). */
26 | placement?: TooltipProps["placement"];
27 | /**
28 | * Class applied to the element that contains the children content. We add an
29 | * intermediary element since Tooltip requires a non-disabled child element in
30 | * order to render, and we want to allow tooltips to show up even when buttons
31 | * are disabled.
32 | */
33 | contentWrapperClassName?: string;
34 | /** The menu element for which we're showing a tooltip when hovering. */
35 | children: React.ReactNode;
36 | } & Pick;
37 |
38 | const useStyles = makeStyles({ name: { MenuButtonTooltip } })((theme) => ({
39 | titleContainer: {
40 | textAlign: "center",
41 | },
42 |
43 | label: {
44 | fontSize: theme.typography.pxToRem(13),
45 | },
46 |
47 | shortcutKey: {
48 | fontSize: theme.typography.pxToRem(12),
49 | border: `1px solid ${alpha(theme.palette.text.secondary, 0.2)}`,
50 | backgroundColor: alpha(theme.palette.background.paper, 0.3),
51 | height: "19px",
52 | lineHeight: "19px",
53 | padding: "0 4px",
54 | minWidth: 17,
55 | borderRadius: theme.shape.borderRadius,
56 | display: "inline-block",
57 |
58 | "&:not(:first-of-type)": {
59 | marginLeft: 1,
60 | },
61 | },
62 | }));
63 |
64 | export default function MenuButtonTooltip({
65 | label,
66 | shortcutKeys,
67 | placement = "top",
68 | contentWrapperClassName,
69 | children,
70 | ...otherTooltipProps
71 | }: MenuButtonTooltipProps) {
72 | const { classes } = useStyles();
73 | return (
74 | 0) ? (
77 |