@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
83 lines (82 loc) • 2.45 kB
JavaScript
import { VueRenderer } from "@tiptap/vue-2";
import tippy from "tippy.js";
import SuggestionList from "../suggestion/SuggestionList.vue.js";
import MentionSuggestion from "./MentionSuggestion.vue.js";
import hideOnEsc from "../tippy_plugins/hide_on_esc.js";
const mentionSuggestion = {
// 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,
render: () => {
let component;
let popup;
let popupIsOpen = false;
return {
onStart: (props) => {
component = new VueRenderer(SuggestionList, {
parent: void 0,
propsData: {
itemComponent: MentionSuggestion,
itemType: "mention",
...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 {
mentionSuggestion as default
};
//# sourceMappingURL=suggestion.js.map