Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix strikethrough is not applied to deleted markdown text while offline on native #16465

Merged
merged 2 commits into from
Mar 29, 2023
Merged

fix strikethrough is not applied to deleted markdown text while offline on native #16465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe29732
fix strikethrough is not applied to deleted markdown text while offli…
bernhardoj Mar 23, 2023
4929691
fix lint
bernhardoj Mar 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/components/HTMLEngineProvider/applyStrikethrough/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
function applyStrikethrough(html) {
return html;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't we remove the styles which apply strike-through for web and unify the approach across platforms

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we want to remove the style, that means we need to remove it from all of it's parent and that would affect other components.

Copy link
Collaborator

@Santhosh-Sellavel Santhosh-Sellavel Mar 27, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we can add del tag and simplify things why would we still need stick to old styles

Why would we need it still?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@youssef-lr your thoughts?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The chat message is inside this OfflineWithFeedback, and if we don't want to have the strikethrough styles, then we need to pass the pendingAction props only if it's a delete action.

App/src/pages/home/report/ReportActionItem.js

Lines 255 to 279 in 0763be5

<OfflineWithFeedback
onClose={() => {
if (this.props.action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD) {
ReportActions.deleteOptimisticReportAction(this.props.report.reportID, this.props.action.reportActionID);
} else {
ReportActions.clearReportActionErrors(this.props.report.reportID, this.props.action.reportActionID);
}
}}
pendingAction={this.props.draftMessage ? null : this.props.action.pendingAction}
errors={this.props.action.errors}
errorRowStyles={[styles.ml10, styles.mr2]}
needsOffscreenAlphaCompositing={this.props.action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU}
>
{!this.props.displayAsGroup
? (
<ReportActionItemSingle action={this.props.action} showHeader={!this.props.draftMessage}>
{this.renderItemContent(hovered || this.state.isContextMenuActive)}
</ReportActionItemSingle>
)
: (
<ReportActionItemGrouped>
{this.renderItemContent(hovered || this.state.isContextMenuActive)}
</ReportActionItemGrouped>
)}
</OfflineWithFeedback>

Next, we also need to give the style manually to the non-HTML text here

App/src/pages/home/report/ReportActionItemFragment.js

Lines 120 to 137 in 0763be5

return (
<Text
family="EMOJI_TEXT_FONT"
selectable={!DeviceCapabilities.canUseTouchScreen() || !props.isSmallScreenWidth}
style={[EmojiUtils.containsOnlyEmojis(text) ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style]}
>
{StyleUtils.convertToLTR(Str.htmlDecode(text))}
{props.fragment.isEdited && (
<Text
fontSize={variables.fontSizeSmall}
color={themeColors.textSupporting}
>
{` ${props.translate('reportActionCompose.edited')}`}
</Text>
)}
</Text>
);
}

This is assuming that all components inside the OfflineWithFeedback does not need the strikethrough style except ReportActionItemFragment.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Santhosh-Sellavel could you please clarify what you mean by this? Aren't these styles coming from OfflineWithFeedback and web will remain untouched here as we're only adding them in index.native.js?

Shouldn't we remove the styles which apply strike-through for web and unify the approach across platforms

Copy link
Collaborator

@Santhosh-Sellavel Santhosh-Sellavel Mar 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the web will remain untouched here as we're only adding them in index.native.js?

Yes

Shouldn't we remove the styles which apply strike-through for the web and unify the approach across platforms?

As of now strike through styles for deleted messages are applied through styles on web, now we are handling native using <del> tag. Instead of mixing up two solutions one for the web & one for native shouldn't we unify?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see. How do you suggest we unify this? Do you have a solution in mind?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't really have a good solution, but are we fine with this?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm fine with as is now, let me know if you differ @youssef-lr

}

export default applyStrikethrough;
8 changes: 8 additions & 0 deletions src/components/HTMLEngineProvider/applyStrikethrough/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
function applyStrikethrough(html, isPendingDelete) {
if (isPendingDelete) {
return `<del>${html}</del>`;
}
return html;
}

export default applyStrikethrough;
8 changes: 7 additions & 1 deletion src/pages/home/report/ReportActionItemFragment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
import compose from '../../../libs/compose';
import * as StyleUtils from '../../../styles/StyleUtils';
import {withNetwork} from '../../../components/OnyxProvider';
import CONST from '../../../CONST';
import applyStrikethrough from '../../../components/HTMLEngineProvider/applyStrikethrough';

const propTypes = {
/** The message fragment needing to be displayed */
Expand Down Expand Up @@ -107,8 +110,10 @@ const ReportActionItemFragment = (props) => {

// Only render HTML if we have html in the fragment
if (!differByLineBreaksOnly) {
const isPendingDelete = props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && props.network.isOffline;
const editedTag = props.fragment.isEdited ? '<edited></edited>' : '';
const htmlContent = html + editedTag;
const htmlContent = applyStrikethrough(html + editedTag, isPendingDelete);

return (
<RenderHTML
html={props.source === 'email'
Expand Down Expand Up @@ -172,4 +177,5 @@ ReportActionItemFragment.displayName = 'ReportActionItemFragment';
export default compose(
withWindowDimensions,
withLocalize,
withNetwork(),
)(memo(ReportActionItemFragment));
1 change: 1 addition & 0 deletions src/pages/home/report/ReportActionItemMessage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ const ReportActionItemMessage = props => (
fragment={fragment}
isAttachment={props.action.isAttachment}
attachmentInfo={props.action.attachmentInfo}
pendingAction={props.action.pendingAction}
source={lodashGet(props.action, 'originalMessage.source')}
loading={props.action.isLoading}
style={props.style}
Expand Down