@mantine/tiptap 9.0.0-alpha.7 → 9.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/cjs/RichTextEditor.cjs.map +1 -1
- package/cjs/RichTextEditorControl/RichTextEditorColorControl.cjs +1 -1
- package/cjs/RichTextEditorControl/RichTextEditorColorControl.cjs.map +1 -1
- package/cjs/RichTextEditorControl/RichTextEditorColorPickerControl.cjs +2 -2
- package/cjs/RichTextEditorControl/RichTextEditorColorPickerControl.cjs.map +1 -1
- package/esm/RichTextEditor.mjs.map +1 -1
- package/esm/RichTextEditorControl/RichTextEditorColorControl.mjs +1 -1
- package/esm/RichTextEditorControl/RichTextEditorColorControl.mjs.map +1 -1
- package/esm/RichTextEditorControl/RichTextEditorColorPickerControl.mjs +2 -2
- package/esm/RichTextEditorControl/RichTextEditorColorPickerControl.mjs.map +1 -1
- package/lib/RichTextEditor.d.ts +27 -5
- package/lib/index.d.mts +0 -20
- package/lib/index.d.ts +0 -20
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Mantine tiptap
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@mantine/tiptap)
|
|
4
4
|
|
|
5
5
|
Rich text editor based on [tiptap](https://tiptap.dev/)
|
|
6
6
|
|
|
@@ -10,10 +10,10 @@ Rich text editor based on [tiptap](https://tiptap.dev/)
|
|
|
10
10
|
|
|
11
11
|
```bash
|
|
12
12
|
# With yarn
|
|
13
|
-
yarn add @mantine/core @mantine/hooks @tiptap/react @tiptap/extension-link
|
|
13
|
+
yarn add @mantine/tiptap @mantine/core @mantine/hooks @tiptap/react @tiptap/extension-link
|
|
14
14
|
|
|
15
15
|
# With npm
|
|
16
|
-
npm install @mantine/core @mantine/hooks @tiptap/react @tiptap/extension-link
|
|
16
|
+
npm install @mantine/tiptap @mantine/core @mantine/hooks @tiptap/react @tiptap/extension-link
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
## License
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditor.cjs","names":["RichTextEditorProvider","DEFAULT_LABELS","Box","classes","RichTextEditorContent","RichTextEditorControl","RichTextEditorToolbar","RichTextEditorControlsGroup","RichTextEditorSourceCodeControl"],"sources":["../src/RichTextEditor.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { Editor } from '@tiptap/react';\nimport {\n Box,\n BoxProps,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { DEFAULT_LABELS, RichTextEditorLabels } from './labels';\nimport { RichTextEditorProvider } from './RichTextEditor.context';\nimport { RichTextEditorContent } from './RichTextEditorContent/RichTextEditorContent';\nimport * as controls from './RichTextEditorControl';\nimport { RichTextEditorControl } from './RichTextEditorControl/RichTextEditorControl';\nimport { RichTextEditorSourceCodeControl } from './RichTextEditorControl/RichTextEditorSourceCodeControl';\nimport { RichTextEditorControlsGroup } from './RichTextEditorControlsGroup/RichTextEditorControlsGroup';\nimport { RichTextEditorToolbar } from './RichTextEditorToolbar/RichTextEditorToolbar';\nimport classes from './RichTextEditor.module.css';\n\nexport type RichTextEditorVariant = 'default' | 'subtle';\n\nexport type RichTextEditorStylesNames =\n | 'linkEditorSave'\n | 'linkEditorDropdown'\n | 'root'\n | 'content'\n | 'Typography'\n | 'control'\n | 'controlIcon'\n | 'controlsGroup'\n | 'toolbar'\n | 'linkEditor'\n | 'linkEditorInput'\n | 'linkEditorExternalControl';\n\nexport interface RichTextEditorProps\n extends BoxProps, StylesApiProps<RichTextEditorFactory>, ElementProps<'div'> {\n /** Tiptap editor instance */\n editor: Editor | null;\n\n /** Determines whether code highlight styles should be added @default true */\n withCodeHighlightStyles?: boolean;\n\n /** Determines whether typography styles should be added @default true */\n withTypographyStyles?: boolean;\n\n /** Called if `RichTextEditor.SourceCode` clicked. */\n onSourceCodeTextSwitch?: (isSourceCodeModeActive: boolean) => void;\n\n /** Labels that are used in controls */\n labels?: Partial<RichTextEditorLabels>;\n\n /** Child editor components */\n children: React.ReactNode;\n}\n\nexport type RichTextEditorFactory = Factory<{\n props: RichTextEditorProps;\n ref: HTMLDivElement;\n stylesNames: RichTextEditorStylesNames;\n variant: RichTextEditorVariant;\n staticComponents: {\n Content: typeof RichTextEditorContent;\n Control: typeof RichTextEditorControl;\n Toolbar: typeof RichTextEditorToolbar;\n ControlsGroup: typeof RichTextEditorControlsGroup;\n Bold: typeof controls.BoldControl;\n Italic: typeof controls.ItalicControl;\n Strikethrough: typeof controls.StrikeThroughControl;\n Underline: typeof controls.UnderlineControl;\n ClearFormatting: typeof controls.ClearFormattingControl;\n H1: typeof controls.H1Control;\n H2: typeof controls.H2Control;\n H3: typeof controls.H3Control;\n H4: typeof controls.H4Control;\n H5: typeof controls.H5Control;\n H6: typeof controls.H6Control;\n BulletList: typeof controls.BulletListControl;\n OrderedList: typeof controls.OrderedListControl;\n Link: typeof controls.RichTextEditorLinkControl;\n Unlink: typeof controls.UnlinkControl;\n Blockquote: typeof controls.BlockquoteControl;\n AlignLeft: typeof controls.AlignLeftControl;\n AlignRight: typeof controls.AlignRightControl;\n AlignCenter: typeof controls.AlignCenterControl;\n AlignJustify: typeof controls.AlignJustifyControl;\n Superscript: typeof controls.SuperscriptControl;\n Subscript: typeof controls.SubscriptControl;\n Code: typeof controls.CodeControl;\n CodeBlock: typeof controls.CodeBlockControl;\n ColorPicker: typeof controls.RichTextEditorColorPickerControl;\n Color: typeof controls.RichTextEditorColorControl;\n Highlight: typeof controls.HighlightControl;\n Hr: typeof controls.HrControl;\n UnsetColor: typeof controls.UnsetColorControl;\n Undo: typeof controls.UndoControl;\n Redo: typeof controls.RedoControl;\n TaskList: typeof controls.TaskListControl;\n TaskListSink: typeof controls.TaskListSinkControl;\n TaskListLift: typeof controls.TaskListLiftControl;\n SourceCode: typeof RichTextEditorSourceCodeControl;\n };\n}>;\n\nconst defaultProps = {\n withCodeHighlightStyles: true,\n withTypographyStyles: true,\n variant: 'default',\n} satisfies Partial<RichTextEditorProps>;\n\nexport const RichTextEditor = factory<RichTextEditorFactory>((_props) => {\n const props = useProps('RichTextEditor', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n editor,\n withCodeHighlightStyles,\n withTypographyStyles,\n onSourceCodeTextSwitch,\n labels,\n children,\n variant,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<RichTextEditorFactory>({\n name: 'RichTextEditor',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const mergedLabels = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);\n\n return (\n <RichTextEditorProvider\n value={{\n editor,\n getStyles,\n labels: mergedLabels,\n withCodeHighlightStyles,\n withTypographyStyles,\n onSourceCodeTextSwitch,\n unstyled,\n variant,\n }}\n >\n <Box {...getStyles('root')} {...others}>\n {children}\n </Box>\n </RichTextEditorProvider>\n );\n});\n\nRichTextEditor.classes = classes;\nRichTextEditor.displayName = '@mantine/tiptap/RichTextEditor';\n\n// Generic components\nRichTextEditor.Content = RichTextEditorContent;\nRichTextEditor.Control = RichTextEditorControl;\nRichTextEditor.Toolbar = RichTextEditorToolbar;\nRichTextEditor.ControlsGroup = RichTextEditorControlsGroup;\n\n// Controls components\nRichTextEditor.Bold = controls.BoldControl;\nRichTextEditor.Italic = controls.ItalicControl;\nRichTextEditor.Strikethrough = controls.StrikeThroughControl;\nRichTextEditor.Underline = controls.UnderlineControl;\nRichTextEditor.ClearFormatting = controls.ClearFormattingControl;\nRichTextEditor.H1 = controls.H1Control;\nRichTextEditor.H2 = controls.H2Control;\nRichTextEditor.H3 = controls.H3Control;\nRichTextEditor.H4 = controls.H4Control;\nRichTextEditor.H5 = controls.H5Control;\nRichTextEditor.H6 = controls.H6Control;\nRichTextEditor.BulletList = controls.BulletListControl;\nRichTextEditor.OrderedList = controls.OrderedListControl;\nRichTextEditor.Link = controls.RichTextEditorLinkControl;\nRichTextEditor.Unlink = controls.UnlinkControl;\nRichTextEditor.Blockquote = controls.BlockquoteControl;\nRichTextEditor.AlignLeft = controls.AlignLeftControl;\nRichTextEditor.AlignRight = controls.AlignRightControl;\nRichTextEditor.AlignCenter = controls.AlignCenterControl;\nRichTextEditor.AlignJustify = controls.AlignJustifyControl;\nRichTextEditor.Superscript = controls.SuperscriptControl;\nRichTextEditor.Subscript = controls.SubscriptControl;\nRichTextEditor.Code = controls.CodeControl;\nRichTextEditor.CodeBlock = controls.CodeBlockControl;\nRichTextEditor.ColorPicker = controls.RichTextEditorColorPickerControl;\nRichTextEditor.Color = controls.RichTextEditorColorControl;\nRichTextEditor.Highlight = controls.HighlightControl;\nRichTextEditor.Hr = controls.HrControl;\nRichTextEditor.UnsetColor = controls.UnsetColorControl;\nRichTextEditor.Undo = controls.UndoControl;\nRichTextEditor.Redo = controls.RedoControl;\nRichTextEditor.TaskList = controls.TaskListControl;\nRichTextEditor.TaskListSink = controls.TaskListSinkControl;\nRichTextEditor.TaskListLift = controls.TaskListLiftControl;\nRichTextEditor.SourceCode = RichTextEditorSourceCodeControl;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2GA,MAAM,eAAe;CACnB,yBAAyB;CACzB,sBAAsB;CACtB,SAAS;CACV;AAED,MAAa,kBAAA,GAAA,cAAA,UAAiD,WAAW;CACvE,MAAM,SAAA,GAAA,cAAA,UAAiB,kBAAkB,cAAc,OAAO;CAC9D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,yBACA,sBACA,wBACA,QACA,UACA,SACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAA,GAAA,cAAA,WAA6C;EACjD,MAAM;EACN,SAAA,8BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAIF,QACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,wBAAD;EACE,OAAO;GACL;GACA;GACA,SAAA,GAAA,MAAA,gBAP8B;IAAE,GAAGC,eAAAA;IAAgB,GAAG;IAAQ,GAAG,CAAC,OAAO,CAAC;GAQ1E;GACA;GACA;GACA;GACA;GACD;YAED,iBAAA,GAAA,kBAAA,KAACC,cAAAA,KAAD;GAAK,GAAI,UAAU,OAAO;GAAE,GAAI;GAC7B;GACG,CAAA;EACiB,CAAA;EAE3B;AAEF,eAAe,UAAUC,8BAAAA;AACzB,eAAe,cAAc;AAG7B,eAAe,UAAUC,8BAAAA;AACzB,eAAe,UAAUC,8BAAAA;AACzB,eAAe,UAAUC,8BAAAA;AACzB,eAAe,gBAAgBC,oCAAAA;AAG/B,eAAe,OAAA,iBAAA;AACf,eAAe,SAAA,iBAAA;AACf,eAAe,gBAAA,iBAAA;AACf,eAAe,YAAA,iBAAA;AACf,eAAe,kBAAA,iBAAA;AACf,eAAe,KAAA,iBAAA;AACf,eAAe,KAAA,iBAAA;AACf,eAAe,KAAA,iBAAA;AACf,eAAe,KAAA,iBAAA;AACf,eAAe,KAAA,iBAAA;AACf,eAAe,KAAA,iBAAA;AACf,eAAe,aAAA,iBAAA;AACf,eAAe,cAAA,iBAAA;AACf,eAAe,OAAA,kCAAA;AACf,eAAe,SAAA,iBAAA;AACf,eAAe,aAAA,iBAAA;AACf,eAAe,YAAA,iBAAA;AACf,eAAe,aAAA,iBAAA;AACf,eAAe,cAAA,iBAAA;AACf,eAAe,eAAA,iBAAA;AACf,eAAe,cAAA,iBAAA;AACf,eAAe,YAAA,iBAAA;AACf,eAAe,OAAA,iBAAA;AACf,eAAe,YAAA,iBAAA;AACf,eAAe,cAAA,yCAAA;AACf,eAAe,QAAA,mCAAA;AACf,eAAe,YAAA,iBAAA;AACf,eAAe,KAAA,iBAAA;AACf,eAAe,aAAA,iBAAA;AACf,eAAe,OAAA,iBAAA;AACf,eAAe,OAAA,iBAAA;AACf,eAAe,WAAA,iBAAA;AACf,eAAe,eAAA,iBAAA;AACf,eAAe,eAAA,iBAAA;AACf,eAAe,aAAaC,wCAAAA"}
|
|
1
|
+
{"version":3,"file":"RichTextEditor.cjs","names":["RichTextEditorProvider","DEFAULT_LABELS","Box","classes","RichTextEditorContent","RichTextEditorControl","RichTextEditorToolbar","RichTextEditorControlsGroup","RichTextEditorSourceCodeControl"],"sources":["../src/RichTextEditor.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { Editor } from '@tiptap/react';\nimport {\n Box,\n BoxProps,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { DEFAULT_LABELS, RichTextEditorLabels } from './labels';\nimport { RichTextEditorProvider } from './RichTextEditor.context';\nimport {\n RichTextEditorContent,\n type RichTextEditorContentProps,\n} from './RichTextEditorContent/RichTextEditorContent';\nimport * as controls from './RichTextEditorControl';\nimport {\n RichTextEditorControl,\n type RichTextEditorControlProps,\n} from './RichTextEditorControl/RichTextEditorControl';\nimport type { RichTextEditorColorControlProps } from './RichTextEditorControl/RichTextEditorColorControl';\nimport type { RichTextEditorLinkControlProps } from './RichTextEditorControl/RichTextEditorLinkControl';\nimport {\n RichTextEditorSourceCodeControl,\n type RichTextEditorSourceCodeControlProps,\n} from './RichTextEditorControl/RichTextEditorSourceCodeControl';\nimport {\n RichTextEditorControlsGroup,\n type RichTextEditorControlsGroupProps,\n} from './RichTextEditorControlsGroup/RichTextEditorControlsGroup';\nimport {\n RichTextEditorToolbar,\n type RichTextEditorToolbarProps,\n} from './RichTextEditorToolbar/RichTextEditorToolbar';\nimport classes from './RichTextEditor.module.css';\n\nexport type RichTextEditorVariant = 'default' | 'subtle';\n\nexport type RichTextEditorStylesNames =\n | 'linkEditorSave'\n | 'linkEditorDropdown'\n | 'root'\n | 'content'\n | 'Typography'\n | 'control'\n | 'controlIcon'\n | 'controlsGroup'\n | 'toolbar'\n | 'linkEditor'\n | 'linkEditorInput'\n | 'linkEditorExternalControl';\n\nexport interface RichTextEditorProps\n extends BoxProps, StylesApiProps<RichTextEditorFactory>, ElementProps<'div'> {\n /** Tiptap editor instance */\n editor: Editor | null;\n\n /** Determines whether code highlight styles should be added @default true */\n withCodeHighlightStyles?: boolean;\n\n /** Determines whether typography styles should be added @default true */\n withTypographyStyles?: boolean;\n\n /** Called if `RichTextEditor.SourceCode` clicked. */\n onSourceCodeTextSwitch?: (isSourceCodeModeActive: boolean) => void;\n\n /** Labels that are used in controls */\n labels?: Partial<RichTextEditorLabels>;\n\n /** Child editor components */\n children: React.ReactNode;\n}\n\nexport type RichTextEditorFactory = Factory<{\n props: RichTextEditorProps;\n ref: HTMLDivElement;\n stylesNames: RichTextEditorStylesNames;\n variant: RichTextEditorVariant;\n staticComponents: {\n Content: typeof RichTextEditorContent;\n Control: typeof RichTextEditorControl;\n Toolbar: typeof RichTextEditorToolbar;\n ControlsGroup: typeof RichTextEditorControlsGroup;\n Bold: typeof controls.BoldControl;\n Italic: typeof controls.ItalicControl;\n Strikethrough: typeof controls.StrikeThroughControl;\n Underline: typeof controls.UnderlineControl;\n ClearFormatting: typeof controls.ClearFormattingControl;\n H1: typeof controls.H1Control;\n H2: typeof controls.H2Control;\n H3: typeof controls.H3Control;\n H4: typeof controls.H4Control;\n H5: typeof controls.H5Control;\n H6: typeof controls.H6Control;\n BulletList: typeof controls.BulletListControl;\n OrderedList: typeof controls.OrderedListControl;\n Link: typeof controls.RichTextEditorLinkControl;\n Unlink: typeof controls.UnlinkControl;\n Blockquote: typeof controls.BlockquoteControl;\n AlignLeft: typeof controls.AlignLeftControl;\n AlignRight: typeof controls.AlignRightControl;\n AlignCenter: typeof controls.AlignCenterControl;\n AlignJustify: typeof controls.AlignJustifyControl;\n Superscript: typeof controls.SuperscriptControl;\n Subscript: typeof controls.SubscriptControl;\n Code: typeof controls.CodeControl;\n CodeBlock: typeof controls.CodeBlockControl;\n ColorPicker: typeof controls.RichTextEditorColorPickerControl;\n Color: typeof controls.RichTextEditorColorControl;\n Highlight: typeof controls.HighlightControl;\n Hr: typeof controls.HrControl;\n UnsetColor: typeof controls.UnsetColorControl;\n Undo: typeof controls.UndoControl;\n Redo: typeof controls.RedoControl;\n TaskList: typeof controls.TaskListControl;\n TaskListSink: typeof controls.TaskListSinkControl;\n TaskListLift: typeof controls.TaskListLiftControl;\n SourceCode: typeof RichTextEditorSourceCodeControl;\n };\n}>;\n\nconst defaultProps = {\n withCodeHighlightStyles: true,\n withTypographyStyles: true,\n variant: 'default',\n} satisfies Partial<RichTextEditorProps>;\n\nexport const RichTextEditor = factory<RichTextEditorFactory>((_props) => {\n const props = useProps('RichTextEditor', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n editor,\n withCodeHighlightStyles,\n withTypographyStyles,\n onSourceCodeTextSwitch,\n labels,\n children,\n variant,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<RichTextEditorFactory>({\n name: 'RichTextEditor',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const mergedLabels = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);\n\n return (\n <RichTextEditorProvider\n value={{\n editor,\n getStyles,\n labels: mergedLabels,\n withCodeHighlightStyles,\n withTypographyStyles,\n onSourceCodeTextSwitch,\n unstyled,\n variant,\n }}\n >\n <Box {...getStyles('root')} {...others}>\n {children}\n </Box>\n </RichTextEditorProvider>\n );\n});\n\nRichTextEditor.classes = classes;\nRichTextEditor.displayName = '@mantine/tiptap/RichTextEditor';\n\n// Generic components\nRichTextEditor.Content = RichTextEditorContent;\nRichTextEditor.Control = RichTextEditorControl;\nRichTextEditor.Toolbar = RichTextEditorToolbar;\nRichTextEditor.ControlsGroup = RichTextEditorControlsGroup;\n\n// Controls components\nRichTextEditor.Bold = controls.BoldControl;\nRichTextEditor.Italic = controls.ItalicControl;\nRichTextEditor.Strikethrough = controls.StrikeThroughControl;\nRichTextEditor.Underline = controls.UnderlineControl;\nRichTextEditor.ClearFormatting = controls.ClearFormattingControl;\nRichTextEditor.H1 = controls.H1Control;\nRichTextEditor.H2 = controls.H2Control;\nRichTextEditor.H3 = controls.H3Control;\nRichTextEditor.H4 = controls.H4Control;\nRichTextEditor.H5 = controls.H5Control;\nRichTextEditor.H6 = controls.H6Control;\nRichTextEditor.BulletList = controls.BulletListControl;\nRichTextEditor.OrderedList = controls.OrderedListControl;\nRichTextEditor.Link = controls.RichTextEditorLinkControl;\nRichTextEditor.Unlink = controls.UnlinkControl;\nRichTextEditor.Blockquote = controls.BlockquoteControl;\nRichTextEditor.AlignLeft = controls.AlignLeftControl;\nRichTextEditor.AlignRight = controls.AlignRightControl;\nRichTextEditor.AlignCenter = controls.AlignCenterControl;\nRichTextEditor.AlignJustify = controls.AlignJustifyControl;\nRichTextEditor.Superscript = controls.SuperscriptControl;\nRichTextEditor.Subscript = controls.SubscriptControl;\nRichTextEditor.Code = controls.CodeControl;\nRichTextEditor.CodeBlock = controls.CodeBlockControl;\nRichTextEditor.ColorPicker = controls.RichTextEditorColorPickerControl;\nRichTextEditor.Color = controls.RichTextEditorColorControl;\nRichTextEditor.Highlight = controls.HighlightControl;\nRichTextEditor.Hr = controls.HrControl;\nRichTextEditor.UnsetColor = controls.UnsetColorControl;\nRichTextEditor.Undo = controls.UndoControl;\nRichTextEditor.Redo = controls.RedoControl;\nRichTextEditor.TaskList = controls.TaskListControl;\nRichTextEditor.TaskListSink = controls.TaskListSinkControl;\nRichTextEditor.TaskListLift = controls.TaskListLiftControl;\nRichTextEditor.SourceCode = RichTextEditorSourceCodeControl;\n\nexport namespace RichTextEditor {\n export type Props = RichTextEditorProps;\n export type StylesNames = RichTextEditorStylesNames;\n export type Factory = RichTextEditorFactory;\n\n export namespace Toolbar {\n export type Props = RichTextEditorToolbarProps;\n }\n\n export namespace Control {\n export type Props = RichTextEditorControlProps;\n export type ColorProps = RichTextEditorColorControlProps;\n export type LinkProps = RichTextEditorLinkControlProps;\n export type SourceCodeProps = RichTextEditorSourceCodeControlProps;\n }\n\n export namespace Content {\n export type Props = RichTextEditorContentProps;\n }\n\n export namespace ControlsGroup {\n export type Props = RichTextEditorControlsGroupProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA4HA,MAAM,eAAe;CACnB,yBAAyB;CACzB,sBAAsB;CACtB,SAAS;CACV;AAED,MAAa,kBAAA,GAAA,cAAA,UAAiD,WAAW;CACvE,MAAM,SAAA,GAAA,cAAA,UAAiB,kBAAkB,cAAc,OAAO;CAC9D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,yBACA,sBACA,wBACA,QACA,UACA,SACA,YACA,GAAG,WACD;CAEJ,MAAM,aAAA,GAAA,cAAA,WAA6C;EACjD,MAAM;EACN,SAAA,8BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAIF,QACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,wBAAD;EACE,OAAO;GACL;GACA;GACA,SAAA,GAAA,MAAA,gBAP8B;IAAE,GAAGC,eAAAA;IAAgB,GAAG;IAAQ,GAAG,CAAC,OAAO,CAAC;GAQ1E;GACA;GACA;GACA;GACA;GACD;YAED,iBAAA,GAAA,kBAAA,KAACC,cAAAA,KAAD;GAAK,GAAI,UAAU,OAAO;GAAE,GAAI;GAC7B;GACG,CAAA;EACiB,CAAA;EAE3B;AAEF,eAAe,UAAUC,8BAAAA;AACzB,eAAe,cAAc;AAG7B,eAAe,UAAUC,8BAAAA;AACzB,eAAe,UAAUC,8BAAAA;AACzB,eAAe,UAAUC,8BAAAA;AACzB,eAAe,gBAAgBC,oCAAAA;AAG/B,eAAe,OAAA,iBAAA;AACf,eAAe,SAAA,iBAAA;AACf,eAAe,gBAAA,iBAAA;AACf,eAAe,YAAA,iBAAA;AACf,eAAe,kBAAA,iBAAA;AACf,eAAe,KAAA,iBAAA;AACf,eAAe,KAAA,iBAAA;AACf,eAAe,KAAA,iBAAA;AACf,eAAe,KAAA,iBAAA;AACf,eAAe,KAAA,iBAAA;AACf,eAAe,KAAA,iBAAA;AACf,eAAe,aAAA,iBAAA;AACf,eAAe,cAAA,iBAAA;AACf,eAAe,OAAA,kCAAA;AACf,eAAe,SAAA,iBAAA;AACf,eAAe,aAAA,iBAAA;AACf,eAAe,YAAA,iBAAA;AACf,eAAe,aAAA,iBAAA;AACf,eAAe,cAAA,iBAAA;AACf,eAAe,eAAA,iBAAA;AACf,eAAe,cAAA,iBAAA;AACf,eAAe,YAAA,iBAAA;AACf,eAAe,OAAA,iBAAA;AACf,eAAe,YAAA,iBAAA;AACf,eAAe,cAAA,yCAAA;AACf,eAAe,QAAA,mCAAA;AACf,eAAe,YAAA,iBAAA;AACf,eAAe,KAAA,iBAAA;AACf,eAAe,aAAA,iBAAA;AACf,eAAe,OAAA,iBAAA;AACf,eAAe,OAAA,iBAAA;AACf,eAAe,WAAA,iBAAA;AACf,eAAe,eAAA,iBAAA;AACf,eAAe,eAAA,iBAAA;AACf,eAAe,aAAaC,wCAAAA"}
|
|
@@ -16,7 +16,7 @@ function RichTextEditorColorControl(props) {
|
|
|
16
16
|
active: currentColor === color,
|
|
17
17
|
"aria-label": label,
|
|
18
18
|
title: label,
|
|
19
|
-
onClick: () => (editor?.chain())
|
|
19
|
+
onClick: () => (editor?.chain())?.focus().setColor(color).run(),
|
|
20
20
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ColorSwatch, {
|
|
21
21
|
color,
|
|
22
22
|
size: 14
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditorColorControl.cjs","names":["useRichTextEditorContext","RichTextEditorControl","ColorSwatch"],"sources":["../../src/RichTextEditorControl/RichTextEditorColorControl.tsx"],"sourcesContent":["import { BoxProps, ColorSwatch, ElementProps, useProps } from '@mantine/core';\nimport { useRichTextEditorContext } from '../RichTextEditor.context';\nimport { RichTextEditorControl } from './RichTextEditorControl';\n\nexport interface RichTextEditorColorControlProps extends BoxProps, ElementProps<'button'> {\n /** Color that will be set as text color, for example #ef457e */\n color: string;\n}\n\nexport function RichTextEditorColorControl(props: RichTextEditorColorControlProps) {\n const { color, ...others } = useProps('RichTextEditorColorControl', null, props);\n const { editor, labels, variant } = useRichTextEditorContext();\n const currentColor = editor?.getAttributes('textStyle').color || null;\n const label = labels.colorControlLabel(color);\n\n return (\n <RichTextEditorControl\n {...others}\n variant={variant}\n active={currentColor === color}\n aria-label={label}\n title={label}\n onClick={() => (editor?.chain() as any)
|
|
1
|
+
{"version":3,"file":"RichTextEditorColorControl.cjs","names":["useRichTextEditorContext","RichTextEditorControl","ColorSwatch"],"sources":["../../src/RichTextEditorControl/RichTextEditorColorControl.tsx"],"sourcesContent":["import { BoxProps, ColorSwatch, ElementProps, useProps } from '@mantine/core';\nimport { useRichTextEditorContext } from '../RichTextEditor.context';\nimport { RichTextEditorControl } from './RichTextEditorControl';\n\nexport interface RichTextEditorColorControlProps extends BoxProps, ElementProps<'button'> {\n /** Color that will be set as text color, for example #ef457e */\n color: string;\n}\n\nexport function RichTextEditorColorControl(props: RichTextEditorColorControlProps) {\n const { color, ...others } = useProps('RichTextEditorColorControl', null, props);\n const { editor, labels, variant } = useRichTextEditorContext();\n const currentColor = editor?.getAttributes('textStyle').color || null;\n const label = labels.colorControlLabel(color);\n\n return (\n <RichTextEditorControl\n {...others}\n variant={variant}\n active={currentColor === color}\n aria-label={label}\n title={label}\n onClick={() => (editor?.chain() as any)?.focus().setColor(color).run()}\n >\n <ColorSwatch color={color} size={14} />\n </RichTextEditorControl>\n );\n}\n\nRichTextEditorColorControl.displayName = '@mantine/tiptap/RichTextEditorColorControl';\n"],"mappings":";;;;;;;AASA,SAAgB,2BAA2B,OAAwC;CACjF,MAAM,EAAE,OAAO,GAAG,YAAA,GAAA,cAAA,UAAoB,8BAA8B,MAAM,MAAM;CAChF,MAAM,EAAE,QAAQ,QAAQ,YAAYA,+BAAAA,0BAA0B;CAC9D,MAAM,eAAe,QAAQ,cAAc,YAAY,CAAC,SAAS;CACjE,MAAM,QAAQ,OAAO,kBAAkB,MAAM;AAE7C,QACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD;EACE,GAAI;EACK;EACT,QAAQ,iBAAiB;EACzB,cAAY;EACZ,OAAO;EACP,gBAAgB,QAAQ,OAAO,GAAU,OAAO,CAAC,SAAS,MAAM,CAAC,KAAK;YAEtE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,aAAD;GAAoB;GAAO,MAAM;GAAM,CAAA;EACjB,CAAA;;AAI5B,2BAA2B,cAAc"}
|
|
@@ -15,11 +15,11 @@ function RichTextEditorColorPickerControl(props) {
|
|
|
15
15
|
const [state, setState] = (0, react.useState)("palette");
|
|
16
16
|
const currentColor = editor?.getAttributes("textStyle").color || "var(--mantine-color-text)";
|
|
17
17
|
const handleChange = (value, shouldClose = true) => {
|
|
18
|
-
(editor?.chain())
|
|
18
|
+
(editor?.chain())?.focus().setColor(value).run();
|
|
19
19
|
shouldClose && close();
|
|
20
20
|
};
|
|
21
21
|
const handleClear = () => {
|
|
22
|
-
(editor?.chain())
|
|
22
|
+
(editor?.chain())?.focus().unsetColor().run();
|
|
23
23
|
close();
|
|
24
24
|
};
|
|
25
25
|
const controls = colors.map((color, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_mantine_core.ColorSwatch, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditorColorPickerControl.cjs","names":["useRichTextEditorContext","ColorSwatch","Popover","RichTextEditorControl","SimpleGrid","ColorPicker","Tooltip","Group","ActionIcon","IconX","IconCircleOff","IconColorPicker","IconPalette","IconCheck"],"sources":["../../src/RichTextEditorControl/RichTextEditorColorPickerControl.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n ActionIcon,\n BoxProps,\n ColorPicker,\n ColorPickerProps,\n ColorSwatch,\n ElementProps,\n Group,\n Popover,\n PopoverProps,\n rem,\n SimpleGrid,\n Tooltip,\n useProps,\n} from '@mantine/core';\nimport { useDisclosure } from '@mantine/hooks';\nimport { IconCheck, IconCircleOff, IconColorPicker, IconPalette, IconX } from '../icons/Icons';\nimport { useRichTextEditorContext } from '../RichTextEditor.context';\nimport { RichTextEditorControl } from './RichTextEditorControl';\n\nexport interface RichTextEditorColorPickerControlProps extends BoxProps, ElementProps<'button'> {\n /** Props added to Popover component */\n popoverProps?: Partial<PopoverProps>;\n\n /** Props added to ColorPicker component */\n colorPickerProps?: Partial<ColorPickerProps>;\n\n /** List of colors that the user can choose from */\n colors: string[];\n}\n\nexport function RichTextEditorColorPickerControl(props: RichTextEditorColorPickerControlProps) {\n const { popoverProps, colors, colorPickerProps, ...others } = useProps(\n 'RichTextEditorColorPickerControl',\n null,\n props\n );\n\n const { editor, labels, getStyles, variant } = useRichTextEditorContext();\n const [opened, { toggle, close }] = useDisclosure(false);\n const [state, setState] = useState<'palette' | 'colorPicker'>('palette');\n const currentColor = editor?.getAttributes('textStyle').color || 'var(--mantine-color-text)';\n\n const handleChange = (value: string, shouldClose = true) => {\n (editor?.chain() as any)
|
|
1
|
+
{"version":3,"file":"RichTextEditorColorPickerControl.cjs","names":["useRichTextEditorContext","ColorSwatch","Popover","RichTextEditorControl","SimpleGrid","ColorPicker","Tooltip","Group","ActionIcon","IconX","IconCircleOff","IconColorPicker","IconPalette","IconCheck"],"sources":["../../src/RichTextEditorControl/RichTextEditorColorPickerControl.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n ActionIcon,\n BoxProps,\n ColorPicker,\n ColorPickerProps,\n ColorSwatch,\n ElementProps,\n Group,\n Popover,\n PopoverProps,\n rem,\n SimpleGrid,\n Tooltip,\n useProps,\n} from '@mantine/core';\nimport { useDisclosure } from '@mantine/hooks';\nimport { IconCheck, IconCircleOff, IconColorPicker, IconPalette, IconX } from '../icons/Icons';\nimport { useRichTextEditorContext } from '../RichTextEditor.context';\nimport { RichTextEditorControl } from './RichTextEditorControl';\n\nexport interface RichTextEditorColorPickerControlProps extends BoxProps, ElementProps<'button'> {\n /** Props added to Popover component */\n popoverProps?: Partial<PopoverProps>;\n\n /** Props added to ColorPicker component */\n colorPickerProps?: Partial<ColorPickerProps>;\n\n /** List of colors that the user can choose from */\n colors: string[];\n}\n\nexport function RichTextEditorColorPickerControl(props: RichTextEditorColorPickerControlProps) {\n const { popoverProps, colors, colorPickerProps, ...others } = useProps(\n 'RichTextEditorColorPickerControl',\n null,\n props\n );\n\n const { editor, labels, getStyles, variant } = useRichTextEditorContext();\n const [opened, { toggle, close }] = useDisclosure(false);\n const [state, setState] = useState<'palette' | 'colorPicker'>('palette');\n const currentColor = editor?.getAttributes('textStyle').color || 'var(--mantine-color-text)';\n\n const handleChange = (value: string, shouldClose = true) => {\n (editor?.chain() as any)?.focus().setColor(value).run();\n shouldClose && close();\n };\n\n const handleClear = () => {\n (editor?.chain() as any)?.focus().unsetColor().run();\n close();\n };\n\n const controls = colors.map((color, index) => (\n <ColorSwatch\n key={index}\n component=\"button\"\n color={color}\n onClick={() => handleChange(color)}\n size={26}\n radius=\"xs\"\n style={{ cursor: 'pointer' }}\n title={labels.colorPickerColorLabel(color)}\n aria-label={labels.colorPickerColorLabel(color)}\n />\n ));\n\n return (\n <Popover\n opened={opened}\n withinPortal\n trapFocus\n onChange={(_opened) => !_opened && close()}\n {...popoverProps}\n >\n <Popover.Target>\n <RichTextEditorControl\n {...others}\n variant={variant}\n aria-label={labels.colorPickerControlLabel}\n title={labels.colorPickerControlLabel}\n onClick={toggle}\n >\n <ColorSwatch color={currentColor} size={14} />\n </RichTextEditorControl>\n </Popover.Target>\n\n <Popover.Dropdown {...getStyles('linkEditorDropdown')}>\n {state === 'palette' && (\n <SimpleGrid cols={7} spacing={2}>\n {controls}\n </SimpleGrid>\n )}\n\n {state === 'colorPicker' && (\n <ColorPicker\n defaultValue={currentColor}\n onChange={(value) => handleChange(value, false)}\n {...colorPickerProps}\n />\n )}\n\n <Tooltip.Group closeDelay={200}>\n <Group justify=\"flex-end\" gap=\"xs\" mt=\"sm\">\n {state === 'palette' && (\n <ActionIcon\n variant=\"default\"\n onClick={close}\n title={labels.colorPickerCancel}\n aria-label={labels.colorPickerCancel}\n >\n <IconX style={{ width: rem(16), height: rem(16) }} />\n </ActionIcon>\n )}\n\n <ActionIcon\n variant=\"default\"\n onClick={handleClear}\n title={labels.colorPickerClear}\n aria-label={labels.colorPickerClear}\n >\n <IconCircleOff style={{ width: rem(16), height: rem(16) }} />\n </ActionIcon>\n\n {state === 'palette' ? (\n <ActionIcon\n variant=\"default\"\n onClick={() => setState('colorPicker')}\n title={labels.colorPickerColorPicker}\n aria-label={labels.colorPickerColorPicker}\n >\n <IconColorPicker style={{ width: rem(16), height: rem(16) }} />\n </ActionIcon>\n ) : (\n <ActionIcon\n variant=\"default\"\n onClick={() => setState('palette')}\n aria-label={labels.colorPickerPalette}\n title={labels.colorPickerPalette}\n >\n <IconPalette style={{ width: rem(16), height: rem(16) }} />\n </ActionIcon>\n )}\n\n {state === 'colorPicker' && (\n <ActionIcon\n variant=\"default\"\n onClick={close}\n title={labels.colorPickerSave}\n aria-label={labels.colorPickerSave}\n >\n <IconCheck style={{ width: rem(16), height: rem(16) }} />\n </ActionIcon>\n )}\n </Group>\n </Tooltip.Group>\n </Popover.Dropdown>\n </Popover>\n );\n}\n\nRichTextEditorColorPickerControl.displayName = '@mantine/tiptap/ColorPickerControl';\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditor.mjs","names":["classes","controls.BoldControl","controls.ItalicControl","controls.StrikeThroughControl","controls.UnderlineControl","controls.ClearFormattingControl","controls.H1Control","controls.H2Control","controls.H3Control","controls.H4Control","controls.H5Control","controls.H6Control","controls.BulletListControl","controls.OrderedListControl","controls.RichTextEditorLinkControl","controls.UnlinkControl","controls.BlockquoteControl","controls.AlignLeftControl","controls.AlignRightControl","controls.AlignCenterControl","controls.AlignJustifyControl","controls.SuperscriptControl","controls.SubscriptControl","controls.CodeControl","controls.CodeBlockControl","controls.RichTextEditorColorPickerControl","controls.RichTextEditorColorControl","controls.HighlightControl","controls.HrControl","controls.UnsetColorControl","controls.UndoControl","controls.RedoControl","controls.TaskListControl","controls.TaskListSinkControl","controls.TaskListLiftControl"],"sources":["../src/RichTextEditor.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { Editor } from '@tiptap/react';\nimport {\n Box,\n BoxProps,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { DEFAULT_LABELS, RichTextEditorLabels } from './labels';\nimport { RichTextEditorProvider } from './RichTextEditor.context';\nimport { RichTextEditorContent } from './RichTextEditorContent/RichTextEditorContent';\nimport * as controls from './RichTextEditorControl';\nimport { RichTextEditorControl } from './RichTextEditorControl/RichTextEditorControl';\nimport { RichTextEditorSourceCodeControl } from './RichTextEditorControl/RichTextEditorSourceCodeControl';\nimport { RichTextEditorControlsGroup } from './RichTextEditorControlsGroup/RichTextEditorControlsGroup';\nimport { RichTextEditorToolbar } from './RichTextEditorToolbar/RichTextEditorToolbar';\nimport classes from './RichTextEditor.module.css';\n\nexport type RichTextEditorVariant = 'default' | 'subtle';\n\nexport type RichTextEditorStylesNames =\n | 'linkEditorSave'\n | 'linkEditorDropdown'\n | 'root'\n | 'content'\n | 'Typography'\n | 'control'\n | 'controlIcon'\n | 'controlsGroup'\n | 'toolbar'\n | 'linkEditor'\n | 'linkEditorInput'\n | 'linkEditorExternalControl';\n\nexport interface RichTextEditorProps\n extends BoxProps, StylesApiProps<RichTextEditorFactory>, ElementProps<'div'> {\n /** Tiptap editor instance */\n editor: Editor | null;\n\n /** Determines whether code highlight styles should be added @default true */\n withCodeHighlightStyles?: boolean;\n\n /** Determines whether typography styles should be added @default true */\n withTypographyStyles?: boolean;\n\n /** Called if `RichTextEditor.SourceCode` clicked. */\n onSourceCodeTextSwitch?: (isSourceCodeModeActive: boolean) => void;\n\n /** Labels that are used in controls */\n labels?: Partial<RichTextEditorLabels>;\n\n /** Child editor components */\n children: React.ReactNode;\n}\n\nexport type RichTextEditorFactory = Factory<{\n props: RichTextEditorProps;\n ref: HTMLDivElement;\n stylesNames: RichTextEditorStylesNames;\n variant: RichTextEditorVariant;\n staticComponents: {\n Content: typeof RichTextEditorContent;\n Control: typeof RichTextEditorControl;\n Toolbar: typeof RichTextEditorToolbar;\n ControlsGroup: typeof RichTextEditorControlsGroup;\n Bold: typeof controls.BoldControl;\n Italic: typeof controls.ItalicControl;\n Strikethrough: typeof controls.StrikeThroughControl;\n Underline: typeof controls.UnderlineControl;\n ClearFormatting: typeof controls.ClearFormattingControl;\n H1: typeof controls.H1Control;\n H2: typeof controls.H2Control;\n H3: typeof controls.H3Control;\n H4: typeof controls.H4Control;\n H5: typeof controls.H5Control;\n H6: typeof controls.H6Control;\n BulletList: typeof controls.BulletListControl;\n OrderedList: typeof controls.OrderedListControl;\n Link: typeof controls.RichTextEditorLinkControl;\n Unlink: typeof controls.UnlinkControl;\n Blockquote: typeof controls.BlockquoteControl;\n AlignLeft: typeof controls.AlignLeftControl;\n AlignRight: typeof controls.AlignRightControl;\n AlignCenter: typeof controls.AlignCenterControl;\n AlignJustify: typeof controls.AlignJustifyControl;\n Superscript: typeof controls.SuperscriptControl;\n Subscript: typeof controls.SubscriptControl;\n Code: typeof controls.CodeControl;\n CodeBlock: typeof controls.CodeBlockControl;\n ColorPicker: typeof controls.RichTextEditorColorPickerControl;\n Color: typeof controls.RichTextEditorColorControl;\n Highlight: typeof controls.HighlightControl;\n Hr: typeof controls.HrControl;\n UnsetColor: typeof controls.UnsetColorControl;\n Undo: typeof controls.UndoControl;\n Redo: typeof controls.RedoControl;\n TaskList: typeof controls.TaskListControl;\n TaskListSink: typeof controls.TaskListSinkControl;\n TaskListLift: typeof controls.TaskListLiftControl;\n SourceCode: typeof RichTextEditorSourceCodeControl;\n };\n}>;\n\nconst defaultProps = {\n withCodeHighlightStyles: true,\n withTypographyStyles: true,\n variant: 'default',\n} satisfies Partial<RichTextEditorProps>;\n\nexport const RichTextEditor = factory<RichTextEditorFactory>((_props) => {\n const props = useProps('RichTextEditor', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n editor,\n withCodeHighlightStyles,\n withTypographyStyles,\n onSourceCodeTextSwitch,\n labels,\n children,\n variant,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<RichTextEditorFactory>({\n name: 'RichTextEditor',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const mergedLabels = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);\n\n return (\n <RichTextEditorProvider\n value={{\n editor,\n getStyles,\n labels: mergedLabels,\n withCodeHighlightStyles,\n withTypographyStyles,\n onSourceCodeTextSwitch,\n unstyled,\n variant,\n }}\n >\n <Box {...getStyles('root')} {...others}>\n {children}\n </Box>\n </RichTextEditorProvider>\n );\n});\n\nRichTextEditor.classes = classes;\nRichTextEditor.displayName = '@mantine/tiptap/RichTextEditor';\n\n// Generic components\nRichTextEditor.Content = RichTextEditorContent;\nRichTextEditor.Control = RichTextEditorControl;\nRichTextEditor.Toolbar = RichTextEditorToolbar;\nRichTextEditor.ControlsGroup = RichTextEditorControlsGroup;\n\n// Controls components\nRichTextEditor.Bold = controls.BoldControl;\nRichTextEditor.Italic = controls.ItalicControl;\nRichTextEditor.Strikethrough = controls.StrikeThroughControl;\nRichTextEditor.Underline = controls.UnderlineControl;\nRichTextEditor.ClearFormatting = controls.ClearFormattingControl;\nRichTextEditor.H1 = controls.H1Control;\nRichTextEditor.H2 = controls.H2Control;\nRichTextEditor.H3 = controls.H3Control;\nRichTextEditor.H4 = controls.H4Control;\nRichTextEditor.H5 = controls.H5Control;\nRichTextEditor.H6 = controls.H6Control;\nRichTextEditor.BulletList = controls.BulletListControl;\nRichTextEditor.OrderedList = controls.OrderedListControl;\nRichTextEditor.Link = controls.RichTextEditorLinkControl;\nRichTextEditor.Unlink = controls.UnlinkControl;\nRichTextEditor.Blockquote = controls.BlockquoteControl;\nRichTextEditor.AlignLeft = controls.AlignLeftControl;\nRichTextEditor.AlignRight = controls.AlignRightControl;\nRichTextEditor.AlignCenter = controls.AlignCenterControl;\nRichTextEditor.AlignJustify = controls.AlignJustifyControl;\nRichTextEditor.Superscript = controls.SuperscriptControl;\nRichTextEditor.Subscript = controls.SubscriptControl;\nRichTextEditor.Code = controls.CodeControl;\nRichTextEditor.CodeBlock = controls.CodeBlockControl;\nRichTextEditor.ColorPicker = controls.RichTextEditorColorPickerControl;\nRichTextEditor.Color = controls.RichTextEditorColorControl;\nRichTextEditor.Highlight = controls.HighlightControl;\nRichTextEditor.Hr = controls.HrControl;\nRichTextEditor.UnsetColor = controls.UnsetColorControl;\nRichTextEditor.Undo = controls.UndoControl;\nRichTextEditor.Redo = controls.RedoControl;\nRichTextEditor.TaskList = controls.TaskListControl;\nRichTextEditor.TaskListSink = controls.TaskListSinkControl;\nRichTextEditor.TaskListLift = controls.TaskListLiftControl;\nRichTextEditor.SourceCode = RichTextEditorSourceCodeControl;\n"],"mappings":";;;;;;;;;;;;;;;;;AA2GA,MAAM,eAAe;CACnB,yBAAyB;CACzB,sBAAsB;CACtB,SAAS;CACV;AAED,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,OAAO;CAC9D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,yBACA,sBACA,wBACA,QACA,UACA,SACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAIF,QACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA,QAPe,eAAe;IAAE,GAAG;IAAgB,GAAG;IAAQ,GAAG,CAAC,OAAO,CAAC;GAQ1E;GACA;GACA;GACA;GACA;GACD;YAED,oBAAC,KAAD;GAAK,GAAI,UAAU,OAAO;GAAE,GAAI;GAC7B;GACG,CAAA;EACiB,CAAA;EAE3B;AAEF,eAAe,UAAUA;AACzB,eAAe,cAAc;AAG7B,eAAe,UAAU;AACzB,eAAe,UAAU;AACzB,eAAe,UAAU;AACzB,eAAe,gBAAgB;AAG/B,eAAe,OAAOC;AACtB,eAAe,SAASC;AACxB,eAAe,gBAAgBC;AAC/B,eAAe,YAAYC;AAC3B,eAAe,kBAAkBC;AACjC,eAAe,KAAKC;AACpB,eAAe,KAAKC;AACpB,eAAe,KAAKC;AACpB,eAAe,KAAKC;AACpB,eAAe,KAAKC;AACpB,eAAe,KAAKC;AACpB,eAAe,aAAaC;AAC5B,eAAe,cAAcC;AAC7B,eAAe,OAAOC;AACtB,eAAe,SAASC;AACxB,eAAe,aAAaC;AAC5B,eAAe,YAAYC;AAC3B,eAAe,aAAaC;AAC5B,eAAe,cAAcC;AAC7B,eAAe,eAAeC;AAC9B,eAAe,cAAcC;AAC7B,eAAe,YAAYC;AAC3B,eAAe,OAAOC;AACtB,eAAe,YAAYC;AAC3B,eAAe,cAAcC;AAC7B,eAAe,QAAQC;AACvB,eAAe,YAAYC;AAC3B,eAAe,KAAKC;AACpB,eAAe,aAAaC;AAC5B,eAAe,OAAOC;AACtB,eAAe,OAAOC;AACtB,eAAe,WAAWC;AAC1B,eAAe,eAAeC;AAC9B,eAAe,eAAeC;AAC9B,eAAe,aAAa"}
|
|
1
|
+
{"version":3,"file":"RichTextEditor.mjs","names":["classes","controls.BoldControl","controls.ItalicControl","controls.StrikeThroughControl","controls.UnderlineControl","controls.ClearFormattingControl","controls.H1Control","controls.H2Control","controls.H3Control","controls.H4Control","controls.H5Control","controls.H6Control","controls.BulletListControl","controls.OrderedListControl","controls.RichTextEditorLinkControl","controls.UnlinkControl","controls.BlockquoteControl","controls.AlignLeftControl","controls.AlignRightControl","controls.AlignCenterControl","controls.AlignJustifyControl","controls.SuperscriptControl","controls.SubscriptControl","controls.CodeControl","controls.CodeBlockControl","controls.RichTextEditorColorPickerControl","controls.RichTextEditorColorControl","controls.HighlightControl","controls.HrControl","controls.UnsetColorControl","controls.UndoControl","controls.RedoControl","controls.TaskListControl","controls.TaskListSinkControl","controls.TaskListLiftControl"],"sources":["../src/RichTextEditor.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { Editor } from '@tiptap/react';\nimport {\n Box,\n BoxProps,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '@mantine/core';\nimport { DEFAULT_LABELS, RichTextEditorLabels } from './labels';\nimport { RichTextEditorProvider } from './RichTextEditor.context';\nimport {\n RichTextEditorContent,\n type RichTextEditorContentProps,\n} from './RichTextEditorContent/RichTextEditorContent';\nimport * as controls from './RichTextEditorControl';\nimport {\n RichTextEditorControl,\n type RichTextEditorControlProps,\n} from './RichTextEditorControl/RichTextEditorControl';\nimport type { RichTextEditorColorControlProps } from './RichTextEditorControl/RichTextEditorColorControl';\nimport type { RichTextEditorLinkControlProps } from './RichTextEditorControl/RichTextEditorLinkControl';\nimport {\n RichTextEditorSourceCodeControl,\n type RichTextEditorSourceCodeControlProps,\n} from './RichTextEditorControl/RichTextEditorSourceCodeControl';\nimport {\n RichTextEditorControlsGroup,\n type RichTextEditorControlsGroupProps,\n} from './RichTextEditorControlsGroup/RichTextEditorControlsGroup';\nimport {\n RichTextEditorToolbar,\n type RichTextEditorToolbarProps,\n} from './RichTextEditorToolbar/RichTextEditorToolbar';\nimport classes from './RichTextEditor.module.css';\n\nexport type RichTextEditorVariant = 'default' | 'subtle';\n\nexport type RichTextEditorStylesNames =\n | 'linkEditorSave'\n | 'linkEditorDropdown'\n | 'root'\n | 'content'\n | 'Typography'\n | 'control'\n | 'controlIcon'\n | 'controlsGroup'\n | 'toolbar'\n | 'linkEditor'\n | 'linkEditorInput'\n | 'linkEditorExternalControl';\n\nexport interface RichTextEditorProps\n extends BoxProps, StylesApiProps<RichTextEditorFactory>, ElementProps<'div'> {\n /** Tiptap editor instance */\n editor: Editor | null;\n\n /** Determines whether code highlight styles should be added @default true */\n withCodeHighlightStyles?: boolean;\n\n /** Determines whether typography styles should be added @default true */\n withTypographyStyles?: boolean;\n\n /** Called if `RichTextEditor.SourceCode` clicked. */\n onSourceCodeTextSwitch?: (isSourceCodeModeActive: boolean) => void;\n\n /** Labels that are used in controls */\n labels?: Partial<RichTextEditorLabels>;\n\n /** Child editor components */\n children: React.ReactNode;\n}\n\nexport type RichTextEditorFactory = Factory<{\n props: RichTextEditorProps;\n ref: HTMLDivElement;\n stylesNames: RichTextEditorStylesNames;\n variant: RichTextEditorVariant;\n staticComponents: {\n Content: typeof RichTextEditorContent;\n Control: typeof RichTextEditorControl;\n Toolbar: typeof RichTextEditorToolbar;\n ControlsGroup: typeof RichTextEditorControlsGroup;\n Bold: typeof controls.BoldControl;\n Italic: typeof controls.ItalicControl;\n Strikethrough: typeof controls.StrikeThroughControl;\n Underline: typeof controls.UnderlineControl;\n ClearFormatting: typeof controls.ClearFormattingControl;\n H1: typeof controls.H1Control;\n H2: typeof controls.H2Control;\n H3: typeof controls.H3Control;\n H4: typeof controls.H4Control;\n H5: typeof controls.H5Control;\n H6: typeof controls.H6Control;\n BulletList: typeof controls.BulletListControl;\n OrderedList: typeof controls.OrderedListControl;\n Link: typeof controls.RichTextEditorLinkControl;\n Unlink: typeof controls.UnlinkControl;\n Blockquote: typeof controls.BlockquoteControl;\n AlignLeft: typeof controls.AlignLeftControl;\n AlignRight: typeof controls.AlignRightControl;\n AlignCenter: typeof controls.AlignCenterControl;\n AlignJustify: typeof controls.AlignJustifyControl;\n Superscript: typeof controls.SuperscriptControl;\n Subscript: typeof controls.SubscriptControl;\n Code: typeof controls.CodeControl;\n CodeBlock: typeof controls.CodeBlockControl;\n ColorPicker: typeof controls.RichTextEditorColorPickerControl;\n Color: typeof controls.RichTextEditorColorControl;\n Highlight: typeof controls.HighlightControl;\n Hr: typeof controls.HrControl;\n UnsetColor: typeof controls.UnsetColorControl;\n Undo: typeof controls.UndoControl;\n Redo: typeof controls.RedoControl;\n TaskList: typeof controls.TaskListControl;\n TaskListSink: typeof controls.TaskListSinkControl;\n TaskListLift: typeof controls.TaskListLiftControl;\n SourceCode: typeof RichTextEditorSourceCodeControl;\n };\n}>;\n\nconst defaultProps = {\n withCodeHighlightStyles: true,\n withTypographyStyles: true,\n variant: 'default',\n} satisfies Partial<RichTextEditorProps>;\n\nexport const RichTextEditor = factory<RichTextEditorFactory>((_props) => {\n const props = useProps('RichTextEditor', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n editor,\n withCodeHighlightStyles,\n withTypographyStyles,\n onSourceCodeTextSwitch,\n labels,\n children,\n variant,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<RichTextEditorFactory>({\n name: 'RichTextEditor',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const mergedLabels = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);\n\n return (\n <RichTextEditorProvider\n value={{\n editor,\n getStyles,\n labels: mergedLabels,\n withCodeHighlightStyles,\n withTypographyStyles,\n onSourceCodeTextSwitch,\n unstyled,\n variant,\n }}\n >\n <Box {...getStyles('root')} {...others}>\n {children}\n </Box>\n </RichTextEditorProvider>\n );\n});\n\nRichTextEditor.classes = classes;\nRichTextEditor.displayName = '@mantine/tiptap/RichTextEditor';\n\n// Generic components\nRichTextEditor.Content = RichTextEditorContent;\nRichTextEditor.Control = RichTextEditorControl;\nRichTextEditor.Toolbar = RichTextEditorToolbar;\nRichTextEditor.ControlsGroup = RichTextEditorControlsGroup;\n\n// Controls components\nRichTextEditor.Bold = controls.BoldControl;\nRichTextEditor.Italic = controls.ItalicControl;\nRichTextEditor.Strikethrough = controls.StrikeThroughControl;\nRichTextEditor.Underline = controls.UnderlineControl;\nRichTextEditor.ClearFormatting = controls.ClearFormattingControl;\nRichTextEditor.H1 = controls.H1Control;\nRichTextEditor.H2 = controls.H2Control;\nRichTextEditor.H3 = controls.H3Control;\nRichTextEditor.H4 = controls.H4Control;\nRichTextEditor.H5 = controls.H5Control;\nRichTextEditor.H6 = controls.H6Control;\nRichTextEditor.BulletList = controls.BulletListControl;\nRichTextEditor.OrderedList = controls.OrderedListControl;\nRichTextEditor.Link = controls.RichTextEditorLinkControl;\nRichTextEditor.Unlink = controls.UnlinkControl;\nRichTextEditor.Blockquote = controls.BlockquoteControl;\nRichTextEditor.AlignLeft = controls.AlignLeftControl;\nRichTextEditor.AlignRight = controls.AlignRightControl;\nRichTextEditor.AlignCenter = controls.AlignCenterControl;\nRichTextEditor.AlignJustify = controls.AlignJustifyControl;\nRichTextEditor.Superscript = controls.SuperscriptControl;\nRichTextEditor.Subscript = controls.SubscriptControl;\nRichTextEditor.Code = controls.CodeControl;\nRichTextEditor.CodeBlock = controls.CodeBlockControl;\nRichTextEditor.ColorPicker = controls.RichTextEditorColorPickerControl;\nRichTextEditor.Color = controls.RichTextEditorColorControl;\nRichTextEditor.Highlight = controls.HighlightControl;\nRichTextEditor.Hr = controls.HrControl;\nRichTextEditor.UnsetColor = controls.UnsetColorControl;\nRichTextEditor.Undo = controls.UndoControl;\nRichTextEditor.Redo = controls.RedoControl;\nRichTextEditor.TaskList = controls.TaskListControl;\nRichTextEditor.TaskListSink = controls.TaskListSinkControl;\nRichTextEditor.TaskListLift = controls.TaskListLiftControl;\nRichTextEditor.SourceCode = RichTextEditorSourceCodeControl;\n\nexport namespace RichTextEditor {\n export type Props = RichTextEditorProps;\n export type StylesNames = RichTextEditorStylesNames;\n export type Factory = RichTextEditorFactory;\n\n export namespace Toolbar {\n export type Props = RichTextEditorToolbarProps;\n }\n\n export namespace Control {\n export type Props = RichTextEditorControlProps;\n export type ColorProps = RichTextEditorColorControlProps;\n export type LinkProps = RichTextEditorLinkControlProps;\n export type SourceCodeProps = RichTextEditorSourceCodeControlProps;\n }\n\n export namespace Content {\n export type Props = RichTextEditorContentProps;\n }\n\n export namespace ControlsGroup {\n export type Props = RichTextEditorControlsGroupProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA4HA,MAAM,eAAe;CACnB,yBAAyB;CACzB,sBAAsB;CACtB,SAAS;CACV;AAED,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,OAAO;CAC9D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,yBACA,sBACA,wBACA,QACA,UACA,SACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAIF,QACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA,QAPe,eAAe;IAAE,GAAG;IAAgB,GAAG;IAAQ,GAAG,CAAC,OAAO,CAAC;GAQ1E;GACA;GACA;GACA;GACA;GACD;YAED,oBAAC,KAAD;GAAK,GAAI,UAAU,OAAO;GAAE,GAAI;GAC7B;GACG,CAAA;EACiB,CAAA;EAE3B;AAEF,eAAe,UAAUA;AACzB,eAAe,cAAc;AAG7B,eAAe,UAAU;AACzB,eAAe,UAAU;AACzB,eAAe,UAAU;AACzB,eAAe,gBAAgB;AAG/B,eAAe,OAAOC;AACtB,eAAe,SAASC;AACxB,eAAe,gBAAgBC;AAC/B,eAAe,YAAYC;AAC3B,eAAe,kBAAkBC;AACjC,eAAe,KAAKC;AACpB,eAAe,KAAKC;AACpB,eAAe,KAAKC;AACpB,eAAe,KAAKC;AACpB,eAAe,KAAKC;AACpB,eAAe,KAAKC;AACpB,eAAe,aAAaC;AAC5B,eAAe,cAAcC;AAC7B,eAAe,OAAOC;AACtB,eAAe,SAASC;AACxB,eAAe,aAAaC;AAC5B,eAAe,YAAYC;AAC3B,eAAe,aAAaC;AAC5B,eAAe,cAAcC;AAC7B,eAAe,eAAeC;AAC9B,eAAe,cAAcC;AAC7B,eAAe,YAAYC;AAC3B,eAAe,OAAOC;AACtB,eAAe,YAAYC;AAC3B,eAAe,cAAcC;AAC7B,eAAe,QAAQC;AACvB,eAAe,YAAYC;AAC3B,eAAe,KAAKC;AACpB,eAAe,aAAaC;AAC5B,eAAe,OAAOC;AACtB,eAAe,OAAOC;AACtB,eAAe,WAAWC;AAC1B,eAAe,eAAeC;AAC9B,eAAe,eAAeC;AAC9B,eAAe,aAAa"}
|
|
@@ -15,7 +15,7 @@ function RichTextEditorColorControl(props) {
|
|
|
15
15
|
active: currentColor === color,
|
|
16
16
|
"aria-label": label,
|
|
17
17
|
title: label,
|
|
18
|
-
onClick: () => (editor?.chain())
|
|
18
|
+
onClick: () => (editor?.chain())?.focus().setColor(color).run(),
|
|
19
19
|
children: /* @__PURE__ */ jsx(ColorSwatch, {
|
|
20
20
|
color,
|
|
21
21
|
size: 14
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditorColorControl.mjs","names":[],"sources":["../../src/RichTextEditorControl/RichTextEditorColorControl.tsx"],"sourcesContent":["import { BoxProps, ColorSwatch, ElementProps, useProps } from '@mantine/core';\nimport { useRichTextEditorContext } from '../RichTextEditor.context';\nimport { RichTextEditorControl } from './RichTextEditorControl';\n\nexport interface RichTextEditorColorControlProps extends BoxProps, ElementProps<'button'> {\n /** Color that will be set as text color, for example #ef457e */\n color: string;\n}\n\nexport function RichTextEditorColorControl(props: RichTextEditorColorControlProps) {\n const { color, ...others } = useProps('RichTextEditorColorControl', null, props);\n const { editor, labels, variant } = useRichTextEditorContext();\n const currentColor = editor?.getAttributes('textStyle').color || null;\n const label = labels.colorControlLabel(color);\n\n return (\n <RichTextEditorControl\n {...others}\n variant={variant}\n active={currentColor === color}\n aria-label={label}\n title={label}\n onClick={() => (editor?.chain() as any)
|
|
1
|
+
{"version":3,"file":"RichTextEditorColorControl.mjs","names":[],"sources":["../../src/RichTextEditorControl/RichTextEditorColorControl.tsx"],"sourcesContent":["import { BoxProps, ColorSwatch, ElementProps, useProps } from '@mantine/core';\nimport { useRichTextEditorContext } from '../RichTextEditor.context';\nimport { RichTextEditorControl } from './RichTextEditorControl';\n\nexport interface RichTextEditorColorControlProps extends BoxProps, ElementProps<'button'> {\n /** Color that will be set as text color, for example #ef457e */\n color: string;\n}\n\nexport function RichTextEditorColorControl(props: RichTextEditorColorControlProps) {\n const { color, ...others } = useProps('RichTextEditorColorControl', null, props);\n const { editor, labels, variant } = useRichTextEditorContext();\n const currentColor = editor?.getAttributes('textStyle').color || null;\n const label = labels.colorControlLabel(color);\n\n return (\n <RichTextEditorControl\n {...others}\n variant={variant}\n active={currentColor === color}\n aria-label={label}\n title={label}\n onClick={() => (editor?.chain() as any)?.focus().setColor(color).run()}\n >\n <ColorSwatch color={color} size={14} />\n </RichTextEditorControl>\n );\n}\n\nRichTextEditorColorControl.displayName = '@mantine/tiptap/RichTextEditorColorControl';\n"],"mappings":";;;;;;AASA,SAAgB,2BAA2B,OAAwC;CACjF,MAAM,EAAE,OAAO,GAAG,WAAW,SAAS,8BAA8B,MAAM,MAAM;CAChF,MAAM,EAAE,QAAQ,QAAQ,YAAY,0BAA0B;CAC9D,MAAM,eAAe,QAAQ,cAAc,YAAY,CAAC,SAAS;CACjE,MAAM,QAAQ,OAAO,kBAAkB,MAAM;AAE7C,QACE,oBAAC,uBAAD;EACE,GAAI;EACK;EACT,QAAQ,iBAAiB;EACzB,cAAY;EACZ,OAAO;EACP,gBAAgB,QAAQ,OAAO,GAAU,OAAO,CAAC,SAAS,MAAM,CAAC,KAAK;YAEtE,oBAAC,aAAD;GAAoB;GAAO,MAAM;GAAM,CAAA;EACjB,CAAA;;AAI5B,2BAA2B,cAAc"}
|
|
@@ -14,11 +14,11 @@ function RichTextEditorColorPickerControl(props) {
|
|
|
14
14
|
const [state, setState] = useState("palette");
|
|
15
15
|
const currentColor = editor?.getAttributes("textStyle").color || "var(--mantine-color-text)";
|
|
16
16
|
const handleChange = (value, shouldClose = true) => {
|
|
17
|
-
(editor?.chain())
|
|
17
|
+
(editor?.chain())?.focus().setColor(value).run();
|
|
18
18
|
shouldClose && close();
|
|
19
19
|
};
|
|
20
20
|
const handleClear = () => {
|
|
21
|
-
(editor?.chain())
|
|
21
|
+
(editor?.chain())?.focus().unsetColor().run();
|
|
22
22
|
close();
|
|
23
23
|
};
|
|
24
24
|
const controls = colors.map((color, index) => /* @__PURE__ */ jsx(ColorSwatch, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditorColorPickerControl.mjs","names":[],"sources":["../../src/RichTextEditorControl/RichTextEditorColorPickerControl.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n ActionIcon,\n BoxProps,\n ColorPicker,\n ColorPickerProps,\n ColorSwatch,\n ElementProps,\n Group,\n Popover,\n PopoverProps,\n rem,\n SimpleGrid,\n Tooltip,\n useProps,\n} from '@mantine/core';\nimport { useDisclosure } from '@mantine/hooks';\nimport { IconCheck, IconCircleOff, IconColorPicker, IconPalette, IconX } from '../icons/Icons';\nimport { useRichTextEditorContext } from '../RichTextEditor.context';\nimport { RichTextEditorControl } from './RichTextEditorControl';\n\nexport interface RichTextEditorColorPickerControlProps extends BoxProps, ElementProps<'button'> {\n /** Props added to Popover component */\n popoverProps?: Partial<PopoverProps>;\n\n /** Props added to ColorPicker component */\n colorPickerProps?: Partial<ColorPickerProps>;\n\n /** List of colors that the user can choose from */\n colors: string[];\n}\n\nexport function RichTextEditorColorPickerControl(props: RichTextEditorColorPickerControlProps) {\n const { popoverProps, colors, colorPickerProps, ...others } = useProps(\n 'RichTextEditorColorPickerControl',\n null,\n props\n );\n\n const { editor, labels, getStyles, variant } = useRichTextEditorContext();\n const [opened, { toggle, close }] = useDisclosure(false);\n const [state, setState] = useState<'palette' | 'colorPicker'>('palette');\n const currentColor = editor?.getAttributes('textStyle').color || 'var(--mantine-color-text)';\n\n const handleChange = (value: string, shouldClose = true) => {\n (editor?.chain() as any)
|
|
1
|
+
{"version":3,"file":"RichTextEditorColorPickerControl.mjs","names":[],"sources":["../../src/RichTextEditorControl/RichTextEditorColorPickerControl.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n ActionIcon,\n BoxProps,\n ColorPicker,\n ColorPickerProps,\n ColorSwatch,\n ElementProps,\n Group,\n Popover,\n PopoverProps,\n rem,\n SimpleGrid,\n Tooltip,\n useProps,\n} from '@mantine/core';\nimport { useDisclosure } from '@mantine/hooks';\nimport { IconCheck, IconCircleOff, IconColorPicker, IconPalette, IconX } from '../icons/Icons';\nimport { useRichTextEditorContext } from '../RichTextEditor.context';\nimport { RichTextEditorControl } from './RichTextEditorControl';\n\nexport interface RichTextEditorColorPickerControlProps extends BoxProps, ElementProps<'button'> {\n /** Props added to Popover component */\n popoverProps?: Partial<PopoverProps>;\n\n /** Props added to ColorPicker component */\n colorPickerProps?: Partial<ColorPickerProps>;\n\n /** List of colors that the user can choose from */\n colors: string[];\n}\n\nexport function RichTextEditorColorPickerControl(props: RichTextEditorColorPickerControlProps) {\n const { popoverProps, colors, colorPickerProps, ...others } = useProps(\n 'RichTextEditorColorPickerControl',\n null,\n props\n );\n\n const { editor, labels, getStyles, variant } = useRichTextEditorContext();\n const [opened, { toggle, close }] = useDisclosure(false);\n const [state, setState] = useState<'palette' | 'colorPicker'>('palette');\n const currentColor = editor?.getAttributes('textStyle').color || 'var(--mantine-color-text)';\n\n const handleChange = (value: string, shouldClose = true) => {\n (editor?.chain() as any)?.focus().setColor(value).run();\n shouldClose && close();\n };\n\n const handleClear = () => {\n (editor?.chain() as any)?.focus().unsetColor().run();\n close();\n };\n\n const controls = colors.map((color, index) => (\n <ColorSwatch\n key={index}\n component=\"button\"\n color={color}\n onClick={() => handleChange(color)}\n size={26}\n radius=\"xs\"\n style={{ cursor: 'pointer' }}\n title={labels.colorPickerColorLabel(color)}\n aria-label={labels.colorPickerColorLabel(color)}\n />\n ));\n\n return (\n <Popover\n opened={opened}\n withinPortal\n trapFocus\n onChange={(_opened) => !_opened && close()}\n {...popoverProps}\n >\n <Popover.Target>\n <RichTextEditorControl\n {...others}\n variant={variant}\n aria-label={labels.colorPickerControlLabel}\n title={labels.colorPickerControlLabel}\n onClick={toggle}\n >\n <ColorSwatch color={currentColor} size={14} />\n </RichTextEditorControl>\n </Popover.Target>\n\n <Popover.Dropdown {...getStyles('linkEditorDropdown')}>\n {state === 'palette' && (\n <SimpleGrid cols={7} spacing={2}>\n {controls}\n </SimpleGrid>\n )}\n\n {state === 'colorPicker' && (\n <ColorPicker\n defaultValue={currentColor}\n onChange={(value) => handleChange(value, false)}\n {...colorPickerProps}\n />\n )}\n\n <Tooltip.Group closeDelay={200}>\n <Group justify=\"flex-end\" gap=\"xs\" mt=\"sm\">\n {state === 'palette' && (\n <ActionIcon\n variant=\"default\"\n onClick={close}\n title={labels.colorPickerCancel}\n aria-label={labels.colorPickerCancel}\n >\n <IconX style={{ width: rem(16), height: rem(16) }} />\n </ActionIcon>\n )}\n\n <ActionIcon\n variant=\"default\"\n onClick={handleClear}\n title={labels.colorPickerClear}\n aria-label={labels.colorPickerClear}\n >\n <IconCircleOff style={{ width: rem(16), height: rem(16) }} />\n </ActionIcon>\n\n {state === 'palette' ? (\n <ActionIcon\n variant=\"default\"\n onClick={() => setState('colorPicker')}\n title={labels.colorPickerColorPicker}\n aria-label={labels.colorPickerColorPicker}\n >\n <IconColorPicker style={{ width: rem(16), height: rem(16) }} />\n </ActionIcon>\n ) : (\n <ActionIcon\n variant=\"default\"\n onClick={() => setState('palette')}\n aria-label={labels.colorPickerPalette}\n title={labels.colorPickerPalette}\n >\n <IconPalette style={{ width: rem(16), height: rem(16) }} />\n </ActionIcon>\n )}\n\n {state === 'colorPicker' && (\n <ActionIcon\n variant=\"default\"\n onClick={close}\n title={labels.colorPickerSave}\n aria-label={labels.colorPickerSave}\n >\n <IconCheck style={{ width: rem(16), height: rem(16) }} />\n </ActionIcon>\n )}\n </Group>\n </Tooltip.Group>\n </Popover.Dropdown>\n </Popover>\n );\n}\n\nRichTextEditorColorPickerControl.displayName = '@mantine/tiptap/ColorPickerControl';\n"],"mappings":"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"}
|
package/lib/RichTextEditor.d.ts
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { Editor } from '@tiptap/react';
|
|
2
2
|
import { BoxProps, ElementProps, Factory, StylesApiProps } from '@mantine/core';
|
|
3
3
|
import { RichTextEditorLabels } from './labels';
|
|
4
|
-
import { RichTextEditorContent } from './RichTextEditorContent/RichTextEditorContent';
|
|
4
|
+
import { RichTextEditorContent, type RichTextEditorContentProps } from './RichTextEditorContent/RichTextEditorContent';
|
|
5
5
|
import * as controls from './RichTextEditorControl';
|
|
6
|
-
import { RichTextEditorControl } from './RichTextEditorControl/RichTextEditorControl';
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
6
|
+
import { RichTextEditorControl, type RichTextEditorControlProps } from './RichTextEditorControl/RichTextEditorControl';
|
|
7
|
+
import type { RichTextEditorColorControlProps } from './RichTextEditorControl/RichTextEditorColorControl';
|
|
8
|
+
import type { RichTextEditorLinkControlProps } from './RichTextEditorControl/RichTextEditorLinkControl';
|
|
9
|
+
import { RichTextEditorSourceCodeControl, type RichTextEditorSourceCodeControlProps } from './RichTextEditorControl/RichTextEditorSourceCodeControl';
|
|
10
|
+
import { RichTextEditorControlsGroup, type RichTextEditorControlsGroupProps } from './RichTextEditorControlsGroup/RichTextEditorControlsGroup';
|
|
11
|
+
import { RichTextEditorToolbar, type RichTextEditorToolbarProps } from './RichTextEditorToolbar/RichTextEditorToolbar';
|
|
10
12
|
export type RichTextEditorVariant = 'default' | 'subtle';
|
|
11
13
|
export type RichTextEditorStylesNames = 'linkEditorSave' | 'linkEditorDropdown' | 'root' | 'content' | 'Typography' | 'control' | 'controlIcon' | 'controlsGroup' | 'toolbar' | 'linkEditor' | 'linkEditorInput' | 'linkEditorExternalControl';
|
|
12
14
|
export interface RichTextEditorProps extends BoxProps, StylesApiProps<RichTextEditorFactory>, ElementProps<'div'> {
|
|
@@ -117,3 +119,23 @@ export declare const RichTextEditor: import("@mantine/core").MantineComponent<{
|
|
|
117
119
|
SourceCode: typeof RichTextEditorSourceCodeControl;
|
|
118
120
|
};
|
|
119
121
|
}>;
|
|
122
|
+
export declare namespace RichTextEditor {
|
|
123
|
+
type Props = RichTextEditorProps;
|
|
124
|
+
type StylesNames = RichTextEditorStylesNames;
|
|
125
|
+
type Factory = RichTextEditorFactory;
|
|
126
|
+
namespace Toolbar {
|
|
127
|
+
type Props = RichTextEditorToolbarProps;
|
|
128
|
+
}
|
|
129
|
+
namespace Control {
|
|
130
|
+
type Props = RichTextEditorControlProps;
|
|
131
|
+
type ColorProps = RichTextEditorColorControlProps;
|
|
132
|
+
type LinkProps = RichTextEditorLinkControlProps;
|
|
133
|
+
type SourceCodeProps = RichTextEditorSourceCodeControlProps;
|
|
134
|
+
}
|
|
135
|
+
namespace Content {
|
|
136
|
+
type Props = RichTextEditorContentProps;
|
|
137
|
+
}
|
|
138
|
+
namespace ControlsGroup {
|
|
139
|
+
type Props = RichTextEditorControlsGroupProps;
|
|
140
|
+
}
|
|
141
|
+
}
|
package/lib/index.d.mts
CHANGED
|
@@ -16,23 +16,3 @@ export { RichTextEditorControlsGroup } from './RichTextEditorControlsGroup/RichT
|
|
|
16
16
|
export { RichTextEditorControl } from './RichTextEditorControl/RichTextEditorControl.js';
|
|
17
17
|
export { RichTextEditorContent } from './RichTextEditorContent/RichTextEditorContent.js';
|
|
18
18
|
export type { RichTextEditorProps, RichTextEditorStylesNames, RichTextEditorFactory, RichTextEditorToolbarProps, RichTextEditorControlProps, RichTextEditorColorControlProps, RichTextEditorLinkControlProps, RichTextEditorSourceCodeControlProps, RichTextEditorContentProps, RichTextEditorControlsGroupProps, RichTextEditorLabels, };
|
|
19
|
-
export declare namespace RichTextEditor {
|
|
20
|
-
type Props = RichTextEditorProps;
|
|
21
|
-
type StylesNames = RichTextEditorStylesNames;
|
|
22
|
-
type Factory = RichTextEditorFactory;
|
|
23
|
-
namespace Toolbar {
|
|
24
|
-
type Props = RichTextEditorToolbarProps;
|
|
25
|
-
}
|
|
26
|
-
namespace Control {
|
|
27
|
-
type Props = RichTextEditorControlProps;
|
|
28
|
-
type ColorProps = RichTextEditorColorControlProps;
|
|
29
|
-
type LinkProps = RichTextEditorLinkControlProps;
|
|
30
|
-
type SourceCodeProps = RichTextEditorSourceCodeControlProps;
|
|
31
|
-
}
|
|
32
|
-
namespace Content {
|
|
33
|
-
type Props = RichTextEditorContentProps;
|
|
34
|
-
}
|
|
35
|
-
namespace ControlsGroup {
|
|
36
|
-
type Props = RichTextEditorControlsGroupProps;
|
|
37
|
-
}
|
|
38
|
-
}
|
package/lib/index.d.ts
CHANGED
|
@@ -16,23 +16,3 @@ export { RichTextEditorControlsGroup } from './RichTextEditorControlsGroup/RichT
|
|
|
16
16
|
export { RichTextEditorControl } from './RichTextEditorControl/RichTextEditorControl.js';
|
|
17
17
|
export { RichTextEditorContent } from './RichTextEditorContent/RichTextEditorContent.js';
|
|
18
18
|
export type { RichTextEditorProps, RichTextEditorStylesNames, RichTextEditorFactory, RichTextEditorToolbarProps, RichTextEditorControlProps, RichTextEditorColorControlProps, RichTextEditorLinkControlProps, RichTextEditorSourceCodeControlProps, RichTextEditorContentProps, RichTextEditorControlsGroupProps, RichTextEditorLabels, };
|
|
19
|
-
export declare namespace RichTextEditor {
|
|
20
|
-
type Props = RichTextEditorProps;
|
|
21
|
-
type StylesNames = RichTextEditorStylesNames;
|
|
22
|
-
type Factory = RichTextEditorFactory;
|
|
23
|
-
namespace Toolbar {
|
|
24
|
-
type Props = RichTextEditorToolbarProps;
|
|
25
|
-
}
|
|
26
|
-
namespace Control {
|
|
27
|
-
type Props = RichTextEditorControlProps;
|
|
28
|
-
type ColorProps = RichTextEditorColorControlProps;
|
|
29
|
-
type LinkProps = RichTextEditorLinkControlProps;
|
|
30
|
-
type SourceCodeProps = RichTextEditorSourceCodeControlProps;
|
|
31
|
-
}
|
|
32
|
-
namespace Content {
|
|
33
|
-
type Props = RichTextEditorContentProps;
|
|
34
|
-
}
|
|
35
|
-
namespace ControlsGroup {
|
|
36
|
-
type Props = RichTextEditorControlsGroupProps;
|
|
37
|
-
}
|
|
38
|
-
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantine/tiptap",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.1",
|
|
4
4
|
"description": "Rich text editor based on tiptap",
|
|
5
5
|
"homepage": "https://mantine.dev/x/tiptap",
|
|
6
6
|
"license": "MIT",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"directory": "packages/@mantine/tiptap"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
|
-
"@mantine/core": "9.0.
|
|
48
|
-
"@mantine/hooks": "9.0.
|
|
47
|
+
"@mantine/core": "9.0.1",
|
|
48
|
+
"@mantine/hooks": "9.0.1",
|
|
49
49
|
"@tiptap/extension-link": ">=3.3.0",
|
|
50
50
|
"@tiptap/react": ">=3.3.0",
|
|
51
51
|
"react": "^19.2.0",
|