@weavy/uikit-react 14.0.0 → 14.0.1

package/package.json

@@ -1,32 +1,32 @@
 {
   "name": "@weavy/uikit-react",
-  "version": "14.0.0",
+  "version": "14.0.1",
   "author": "Weavy",
   "description": "React UI-kit for Weavy",
   "homepage": "https://github.com/weavy/weavy-uikit-react",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "types": "./dist/cjs/types/index.d.ts",
+  "types": "./dist/cjs/types/types.d.ts",
   "style": "dist/css/weavy-react.css",
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-typescript": "^8.3.1",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.1.0",
+    "@rollup/plugin-typescript": "^9.0.2",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.throttle": "^4.1.7",
-    "@types/react": "^18.0.8",
-    "@types/react-dom": "^18.0.3",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.8",
     "@types/react-modal": "^3.13.1",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",
-    "rollup": "^2.72.0",
-    "rollup-plugin-dts": "^4.2.1",
+    "rollup": "^3.2.5",
+    "rollup-plugin-dts": "^5.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.53.0",
-    "tslib": "^2.4.0",
-    "typescript": "^4.6.4"
+    "sass": "^1.56.0",
+    "tslib": "^2.4.1",
+    "typescript": "^4.8.4"
   },
   "peerDependencies": {
     "react": "^18.1.0",
@@ -47,11 +47,14 @@
     "@microsoft/signalr": "^6.0.3",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.1",
-    "emoji-toolkit": "^6.6.0",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "pdfjs-dist": "^2.16.105",
     "react-modal": "^3.14.4",
     "react-query": "^3.34.16"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=8.0.0"
   }
 }

package/{rollup.config.js → rollup.config.mjs}

@@ -2,10 +2,17 @@ import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import typescript from "@rollup/plugin-typescript";
 import dts from "rollup-plugin-dts";
-import { terser } from "rollup-plugin-terser";
+import terser from "@rollup/plugin-terser";
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 
-const packageJson = require("./package.json");
+//import packageJson from `./package.json` assert { type: `json` };
+
+//const packageJson = require("./package.json");
+const { default: packageJson } = await import("./package.json", {
+    assert: {
+      type: "json",
+    },
+  });
 
 export default [
     {
@@ -34,7 +41,7 @@ export default [
         external: ["react", "react-dom"]
     },
     {
-        input: "dist/esm/types/index.d.ts",
+        input: "dist/esm/index.d.ts",
         output: [{ file: "dist/index.d.ts", format: "esm" }],
         plugins: [dts()],
     },

package/src/components/ConversationListItem.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useContext, useEffect } from 'react';
-import joypixels from 'emoji-toolkit';
 import dayjs from 'dayjs';
 import { MessengerContext } from '../contexts/MessengerContext';
 import { WeavyContext } from '../contexts/WeavyContext';
@@ -25,6 +24,26 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
     const removeMembers = useMutateRemoveMembers();
     const date = dayjs.utc(item.last_message?.created_at).tz(dayjs.tz.guess());
 
+    
+    // extract and keep all emojis
+    const emojiHtml = item.last_message?.html || '';
+    const emojiRegexp = /<img[^>]+wy-emoji.+>/g;
+    const emojiShortcodeRegexp = /title=\"(:[^:\s]+:)\"/;
+    const messageEmojis: { [index: string]: string } = {};
+
+    emojiHtml.match(emojiRegexp)?.forEach((imgEmoji) => {
+        let shortCode = imgEmoji.match(emojiShortcodeRegexp)![1];
+
+        if (shortCode) {
+            messageEmojis[shortCode] = imgEmoji;
+        }
+    });
+
+    // replace text shortcodes with extracted emojis
+    const shortCodeRegexp = /:[^:\s]*(?:::[^:\s]*)*:/gi;
+    const itemSnippet = (item.last_message?.text || '').replace(shortCodeRegexp, (shortCode) => messageEmojis[shortCode]);
+    
+
     const ChatRoom = "edb400ac-839b-45a7-b2a8-6a01820d1c44";
 
     const handleClick = (e: React.MouseEvent<HTMLDivElement>, id: any) => {
@@ -110,10 +129,10 @@ const ConversationListItem = ({ item, refetchConversations }: ConversationListIt
                     <div className="wy-item-text">
                         <Typing id={item.id} context="listitem">
 
-                            {item.last_message?.html &&
-                                <span className="wy-typing-hide" dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(item.last_message?.text) }}></span>
+                            {itemSnippet &&
+                                <span className="wy-typing-hide" dangerouslySetInnerHTML={{ __html: itemSnippet }}></span>
                             }
-                            {!item.last_message?.html &&
+                            {!itemSnippet &&
                                 <span className="wy-typing-hide">
                                     {item.last_message?.attachment_ids?.length > 0 &&
                                         <Icon.UI name="attachment" size={1} />

package/src/components/Image.tsx

@@ -84,8 +84,9 @@ export const ImageGrid = ({ children, limit = 3}: ImageGridProps) => {
     let lastChild = firstImages[firstImages.length - 1];
 
     if (React.isValidElement(lastChild)) {
+        let lastChildProps: { more: number } = { more };
         // Set more property on last image    
-        firstImages[firstImages.length - 1] = React.cloneElement(lastChild, { more });
+        firstImages[firstImages.length - 1] = React.cloneElement(lastChild, lastChildProps);
     }
 
     return (        

package/src/components/Message.tsx

@@ -3,7 +3,6 @@ import dayjs from 'dayjs';
 import { MessageProps } from "../types/Message"
 import Attachment from './Attachment';
 import { ReactionsMenu, ReactionsList } from './Reactions';
-import joypixels from 'emoji-toolkit';
 import { Image, ImageGrid } from "./Image"
 import SeenBy from './SeenBy';
 import Avatar from "./Avatar";
@@ -53,7 +52,7 @@ const Message: FC<MessageProps> = ({ id, html, temp, me, avatar, name, created_a
                                     )}
                                 </ImageGrid>}
 
-                                {html && <div className="wy-content" dangerouslySetInnerHTML={{ __html: joypixels.shortnameToUnicode(html || "") }}></div>}
+                                {html && <div className="wy-content" dangerouslySetInnerHTML={{ __html: html || "" }}></div>}
 
                                 {meeting &&
                                     <MeetingCard meeting={meeting} />

package/src/scss/theme/_image-grid.scss

@@ -20,8 +20,6 @@
     flex: auto;
     background-color: inherit;
     background-clip: content-box;
-    min-width: max(25%, 4rem);
-    min-height: 4rem;
 
     // 1 of not 2
     &:first-of-type:not(:nth-last-of-type(2)) {

package/src/utils/infiniteScroll.js

@@ -6,7 +6,7 @@
  * @returns IntersectionObserver
  */
  export function createScroller(observeElement, whenNext) {
-    console.log("creating regular scroller");
+    //console.log("creating regular scroller");
     var parent = getScrollParent(observeElement);
 
     // Disable scroll anchoring https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring

package/src/utils/postal-parent.js

@@ -362,7 +362,7 @@ function WeavyPostal(options) {
 
     function setLeader() {
         if (_whenLeader.state() === "pending") {
-            console.debug("Is leader");
+            //console.debug("Is leader");
             _isLeader = true;
             _whenLeader.resolve(_isLeader);
         }

package/src/utils/scrollbarDetection.js

@@ -64,7 +64,7 @@ export function checkScrollbarAdjust(entries) {
   for (var entry in entries) {
     let target = entries[entry].target;
     let targetStyle = getComputedStyle(target);
-    console.log("checking scrollbar adjust", target)
+    //console.log("checking scrollbar adjust", target)
     if (target.dataset.adjustScrollbarTop !== undefined) {
       scrollbarClassnameTarget.style.setProperty('--wy-scrollbar-adjust-top', targetStyle.height);
     }
@@ -78,11 +78,11 @@ export function checkScrollbarAdjust(entries) {
  * Creates a scrollbar adjustment observer.
  */
 export function detectScrollbarAdjustments() {
-  console.log("detect scrollbar adjust");
+  //console.log("detect scrollbar adjust");
   var adjustRO = new ResizeObserver(checkScrollbarAdjust);
   
   const registerAdjustmentElements = () => {
-    console.log("register scrollbar adjust");
+    //console.log("register scrollbar adjust");
 
     scrollbarClassnameTarget.style.removeProperty('--wy-scrollbar-adjust-top');
     scrollbarClassnameTarget.style.removeProperty('--wy-scrollbar-adjust-bottom');
@@ -102,6 +102,9 @@ export function detectScrollbarAdjustments() {
   requestAnimationFrame(registerAdjustmentElements);
   setTimeout(registerAdjustmentElements, 5000);
 
-  var adjustMO = new MutationObserver(throttle(registerAdjustmentElements, 1));
-  adjustMO.observe(scrollbarClassnameTarget);
+  var adjustMO = new MutationObserver(throttle(registerAdjustmentElements, 100));
+  adjustMO.observe(scrollbarClassnameTarget, {
+    childList: true,
+    subtree: true
+  });
 }