@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
108 lines (107 loc) • 3.42 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue2 = require("@tiptap/vue-2");
const dialtoneEmojis = require("@dialpad/dialtone-emojis");
const SuggestionList = require("../suggestion/SuggestionList.vue.cjs");
const EmojiSuggestion = require("./EmojiSuggestion.vue.cjs");
const tippy = require("tippy.js");
const hide_on_esc = require("../tippy_plugins/hide_on_esc.cjs");
const suggestionLimit = 20;
const suggestionOptions = {
items: ({ query }) => {
if (query.length < 2) {
return [];
}
const emojiList = Object.values(dialtoneEmojis.emojisIndexed);
query = query.toLowerCase();
const filteredEmoji = emojiList.filter(
(item) => [
item.name,
item.shortname.replaceAll(":", ""),
...item.keywords
].some((text) => text.startsWith(query))
).splice(0, suggestionLimit);
return filteredEmoji.map((item) => ({ code: item.shortname }));
},
command: ({ editor, range, props }) => {
var _a, _b;
const nodeAfter = editor.view.state.selection.$to.nodeAfter;
const overrideSpace = (_a = nodeAfter == null ? void 0 : nodeAfter.text) == null ? void 0 : _a.startsWith(" ");
if (overrideSpace) {
range.to += 1;
}
editor.chain().focus().insertContentAt(range, [
{
type: "emoji",
attrs: props
}
]).run();
(_b = window.getSelection()) == null ? void 0 : _b.collapseToEnd();
},
render: () => {
let component;
let popup;
let popupIsOpen = false;
return {
onStart: (props) => {
component = new vue2.VueRenderer(SuggestionList.default, {
parent: void 0,
propsData: {
itemComponent: EmojiSuggestion.default,
itemType: "emoji",
...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();
}
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 = suggestionOptions;
//# sourceMappingURL=suggestion.cjs.map