binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5305] refactor: migrate emoji and logo components to propel and remove duplication (#8038)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2025-11-06 17:33:06 +05:30 • committed by GitHub
parent 4927ef8c71
commit 9b3bd11c03
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
46 changed files with 62 additions and 858 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/editor/package.json
View file

@ -44,8 +44,8 @@
"@plane/hooks": "workspace:*",
"@plane/types": "workspace:*",
"@plane/ui": "workspace:*",
"@plane/utils": "workspace:*",
"@plane/propel": "workspace:*",
"@plane/utils": "workspace:*",
"@tiptap/core": "catalog:",
"@tiptap/extension-blockquote": "^2.22.3",
"@tiptap/extension-character-count": "^2.22.3",

20
packages/editor/src/core/extensions/callout/logo-selector.tsx
View file

@ -1,6 +1,7 @@
// plane imports
import { EmojiIconPicker, EmojiIconPickerTypes, Logo, TEmojiLogoProps } from "@plane/ui";
import { cn, convertHexEmojiToDecimal } from "@plane/utils";
import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
import type { TLogoProps } from "@plane/types";
import { cn } from "@plane/utils";
// types
import { TCalloutBlockAttributes } from "./types";
// utils
@ -17,7 +18,7 @@ type Props = {
export const CalloutBlockLogoSelector: React.FC<Props> = (props) => {
const { blockAttributes, disabled, handleOpen, isOpen, updateAttributes } = props;
const logoValue: TEmojiLogoProps = {
const logoValue: TLogoProps = {
in_use: blockAttributes["data-logo-in-use"],
icon: {
color: blockAttributes["data-icon-color"],
@ -31,7 +32,7 @@ export const CalloutBlockLogoSelector: React.FC<Props> = (props) => {
return (
<div contentEditable={false}>
<EmojiIconPicker
<EmojiPicker
closeOnSelect={false}
isOpen={isOpen}
handleToggle={handleOpen}
@ -43,7 +44,7 @@ export const CalloutBlockLogoSelector: React.FC<Props> = (props) => {
onChange={(val) => {
// construct the new logo value based on the type of value
let newLogoValue: Partial<TCalloutBlockAttributes> = {};
let newLogoValueToStoreInLocalStorage: TEmojiLogoProps = {
let newLogoValueToStoreInLocalStorage: TLogoProps = {
in_use: "emoji",
emoji: {
value: DEFAULT_CALLOUT_BLOCK_ATTRIBUTES["data-emoji-unicode"],
@ -51,15 +52,16 @@ export const CalloutBlockLogoSelector: React.FC<Props> = (props) => {
},
};
if (val.type === "emoji") {
// val.value is now a string in decimal format (e.g. "128512")
newLogoValue = {
"data-emoji-unicode": convertHexEmojiToDecimal(val.value.unified),
"data-emoji-url": val.value.imageUrl,
"data-emoji-unicode": val.value,
"data-emoji-url": undefined,
};
newLogoValueToStoreInLocalStorage = {
in_use: "emoji",
emoji: {
value: convertHexEmojiToDecimal(val.value.unified),
url: val.value.imageUrl,
value: val.value,
url: undefined,
},
};
} else if (val.type === "icon") {

6
packages/editor/src/core/extensions/callout/utils.ts
View file

@ -1,5 +1,5 @@
// plane imports
import type { TEmojiLogoProps } from "@plane/ui";
import type { TLogoProps } from "@plane/types";
import { sanitizeHTML } from "@plane/utils";
// types
import {
@ -33,7 +33,7 @@ export const getStoredLogo = (): TStoredLogoValue => {
if (typeof window !== "undefined") {
const storedData = sanitizeHTML(localStorage.getItem("editor-calloutComponent-logo") ?? "");
if (storedData) {
let parsedData: TEmojiLogoProps;
let parsedData: TLogoProps;
try {
parsedData = JSON.parse(storedData);
} catch (error) {
@ -65,7 +65,7 @@ export const getStoredLogo = (): TStoredLogoValue => {
return fallBackValues;
};
// function to update the stored logo on local storage
export const updateStoredLogo = (value: TEmojiLogoProps): void => {
export const updateStoredLogo = (value: TLogoProps): void => {
if (typeof window === "undefined") return;
localStorage.setItem("editor-calloutComponent-logo", JSON.stringify(value));
};