@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
85 lines (84 loc) • 2.54 kB
JavaScript
import { markRaw } from "vue";
import { VueRenderer } from "@tiptap/vue-3";
import tippy from "tippy.js";
import hideOnEsc from "../tippy_plugins/hide_on_esc.js";
import SuggestionList from "../suggestion/SuggestionList.vue.js";
import SlashCommandSuggestion from "./SlashCommandSuggestion.vue.js";
const slashCommandSuggestion = {
// This function comes from the user and passed to the editor directly.
// This will also activate the mention plugin on the editor
// items: ({ query }) => { return [] },
allowSpaces: true,
startOfLine: true,
render: () => {
let component;
let popup;
let popupIsOpen = false;
return {
onStart: (props) => {
component = new VueRenderer(SuggestionList, {
parent: void 0,
props: {
itemComponent: markRaw(SlashCommandSuggestion),
itemType: "slash-command",
...props
},
editor: props.editor
});
if (!props.clientRect) {
return;
}
popup = tippy("body", {
getReferenceClientRect: props.clientRect,
appendTo: () => document.body,
content: component.element,
showOnCreate: false,
onShow: () => {
popupIsOpen = true;
},
onHidden: () => {
popupIsOpen = false;
},
interactive: true,
trigger: "manual",
placement: "top-start",
zIndex: 650,
plugins: [hideOnEsc]
});
if (props.items.length > 0) {
popup == null ? void 0 : popup[0].show();
}
},
onUpdate(props) {
component == null ? void 0 : component.updateProps(props);
if (props.items.length > 0) {
popup == null ? void 0 : popup[0].show();
} else {
popup == null ? void 0 : popup[0].hide();
}
if (!props.clientRect) {
return;
}
popup == null ? void 0 : popup[0].setProps({
getReferenceClientRect: props.clientRect
});
},
onKeyDown(props) {
var _a;
if (popupIsOpen) {
return (_a = component == null ? void 0 : component.ref) == null ? void 0 : _a.onKeyDown(props);
}
},
onExit() {
popup == null ? void 0 : popup[0].destroy();
popup = null;
component == null ? void 0 : component.destroy();
component = null;
}
};
}
};
export {
slashCommandSuggestion as default
};
//# sourceMappingURL=suggestion.js.map