@zenify-omni/chat-ui-react-js 0.1.0

package/components/chat-route/chat-box/zalo-emoji-decoration.js

@@ -0,0 +1,98 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { DecorationSet, Decoration } from "@tiptap/pm/view";
+import emojiMap from "./emojiMap.js";
+import emojiSprite__asset from "../../../assets/images/emoji.webp";
+import { assetUrl } from "../../../assets/asset-url.js";
+const emojiSprite = assetUrl(emojiSprite__asset);
+const sortedCodes = Object.keys(emojiMap).sort((a, b) => b.length - a.length);
+const EMOJI_PATTERN = "(?:" + sortedCodes.map((c) => c.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|") + ")";
+const LOWER_TO_CODE = new Map(sortedCodes.map((c) => [c.toLowerCase(), c]));
+function createEmojiWidget(code) {
+  const pos = emojiMap[code];
+  const el = document.createElement("span");
+  el.contentEditable = "false";
+  el.title = code;
+  el.style.cssText = [
+    "display:inline-block",
+    "width:20px",
+    "height:20px",
+    `background-image:url(${emojiSprite})`,
+    "background-size:5100%",
+    "background-repeat:no-repeat",
+    `background-position:${pos.x} ${pos.y}`,
+    "margin:0 2px -3px",
+    "vertical-align:middle",
+    "cursor:text",
+    "flex-shrink:0"
+  ].join(";");
+  return el;
+}
+function buildDecorations(doc) {
+  const decorations = [];
+  const regex = new RegExp(EMOJI_PATTERN, "gi");
+  doc.descendants((node, pos) => {
+    if (!node.isText) return;
+    regex.lastIndex = 0;
+    const candidates = [];
+    let match;
+    while ((match = regex.exec(node.text)) !== null) {
+      const code = LOWER_TO_CODE.get(match[0].toLowerCase());
+      if (!code) continue;
+      candidates.push({
+        start: match.index,
+        end: match.index + match[0].length,
+        code
+      });
+    }
+    if (candidates.length === 0) return;
+    const candidateStartSet = new Set(candidates.map((m) => m.start));
+    const candidateEndSet = new Set(candidates.map((m) => m.end));
+    const text = node.text;
+    for (const { start, end, code } of candidates) {
+      const beforeOk = start === 0 || /\s/.test(text[start - 1]) || candidateEndSet.has(start);
+      const afterOk = end === text.length || /\s/.test(text[end]) || candidateStartSet.has(end);
+      if (!beforeOk || !afterOk) continue;
+      const from = pos + start;
+      const to = pos + end;
+      decorations.push(
+        Decoration.widget(from, () => createEmojiWidget(code), {
+          side: -1,
+          key: `zalo-emoji-w-${from}`
+        }),
+        Decoration.inline(from, to, {
+          style: "font-size:0;color:transparent;",
+          key: `zalo-emoji-i-${from}`
+        })
+      );
+    }
+  });
+  return DecorationSet.create(doc, decorations);
+}
+const pluginKey = new PluginKey("zaloEmojiDecoration");
+const ZaloEmojiDecoration = Extension.create({
+  name: "zaloEmojiDecoration",
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: pluginKey,
+        state: {
+          init(_, { doc }) {
+            return buildDecorations(doc);
+          },
+          apply(tr, old) {
+            return tr.docChanged ? buildDecorations(tr.doc) : old;
+          }
+        },
+        props: {
+          decorations(state) {
+            return pluginKey.getState(state);
+          }
+        }
+      })
+    ];
+  }
+});
+export {
+  ZaloEmojiDecoration
+};

package/components/chat-route/chat-box/zalo-emoji-picker.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import emojiMap from "./emojiMap.js";
+import { EmojiSprite } from "./emoji-sprite.js";
+const ALL_CODES = Object.keys(emojiMap);
+function ZaloEmojiPicker({ onSelect }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: 352,
+        height: 435,
+        overflowY: "auto",
+        overflowX: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              padding: "12px 12px 4px",
+              fontSize: 13,
+              fontWeight: 500,
+              color: "#888",
+              letterSpacing: "0.02em"
+            },
+            children: "Zalo"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(9, 36px)",
+              padding: "0 6px 6px"
+            },
+            children: ALL_CODES.map((code) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                title: code,
+                onClick: () => onSelect(code),
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: 36,
+                  height: 36,
+                  border: "none",
+                  borderRadius: 6,
+                  cursor: "pointer",
+                  background: "transparent",
+                  padding: 0,
+                  transition: "background 0.1s"
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.background = "#f1f5f9";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.background = "transparent";
+                },
+                children: /* @__PURE__ */ jsx(EmojiSprite, { code, size: "picker" })
+              },
+              code
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ZaloEmojiPicker
+};