@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
83 lines (82 loc) • 2.63 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const vue3 = require("@tiptap/vue-3");
const tippy = require("tippy.js");
const SuggestionList = require("../suggestion/SuggestionList.vue.cjs");
const ChannelSuggestion = require("./ChannelSuggestion.vue.cjs");
const hide_on_esc = require("../tippy_plugins/hide_on_esc.cjs");
const channelSuggestion = {
// 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 vue3.VueRenderer(SuggestionList.default, {
props: {
itemComponent: vue.markRaw(ChannelSuggestion.default),
itemType: "channel",
...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: [hide_on_esc.default]
});
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;
}
};
}
};
exports.default = channelSuggestion;
//# sourceMappingURL=suggestion.cjs.map