nuxt-tiptap-editor
Version:
Essentials to Quickly Integrate TipTap Editor into your Nuxt App
52 lines (51 loc) • 1.13 kB
JavaScript
import { Node, nodeInputRule } from "@tiptap/core";
import { VueNodeViewRenderer } from "@tiptap/vue-3";
import ImagePlaceholderComponent from "./ImagePlaceholder.vue";
export const inputRegex = /(?:^|\s)(!\[(.+|:?)\]\((\S+)(?:\s+["'](\S+)["'])?\))$/;
export const ImagePlaceholder = Node.create({
name: "imagePlaceholder",
draggable: false,
addOptions() {
return {
inline: false,
HTMLAttributes: {}
};
},
inline() {
return this.options.inline;
},
group() {
return this.options.inline ? "inline" : "block";
},
addAttributes() {
return {
uploadId: {
default: ""
},
width: {
default: void 0
}
};
},
parseHTML() {
return [{ tag: "image-placeholder" }];
},
renderHTML() {
return ["div"];
},
addNodeView() {
return VueNodeViewRenderer(ImagePlaceholderComponent);
},
addInputRules() {
return [
nodeInputRule({
find: inputRegex,
type: this.type,
getAttributes: (match) => {
const [, , uploadId] = match;
return { uploadId };
}
})
];
}
});