MessageLogger: add compact display of history & edit modal (#2299)
Co-authored-by: vee <vendicated@riseup.net>
This commit is contained in:
Kyuuhachi
Vendicated
parent
2b273d9dbd
commit
ea746f6633
5 changed files with 189 additions and 16 deletions
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "vencord",
|
||||
"private": "true",
|
||||
"version": "1.9.4",
|
||||
"version": "1.9.5",
|
||||
"description": "The cutest Discord client mod",
|
||||
"homepage": "https://github.com/Vendicated/Vencord#readme",
|
||||
"bugs": {
|
||||
|
|
|
|||
91
src/plugins/messageLogger/HistoryModal.tsx
Normal file
91
src/plugins/messageLogger/HistoryModal.tsx
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2024 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
import { classNameFactory } from "@api/Styles";
|
||||
import ErrorBoundary from "@components/ErrorBoundary";
|
||||
import { Margins } from "@utils/margins";
|
||||
import { classes } from "@utils/misc";
|
||||
import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
|
||||
import { findByPropsLazy } from "@webpack";
|
||||
import { TabBar, Text, Timestamp, TooltipContainer, useState } from "@webpack/common";
|
||||
|
||||
import { parseEditContent } from ".";
|
||||
|
||||
const CodeContainerClasses = findByPropsLazy("markup", "codeContainer");
|
||||
const MiscClasses = findByPropsLazy("messageContent", "markupRtl");
|
||||
|
||||
const cl = classNameFactory("vc-ml-modal-");
|
||||
|
||||
export function openHistoryModal(message: any) {
|
||||
openModal(props =>
|
||||
<ErrorBoundary>
|
||||
<HistoryModal
|
||||
modalProps={props}
|
||||
message={message}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
}
|
||||
|
||||
export function HistoryModal({ modalProps, message }: { modalProps: ModalProps; message: any; }) {
|
||||
const [currentTab, setCurrentTab] = useState(message.editHistory.length);
|
||||
const timestamps = [message.firstEditTimestamp, ...message.editHistory.map(m => m.timestamp)];
|
||||
const contents = [...message.editHistory.map(m => m.content), message.content];
|
||||
|
||||
return (
|
||||
<ModalRoot {...modalProps} size={ModalSize.LARGE}>
|
||||
<ModalHeader className={cl("head")}>
|
||||
<Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>Message Edit History</Text>
|
||||
<ModalCloseButton onClick={close} />
|
||||
</ModalHeader>
|
||||
|
||||
<ModalContent className={cl("contents")}>
|
||||
<TabBar
|
||||
type="top"
|
||||
look="brand"
|
||||
className={classes("vc-settings-tab-bar", cl("tab-bar"))}
|
||||
selectedItem={currentTab}
|
||||
onItemSelect={setCurrentTab}
|
||||
>
|
||||
{message.firstEditTimestamp.getTime() !== message.timestamp.getTime() && (
|
||||
<TooltipContainer text="This edit state was not logged so it can't be displayed.">
|
||||
<TabBar.Item
|
||||
className="vc-settings-tab-bar-item"
|
||||
id={-1}
|
||||
disabled
|
||||
>
|
||||
<Timestamp
|
||||
className={cl("timestamp")}
|
||||
timestamp={message.timestamp}
|
||||
isEdited={true}
|
||||
isInline={false}
|
||||
/>
|
||||
</TabBar.Item>
|
||||
</TooltipContainer>
|
||||
)}
|
||||
|
||||
{timestamps.map((timestamp, index) => (
|
||||
<TabBar.Item
|
||||
className="vc-settings-tab-bar-item"
|
||||
id={index}
|
||||
>
|
||||
<Timestamp
|
||||
className={cl("timestamp")}
|
||||
timestamp={timestamp}
|
||||
isEdited={true}
|
||||
isInline={false}
|
||||
/>
|
||||
</TabBar.Item>
|
||||
))}
|
||||
</TabBar>
|
||||
|
||||
<div className={classes(CodeContainerClasses.markup, MiscClasses.messageContent, Margins.top20)}>
|
||||
{parseEditContent(contents[currentTab], message)}
|
||||
</div>
|
||||
</ModalContent>
|
||||
</ModalRoot>
|
||||
);
|
||||
}
|
||||
|
|
@ -24,21 +24,26 @@ import { Settings } from "@api/Settings";
|
|||
import { disableStyle, enableStyle } from "@api/Styles";
|
||||
import ErrorBoundary from "@components/ErrorBoundary";
|
||||
import { Devs } from "@utils/constants";
|
||||
import { proxyLazy } from "@utils/lazy";
|
||||
import { Logger } from "@utils/Logger";
|
||||
import { classes } from "@utils/misc";
|
||||
import definePlugin, { OptionType } from "@utils/types";
|
||||
import { findByPropsLazy } from "@webpack";
|
||||
import { findByCodeLazy, findByPropsLazy } from "@webpack";
|
||||
import { ChannelStore, FluxDispatcher, i18n, Menu, MessageStore, Parser, SelectedChannelStore, Timestamp, UserStore, useStateFromStores } from "@webpack/common";
|
||||
import { Message } from "discord-types/general";
|
||||
|
||||
import overlayStyle from "./deleteStyleOverlay.css?managed";
|
||||
import textStyle from "./deleteStyleText.css?managed";
|
||||
import { openHistoryModal } from "./HistoryModal";
|
||||
|
||||
interface MLMessage extends Message {
|
||||
deleted?: boolean;
|
||||
editHistory?: { timestamp: Date; content: string; }[];
|
||||
firstEditTimestamp?: Date;
|
||||
}
|
||||
|
||||
const styles = findByPropsLazy("edited", "communicationDisabled", "isSystemMessage");
|
||||
const getMessage = findByCodeLazy('replace(/^\\n+|\\n+$/g,"")');
|
||||
|
||||
function addDeleteStyle() {
|
||||
if (Settings.plugins.MessageLogger.deleteStyle === "text") {
|
||||
|
|
@ -125,10 +130,22 @@ const patchChannelContextMenu: NavContextMenuPatchCallback = (children, { channe
|
|||
);
|
||||
};
|
||||
|
||||
export function parseEditContent(content: string, message: Message) {
|
||||
return Parser.parse(content, true, {
|
||||
channelId: message.channel_id,
|
||||
messageId: message.id,
|
||||
allowLinks: true,
|
||||
allowHeading: true,
|
||||
allowList: true,
|
||||
allowEmojiLinks: true,
|
||||
viewingChannelId: SelectedChannelStore.getChannelId(),
|
||||
});
|
||||
}
|
||||
|
||||
export default definePlugin({
|
||||
name: "MessageLogger",
|
||||
description: "Temporarily logs deleted and edited messages.",
|
||||
authors: [Devs.rushii, Devs.Ven, Devs.AutumnVN, Devs.Nickyux],
|
||||
authors: [Devs.rushii, Devs.Ven, Devs.AutumnVN, Devs.Nickyux, Devs.Kyuuhachi],
|
||||
dependencies: ["MessageUpdaterAPI"],
|
||||
|
||||
contextMenus: {
|
||||
|
|
@ -150,19 +167,11 @@ export default definePlugin({
|
|||
(oldMsg, newMsg) => oldMsg?.editHistory === newMsg?.editHistory
|
||||
);
|
||||
|
||||
return (
|
||||
return Settings.plugins.MessageLogger.inlineEdits && (
|
||||
<>
|
||||
{message.editHistory?.map(edit => (
|
||||
<div className="messagelogger-edited">
|
||||
{Parser.parse(edit.content, true, {
|
||||
channelId,
|
||||
messageId,
|
||||
allowLinks: true,
|
||||
allowHeading: true,
|
||||
allowList: true,
|
||||
allowEmojiLinks: true,
|
||||
viewingChannelId: SelectedChannelStore.getChannelId(),
|
||||
})}
|
||||
{parseEditContent(edit.content, message)}
|
||||
<Timestamp
|
||||
timestamp={edit.timestamp}
|
||||
isEdited={true}
|
||||
|
|
@ -199,11 +208,21 @@ export default definePlugin({
|
|||
description: "Whether to log deleted messages",
|
||||
default: true,
|
||||
},
|
||||
collapseDeleted: {
|
||||
type: OptionType.BOOLEAN,
|
||||
description: "Whether to collapse deleted messages, similar to blocked messages",
|
||||
default: false
|
||||
},
|
||||
logEdits: {
|
||||
type: OptionType.BOOLEAN,
|
||||
description: "Whether to log edited messages",
|
||||
default: true,
|
||||
},
|
||||
inlineEdits: {
|
||||
type: OptionType.BOOLEAN,
|
||||
description: "Whether to display edit history as part of message content",
|
||||
default: true
|
||||
},
|
||||
ignoreBots: {
|
||||
type: OptionType.BOOLEAN,
|
||||
description: "Whether to ignore messages by bots",
|
||||
|
|
@ -279,6 +298,23 @@ export default definePlugin({
|
|||
(message.channel_id === "1026515880080842772" && message.author?.id === "1017176847865352332");
|
||||
},
|
||||
|
||||
EditMarker({ message, className, children, ...props }: any) {
|
||||
return (
|
||||
<span
|
||||
{...props}
|
||||
className={classes("messagelogger-edit-marker", className)}
|
||||
onClick={() => openHistoryModal(message)}
|
||||
aria-role="button"
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
|
||||
Messages: proxyLazy(() => ({
|
||||
DELETED_MESSAGE_COUNT: getMessage("{count, plural, =0 {No deleted messages} one {{count} deleted message} other {{count} deleted messages}}")
|
||||
})),
|
||||
|
||||
patches: [
|
||||
{
|
||||
// MessageStore
|
||||
|
|
@ -332,7 +368,8 @@ export default definePlugin({
|
|||
match: /this\.customRenderedContent=(\i)\.customRenderedContent,/,
|
||||
replace: "this.customRenderedContent = $1.customRenderedContent," +
|
||||
"this.deleted = $1.deleted || false," +
|
||||
"this.editHistory = $1.editHistory || [],"
|
||||
"this.editHistory = $1.editHistory || []," +
|
||||
"this.firstEditTimestamp = $1.firstEditTimestamp || this.editedTimestamp || this.timestamp,"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -345,7 +382,7 @@ export default definePlugin({
|
|||
// Pass through editHistory & deleted & original attachments to the "edited message" transformer
|
||||
match: /(?<=null!=\i\.edited_timestamp\)return )\i\(\i,\{reactions:(\i)\.reactions.{0,50}\}\)/,
|
||||
replace:
|
||||
"Object.assign($&,{ deleted:$1.deleted, editHistory:$1.editHistory })"
|
||||
"Object.assign($&,{ deleted:$1.deleted, editHistory:$1.editHistory, firstEditTimestamp:$1.firstEditTimestamp })"
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -364,7 +401,8 @@ export default definePlugin({
|
|||
" return $2;" +
|
||||
"})())," +
|
||||
"deleted: arguments[1]?.deleted," +
|
||||
"editHistory: arguments[1]?.editHistory"
|
||||
"editHistory: arguments[1]?.editHistory," +
|
||||
"firstEditTimestamp: new Date(arguments[1]?.firstEditTimestamp ?? $2.editedTimestamp ?? $2.timestamp)"
|
||||
},
|
||||
{
|
||||
// Preserve deleted attribute on attachments
|
||||
|
|
@ -412,6 +450,11 @@ export default definePlugin({
|
|||
// Render editHistory in the deepest div for message content
|
||||
match: /(\)\("div",\{id:.+?children:\[)/,
|
||||
replace: "$1 (!!arguments[0].message.editHistory?.length && $self.renderEdits(arguments[0])),"
|
||||
},
|
||||
{
|
||||
// Make edit marker clickable
|
||||
match: /"span",\{(?=className:\i\.edited,)/,
|
||||
replace: "$self.EditMarker,{message:arguments[0].message,"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -441,6 +484,30 @@ export default definePlugin({
|
|||
replace: "children:arguments[0].message.deleted?[]:$1"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
// Message grouping
|
||||
find: "NON_COLLAPSIBLE.has(",
|
||||
replacement: {
|
||||
match: /if\((\i)\.blocked\)return \i\.\i\.MESSAGE_GROUP_BLOCKED;/,
|
||||
replace: '$&else if($1.deleted) return"MESSAGE_GROUP_DELETED";',
|
||||
},
|
||||
predicate: () => Settings.plugins.MessageLogger.collapseDeleted
|
||||
},
|
||||
{
|
||||
// Message group rendering
|
||||
find: "Messages.NEW_MESSAGES_ESTIMATED_WITH_DATE",
|
||||
replacement: [
|
||||
{
|
||||
match: /(\i).type===\i\.\i\.MESSAGE_GROUP_BLOCKED\|\|/,
|
||||
replace: '$&$1.type==="MESSAGE_GROUP_DELETED"||',
|
||||
},
|
||||
{
|
||||
match: /(\i).type===\i\.\i\.MESSAGE_GROUP_BLOCKED\?.*?:/,
|
||||
replace: '$&$1.type==="MESSAGE_GROUP_DELETED"?$self.Messages.DELETED_MESSAGE_COUNT:',
|
||||
},
|
||||
],
|
||||
predicate: () => Settings.plugins.MessageLogger.collapseDeleted
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -38,3 +38,17 @@
|
|||
.theme-light .messagelogger-edited {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.messagelogger-edit-marker {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vc-ml-modal-timestamp {
|
||||
cursor: unset;
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.vc-ml-modal-tab-bar {
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ function cleanMessage(msg: Message) {
|
|||
const cloneAny = clone as any;
|
||||
delete cloneAny.editHistory;
|
||||
delete cloneAny.deleted;
|
||||
delete cloneAny.firstEditTimestamp;
|
||||
cloneAny.attachments?.forEach(a => delete a.deleted);
|
||||
|
||||
return clone;
|
||||
|
|
|
|||
Loading…
Reference in a new issue