@mantine-vue/tiptap 3.4.0 → 3.6.0

package/lib/RichTextEditor.context.d.ts

@@ -1,5 +1,6 @@
 import type { Editor } from '@tiptap/vue-3';
 import type { ResolvedRichTextEditorLabels } from './labels';
+import type { ImageUploadResult } from './extensions/UploadImage';
 export interface RichTextEditorContextValue {
     getStyles: (selector: string, options?: {
         active?: boolean;
@@ -17,5 +18,7 @@ export interface RichTextEditorContextValue {
     unstyled: boolean | undefined;
     variant: string | undefined;
     onSourceCodeTextSwitch?: (isSourceCodeModeActive: boolean) => void;
+    onImageUpload?: (file: File) => Promise<string | ImageUploadResult>;
+    onImageUploadError?: (file: File, error: unknown) => void;
 }
 export declare const provideRichTextEditorContext: (value: RichTextEditorContextValue) => void, useRichTextEditorContext: () => RichTextEditorContextValue;

package/lib/RichTextEditor.d.ts

@@ -8,6 +8,7 @@ import { RichTextEditorSourceCodeControl } from './RichTextEditorControl/RichTex
 import { RichTextEditorTableInsertControl } from './RichTextEditorControl/RichTextEditorTableInsertControl';
 import { RichTextEditorDetailsControl } from './RichTextEditorControl/RichTextEditorDetailsControl';
 import { RichTextEditorInvisibleCharactersControl } from './RichTextEditorControl/RichTextEditorInvisibleCharactersControl';
+import { RichTextEditorImageUploadControl } from './RichTextEditorControl/RichTextEditorImageUploadControl';
 import { RichTextEditorControlsGroup } from './RichTextEditorControlsGroup/RichTextEditorControlsGroup';
 import { RichTextEditorToolbar } from './RichTextEditorToolbar/RichTextEditorToolbar';
 export declare const RichTextEditor: import("@mantine-vue/core").MantineComponent<{
@@ -71,6 +72,7 @@ export declare const RichTextEditor: import("@mantine-vue/core").MantineComponen
         TableSplitCell: typeof controls.TableSplitCellControl;
         Details: typeof RichTextEditorDetailsControl;
         InvisibleCharacters: typeof RichTextEditorInvisibleCharactersControl;
+        ImageUpload: typeof RichTextEditorImageUploadControl;
     };
 }>;
 export type { RichTextEditorFactory, RichTextEditorOwnProps, RichTextEditorProps, RichTextEditorSlots, RichTextEditorStylesNames, RichTextEditorVariant, } from './RichTextEditor.types';

package/lib/RichTextEditor.types.d.ts

@@ -2,6 +2,8 @@ import type { VNodeChild } from 'vue';
 import type { Editor } from '@tiptap/vue-3';
 import type { BoxProps, Factory, StylesApiProps } from '@mantine-vue/core';
 import type { RichTextEditorLabels } from './labels';
+import type { ImageUploadResult } from './extensions/UploadImage';
+import type { RichTextEditorImageUploadControl } from './RichTextEditorControl/RichTextEditorImageUploadControl';
 import type { RichTextEditorContent } from './RichTextEditorContent/RichTextEditorContent';
 import type { RichTextEditorControl } from './RichTextEditorControl/RichTextEditorControl';
 import type { BoldControl, ItalicControl, StrikeThroughControl, UnderlineControl, ClearFormattingControl, H1Control, H2Control, H3Control, H4Control, H5Control, H6Control, BulletListControl, OrderedListControl, UnlinkControl, BlockquoteControl, AlignLeftControl, AlignRightControl, AlignCenterControl, AlignJustifyControl, SuperscriptControl, SubscriptControl, CodeControl, CodeBlockControl, HighlightControl, HrControl, UnsetColorControl, UndoControl, RedoControl, TaskListControl, TaskListSinkControl, TaskListLiftControl, TableDeleteControl, TableColumnBeforeControl, TableColumnAfterControl, TableColumnDeleteControl, TableRowBeforeControl, TableRowAfterControl, TableRowDeleteControl, TableToggleHeaderRowControl, TableToggleHeaderColumnControl, TableMergeCellsControl, TableSplitCellControl } from './RichTextEditorControl/controls';
@@ -29,6 +31,10 @@ export interface RichTextEditorOwnProps extends StylesApiProps<RichTextEditorFac
     labels?: Partial<RichTextEditorLabels>;
     /** Visual variant. @default 'default' */
     variant?: RichTextEditorVariant;
+    /** Called when an image file is picked with `RichTextEditor.ImageUpload` control, must return a promise that resolves to the uploaded image URL or to an object with `src` and optional `alt` and `title`. Takes precedence over `onImageUpload` option of the extension created with `getUploadImageExtension`. */
+    onImageUpload?: (file: File) => Promise<string | ImageUploadResult>;
+    /** Called when an image picked with `RichTextEditor.ImageUpload` control fails to upload. Takes precedence over `onImageUploadError` option of the extension created with `getUploadImageExtension`. */
+    onImageUploadError?: (file: File, error: unknown) => void;
 }
 export interface RichTextEditorProps extends Omit<BoxProps, keyof RichTextEditorOwnProps | 'component'>, RichTextEditorOwnProps {
 }
@@ -96,5 +102,6 @@ export type RichTextEditorFactory = Factory<{
         TableSplitCell: typeof TableSplitCellControl;
         Details: typeof RichTextEditorDetailsControl;
         InvisibleCharacters: typeof RichTextEditorInvisibleCharactersControl;
+        ImageUpload: typeof RichTextEditorImageUploadControl;
     };
 }>;

package/lib/RichTextEditor.vue.d.ts

@@ -1,5 +1,6 @@
 import type { Editor } from '@tiptap/vue-3';
 import type { RichTextEditorLabels } from './labels';
+import type { ImageUploadResult } from './extensions/UploadImage';
 import type { RichTextEditorSlots, RichTextEditorVariant } from './RichTextEditor.types';
 interface RichTextEditorRuntimeProps {
     editor: Editor | null | undefined;
@@ -8,6 +9,8 @@ interface RichTextEditorRuntimeProps {
     onSourceCodeTextSwitch?: (isSourceCodeModeActive: boolean) => void;
     labels?: Partial<RichTextEditorLabels>;
     variant?: RichTextEditorVariant;
+    onImageUpload?: (file: File) => Promise<string | ImageUploadResult>;
+    onImageUploadError?: (file: File, error: unknown) => void;
     classNames?: unknown;
     styles?: unknown;
     vars?: unknown;

package/lib/RichTextEditorControl/RichTextEditorImageUploadControl.d.ts

@@ -0,0 +1,2 @@
+export declare const RichTextEditorImageUploadControl: import("vue").DefineComponent<import("./RichTextEditorImageUploadControl.types").RichTextEditorImageUploadControlRuntimeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("./RichTextEditorImageUploadControl.types").RichTextEditorImageUploadControlRuntimeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export type { RichTextEditorImageUploadControlProps } from './RichTextEditorImageUploadControl.types';

package/lib/RichTextEditorControl/RichTextEditorImageUploadControl.types.d.ts

@@ -0,0 +1,11 @@
+import type { BoxProps } from '@mantine-vue/core';
+import type { RichTextEditorControlBaseProps } from './RichTextEditorControl.types';
+export interface RichTextEditorImageUploadControlRuntimeProps {
+    accept?: string;
+    disabled?: boolean;
+    icon?: any;
+}
+export type RichTextEditorImageUploadControlProps = Omit<RichTextEditorControlBaseProps, 'classNames' | 'styles' | 'vars'> & BoxProps & {
+    /** Accepted file types. @default 'image/*' */
+    accept?: string;
+};

package/lib/RichTextEditorControl/RichTextEditorImageUploadControl.vue.d.ts

@@ -0,0 +1,4 @@
+import type { RichTextEditorImageUploadControlRuntimeProps } from './RichTextEditorImageUploadControl.types';
+declare const __VLS_export: import("vue").DefineComponent<RichTextEditorImageUploadControlRuntimeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RichTextEditorImageUploadControlRuntimeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/lib/RichTextEditorControl/index.d.ts

@@ -6,4 +6,5 @@ export * from './RichTextEditorSourceCodeControl';
 export * from './RichTextEditorTableInsertControl';
 export * from './RichTextEditorDetailsControl';
 export * from './RichTextEditorInvisibleCharactersControl';
+export * from './RichTextEditorImageUploadControl';
 export * from './controls';

package/lib/extensions/UploadImage.d.ts

@@ -0,0 +1,21 @@
+export interface ImageUploadResult {
+    /** URL of the uploaded image, set as `src` attribute */
+    src: string;
+    /** Alternative text of the uploaded image, set as `alt` attribute */
+    alt?: string;
+    /** Title of the uploaded image, set as `title` attribute */
+    title?: string;
+}
+export interface UploadImageOptions {
+    /** Called for every image file that is picked, dropped or pasted, must return a promise that resolves to the uploaded image URL or to an object with `src` and optional `alt` and `title` */
+    onImageUpload: (file: File) => Promise<string | ImageUploadResult>;
+    /** Called when image upload fails */
+    onImageUploadError?: (file: File, error: unknown) => void;
+    /** Called for every image in pasted or dropped HTML, return `true` to download the image and pass it to `onImageUpload`. By default, only images with `data:` URL sources are uploaded. */
+    shouldUploadPastedImage?: (src: string) => boolean;
+}
+export declare function getImageFiles(files: FileList | File[] | null | undefined): File[];
+export declare function insertImageFilesWithUpload(view: any, files: File[], pos: number, options: UploadImageOptions): void;
+export declare function insertImageWithUpload(view: any, file: File, pos: number, options: UploadImageOptions): void;
+export declare function getUploadImageExtensionOptions(editor: any): Partial<UploadImageOptions>;
+export declare function getUploadImageExtension(TipTapImage: any, options: UploadImageOptions): any;

package/lib/extensions/index.d.ts

@@ -1,2 +1,3 @@
 export { Link } from './Link';
 export { getTaskListExtension } from './TaskList';
+export * from './UploadImage';

package/lib/icons/Icons.d.ts

@@ -54,3 +54,4 @@ export declare const IconTableMergeCells: Component<IconProps>;
 export declare const IconTableSplitCell: Component<IconProps>;
 export declare const IconDetails: Component<IconProps>;
 export declare const IconPilcrow: Component<IconProps>;
+export declare const IconPhoto: Component<IconProps>;

package/lib/labels.d.ts

@@ -60,6 +60,7 @@ export interface RichTextEditorLabels {
     tableSplitCellControlLabel?: string;
     detailsControlLabel?: string;
     invisibleCharactersControlLabel?: string;
+    imageUploadControlLabel?: string;
 }
 export type ResolvedRichTextEditorLabels = Required<RichTextEditorLabels>;
 export declare const DEFAULT_LABELS: ResolvedRichTextEditorLabels;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine-vue/tiptap",
-  "version": "3.4.0",
+  "version": "3.6.0",
   "description": "Vue rich text editor based on tiptap, equivalent to @mantine/tiptap",
   "license": "MIT",
   "files": [
@@ -45,8 +45,8 @@
   },
   "peerDependencies": {
     "@floating-ui/dom": "^1.0.0",
-    "@mantine-vue/core": "3.4.0",
-    "@mantine-vue/hooks": "3.4.0",
+    "@mantine-vue/core": "3.6.0",
+    "@mantine-vue/hooks": "3.6.0",
     "@tiptap/core": ">=3.3.0",
     "@tiptap/extension-link": ">=3.3.0",
     "@tiptap/pm": ">=3.3.0",