coolswitch / tiptap-extension-image-upload

Image upload extension for tiptap, support image preview（tiptap的图片上传扩展，支持图片预览或占位）

tiptap-extension-image-upload

Image upload extension for tiptap, support image preview.

中文 readme

Introduction

Upload support:

• File type data upload (such as the image selected by input:file)
• Image drop handling
• Screenshot in the clipboard
• Third party pictures in the clipboard (the image url will be read and converted to File)

Image preview（.image-placeholder）：

• The base64 of the image is used as the preview by default

Instalation

npm i tiptap-extension-image-upload -S

Usage

Add it as any extension in useEditor()

import { ImageUploadExtension, ImagePlaceholder } from 'tiptap-extension-image-upload'

  extensions: {
    ImageUploadExtension.configure({
      acceptMimes: ['image/jpeg', 'image/gif', 'image/png', 'image/jpg'],
      upload: (file: File, id: string) => {
        // your upload ajax
        return Promise.resolve('https://avatars.githubusercontent.com/u/112541088')
      },
      ignoreDomains: ['www.xxx.com']
    }),
    ImagePlaceholder.configure({
      inline: false
    }),

ImageUploadExtension Configuration

export interface ImageUploaderPluginOptions {
  /** Image types allowed to upload */
  acceptMimes: string[]
  /**
   * Image File upload function
   * @param {File} file - File waiting to be uploaded
   * @param {string} id - Automatically generated unique key
   */
  upload(file: File | string, id: string): Promise<string>
  /** Do not upload if the src domain is in this array  */
  ignoreDomains: string[]
}

tiptap-extension-image-upload's Issues

imgPlaceholder.vue required a loader

Hey, great project!

Have just tried out the basic config and run into this:

./node_modules/tiptap-extension-image-upload/src/imagePlaceholder.ts
Module parse failed: Unexpected token (5:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import imgPlaceholder from './imgPlaceholder.vue'
| 
> export interface ImagePlaceholderOptions {
|   inline: boolean
|   HTMLAttributes: Record<string, any>

I'm using nextjs and not vue.

Are there any prerequisites of using this extension?

ERROR in ./node_modules/tiptap-extension-image-upload/src/index.ts

webpack compiled with 2 errors
node v16.17.0
npm 8.15.0

ERROR in ./node_modules/tiptap-extension-image-upload/src/index.ts 1:0-68
Module not found: Error: Can't resolve './imagePlaceholder' in '/var/www/html/my-pj/node_modules/tiptap-extension-image-upload/src'

ERROR in ./node_modules/tiptap-extension-image-upload/src/index.ts 2:0-80
Module not found: Error: Can't resolve './imageUploadExtension' in '/var/www/html/my-pj/node_modules/tiptap-extension-image-upload/src'

webpack compiled with 2 errors