mirror of
https://github.com/microsoft/vscode-extension-samples.git
synced 2026-06-13 07:10:26 +08:00
new api
This commit is contained in:
Peng Lyu
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
1
comment-sample/resources/close.svg
Normal file
1
comment-sample/resources/close.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="3 3 16 16" enable-background="new 3 3 16 16"><polygon fill="#424242" points="12.597,11.042 15.4,13.845 13.844,15.4 11.042,12.598 8.239,15.4 6.683,13.845 9.485,11.042 6.683,8.239 8.238,6.683 11.042,9.486 13.845,6.683 15.4,8.239"/></svg>
|
||||
|
After Width: | Height: | Size: 307 B |
1
comment-sample/resources/close_inverse.svg
Normal file
1
comment-sample/resources/close_inverse.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="3 3 16 16" enable-background="new 3 3 16 16"><polygon fill="#fff" points="12.597,11.042 15.4,13.845 13.844,15.4 11.042,12.598 8.239,15.4 6.683,13.845 9.485,11.042 6.683,8.239 8.238,6.683 11.042,9.486 13.845,6.683 15.4,8.239"/></svg>
|
||||
|
After Width: | Height: | Size: 304 B |
1
comment-sample/resources/edit.svg
Executable file
1
comment-sample/resources/edit.svg
Executable file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#F6F6F6;} .icon-vs-out{fill:#F6F6F6;} .icon-vs-bg{fill:#424242;}</style><path class="icon-canvas-transparent" d="M16 16h-16v-16h16v16z" id="canvas"/><path class="icon-vs-out" d="M16 4.28l-11.673 11.72h-4.327v-4.406l11.477-11.594h.308l4.215 4.237v.043z" id="outline" style="display: none;"/><path class="icon-vs-bg" d="M14.598 4.25l-1.688 1.75-3-3 1.688-1.75 3 3zm-5.688-.25l-7 7 3 3 7-7-3-3zm-7.91 8.09v2.91h2.91l-2.91-2.91z" id="iconBg"/></svg>
|
||||
|
After Width: | Height: | Size: 571 B |
1
comment-sample/resources/edit_inverse.svg
Executable file
1
comment-sample/resources/edit_inverse.svg
Executable file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><style type="text/css">.icon-canvas-transparent{opacity:0;fill:#2d2d30;} .icon-vs-out{fill:#2d2d30;} .icon-vs-bg{fill:#c5c5c5;}</style><path class="icon-canvas-transparent" d="M16 16h-16v-16h16v16z" id="canvas"/><path class="icon-vs-out" d="M16 4.28l-11.673 11.72h-4.327v-4.406l11.477-11.594h.308l4.215 4.237v.043z" id="outline" style="display: none;"/><path class="icon-vs-bg" d="M14.598 4.25l-1.688 1.75-3-3 1.688-1.75 3 3zm-5.688-.25l-7 7 3 3 7-7-3-3zm-7.91 8.09v2.91h2.91l-2.91-2.91z" id="iconBg"/></svg>
|
||||
|
After Width: | Height: | Size: 571 B |
@ -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;
|
||||
});
|
||||
}));
|
||||
}
|
||||
|
||||
162
comment-sample/src/typings/vscode.proposed.d.ts
vendored
162
comment-sample/src/typings/vscode.proposed.d.ts
vendored
@ -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<Comment>;
|
||||
|
||||
/**
|
||||
* 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<Range[]>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.
|
||||
|
||||
Reference in New Issue
Block a user