@opensumi/ide-comments 2.21.7-rc-1670229502.0 → 2.21.7

package/src/browser/comments-item.view.tsx

@@ -1,362 +0,0 @@
-import { observer } from 'mobx-react-lite';
-import React from 'react';
-
-import { Button } from '@opensumi/ide-components';
-import {
-  useInjectable,
-  localize,
-  IContextKeyService,
-  isUndefined,
-  IMarkdownString,
-  toLocalString,
-  toMarkdownHtml,
-} from '@opensumi/ide-core-browser';
-import { InlineActionBar } from '@opensumi/ide-core-browser/lib/components/actions';
-import { AbstractMenuService, MenuId, IMenu } from '@opensumi/ide-core-browser/lib/menu/next';
-
-import {
-  IThreadComment,
-  ICommentsCommentTitle,
-  CommentMode,
-  ICommentReply,
-  ICommentsCommentContext,
-  ICommentsZoneWidget,
-  ICommentsFeatureRegistry,
-  ICommentsThread,
-} from '../common';
-
-import { CommentReactions, CommentReactionSwitcher } from './comment-reactions.view';
-import { CommentsBody } from './comments-body';
-import { CommentsTextArea } from './comments-textarea.view';
-import styles from './comments.module.less';
-
-// TODO: 更好的时间格式化组件
-const Timestamp: React.FC<{ timestamp: string }> = ({ timestamp }) => {
-  const formatTimestamp = React.useMemo(() => {
-    const date = new Date(timestamp);
-    return toLocalString(date);
-  }, [timestamp]);
-
-  return <span className={styles.comment_item_timestamp}>{formatTimestamp}</span>;
-};
-
-const useCommentContext = (
-  contextKeyService: IContextKeyService,
-  comment: IThreadComment,
-): [
-  string | IMarkdownString,
-  React.Dispatch<React.SetStateAction<string | IMarkdownString>>,
-  (event: React.ChangeEvent<HTMLTextAreaElement>) => void,
-  IMenu,
-  IMenu,
-  (files: FileList) => Promise<void>,
-] => {
-  const menuService = useInjectable<AbstractMenuService>(AbstractMenuService);
-  const { body, contextValue } = comment;
-  const [textValue, setTextValue] = React.useState<string | IMarkdownString>('');
-  const commentsFeatureRegistry = useInjectable<ICommentsFeatureRegistry>(ICommentsFeatureRegistry);
-  const fileUploadHandler = React.useMemo(() => commentsFeatureRegistry.getFileUploadHandler(), []);
-  // set textValue when body changed
-  React.useEffect(() => {
-    setTextValue(body);
-  }, [body]);
-
-  // Each comment has its own commentContext and commentTitleContext.
-  const commentContextService = React.useMemo(() => contextKeyService.createScoped(), []);
-  // it's value will true when textarea is empty
-  const commentIsEmptyContext = React.useMemo(
-    () => commentContextService.createKey<boolean>('commentIsEmpty', !comment.body),
-    [],
-  );
-  // below the comment textarea
-  const commentContext = React.useMemo(
-    () => menuService.createMenu(MenuId.CommentsCommentContext, commentContextService),
-    [],
-  );
-  // after the comment body
-  const commentTitleContext = React.useMemo(
-    () => menuService.createMenu(MenuId.CommentsCommentTitle, commentContextService),
-    [],
-  );
-
-  const itemCommentContext = React.useRef(commentContextService.createKey('comment', contextValue));
-
-  React.useEffect(() => {
-    itemCommentContext.current.set(contextValue);
-  }, [contextValue]);
-
-  const onChangeTextArea = React.useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    commentIsEmptyContext.set(!event.target.value);
-    setTextValue(event.target.value);
-  }, []);
-
-  const handleDragFiles = React.useCallback(
-    async (files: FileList) => {
-      if (fileUploadHandler) {
-        const appendText = await fileUploadHandler(textValue, files);
-        setTextValue((text) => {
-          const value = text + appendText;
-          commentIsEmptyContext.set(!value);
-          return value;
-        });
-      }
-    },
-    [textValue],
-  );
-
-  return [textValue, setTextValue, onChangeTextArea, commentContext, commentTitleContext, handleDragFiles];
-};
-
-const ReplyItem: React.FC<{
-  reply: IThreadComment;
-  thread: ICommentsThread;
-}> = observer(({ reply, thread }) => {
-  const { contextKeyService } = thread;
-  const { author, label, body, mode, timestamp } = reply;
-  const iconUrl = author.iconPath?.toString();
-  const [textValue, setTextValue, onChangeTextArea, commentContext, commentTitleContext, handleDragFiles] =
-    useCommentContext(contextKeyService, reply);
-
-  // 判断是正常 Inline Text 还是 Markdown Text
-  const isInlineText = React.useMemo(() => {
-    const parsedStr = toMarkdownHtml(typeof body === 'string' ? body : body.value);
-    // 解析出来非纯p标签的则为Markdown Text
-    const isInline = /^\<p\>[^<>]+\<\/p\>\n$/.test(parsedStr);
-    return isInline;
-  }, [body]);
-
-  return (
-    <div className={styles.reply_item}>
-      {isUndefined(mode) || mode === CommentMode.Preview ? (
-        <div>
-          {isInlineText ? (
-            <>
-              {iconUrl && <img className={styles.reply_item_icon} src={iconUrl} alt={author.name} />}
-              <span className={styles.comment_item_author_name}>{author.name}</span>
-              {timestamp && <Timestamp timestamp={timestamp} />}
-              {typeof label === 'string' ? <span className={styles.comment_item_label}>{label}</span> : label}
-              {' : '}
-              <span className={styles.comment_item_body}>{body}</span>
-              {reply.reactions && reply.reactions.length > 0 && (
-                <CommentReactionSwitcher className={styles.reply_item_title} thread={thread} comment={reply} />
-              )}
-              <InlineActionBar<ICommentsCommentTitle>
-                separator='inline'
-                className={styles.reply_item_title}
-                menus={commentTitleContext}
-                context={[
-                  {
-                    thread,
-                    comment: reply,
-                    menuId: MenuId.CommentsCommentTitle,
-                  },
-                ]}
-                type='icon'
-              />
-            </>
-          ) : (
-            <>
-              <div className={styles.comment_item_markdown_header}>
-                <div>
-                  {iconUrl && <img className={styles.reply_item_icon} src={iconUrl} alt={author.name} />}
-                  <span className={styles.comment_item_author_name}>{author.name}</span>
-                  {timestamp && <Timestamp timestamp={timestamp} />}
-                  {typeof label === 'string' ? <span className={styles.comment_item_label}>{label}</span> : label}
-                  {' : '}
-                </div>
-                <InlineActionBar<ICommentsCommentTitle>
-                  separator='inline'
-                  className={styles.reply_item_title}
-                  menus={commentTitleContext}
-                  context={[
-                    {
-                      thread,
-                      comment: reply,
-                      menuId: MenuId.CommentsCommentTitle,
-                    },
-                  ]}
-                  type='icon'
-                />
-              </div>
-              <CommentsBody body={body} />
-            </>
-          )}
-        </div>
-      ) : (
-        <div>
-          <CommentsTextArea
-            value={typeof textValue === 'string' ? textValue : textValue.value}
-            autoFocus={true}
-            onChange={onChangeTextArea}
-            dragFiles={handleDragFiles}
-          />
-          <InlineActionBar<ICommentsCommentContext>
-            className={styles.comment_item_reply}
-            menus={commentContext}
-            context={[
-              {
-                thread,
-                comment: reply,
-                body: textValue,
-                menuId: MenuId.CommentsCommentContext,
-              },
-            ]}
-            type='button'
-            separator='inline'
-            afterClick={() => {
-              // restore textarea value
-              setTextValue(body);
-            }}
-          />
-        </div>
-      )}
-      {reply.reactions && reply.reactions.length > 0 && <CommentReactions thread={thread} comment={reply} />}
-    </div>
-  );
-});
-
-export const CommentItem: React.FC<{
-  thread: ICommentsThread;
-  commentThreadContext: IMenu;
-  widget: ICommentsZoneWidget;
-}> = observer(({ thread, commentThreadContext, widget }) => {
-  const { readOnly, contextKeyService } = thread;
-  const [showReply, setShowReply] = React.useState(false);
-  const [replyText, setReplyText] = React.useState('');
-  const [comment, ...replies] = thread.comments;
-  const { author, label, body, mode, timestamp } = comment;
-  const iconUrl = author.iconPath?.toString();
-  const [textValue, setTextValue, onChangeTextArea, commentContext, commentTitleContext, handleDragFiles] =
-    useCommentContext(contextKeyService, comment);
-  const commentsFeatureRegistry = useInjectable<ICommentsFeatureRegistry>(ICommentsFeatureRegistry);
-  const fileUploadHandler = React.useMemo(() => commentsFeatureRegistry.getFileUploadHandler(), []);
-  const replyIsEmptyContext = React.useMemo(() => contextKeyService.createKey<boolean>('commentIsEmpty', true), []);
-
-  // modify reply
-  function onChangeReply(event: React.ChangeEvent<HTMLTextAreaElement>) {
-    replyIsEmptyContext.set(!event.target.value);
-    setReplyText(event.target.value);
-  }
-
-  const handleDragFilesToReply = React.useCallback(
-    async (files: FileList) => {
-      if (fileUploadHandler) {
-        const appendText = await fileUploadHandler(textValue, files);
-        setReplyText((text) => {
-          const value = text + appendText;
-          replyIsEmptyContext.set(!value);
-          return value;
-        });
-      }
-    },
-    [replyText],
-  );
-
-  return (
-    <div className={styles.comment_item}>
-      {iconUrl && <img className={styles.comment_item_icon} src={iconUrl} alt={author.name} />}
-      <div className={styles.comment_item_content}>
-        <div className={styles.comment_item_head}>
-          <div className={styles.comment_item_name}>
-            <span className={styles.comment_item_author_name}>{author.name}</span>
-            {timestamp && <Timestamp timestamp={timestamp} />}
-            {typeof label === 'string' ? <span className={styles.comment_item_label}>{label}</span> : label}
-          </div>
-          <div className={styles.comment_item_actions}>
-            {comment.reactions && comment.reactions.length > 0 && (
-              <CommentReactionSwitcher thread={thread} comment={comment} />
-            )}
-            {!readOnly && (
-              <Button
-                className={styles.comment_item_reply_button}
-                size='small'
-                type='secondary'
-                onClick={() => setShowReply(true)}
-              >
-                {localize('comments.thread.action.reply')}
-              </Button>
-            )}
-            <InlineActionBar<ICommentsCommentTitle>
-              menus={commentTitleContext}
-              context={[
-                {
-                  thread,
-                  comment,
-                  menuId: MenuId.CommentsCommentTitle,
-                },
-              ]}
-              type='button'
-            />
-          </div>
-        </div>
-        {isUndefined(mode) || mode === CommentMode.Preview ? (
-          <CommentsBody body={body} />
-        ) : (
-          <div>
-            <CommentsTextArea
-              value={typeof textValue === 'string' ? textValue : textValue.value}
-              autoFocus={true}
-              onChange={onChangeTextArea}
-              dragFiles={handleDragFiles}
-            />
-            <InlineActionBar<ICommentsCommentContext>
-              className={styles.comment_item_context}
-              menus={commentContext}
-              context={[
-                {
-                  thread,
-                  comment,
-                  body: textValue,
-                  menuId: MenuId.CommentsCommentContext,
-                },
-              ]}
-              separator='inline'
-              type='button'
-              afterClick={() => {
-                // restore textarea value
-                setTextValue(body);
-              }}
-            />
-          </div>
-        )}
-        {comment.reactions && comment.reactions.length > 0 && <CommentReactions thread={thread} comment={comment} />}
-        {(replies.length > 0 || showReply) && (
-          <div className={styles.comment_item_reply_wrap}>
-            {replies.map((reply) => (
-              <ReplyItem key={reply.id} thread={thread} reply={reply} />
-            ))}
-            {showReply && (
-              <div>
-                <CommentsTextArea
-                  autoFocus={true}
-                  value={replyText}
-                  onChange={onChangeReply}
-                  placeholder={`${localize('comments.reply.placeholder')}...`}
-                  dragFiles={handleDragFilesToReply}
-                />
-                <InlineActionBar<ICommentReply>
-                  className={styles.comment_item_reply}
-                  menus={commentThreadContext}
-                  context={[
-                    {
-                      thread,
-                      text: replyText,
-                      widget,
-                      menuId: MenuId.CommentsCommentThreadContext,
-                    },
-                  ]}
-                  separator='inline'
-                  type='button'
-                  afterClick={() => {
-                    setReplyText('');
-                    setShowReply(false);
-                  }}
-                />
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-});

package/src/browser/comments-panel.view.tsx

@@ -1,127 +0,0 @@
-import clx from 'classnames';
-import { observer } from 'mobx-react-lite';
-import React from 'react';
-
-import { useInjectable, isUndefined, ViewState, IEventBus, localize } from '@opensumi/ide-core-browser';
-import { DeprecatedRecycleTree } from '@opensumi/ide-core-browser/lib/components';
-import { WorkbenchEditorService } from '@opensumi/ide-editor';
-
-import { ICommentsService, ICommentsTreeNode, CommentPanelCollapse, ICommentsFeatureRegistry } from '../common';
-
-import styles from './comments.module.less';
-
-export const CommentsPanel = observer<{ viewState: ViewState; className?: string }>((props) => {
-  const commentsService = useInjectable<ICommentsService>(ICommentsService);
-  const workbenchEditorService = useInjectable<WorkbenchEditorService>(WorkbenchEditorService);
-  const commentsFeatureRegistry = useInjectable<ICommentsFeatureRegistry>(ICommentsFeatureRegistry);
-  const [treeNodes, setTreeNodes] = React.useState<ICommentsTreeNode[]>([]);
-  const eventBus: IEventBus = useInjectable(IEventBus);
-
-  React.useEffect(() => {
-    eventBus.on(CommentPanelCollapse, () => {
-      setTreeNodes((nodes) =>
-        nodes.map((node) => {
-          if (!isUndefined(node.expanded)) {
-            node.expanded = false;
-          }
-          return node;
-        }),
-      );
-    });
-  }, []);
-
-  const getRenderTree = React.useCallback(
-    (nodes: ICommentsTreeNode[]) =>
-      nodes.filter((node) => {
-        if (node && node.parent) {
-          if (node.parent.expanded === false || node.parent.parent?.expanded === false) {
-            return false;
-          }
-        }
-        return true;
-      }),
-    [],
-  );
-
-  React.useEffect(() => {
-    setTreeNodes(commentsService.commentsTreeNodes);
-  }, [commentsService.commentsTreeNodes]);
-
-  const handleSelect = React.useCallback(
-    ([item]: [ICommentsTreeNode]) => {
-      // 可能点击到空白位置
-      if (!item) {
-        return;
-      }
-
-      if (!isUndefined(item.expanded)) {
-        const newNodes = treeNodes.map((node) => {
-          if (node.id === item.id) {
-            node.expanded = !node.expanded;
-          }
-          node.selected = node.id === item.id;
-          return node;
-        });
-        setTreeNodes(newNodes);
-      } else {
-        const newNodes = treeNodes.map((node) => {
-          node.selected = node.id === item.id;
-          return node;
-        });
-        setTreeNodes(newNodes);
-      }
-
-      if (item.onSelect) {
-        item.onSelect(item);
-      } else {
-        workbenchEditorService.open(item.uri!, {
-          range: item.thread.range,
-        });
-      }
-    },
-    [workbenchEditorService, treeNodes],
-  );
-
-  const commentsPanelOptions = React.useMemo(() => commentsFeatureRegistry.getCommentsPanelOptions(), []);
-
-  const headerComponent = React.useMemo(() => commentsPanelOptions.header, [commentsPanelOptions]);
-
-  const treeHeight = React.useMemo(
-    () => props.viewState.height - (headerComponent?.height || 0),
-    [props.viewState.height],
-  );
-
-  const scrollContainerStyle = React.useMemo(
-    () => ({
-      width: '100%',
-      height: treeHeight,
-    }),
-    [treeHeight],
-  );
-
-  const defaultPlaceholder = React.useMemo(() => commentsPanelOptions.defaultPlaceholder, [commentsPanelOptions]);
-
-  const nodes = getRenderTree(treeNodes);
-
-  return (
-    <div className={clx(props.className, styles.comment_panel)}>
-      {headerComponent?.component}
-      {nodes.length ? (
-        <DeprecatedRecycleTree
-          containerHeight={treeHeight}
-          scrollContainerStyle={scrollContainerStyle}
-          nodes={nodes}
-          foldable={true}
-          outline={false}
-          onSelect={(item) => handleSelect(item)}
-          leftPadding={20}
-          {...commentsPanelOptions.recycleTreeProps}
-        />
-      ) : !defaultPlaceholder || typeof defaultPlaceholder === 'string' ? (
-        <div className={styles.panel_placeholder}>{defaultPlaceholder || localize('comments.panel.placeholder')}</div>
-      ) : (
-        defaultPlaceholder
-      )}
-    </div>
-  );
-});

package/src/browser/comments-textarea.view.tsx

@@ -1,194 +0,0 @@
-import React from 'react';
-import { MentionsInput, Mention } from 'react-mentions';
-
-import { Tabs } from '@opensumi/ide-components';
-import { localize, useInjectable } from '@opensumi/ide-core-browser';
-
-import { ICommentsFeatureRegistry } from '../common';
-
-import { CommentsBody } from './comments-body';
-import styles from './comments.module.less';
-import { getMentionBoxStyle } from './mentions.style';
-
-
-export interface ICommentTextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  focusDelay?: number;
-  minRows?: number;
-  maxRows?: number;
-  initialHeight?: string;
-  value: string;
-  dragFiles?: (files: FileList) => void;
-}
-
-const defaultTrigger = '@';
-const defaultMarkup = '@[__display__](__id__)';
-const defaultDisplayTransform = (id: string, display: string) => `@${display}`;
-
-export const CommentsTextArea = React.forwardRef<HTMLTextAreaElement, ICommentTextAreaProps>((props, ref) => {
-  const {
-    focusDelay = 0,
-    autoFocus = false,
-    placeholder = '',
-    onFocus,
-    onBlur,
-    onChange,
-    maxRows = 10,
-    minRows = 2,
-    value,
-    initialHeight,
-    dragFiles,
-  } = props;
-  const [index, setIndex] = React.useState(0);
-  const commentsFeatureRegistry = useInjectable<ICommentsFeatureRegistry>(ICommentsFeatureRegistry);
-  const inputRef = React.useRef<HTMLTextAreaElement | null>(null);
-  const mentionsRef = React.useRef<HTMLDivElement | null>(null);
-  const itemRef = React.useRef<HTMLDivElement | null>(null);
-  // make `ref` to input works
-  React.useImperativeHandle(ref, () => inputRef.current!);
-
-  const handleFileSelect = React.useCallback(
-    async (event: DragEvent) => {
-      event.stopPropagation();
-      event.preventDefault();
-
-      const files = event.dataTransfer?.files; // FileList object.
-      if (files && dragFiles) {
-        await dragFiles(files);
-      }
-
-      if (inputRef.current) {
-        inputRef.current.focus();
-        selectLastPosition(inputRef.current.value);
-      }
-    },
-    [dragFiles],
-  );
-
-  const handleDragOver = React.useCallback((event) => {
-    event.stopPropagation();
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'copy';
-  }, []);
-
-  const selectLastPosition = React.useCallback((value) => {
-    const textarea = inputRef.current;
-    if (textarea) {
-      const position = value.toString().length;
-      textarea.setSelectionRange(position, position);
-    }
-  }, []);
-
-  React.useEffect(() => {
-    const textarea = inputRef.current;
-    if (!textarea) {
-      return;
-    }
-    if (initialHeight && textarea.style) {
-      textarea.style.height = initialHeight;
-    }
-    if (focusDelay) {
-      setTimeout(() => {
-        textarea.focus({
-          preventScroll: true,
-        });
-      }, focusDelay);
-    }
-    // auto set last selection
-    selectLastPosition(value);
-    function handleMouseWheel(event: Event) {
-      const target = event.target as Element;
-      if (target) {
-        if (
-          // 当前文本框出现滚动时，防止被编辑器滚动拦截，阻止冒泡
-          (target.nodeName.toUpperCase() === 'TEXTAREA' && target.scrollHeight > target.clientHeight) ||
-          // 当是在弹出的提及里滚动，防止被编辑器滚动拦截，阻止冒泡
-          target.nodeName.toUpperCase() === 'UL' ||
-          target.parentElement?.nodeName.toUpperCase() === 'UL' ||
-          target.parentElement?.parentElement?.nodeName.toUpperCase() === 'UL'
-        ) {
-          event.stopPropagation();
-        }
-      }
-    }
-    mentionsRef.current?.addEventListener('mousewheel', handleMouseWheel, true);
-    return () => {
-      mentionsRef.current?.removeEventListener('mousewheel', handleMouseWheel, true);
-    };
-  }, []);
-
-  React.useEffect(() => {
-    if (index === 0) {
-      setTimeout(() => {
-        inputRef.current?.focus({
-          preventScroll: true,
-        });
-      }, focusDelay);
-      selectLastPosition(value);
-    }
-  }, [index]);
-
-  const style = React.useMemo(
-    () =>
-      getMentionBoxStyle({
-        minRows,
-        maxRows,
-      }),
-    [minRows, maxRows],
-  );
-
-  const mentionsOptions = React.useMemo(() => commentsFeatureRegistry.getMentionsOptions(), [commentsFeatureRegistry]);
-
-  const providerData = React.useCallback(
-    async (query: string, callback) => {
-      if (mentionsOptions.providerData) {
-        const data = await mentionsOptions.providerData(query);
-        callback(data);
-      } else {
-        callback([]);
-      }
-    },
-    [mentionsOptions],
-  );
-
-  return (
-    <div className={styles.textarea_container}>
-      <Tabs
-        mini
-        value={index}
-        onChange={(index: number) => setIndex(index)}
-        tabs={[localize('comments.thread.textarea.write'), localize('comments.thread.textarea.preview')]}
-      />
-      <div>
-        {index === 0 ? (
-          <div ref={mentionsRef}>
-            <MentionsInput
-              autoFocus={autoFocus}
-              onDragOver={handleDragOver}
-              onDrop={handleFileSelect}
-              inputRef={inputRef}
-              ref={itemRef}
-              value={value}
-              placeholder={placeholder}
-              onChange={onChange}
-              onFocus={onFocus}
-              onBlur={onBlur}
-              style={style}
-            >
-              <Mention
-                markup={mentionsOptions.markup || defaultMarkup}
-                renderSuggestion={mentionsOptions.renderSuggestion}
-                trigger={defaultTrigger}
-                data={providerData}
-                displayTransform={mentionsOptions.displayTransform || defaultDisplayTransform}
-              />
-            </MentionsInput>
-          </div>
-        ) : (
-          <div className={styles.textarea_preview}>
-            <CommentsBody body={value} />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-});