@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
89 lines (88 loc) • 2.44 kB
JavaScript
import Mention from "@tiptap/extension-mention";
import { VueNodeViewRenderer } from "@tiptap/vue-2";
import { PluginKey } from "@tiptap/pm/state";
import SlashCommandComponent from "./SlashCommandComponent.vue.js";
import { mergeAttributes, nodeInputRule, nodePasteRule } from "@tiptap/core";
const slashCommandPasteMatch = (text, slashCommandRegex) => {
const matches = [...text.matchAll(slashCommandRegex)];
return matches.map((match) => {
let slashCommand = match[2];
if (!slashCommand.endsWith(" ")) slashCommand += " ";
return {
index: match.index,
text: slashCommand,
match
};
});
};
const SlashCommandPlugin = Mention.extend({
name: "slash-commands",
group: "inline",
inline: true,
addNodeView() {
return VueNodeViewRenderer(SlashCommandComponent);
},
parseHTML() {
return [
{
tag: "command-component"
}
];
},
addAttributes() {
return {
command: {
default: ""
},
parametersExample: {
default: ""
},
description: {
default: ""
}
};
},
renderText({ node }) {
return `/${node.attrs.command}`;
},
renderHTML({ HTMLAttributes }) {
return ["command-component", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
},
addInputRules() {
var _a;
const suggestions = (_a = this.options.suggestion) == null ? void 0 : _a.items({ query: "" }).map((suggestion) => suggestion.command);
const slashCommandRegex = new RegExp(`^((?:\\/)(${suggestions.join("|")})) $`);
return [
nodeInputRule({
find: slashCommandRegex,
type: this.type,
getAttributes(attrs) {
return { command: attrs[2] };
}
})
];
},
addPasteRules() {
var _a;
const suggestions = (_a = this.options.suggestion) == null ? void 0 : _a.items({ query: "" }).map((suggestion) => suggestion.command);
const slashCommandRegex = new RegExp(`^((?:\\/)(${suggestions.join("|")})) ?$`, "g");
return [
nodePasteRule({
find: (text) => slashCommandPasteMatch(text, slashCommandRegex),
type: this.type,
getAttributes(attrs) {
return { command: attrs[0].trim() };
}
})
];
}
}).configure({
suggestion: {
char: "/",
pluginKey: new PluginKey("slashCommandSuggestion")
}
});
export {
SlashCommandPlugin
};
//# sourceMappingURL=slash_command.js.map