enhance: 編集したノートの履歴を確認できるように

CHANGELOG.md

@@ -24,6 +24,7 @@
 - Feat: ユーザーごとに他ユーザーへの返信をタイムラインに含めるか設定可能になりました
 - Feat: ユーザーリスト内のメンバーごとに他ユーザーへの返信をユーザーリストタイムラインに含めるか設定可能になりました
 - Enhance: ソフトワードミュートとハードワードミュートは統合されました
+- Enhance: 編集したノートの履歴を確認できるように
 
 ### Client
 - Enhance: 二要素認証のバックアップコード一覧をテキストファイルでダウンロード可能に

packages/backend/migration/1696044626209-noteEditHistory.js

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export class NoteEditHistory1696044626209 {
+	name = 'NoteEditHistory1696044626209'
+
+	async up(queryRunner) {
+		await queryRunner.query(`ALTER TABLE "note" ADD "noteEditHistory" varchar(3000) array DEFAULT '{}'`);
+	}
+
+	async down(queryRunner) {
+		await queryRunner.query(`ALTER TABLE "note" DROP "noteEditHistory"`);
+	}
+}

packages/backend/migration/1696318192428-noteUpdatedAtHistory.js

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export class NoteUpdateAtHistory1696318192428 {
+	name = 'NoteUpdateAtHistory1696318192428'
+
+	async up(queryRunner) {
+		await queryRunner.query(`ALTER TABLE "note" ADD "updatedAtHistory" TIMESTAMP WITH TIME ZONE array`);
+	}
+
+	async down(queryRunner) {
+		await queryRunner.query(`ALTER TABLE "note" DROP "updatedAtHistory"`);
+	}
+
+}

packages/backend/src/core/entities/NoteEntityService.ts

@@ -309,6 +309,8 @@ export class NoteEntityService implements OnModuleInit {
 			id: note.id,
 			createdAt: note.createdAt.toISOString(),
 			updatedAt: note.updatedAt ? note.updatedAt.toISOString() : undefined,
+			updatedAtHistory: note.updatedAtHistory ? note.updatedAtHistory.map(x => x.toISOString()) : undefined,
+			noteEditHistory: note.noteEditHistory.length ? note.noteEditHistory : undefined,
 			userId: note.userId,
 			user: this.userEntityService.pack(note.user ?? note.userId, me, {
 				detail: false,

packages/backend/src/models/Note.ts

@@ -29,6 +29,19 @@ export class MiNote {
 	})
 	public updatedAt: Date | null;
 
+	@Column('timestamp with time zone', {
+		array: true,
+		default: null,
+	})
+	public updatedAtHistory: Date[] | null;
+
+	@Column('varchar', {
+		length: 3000,
+		array: true,
+		default: '{}',
+	})
+	public noteEditHistory: string[];
+
 	@Index()
 	@Column({
 		...id(),

packages/backend/src/models/json-schema/note.ts

@@ -22,6 +22,19 @@ export const packedNoteSchema = {
 			optional: true, nullable: true,
 			format: 'date-time',
 		},
+		updatedAtHistory: {
+			type: 'array',
+			optional: true, nullable: true,
+			items: {
+				type: 'string',
+				optional: false, nullable: false,
+				format: 'date-time',
+			},
+		},
+		noteEditHistory: {
+			type: 'array',
+			optional: true, nullable: false,
+		},
 		deletedAt: {
 			type: 'string',
 			optional: true, nullable: true,

packages/backend/src/server/api/endpoints/notes/update.ts

@@ -73,11 +73,13 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 			if (note.userId !== me.id) {
 				throw new ApiError(meta.errors.noSuchNote);
 			}
-
+			const updatedAtHistory = note.updatedAtHistory ? note.updatedAtHistory : [];
 			await this.notesRepository.update({ id: note.id }, {
 				updatedAt: new Date(),
 				cw: ps.cw,
 				text: ps.text,
+				updatedAtHistory: [...updatedAtHistory, new Date()],
+				noteEditHistory: [...note.noteEditHistory, note.text!],
 			});
 
 			this.globalEventService.publishNoteStream(note.id, 'updated', {

packages/frontend/src/components/MkNoteDetailed.vue

@@ -137,6 +137,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'replies' }]" @click="tab = 'replies'"><i class="ti ti-arrow-back-up"></i> {{ i18n.ts.replies }}</button>
 		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'renotes' }]" @click="tab = 'renotes'"><i class="ti ti-repeat"></i> {{ i18n.ts.renotes }}</button>
 		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'reactions' }]" @click="tab = 'reactions'"><i class="ti ti-icons"></i> {{ i18n.ts.reactions }}</button>
+		<button class="_button" :class="[$style.tab, { [$style.tabActive]: tab === 'history' }]" @click="tab = 'history'"><i class="ti ti-pencil"></i> {{ i18n.ts.edited }}</button>
 	</div>
 	<div>
 		<div v-if="tab === 'replies'" :class="$style.tab_replies">
@@ -173,6 +174,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</template>
 			</MkPagination>
 		</div>
+		<div v-else-if="tab === 'history'" :class="$style.tab_history">
+			<div style="display: grid;">
+				<div v-for="(text, index) in appearNote.noteEditHistory" :key="text" :class="$style.historyRoot">
+					<MkAvatar :class="$style.avatar" :user="appearNote.user" link preview/>
+					<div :class="$style.historyMain">
+						<div :class="$style.historyHeader">
+							<MkUserName :user="appearNote.user" :nowrap="true"/>
+							<MkTime :class="$style.updatedAt" :time="appearNote.updatedAtHistory![index]"/>
+						</div>
+						<div>
+							<div>
+								<Mfm :text="text.trim()" :author="appearNote.user" :i="$i"/>
+							</div>
+							<CodeDiff
+								:oldString="appearNote.noteEditHistory[index - 1] || ''"
+								:newString="text"
+								:trim="true"
+								:hideHeader="true"
+								diffStyle="char"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
 	</div>
 </div>
 <div v-else class="_panel" :class="$style.muted" @click="muted = false">
@@ -187,7 +213,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onMounted, ref, shallowRef } from 'vue';
+import { computed, inject, onMounted, onUnmounted, ref, shallowRef } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
@@ -221,6 +247,7 @@ import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
 import MkReactionIcon from '@/components/MkReactionIcon.vue';
 import MkButton from '@/components/MkButton.vue';
+import { CodeDiff } from 'v-code-diff';
 
 const props = defineProps<{
 	note: Misskey.entities.Note;
@@ -229,7 +256,7 @@ const props = defineProps<{
 const inChannel = inject('inChannel', null);
 
 let note = $ref(deepClone(props.note));
-
+console.log(note.updatedAtHistory);
 // plugin
 if (noteViewInterruptors.length > 0) {
 	onMounted(async () => {
@@ -747,6 +774,9 @@ function loadConversation() {
 	padding: 16px;
 }
 
+.tab_history {
+	padding: 16px;
+}
 .reactionTabs {
 	display: flex;
 	gap: 8px;
@@ -810,6 +840,43 @@ function loadConversation() {
 	}
 }
 
+.historyRoot {
+	display: flex;
+	margin: 0;
+	padding: 10px;
+	overflow: clip;
+	font-size: 0.95em;
+}
+
+.historyMain {
+	flex: 1;
+	min-width: 0;
+}
+
+.historyHeader {
+	display: flex;
+	margin-bottom: 2px;
+	font-weight: bold;
+	width: 100%;
+	overflow: clip;
+	text-overflow: ellipsis;
+}
+.avatar {
+	flex-shrink: 0 !important;
+	display: block !important;
+	margin: 0 10px 0 0 !important;
+	width: 40px !important;
+	height: 40px !important;
+	border-radius: 8px !important;
+	pointer-events: none !important;
+}
+
+.updatedAt {
+	flex-shrink: 0;
+	margin-left: auto;
+	font-size: 0.9em;
+}
+
 .muted {
 	padding: 8px;
 	text-align: center;

packages/misskey-js/etc/misskey-js.api.md

@@ -2640,6 +2640,7 @@ type Note = {
     id: ID;
     createdAt: DateString;
     updatedAt?: DateString | null;
+    noteEditHistory: string[];
     text: string | null;
     cw: string | null;
     user: User;
@@ -2979,7 +2980,7 @@ type UserSorting = '+follower' | '-follower' | '+createdAt' | '-createdAt' | '+u
 // src/api.types.ts:18:25 - (ae-forgotten-export) The symbol "NoParams" needs to be exported by the entry point index.d.ts
 // src/api.types.ts:630:18 - (ae-forgotten-export) The symbol "ShowUserReq" needs to be exported by the entry point index.d.ts
 // src/entities.ts:107:2 - (ae-forgotten-export) The symbol "notificationTypes_2" needs to be exported by the entry point index.d.ts
-// src/entities.ts:595:2 - (ae-forgotten-export) The symbol "ModerationLogPayloads" needs to be exported by the entry point index.d.ts
+// src/entities.ts:596:2 - (ae-forgotten-export) The symbol "ModerationLogPayloads" needs to be exported by the entry point index.d.ts
 // src/streaming.types.ts:33:4 - (ae-forgotten-export) The symbol "FIXME" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)

packages/misskey-js/src/entities.ts

@@ -178,6 +178,8 @@ export type Note = {
 	id: ID;
 	createdAt: DateString;
 	updatedAt?: DateString | null;
+	updatedAtHistory: DateString[] | null;
+	noteEditHistory: string[];
 	text: string | null;
 	cw: string | null;
 	user: User;