diff --git a/KNOWN_ISSUES.md b/KNOWN_ISSUES.md new file mode 100644 index 000000000000..9ab0a11c366a --- /dev/null +++ b/KNOWN_ISSUES.md @@ -0,0 +1,6 @@ +## `registerFieldTemplate` is deprecated + hmm it's true :(, we don't encourage this type of customization anymore, it ends up opening some security holes, we prefer the use of UIKit. If you feel any difficulty let us know +## `attachment.actions` is deprecated + same reason above +## `attachment PDF preview` is no longer being rendered + it is temporarily disabled, nowadays is huge effort render the previews and requires the download of the entire file on the client. We are working to improve this :) \ No newline at end of file diff --git a/app/message-action/client/index.js b/app/message-action/client/index.js deleted file mode 100644 index 7a623b88f1ef..000000000000 --- a/app/message-action/client/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import './messageAction.html'; -import './messageAction'; -import './stylesheets/messageAction.css'; diff --git a/app/message-action/client/messageAction.html b/app/message-action/client/messageAction.html deleted file mode 100644 index 8d6c73566772..000000000000 --- a/app/message-action/client/messageAction.html +++ /dev/null @@ -1,31 +0,0 @@ - diff --git a/app/message-action/client/messageAction.js b/app/message-action/client/messageAction.js deleted file mode 100644 index 025c06db224a..000000000000 --- a/app/message-action/client/messageAction.js +++ /dev/null @@ -1,13 +0,0 @@ -import { Template } from 'meteor/templating'; - -Template.messageAction.helpers({ - isButton() { - return this.type === 'button'; - }, - areButtonsHorizontal() { - return Template.parentData(1).button_alignment === 'horizontal'; - }, - jsActionButtonClassname(processingType) { - return `js-actionButton-${ processingType || 'sendMessage' }`; - }, -}); diff --git a/app/message-action/client/stylesheets/messageAction.css b/app/message-action/client/stylesheets/messageAction.css deleted file mode 100644 index 5ff7235f858a..000000000000 --- a/app/message-action/client/stylesheets/messageAction.css +++ /dev/null @@ -1,64 +0,0 @@ -.attachment { - & .action { - margin-top: 2px; - } - - & .text-button { - - position: relative; - - display: inline-flex; - - min-width: 0; - max-width: 220px; - - height: 28px; - margin: 2px 2px 2px 0; - padding: 0 10px; - - cursor: pointer; - user-select: none; - - text-align: center; - - vertical-align: middle; - white-space: nowrap; - - text-decoration: none; - - color: #2c2d30; - - border: 2px solid lightgray; - border-radius: 4px; - - outline: none; - - background: rgb(250, 250, 250); - - font-size: 13px; - - font-weight: 500; - align-items: center; - -webkit-appearance: none; - justify-content: center; - -webkit-tap-highlight-color: transparent; - } - - & .overflow-ellipsis { - display: block; - - overflow: hidden; - - white-space: nowrap; - - text-overflow: ellipsis; - } - - & .image-button { - max-height: 200px; - } - - & .horizontal-buttons { - display: inline; - } -} diff --git a/app/message-action/index.js b/app/message-action/index.js deleted file mode 100644 index 40a7340d3887..000000000000 --- a/app/message-action/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './client/index'; diff --git a/app/message-attachments/client/index.js b/app/message-attachments/client/index.js index be13cfc60615..3dfb9dc37361 100644 --- a/app/message-attachments/client/index.js +++ b/app/message-attachments/client/index.js @@ -1,6 +1 @@ -import './messageAttachment.html'; -import './messageAttachment'; -import './renderField.html'; -import './stylesheets/messageAttachments.css'; - export { registerFieldTemplate } from './renderField'; diff --git a/app/message-attachments/client/messageAttachment.html b/app/message-attachments/client/messageAttachment.html deleted file mode 100644 index 5eb34a008123..000000000000 --- a/app/message-attachments/client/messageAttachment.html +++ /dev/null @@ -1,178 +0,0 @@ - diff --git a/app/message-attachments/client/messageAttachment.js b/app/message-attachments/client/messageAttachment.js deleted file mode 100644 index 25be63786461..000000000000 --- a/app/message-attachments/client/messageAttachment.js +++ /dev/null @@ -1,150 +0,0 @@ -import { Meteor } from 'meteor/meteor'; -import { Template } from 'meteor/templating'; - -import { DateFormat } from '../../lib'; -import { getURL } from '../../utils/client'; -import { createCollapseable } from '../../ui-utils'; -import { renderMessageBody } from '../../../client/lib/renderMessageBody'; - -const colors = { - good: '#35AC19', - warning: '#FCB316', - danger: '#D30230', -}; - -async function renderPdfToCanvas(canvasId, pdfLink) { - const isSafari = /constructor/i.test(window.HTMLElement) - || ((p) => p.toString() === '[object SafariRemoteNotification]')(!window.safari - || (typeof window.safari !== 'undefined' && window.safari.pushNotification)); - - if (isSafari) { - const [, version] = /Version\/([0-9]+)/.exec(navigator.userAgent) || [null, 0]; - if (version <= 12) { - return; - } - } - - if (!pdfLink || !/\.pdf$/i.test(pdfLink)) { - return; - } - pdfLink = getURL(pdfLink); - - const canvas = document.getElementById(canvasId); - if (!canvas) { - return; - } - - const pdfjsLib = await import('pdfjs-dist'); - pdfjsLib.GlobalWorkerOptions.workerSrc = `${ Meteor.absoluteUrl() }pdf.worker.min.js`; - - const loader = document.getElementById(`js-loading-${ canvasId }`); - - if (loader) { - loader.style.display = 'block'; - } - - const pdf = await pdfjsLib.getDocument(pdfLink).promise; - const page = await pdf.getPage(1); - const scale = 0.5; - const viewport = page.getViewport({ scale }); - const context = canvas.getContext('2d'); - canvas.height = viewport.height; - canvas.width = viewport.width; - await page.render({ - canvasContext: context, - viewport, - }).promise; - - if (loader) { - loader.style.display = 'none'; - } - - canvas.style.maxWidth = '-webkit-fill-available'; - canvas.style.maxWidth = '-moz-available'; - canvas.style.display = 'block'; -} - -createCollapseable(Template.messageAttachment, (instance) => (instance.data && (instance.data.collapsed || (instance.data.settings && instance.data.settings.collapseMediaByDefault))) || false); - -Template.messageAttachment.helpers({ - parsedText() { - return renderMessageBody({ - msg: this.text, - }); - }, - markdownInPretext() { - return this.mrkdwn_in && this.mrkdwn_in.includes('pretext'); - }, - parsedPretext() { - return renderMessageBody({ - msg: this.pretext, - }); - }, - loadImage() { - if (this.downloadImages) { - return true; - } - - if (this.settings.autoImageLoad === false) { - return false; - } - - if (this.settings.saveMobileBandwidth === true) { - return false; - } - - return true; - }, - getImageHeight(height = 200) { - return height; - }, - color() { - return colors[this.color] || this.color; - }, - time() { - const messageDate = new Date(this.ts); - const today = new Date(); - if (messageDate.toDateString() === today.toDateString()) { - return DateFormat.formatTime(this.ts); - } - return DateFormat.formatDateAndTime(this.ts); - }, - injectIndex(data, previousIndex, index) { - data.index = `${ previousIndex }.attachments.${ index }`; - }, - injectSettings(data, settings) { - data.settings = settings; - }, - injectMessage(data, { rid, _id }) { - data.msg = { _id, rid }; - }, - injectCollapsedMedia(data) { - const { collapsedMedia } = data; - Object.assign(this, { collapsedMedia }); - return this; - }, - isFile() { - return this.type === 'file'; - }, - isPDF() { - if ( - this.type === 'file' - && this.title_link.endsWith('.pdf') - && Template.parentData(1).msg.file - ) { - this.fileId = Template.parentData(1).msg.file._id; - return true; - } - return false; - }, - getURL, -}); - -Template.messageAttachment.onRendered(function() { - const { msg } = Template.parentData(1); - this.autorun(() => { - if (msg && msg.file && msg.file.type === 'application/pdf' && !this.collapsedMedia.get()) { - Meteor.defer(() => { renderPdfToCanvas(msg.file._id, msg.attachments[0].title_link); }); - } - }); -}); diff --git a/app/message-attachments/client/renderField.html b/app/message-attachments/client/renderField.html deleted file mode 100644 index d9a5fbf1ecd4..000000000000 --- a/app/message-attachments/client/renderField.html +++ /dev/null @@ -1,20 +0,0 @@ - diff --git a/app/message-attachments/client/renderField.js b/app/message-attachments/client/renderField.js index 4a62768d9ed6..f82e79aa9c6c 100644 --- a/app/message-attachments/client/renderField.js +++ b/app/message-attachments/client/renderField.js @@ -1,11 +1,3 @@ -import { Template } from 'meteor/templating'; -import { Blaze } from 'meteor/blaze'; - -import { Markdown } from '../../markdown/client'; -import { escapeHTML } from '../../../lib/escapeHTML'; - -const renderers = {}; - /** * The field templates will be rendered non-reactive for all messages by the messages-list (@see rocketchat-nrr) * Thus, we cannot provide helpers or events to the template, but we need to register this interactivity at the parent @@ -15,48 +7,6 @@ const renderers = {}; * @param helpers * @param events */ -export function registerFieldTemplate(fieldType, templateName, events) { - renderers[fieldType] = templateName; - - // propagate helpers and events to the room template, changing the selectors - // loop at events. For each event (like 'click .accept'), copy the function to a function of the room events. - // While doing that, add the fieldType as class selector to the events function in order to avoid naming clashes - if (events != null) { - const uniqueEvents = {}; - // rename the event handlers so they are unique in the "parent" template to which the events bubble - for (const property in events) { - if (events.hasOwnProperty(property)) { - const event = property.substr(0, property.indexOf(' ')); - const selector = property.substr(property.indexOf(' ') + 1); - Object.defineProperty(uniqueEvents, - `${ event } .${ fieldType } ${ selector }`, - { - value: events[property], - enumerable: true, // assign as a own property - }); - } - } - Template.roomOld.events(uniqueEvents); - } +export function registerFieldTemplate() { + console.warn('registerFieldTemplate DEPRECATED'); } - -// onRendered is not being executed (no idea why). Consequently, we cannot use Blaze.renderWithData(), since we don't -// have access to the DOM outside onRendered. Therefore, we can only translate the content of the field to HTML and -// embed it non-reactively. -// This in turn means that onRendered of the field template will not be processed either. -// I guess it may have someting to do with rocketchat-nrr -Template.renderField.helpers({ - specializedRendering({ hash: { field, message } }) { - let html = ''; - if (field.type && renderers[field.type]) { - html = Blaze.toHTMLWithData(Template[renderers[field.type]], { field, message }); - } else { - // consider the value already formatted as html - html = escapeHTML(field.value); - } - return `
${ html }
`; - }, - markdown(text) { - return Markdown.parse(text); - }, -}); diff --git a/app/message-attachments/client/stylesheets/messageAttachments.css b/app/message-attachments/client/stylesheets/messageAttachments.css deleted file mode 100644 index 2ff918cdf8e8..000000000000 --- a/app/message-attachments/client/stylesheets/messageAttachments.css +++ /dev/null @@ -1,163 +0,0 @@ -html.rtl .attachment { - direction: rtl; - - & .attachment-block { - padding-right: 15px; - padding-left: 0; - - & .attachment-block-border { - right: 0; - left: auto; - } - } - - & .attachment-thumb { - padding-top: 10px; - padding-right: 5px; - } - - & .attachment-download-icon { - margin-right: 5px; - margin-left: auto; - } -} - -.attachment { - & .attachment-block { - position: relative; - - margin: 5px 0; - padding-left: 15px; - - & .attachment-block-border { - position: absolute; - top: 0; - bottom: 0; - left: 0; - - width: 2px; - - border-radius: 8px; - } - } - - & .attachment-author { - font-size: 0.95rem; - font-weight: 600; - line-height: 1.2rem; - - & > a { - font-weight: 600; - } - - & img { - max-width: 16px; - max-height: 16px; - margin-right: 2px; - margin-bottom: -2px; - } - - & .time, - & .time-link { - font-size: 0.8em; - font-weight: normal; - } - } - - & .attachment-title { - - color: #1d74f5; - - font-size: 1.02rem; - font-weight: 500; - line-height: 1.5rem; - } - - & .attachment-text { - padding: 3px 0; - - line-height: 1rem; - } - - & .attachment-image { - margin-top: 4px; - - line-height: 0; - } - - & .attachment-fields { - display: flex; - - margin-top: 4px; - - align-items: center; - flex-wrap: wrap; - - & .attachment-field { - flex: 1 0 100%; - - padding-top: 5px; - padding-bottom: 5px; - - &.attachment-field-short { - display: inline-block; - - flex: 1 1; - - margin-right: 12px; - } - - & .attachment-field-title { - font-weight: 600; - line-height: 1rem; - } - } - } - - & .attachment-thumb { - padding-top: 5px; - padding-right: 10px; - - line-height: 0; - - & img { - max-width: 100px; - } - } - - & .attachment-flex { - display: flex; - align-items: flex-start; - - & .attachment-flex-column-grow { - word-break: break-word; - flex-grow: 1; - } - } - - & .attachment-small-content { - max-width: 700px; - } - - & .attachment-download-icon { - padding: 0 5px; - } - - & .attachment-canvas { - display: none; - } - - & .attachment-pdf-loading { - display: none; - - font-size: 1.5rem; - - svg { - animation: spin 1s linear infinite; - } - } - - & .actions-container { - margin-top: 6px; - } -} diff --git a/app/theme/client/imports/general/base.css b/app/theme/client/imports/general/base.css index 9c47a7bdcbf8..5eda246fb99e 100644 --- a/app/theme/client/imports/general/base.css +++ b/app/theme/client/imports/general/base.css @@ -246,3 +246,7 @@ button { display: none !important; } } + +.gallery-item { + cursor: pointer; +} \ No newline at end of file diff --git a/app/ui-message/client/message.html b/app/ui-message/client/message.html index 73042a77817e..57f2f8bb16f1 100644 --- a/app/ui-message/client/message.html +++ b/app/ui-message/client/message.html @@ -115,13 +115,7 @@ {{> oembedBaseWidget}} {{/each}} {{/if}} - {{#each msg.attachments}} - {{injectMessage . ../msg}} - {{injectSettings . ../settings}} - {{injectIndex . @index}} - {{> messageAttachment}} - {{/each}} - + {{> reactAttachments attachments=msg.attachments file=msg.file }} {{#if msg.drid}} {{> DiscussionMetric count=msg.dcount drid=msg.drid lm=msg.dlm openDiscussion=actions.openDiscussion }} {{/if}} diff --git a/app/ui-message/client/messageBox/messageBoxReplyPreview.html b/app/ui-message/client/messageBox/messageBoxReplyPreview.html index 1d874ff7208e..a3476628fe29 100644 --- a/app/ui-message/client/messageBox/messageBoxReplyPreview.html +++ b/app/ui-message/client/messageBox/messageBoxReplyPreview.html @@ -1,7 +1,7 @@