Port URL Preview components to MVVM (#32525)

* Port over linkifyJS to shared-components.

* Drop rubbish

* update lock

* quickfix test

* drop group id

* Modernize tests

* Remove stories that aren't in use.

* Complete working version

* Add copyright

* tidy up

* update lock

* Update snaps

* update snap

* undo change

* remove unused

* More test updates

* fix typo

* fix margin on preview

* move margin block

* snapupdate

* prettier

* Port url preview logic to a view model.

* More fiddling with VM logic

* Note to self

* Refactor away into a shared component.

* Even more lovely lovely code that makes it look prettier

* translation cleanup

* Even more stuff that I need to fix yay

* Remove .last-run.json

* Update snaps

* Ensure we set showUrlPreview

* Cleanup tests

* lint + add png support

* Add a label

* Cleanup

* Add snaps

* Update snaps

* update playwright

* Refactors

* update snap

* Add missing snap

* Remove editing code (we check this in a better way in componentDidUpdate)

* Add README

* fix the one unused import

* Style shuffling

* Update vis tests

* Finally fix the tooltip

* Remove unused prop

* Add some padding

* fix lint issue

* Design improvements

* new screens

* Update snaps

* Fix CSS specificity

* Remove stale screenshot

* Rename function to match reality

* Port viewmodel tests to snapshots

* finish documenting types

* Stop being dangerous

* Use Linkify+decode for description

* Remove ability for VM to do linkifying.

* Port over linkifyJS to shared-components.

* Drop rubbish

* update lock

* quickfix test

* drop group id

* Modernize tests

* Remove stories that aren't in use.

* Complete working version

* Add copyright

* tidy up

* update lock

* Update snaps

* update snap

* undo change

* remove unused

* More test updates

* fix typo

* fix margin on preview

* move margin block

* snapupdate

* prettier

* cleanup a test mistake

* Fixup sonar issues

* Don't expose linkifyjs to applications, just provide helper functions.

* Add story for documentation.

* remove $

* Use a const

* typo

* cleanup var name

* remove console line

* Changes checkpoint

* Convert to context

* Revert unrelated change.

* more cleanup

* Add a test to cover ignoring incoming data elements

* Make tests happy

* Update tests for LinkedText

* Underlines!

* fix lock

* remove unused linkify packages

* import move

* Remove mod to remove underline

* undo

* fix snap

* another snapshot fix

* More cleanup

* Tidy up based on review.

* fix story

* Pass in args

* update snap

* cleanup

* use source image

* oops

* remove client peg

* Remove unused state

* tidy up code

* Ensure we update the preview when the event content may have changed.

* s/global/globalThis/

* Ensure we don't stretch images

* Update screenshots

* Cleanup
This commit is contained in:
Will Hunt
2026-03-16 10:05:34 +00:00
committed by GitHub
parent b54e4e3b98
commit 3b4027846d
43 changed files with 2244 additions and 500 deletions
-2
View File
@@ -276,8 +276,6 @@
@import "./views/rooms/_JumpToBottomButton.pcss";
@import "./views/rooms/_LegacyRoomList.pcss";
@import "./views/rooms/_LegacyRoomListHeader.pcss";
@import "./views/rooms/_LinkPreviewGroup.pcss";
@import "./views/rooms/_LinkPreviewWidget.pcss";
@import "./views/rooms/_LiveContentSummary.pcss";
@import "./views/rooms/_MemberListHeaderView.pcss";
@import "./views/rooms/_MemberListView.pcss";
@@ -1,30 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_LinkPreviewGroup {
.mx_LinkPreviewGroup_hide {
cursor: pointer;
width: 18px;
height: 18px;
svg {
flex: 0 0 40px;
visibility: hidden;
}
}
&:hover .mx_LinkPreviewGroup_hide svg,
.mx_LinkPreviewGroup_hide:focus-visible:focus svg {
visibility: visible;
}
> .mx_AccessibleButton {
color: $accent;
text-align: center;
}
}
@@ -1,69 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2015, 2016 OpenMarket Ltd
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
.mx_LinkPreviewWidget {
margin: $spacing-16 0 $spacing-16 auto;
display: flex;
column-gap: $spacing-4;
border-inline-start: 2px solid $preview-widget-bar-color;
border-radius: 2px;
color: $info-plinth-fg-color;
.mx_MatrixChat_useCompactLayout & {
margin-top: 6px;
margin-bottom: 6px;
}
/* Exclude mx_LinkPreviewGroup_hide from wrapping */
.mx_LinkPreviewWidget_wrapImageCaption {
display: flex;
flex-wrap: wrap;
row-gap: $spacing-8;
flex: 1;
.mx_LinkPreviewWidget_image,
.mx_LinkPreviewWidget_caption {
margin-inline-start: $spacing-16;
min-width: 0; /* Prevent blowout */
}
.mx_LinkPreviewWidget_image {
flex: 0 0 100px;
text-align: center;
cursor: pointer;
}
.mx_LinkPreviewWidget_caption {
flex: 1;
overflow: hidden; /* cause it to wrap rather than clip */
}
.mx_LinkPreviewWidget_title,
.mx_LinkPreviewWidget_description {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: normal;
}
.mx_LinkPreviewWidget_title {
font-weight: bold;
-webkit-line-clamp: 2;
.mx_LinkPreviewWidget_siteName {
font-weight: normal;
}
}
.mx_LinkPreviewWidget_description {
margin-top: $spacing-8;
word-wrap: break-word;
-webkit-line-clamp: 3;
}
}
}