nuxt-tiptap-editor
Version:
Essentials to Quickly Integrate TipTap Editor into your Nuxt App
76 lines (75 loc) • 2.5 kB
JavaScript
import { Extension } from "@tiptap/core";
import {
createPlaceholderNode,
imageUploader,
uploadAndReplaceById
} from "./imageUploader.js";
const deprecationWarned = /* @__PURE__ */ new WeakSet();
function uploadNotConfigured() {
return Promise.reject(
new Error(
"[nuxt-tiptap-editor] ImageUpload extension is missing an `upload` handler. Configure it via TiptapImageUpload.configure({ upload: async (file, id) => ... })."
)
);
}
export const ImageUpload = Extension.create({
name: "imageUploadExtension",
addOptions() {
return {
id: () => Math.random().toString(36).substring(7),
acceptMimes: ["image/jpeg", "image/gif", "image/png", "image/jpg"],
upload: uploadNotConfigured,
ignoreDomains: []
};
},
addStorage() {
const cache = /* @__PURE__ */ new Map();
return {
cache,
getFileCache(id) {
return cache.get(id);
}
};
},
onDestroy() {
this.storage.cache.clear();
},
addCommands() {
return {
uploadImage: (options) => ({ tr, state, dispatch }) => {
const ctx = { options: this.options, storage: this.storage };
const id = this.options.id();
if (dispatch) {
const node = createPlaceholderNode(ctx, state.schema, id, {
src: options.file
});
if (!tr.selection.empty) tr.deleteSelection();
tr.replaceSelectionWith(node);
const editor = this.editor;
queueMicrotask(() => {
if (!editor.view || editor.isDestroyed) return;
void uploadAndReplaceById(ctx, editor.view, id, options.file);
});
}
return true;
},
// The original API returned the cached value from the command thunk
// (non-standard — commands are supposed to return boolean). Preserved
// here for one deprecation cycle so existing consumers keep working.
getFileCache: (key) => ({ editor }) => {
if (import.meta.dev && editor && !deprecationWarned.has(editor)) {
deprecationWarned.add(editor);
console.warn(
"[nuxt-tiptap-editor] `editor.commands.getFileCache(id)` is deprecated and will be removed in the next major. Use `editor.storage.imageUploadExtension.getFileCache(id)` instead."
);
}
return this.storage.cache.get(key);
}
};
},
addProseMirrorPlugins() {
return [
imageUploader({ options: this.options, storage: this.storage })
];
}
});