diff --git a/comment-sample/package.json b/comment-sample/package.json index 382d83c1..6d3b1796 100644 --- a/comment-sample/package.json +++ b/comment-sample/package.json @@ -19,15 +19,35 @@ "commands": [ { "command": "mywiki.createNote", - "title": "Comment API: Create a comment thread" + "title": "Create Note" }, { - "command": "mywiki.createComment", - "title": "Comment API: Reply to a comment thread" + "command": "mywiki.replyNote", + "title": "Reply" + }, + { + "command": "mywiki.editNote", + "title": "Edit", + "icon":{ + "dark": "resources/edit_inverse.svg", + "light": "resources/edit.svg" + } }, { "command": "mywiki.deleteNote", - "title": "Comment API: Delete a comment thread" + "title": "Delete", + "icon":{ + "dark": "resources/close_inverse.svg", + "light": "resources/close.svg" + } + }, + { + "command": "mywiki.deleteNoteComment", + "title": "Delete", + "icon":{ + "dark": "resources/close_inverse.svg", + "light": "resources/close.svg" + } } ], "menus": { @@ -37,12 +57,47 @@ "when": "false" }, { - "command": "mywiki.createComment", + "command": "mywiki.replyNote", "when": "false" }, { "command": "mywiki.deleteNote", "when": "false" + }, + { + "command": "mywiki.deleteNoteComment", + "when": "false" + } + ], + "commentThread/title": [ + { + "command": "mywiki.deleteNote", + "group": "navigation", + "when": "!commentThreadIsEmpty" + } + ], + "commentThread/actions": [ + { + "command": "mywiki.createNote", + "precondition": "commentIsEmpty", + "group": "navigation", + "when": "commentThreadIsEmpty" + }, + { + "command": "mywiki.replyNote", + "precondition": "commentIsEmpty", + "group": "navigation", + "when": "!commentThreadIsEmpty" + } + ], + "comment/title": [ + { + "command": "mywiki.editNote", + "group": "group@1" + }, + { + "command": "mywiki.deleteNoteComment", + "group": "group@2" } ] } diff --git a/comment-sample/resources/close.svg b/comment-sample/resources/close.svg new file mode 100644 index 00000000..fde34404 --- /dev/null +++ b/comment-sample/resources/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/comment-sample/resources/close_inverse.svg b/comment-sample/resources/close_inverse.svg new file mode 100644 index 00000000..d88aa121 --- /dev/null +++ b/comment-sample/resources/close_inverse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/comment-sample/resources/edit.svg b/comment-sample/resources/edit.svg new file mode 100755 index 00000000..ecde9240 --- /dev/null +++ b/comment-sample/resources/edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/comment-sample/resources/edit_inverse.svg b/comment-sample/resources/edit_inverse.svg new file mode 100755 index 00000000..da956cb2 --- /dev/null +++ b/comment-sample/resources/edit_inverse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/comment-sample/src/extension.ts b/comment-sample/src/extension.ts index e57d6c3f..d7fe2855 100644 --- a/comment-sample/src/extension.ts +++ b/comment-sample/src/extension.ts @@ -2,8 +2,19 @@ import * as vscode from 'vscode'; -let threadId = 0; -let commentId = 0; +let commentId = 1; + +class NoteComment implements vscode.Comment { + id: number; + constructor( + public body: string | vscode.MarkdownString, + public mode: vscode.CommentMode, + public author: vscode.CommentAuthorInformation, + public parent?: vscode.CommentThread + ) { + this.id = ++commentId; + } +} export function activate(context: vscode.ExtensionContext) { // A `CommentController` is able to provide comments for documents. @@ -18,92 +29,34 @@ export function activate(context: vscode.ExtensionContext) { } }; - commentController.template = { - label: 'Create New Note:', - acceptInputCommand: { - title: 'Create Note', - command: 'mywiki.createNote', - // Command is responsible for arguments - arguments: [ - commentController - ] - } - }; + let replyNote = (reply: vscode.CommentReply) => { + let thread = reply.thread; + let newComment = new NoteComment(reply.text, vscode.CommentMode.Preview, { name: 'vscode' }, thread); + thread.comments = [...thread.comments, newComment]; + } - // register `mywiki.createNote` command - context.subscriptions.push(vscode.commands.registerCommand('mywiki.createNote', (commentController: vscode.CommentController, thread: vscode.CommentThread | undefined) => { - if (commentController.inputBox) { - if (!thread) { - // the comment thread is created from comment thread template - let thread = commentController.createCommentThread(`${++threadId}`, commentController.inputBox.resource, commentController.inputBox.range, []); - // by default, a comment thread is collapsed, for newly created empty comment thread, we want to expand it and users can start commenting immediately - thread.collapsibleState = vscode.CommentThreadCollapsibleState.Expanded; - - // In this example, we call it `Create New Note` while for GH PR case, we can call it `Start Review` or `Start New Converstation` - let text = commentController.inputBox.value; - let markedString = new vscode.MarkdownString(text); - let newComment = new vscode.Comment(`${++commentId}`, markedString, 'vscode'); - - thread.comments = [newComment]; - thread.label = 'Participants: vscode'; - - // We will render all `acceptInputCommands` as Actions on the bottom of Comment Widget in the editor. - thread.acceptInputCommand = { - title: 'Create Comment', - command: 'mywiki.createComment', - arguments: [ - commentController, - thread - ] - }; - - thread.deleteCommand = { - title: 'Delete Note', - command: 'mywiki.deleteNote', - arguments: [ - thread - ] - }; - - // Lastly, we want to clear the textarea in Comment Widget. - commentController.inputBox.value = ''; - } else { - // Read text from the focused textarea in the Comment Widget. - let text = commentController.inputBox.value; - let markedString = new vscode.MarkdownString(text); - let newComment = new vscode.Comment(`${++commentId}`, markedString, 'vscode'); - - thread.comments = [newComment]; - thread.label = 'Participants: vscode'; - - // After we create the new comment thread, we may want to update the actions on the Comment Widget. - thread.acceptInputCommand = { - title: 'Create Comment', - command: 'mywiki.createComment', - arguments: [ - commentController, - thread - ] - }; - - // Lastly, we want to clear the textarea in Comment Widget. - commentController.inputBox.value = ''; - } - } - })); - - context.subscriptions.push(vscode.commands.registerCommand('mywiki.createComment', (commentController: vscode.CommentController, thread: vscode.CommentThread) => { - if (commentController.inputBox) { - let text = commentController.inputBox.value; - let markedString = new vscode.MarkdownString(text); - let newComment = new vscode.Comment(`${++commentId}`, markedString, 'vscode'); - - thread.comments = [...thread.comments, newComment]; - commentController.inputBox.value = ''; + context.subscriptions.push(vscode.commands.registerCommand('mywiki.createNote', replyNote)); + context.subscriptions.push(vscode.commands.registerCommand('mywiki.replyNote', replyNote)); + context.subscriptions.push(vscode.commands.registerCommand('mywiki.deleteNoteComment', (comment: NoteComment) => { + let thread = comment.parent; + thread.comments = thread.comments.filter((cmt: NoteComment) => cmt.id == comment.id); + + if (thread.comments.length === 0) { + thread.dispose(); } })); context.subscriptions.push(vscode.commands.registerCommand('mywiki.deleteNote', (thread: vscode.CommentThread) => { thread.dispose(); })); + + context.subscriptions.push(vscode.commands.registerCommand('mywiki.editNote', (comment: NoteComment) => { + comment.parent.comments = comment.parent.comments.map((cmt: NoteComment) => { + if (cmt.id === comment.id) { + cmt.mode = vscode.CommentMode.Editing; + } + + return cmt; + }); + })); } diff --git a/comment-sample/src/typings/vscode.proposed.d.ts b/comment-sample/src/typings/vscode.proposed.d.ts index ef1b2c19..22d0b905 100644 --- a/comment-sample/src/typings/vscode.proposed.d.ts +++ b/comment-sample/src/typings/vscode.proposed.d.ts @@ -35,15 +35,15 @@ declare module 'vscode' { Expanded = 1 } + export enum CommentMode { + Editing = 0, + Preview = 1 + } + /** * A collection of [comments](#Comment) representing a conversation at a particular range in a document. */ export interface CommentThread { - /** - * A unique identifier of the comment thread. - */ - readonly id: string; - /** * The uri of the document the thread has been created on. */ @@ -58,7 +58,7 @@ declare module 'vscode' { /** * The ordered comments of the thread. */ - comments: Comment[]; + comments: ReadonlyArray; /** * Whether the thread should be collapsed or expanded when opening the document. @@ -71,28 +71,6 @@ declare module 'vscode' { */ label?: string; - /** - * Optional accept input command - * - * `acceptInputCommand` is the default action rendered on Comment Widget, which is always placed rightmost. - * This command will be invoked when users the user accepts the value in the comment editor. - * This command will disabled when the comment editor is empty. - */ - acceptInputCommand?: Command; - - /** - * Optional additonal commands. - * - * `additionalCommands` are the secondary actions rendered on Comment Widget. - */ - additionalCommands?: Command[]; - - /** - * The command to be executed when users try to delete the comment thread. Currently, this is only called - * when the user collapses a comment thread that has no comments in it. - */ - deleteCommand?: Command; - /** * Dispose this comment thread. * @@ -102,76 +80,47 @@ declare module 'vscode' { } /** - * A comment is displayed within the editor or the Comments Panel, depending on how it is provided. + * Author information of a [comment](#Comment) */ - export class Comment { + export interface CommentAuthorInformation { /** - * The id of the comment + * The display name of the author of the comment */ - readonly id: string; + name: string; /** - * The human-readable comment body + * The optional icon path for the author */ - readonly body: MarkdownString; - - /** - * The display name of the user who created the comment - */ - readonly userName: string; - - /** - * Optional label describing the [Comment](#Comment) - * Label will be rendered next to userName if exists. - */ - readonly label?: string; - - /** - * The icon path for the user who created the comment - */ - readonly userIconPath?: Uri; - - /** - * The command to be executed if the comment is selected in the Comments Panel - */ - readonly selectCommand?: Command; - - /** - * The command to be executed when users try to save the edits to the comment - */ - readonly editCommand?: Command; - - /** - * The command to be executed when users try to delete the comment - */ - readonly deleteCommand?: Command; - - /** - * @param id The id of the comment - * @param body The human-readable comment body - * @param userName The display name of the user who created the comment - */ - constructor(id: string, body: MarkdownString, userName: string); + iconPath?: Uri; } /** - * The comment input box in Comment Widget. + * A comment is displayed within the editor or the Comments Panel, depending on how it is provided. */ - export interface CommentInputBox { + export interface Comment { /** - * Setter and getter for the contents of the comment input box + * The human-readable comment body */ - value: string; + body: string | MarkdownString; + + mode: CommentMode; /** - * The uri of the document comment input box has been created on + * The author information of the comment */ - resource: Uri; + author: CommentAuthorInformation; /** - * The range the comment input box is located within the document + * Optional label describing the [Comment](#Comment) + * Label will be rendered next to authorName if exists. */ - range: Range; + label?: string; + } + + export interface CommentReply { + thread: CommentThread; + + text: string; } /** @@ -184,38 +133,6 @@ declare module 'vscode' { provideCommentingRanges(document: TextDocument, token: CancellationToken): ProviderResult; } - /** - * Comment thread template for new comment thread creation. - */ - export interface CommentThreadTemplate { - /** - * The human-readable label describing the [Comment Thread](#CommentThread) - */ - readonly label: string; - - /** - * Optional accept input command - * - * `acceptInputCommand` is the default action rendered on Comment Widget, which is always placed rightmost. - * This command will be invoked when users the user accepts the value in the comment editor. - * This command will disabled when the comment editor is empty. - */ - readonly acceptInputCommand?: Command; - - /** - * Optional additonal commands. - * - * `additionalCommands` are the secondary actions rendered on Comment Widget. - */ - readonly additionalCommands?: Command[]; - - /** - * The command to be executed when users try to delete the comment thread. Currently, this is only called - * when the user collapses a comment thread that has no comments in it. - */ - readonly deleteCommand?: Command; - } - /** * A comment controller is able to provide [comments](#CommentThread) support to the editor and * provide users various ways to interact with comments. @@ -231,25 +148,6 @@ declare module 'vscode' { */ readonly label: string; - /** - * The active [comment input box](#CommentInputBox) or `undefined`. The active `inputBox` is the input box of - * the comment thread widget that currently has focus. It's `undefined` when the focus is not in any CommentInputBox. - */ - readonly inputBox: CommentInputBox | undefined; - - /** - * Optional comment thread template information. - * - * The comment controller will use this information to create the comment widget when users attempt to create new comment thread - * from the gutter or command palette. - * - * When users run `CommentThreadTemplate.acceptInputCommand` or `CommentThreadTemplate.additionalCommands`, extensions should create - * the approriate [CommentThread](#CommentThread). - * - * If not provided, users won't be able to create new comment threads in the editor. - */ - template?: CommentThreadTemplate; - /** * Optional commenting range provider. Provide a list [ranges](#Range) which support commenting to any given resource uri. * @@ -266,7 +164,7 @@ declare module 'vscode' { * @param range The range the comment thread is located within the document. * @param comments The ordered comments of the thread. */ - createCommentThread(id: string, resource: Uri, range: Range, comments: Comment[]): CommentThread; + createCommentThread(uri: Uri, range: Range, comments: Comment[]): CommentThread; /** * Dispose this comment controller.