Handle imported author from docx imports, add it to comments composable, show it if it exists

Author: harbournick

packages/superdoc/src/components/CommentsLayer/CommentDialog.vue

@@ -89,13 +89,6 @@ const comments = computed(() => {
     .sort((a, b) => a.commentId === props.comment.commentId && a.createdTime - b.createdTime);
 });
 
-const getCommentUser = (comment) => {
-  return {
-    name: comment.creatorName,
-    email: comment.creatorEmail,
-  };
-};
-
 const isInternalDropdownDisabled = computed(() => {
   if (props.comment.resolvedTime) return true;
   return getConfig.value.readOnly;
@@ -260,10 +253,7 @@ const usersFiltered = computed(() => {
   if (props.comment.isInternal === true) {
     return users.filter((user) => user.access?.role === 'internal');
   }
-  if (props.comment.isInternal === false) {
-    return users.filter((user) => user.access?.role === 'external');
-  }
-  
+
   return users;
 });
 
@@ -299,7 +289,6 @@ onMounted(() => {
     <!-- Comments and their threaded (sub) comments are rendered here -->
     <div v-for="(comment, index) in comments" :key="index" class="conversation-item">
       <CommentHeader
-        :user="getCommentUser(comment)"
         :config="getConfig"
         :timestamp="getProcessedDate(comment.createdTime)"
         :comment="comment"
@@ -332,7 +321,6 @@ onMounted(() => {
         </div>
         <div v-else class="comment-editing">
           <CommentInput
-            :user="superdocStore.user"
             :users="usersFiltered"
             :config="getConfig"
             :include-header="false"
@@ -356,7 +344,6 @@ onMounted(() => {
     <div v-if="showInputSection && !getConfig.readOnly">
       <CommentInput
         ref="commentInput"
-        :user="superdocStore.user"
         :users="usersFiltered"
         :config="getConfig"
         :comment="props.comment"

packages/superdoc/src/components/CommentsLayer/CommentHeader.vue

@@ -10,10 +10,6 @@ import Avatar from '@superdoc/components/general/Avatar.vue';
 const emit = defineEmits(['resolve', 'reject', 'overflow-select']);
 const commentsStore = useCommentsStore();
 const props = defineProps({
-  user: {
-    type: Object,
-    required: true,
-  },
   timestamp: {
     type: Number,
     required: false,
@@ -107,9 +103,9 @@ const handleSelect = (value) => emit('overflow-select', value);
 <template>
   <div class="card-section comment-header">
     <div class="comment-header-left">
-      <Avatar :user="props.user" class="avatar" />
+      <Avatar :user="props.comment.getCommentUser()" class="avatar" />
       <div class="user-info">
-        <div class="user-name">{{ props.user.name }}</div>
+        <div class="user-name">{{ props.comment.getCommentUser().name }}</div>
         <div class="user-timestamp" v-if="props.comment.createdTime">{{ formatDate(props.comment.createdTime) }}</div>
       </div>
     </div>

packages/superdoc/src/components/CommentsLayer/CommentInput.vue

@@ -7,10 +7,6 @@ import CommentHeader from './CommentHeader.vue';
 
 const emit = defineEmits(['focus']);
 const props = defineProps({
-  user: {
-    type: Object,
-    required: true,
-  },
   users: {
     type: Array,
     required: false,
@@ -43,7 +39,7 @@ const handleFocusChange = (focused) => emit('focus', focused);
 
 <template>
   <div class="input-section">
-    <CommentHeader v-if="includeHeader" :user="user" :config="config" :comment="comment" :is-pending-input="true" />
+    <CommentHeader v-if="includeHeader" :config="config" :comment="comment" :is-pending-input="true" />
 
     <div class="comment-entry" :class="{ 'input-active': isFocused }">
       <SuperInput

packages/superdoc/src/components/CommentsLayer/use-comment.js

@@ -29,6 +29,7 @@ export default function useComment(params) {
   const creatorEmail = params.creatorEmail;
   const creatorName = params.creatorName;
   const createdTime = params.createdTime || Date.now();
+  const importedAuthor = ref(params.importedAuthor || null);
 
   const commentText = ref(params.commentText || '');
 
@@ -192,6 +193,14 @@ export default function useComment(params) {
     selection.selectionBounds = newCoords;
   };
 
+  const getCommentUser = () => {
+    const user = importedAuthor.value
+      ? { name: importedAuthor.value.name || "(Imported)", email: importedAuthor.value.email }
+      : { name: creatorName, email: creatorEmail };
+  
+    return user;
+  };
+
   /**
    * Emit updates to the end client, and sync with collaboration if necessary
    * 
@@ -224,6 +233,7 @@ export default function useComment(params) {
       creatorEmail,
       creatorName,
       createdTime,
+      importedAuthor: importedAuthor.value,
       isInternal: isInternal.value,
       commentText: commentText.value,
       selection: selection ? selection.getValues() : null,
@@ -261,6 +271,7 @@ export default function useComment(params) {
     resolvedTime,
     resolvedByEmail,
     resolvedByName,
+    importedAuthor,
 
     // Actions
     setText,
@@ -269,5 +280,6 @@ export default function useComment(params) {
     setIsInternal,
     setActive,
     updatePosition,
+    getCommentUser,
   });
 };

packages/superdoc/src/components/general/Avatar.vue

@@ -7,8 +7,8 @@ const props = defineProps({
 });
 
 const getInitials = (name, email) => {
-  if (!name) return;
-  const firstLetter = name.substring(0, 1) || email.substring(0, 1) || null;
+  if (!name && !email) return;
+  const firstLetter = name?.substring(0, 1) || email?.substring(0, 1) || null;
   return firstLetter;
 };
 </script>

packages/superdoc/src/stores/comments-store.js

@@ -464,8 +464,10 @@ export const useCommentsStore = defineStore('comments', () => {
         commentId: comment.id,
         isInternal: false,
         parentCommentId: comment.parentCommentId,
-        creatorEmail: comment.creatorEmail,
-        creatorName: importedName,
+        importedAuthor: {
+          name: importedName,
+          email: comment.creatorEmail,
+        },
         commentText: getHTmlFromComment(comment.textJson),
         resolvedTime: comment.isDone ? Date.now() : null,
         resolvedByEmail: comment.isDone ? comment.creatorEmail : null,