From 56956c224bc2ec10d0940dbac90cdf92d9080cb7 Mon Sep 17 00:00:00 2001 From: Mechiel Lukkien Date: Sat, 14 Oct 2023 14:47:24 +0200 Subject: [PATCH] webmail: when quoting text that switches unicode blocks (as highlighted), don't lose the switched text by using a String object as the textarea child. instead of a regular js string that would be unicode-block-switch-highlighted, which would cause it to be split into parts, with odd or even parts added as span elements, which the textarea would then ignore. --- webmail/lib.ts | 6 +++++- webmail/msg.js | 5 +++++ webmail/text.js | 5 +++++ webmail/webmail.js | 10 +++++++++- webmail/webmail.ts | 4 +++- 5 files changed, 27 insertions(+), 3 deletions(-) diff --git a/webmail/lib.ts b/webmail/lib.ts index 8dab969326..cbb50a670b 100644 --- a/webmail/lib.ts +++ b/webmail/lib.ts @@ -1,6 +1,6 @@ // Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten. -type ElemArg = string | Element | Function | {_class: string[]} | {_attrs: {[k: string]: string}} | {_styles: {[k: string]: string | number}} | {_props: {[k: string]: any}} | {root: HTMLElement} | ElemArg[] +type ElemArg = string | String | Element | Function | {_class: string[]} | {_attrs: {[k: string]: string}} | {_styles: {[k: string]: string | number}} | {_props: {[k: string]: any}} | {root: HTMLElement} | ElemArg[] const [dom, style, attr, prop] = (function() { @@ -95,6 +95,10 @@ const _domKids = (e: T, l: ElemArg[]): T => { const xc = c as {[k: string]: any} if (typeof c === 'string') { formatText(e, c) + } else if (c instanceof String) { + // String is an escape-hatch for text that should not be formatted with + // unicode-block-change-highlighting, e.g. for textarea values. + e.appendChild(document.createTextNode(''+c)) } else if (c instanceof Element) { e.appendChild(c) } else if (c instanceof Function) { diff --git a/webmail/msg.js b/webmail/msg.js index aa7429e9ac..2e406860d5 100644 --- a/webmail/msg.js +++ b/webmail/msg.js @@ -711,6 +711,11 @@ const [dom, style, attr, prop] = (function () { if (typeof c === 'string') { formatText(e, c); } + else if (c instanceof String) { + // String is an escape-hatch for text that should not be formatted with + // unicode-block-change-highlighting, e.g. for textarea values. + e.appendChild(document.createTextNode('' + c)); + } else if (c instanceof Element) { e.appendChild(c); } diff --git a/webmail/text.js b/webmail/text.js index f47dff62ef..e82608c6ed 100644 --- a/webmail/text.js +++ b/webmail/text.js @@ -711,6 +711,11 @@ const [dom, style, attr, prop] = (function () { if (typeof c === 'string') { formatText(e, c); } + else if (c instanceof String) { + // String is an escape-hatch for text that should not be formatted with + // unicode-block-change-highlighting, e.g. for textarea values. + e.appendChild(document.createTextNode('' + c)); + } else if (c instanceof Element) { e.appendChild(c); } diff --git a/webmail/webmail.js b/webmail/webmail.js index bf662b0823..6fb30472f7 100644 --- a/webmail/webmail.js +++ b/webmail/webmail.js @@ -711,6 +711,11 @@ const [dom, style, attr, prop] = (function () { if (typeof c === 'string') { formatText(e, c); } + else if (c instanceof String) { + // String is an escape-hatch for text that should not be formatted with + // unicode-block-change-highlighting, e.g. for textarea values. + e.appendChild(document.createTextNode('' + c)); + } else if (c instanceof Element) { e.appendChild(c); } @@ -2145,7 +2150,10 @@ const compose = (opts) => { maxWidth: '70em', width: '40%', borderRadius: '.25em', - }), dom.form(fieldset = dom.fieldset(dom.table(style({ width: '100%' }), dom.tr(dom.td(style({ textAlign: 'right', color: '#555' }), dom.span('From:')), dom.td(dom.clickbutton('Cancel', style({ float: 'right' }), attr.title('Close window, discarding message.'), clickCmd(cmdCancel, shortcuts)), from = dom.select(attr.required(''), style({ width: 'auto' }), fromOptions), ' ', toBtn = dom.clickbutton('To', clickCmd(cmdAddTo, shortcuts)), ' ', ccBtn = dom.clickbutton('Cc', clickCmd(cmdAddCc, shortcuts)), ' ', bccBtn = dom.clickbutton('Bcc', clickCmd(cmdAddBcc, shortcuts)), ' ', replyToBtn = dom.clickbutton('ReplyTo', clickCmd(cmdReplyTo, shortcuts)), ' ', customFromBtn = dom.clickbutton('From', attr.title('Set custom From address/name.'), clickCmd(cmdCustomFrom, shortcuts)))), toRow = dom.tr(dom.td('To:', style({ textAlign: 'right', color: '#555' })), toCell = dom.td(style({ width: '100%' }))), replyToRow = dom.tr(dom.td('Reply-To:', style({ textAlign: 'right', color: '#555' })), replyToCell = dom.td(style({ width: '100%' }))), ccRow = dom.tr(dom.td('Cc:', style({ textAlign: 'right', color: '#555' })), ccCell = dom.td(style({ width: '100%' }))), bccRow = dom.tr(dom.td('Bcc:', style({ textAlign: 'right', color: '#555' })), bccCell = dom.td(style({ width: '100%' }))), dom.tr(dom.td('Subject:', style({ textAlign: 'right', color: '#555' })), dom.td(style({ width: '100%' }), subject = dom.input(focusPlaceholder('subject...'), attr.value(opts.subject || ''), attr.required(''), style({ width: '100%' }))))), body = dom.textarea(dom._class('mono'), attr.rows('15'), style({ width: '100%' }), opts.body || '', opts.body && !opts.isForward && !opts.body.startsWith('\n\n') ? prop({ selectionStart: opts.body.length, selectionEnd: opts.body.length }) : [], function keyup(e) { + }), dom.form(fieldset = dom.fieldset(dom.table(style({ width: '100%' }), dom.tr(dom.td(style({ textAlign: 'right', color: '#555' }), dom.span('From:')), dom.td(dom.clickbutton('Cancel', style({ float: 'right' }), attr.title('Close window, discarding message.'), clickCmd(cmdCancel, shortcuts)), from = dom.select(attr.required(''), style({ width: 'auto' }), fromOptions), ' ', toBtn = dom.clickbutton('To', clickCmd(cmdAddTo, shortcuts)), ' ', ccBtn = dom.clickbutton('Cc', clickCmd(cmdAddCc, shortcuts)), ' ', bccBtn = dom.clickbutton('Bcc', clickCmd(cmdAddBcc, shortcuts)), ' ', replyToBtn = dom.clickbutton('ReplyTo', clickCmd(cmdReplyTo, shortcuts)), ' ', customFromBtn = dom.clickbutton('From', attr.title('Set custom From address/name.'), clickCmd(cmdCustomFrom, shortcuts)))), toRow = dom.tr(dom.td('To:', style({ textAlign: 'right', color: '#555' })), toCell = dom.td(style({ width: '100%' }))), replyToRow = dom.tr(dom.td('Reply-To:', style({ textAlign: 'right', color: '#555' })), replyToCell = dom.td(style({ width: '100%' }))), ccRow = dom.tr(dom.td('Cc:', style({ textAlign: 'right', color: '#555' })), ccCell = dom.td(style({ width: '100%' }))), bccRow = dom.tr(dom.td('Bcc:', style({ textAlign: 'right', color: '#555' })), bccCell = dom.td(style({ width: '100%' }))), dom.tr(dom.td('Subject:', style({ textAlign: 'right', color: '#555' })), dom.td(style({ width: '100%' }), subject = dom.input(focusPlaceholder('subject...'), attr.value(opts.subject || ''), attr.required(''), style({ width: '100%' }))))), body = dom.textarea(dom._class('mono'), attr.rows('15'), style({ width: '100%' }), + // Explicit string object so it doesn't get the highlight-unicode-block-changes + // treatment, which would cause characters to disappear. + new String(opts.body || ''), opts.body && !opts.isForward && !opts.body.startsWith('\n\n') ? prop({ selectionStart: opts.body.length, selectionEnd: opts.body.length }) : [], function keyup(e) { if (e.key === 'Enter') { checkAttachments(); } diff --git a/webmail/webmail.ts b/webmail/webmail.ts index 7c6147b01f..8a98844d58 100644 --- a/webmail/webmail.ts +++ b/webmail/webmail.ts @@ -1427,7 +1427,9 @@ const compose = (opts: ComposeOptions) => { ), ), body=dom.textarea(dom._class('mono'), attr.rows('15'), style({width: '100%'}), - opts.body || '', + // Explicit string object so it doesn't get the highlight-unicode-block-changes + // treatment, which would cause characters to disappear. + new String(opts.body || ''), opts.body && !opts.isForward && !opts.body.startsWith('\n\n') ? prop({selectionStart: opts.body.length, selectionEnd: opts.body.length}) : [], function keyup(e: KeyboardEvent) { if (e.key === 'Enter') {