Skip to content

Commit

Permalink
[@mantine/tiptap] Remove @tabler/icons dependency to improve bundli…
Browse files Browse the repository at this point in the history 
…ng performance (#5279)
  • Loading branch information
@rtivital
rtivital committed Dec 4, 2023
1 parent 406d6f2 commit 8c24991
Show file tree
Hide file tree
Showing 6 changed files with 458 additions and 65 deletions.
1 change: 0 additions & 1 deletion packages/@mantine/tiptap/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@
"@mantine/hooks": "7.3.0",
"@tabler/icons-react": ">=2.0.0",
"@tiptap/extension-link": "^2.1.12",
"@tiptap/react": "^2.1.12",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
Expand Down
13 changes: 7 additions & 6 deletions packages/@mantine/tiptap/src/RichTextEditorControl/RichTextEditorColorPickerControl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@ import {
ColorPickerProps,
useProps,
ElementProps,
rem,
} from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { IconCircleOff, IconColorPicker, IconX, IconPalette, IconCheck } from '@tabler/icons-react';
import { IconCircleOff, IconColorPicker, IconX, IconPalette, IconCheck } from '../icons/Icons';
import { RichTextEditorControl } from './RichTextEditorControl';
import { useRichTextEditorContext } from '../RichTextEditor.context';

Expand Down Expand Up @@ -108,7 +109,7 @@ export const RichTextEditorColorPickerControl = forwardRef<
title={labels.colorPickerCancel}
aria-label={labels.colorPickerCancel}
>
<IconX stroke={1.5} size="1rem" />
<IconX style={{ width: rem(16), height: rem(16) }} />
</ActionIcon>
)}

Expand All @@ -118,7 +119,7 @@ export const RichTextEditorColorPickerControl = forwardRef<
title={labels.colorPickerClear}
aria-label={labels.colorPickerClear}
>
<IconCircleOff stroke={1.5} size="1rem" />
<IconCircleOff style={{ width: rem(16), height: rem(16) }} />
</ActionIcon>

{state === 'palette' ? (
Expand All @@ -128,7 +129,7 @@ export const RichTextEditorColorPickerControl = forwardRef<
title={labels.colorPickerColorPicker}
aria-label={labels.colorPickerColorPicker}
>
<IconColorPicker stroke={1.5} size="1rem" />
<IconColorPicker style={{ width: rem(16), height: rem(16) }} />
</ActionIcon>
) : (
<ActionIcon
Expand All @@ -137,7 +138,7 @@ export const RichTextEditorColorPickerControl = forwardRef<
aria-label={labels.colorPickerPalette}
title={labels.colorPickerPalette}
>
<IconPalette stroke={1.5} size="1rem" />
<IconPalette style={{ width: rem(16), height: rem(16) }} />
</ActionIcon>
)}

Expand All @@ -148,7 +149,7 @@ export const RichTextEditorColorPickerControl = forwardRef<
title={labels.colorPickerSave}
aria-label={labels.colorPickerSave}
>
<IconCheck stroke={1.5} size="1rem" />
<IconCheck style={{ width: rem(16), height: rem(16) }} />
</ActionIcon>
)}
</Group>
Expand Down
8 changes: 3 additions & 5 deletions packages/@mantine/tiptap/src/RichTextEditorControl/RichTextEditorLinkControl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
useResolvedStylesApi,
} from '@mantine/core';
import { useInputState, useDisclosure, useWindowEvent } from '@mantine/hooks';
import { IconExternalLink, IconLink } from '@tabler/icons-react';
import { IconLink, IconExternalLink } from '../icons/Icons';
import { useRichTextEditorContext } from '../RichTextEditor.context';
import { RichTextEditorControlBaseProps, RichTextEditorControlBase } from './RichTextEditorControl';
import classes from '../RichTextEditor.module.css';
Expand Down Expand Up @@ -48,9 +48,7 @@ export type RichTextEditorLinkControlFactory = Factory<{
compound: true;
}>;

const LinkIcon: RichTextEditorControlBaseProps['icon'] = (props) => (
<IconLink stroke={1.5} {...props} />
);
const LinkIcon: RichTextEditorControlBaseProps['icon'] = (props) => <IconLink {...props} />;

const defaultProps: Partial<RichTextEditorLinkControlProps> = {};

Expand Down Expand Up @@ -168,7 +166,7 @@ export const RichTextEditorLinkControl = factory<RichTextEditorLinkControlFactor
data-active={external || undefined}
{...ctx.getStyles('linkEditorExternalControl', stylesApiProps)}
>
<IconExternalLink style={{ width: rem(14), height: rem(14) }} stroke={1.5} />
<IconExternalLink style={{ width: rem(14), height: rem(14) }} />
</UnstyledButton>
</Tooltip>
}
Expand Down
56 changes: 28 additions & 28 deletions packages/@mantine/tiptap/src/RichTextEditorControl/controls.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import { createControl } from './RichTextEditorControl';
import {
IconBold,
IconItalic,
Expand All @@ -25,179 +26,178 @@ import {
IconHighlight,
IconLineDashed,
IconCircleOff,
} from '@tabler/icons-react';
import { createControl } from './RichTextEditorControl';
} from '../icons/Icons';

export const BoldControl = createControl({
label: 'boldControlLabel',
icon: (props) => <IconBold {...props} stroke={1.5} />,
icon: (props) => <IconBold {...props} />,
isActive: { name: 'bold' },
operation: { name: 'toggleBold' },
});

export const ItalicControl = createControl({
label: 'italicControlLabel',
icon: (props) => <IconItalic {...props} stroke={1.5} />,
icon: (props) => <IconItalic {...props} />,
isActive: { name: 'italic' },
operation: { name: 'toggleItalic' },
});

export const UnderlineControl = createControl({
label: 'underlineControlLabel',
icon: (props) => <IconUnderline {...props} stroke={1.5} />,
icon: (props) => <IconUnderline {...props} />,
isActive: { name: 'underline' },
operation: { name: 'toggleUnderline' },
});

export const StrikeThroughControl = createControl({
label: 'strikeControlLabel',
icon: (props) => <IconStrikethrough {...props} stroke={1.5} />,
icon: (props) => <IconStrikethrough {...props} />,
isActive: { name: 'strike' },
operation: { name: 'toggleStrike' },
});

export const ClearFormattingControl = createControl({
label: 'clearFormattingControlLabel',
icon: (props) => <IconClearFormatting {...props} stroke={1.5} />,
icon: (props) => <IconClearFormatting {...props} />,
operation: { name: 'unsetAllMarks' },
});

export const UnlinkControl = createControl({
label: 'unlinkControlLabel',
icon: (props) => <IconUnlink {...props} stroke={1.5} />,
icon: (props) => <IconUnlink {...props} />,
operation: { name: 'unsetLink' },
});

export const BulletListControl = createControl({
label: 'bulletListControlLabel',
icon: (props) => <IconList {...props} stroke={1.5} />,
icon: (props) => <IconList {...props} />,
isActive: { name: 'bulletList' },
operation: { name: 'toggleBulletList' },
});

export const OrderedListControl = createControl({
label: 'orderedListControlLabel',
icon: (props) => <IconListNumbers {...props} stroke={1.5} />,
icon: (props) => <IconListNumbers {...props} />,
isActive: { name: 'orderedList' },
operation: { name: 'toggleOrderedList' },
});

export const H1Control = createControl({
label: 'h1ControlLabel',
icon: (props) => <IconH1 {...props} stroke={1.5} />,
icon: (props) => <IconH1 {...props} />,
isActive: { name: 'heading', attributes: { level: 1 } },
operation: { name: 'toggleHeading', attributes: { level: 1 } },
});

export const H2Control = createControl({
label: 'h2ControlLabel',
icon: (props) => <IconH2 {...props} stroke={1.5} />,
icon: (props) => <IconH2 {...props} />,
isActive: { name: 'heading', attributes: { level: 2 } },
operation: { name: 'toggleHeading', attributes: { level: 2 } },
});

export const H3Control = createControl({
label: 'h3ControlLabel',
icon: (props) => <IconH3 {...props} stroke={1.5} />,
icon: (props) => <IconH3 {...props} />,
isActive: { name: 'heading', attributes: { level: 3 } },
operation: { name: 'toggleHeading', attributes: { level: 3 } },
});

export const H4Control = createControl({
label: 'h4ControlLabel',
icon: (props) => <IconH4 {...props} stroke={1.5} />,
icon: (props) => <IconH4 {...props} />,
isActive: { name: 'heading', attributes: { level: 4 } },
operation: { name: 'toggleHeading', attributes: { level: 4 } },
});

export const H5Control = createControl({
label: 'h5ControlLabel',
icon: (props) => <IconH5 {...props} stroke={1.5} />,
icon: (props) => <IconH5 {...props} />,
isActive: { name: 'heading', attributes: { level: 5 } },
operation: { name: 'toggleHeading', attributes: { level: 5 } },
});

export const H6Control = createControl({
label: 'h6ControlLabel',
icon: (props) => <IconH6 {...props} stroke={1.5} />,
icon: (props) => <IconH6 {...props} />,
isActive: { name: 'heading', attributes: { level: 6 } },
operation: { name: 'toggleHeading', attributes: { level: 6 } },
});

export const BlockquoteControl = createControl({
label: 'blockquoteControlLabel',
icon: (props) => <IconBlockquote {...props} stroke={1.5} />,
icon: (props) => <IconBlockquote {...props} />,
isActive: { name: 'blockquote' },
operation: { name: 'toggleBlockquote' },
});

export const AlignLeftControl = createControl({
label: 'alignLeftControlLabel',
icon: (props) => <IconAlignLeft {...props} stroke={1.5} />,
icon: (props) => <IconAlignLeft {...props} />,
operation: { name: 'setTextAlign', attributes: 'left' },
});

export const AlignRightControl = createControl({
label: 'alignRightControlLabel',
icon: (props) => <IconAlignRight {...props} stroke={1.5} />,
icon: (props) => <IconAlignRight {...props} />,
operation: { name: 'setTextAlign', attributes: 'right' },
});

export const AlignCenterControl = createControl({
label: 'alignCenterControlLabel',
icon: (props) => <IconAlignCenter {...props} stroke={1.5} />,
icon: (props) => <IconAlignCenter {...props} />,
operation: { name: 'setTextAlign', attributes: 'center' },
});

export const AlignJustifyControl = createControl({
label: 'alignJustifyControlLabel',
icon: (props) => <IconAlignJustified {...props} stroke={1.5} />,
icon: (props) => <IconAlignJustified {...props} />,
operation: { name: 'setTextAlign', attributes: 'justify' },
});

export const SubscriptControl = createControl({
label: 'subscriptControlLabel',
icon: (props) => <IconSubscript {...props} stroke={1.5} />,
icon: (props) => <IconSubscript {...props} />,
isActive: { name: 'subscript' },
operation: { name: 'toggleSubscript' },
});

export const SuperscriptControl = createControl({
label: 'superscriptControlLabel',
icon: (props) => <IconSuperscript {...props} stroke={1.5} />,
icon: (props) => <IconSuperscript {...props} />,
isActive: { name: 'superscript' },
operation: { name: 'toggleSuperscript' },
});

export const CodeControl = createControl({
label: 'codeControlLabel',
icon: (props) => <IconCode {...props} stroke={1.5} />,
icon: (props) => <IconCode {...props} />,
isActive: { name: 'code' },
operation: { name: 'toggleCode' },
});

export const CodeBlockControl = createControl({
label: 'codeBlockControlLabel',
icon: (props) => <IconCode {...props} stroke={1.5} />,
icon: (props) => <IconCode {...props} />,
isActive: { name: 'codeBlock' },
operation: { name: 'toggleCodeBlock' },
});

export const HighlightControl = createControl({
label: 'highlightControlLabel',
icon: (props) => <IconHighlight {...props} stroke={1.5} />,
icon: (props) => <IconHighlight {...props} />,
isActive: { name: 'highlight' },
operation: { name: 'toggleHighlight' },
});

export const HrControl = createControl({
label: 'hrControlLabel',
icon: (props) => <IconLineDashed {...props} stroke={1.5} />,
icon: (props) => <IconLineDashed {...props} />,
operation: { name: 'setHorizontalRule' },
});

export const UnsetColorControl = createControl({
label: 'unsetColorControlLabel',
icon: (props) => <IconCircleOff {...props} stroke={1.5} />,
icon: (props) => <IconCircleOff {...props} />,
operation: { name: 'unsetColor' },
});

0 comments on commit 8c24991

Please sign in to comment.