From 664c046d0791f243766f920426c4f60d45fe4a9f Mon Sep 17 00:00:00 2001 From: daledah Date: Sat, 7 Sep 2024 13:55:45 +0700 Subject: [PATCH 1/5] fix: The top of emojis are cut off on applying quote markdown --- .../BaseHTMLEngineProvider.tsx | 22 ++++++++++++++++++- .../report/comment/TextCommentFragment.tsx | 6 ++++- src/styles/index.ts | 2 ++ .../emojiBlockquoteStyles/index.android.ts | 7 ++++++ .../utils/emojiBlockquoteStyles/index.ts | 5 +++++ .../utils/emojiBlockquoteStyles/types.ts | 5 +++++ 6 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 src/styles/utils/emojiBlockquoteStyles/index.android.ts create mode 100644 src/styles/utils/emojiBlockquoteStyles/index.ts create mode 100644 src/styles/utils/emojiBlockquoteStyles/types.ts diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx index 97be05049e3c..278e03ea392b 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx @@ -82,8 +82,28 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim mixedUAStyles: {...styles.textSupporting, ...styles.textLineThrough}, contentModel: HTMLContentModel.textual, }), + blockquote: HTMLElementModel.fromCustomModel({ + tagName: 'blockquote', + contentModel: HTMLContentModel.block, + getMixedUAStyles: (tnode) => { + if (tnode.attributes.islarge === undefined) { + return; + } + return styles.onlyEmojisBlockquoteLineHeight; + }, + }), }), - [styles.formError, styles.mb0, styles.colorMuted, styles.textLabelSupporting, styles.lh16, styles.textSupporting, styles.textLineThrough, styles.mutedNormalTextLabel], + [ + styles.formError, + styles.mb0, + styles.colorMuted, + styles.textLabelSupporting, + styles.lh16, + styles.textSupporting, + styles.textLineThrough, + styles.mutedNormalTextLabel, + styles.onlyEmojisBlockquoteLineHeight, + ], ); /* eslint-enable @typescript-eslint/naming-convention */ diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx index 9d1a4d9ad4b7..fe7ab8ea7bab 100644 --- a/src/pages/home/report/comment/TextCommentFragment.tsx +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -61,7 +61,11 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so const editedTag = fragment?.isEdited ? `` : ''; const htmlWithDeletedTag = styleAsDeleted ? `${html}` : html; - const htmlContent = containsOnlyEmojis ? Str.replaceAll(htmlWithDeletedTag, '', '') : htmlWithDeletedTag; + let htmlContent = htmlWithDeletedTag; + if (containsOnlyEmojis) { + htmlContent = Str.replaceAll(htmlContent, '', ''); + htmlContent = Str.replaceAll(htmlContent, '
', '
'); + } let htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent; if (styleAsMuted) { diff --git a/src/styles/index.ts b/src/styles/index.ts index 179e886d08ff..a27bb9b15714 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -21,6 +21,7 @@ import codeStyles from './utils/codeStyles'; import cursor from './utils/cursor'; import display from './utils/display'; import editedLabelStyles from './utils/editedLabelStyles'; +import onlyEmojisBlockquoteLineHeight from './utils/emojiBlockquoteStyles'; import emojiDefaultStyles from './utils/emojiDefaultStyles'; import flex from './utils/flex'; import FontUtils from './utils/FontUtils'; @@ -262,6 +263,7 @@ const styles = (theme: ThemeColors) => ...textDecorationLine, editedLabelStyles, emojiDefaultStyles, + onlyEmojisBlockquoteLineHeight, autoCompleteSuggestionsContainer: { backgroundColor: theme.appBG, diff --git a/src/styles/utils/emojiBlockquoteStyles/index.android.ts b/src/styles/utils/emojiBlockquoteStyles/index.android.ts new file mode 100644 index 000000000000..bc4384af4968 --- /dev/null +++ b/src/styles/utils/emojiBlockquoteStyles/index.android.ts @@ -0,0 +1,7 @@ +import type OnlyEmojisBlockquoteLineHeight from './types'; + +const onlyEmojisBlockquoteLineHeight: OnlyEmojisBlockquoteLineHeight = { + lineHeight: 35, +}; + +export default onlyEmojisBlockquoteLineHeight; diff --git a/src/styles/utils/emojiBlockquoteStyles/index.ts b/src/styles/utils/emojiBlockquoteStyles/index.ts new file mode 100644 index 000000000000..3b837acf3f4d --- /dev/null +++ b/src/styles/utils/emojiBlockquoteStyles/index.ts @@ -0,0 +1,5 @@ +import type OnlyEmojisBlockquoteLineHeight from './types'; + +const onlyEmojisBlockquoteLineHeight: OnlyEmojisBlockquoteLineHeight = {}; + +export default onlyEmojisBlockquoteLineHeight; diff --git a/src/styles/utils/emojiBlockquoteStyles/types.ts b/src/styles/utils/emojiBlockquoteStyles/types.ts new file mode 100644 index 000000000000..86ca4bbb2d21 --- /dev/null +++ b/src/styles/utils/emojiBlockquoteStyles/types.ts @@ -0,0 +1,5 @@ +type OnlyEmojisBlockquoteLineHeight = { + lineHeight?: number; +}; + +export default OnlyEmojisBlockquoteLineHeight; From 47673f03d87debf96eb0d9402a8ff4a1402e43a2 Mon Sep 17 00:00:00 2001 From: daledah Date: Tue, 10 Sep 2024 15:07:35 +0700 Subject: [PATCH 2/5] fix: remove unused styles --- .../HTMLEngineProvider/BaseHTMLEngineProvider.tsx | 4 ++-- src/styles/index.ts | 2 -- src/styles/utils/emojiBlockquoteStyles/index.android.ts | 7 ------- src/styles/utils/emojiBlockquoteStyles/index.ts | 5 ----- src/styles/utils/emojiBlockquoteStyles/types.ts | 5 ----- 5 files changed, 2 insertions(+), 21 deletions(-) delete mode 100644 src/styles/utils/emojiBlockquoteStyles/index.android.ts delete mode 100644 src/styles/utils/emojiBlockquoteStyles/index.ts delete mode 100644 src/styles/utils/emojiBlockquoteStyles/types.ts diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx index 278e03ea392b..256a5475be77 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx @@ -89,7 +89,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim if (tnode.attributes.islarge === undefined) { return; } - return styles.onlyEmojisBlockquoteLineHeight; + return styles.onlyEmojisTextLineHeight; }, }), }), @@ -102,7 +102,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim styles.textSupporting, styles.textLineThrough, styles.mutedNormalTextLabel, - styles.onlyEmojisBlockquoteLineHeight, + styles.onlyEmojisTextLineHeight, ], ); /* eslint-enable @typescript-eslint/naming-convention */ diff --git a/src/styles/index.ts b/src/styles/index.ts index a27bb9b15714..179e886d08ff 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -21,7 +21,6 @@ import codeStyles from './utils/codeStyles'; import cursor from './utils/cursor'; import display from './utils/display'; import editedLabelStyles from './utils/editedLabelStyles'; -import onlyEmojisBlockquoteLineHeight from './utils/emojiBlockquoteStyles'; import emojiDefaultStyles from './utils/emojiDefaultStyles'; import flex from './utils/flex'; import FontUtils from './utils/FontUtils'; @@ -263,7 +262,6 @@ const styles = (theme: ThemeColors) => ...textDecorationLine, editedLabelStyles, emojiDefaultStyles, - onlyEmojisBlockquoteLineHeight, autoCompleteSuggestionsContainer: { backgroundColor: theme.appBG, diff --git a/src/styles/utils/emojiBlockquoteStyles/index.android.ts b/src/styles/utils/emojiBlockquoteStyles/index.android.ts deleted file mode 100644 index bc4384af4968..000000000000 --- a/src/styles/utils/emojiBlockquoteStyles/index.android.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type OnlyEmojisBlockquoteLineHeight from './types'; - -const onlyEmojisBlockquoteLineHeight: OnlyEmojisBlockquoteLineHeight = { - lineHeight: 35, -}; - -export default onlyEmojisBlockquoteLineHeight; diff --git a/src/styles/utils/emojiBlockquoteStyles/index.ts b/src/styles/utils/emojiBlockquoteStyles/index.ts deleted file mode 100644 index 3b837acf3f4d..000000000000 --- a/src/styles/utils/emojiBlockquoteStyles/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type OnlyEmojisBlockquoteLineHeight from './types'; - -const onlyEmojisBlockquoteLineHeight: OnlyEmojisBlockquoteLineHeight = {}; - -export default onlyEmojisBlockquoteLineHeight; diff --git a/src/styles/utils/emojiBlockquoteStyles/types.ts b/src/styles/utils/emojiBlockquoteStyles/types.ts deleted file mode 100644 index 86ca4bbb2d21..000000000000 --- a/src/styles/utils/emojiBlockquoteStyles/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -type OnlyEmojisBlockquoteLineHeight = { - lineHeight?: number; -}; - -export default OnlyEmojisBlockquoteLineHeight; From 9bda8f4d77d6a0b4f270818cb9c4c96499cc5505 Mon Sep 17 00:00:00 2001 From: daledah Date: Wed, 11 Sep 2024 23:34:58 +0700 Subject: [PATCH 3/5] refactor: change only emoji attribute --- src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx | 2 +- src/pages/home/report/comment/TextCommentFragment.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx index 256a5475be77..c0f42ffd2fd9 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx @@ -86,7 +86,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim tagName: 'blockquote', contentModel: HTMLContentModel.block, getMixedUAStyles: (tnode) => { - if (tnode.attributes.islarge === undefined) { + if (tnode.attributes.isEmojisOnly === undefined) { return; } return styles.onlyEmojisTextLineHeight; diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx index fe7ab8ea7bab..6b18e455afe6 100644 --- a/src/pages/home/report/comment/TextCommentFragment.tsx +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -63,8 +63,8 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so let htmlContent = htmlWithDeletedTag; if (containsOnlyEmojis) { - htmlContent = Str.replaceAll(htmlContent, '', ''); - htmlContent = Str.replaceAll(htmlContent, '
', '
'); + htmlContent = Str.replaceAll(htmlContent, '', ''); + htmlContent = Str.replaceAll(htmlContent, '
', '
'); } let htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent; From e77ed2e87038a04ed3a6e5dcad9f0db96e82fb76 Mon Sep 17 00:00:00 2001 From: daledah Date: Wed, 11 Sep 2024 23:45:15 +0700 Subject: [PATCH 4/5] fix: revert islarge --- src/pages/home/report/comment/TextCommentFragment.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx index 6b18e455afe6..4f68919af6e2 100644 --- a/src/pages/home/report/comment/TextCommentFragment.tsx +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -63,7 +63,7 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so let htmlContent = htmlWithDeletedTag; if (containsOnlyEmojis) { - htmlContent = Str.replaceAll(htmlContent, '', ''); + htmlContent = Str.replaceAll(htmlContent, '', ''); htmlContent = Str.replaceAll(htmlContent, '
', '
'); } let htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent; From bec53767696fe39403ca69cf91148a65f7e7543c Mon Sep 17 00:00:00 2001 From: daledah Date: Mon, 16 Sep 2024 14:32:06 +0700 Subject: [PATCH 5/5] fix: attribute name --- src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx | 2 +- src/pages/home/report/comment/TextCommentFragment.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx index c0f42ffd2fd9..d211aac7fd4c 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx @@ -86,7 +86,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim tagName: 'blockquote', contentModel: HTMLContentModel.block, getMixedUAStyles: (tnode) => { - if (tnode.attributes.isEmojisOnly === undefined) { + if (tnode.attributes.isemojisonly === undefined) { return; } return styles.onlyEmojisTextLineHeight; diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx index 4f68919af6e2..2e64af6c534e 100644 --- a/src/pages/home/report/comment/TextCommentFragment.tsx +++ b/src/pages/home/report/comment/TextCommentFragment.tsx @@ -64,7 +64,7 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so let htmlContent = htmlWithDeletedTag; if (containsOnlyEmojis) { htmlContent = Str.replaceAll(htmlContent, '', ''); - htmlContent = Str.replaceAll(htmlContent, '
', '
'); + htmlContent = Str.replaceAll(htmlContent, '
', '
'); } let htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent;