@yh-ui/components 0.1.0

package/dist/mention/__tests__/mention.test.mjs

@@ -0,0 +1,523 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import Mention from "../src/mention.vue";
+const mockOptions = [
+  { value: "alice", label: "Alice", description: "\u524D\u7AEF\u5DE5\u7A0B\u5E08" },
+  { value: "bob", label: "Bob", description: "\u540E\u7AEF\u5DE5\u7A0B\u5E08" },
+  { value: "charlie", label: "Charlie", disabled: true },
+  { value: "diana", label: "Diana", avatar: "https://example.com/avatar.jpg", group: "VIP" },
+  { value: "evan", label: "Evan", group: "VIP" }
+];
+import { mentionPlacements, mentionSizes, mentionSplits } from "../src/mention.mjs";
+describe("Mention Constants Coverage", () => {
+  it("should have constants defined", () => {
+    expect(mentionPlacements).toContain("top");
+    expect(mentionSizes).toContain("default");
+    expect(mentionSplits).toContain("@");
+  });
+});
+describe("YhMention \u57FA\u7840\u6E32\u67D3", () => {
+  it("\u5E94\u8BE5\u6B63\u786E\u6E32\u67D3\u6839\u5143\u7D20", () => {
+    const wrapper = mount(Mention);
+    expect(wrapper.classes()).toContain("yh-mention");
+  });
+  it("\u5E94\u8BE5\u6E32\u67D3 input \u7C7B\u578B", () => {
+    const wrapper = mount(Mention, { props: { type: "input" } });
+    expect(wrapper.find("input").exists()).toBe(true);
+    expect(wrapper.find("textarea").exists()).toBe(false);
+  });
+  it("\u5E94\u8BE5\u6E32\u67D3 textarea \u7C7B\u578B", () => {
+    const wrapper = mount(Mention, { props: { type: "textarea" } });
+    expect(wrapper.find("textarea").exists()).toBe(true);
+    expect(wrapper.find("input").exists()).toBe(false);
+    expect(wrapper.classes()).toContain("is-textarea");
+  });
+  it("\u5E94\u8BE5\u6E32\u67D3 placeholder", () => {
+    const wrapper = mount(Mention, { props: { placeholder: "\u8F93\u5165 @ \u63D0\u53CA" } });
+    const input = wrapper.find("input");
+    expect(input.attributes("placeholder")).toBe("\u8F93\u5165 @ \u63D0\u53CA");
+  });
+  it("\u7981\u7528\u72B6\u6001\u5E94\u6DFB\u52A0 is-disabled class", () => {
+    const wrapper = mount(Mention, { props: { disabled: true } });
+    expect(wrapper.classes()).toContain("is-disabled");
+    expect(wrapper.find("input").attributes("disabled")).toBeDefined();
+  });
+  it("\u53EA\u8BFB\u72B6\u6001\u5E94\u8BBE\u7F6E readonly \u5C5E\u6027", () => {
+    const wrapper = mount(Mention, { props: { readonly: true } });
+    expect(wrapper.find("input").attributes("readonly")).toBeDefined();
+  });
+  it("\u5C3A\u5BF8 large \u5E94\u6DFB\u52A0\u5BF9\u5E94 class", () => {
+    const wrapper = mount(Mention, { props: { size: "large" } });
+    expect(wrapper.classes()).toContain("yh-mention--large");
+  });
+  it("\u5C3A\u5BF8 small \u5E94\u6DFB\u52A0\u5BF9\u5E94 class", () => {
+    const wrapper = mount(Mention, { props: { size: "small" } });
+    expect(wrapper.classes()).toContain("yh-mention--small");
+  });
+});
+describe("YhMention v-model", () => {
+  it("\u5E94\u8BE5\u7ED1\u5B9A\u5E76\u54CD\u5E94 modelValue", async () => {
+    const wrapper = mount(Mention, {
+      props: {
+        modelValue: "hello",
+        "onUpdate:modelValue": (val) => wrapper.setProps({ modelValue: val })
+      }
+    });
+    expect(wrapper.find("input").element.value).toBe("hello");
+    await wrapper.find("input").setValue("world");
+    expect(wrapper.props("modelValue")).toBe("world");
+  });
+  it("\u8F93\u5165\u65F6\u5E94\u89E6\u53D1 input \u4E8B\u4EF6", async () => {
+    const wrapper = mount(Mention, { props: { modelValue: "" } });
+    await wrapper.find("input").trigger("input");
+    expect(wrapper.emitted("input")).toBeTruthy();
+  });
+});
+describe("YhMention \u89E6\u53D1\u673A\u5236", () => {
+  it("\u8F93\u5165 @ \u540E\u5E94\u6253\u5F00\u4E0B\u62C9\u6846", async () => {
+    const wrapper = mount(Mention, {
+      props: { modelValue: "", options: mockOptions, debounce: 0, teleported: false },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    expect(wrapper.emitted("search")).toBeTruthy();
+    const searchEvent = wrapper.emitted("search");
+    expect(searchEvent[0][1]).toBe("@");
+  });
+  it("\u652F\u6301\u81EA\u5B9A\u4E49\u89E6\u53D1\u7B26 #", async () => {
+    const wrapper = mount(Mention, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        triggers: ["#"],
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("#");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    const searchEvent = wrapper.emitted("search");
+    expect(searchEvent?.[0]?.[1]).toBe("#");
+  });
+  it("\u8F93\u5165\u7A7A\u683C\u540E\u5E94\u5173\u95ED\u4E0B\u62C9\u6846", async () => {
+    const wrapper = mount(Mention, {
+      props: { modelValue: "@alice ", options: mockOptions, debounce: 0, teleported: false },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@alice ");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    expect(wrapper.emitted("open")).toBeFalsy();
+  });
+});
+describe("YhMention \u8FC7\u6EE4\u9009\u9879", () => {
+  it("\u9ED8\u8BA4\u5E94\u6309 label \u8FC7\u6EE4", async () => {
+    const wrapper = mount(Mention, {
+      props: { modelValue: "@al", options: mockOptions, debounce: 0, teleported: false },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@al");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    const searchEvents = wrapper.emitted("search");
+    const keyword = searchEvents?.[searchEvents.length - 1]?.[0];
+    expect(keyword).toBe("al");
+  });
+  it("filterOption=false \u65F6\u5E94\u663E\u793A\u5168\u90E8\u9009\u9879", async () => {
+    const wrapper = mount(Mention, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    const opts = wrapper.findAll(".yh-mention__option");
+    expect(opts.length).toBe(mockOptions.length);
+  });
+  it("\u81EA\u5B9A\u4E49 filterOption \u5E94\u6309\u81EA\u5B9A\u4E49\u903B\u8F91\u8FC7\u6EE4", async () => {
+    const customFilter = vi.fn(
+      (keyword, opt) => opt.value.startsWith(keyword)
+    );
+    const wrapper = mount(Mention, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        filterOption: customFilter,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@a");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    expect(customFilter).toHaveBeenCalled();
+  });
+});
+describe("YhMention \u9009\u4E2D\u9009\u9879", () => {
+  it("\u70B9\u51FB\u9009\u9879\u5E94\u66F4\u65B0 modelValue \u5E76\u89E6\u53D1 select \u4E8B\u4EF6", async () => {
+    const wrapper = mount(Mention, {
+      props: {
+        modelValue: "",
+        options: [{ value: "alice", label: "Alice" }],
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const inputEl = wrapper.find("input").element;
+    inputEl.focus();
+    inputEl.value = "@";
+    inputEl.setSelectionRange(1, 1);
+    await wrapper.find("input").trigger("input");
+    await new Promise((r) => setTimeout(r, 100));
+    await nextTick();
+    const opt = wrapper.find(".yh-mention__option");
+    expect(opt.exists()).toBe(true);
+    if (opt.exists()) {
+      await opt.trigger("mousedown");
+      await opt.trigger("click");
+      await nextTick();
+      expect(wrapper.emitted("select")).toBeTruthy();
+      const selectArgs = wrapper.emitted("select")?.[0];
+      expect(selectArgs[0]).toMatchObject({ value: "alice" });
+    }
+  });
+  it("\u7981\u7528\u9009\u9879\u4E0D\u5E94\u88AB\u9009\u4E2D", async () => {
+    const wrapper = mount(Mention, {
+      props: {
+        modelValue: "",
+        options: [{ value: "charlie", label: "Charlie", disabled: true }],
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    const opt = wrapper.find(".yh-mention__option.is-disabled");
+    if (opt.exists()) {
+      await opt.trigger("click");
+      expect(wrapper.emitted("select")).toBeFalsy();
+    }
+  });
+});
+describe("YhMention \u952E\u76D8\u5BFC\u822A", () => {
+  it("ArrowDown \u5E94\u9AD8\u4EAE\u4E0B\u4E00\u9879", async () => {
+    const wrapper = mount(Mention, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    await input.trigger("keydown", { key: "ArrowDown" });
+    await nextTick();
+    const highlighted = wrapper.find(".yh-mention__option.is-highlighted");
+    expect(highlighted.exists()).toBe(true);
+  });
+  it("Escape \u5E94\u5173\u95ED\u4E0B\u62C9\u6846", async () => {
+    const wrapper = mount(Mention, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    await input.trigger("keydown", { key: "Escape" });
+    await nextTick();
+    expect(wrapper.emitted("close")).toBeTruthy();
+  });
+  it("Enter \u5E94\u9009\u4E2D\u9AD8\u4EAE\u9879", async () => {
+    const wrapper = mount(Mention, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    await input.trigger("keydown", { key: "ArrowDown" });
+    await nextTick();
+    await input.trigger("keydown", { key: "Enter" });
+    await nextTick();
+    const selectEmitted = wrapper.emitted("select");
+    const updateEmitted = wrapper.emitted("update:modelValue");
+    expect(selectEmitted || updateEmitted).toBeTruthy();
+  });
+});
+describe("YhMention \u53EF\u6E05\u7A7A", () => {
+  it("\u6709\u503C\u4E14 clearable \u65F6\uFF0C\u805A\u7126\u540E\u5E94\u663E\u793A\u6E05\u7A7A\u6309\u94AE", async () => {
+    const wrapper = mount(Mention, {
+      props: { modelValue: "@alice", clearable: true }
+    });
+    await wrapper.find("input").trigger("focus");
+    await nextTick();
+    expect(wrapper.find(".yh-mention__clear").exists()).toBe(true);
+  });
+  it("\u70B9\u51FB\u6E05\u7A7A\u6309\u94AE\u5E94\u6E05\u7A7A modelValue \u5E76\u89E6\u53D1 clear \u4E8B\u4EF6", async () => {
+    const wrapper = mount(Mention, {
+      props: { modelValue: "@alice", clearable: true }
+    });
+    await wrapper.find("input").trigger("focus");
+    await nextTick();
+    const clearBtn = wrapper.find(".yh-mention__clear");
+    if (clearBtn.exists()) {
+      await clearBtn.trigger("click");
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([""]);
+      expect(wrapper.emitted("clear")).toBeTruthy();
+    }
+  });
+});
+describe("YhMention \u5B57\u6570\u7EDF\u8BA1", () => {
+  it("showWordLimit \u5E94\u663E\u793A\u5B57\u6570\u7EDF\u8BA1", () => {
+    const wrapper = mount(Mention, {
+      props: { modelValue: "hello @world", showWordLimit: true, maxlength: 50 }
+    });
+    expect(wrapper.find(".yh-mention__count").exists()).toBe(true);
+    expect(wrapper.find(".yh-mention__count").text()).toContain("12 / 50");
+  });
+});
+describe("YhMention \u63D2\u69FD", () => {
+  it("\u5E94\u8BE5\u6E32\u67D3 prefix \u63D2\u69FD", () => {
+    const wrapper = mount(Mention, {
+      slots: { prefix: '<span class="custom-prefix">@</span>' }
+    });
+    expect(wrapper.find(".custom-prefix").exists()).toBe(true);
+  });
+  it("\u5E94\u8BE5\u6E32\u67D3 suffix \u63D2\u69FD", () => {
+    const wrapper = mount(Mention, {
+      slots: { suffix: '<span class="custom-suffix">\u2713</span>' }
+    });
+    expect(wrapper.find(".custom-suffix").exists()).toBe(true);
+  });
+  it("\u5E94\u8BE5\u6E32\u67D3 option \u63D2\u69FD", async () => {
+    const wrapper = mount(Mention, {
+      props: {
+        modelValue: "",
+        options: [{ value: "alice", label: "Alice" }],
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      slots: {
+        option: '<template #option="{ option }"><span class="custom-opt">{{ option.label }}</span></template>'
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    expect(
+      wrapper.find(".custom-opt").exists() || wrapper.find(".yh-mention__option").exists()
+    ).toBe(true);
+  });
+  it("\u5E94\u8BE5\u6E32\u67D3\u7A7A\u6570\u636E empty \u63D2\u69FD", async () => {
+    const wrapper = mount(Mention, {
+      props: { modelValue: "", options: [], debounce: 0, teleported: false },
+      slots: { empty: '<span class="custom-empty">\u6CA1\u6709\u4EBA</span>' },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    expect(wrapper.find(".custom-empty").exists()).toBe(true);
+  });
+});
+describe("YhMention expose API", () => {
+  it("focus \u65B9\u6CD5\u5E94\u4F7F\u8F93\u5165\u6846\u805A\u7126", async () => {
+    const wrapper = mount(Mention, { attachTo: document.body });
+    const vm = wrapper.vm;
+    expect(typeof vm.focus).toBe("function");
+  });
+  it("blur \u65B9\u6CD5\u5E94\u5B58\u5728", () => {
+    const wrapper = mount(Mention);
+    const vm = wrapper.vm;
+    expect(typeof vm.blur).toBe("function");
+  });
+  it("clear \u65B9\u6CD5\u5E94\u6E05\u7A7A\u5185\u5BB9", async () => {
+    const wrapper = mount(Mention, {
+      props: { modelValue: "@alice" }
+    });
+    const vm = wrapper.vm;
+    vm.clear();
+    await nextTick();
+    expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([""]);
+  });
+  it("insertMention \u65B9\u6CD5\u5E94\u63D2\u5165\u6587\u672C", async () => {
+    const wrapper = mount(Mention, { props: { modelValue: "\u4F60\u597D " } });
+    const vm = wrapper.vm;
+    vm.insertMention({ value: "alice", label: "Alice" }, "@");
+    await nextTick();
+    const updatedVal = wrapper.emitted("update:modelValue")?.[0]?.[0];
+    expect(updatedVal).toContain("@Alice");
+  });
+});
+describe("YhMention \u5206\u7EC4", () => {
+  it("\u6709 group \u6807\u8BC6\u7684\u9009\u9879\u5E94\u663E\u793A\u5206\u7EC4\u6807\u9898", async () => {
+    const wrapper = mount(Mention, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    const groupLabel = wrapper.find(".yh-mention__group-label");
+    expect(groupLabel.exists()).toBe(true);
+    expect(groupLabel.text()).toBe("VIP");
+  });
+});
+describe("YhMention \u9009\u9879\u5934\u50CF", () => {
+  it("\u6709 avatar \u7684\u9009\u9879\u5E94\u6E32\u67D3 img \u5143\u7D20", async () => {
+    const wrapper = mount(Mention, {
+      props: {
+        modelValue: "",
+        options: [{ value: "diana", label: "Diana", avatar: "https://example.com/avatar.jpg" }],
+        filterOption: false,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    const img = wrapper.find(".yh-mention__option-avatar");
+    expect(img.exists()).toBe(true);
+    expect(img.attributes("src")).toBe("https://example.com/avatar.jpg");
+  });
+});
+describe("YhMention \u591A\u89E6\u53D1\u7B26", () => {
+  it("\u652F\u6301\u540C\u65F6\u914D\u7F6E @ \u548C # \u89E6\u53D1\u7B26", async () => {
+    const wrapper = mount(Mention, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        triggers: ["@", "#"],
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.setValue("#");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    const searchEvents = wrapper.emitted("search");
+    expect(searchEvents?.[0]?.[1]).toBe("#");
+  });
+});
+describe("YhMention \u4E8B\u4EF6", () => {
+  it("\u805A\u7126\u5E94\u89E6\u53D1 focus \u4E8B\u4EF6", async () => {
+    const wrapper = mount(Mention);
+    await wrapper.find("input").trigger("focus");
+    expect(wrapper.emitted("focus")).toBeTruthy();
+  });
+  it("\u5931\u7126\u5E94\u89E6\u53D1 blur \u4E8B\u4EF6", async () => {
+    const wrapper = mount(Mention);
+    await wrapper.find("input").trigger("focus");
+    await wrapper.find("input").trigger("blur");
+    await new Promise((r) => setTimeout(r, 200));
+    expect(wrapper.emitted("blur")).toBeTruthy();
+  });
+  it("keydown \u4E8B\u4EF6\u5E94\u900F\u4F20", async () => {
+    const wrapper = mount(Mention);
+    await wrapper.find("input").trigger("keydown", { key: "a" });
+    expect(wrapper.emitted("keydown")).toBeTruthy();
+  });
+  it("\u9ED8\u8BA4 placeholder \u5E94\u4ECE\u8BED\u8A00\u5305\u83B7\u53D6", async () => {
+    const wrapper = mount(Mention);
+    const input = wrapper.find("input");
+    expect(input.attributes("placeholder")).toBe("\u8BF7\u8F93\u5165");
+  });
+  it("\u5E94\u8BE5\u8986\u76D6 Mention.vue \u7684\u66F4\u591A\u5206\u652F", async () => {
+    const wrapper = mount(Mention, {
+      props: {
+        modelValue: "",
+        options: mockOptions,
+        debounce: 0,
+        teleported: false
+      },
+      attachTo: document.body
+    });
+    const input = wrapper.find("input");
+    await input.trigger("mouseenter");
+    await input.trigger("mouseleave");
+    await input.setValue("@");
+    await input.trigger("input");
+    await new Promise((r) => setTimeout(r, 50));
+    await nextTick();
+    await input.trigger("keydown", { key: "ArrowUp" });
+    await input.trigger("keydown", { key: "Escape" });
+    await input.trigger("keydown", { key: "Tab" });
+    document.body.click();
+    await nextTick();
+    window.dispatchEvent(new Event("resize"));
+    wrapper.unmount();
+  });
+});

package/dist/mention/index.cjs

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  YhMention: true
+};
+module.exports = exports.YhMention = void 0;
+var _utils = require("@yh-ui/utils");
+var _mention = _interopRequireDefault(require("./src/mention.vue"));
+var _mention2 = require("./src/mention.cjs");
+Object.keys(_mention2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _mention2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _mention2[key];
+    }
+  });
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const YhMention = exports.YhMention = (0, _utils.withInstall)(_mention.default);
+module.exports = YhMention;

package/dist/mention/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Mention Component
+ * @description 提及组件导出
+ */
+import Mention from './src/mention.vue';
+export declare const YhMention: any;
+export default YhMention;
+export * from './src/mention';
+export type MentionInstance = InstanceType<typeof Mention>;

package/dist/mention/index.mjs

@@ -0,0 +1,5 @@
+import { withInstall } from "@yh-ui/utils";
+import Mention from "./src/mention.vue";
+export const YhMention = withInstall(Mention);
+export default YhMention;
+export * from "./src/mention.mjs";

package/dist/mention/src/mention.cjs

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mentionSplits = exports.mentionSizes = exports.mentionPlacements = void 0;
+const mentionPlacements = exports.mentionPlacements = ["top", "bottom"];
+const mentionSizes = exports.mentionSizes = ["large", "default", "small"];
+const mentionSplits = exports.mentionSplits = ["@", "#", "$", "/", ":"];