Better handling of formatting in pasted text
This commit is contained in:
parent
d012779e87
commit
a31cf5645e
12 changed files with 105 additions and 43 deletions
|
@ -188,6 +188,7 @@ import { setBatchingStrategy } from './util/messageBatcher';
|
|||
import { parseRemoteClientExpiration } from './util/parseRemoteClientExpiration';
|
||||
import { makeLookup } from './util/makeLookup';
|
||||
import { addGlobalKeyboardShortcuts } from './services/addGlobalKeyboardShortcuts';
|
||||
import { handleCopyEvent } from './quill/signal-clipboard/util';
|
||||
|
||||
export function isOverHourIntoPast(timestamp: number): boolean {
|
||||
return isNumber(timestamp) && isOlderThan(timestamp, HOUR);
|
||||
|
@ -550,6 +551,9 @@ export async function startApp(): Promise<void> {
|
|||
false
|
||||
);
|
||||
|
||||
// Intercept clipboard copies to add our custom text/signal data
|
||||
document.addEventListener('copy', handleCopyEvent);
|
||||
|
||||
startInteractionMode();
|
||||
|
||||
// We add this to window here because the default Node context is erased at the end
|
||||
|
|
|
@ -15,7 +15,6 @@ import type {
|
|||
RangeNode,
|
||||
} from '../../types/BodyRange';
|
||||
import {
|
||||
SPOILER_REPLACEMENT,
|
||||
BodyRange,
|
||||
insertRange,
|
||||
collapseRangeTree,
|
||||
|
@ -215,12 +214,6 @@ function renderNode({
|
|||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
aria-hidden
|
||||
className="MessageTextRenderer__formatting--spoiler--copy-target"
|
||||
>
|
||||
{SPOILER_REPLACEMENT}
|
||||
</span>
|
||||
<span aria-hidden>{content}</span>
|
||||
</span>
|
||||
);
|
||||
|
|
|
@ -29,15 +29,15 @@ export function TimelineDateHeader({
|
|||
}, [i18n, timestamp]);
|
||||
|
||||
return (
|
||||
<Time
|
||||
<div
|
||||
className={classNames(
|
||||
'TimelineDateHeader',
|
||||
`TimelineDateHeader--${floating ? 'floating' : 'inline'}`
|
||||
)}
|
||||
dateOnly
|
||||
timestamp={timestamp}
|
||||
>
|
||||
{text}
|
||||
</Time>
|
||||
<Time dateOnly timestamp={timestamp}>
|
||||
{text}
|
||||
</Time>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -6,9 +6,8 @@ import { insertEmojiOps } from '../util';
|
|||
|
||||
export const matchEmojiImage = (node: Element, delta: Delta): Delta => {
|
||||
if (
|
||||
(node.classList.contains('emoji') ||
|
||||
node.classList.contains('module-emoji__image--16px')) &&
|
||||
!node.classList.contains('emoji--invisible')
|
||||
node.classList.contains('emoji') ||
|
||||
node.classList.contains('module-emoji__image--16px')
|
||||
) {
|
||||
const emoji = node.getAttribute('aria-label');
|
||||
return new Delta().insert({ emoji });
|
||||
|
|
|
@ -64,8 +64,8 @@ export const matchMonospace = (node: HTMLElement, delta: Delta): Delta => {
|
|||
export const matchSpoiler = (node: HTMLElement, delta: Delta): Delta => {
|
||||
const classes = [
|
||||
'quill--spoiler',
|
||||
'MessageTextRenderer__formatting--spoiler',
|
||||
'MessageTextRenderer__formatting--spoiler--revealed',
|
||||
// Note: we don't match on hidden spoilers in message body; we use copy-target text
|
||||
];
|
||||
|
||||
if (
|
||||
|
|
|
@ -13,10 +13,7 @@ export const matchMention =
|
|||
if (memberRepository) {
|
||||
const { title } = node.dataset;
|
||||
|
||||
if (
|
||||
node.classList.contains('MessageBody__at-mention') &&
|
||||
!node.classList.contains('MessageBody__at-mention--invisible')
|
||||
) {
|
||||
if (node.classList.contains('MessageBody__at-mention')) {
|
||||
const { id } = node.dataset;
|
||||
const conversation = memberRepository.getMemberById(id);
|
||||
|
||||
|
|
|
@ -46,17 +46,17 @@ export class SignalClipboard {
|
|||
}
|
||||
|
||||
const text = event.clipboardData.getData('text/plain');
|
||||
const html = event.clipboardData.getData('text/html');
|
||||
const signal = event.clipboardData.getData('text/signal');
|
||||
|
||||
if (!text && !html) {
|
||||
if (!text && !signal) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
const clipboardDelta = html
|
||||
? clipboard.convert(html)
|
||||
const clipboardDelta = signal
|
||||
? clipboard.convert(signal)
|
||||
: clipboard.convert(replaceAngleBrackets(text));
|
||||
|
||||
const { scrollTop } = this.quill.scrollingContainer;
|
||||
|
|
64
ts/quill/signal-clipboard/util.ts
Normal file
64
ts/quill/signal-clipboard/util.ts
Normal file
|
@ -0,0 +1,64 @@
|
|||
// Copyright 2023 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
export function handleCopyEvent(event: ClipboardEvent): void {
|
||||
if (!event.clipboardData) {
|
||||
return;
|
||||
}
|
||||
|
||||
const selection = window.getSelection();
|
||||
if (!selection) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create synthetic html with the full selection we can put into clipboard
|
||||
const container = document.createElement('div');
|
||||
for (let i = 0, max = selection.rangeCount; i < max; i += 1) {
|
||||
const range = selection.getRangeAt(i);
|
||||
container.appendChild(range.cloneContents());
|
||||
}
|
||||
|
||||
// Note: we can't leave text/plain alone and just add text/signal; if we update
|
||||
// clipboardData at all, all other data is reset.
|
||||
const plaintext = getStringFromNode(container);
|
||||
event.clipboardData?.setData('text/plain', plaintext);
|
||||
|
||||
event.clipboardData?.setData('text/signal', container.innerHTML);
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function getStringFromNode(node: Node): string {
|
||||
if (node.nodeType === Node.TEXT_NODE) {
|
||||
return node.textContent || '';
|
||||
}
|
||||
if (node.nodeType !== Node.ELEMENT_NODE) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const element = node as Element;
|
||||
if (element.nodeName === 'IMG' && element.classList.contains('emoji')) {
|
||||
return element.ariaLabel || '';
|
||||
}
|
||||
if (element.nodeName === 'BR') {
|
||||
return '\n';
|
||||
}
|
||||
if (element.childNodes.length === 0) {
|
||||
return element.textContent || '';
|
||||
}
|
||||
let result = '';
|
||||
for (const child of element.childNodes) {
|
||||
result += getStringFromNode(child);
|
||||
}
|
||||
if (
|
||||
element.nodeName === 'P' ||
|
||||
element.nodeName === 'DIV' ||
|
||||
element.nodeName === 'TIME'
|
||||
) {
|
||||
if (result.length > 0 && !result.endsWith('\n\n')) {
|
||||
result += '\n';
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
|
@ -2552,6 +2552,14 @@
|
|||
"updated": "2023-04-22T00:07:56.294Z",
|
||||
"reasonDetail": "We need a persistent timer to track long-hovers"
|
||||
},
|
||||
{
|
||||
"rule": "DOM-innerHTML",
|
||||
"path": "ts/quill/signal-clipboard/util.ts",
|
||||
"line": " event.clipboardData?.setData('text/signal', container.innerHTML);",
|
||||
"reasonCategory": "regexMatchedSafeCode",
|
||||
"updated": "2023-05-22T23:45:02.074Z",
|
||||
"reasonDetail": "Reading from innerHTML, not setting it"
|
||||
},
|
||||
{
|
||||
"rule": "React-useRef",
|
||||
"path": "ts/state/smart/InstallScreen.tsx",
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue