MessageLogger: add compact display of history & edit modal (#2299)
Co-authored-by: vee <vendicated@riseup.net>
This commit is contained in:
parent
2b273d9dbd
commit
ea746f6633
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "vencord",
|
"name": "vencord",
|
||||||
"private": "true",
|
"private": "true",
|
||||||
"version": "1.9.4",
|
"version": "1.9.5",
|
||||||
"description": "The cutest Discord client mod",
|
"description": "The cutest Discord client mod",
|
||||||
"homepage": "https://github.com/Vendicated/Vencord#readme",
|
"homepage": "https://github.com/Vendicated/Vencord#readme",
|
||||||
"bugs": {
|
"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 { disableStyle, enableStyle } from "@api/Styles";
|
||||||
import ErrorBoundary from "@components/ErrorBoundary";
|
import ErrorBoundary from "@components/ErrorBoundary";
|
||||||
import { Devs } from "@utils/constants";
|
import { Devs } from "@utils/constants";
|
||||||
|
import { proxyLazy } from "@utils/lazy";
|
||||||
import { Logger } from "@utils/Logger";
|
import { Logger } from "@utils/Logger";
|
||||||
|
import { classes } from "@utils/misc";
|
||||||
import definePlugin, { OptionType } from "@utils/types";
|
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 { ChannelStore, FluxDispatcher, i18n, Menu, MessageStore, Parser, SelectedChannelStore, Timestamp, UserStore, useStateFromStores } from "@webpack/common";
|
||||||
import { Message } from "discord-types/general";
|
import { Message } from "discord-types/general";
|
||||||
|
|
||||||
import overlayStyle from "./deleteStyleOverlay.css?managed";
|
import overlayStyle from "./deleteStyleOverlay.css?managed";
|
||||||
import textStyle from "./deleteStyleText.css?managed";
|
import textStyle from "./deleteStyleText.css?managed";
|
||||||
|
import { openHistoryModal } from "./HistoryModal";
|
||||||
|
|
||||||
interface MLMessage extends Message {
|
interface MLMessage extends Message {
|
||||||
deleted?: boolean;
|
deleted?: boolean;
|
||||||
editHistory?: { timestamp: Date; content: string; }[];
|
editHistory?: { timestamp: Date; content: string; }[];
|
||||||
|
firstEditTimestamp?: Date;
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = findByPropsLazy("edited", "communicationDisabled", "isSystemMessage");
|
const styles = findByPropsLazy("edited", "communicationDisabled", "isSystemMessage");
|
||||||
|
const getMessage = findByCodeLazy('replace(/^\\n+|\\n+$/g,"")');
|
||||||
|
|
||||||
function addDeleteStyle() {
|
function addDeleteStyle() {
|
||||||
if (Settings.plugins.MessageLogger.deleteStyle === "text") {
|
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({
|
export default definePlugin({
|
||||||
name: "MessageLogger",
|
name: "MessageLogger",
|
||||||
description: "Temporarily logs deleted and edited messages.",
|
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"],
|
dependencies: ["MessageUpdaterAPI"],
|
||||||
|
|
||||||
contextMenus: {
|
contextMenus: {
|
||||||
|
@ -150,19 +167,11 @@ export default definePlugin({
|
||||||
(oldMsg, newMsg) => oldMsg?.editHistory === newMsg?.editHistory
|
(oldMsg, newMsg) => oldMsg?.editHistory === newMsg?.editHistory
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return Settings.plugins.MessageLogger.inlineEdits && (
|
||||||
<>
|
<>
|
||||||
{message.editHistory?.map(edit => (
|
{message.editHistory?.map(edit => (
|
||||||
<div className="messagelogger-edited">
|
<div className="messagelogger-edited">
|
||||||
{Parser.parse(edit.content, true, {
|
{parseEditContent(edit.content, message)}
|
||||||
channelId,
|
|
||||||
messageId,
|
|
||||||
allowLinks: true,
|
|
||||||
allowHeading: true,
|
|
||||||
allowList: true,
|
|
||||||
allowEmojiLinks: true,
|
|
||||||
viewingChannelId: SelectedChannelStore.getChannelId(),
|
|
||||||
})}
|
|
||||||
<Timestamp
|
<Timestamp
|
||||||
timestamp={edit.timestamp}
|
timestamp={edit.timestamp}
|
||||||
isEdited={true}
|
isEdited={true}
|
||||||
|
@ -199,11 +208,21 @@ export default definePlugin({
|
||||||
description: "Whether to log deleted messages",
|
description: "Whether to log deleted messages",
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
|
collapseDeleted: {
|
||||||
|
type: OptionType.BOOLEAN,
|
||||||
|
description: "Whether to collapse deleted messages, similar to blocked messages",
|
||||||
|
default: false
|
||||||
|
},
|
||||||
logEdits: {
|
logEdits: {
|
||||||
type: OptionType.BOOLEAN,
|
type: OptionType.BOOLEAN,
|
||||||
description: "Whether to log edited messages",
|
description: "Whether to log edited messages",
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
|
inlineEdits: {
|
||||||
|
type: OptionType.BOOLEAN,
|
||||||
|
description: "Whether to display edit history as part of message content",
|
||||||
|
default: true
|
||||||
|
},
|
||||||
ignoreBots: {
|
ignoreBots: {
|
||||||
type: OptionType.BOOLEAN,
|
type: OptionType.BOOLEAN,
|
||||||
description: "Whether to ignore messages by bots",
|
description: "Whether to ignore messages by bots",
|
||||||
|
@ -279,6 +298,23 @@ export default definePlugin({
|
||||||
(message.channel_id === "1026515880080842772" && message.author?.id === "1017176847865352332");
|
(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: [
|
patches: [
|
||||||
{
|
{
|
||||||
// MessageStore
|
// MessageStore
|
||||||
|
@ -332,7 +368,8 @@ export default definePlugin({
|
||||||
match: /this\.customRenderedContent=(\i)\.customRenderedContent,/,
|
match: /this\.customRenderedContent=(\i)\.customRenderedContent,/,
|
||||||
replace: "this.customRenderedContent = $1.customRenderedContent," +
|
replace: "this.customRenderedContent = $1.customRenderedContent," +
|
||||||
"this.deleted = $1.deleted || false," +
|
"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
|
// Pass through editHistory & deleted & original attachments to the "edited message" transformer
|
||||||
match: /(?<=null!=\i\.edited_timestamp\)return )\i\(\i,\{reactions:(\i)\.reactions.{0,50}\}\)/,
|
match: /(?<=null!=\i\.edited_timestamp\)return )\i\(\i,\{reactions:(\i)\.reactions.{0,50}\}\)/,
|
||||||
replace:
|
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;" +
|
" return $2;" +
|
||||||
"})())," +
|
"})())," +
|
||||||
"deleted: arguments[1]?.deleted," +
|
"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
|
// Preserve deleted attribute on attachments
|
||||||
|
@ -412,6 +450,11 @@ export default definePlugin({
|
||||||
// Render editHistory in the deepest div for message content
|
// Render editHistory in the deepest div for message content
|
||||||
match: /(\)\("div",\{id:.+?children:\[)/,
|
match: /(\)\("div",\{id:.+?children:\[)/,
|
||||||
replace: "$1 (!!arguments[0].message.editHistory?.length && $self.renderEdits(arguments[0])),"
|
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"
|
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 {
|
.theme-light .messagelogger-edited {
|
||||||
opacity: 0.5;
|
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;
|
const cloneAny = clone as any;
|
||||||
delete cloneAny.editHistory;
|
delete cloneAny.editHistory;
|
||||||
delete cloneAny.deleted;
|
delete cloneAny.deleted;
|
||||||
|
delete cloneAny.firstEditTimestamp;
|
||||||
cloneAny.attachments?.forEach(a => delete a.deleted);
|
cloneAny.attachments?.forEach(a => delete a.deleted);
|
||||||
|
|
||||||
return clone;
|
return clone;
|
||||||
|
|
Loading…
Reference in a new issue