UNPKG

@mantine/tiptap

Version:

Rich text editor based on tiptap

1 lines 10.6 kB
{"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;AACX;AAEA,MAAa,kBAAA,GAAA,cAAA,UAAiD,WAAW;CACvE,MAAM,SAAA,GAAA,cAAA,UAAiB,kBAAkB,cAAc,MAAM;CAC7D,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;CACF,CAAC;CAID,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,wBAAD;EACE,OAAO;GACL;GACA;GACA,SAAA,GAAA,MAAA,gBAP8B;IAAE,GAAGC,eAAAA;IAAgB,GAAG;GAAO,IAAI,CAAC,MAAM,CAOrD;GACnB;GACA;GACA;GACA;GACA;EACF;YAEA,iBAAA,GAAA,kBAAA,KAACC,cAAAA,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,GAAI;GAC7B;EACE,CAAA;CACiB,CAAA;AAE5B,CAAC;AAED,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"}