pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring split formatters - transformers

Browse Source
This commit is contained in:
or-else
2021-12-19 10:05:16 -08:00
parent afcb8d8616
commit ab7160170d
10 changed files with 658 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/formatters.js
+8 -16
View File
@@ -139,6 +139,9 @@ export function fullFormatter(style, data, values, key) {
const attr = Drafty.attrValue(style, data) || {}; const attr = Drafty.attrValue(style, data) || {};
attr.key = key; attr.key = key;
switch (style) { switch (style) {
case 'BR':
values = null;
break;
case 'HL': case 'HL':
// Highlighted text. Assign class name. // Highlighted text. Assign class name.
attr.className = 'highlight'; attr.className = 'highlight';
@@ -194,22 +197,12 @@ export function fullFormatter(style, data, values, key) {
return React.createElement(el, attr, values); return React.createElement(el, attr, values);
} }
// Unexported utility function: extract '➦' from mention if it's the first symbol,
// otherwise return the whole mention.
function extractMentionSymbol(content) {
if (Array.isArray(content) && content.length > 0) {
content = extractMentionSymbol(content[0]);
} else if (typeof content == 'string' && content.startsWith('➦')) {
content = ['➦'];
}
return content;
}
// Converts Drafty object into a one-line preview. 'this' is set by the caller. // Converts Drafty object into a one-line preview. 'this' is set by the caller.
// 'this' must contain: // 'this' must contain:
// formatMessage: this.props.intl.formatMessage // formatMessage: this.props.intl.formatMessage
// messages: formatjs messages defined with defineMessages. // messages: formatjs messages defined with defineMessages.
export function previewFormatter(style, data, values, key) { export function previewFormatter(style, data, values, key) {
console.log("Formatting (s, d, v, k):", style, data, values, key);
if (!style) { if (!style) {
// Unformatted. // Unformatted.
return values; return values;
@@ -233,12 +226,8 @@ export function previewFormatter(style, data, values, key) {
attr.className = 'highlight preview'; attr.className = 'highlight preview';
break; break;
case 'LN': case 'LN':
// Disable links in previews.
el = 'span';
break;
case 'MN': case 'MN':
// If mention starts with '➦', keep just that one symbol. // Disable links in previews.
values = extractMentionSymbol(values);
el = 'span'; el = 'span';
break; break;
case 'IM': case 'IM':
@@ -313,6 +302,9 @@ export function quoteFormatter(style, data, values, key) {
let attr = Drafty.attrValue(style, data) || {}; let attr = Drafty.attrValue(style, data) || {};
attr.key = key; attr.key = key;
switch(style) { switch(style) {
case 'BR':
values = null;
break;
case 'IM': case 'IM':
attr = inlineImageAttr.call(this, attr, data); attr = inlineImageAttr.call(this, attr, data);
values = [React.createElement('img', attr, null), ' ', attr.alt]; values = [React.createElement('img', attr, null), ' ', attr.alt];
src/views/tinode-web.jsx
+3 -1
View File
@@ -16,7 +16,7 @@ import MessagesView from './messages-view.jsx';
import SidepanelView from './sidepanel-view.jsx'; import SidepanelView from './sidepanel-view.jsx';
import { API_KEY, APP_NAME, DEFAULT_P2P_ACCESS_MODE, FORWARDED_PREVIEW_LENGTH, LOGGING_ENABLED, import { API_KEY, APP_NAME, DEFAULT_P2P_ACCESS_MODE, FORWARDED_PREVIEW_LENGTH, LOGGING_ENABLED,
MEDIA_BREAKPOINT, QUOTED_REPLY_LENGTH, RECEIVED_DELAY } from '../config.js'; MEDIA_BREAKPOINT, RECEIVED_DELAY } from '../config.js';
import { PACKAGE_VERSION } from '../version.js'; import { PACKAGE_VERSION } from '../version.js';
import { base64ReEncode, makeImageUrl } from '../lib/blob-helpers.js'; import { base64ReEncode, makeImageUrl } from '../lib/blob-helpers.js';
import { detectServerAddress, isLocalHost, isSecureConnection } from '../lib/host-name.js'; import { detectServerAddress, isLocalHost, isSecureConnection } from '../lib/host-name.js';
@@ -1448,12 +1448,14 @@ class TinodeWeb extends React.Component {
}); });
} }
//
handleShowForwardDialog(params) { handleShowForwardDialog(params) {
if (this.state.sidePanelSelected == 'newtpk') { if (this.state.sidePanelSelected == 'newtpk') {
// If the Find panel is active, close it. // If the Find panel is active, close it.
this.handleSidepanelCancel(); this.handleSidepanelCancel();
} }
const header = '➦ ' + params.userName; const header = '➦ ' + params.userName;
// params.forwarded means the source message is also a forwarded message.
const content = params.forwarded ? const content = params.forwarded ?
Tinode.Drafty.forwardedContent(params.content) : Tinode.Drafty.forwardedContent(params.content) :
typeof params.content == 'string' ? typeof params.content == 'string' ?
src/widgets/contact-list.jsx
+2 -1
View File
@@ -86,9 +86,10 @@ class ContactList extends React.Component {
deliveryStatus = msg._status || c.msgStatus(msg, true); deliveryStatus = msg._status || c.msgStatus(msg, true);
preview = typeof msg.content == 'string' ? preview = typeof msg.content == 'string' ?
msg.content.substr(0, MESSAGE_PREVIEW_LENGTH) : msg.content.substr(0, MESSAGE_PREVIEW_LENGTH) :
Drafty.preview(msg.content, MESSAGE_PREVIEW_LENGTH, undefined, forwarded != null); Drafty.preview(msg.content, MESSAGE_PREVIEW_LENGTH);
} }
} }
contactNodes.push( contactNodes.push(
<Contact <Contact
tinode={this.props.tinode} tinode={this.props.tinode}
src/widgets/contact.jsx
+12 -9
View File
@@ -69,17 +69,20 @@ class Contact extends React.Component {
} }
} }
const subtitle = this.props.preview ? // The this.props.preview contains alreay shortened Drafty or string.
(typeof this.props.preview == 'string' ? this.props.preview : let preview;
Drafty.isValid(this.props.preview) ? if (typeof this.props.preview == 'string') {
React.createElement(React.Fragment, null, Drafty.format(this.props.preview, previewFormatter, preview = this.props.preview;
{formatMessage: this.props.intl.formatMessage})) : } else if (Drafty.isValid(this.props.preview)) {
preview = React.createElement(React.Fragment, null, Drafty.format(this.props.preview, previewFormatter,
{formatMessage: this.props.intl.formatMessage}));
} else if (this.props.preview) {
preview =
<><i className="material-icons gray">warning_amber</i> <i className="gray"> <><i className="material-icons gray">warning_amber</i> <i className="gray">
<FormattedMessage id="invalid_content" <FormattedMessage id="invalid_content"
defaultMessage="invalid content" description="Shown when the message is unreadable" /></i> defaultMessage="invalid content" description="Shown when the message is unreadable" /></i>
</> </>;
) : }
this.props.comment;
const icon = deliveryMarker(this.props.received); const icon = deliveryMarker(this.props.received);
const marker = icon ? <i className={'material-icons small space-right' + const marker = icon ? <i className={'material-icons small space-right' +
@@ -105,7 +108,7 @@ class Contact extends React.Component {
</div> </div>
{this.props.showMode ? {this.props.showMode ?
<span><ContactBadges badges={badges} /></span> : <span><ContactBadges badges={badges} /></span> :
this.props.small ? null : <div className="contact-comment">{marker}<span>{subtitle || '\u00A0'}</span></div>} this.props.small ? null : <div className="contact-comment">{marker}<span>{preview || this.props.comment || '\u00A0'}</span></div>}
</div> </div>
{this.props.showContextMenu ? {this.props.showContextMenu ?
<span className="menuTrigger"> <span className="menuTrigger">
umd/index.dev.js
+34 -30
View File
@@ -546,6 +546,10 @@ function fullFormatter(style, data, values, key) {
attr.key = key; attr.key = key;
switch (style) { switch (style) {
case 'BR':
values = null;
break;
case 'HL': case 'HL':
attr.className = 'highlight'; attr.className = 'highlight';
break; break;
@@ -606,18 +610,9 @@ function fullFormatter(style, data, values, key) {
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(el, attr, values); return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(el, attr, values);
} }
function extractMentionSymbol(content) {
if (Array.isArray(content) && content.length > 0) {
content = extractMentionSymbol(content[0]);
} else if (typeof content == 'string' && content.startsWith('➦')) {
content = ['➦'];
}
return content;
}
function previewFormatter(style, data, values, key) { function previewFormatter(style, data, values, key) {
console.log("Formatting (s, d, v, k):", style, data, values, key);
if (!style) { if (!style) {
return values; return values;
} }
@@ -642,11 +637,7 @@ function previewFormatter(style, data, values, key) {
break; break;
case 'LN': case 'LN':
el = 'span';
break;
case 'MN': case 'MN':
values = extractMentionSymbol(values);
el = 'span'; el = 'span';
break; break;
@@ -737,6 +728,10 @@ function quoteFormatter(style, data, values, key) {
attr.key = key; attr.key = key;
switch (style) { switch (style) {
case 'BR':
values = null;
break;
case 'IM': case 'IM':
attr = inlineImageAttr.call(this, attr, data); attr = inlineImageAttr.call(this, attr, data);
values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement('img', attr, null), ' ', attr.alt]; values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement('img', attr, null), ' ', attr.alt];
@@ -8493,7 +8488,7 @@ class ContactList extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
if (msg) { if (msg) {
forwarded = msg.head ? msg.head.forwarded : null; forwarded = msg.head ? msg.head.forwarded : null;
deliveryStatus = msg._status || c.msgStatus(msg, true); deliveryStatus = msg._status || c.msgStatus(msg, true);
preview = typeof msg.content == 'string' ? msg.content.substr(0, _config_js__WEBPACK_IMPORTED_MODULE_6__.MESSAGE_PREVIEW_LENGTH) : tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.preview(msg.content, _config_js__WEBPACK_IMPORTED_MODULE_6__.MESSAGE_PREVIEW_LENGTH, undefined, forwarded != null); preview = typeof msg.content == 'string' ? msg.content.substr(0, _config_js__WEBPACK_IMPORTED_MODULE_6__.MESSAGE_PREVIEW_LENGTH) : tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.preview(msg.content, _config_js__WEBPACK_IMPORTED_MODULE_6__.MESSAGE_PREVIEW_LENGTH);
} }
} }
@@ -8667,19 +8662,28 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
} }
} }
const subtitle = this.props.preview ? typeof this.props.preview == 'string' ? this.props.preview : tinode_sdk__WEBPACK_IMPORTED_MODULE_6__.Drafty.isValid(this.props.preview) ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, tinode_sdk__WEBPACK_IMPORTED_MODULE_6__.Drafty.format(this.props.preview, _lib_formatters_js__WEBPACK_IMPORTED_MODULE_7__.previewFormatter, { let preview;
formatMessage: this.props.intl.formatMessage
})) : react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", { if (typeof this.props.preview == 'string') {
className: "material-icons gray" preview = this.props.preview;
}, "warning_amber"), " ", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", { } else if (tinode_sdk__WEBPACK_IMPORTED_MODULE_6__.Drafty.isValid(this.props.preview)) {
className: "gray" preview = react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, tinode_sdk__WEBPACK_IMPORTED_MODULE_6__.Drafty.format(this.props.preview, _lib_formatters_js__WEBPACK_IMPORTED_MODULE_7__.previewFormatter, {
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, { formatMessage: this.props.intl.formatMessage
id: "invalid_content", }));
defaultMessage: [{ } else if (this.props.preview) {
"type": 0, preview = react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
"value": "invalid content" className: "material-icons gray"
}] }, "warning_amber"), " ", react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
}))) : this.props.comment; className: "gray"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
id: "invalid_content",
defaultMessage: [{
"type": 0,
"value": "invalid content"
}]
})));
}
const icon = (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_8__.deliveryMarker)(this.props.received); const icon = (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_8__.deliveryMarker)(this.props.received);
const marker = icon ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", { const marker = icon ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: 'material-icons small space-right' + (icon.color ? ' ' + icon.color : '') className: 'material-icons small space-right' + (icon.color ? ' ' + icon.color : '')
@@ -8714,7 +8718,7 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
badges: badges badges: badges
})) : this.props.small ? null : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { })) : this.props.small ? null : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
className: "contact-comment" className: "contact-comment"
}, marker, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, subtitle || '\u00A0'))), this.props.showContextMenu ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", { }, marker, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, preview || this.props.comment || '\u00A0'))), this.props.showContextMenu ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
className: "menuTrigger" className: "menuTrigger"
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", { }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
href: "#", href: "#",
umd/index.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/tinode.dev.js
+595 -437
View File
File diff suppressed because one or more lines are too long
umd/tinode.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long