mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-03-01 19:41:15 +01:00
Code Issues Projects Releases Wiki Activity

Park composor changes

Browse Source
This commit is contained in:
Half-Shot 2026-02-27 13:32:41 +00:00
parent 6d67929585
commit fc0dc0c7b0
2 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web/src/components/views/rooms/MessageComposer.tsx
View File

@ -54,6 +54,8 @@ import { type MatrixClientProps, withMatrixClientHOC } from "../../../contexts/M
import { UIFeature } from "../../../settings/UIFeature";
import { formatTimeLeft } from "../../../DateUtils";
import RoomReplacedSvg from "../../../../res/img/room_replaced.svg";
import { Type } from "../../../editor/parts";
import { MessageComposorUrlPreview } from "./MessageComposorUrlPreview";
// The prefix used when persisting editor drafts to localstorage.
export const WYSIWYG_EDITOR_STATE_STORAGE_PREFIX = "mx_wysiwyg_state_";
@ -418,7 +420,13 @@ export class MessageComposer extends React.Component<IProps, IState> {
};
private onChange = (model: EditorModel): void => {
model.serializeParts();
this.setState({
composerContent: model
.serializeParts()
.filter((p) => p.type === Type.Plain)
.map((p) => p.text)
.join(" "),
isComposerEmpty: model.isEmpty,
});
};
@ -680,6 +688,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
replyToEvent={this.props.replyToEvent}
permalinkCreator={this.props.permalinkCreator}
/>
<MessageComposorUrlPreview content={this.state.composerContent} />
<div className="mx_MessageComposer_row">
{leftIcon}
{composer}

23
apps/web/src/components/views/rooms/MessageComposorUrlPreview.tsx Normal file
View File

@ -0,0 +1,23 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2015-2022 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.
*/
import React, { useCallback, useMemo, useRef, type ReactNode } from "react";
import { useDebouncedCallback } from "../../../hooks/spotlight/useDebouncedCallback";
import { debounce } from "lodash";
export function MessageComposorUrlPreview({ content }: { content: string }): ReactNode | null {
const debounceFn = useRef(debounce((c: string) => c.split(" ").filter((word) => URL.canParse(word.trim())), 1500));
const determineLinks = useMemo(() => debounceFn.current(content), [content]);
return (
<div>
<b>{determineLinks}</b>
</div>
);
}