();
const [characterCount, setCharacterCount] = React.useState(
@@ -87,7 +96,11 @@ export function CompositionTextArea({
}, [inputApiRef]);
const handleChange = React.useCallback(
- ({ bodyRanges, caretLocation, messageText: newValue }) => {
+ ({
+ bodyRanges: updatedBodyRanges,
+ caretLocation,
+ messageText: newValue,
+ }) => {
const inputEl = inputApiRef.current;
if (!inputEl) {
return;
@@ -108,11 +121,11 @@ export function CompositionTextArea({
// was modifying text in the middle of the editor
// a better solution would be to prevent the change to begin with, but
// quill makes this VERY difficult
- inputEl.setContents(newValueSized, bodyRanges, true);
+ inputEl.setContents(newValueSized, updatedBodyRanges, true);
}
}
setCharacterCount(newCharacterCount);
- onChange(newValue, bodyRanges, caretLocation);
+ onChange(newValue, updatedBodyRanges, caretLocation);
},
[maxLength, onChange]
);
@@ -121,10 +134,13 @@ export function CompositionTextArea({
void;
+ onCancel: () => void;
+};
+
+export function FormattingWarningModal({
+ i18n,
+ onSendAnyway,
+ onCancel,
+}: PropsType): JSX.Element | null {
+ return (
+
+ {i18n('icu:SendFormatting--dialog--body')}
+
+ );
+}
diff --git a/ts/components/ForwardMessagesModal.stories.tsx b/ts/components/ForwardMessagesModal.stories.tsx
index 24dc5427a05..52f2613864c 100644
--- a/ts/components/ForwardMessagesModal.stories.tsx
+++ b/ts/components/ForwardMessagesModal.stories.tsx
@@ -59,6 +59,8 @@ const useProps = (overrideProps: Partial = {}): PropsType => ({
;
@@ -135,7 +137,14 @@ export function ForwardMessagesModal({
const previews = lonelyLinkPreview ? [lonelyLinkPreview] : [];
doForwardMessages(conversationIds, [{ ...lonelyDraft, previews }]);
} else {
- doForwardMessages(conversationIds, drafts);
+ doForwardMessages(
+ conversationIds,
+ drafts.map(draft => ({
+ ...draft,
+ // We don't keep @mention bodyRanges in multi-forward scenarios
+ bodyRanges: draft.bodyRanges?.filter(BodyRange.isFormatting),
+ }))
+ );
}
}, [
drafts,
@@ -304,8 +313,8 @@ export function ForwardMessagesModal({
{
- onChange([{ ...lonelyDraft, messageBody }]);
+ onChange={(messageBody, bodyRanges) => {
+ onChange([{ ...lonelyDraft, messageBody, bodyRanges }]);
}}
removeLinkPreview={removeLinkPreview}
theme={theme}
@@ -420,7 +429,11 @@ type ForwardMessageEditorProps = Readonly<{
RenderCompositionTextArea: (
props: SmartCompositionTextAreaProps
) => JSX.Element;
- onChange: (messageText: string, caretLocation?: number) => unknown;
+ onChange: (
+ messageText: string,
+ bodyRanges: HydratedBodyRangesType,
+ caretLocation?: number
+ ) => unknown;
onSubmit: () => unknown;
theme: ThemeType;
i18n: LocalizerType;
@@ -470,10 +483,9 @@ function ForwardMessageEditor({
) : null}
{
- onChange(messageText, caretLocation);
- }}
+ onChange={onChange}
onSubmit={onSubmit}
theme={theme}
/>
diff --git a/ts/components/GlobalModalContainer.tsx b/ts/components/GlobalModalContainer.tsx
index 27d568337ce..43555627ac9 100644
--- a/ts/components/GlobalModalContainer.tsx
+++ b/ts/components/GlobalModalContainer.tsx
@@ -7,15 +7,18 @@ import type {
ContactModalStateType,
DeleteMessagesPropsType,
EditHistoryMessagesType,
+ FormattingWarningDataType,
ForwardMessagesPropsType,
SafetyNumberChangedBlockingDataType,
UserNotFoundModalStateType,
} from '../state/ducks/globalModals';
import type { LocalizerType, ThemeType } from '../types/Util';
+import type { ExplodePromiseResultType } from '../util/explodePromise';
import { missingCaseError } from '../util/missingCaseError';
import { ButtonVariant } from './Button';
import { ConfirmationDialog } from './ConfirmationDialog';
+import { FormattingWarningModal } from './FormattingWarningModal';
import { SignalConnectionsModal } from './SignalConnectionsModal';
import { WhatsNewModal } from './WhatsNewModal';
@@ -42,6 +45,11 @@ export type PropsType = {
// DeleteMessageModal
deleteMessagesProps: DeleteMessagesPropsType | undefined;
renderDeleteMessagesModal: () => JSX.Element;
+ // FormattingWarningModal
+ showFormattingWarningModal: (
+ explodedPromise: ExplodePromiseResultType | undefined
+ ) => void;
+ formattingWarningData: FormattingWarningDataType | undefined;
// ForwardMessageModal
forwardMessagesProps: ForwardMessagesPropsType | undefined;
renderForwardMessagesModal: () => JSX.Element;
@@ -99,6 +107,9 @@ export function GlobalModalContainer({
// DeleteMessageModal
deleteMessagesProps,
renderDeleteMessagesModal,
+ // FormattingWarningModal
+ showFormattingWarningModal,
+ formattingWarningData,
// ForwardMessageModal
forwardMessagesProps,
renderForwardMessagesModal,
@@ -169,6 +180,23 @@ export function GlobalModalContainer({
return renderDeleteMessagesModal();
}
+ if (formattingWarningData) {
+ const { resolve } = formattingWarningData.explodedPromise;
+ return (
+ {
+ showFormattingWarningModal(undefined);
+ resolve(true);
+ }}
+ onCancel={() => {
+ showFormattingWarningModal(undefined);
+ resolve(false);
+ }}
+ />
+ );
+ }
+
if (forwardMessagesProps) {
return renderForwardMessagesModal();
}
diff --git a/ts/components/MediaEditor.stories.tsx b/ts/components/MediaEditor.stories.tsx
index 45cde45236d..dd379c48d27 100644
--- a/ts/components/MediaEditor.stories.tsx
+++ b/ts/components/MediaEditor.stories.tsx
@@ -64,6 +64,8 @@ export function WithCaption(): JSX.Element {
({
hasRelayCalls: false,
hasSpellCheck: true,
hasStoriesDisabled: false,
+ hasTextFormatting: true,
hasTypingIndicators: true,
initialSpellCheckSetting: true,
isAudioNotificationsSupported: true,
isAutoDownloadUpdatesSupported: true,
isAutoLaunchSupported: true,
+ isFormattingFlagEnabled: true,
isHideMenuBarSupported: true,
isNotificationAttentionSupported: true,
isPhoneNumberSharingSupported: true,
@@ -161,6 +163,7 @@ export default {
onSelectedSpeakerChange: { action: true },
onSentMediaQualityChange: { action: true },
onSpellCheckChange: { action: true },
+ onTextFormattingChange: { action: true },
onThemeChange: { action: true },
onUniversalExpireTimerChange: { action: true },
onWhoCanSeeMeChange: { action: true },
@@ -217,3 +220,8 @@ PNPDiscoverabilityDisabled.args = {
PNPDiscoverabilityDisabled.story = {
name: 'PNP Discoverability Disabled',
};
+
+export const FormattingDisabled = Template.bind({});
+FormattingDisabled.args = {
+ isFormattingFlagEnabled: false,
+};
diff --git a/ts/components/Preferences.tsx b/ts/components/Preferences.tsx
index 7b8166d6286..5d49482d396 100644
--- a/ts/components/Preferences.tsx
+++ b/ts/components/Preferences.tsx
@@ -80,6 +80,7 @@ export type PropsDataType = {
hasRelayCalls?: boolean;
hasSpellCheck: boolean;
hasStoriesDisabled: boolean;
+ hasTextFormatting: boolean;
hasTypingIndicators: boolean;
lastSyncTime?: number;
notificationContent: NotificationSettingType;
@@ -98,6 +99,9 @@ export type PropsDataType = {
initialSpellCheckSetting: boolean;
shouldShowStoriesSettings: boolean;
+ // Feature flags
+ isFormattingFlagEnabled: boolean;
+
// Limited support features
isAudioNotificationsSupported: boolean;
isAutoDownloadUpdatesSupported: boolean;
@@ -162,6 +166,7 @@ type PropsFunctionType = {
onSelectedSpeakerChange: SelectChangeHandlerType;
onSentMediaQualityChange: SelectChangeHandlerType;
onSpellCheckChange: CheckboxChangeHandlerType;
+ onTextFormattingChange: CheckboxChangeHandlerType;
onThemeChange: SelectChangeHandlerType;
onUniversalExpireTimerChange: SelectChangeHandlerType;
onWhoCanSeeMeChange: SelectChangeHandlerType;
@@ -245,12 +250,14 @@ export function Preferences({
hasRelayCalls,
hasSpellCheck,
hasStoriesDisabled,
+ hasTextFormatting,
hasTypingIndicators,
i18n,
initialSpellCheckSetting,
isAudioNotificationsSupported,
isAutoDownloadUpdatesSupported,
isAutoLaunchSupported,
+ isFormattingFlagEnabled,
isHideMenuBarSupported,
isPhoneNumberSharingSupported,
isNotificationAttentionSupported,
@@ -284,6 +291,7 @@ export function Preferences({
onSelectedSpeakerChange,
onSentMediaQualityChange,
onSpellCheckChange,
+ onTextFormattingChange,
onThemeChange,
onUniversalExpireTimerChange,
onWhoCanSeeMeChange,
@@ -550,6 +558,15 @@ export function Preferences({
name="spellcheck"
onChange={onSpellCheckChange}
/>
+ {isFormattingFlagEnabled && (
+
+ )}
= {}): Props => ({
i18n,
close: action('close'),
- hasInstalledStickers: boolean(
- 'hasInstalledStickers',
- overrideProps.hasInstalledStickers || false
- ),
- platform: select(
- 'platform',
- {
- macOS: 'darwin',
- other: 'other',
- },
- overrideProps.platform || 'other'
- ),
+ isFormattingFlagEnabled:
+ overrideProps.isFormattingFlagEnabled === false
+ ? overrideProps.isFormattingFlagEnabled
+ : true,
+ isFormattingSpoilersFlagEnabled:
+ overrideProps.isFormattingSpoilersFlagEnabled === false
+ ? overrideProps.isFormattingSpoilersFlagEnabled
+ : true,
+ hasInstalledStickers: overrideProps.hasInstalledStickers === true || false,
+ platform: overrideProps.platform || 'other',
});
export function Default(): JSX.Element {
@@ -47,3 +44,13 @@ export function HasStickers(): JSX.Element {
const props = createProps({ hasInstalledStickers: true });
return ;
}
+
+export function NoFormatting(): JSX.Element {
+ const props = createProps({ isFormattingFlagEnabled: false });
+ return ;
+}
+
+export function NoSpoilerFormatting(): JSX.Element {
+ const props = createProps({ isFormattingSpoilersFlagEnabled: false });
+ return ;
+}
diff --git a/ts/components/ShortcutGuide.tsx b/ts/components/ShortcutGuide.tsx
index 9e621200e8a..9b0771699e8 100644
--- a/ts/components/ShortcutGuide.tsx
+++ b/ts/components/ShortcutGuide.tsx
@@ -8,6 +8,8 @@ import type { LocalizerType } from '../types/Util';
export type Props = {
hasInstalledStickers: boolean;
+ isFormattingFlagEnabled: boolean;
+ isFormattingSpoilersFlagEnabled: boolean;
platform: string;
readonly close: () => unknown;
readonly i18n: LocalizerType;
@@ -26,12 +28,15 @@ type KeyType =
| ','
| '.'
| 'A'
+ | 'B'
| 'C'
| 'D'
| 'E'
| 'F'
| 'G'
+ | 'I'
| 'J'
+ | 'K'
| 'L'
| 'M'
| 'N'
@@ -206,8 +211,12 @@ function getMessageShortcuts(i18n: LocalizerType): Array {
];
}
-function getComposerShortcuts(i18n: LocalizerType): Array {
- return [
+function getComposerShortcuts(
+ i18n: LocalizerType,
+ isFormattingFlagEnabled: boolean,
+ isFormattingSpoilersFlagEnabled: boolean
+): Array {
+ const shortcuts: Array = [
{
id: 'Keyboard--add-newline',
description: i18n('icu:Keyboard--add-newline'),
@@ -216,7 +225,7 @@ function getComposerShortcuts(i18n: LocalizerType): Array {
{
id: 'Keyboard--expand-composer',
description: i18n('icu:Keyboard--expand-composer'),
- keys: [['commandOrCtrl', 'shift', 'X']],
+ keys: [['commandOrCtrl', 'shift', 'K']],
},
{
id: 'Keyboard--send-in-expanded-composer',
@@ -239,6 +248,39 @@ function getComposerShortcuts(i18n: LocalizerType): Array {
keys: [['commandOrCtrl', 'shift', 'P']],
},
];
+
+ if (isFormattingFlagEnabled) {
+ shortcuts.push({
+ id: 'Keyboard--composer--bold',
+ description: i18n('icu:Keyboard--composer--bold'),
+ keys: [['commandOrCtrl', 'B']],
+ });
+ shortcuts.push({
+ id: 'Keyboard--composer--italic',
+ description: i18n('icu:Keyboard--composer--italic'),
+ keys: [['commandOrCtrl', 'I']],
+ });
+ shortcuts.push({
+ id: 'Keyboard--composer--strikethrough',
+ description: i18n('icu:Keyboard--composer--strikethrough'),
+ keys: [['commandOrCtrl', 'shift', 'X']],
+ });
+ shortcuts.push({
+ id: 'Keyboard--composer--monospace',
+ description: i18n('icu:Keyboard--composer--monospace'),
+ keys: [['commandOrCtrl', 'E']],
+ });
+
+ if (isFormattingSpoilersFlagEnabled) {
+ shortcuts.push({
+ id: 'Keyboard--composer--spoiler',
+ description: i18n('icu:Keyboard--composer--spoiler'),
+ keys: [['commandOrCtrl', 'shift', 'B']],
+ });
+ }
+ }
+
+ return shortcuts;
}
function getCallingShortcuts(i18n: LocalizerType): Array {
@@ -287,7 +329,14 @@ function getCallingShortcuts(i18n: LocalizerType): Array {
}
export function ShortcutGuide(props: Props): JSX.Element {
- const { i18n, close, hasInstalledStickers, platform } = props;
+ const {
+ i18n,
+ close,
+ hasInstalledStickers,
+ isFormattingFlagEnabled,
+ isFormattingSpoilersFlagEnabled,
+ platform,
+ } = props;
const isMacOS = platform === 'darwin';
// Restore focus on teardown
@@ -345,7 +394,11 @@ export function ShortcutGuide(props: Props): JSX.Element {
{i18n('icu:Keyboard--composer-header')}
- {getComposerShortcuts(i18n).map((shortcut, index) =>
+ {getComposerShortcuts(
+ i18n,
+ isFormattingFlagEnabled,
+ isFormattingSpoilersFlagEnabled
+ ).map((shortcut, index) =>
renderShortcut(shortcut, index, isMacOS, i18n)
)}
diff --git a/ts/components/ShortcutGuideModal.tsx b/ts/components/ShortcutGuideModal.tsx
index aee6f89fb77..28904289a5c 100644
--- a/ts/components/ShortcutGuideModal.tsx
+++ b/ts/components/ShortcutGuideModal.tsx
@@ -8,6 +8,8 @@ import { ShortcutGuide } from './ShortcutGuide';
export type PropsType = {
hasInstalledStickers: boolean;
+ isFormattingFlagEnabled: boolean;
+ isFormattingSpoilersFlagEnabled: boolean;
platform: string;
readonly closeShortcutGuideModal: () => unknown;
readonly i18n: LocalizerType;
@@ -16,8 +18,14 @@ export type PropsType = {
export const ShortcutGuideModal = React.memo(function ShortcutGuideModalInner(
props: PropsType
) {
- const { i18n, closeShortcutGuideModal, hasInstalledStickers, platform } =
- props;
+ const {
+ i18n,
+ closeShortcutGuideModal,
+ hasInstalledStickers,
+ isFormattingFlagEnabled,
+ isFormattingSpoilersFlagEnabled,
+ platform,
+ } = props;
const [root, setRoot] = React.useState(null);
React.useEffect(() => {
@@ -37,6 +45,8 @@ export const ShortcutGuideModal = React.memo(function ShortcutGuideModalInner(
diff --git a/ts/components/StoryViewer.tsx b/ts/components/StoryViewer.tsx
index eabf563cc9c..c295a5d75db 100644
--- a/ts/components/StoryViewer.tsx
+++ b/ts/components/StoryViewer.tsx
@@ -10,7 +10,7 @@ import React, {
useState,
} from 'react';
import classNames from 'classnames';
-import type { DraftBodyRangeMention } from '../types/BodyRange';
+import type { DraftBodyRanges } from '../types/BodyRange';
import type { LocalizerType } from '../types/Util';
import type { ContextMenuOptionType } from './ContextMenu';
import type {
@@ -84,6 +84,8 @@ export type PropsType = {
hasAllStoriesUnmuted: boolean;
hasViewReceiptSetting: boolean;
i18n: LocalizerType;
+ isFormattingEnabled: boolean;
+ isFormattingSpoilersEnabled: boolean;
isInternalUser?: boolean;
isSignalConversation?: boolean;
isWindowActive: boolean;
@@ -97,7 +99,7 @@ export type PropsType = {
onReactToStory: (emoji: string, story: StoryViewType) => unknown;
onReplyToStory: (
message: string,
- mentions: ReadonlyArray,
+ bodyRanges: DraftBodyRanges,
timestamp: number,
story: StoryViewType
) => unknown;
@@ -144,6 +146,8 @@ export function StoryViewer({
hasAllStoriesUnmuted,
hasViewReceiptSetting,
i18n,
+ isFormattingEnabled,
+ isFormattingSpoilersEnabled,
isInternalUser,
isSignalConversation,
isWindowActive,
@@ -933,6 +937,8 @@ export function StoryViewer({
hasViewsCapability={isSent}
i18n={i18n}
platform={platform}
+ isFormattingEnabled={isFormattingEnabled}
+ isFormattingSpoilersEnabled={isFormattingSpoilersEnabled}
isInternalUser={isInternalUser}
group={group}
onClose={() => setCurrentViewTarget(null)}
@@ -944,12 +950,12 @@ export function StoryViewer({
}
setReactionEmoji(emoji);
}}
- onReply={(message, mentions, replyTimestamp) => {
+ onReply={(message, replyBodyRanges, replyTimestamp) => {
if (!isGroupStory) {
setCurrentViewTarget(null);
showToast({ toastType: ToastType.StoryReply });
}
- onReplyToStory(message, mentions, replyTimestamp, story);
+ onReplyToStory(message, replyBodyRanges, replyTimestamp, story);
}}
onSetSkinTone={onSetSkinTone}
onTextTooLong={onTextTooLong}
diff --git a/ts/components/StoryViewsNRepliesModal.tsx b/ts/components/StoryViewsNRepliesModal.tsx
index 33e3ee76f41..4879eb5d5f3 100644
--- a/ts/components/StoryViewsNRepliesModal.tsx
+++ b/ts/components/StoryViewsNRepliesModal.tsx
@@ -11,7 +11,7 @@ import React, {
import classNames from 'classnames';
import { noop } from 'lodash';
-import type { DraftBodyRangeMention } from '../types/BodyRange';
+import type { DraftBodyRanges } from '../types/BodyRange';
import type { LocalizerType } from '../types/Util';
import type { ConversationType } from '../state/ducks/conversations';
import type { EmojiPickDataType } from './emoji/EmojiPicker';
@@ -89,13 +89,15 @@ export type PropsType = {
hasViewsCapability: boolean;
i18n: LocalizerType;
platform: string;
+ isFormattingEnabled: boolean;
+ isFormattingSpoilersEnabled: boolean;
isInternalUser?: boolean;
onChangeViewTarget: (target: StoryViewTargetType) => unknown;
onClose: () => unknown;
onReact: (emoji: string) => unknown;
onReply: (
message: string,
- mentions: ReadonlyArray,
+ bodyRanges: DraftBodyRanges,
timestamp: number
) => unknown;
onSetSkinTone: (tone: number) => unknown;
@@ -123,6 +125,8 @@ export function StoryViewsNRepliesModal({
hasViewsCapability,
i18n,
platform,
+ isFormattingEnabled,
+ isFormattingSpoilersEnabled,
isInternalUser,
onChangeViewTarget,
onClose,
@@ -233,6 +237,8 @@ export function StoryViewsNRepliesModal({
getPreferredBadge={getPreferredBadge}
i18n={i18n}
inputApi={inputApiRef}
+ isFormattingEnabled={isFormattingEnabled}
+ isFormattingSpoilersEnabled={isFormattingSpoilersEnabled}
moduleClassName="StoryViewsNRepliesModal__input"
onEditorStateChange={({ messageText }) => {
setMessageBodyText(messageText);
diff --git a/ts/components/conversation/MessageTextRenderer.tsx b/ts/components/conversation/MessageTextRenderer.tsx
index dc46f8eae9f..96d2c2c82e0 100644
--- a/ts/components/conversation/MessageTextRenderer.tsx
+++ b/ts/components/conversation/MessageTextRenderer.tsx
@@ -196,7 +196,7 @@ function renderNode({
);
}
- const content = renderMentions({
+ let content = renderMentions({
direction,
disableLinks,
emojiSizeClass,
@@ -206,13 +206,19 @@ function renderNode({
text: node.text,
});
+ // We use separate elements for these because we want screenreaders to understand them
+ if (node.isBold || node.isKeywordHighlight) {
+ content = {content};
+ }
+ if (node.isItalic) {
+ content = {content};
+ }
+ if (node.isStrikethrough) {
+ content = {content};
+ }
+
const formattingClasses = classNames(
- node.isBold ? 'MessageTextRenderer__formatting--bold' : null,
- node.isItalic ? 'MessageTextRenderer__formatting--italic' : null,
node.isMonospace ? 'MessageTextRenderer__formatting--monospace' : null,
- node.isStrikethrough
- ? 'MessageTextRenderer__formatting--strikethrough'
- : null,
node.isKeywordHighlight
? 'MessageTextRenderer__formatting--keywordHighlight'
: null,
diff --git a/ts/jobs/helpers/sendNormalMessage.ts b/ts/jobs/helpers/sendNormalMessage.ts
index 0c80cbf7f63..aaa74f32103 100644
--- a/ts/jobs/helpers/sendNormalMessage.ts
+++ b/ts/jobs/helpers/sendNormalMessage.ts
@@ -22,7 +22,7 @@ import type {
ReactionType,
} from '../../textsecure/SendMessage';
import type { LinkPreviewType } from '../../types/message/LinkPreviews';
-import { BodyRange } from '../../types/BodyRange';
+import type { RawBodyRange } from '../../types/BodyRange';
import type { StoryContextType } from '../../types/Util';
import type { LoggerType } from '../../types/Logging';
import type { StickerWithHydratedData } from '../../types/Stickers';
@@ -150,7 +150,7 @@ export async function sendNormalMessage(
contact,
deletedForEveryoneTimestamp,
expireTimer,
- mentions,
+ bodyRanges,
messageTimestamp,
preview,
quote,
@@ -208,6 +208,7 @@ export async function sendNormalMessage(
const dataMessage = await messaging.getDataMessage({
attachments,
body,
+ bodyRanges,
contact,
deletedForEveryoneTimestamp,
expireTimer,
@@ -252,6 +253,7 @@ export async function sendNormalMessage(
contentHint: ContentHint.RESENDABLE,
groupSendOptions: {
attachments,
+ bodyRanges,
contact,
deletedForEveryoneTimestamp,
expireTimer,
@@ -267,7 +269,6 @@ export async function sendNormalMessage(
storyContext,
reaction,
timestamp: messageTimestamp,
- mentions,
},
messageId,
sendOptions,
@@ -307,6 +308,7 @@ export async function sendNormalMessage(
log.info('sending direct message');
innerPromise = messaging.sendMessageToIdentifier({
attachments,
+ bodyRanges,
contact,
contentHint: ContentHint.RESENDABLE,
deletedForEveryoneTimestamp,
@@ -472,7 +474,7 @@ async function getMessageSendData({
contact?: Array;
deletedForEveryoneTimestamp: undefined | number;
expireTimer: undefined | DurationInSeconds;
- mentions: undefined | ReadonlyArray>;
+ bodyRanges: undefined | ReadonlyArray;
messageTimestamp: number;
preview: Array;
quote: QuotedMessageType | null;
@@ -539,7 +541,8 @@ async function getMessageSendData({
contact,
deletedForEveryoneTimestamp: message.get('deletedForEveryoneTimestamp'),
expireTimer: message.get('expireTimer'),
- mentions: message.get('bodyRanges')?.filter(BodyRange.isMention),
+ // TODO: we want filtration here if feature flag doesn't allow format/spoiler sends
+ bodyRanges: message.get('bodyRanges'),
messageTimestamp,
preview,
quote,
diff --git a/ts/main/settingsChannel.ts b/ts/main/settingsChannel.ts
index 24aad04dc6f..9135c4fec4e 100644
--- a/ts/main/settingsChannel.ts
+++ b/ts/main/settingsChannel.ts
@@ -62,6 +62,7 @@ export class SettingsChannel extends EventEmitter {
this.installCallback('isPrimary');
this.installCallback('syncRequest');
this.installCallback('isPhoneNumberSharingEnabled');
+ this.installCallback('isFormattingFlagEnabled');
this.installCallback('shouldShowStoriesSettings');
// Getters only. These are set by the primary device
@@ -87,6 +88,7 @@ export class SettingsChannel extends EventEmitter {
this.installSetting('spellCheck', {
isEphemeral: true,
});
+ this.installSetting('textFormatting');
this.installSetting('autoDownloadUpdate');
this.installSetting('autoLaunch');
diff --git a/ts/model-types.d.ts b/ts/model-types.d.ts
index 92721770a36..5712a468475 100644
--- a/ts/model-types.d.ts
+++ b/ts/model-types.d.ts
@@ -6,7 +6,7 @@
import * as Backbone from 'backbone';
import type { GroupV2ChangeType } from './groups';
-import type { DraftBodyRangeMention, RawBodyRange } from './types/BodyRange';
+import type { DraftBodyRanges, RawBodyRange } from './types/BodyRange';
import type { CallHistoryDetailsFromDiskType } from './types/Calling';
import type { CustomColorType, ConversationColorType } from './types/Colors';
import type { DeviceType } from './textsecure/Types.d';
@@ -298,7 +298,7 @@ export type ConversationAttributesType = {
firstUnregisteredAt?: number;
draftChanged?: boolean;
draftAttachments?: ReadonlyArray;
- draftBodyRanges?: ReadonlyArray;
+ draftBodyRanges?: DraftBodyRanges;
draftTimestamp?: number | null;
hideStory?: boolean;
inbox_position?: number;
diff --git a/ts/models/conversations.ts b/ts/models/conversations.ts
index fe8188bed8c..cfd16bee70f 100644
--- a/ts/models/conversations.ts
+++ b/ts/models/conversations.ts
@@ -84,7 +84,7 @@ import {
deriveAccessKey,
} from '../Crypto';
import * as Bytes from '../Bytes';
-import type { DraftBodyRangeMention } from '../types/BodyRange';
+import type { DraftBodyRanges } from '../types/BodyRange';
import { BodyRange, hydrateRanges } from '../types/BodyRange';
import { migrateColor } from '../util/migrateColor';
import { isNotNil } from '../util/isNotNil';
@@ -3870,7 +3870,7 @@ export class ConversationModel extends window.Backbone
}
private getDraftBodyRanges = memoizeByThis(
- (): ReadonlyArray | undefined => {
+ (): DraftBodyRanges | undefined => {
return this.get('draftBodyRanges');
}
);
@@ -4133,7 +4133,7 @@ export class ConversationModel extends window.Backbone
attachments,
body,
contact,
- mentions,
+ bodyRanges,
preview,
quote,
sticker,
@@ -4141,7 +4141,7 @@ export class ConversationModel extends window.Backbone
attachments: Array;
body: string | undefined;
contact?: Array;
- mentions?: ReadonlyArray>;
+ bodyRanges?: DraftBodyRanges;
preview?: Array;
quote?: QuotedMessageType;
sticker?: StickerWithHydratedData;
@@ -4239,7 +4239,7 @@ export class ConversationModel extends window.Backbone
readStatus: ReadStatus.Read,
seenStatus: SeenStatus.NotApplicable,
sticker,
- bodyRanges: mentions,
+ bodyRanges,
sendHQImages,
sendStateByConversationId: zipObject(
recipientConversationIds,
diff --git a/ts/quill/formatting/menu.tsx b/ts/quill/formatting/menu.tsx
new file mode 100644
index 00000000000..16054b1fc57
--- /dev/null
+++ b/ts/quill/formatting/menu.tsx
@@ -0,0 +1,323 @@
+// Copyright 2020 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type Quill from 'quill';
+import React from 'react';
+import classNames from 'classnames';
+import { Popper } from 'react-popper';
+import { createPortal } from 'react-dom';
+import type { VirtualElement } from '@popperjs/core';
+
+import * as log from '../../logging/log';
+import * as Errors from '../../types/errors';
+import type { LocalizerType } from '../../types/Util';
+import { handleOutsideClick } from '../../util/handleOutsideClick';
+
+type FormattingPickerOptions = {
+ i18n: LocalizerType;
+ isEnabled: boolean;
+ isSpoilersEnabled: boolean;
+ setFormattingChooserElement: (element: JSX.Element | null) => void;
+};
+
+export enum QuillFormattingStyle {
+ bold = 'bold',
+ italic = 'italic',
+ monospace = 'monospace',
+ strike = 'strike',
+ spoiler = 'spoiler',
+}
+
+export class FormattingMenu {
+ lastSelection: { start: number; end: number } | undefined;
+
+ options: FormattingPickerOptions;
+
+ outsideClickDestructor?: () => void;
+
+ quill: Quill;
+
+ referenceElement: VirtualElement | undefined;
+
+ root: HTMLDivElement;
+
+ constructor(quill: Quill, options: FormattingPickerOptions) {
+ this.quill = quill;
+ this.options = options;
+ this.root = document.body.appendChild(document.createElement('div'));
+
+ this.quill.on('editor-change', this.onEditorChange.bind(this));
+
+ // Note: Bold and Italic are built-in
+
+ this.quill.keyboard.addBinding({ key: 'E', shortKey: true }, () =>
+ this.toggleForStyle(QuillFormattingStyle.monospace)
+ );
+ this.quill.keyboard.addBinding(
+ { key: 'X', shortKey: true, shiftKey: true },
+ () => this.toggleForStyle(QuillFormattingStyle.strike)
+ );
+ this.quill.keyboard.addBinding(
+ { key: 'B', shortKey: true, shiftKey: true },
+ () => this.toggleForStyle(QuillFormattingStyle.spoiler)
+ );
+ }
+
+ destroy(): void {
+ this.root.remove();
+ }
+
+ updateOptions(options: Partial): void {
+ this.options = { ...this.options, ...options };
+ this.onEditorChange();
+ }
+
+ onEditorChange(): void {
+ if (!this.options.isEnabled) {
+ this.lastSelection = undefined;
+ this.referenceElement = undefined;
+ this.render();
+
+ return;
+ }
+
+ const isFocused = this.quill.hasFocus();
+ if (!isFocused) {
+ this.lastSelection = undefined;
+ this.referenceElement = undefined;
+ this.render();
+
+ return;
+ }
+
+ const previousSelection = this.lastSelection;
+ const quillSelection = this.quill.getSelection();
+ this.lastSelection =
+ quillSelection && quillSelection.length > 0
+ ? {
+ start: quillSelection.index,
+ end: quillSelection.index + quillSelection.length,
+ }
+ : undefined;
+
+ if (!this.lastSelection) {
+ this.referenceElement = undefined;
+ } else {
+ const noOverlapWithNewSelection =
+ previousSelection &&
+ (this.lastSelection.end < previousSelection.start ||
+ this.lastSelection.start > previousSelection.end);
+ const newSelectionStartsEarlier =
+ previousSelection && this.lastSelection.start < previousSelection.start;
+
+ if (noOverlapWithNewSelection || newSelectionStartsEarlier) {
+ this.referenceElement = undefined;
+ }
+ // a virtual reference to the text we are trying to format
+ this.referenceElement = this.referenceElement || {
+ getBoundingClientRect() {
+ const selection = window.getSelection();
+
+ // there's a selection and at least one range
+ if (selection != null && selection.rangeCount !== 0) {
+ // grab the first range, the one the user is actually on right now
+ const range = selection.getRangeAt(0);
+
+ const { activeElement } = document;
+ const editorElement = activeElement?.closest(
+ '.module-composition-input__input'
+ );
+
+ const rect = range.getClientRects()[0];
+
+ // If we've scrolled down and the top of the composer text is invisible, above
+ // where the editor ends, we fix the popover so it stays connected to the
+ // visible editor. Important for the 'Cmd-A' scenario when scrolled down.
+ const updatedY = Math.max(
+ editorElement?.getClientRects()[0]?.y || 0,
+ rect.y
+ );
+
+ return DOMRect.fromRect({
+ x: rect.x,
+ y: updatedY,
+ height: rect.height,
+ width: rect.width,
+ });
+ }
+ log.warn('No selection range when formatting text');
+ return new DOMRect(); // don't crash just because we couldn't get a rectangle
+ },
+ };
+ }
+
+ this.render();
+ }
+
+ isStyleEnabledInSelection(style: QuillFormattingStyle): boolean | undefined {
+ const selection = this.quill.getSelection();
+ if (!selection || !selection.length) {
+ return;
+ }
+ const contents = this.quill.getContents(selection.index, selection.length);
+ return contents.ops.every(op => op.attributes?.[style]);
+ }
+
+ toggleForStyle(style: QuillFormattingStyle): void {
+ try {
+ const isEnabled = this.isStyleEnabledInSelection(style);
+ if (isEnabled === undefined) {
+ return;
+ }
+ this.quill.format(style, !isEnabled);
+ } catch (error) {
+ log.error('toggleForStyle error:', Errors.toLogFormat(error));
+ }
+ }
+
+ render(): void {
+ if (!this.lastSelection) {
+ this.outsideClickDestructor?.();
+ this.outsideClickDestructor = undefined;
+
+ this.options.setFormattingChooserElement(null);
+
+ return;
+ }
+
+ const { i18n, isSpoilersEnabled } = this.options;
+
+ // showing the popup format menu
+ const element = createPortal(
+
+ {({ ref, style }) => (
+
+
+
+
+
+ {isSpoilersEnabled ? (
+
+ ) : null}
+