@sex-editor/emoji 0.0.1 → 0.0.3-dev.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 sexandviolence
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,26 @@
+# @sex-editor/emoji
+
+Hello World usage:
+
+```ts
+import { createSexEditor } from "@sex-editor/core";
+import { registerEmojiPlugin } from "@sex-editor/emoji";
+
+const editor = createSexEditor("editor", {
+  language: "en",
+});
+
+registerEmojiPlugin(editor);
+```
+
+Install:
+
+```bash
+npm i @sex-editor/emoji
+```
+
+```bash
+pnpm add @sex-editor/emoji
+```
+
+License: MIT

package/dist/index.d.ts

@@ -1,6 +1,56 @@
 import { LexicalEditor } from 'lexical';
 
-declare function registerEmojiPlugin(editor: LexicalEditor): () => void;
+type EmojiCommandRange = {
+    startKey: string;
+    startOffset: number;
+    endKey: string;
+    endOffset: number;
+};
+type EmojiTriggerMatch = {
+    query: string;
+    range: EmojiCommandRange;
+};
+type EmojiMenuItem = {
+    unifiedID: string;
+    shortcode: string;
+    label: string;
+    keywords: string[];
+};
+type CustomEmojiRuleMap = Record<string, string>;
+type CustomEmojiItem = Readonly<{
+    shortcode: string;
+    unifiedID?: string;
+    emoji?: string;
+    keywords?: string[];
+    label?: string;
+}>;
+type EmojiConfig = Readonly<{
+    customEmojis?: CustomEmojiItem[];
+    customRules?: CustomEmojiRuleMap;
+}>;
+
+declare function registerEmojiPlugin(editor: LexicalEditor, config?: EmojiConfig): () => void;
+
+declare class EmojiMenuPlugin {
+    private editor;
+    private config;
+    private menuElement;
+    private selectedIndex;
+    private queryString;
+    private filteredItems;
+    private active;
+    private commandRange;
+    private disposers;
+    constructor(editor: LexicalEditor, config?: EmojiConfig);
+    register(): () => void;
+    private destroy;
+    private filterItems;
+    private showMenu;
+    private hideMenu;
+    private moveSelection;
+    private updateMenuUI;
+    private executeSelection;
+}
 
 type EmojiMatch = Readonly<{
     position: number;
@@ -9,4 +59,4 @@ type EmojiMatch = Readonly<{
 }>;
 declare function findEmoji(text: string): EmojiMatch | null;
 
-export { type EmojiMatch, findEmoji, registerEmojiPlugin };
+export { type CustomEmojiItem, type CustomEmojiRuleMap, type EmojiCommandRange, type EmojiConfig, type EmojiMatch, type EmojiMenuItem, EmojiMenuPlugin, type EmojiTriggerMatch, findEmoji, registerEmojiPlugin };

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/plugin/registerEmojiPlugin.ts
-import { TextNode } from "lexical";
-import { $createEmojiNode } from "@sex-editor/core";
+import { TextNode as TextNode2 } from "lexical";
+import { $createEmojiNode as $createEmojiNode2 } from "@sex-editor/core";
 
 // src/utils/findEmoji.ts
 import emojis from "emoji-datasource-facebook/emoji.json";
@@ -18,50 +18,503 @@ var emojiReplacementMap = emojis.reduce((acc, row) => {
   return acc;
 }, /* @__PURE__ */ new Map());
 function findEmoji(text) {
-  const skippedText = [];
-  for (const word of text.split(" ")) {
-    if (!emojiReplacementMap.has(word)) {
-      skippedText.push(word);
+  return findEmojiWithRules(text);
+}
+function findEmojiWithRules(text, customRules) {
+  const customMap = customRules && typeof customRules === "object" ? new Map(Object.entries(customRules).filter(([k, v]) => typeof k === "string" && typeof v === "string")) : null;
+  const isUnifiedID2 = (value) => /^[0-9a-fA-F]+(?:-[0-9a-fA-F]+)*$/.test(value);
+  const emojiToUnifiedID2 = (emoji) => {
+    const cps = [];
+    for (const ch of Array.from(emoji)) cps.push(ch.codePointAt(0).toString(16));
+    return cps.join("-");
+  };
+  let index = 0;
+  const words = text.split(" ");
+  for (let i = 0; i < words.length; i++) {
+    const word = words[i];
+    const position = index;
+    const rawCustom = customMap?.get(word);
+    const resolvedCustom = rawCustom ? isUnifiedID2(rawCustom) ? rawCustom : emojiToUnifiedID2(rawCustom) : null;
+    const unifiedID = resolvedCustom ?? emojiReplacementMap.get(word);
+    if (!unifiedID) {
+      index = position + word.length + 1;
       continue;
     }
-    if (skippedText.length > 0) {
-      skippedText.push("");
+    const isShortcodeLike = word.length >= 3 && word.startsWith(":") && word.endsWith(":");
+    if (!isShortcodeLike) {
+      const end = position + word.length;
+      const hasTrailingWhitespace = end < text.length && /\s/.test(text[end]);
+      if (!hasTrailingWhitespace) {
+        index = position + word.length + 1;
+        continue;
+      }
     }
     return {
-      position: skippedText.join(" ").length,
+      position,
       shortcode: word,
-      unifiedID: emojiReplacementMap.get(word)
+      unifiedID
     };
   }
   return null;
 }
 
-// src/plugin/registerEmojiPlugin.ts
-function $textNodeTransform(node) {
-  if (!node.isSimpleText() || node.hasFormat("code")) {
-    return;
+// src/plugin/EmojiMenuPlugin.ts
+import {
+  $createRangeSelection,
+  $getNodeByKey,
+  $getSelection,
+  $insertNodes,
+  $isRangeSelection,
+  $isTextNode as $isTextNode2,
+  $setSelection,
+  COMMAND_PRIORITY_LOW,
+  KEY_ARROW_DOWN_COMMAND,
+  KEY_ARROW_UP_COMMAND,
+  KEY_ENTER_COMMAND,
+  KEY_ESCAPE_COMMAND
+} from "lexical";
+import { $createEmojiNode } from "@sex-editor/core";
+
+// src/constants/emojiIndex.ts
+import emojis2 from "emoji-datasource-facebook/emoji.json";
+var unifiedToChar = (unifiedID) => {
+  const safe = typeof unifiedID === "string" && unifiedID.length ? unifiedID : "1f600";
+  return String.fromCodePoint(...safe.split("-").map((v) => parseInt(v, 16)));
+};
+var isUnifiedID = (value) => /^[0-9a-fA-F]+(?:-[0-9a-fA-F]+)*$/.test(value);
+var emojiToUnifiedID = (emoji) => {
+  const cps = [];
+  for (const ch of Array.from(emoji)) {
+    cps.push(ch.codePointAt(0).toString(16));
+  }
+  return cps.join("-");
+};
+var normalize = (s) => s.toLowerCase();
+var normalizeCustomEmojis = (custom) => {
+  if (!custom?.length) return [];
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const item of custom) {
+    const rawUnified = typeof item?.unifiedID === "string" ? item.unifiedID : "";
+    const rawEmoji = typeof item?.emoji === "string" ? item.emoji : "";
+    const unifiedID = (rawUnified && isUnifiedID(rawUnified) ? rawUnified : rawEmoji ? emojiToUnifiedID(rawEmoji) : "").toLowerCase();
+    const shortcode = String(item?.shortcode ?? "");
+    if (!unifiedID || !shortcode) continue;
+    const label = typeof item.label === "string" && item.label.length ? item.label : rawEmoji ? rawEmoji : unifiedToChar(unifiedID);
+    const keywords = Array.isArray(item.keywords) ? item.keywords.filter((k) => typeof k === "string") : [];
+    const key = `${unifiedID}__${shortcode}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push({
+      unifiedID,
+      shortcode,
+      label,
+      keywords: [shortcode, ...keywords]
+    });
+  }
+  return out;
+};
+var buildEmojiIndex = () => {
+  const items = [];
+  for (const row of emojis2) {
+    if (!row?.has_img_facebook) continue;
+    const unifiedID = String(row.unified ?? "").toLowerCase();
+    const shortName = String(row.short_name ?? "");
+    if (!unifiedID || !shortName) continue;
+    const label = unifiedToChar(unifiedID);
+    const keywordsSet = /* @__PURE__ */ new Set();
+    keywordsSet.add(shortName);
+    if (Array.isArray(row.short_names)) row.short_names.forEach((s) => typeof s === "string" && keywordsSet.add(s));
+    if (typeof row.name === "string") keywordsSet.add(row.name);
+    if (typeof row.category === "string") keywordsSet.add(row.category);
+    items.push({
+      unifiedID,
+      shortcode: shortName,
+      label,
+      keywords: Array.from(keywordsSet)
+    });
+  }
+  return items;
+};
+var EMOJI_ITEMS = buildEmojiIndex();
+var searchEmojis = (query, limit, customEmojis) => {
+  const q = normalize(query.trim());
+  const customItems = normalizeCustomEmojis(customEmojis);
+  if (!q) {
+    const head = customItems.slice(0, limit);
+    if (head.length >= limit) return head;
+    return head.concat(EMOJI_ITEMS.slice(0, limit - head.length));
+  }
+  const results = [];
+  for (const item of customItems) {
+    if (normalize(item.shortcode).includes(q) || item.keywords.some((k) => normalize(k).includes(q))) {
+      results.push(item);
+      if (results.length >= limit) return results;
+    }
   }
-  const text = node.getTextContent();
-  const emojiMatch = findEmoji(text);
-  if (emojiMatch === null) {
+  for (const item of EMOJI_ITEMS) {
+    if (normalize(item.shortcode).includes(q)) {
+      results.push(item);
+      if (results.length >= limit) break;
+      continue;
+    }
+    const hit = item.keywords.some((k) => normalize(k).includes(q));
+    if (hit) {
+      results.push(item);
+      if (results.length >= limit) break;
+    }
+  }
+  return results;
+};
+
+// src/utils/getEmojiMatch.ts
+import { $isElementNode, $isTextNode } from "lexical";
+var collectTextNodes = (node, out) => {
+  if ($isTextNode(node)) {
+    out.push(node);
     return;
   }
-  let targetNode;
-  if (emojiMatch.position === 0) {
-    [targetNode] = node.splitText(emojiMatch.position + emojiMatch.shortcode.length);
-  } else {
-    [, targetNode] = node.splitText(
-      emojiMatch.position,
-      emojiMatch.position + emojiMatch.shortcode.length
+  if ($isElementNode(node)) {
+    const children = node.getChildren();
+    for (const child of children) collectTextNodes(child, out);
+  }
+};
+var isValidQuery = (query) => {
+  if (query.length === 0) return true;
+  return /^[a-zA-Z0-9_+\-]*$/.test(query);
+};
+var getEmojiMatch = (selection) => {
+  const anchorNode = selection.anchor.getNode();
+  if (!$isTextNode(anchorNode)) return null;
+  if (!anchorNode.isSimpleText() || anchorNode.hasFormat("code")) return null;
+  const block = anchorNode.getTopLevelElement();
+  if (!block) return null;
+  const textNodes = [];
+  collectTextNodes(block, textNodes);
+  if (textNodes.length === 0) return null;
+  let cursorIndex = null;
+  let running = 0;
+  for (const n of textNodes) {
+    if (n.getKey() === anchorNode.getKey()) {
+      cursorIndex = running + selection.anchor.offset;
+      break;
+    }
+    running += n.getTextContentSize();
+  }
+  if (cursorIndex === null) return null;
+  const blockText = block.getTextContent();
+  const beforeCursor = blockText.slice(0, cursorIndex);
+  const colonIndex = beforeCursor.lastIndexOf(":");
+  if (colonIndex === -1) return null;
+  const prevChar = colonIndex > 0 ? beforeCursor[colonIndex - 1] : "";
+  if (prevChar && /[a-zA-Z0-9]/.test(prevChar)) return null;
+  const query = beforeCursor.slice(colonIndex + 1);
+  if (/\s/.test(query)) return null;
+  if (!isValidQuery(query)) return null;
+  const indexToPoint = (index) => {
+    let remaining = index;
+    for (const n of textNodes) {
+      const size = n.getTextContentSize();
+      if (remaining <= size) return { key: n.getKey(), offset: remaining };
+      remaining -= size;
+    }
+    const last = textNodes[textNodes.length - 1];
+    return { key: last.getKey(), offset: last.getTextContentSize() };
+  };
+  const start = indexToPoint(colonIndex);
+  const end = indexToPoint(cursorIndex);
+  if (!start || !end) return null;
+  return {
+    query,
+    range: {
+      startKey: start.key,
+      startOffset: start.offset,
+      endKey: end.key,
+      endOffset: end.offset
+    }
+  };
+};
+
+// src/plugin/EmojiMenuPlugin.ts
+var EmojiMenuPlugin = class {
+  constructor(editor, config) {
+    this.menuElement = null;
+    this.selectedIndex = 0;
+    this.queryString = null;
+    this.filteredItems = [];
+    this.active = false;
+    this.commandRange = null;
+    this.disposers = [];
+    this.editor = editor;
+    this.config = config;
+  }
+  register() {
+    const unregUpdate = this.editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed()) {
+          this.hideMenu();
+          return;
+        }
+        const match = getEmojiMatch(selection);
+        if (!match) {
+          this.hideMenu();
+          return;
+        }
+        this.queryString = match.query;
+        this.commandRange = match.range;
+        this.showMenu(selection);
+      });
+    });
+    this.disposers.push(unregUpdate);
+    this.disposers.push(
+      this.editor.registerCommand(
+        KEY_ARROW_UP_COMMAND,
+        (event) => {
+          if (!this.active) return false;
+          event.preventDefault();
+          this.moveSelection(-1);
+          return true;
+        },
+        COMMAND_PRIORITY_LOW
+      )
     );
+    this.disposers.push(
+      this.editor.registerCommand(
+        KEY_ARROW_DOWN_COMMAND,
+        (event) => {
+          if (!this.active) return false;
+          event.preventDefault();
+          this.moveSelection(1);
+          return true;
+        },
+        COMMAND_PRIORITY_LOW
+      )
+    );
+    this.disposers.push(
+      this.editor.registerCommand(
+        KEY_ENTER_COMMAND,
+        (event) => {
+          if (!this.active) return false;
+          event?.preventDefault();
+          this.executeSelection();
+          return true;
+        },
+        COMMAND_PRIORITY_LOW
+      )
+    );
+    this.disposers.push(
+      this.editor.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        (event) => {
+          if (!this.active) return false;
+          event.preventDefault();
+          this.hideMenu();
+          return true;
+        },
+        COMMAND_PRIORITY_LOW
+      )
+    );
+    return () => this.destroy();
+  }
+  destroy() {
+    this.hideMenu(true);
+    for (const dispose of this.disposers) dispose();
+    this.disposers = [];
+  }
+  filterItems() {
+    const q = this.queryString ?? "";
+    this.filteredItems = searchEmojis(q, 60, this.config?.customEmojis);
+  }
+  showMenu(selection) {
+    if (typeof document === "undefined") return;
+    this.active = true;
+    this.filterItems();
+    if (this.filteredItems.length === 0) {
+      this.hideMenu();
+      return;
+    }
+    if (this.selectedIndex >= this.filteredItems.length) this.selectedIndex = 0;
+    if (!this.menuElement) {
+      this.menuElement = document.createElement("div");
+      this.menuElement.className = "sex-emoji-menu";
+      document.body.appendChild(this.menuElement);
+    }
+    this.menuElement.innerHTML = "";
+    this.menuElement.style.display = "block";
+    this.filteredItems.forEach((item, index) => {
+      const el = document.createElement("div");
+      el.className = `sex-emoji-menu-item ${index === this.selectedIndex ? "selected" : ""}`;
+      el.innerHTML = `
+        <span class="sex-emoji-menu-icon">${item.label}</span>
+        <span class="sex-emoji-menu-label">:${item.shortcode}:</span>
+      `;
+      el.onclick = () => {
+        this.selectedIndex = index;
+        this.executeSelection();
+      };
+      this.menuElement?.appendChild(el);
+    });
+    const domSelection = window.getSelection();
+    if (domSelection && domSelection.rangeCount > 0) {
+      const range = domSelection.getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+      if (this.menuElement) {
+        this.menuElement.style.top = `${rect.bottom + window.scrollY + 6}px`;
+        this.menuElement.style.left = `${rect.left + window.scrollX}px`;
+      }
+    }
+  }
+  hideMenu(remove = false) {
+    this.active = false;
+    this.queryString = null;
+    this.selectedIndex = 0;
+    this.commandRange = null;
+    if (!this.menuElement) return;
+    if (remove) {
+      this.menuElement.remove();
+      this.menuElement = null;
+      return;
+    }
+    this.menuElement.style.display = "none";
+  }
+  moveSelection(delta) {
+    this.selectedIndex += delta;
+    if (this.selectedIndex < 0) this.selectedIndex = this.filteredItems.length - 1;
+    else if (this.selectedIndex >= this.filteredItems.length) this.selectedIndex = 0;
+    this.updateMenuUI();
   }
-  const emojiNode = $createEmojiNode(emojiMatch.unifiedID);
-  targetNode.replace(emojiNode);
+  updateMenuUI() {
+    if (!this.menuElement) return;
+    const items = this.menuElement.querySelectorAll(".sex-emoji-menu-item");
+    items.forEach((item, index) => {
+      if (index === this.selectedIndex) {
+        item.classList.add("selected");
+        item.scrollIntoView({ block: "nearest" });
+      } else {
+        item.classList.remove("selected");
+      }
+    });
+  }
+  executeSelection() {
+    const item = this.filteredItems[this.selectedIndex];
+    if (!item) return;
+    const commandRange = this.commandRange;
+    this.hideMenu();
+    this.editor.update(
+      () => {
+        if (!commandRange) return;
+        const startNode = $getNodeByKey(commandRange.startKey);
+        const endNode = $getNodeByKey(commandRange.endKey);
+        if (!startNode || !endNode) return;
+        if (!$isTextNode2(startNode) || !$isTextNode2(endNode)) return;
+        const rangeSelection = $createRangeSelection();
+        rangeSelection.setTextNodeRange(
+          startNode,
+          commandRange.startOffset,
+          endNode,
+          commandRange.endOffset
+        );
+        $setSelection(rangeSelection);
+        rangeSelection.removeText();
+        const emojiNode = $createEmojiNode(item.unifiedID);
+        $insertNodes([emojiNode]);
+      },
+      { discrete: true }
+    );
+  }
+};
+
+// src/plugin/registerEmojiPlugin.ts
+function registerEmojiPlugin(editor, config = {}) {
+  const menuPlugin = new EmojiMenuPlugin(editor, config);
+  const disposeMenu = menuPlugin.register();
+  const disposeTransform = editor.registerNodeTransform(TextNode2, (node) => {
+    if (!node.isSimpleText() || node.hasFormat("code")) return;
+    const text = node.getTextContent();
+    const emojiMatch = findEmojiWithRules(text, config.customRules);
+    if (emojiMatch === null) return;
+    let targetNode;
+    if (emojiMatch.position === 0) {
+      [targetNode] = node.splitText(emojiMatch.position + emojiMatch.shortcode.length);
+    } else {
+      [, targetNode] = node.splitText(emojiMatch.position, emojiMatch.position + emojiMatch.shortcode.length);
+    }
+    const emojiNode = $createEmojiNode2(emojiMatch.unifiedID);
+    targetNode.replace(emojiNode);
+  });
+  return () => {
+    disposeMenu();
+    disposeTransform();
+  };
+}
+
+// src/index.ts
+var ensureStyle = (id, cssText) => {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(id)) return;
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = cssText;
+  (document.head ?? document.documentElement).appendChild(style);
+};
+ensureStyle(
+  "sex-emoji-styles",
+  `.sex-emoji-menu {
+  position: absolute;
+  z-index: 100;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  width: 320px;
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+.sex-emoji-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #374151;
+  transition: background-color 0.2s;
 }
-function registerEmojiPlugin(editor) {
-  return editor.registerNodeTransform(TextNode, $textNodeTransform);
+
+.sex-emoji-menu-item:hover,
+.sex-emoji-menu-item.selected {
+  background-color: #f3f4f6;
+}
+
+.sex-emoji-menu-icon {
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  line-height: 1;
+  user-select: none;
+}
+
+.sex-emoji-menu-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sex-emoji-menu-hidden {
+  display: none;
 }
+`
+);
 export {
+  EmojiMenuPlugin,
   findEmoji,
   registerEmojiPlugin
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sex-editor/emoji",
-  "version": "0.0.1",
+  "version": "0.0.3-dev.0",
   "description": "",
   "type": "module",
   "main": "./dist/index.js",
@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "tsup": "8.3.5",
-    "@sex-editor/core": "0.0.2"
+    "@sex-editor/core": "0.0.3-dev.0"
   },
   "dependencies": {
     "emoji-datasource-facebook": "^16.0.0"
@@ -29,7 +29,7 @@
   "sideEffects": false,
   "keywords": [],
   "author": "",
-  "license": "ISC",
+  "license": "MIT",
   "scripts": {
     "dev": "tsup --watch",
     "build": "tsup"