chore: core 3.8.1 api break chaneg adapt & ckeditor update

package.json

@@ -19,7 +19,8 @@
  "format": "prettier --write .",
  "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
  "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx --fix --quiet src",
- "prepare": "husky install"
+ "prepare": "husky install",
+ "postinstall": "patch-package"
  },
  "devDependencies": {
  "@commitlint/cli": "^17.4.4",
@@ -44,6 +45,7 @@
  "eslint-plugin-simple-import-sort": "^10.0.0",
  "husky": "^8.0.3",
  "lint-staged": "^13.1.2",
+ "patch-package": "^8.0.0",
  "postcss": "^8.4.21",
  "postcss-nesting": "^12.0.2",
  "prettier": "^2.8.4",
@@ -72,21 +74,14 @@
  },
  "dependencies": {
  "@ant-design/icons": "^5.1.4",
- "@ckeditor/ckeditor5-basic-styles": "^42.0.0",
- "@ckeditor/ckeditor5-editor-classic": "^42.0.0",
- "@ckeditor/ckeditor5-essentials": "^42.0.0",
- "@ckeditor/ckeditor5-image": "^42.0.0",
- "@ckeditor/ckeditor5-paragraph": "^42.0.0",
  "@ckeditor/ckeditor5-react": "^8.0.0",
- "@ckeditor/ckeditor5-theme-lark": "^42.0.0",
- "@ckeditor/vite-plugin-ckeditor5": "^0.1.3",
  "@livekit/components-react": "^2.3.1",
  "@livekit/components-styles": "^1.0.12",
- "@openim/wasm-client-sdk": "^3.8.1",
- "@tailwindcss/line-clamp": "^0.4.4",
+ "@openim/wasm-client-sdk": "^3.8.2",
  "ahooks": "^3.7.7",
- "antd": "^5.6.0",
+ "antd": "5.10.0",
  "axios": "^1.4.0",
+ "ckeditor5": "^43.0.0",
  "clsx": "^1.2.1",
  "date-fns": "^2.30.0",
  "dayjs": "^1.11.7",

patches/@ckeditor+ckeditor5-ui+43.0.0.patch

@@ -0,0 +1,42 @@
+diff --git a/node_modules/@ckeditor/ckeditor5-ui/src/editorui/poweredby.js b/node_modules/@ckeditor/ckeditor5-ui/src/editorui/poweredby.js
+index 191aba1..324f6d2 100644
+--- a/node_modules/@ckeditor/ckeditor5-ui/src/editorui/poweredby.js
++++ b/node_modules/@ckeditor/ckeditor5-ui/src/editorui/poweredby.js
+@@ -112,12 +112,9 @@ export default class PoweredBy extends /* #__PURE__ */ DomEmitterMixin() {
+ if (!this._balloonView) {
+ this._createBalloonView();
+ }
+- this._balloonView.pin(attachOptions);
++ // this._balloonView.pin(attachOptions);
+ }
+ }
+- /**
+- * Hides the "powered by" balloon if already visible.
+- */
+ _hideBalloon() {
+ if (this._balloonView) {
+ this._balloonView.unpin();
+diff --git a/node_modules/@ckeditor/ckeditor5-ui/src/icon/iconview.js b/node_modules/@ckeditor/ckeditor5-ui/src/icon/iconview.js
+index dd6d2ed..7af8e61 100644
+--- a/node_modules/@ckeditor/ckeditor5-ui/src/icon/iconview.js
++++ b/node_modules/@ckeditor/ckeditor5-ui/src/icon/iconview.js
+@@ -42,17 +42,14 @@ class IconView extends View {
+ }
+ });
+ }
+- /**
+- * @inheritDoc
+- */
+ render() {
+ super.render();
+- this._updateXMLContent();
++ // this._updateXMLContent();
+ this._colorFillPaths();
+ // This is a hack for lack of innerHTML binding.
+ // See: https:/ckeditor/ckeditor5-ui/issues/99.
+ this.on('change:content', () => {
+- this._updateXMLContent();
++ // this._updateXMLContent();
+ this._colorFillPaths();
+ });
+ this.on('change:fillColor', () => {

src/components/CKEditor/index.tsx

@@ -1,4 +1,5 @@
 import "./index.scss";
+import "ckeditor5/ckeditor5.css";
 
 import { ClassicEditor } from "@ckeditor/ckeditor5-editor-classic";
 import { Essentials } from "@ckeditor/ckeditor5-essentials";

src/layout/LeftNavBar/index.tsx

@@ -17,8 +17,6 @@ import message_icon_active from "@/assets/images/nav/nav_bar_message_active.png"
 import change_avatar from "@/assets/images/profile/change_avatar.png";
 import OIMAvatar from "@/components/OIMAvatar";
 import { useContactStore, useConversationStore, useUserStore } from "@/store";
-import { ChildWindowOptions } from "@/types/common";
-import { openAbout, openPersonalSettings } from "@/utils/childWindows";
 import { feedbackToast } from "@/utils/common";
 import emitter from "@/utils/events";
 

src/layout/TopSearchBar/SearchUserOrGroup.tsx

@@ -16,6 +16,7 @@ import { searchBusinessUserInfo } from "@/api/login";
 import DraggableModalWrap from "@/components/DraggableModalWrap";
 import { OverlayVisibleHandle, useOverlayVisible } from "@/hooks/useOverlayVisible";
 import { CardInfo } from "@/pages/common/UserCardModal";
+import { useContactStore } from "@/store";
 import { feedbackToast } from "@/utils/common";
 
 import { IMSDK } from "../MainContentWrap";
@@ -71,13 +72,12 @@ const SearchUserOrGroup: ForwardRefRenderFunction<
  message.warning(t("empty.noSearchResults"));
  return;
  }
- const { data } = await IMSDK.getUsersInfoWithCache({
- userIDList: [users[0].userID],
- });
- const friendInfo = data[0].friendInfo;
+ const friendInfo = useContactStore
+ .getState()
+ .friendList.find((friend) => friend.userID === users[0].userID);
 
  openUserCardWithData({
- ...friendInfo,
+ ...(friendInfo ?? {}),
  ...users[0],
  });
  } catch (error) {

src/layout/TopSearchBar/index.tsx

@@ -66,7 +66,7 @@ const TopSearchBar = () => {
  let rtcInvite = undefined as undefined | RtcInvite;
  data.map((message) => {
  if (message.contentType === MessageType.CustomMessage) {
- const customData = JSON.parse(message.customElem.data);
+ const customData = JSON.parse(message.customElem!.data);
  if (customData.customType === CustomType.CallingInvite) {
  rtcInvite = customData.data;
  }

src/layout/useGlobalEvents.tsx

@@ -231,7 +231,7 @@ export function useGlobalEvent() {
  }
  data.map((message) => {
  if (message.contentType === MessageType.CustomMessage) {
- const customData = JSON.parse(message.customElem.data);
+ const customData = JSON.parse(message.customElem!.data);
  if (
  CustomType.CallingInvite <= customData.customType &&
  customData.customType <= CustomType.CallingHungup

src/pages/chat/queryChat/MessageItem/MediaMessageRender.tsx

@@ -16,23 +16,23 @@ const MediaMessageRender: FC<IMessageItemProps> = ({ message }) => {
 
  const isVideoMessage = message.contentType === MessageType.VideoMessage;
  const imageHeight = isVideoMessage
- ? message.videoElem.snapshotHeight
- : message.pictureElem.sourcePicture.height;
+ ? message.videoElem!.snapshotHeight
+ : message.pictureElem!.sourcePicture.height;
  const imageWidth = isVideoMessage
- ? message.videoElem.snapshotWidth
- : message.pictureElem.sourcePicture.width;
+ ? message.videoElem!.snapshotWidth
+ : message.pictureElem!.sourcePicture.width;
  const snapshotMaxHeight = isVideoMessage
  ? 320
- : message.pictureElem.snapshotPicture.height;
+ : message.pictureElem!.snapshotPicture.height;
  const minHeight = min(200, imageWidth) * (imageHeight / imageWidth) + 2;
  const adaptedHight = min(minHeight, snapshotMaxHeight) + 10;
  const adaptedWidth = min(imageWidth, 200) + 10;
 
  const isSucceed = message.status === MessageStatus.Succeed;
 
  const sourceUrl = isVideoMessage
- ? message.videoElem.snapshotUrl
- : message.pictureElem.snapshotPicture.url;
+ ? message.videoElem!.snapshotUrl
+ : message.pictureElem!.snapshotPicture.url;
 
  const isSending = message.status === MessageStatus.Sending;
  const minStyle = { minHeight: `${adaptedHight}px`, minWidth: `${adaptedWidth}px` };
@@ -42,7 +42,7 @@ const MediaMessageRender: FC<IMessageItemProps> = ({ message }) => {
  <div
  className="relative max-w-[200px]"
  style={minStyle}
- onClick={() => isVideoMessage && showVideoPlayer(message.videoElem.videoUrl)}
+ onClick={() => isVideoMessage && showVideoPlayer(message.videoElem!.videoUrl)}
  >
  <Image
  rootClassName="message-image cursor-pointer"
@@ -57,7 +57,7 @@ const MediaMessageRender: FC<IMessageItemProps> = ({ message }) => {
  />
  {isVideoMessage && (
  <div className="absolute bottom-3 right-4 text-white">
- {secondsToMS(message.videoElem.duration)}
+ {secondsToMS(message.videoElem!.duration)}
  </div>
  )}
  {isVideoMessage && isSucceed && (

src/pages/chat/queryChat/MessageItem/TextMessageRender.tsx

@@ -7,7 +7,7 @@ import { IMessageItemProps } from ".";
 import styles from "./message-item.module.scss";
 
 const TextMessageRender: FC<IMessageItemProps> = ({ message }) => {
- let content = message.textElem?.content;
+ let content = message.textElem?.content || "";
 
  content = formatBr(content);
 

src/pages/common/RtcCallModal/RtcControl.tsx

@@ -90,7 +90,7 @@ export const RtcControl = ({
  const newMessageHandler = ({ data }: WSEvent<MessageItem[]>) => {
  data.map((message) => {
  if (message.contentType === MessageType.CustomMessage) {
- const customData = JSON.parse(message.customElem.data) as {
+ const customData = JSON.parse(message.customElem!.data) as {
  data: RtcInvite;
  customType: CustomType;
  };

src/pages/common/UserCardModal/index.tsx

@@ -108,11 +108,12 @@ const UserCardModal: ForwardRefRenderFunction<
  return selfInfo;
  }
  let userInfo: CardInfo | null = null;
- const { data } = await IMSDK.getUsersInfoWithCache({
- userIDList: [userID!],
- groupID: groupID,
- });
- userInfo = { ...(data[0]?.friendInfo ?? data[0]?.publicInfo) };
+ const friendInfo = useContactStore
+ .getState()
+ .friendList.find((item) => item.userID === userID);
+ if (friendInfo) {
+ userInfo = { ...friendInfo };
+ }
 
  try {
  const {

src/store/contact.ts

@@ -3,7 +3,6 @@ import {
  BlackUserItem,
  FriendApplicationItem,
  FriendUserItem,
- FullUserItem,
  GroupApplicationItem,
  GroupItem,
 } from "@openim/wasm-client-sdk/lib/types/entity";
@@ -28,7 +27,7 @@ export const useContactStore = create<ContactStore>()((set, get) => ({
  getFriendListByReq: async () => {
  try {
  let offset = 0;
- let tmpList = [] as FullUserItem[];
+ let tmpList = [] as FriendUserItem[];
  let initialFetch = true;
  // eslint-disable-next-line
  while (true) {
@@ -41,7 +40,7 @@ export const useContactStore = create<ContactStore>()((set, get) => ({
  }
  // const { data } = await IMSDK.getFriendList();
  set(() => ({
- friendList: tmpList.map((item) => item.friendInfo!),
+ friendList: [...tmpList],
  }));
  } catch (error) {
  feedbackToast({ error, msg: t("toast.getFriendListFailed") });

src/utils/imCommon.ts

@@ -3,20 +3,12 @@ import calendar from "dayjs/plugin/calendar";
 import relativeTime from "dayjs/plugin/relativeTime";
 import updateLocale from "dayjs/plugin/updateLocale";
 import { t } from "i18next";
-import default_group from "@/assets/images/contact/my_groups.png";
-import { v4 as uuidv4 } from "uuid";
 
-import {
- CustomMessageType,
- GroupSessionTypes,
- SystemMessageTypes,
-} from "@/constants/im";
+import { GroupSessionTypes } from "@/constants/im";
 import { useConversationStore, useUserStore } from "@/store";
 import { useContactStore } from "@/store/contact";
 
-import { generateAvatar, secondsToTime } from "./common";
 import {
- AtTextElem,
  ConversationItem,
  MessageItem,
  PublicUserItem,
@@ -72,7 +64,7 @@ export const notificationMessageFormat = (msg: MessageItem) => {
  case MessageType.FriendAdded:
  return t("messageDescription.alreadyFriendMessage");
  case MessageType.GroupCreated:
- const groupCreatedDetail = JSON.parse(msg.notificationElem.detail);
+ const groupCreatedDetail = JSON.parse(msg.notificationElem!.detail);
  const groupCreatedUser = groupCreatedDetail.opUser;
  return t("messageDescription.createGroupMessage", {
  creator: linkWrap({
@@ -81,7 +73,7 @@ export const notificationMessageFormat = (msg: MessageItem) => {
  }),
  });
  case MessageType.MemberQuit:
- const quitDetails = JSON.parse(msg.notificationElem.detail);
+ const quitDetails = JSON.parse(msg.notificationElem!.detail);
  const quitUser = quitDetails.quitUser;
  return t("messageDescription.quitGroupMessage", {
  name: linkWrap({
@@ -90,7 +82,7 @@ export const notificationMessageFormat = (msg: MessageItem) => {
  }),
  });
  case MessageType.MemberInvited:
- const inviteDetails = JSON.parse(msg.notificationElem.detail);
+ const inviteDetails = JSON.parse(msg.notificationElem!.detail);
  const inviteOpUser = inviteDetails.opUser;
  const invitedUserList = inviteDetails.invitedUserList ?? [];
  let inviteStr = "";
@@ -116,7 +108,7 @@ export const notificationMessageFormat = (msg: MessageItem) => {
  }`,
  });
  case MessageType.MemberKicked:
- const kickDetails = JSON.parse(msg.notificationElem.detail);
+ const kickDetails = JSON.parse(msg.notificationElem!.detail);
  const kickOpUser = kickDetails.opUser;
  const kickdUserList = kickDetails.kickedUserList ?? [];
  let kickStr = "";
@@ -136,7 +128,7 @@ export const notificationMessageFormat = (msg: MessageItem) => {
  kickedUser: `${kickStr}${kickdUserList.length > 3 ? "..." : ""}`,
  });
  case MessageType.MemberEnter:
- const enterDetails = JSON.parse(msg.notificationElem.detail);
+ const enterDetails = JSON.parse(msg.notificationElem!.detail);
  const enterUser = enterDetails.entrantUser;
  return t("messageDescription.joinGroupMessage", {
  name: linkWrap({
@@ -145,7 +137,7 @@ export const notificationMessageFormat = (msg: MessageItem) => {
  }),
  });
  case MessageType.OANotification:
- const customNoti = JSON.parse(msg.notificationElem.detail);
+ const customNoti = JSON.parse(msg.notificationElem!.detail);
  return customNoti.text;
  default:
  return "";
@@ -203,27 +195,27 @@ export const formatMessageByType = (message?: MessageItem): string => {
  try {
  switch (message.contentType) {
  case MessageType.TextMessage:
- return message.textElem?.content;
+ return message.textElem?.content || "";
  case MessageType.PictureMessage:
  return t("messageDescription.imageMessage");
  case MessageType.VideoMessage:
  return t("messageDescription.videoMessage");
  case MessageType.FriendAdded:
  return t("messageDescription.alreadyFriendMessage");
  case MessageType.MemberEnter:
- const enterDetails = JSON.parse(message.notificationElem.detail);
+ const enterDetails = JSON.parse(message.notificationElem!.detail);
  const enterUser = enterDetails.entrantUser;
  return t("messageDescription.joinGroupMessage", {
  name: getName(enterUser),
  });
  case MessageType.GroupCreated:
- const groupCreatedDetail = JSON.parse(message.notificationElem.detail);
+ const groupCreatedDetail = JSON.parse(message.notificationElem!.detail);
  const groupCreatedUser = groupCreatedDetail.opUser;
  return t("messageDescription.createGroupMessage", {
  creator: getName(groupCreatedUser),
  });
  case MessageType.MemberInvited:
- const inviteDetails = JSON.parse(message.notificationElem.detail);
+ const inviteDetails = JSON.parse(message.notificationElem!.detail);
  const inviteOpUser = inviteDetails.opUser;
  const invitedUserList = inviteDetails.invitedUserList ?? [];
  let inviteStr = "";
@@ -242,7 +234,7 @@ export const formatMessageByType = (message?: MessageItem): string => {
  }`,
  });
  case MessageType.MemberKicked:
- const kickDetails = JSON.parse(message.notificationElem.detail);
+ const kickDetails = JSON.parse(message.notificationElem!.detail);
  const kickOpUser = kickDetails.opUser;
  const kickdUserList = kickDetails.kickedUserList ?? [];
  let kickStr = "";
@@ -259,13 +251,13 @@ export const formatMessageByType = (message?: MessageItem): string => {
  }`,
  });
  case MessageType.MemberQuit:
- const quitDetails = JSON.parse(message.notificationElem.detail);
+ const quitDetails = JSON.parse(message.notificationElem!.detail);
  const quitUser = quitDetails.quitUser;
  return t("messageDescription.quitGroupMessage", {
  name: getName(quitUser),
  });
  case MessageType.OANotification:
- const customNoti = JSON.parse(message.notificationElem.detail);
+ const customNoti = JSON.parse(message.notificationElem!.detail);
  return customNoti.text;
  default:
  return "";

tailwind.config.js

@@ -26,6 +26,5 @@ module.exports = {
  },
  },
  },
- plugins: [require("@tailwindcss/line-clamp")],
  darkMode: "class",
 };