316 lines
9.0 KiB
TypeScript
316 lines
9.0 KiB
TypeScript
|
import fastDiff from "fast-diff";
|
||
|
|
import {type JSX, render} from "preact";
|
||
|
|
import {capitalize, log, querySelector} from "../../../utilities/exports.js";
|
||
|
|
|
||
|
|
export function runTopicLogEnhancementsFeature(): void {
|
||
|
|
const count = applyEnhancements();
|
||
|
|
if (count > 0) {
|
||
|
|
log(`Topic Log Enhancements: Applied to ${count} topic log entries.`);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function applyEnhancements(): number {
|
||
|
|
// Get the topic log listing if there is one.
|
||
|
|
const listing =
|
||
|
|
document.querySelector<HTMLOListElement>(
|
||
|
|
".topic-log-listing:not([data-trx-topic-log-enhancements])",
|
||
|
|
) ?? undefined;
|
||
|
|
if (listing === undefined) {
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Open the topic log `<details>` element.
|
||
|
|
querySelector<HTMLDetailsElement>("details.topic-log").open = true;
|
||
|
|
|
||
|
|
const entries = listing.querySelectorAll<HTMLLIElement>(".topic-log-entry");
|
||
|
|
const enhancements: JSX.Element[] = [];
|
||
|
|
|
||
|
|
for (const entry of Array.from(entries)) {
|
||
|
|
const editor = entry.querySelector(".link-user")?.textContent ?? undefined;
|
||
|
|
|
||
|
|
// Grab the text of the topic log entry.
|
||
|
|
let text = entry.textContent ?? undefined;
|
||
|
|
if (text === undefined) {
|
||
|
|
log(
|
||
|
|
"Undefined topic log entry text encountered, this should be unreachable.",
|
||
|
|
true,
|
||
|
|
);
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Remove any excess whitespace.
|
||
|
|
text = text.replace(/\s+/g, " ").trim();
|
||
|
|
|
||
|
|
// Remove the editor's name too as we already have that.
|
||
|
|
text = text.slice(text.indexOf(" ") + 1);
|
||
|
|
|
||
|
|
// Grab the timestamp and remove it from the text.
|
||
|
|
const timestampIndex = text.lastIndexOf("(");
|
||
|
|
const timestamp = text.slice(timestampIndex);
|
||
|
|
text = text.slice(0, timestampIndex - 1);
|
||
|
|
|
||
|
|
// Account for the original poster making edits.
|
||
|
|
const editedByAuthor = text.startsWith("(OP) ");
|
||
|
|
if (editedByAuthor) {
|
||
|
|
text = text.slice("(OP) ".length);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Account for deleted and removed topics or users not having their names
|
||
|
|
// shown.
|
||
|
|
if (text.startsWith("user ")) {
|
||
|
|
text = text.slice("user ".length);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Create the enhanced entry and remove the original one.
|
||
|
|
enhancements.push(
|
||
|
|
<TopicLogEnhancement
|
||
|
|
editedByAuthor={editedByAuthor}
|
||
|
|
editor={editor}
|
||
|
|
text={text}
|
||
|
|
timestamp={timestamp}
|
||
|
|
/>,
|
||
|
|
);
|
||
|
|
entry.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
listing.dataset.trxTopicLogEnhancements = "true";
|
||
|
|
render(enhancements, listing);
|
||
|
|
return enhancements.length;
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Properties for the {@linkcode TopicLogEnhancement} component. */
|
||
|
|
type TopicLogEnhancementProps = {
|
||
|
|
/** Whether the original topic author made the changes. */
|
||
|
|
editedByAuthor: boolean;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The username of the person making the change, can be undefined if no user
|
||
|
|
* link was in the entry.
|
||
|
|
*/
|
||
|
|
editor: string | undefined;
|
||
|
|
|
||
|
|
/** The text body of the entry. */
|
||
|
|
text: string;
|
||
|
|
|
||
|
|
/** The timestamp of when the edit was made. */
|
||
|
|
timestamp: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
/** The topic log entry enhancement component. */
|
||
|
|
function TopicLogEnhancement(props: TopicLogEnhancementProps): JSX.Element {
|
||
|
|
const {editedByAuthor, editor, text, timestamp} = props;
|
||
|
|
|
||
|
|
const editorLink = editor ? (
|
||
|
|
<a class="link-user" href={`/user/${editor}`}>
|
||
|
|
{editor}
|
||
|
|
</a>
|
||
|
|
) : (
|
||
|
|
"Unknown user"
|
||
|
|
);
|
||
|
|
|
||
|
|
const originalPosterSpan = editedByAuthor ? (
|
||
|
|
<>
|
||
|
|
(<abbr title="Original Poster (of the topic)">OP</abbr>)
|
||
|
|
</>
|
||
|
|
) : undefined;
|
||
|
|
|
||
|
|
const transformedText = transformText(text);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<li class="topic-log-entry">
|
||
|
|
{editorLink} {originalPosterSpan} {transformedText.title} {timestamp}{" "}
|
||
|
|
<br /> {transformedText.body}
|
||
|
|
</li>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
/** The result of the {@linkcode transformText} function. */
|
||
|
|
type TransformedText = {
|
||
|
|
/** The main body of the topic log entry. */
|
||
|
|
body: JSX.Element | string;
|
||
|
|
|
||
|
|
/** The title of the entry to be placed between the username and timestamp. */
|
||
|
|
title: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
/** Transform the topic log entry text into its respective enhanced version. */
|
||
|
|
function transformText(text: string): TransformedText {
|
||
|
|
// Check for tag additions and removals.
|
||
|
|
if (text.startsWith("added tag") || text.startsWith("removed tag")) {
|
||
|
|
const sections = text.includes("' and removed tag")
|
||
|
|
? // If the entry has both added and removed tags in the same line, split
|
||
|
|
// them in the middle so we can more easily match them. The extra colon
|
||
|
|
// in the split string is so we don't accidentally split on an " and "
|
||
|
|
// in a tag.
|
||
|
|
text.split("' and ")
|
||
|
|
: [text];
|
||
|
|
|
||
|
|
// Match the added tags using the first section, as it always comes first.
|
||
|
|
const {added} =
|
||
|
|
/^added tags? (?<added>.+)$/g.exec(sections[0])?.groups ?? {};
|
||
|
|
|
||
|
|
// Match the removed tags using the second section first and if that
|
||
|
|
// doesn't exist, try using the first section.
|
||
|
|
const {removed} =
|
||
|
|
/^removed tags? (?<removed>.+)$/g.exec(sections[1] ?? sections[0])
|
||
|
|
?.groups ?? {};
|
||
|
|
|
||
|
|
// Collect all the diff spans into one array.
|
||
|
|
const spans: JSX.Element[] = [];
|
||
|
|
|
||
|
|
// Get the topic's group path by removing the ID and slug from the pathname.
|
||
|
|
// So for example "/~group/id36/title_slug" becomes "/~group".
|
||
|
|
const groupPath = window.location.pathname.slice(
|
||
|
|
0,
|
||
|
|
window.location.pathname.indexOf("/", 1),
|
||
|
|
);
|
||
|
|
|
||
|
|
if (removed !== undefined) {
|
||
|
|
const tags = removed.replace(/'/g, "").split(", ");
|
||
|
|
spans.push(
|
||
|
|
...tags.map((tag) => (
|
||
|
|
<>
|
||
|
|
<span class="trx-topic-log-diff-from">
|
||
|
|
<a href={`${groupPath}?tag=${tag}`}>{tag}</a>
|
||
|
|
</span>
|
||
|
|
<br />
|
||
|
|
</>
|
||
|
|
)),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (added !== undefined) {
|
||
|
|
const tags = added.replace(/'/g, "").split(", ");
|
||
|
|
spans.push(
|
||
|
|
...tags.map((tag) => (
|
||
|
|
<>
|
||
|
|
<span class="trx-topic-log-diff-to">
|
||
|
|
<a href={`${groupPath}?tag=${tag}`}>{tag}</a>
|
||
|
|
</span>
|
||
|
|
<br />
|
||
|
|
</>
|
||
|
|
)),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
body: <>{spans}</>,
|
||
|
|
title: "edited the tags",
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// Check for link changes.
|
||
|
|
if (text.startsWith("changed link from")) {
|
||
|
|
// The Tildes link topic schema only allows HTTP or HTTPS links so we can
|
||
|
|
// take advantage of that to match them more easily.
|
||
|
|
const {from, to} = /(?<from>http.+) to (?<to>http.+)$/g.exec(text)!.groups!;
|
||
|
|
return {
|
||
|
|
body: <DiffSpans from={from} to={to} />,
|
||
|
|
title: "edited the link",
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// Check for title changes.
|
||
|
|
if (text.startsWith("changed title from")) {
|
||
|
|
const {from, to} = /"(?<from>.+)" to "(?<to>.+)"$/g.exec(text)!.groups!;
|
||
|
|
return {
|
||
|
|
body: <DiffSpans from={from} to={to} />,
|
||
|
|
title: "edited the title",
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// Check for both the locking and unlocking of topics.
|
||
|
|
if (text.includes("locked comments")) {
|
||
|
|
const locked = text.startsWith("locked");
|
||
|
|
return {
|
||
|
|
body: locked
|
||
|
|
? "New comments can not be posted."
|
||
|
|
: "New comments can be posted again.",
|
||
|
|
title: `${locked ? "" : "un"}locked the topic`,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// Check for the topic group being changed.
|
||
|
|
if (text.startsWith("moved from")) {
|
||
|
|
const {from, to} = /(?<from>~.+) to (?<to>~.+)/g.exec(text)!.groups!;
|
||
|
|
return {
|
||
|
|
body: (
|
||
|
|
<>
|
||
|
|
From{" "}
|
||
|
|
<a class="link-group" href={`/${from}`}>
|
||
|
|
{from}
|
||
|
|
</a>{" "}
|
||
|
|
to{" "}
|
||
|
|
<a class="link-group" href={`/${to}`}>
|
||
|
|
{to}
|
||
|
|
</a>
|
||
|
|
</>
|
||
|
|
),
|
||
|
|
title: "moved the topic",
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// Check for topic removals and un-removals.
|
||
|
|
if (text.includes("removed")) {
|
||
|
|
const removed = text.startsWith("removed");
|
||
|
|
return {
|
||
|
|
body: removed
|
||
|
|
? "The topic was removed by a site administrator."
|
||
|
|
: "The topic has been made available again.",
|
||
|
|
title: `${removed ? "" : "un-"}removed the topic`,
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
// Log any unhandled topic log entries and return the text as the body so the
|
||
|
|
// entry still shows up in a decent enough way.
|
||
|
|
log(`Unhandled topic log entry: ${text}`, true);
|
||
|
|
return {body: capitalize(text), title: ""};
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Properties for the {@linkcode DiffSpans} component. */
|
||
|
|
type DiffSpansProps = {
|
||
|
|
/** The original text string. */
|
||
|
|
from: string;
|
||
|
|
|
||
|
|
/** The resulting text string to compare against the original with. */
|
||
|
|
to: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Calculate the diff between to strings using `fast-diff` and render the
|
||
|
|
* results as two `<span>`s.
|
||
|
|
*/
|
||
|
|
function DiffSpans({from, to}: DiffSpansProps): JSX.Element {
|
||
|
|
const fromParts: Array<JSX.Element | string> = [];
|
||
|
|
const toParts: typeof fromParts = [];
|
||
|
|
|
||
|
|
for (const [action, change] of fastDiff(from, to)) {
|
||
|
|
// eslint-disable-next-line default-case
|
||
|
|
switch (action) {
|
||
|
|
case fastDiff.EQUAL: {
|
||
|
|
fromParts.push(change);
|
||
|
|
toParts.push(change);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
case fastDiff.INSERT: {
|
||
|
|
toParts.push(<span class="trx-topic-log-diff-insert">{change}</span>);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
case fastDiff.DELETE: {
|
||
|
|
fromParts.push(<span class="trx-topic-log-diff-delete">{change}</span>);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<span class="trx-topic-log-diff-from">{fromParts}</span>
|
||
|
|
<br />
|
||
|
|
<span class="trx-topic-log-diff-to">{toParts}</span>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|