Merge pull request #168 from mermaid-js/fix/async-message-alignment

Fixed editing style and async message text-align.

Author: MrCoder

src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Interaction/SelfInvocation/SelfInvocation.vue

@@ -15,13 +15,13 @@
       >
         {{ number }}
       </div>
-      <div :style="textStyle" :class="classNames">
-        <MessageLabel
-          :labelText="labelText"
-          :labelPosition="labelPosition"
-          :isSelf="true"
-        />
-      </div>
+      <MessageLabel
+        :style="textStyle"
+        :class="classNames"
+        :labelText="labelText"
+        :labelPosition="labelPosition"
+        :isSelf="true"
+      />
     </label>
     <svg class="arrow text-skin-message-arrow" width="30" height="24">
       <polyline

src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/InteractionAsync/SelfInvocationAsync/SelfInvocation-async.vue

@@ -11,6 +11,8 @@
         {{ number }}
       </div>
       <MessageLabel
+        :style="textStyle"
+        :class="classNames"
         :labelText="labelText"
         :labelPosition="labelPosition"
         :isAsync="true"

src/components/DiagramFrame/SeqDiagram/MessageLayer/Block/Statement/Message/Message.vue

@@ -5,15 +5,13 @@
       'flex-row-reverse': rtl,
       return: type === 'return',
       'right-to-left': rtl,
-      'text-left': isAsync,
-      'text-center': !isAsync,
     }"
     :style="{ 'border-bottom-style': borderStyle || undefined }"
     @click="onClick"
     ref="messageRef"
   >
     <div
-      class="name group flex-grow relative hover:text-skin-message-hover hover:bg-skin-message-hover"
+      class="name group text-center flex-grow relative hover:text-skin-message-hover hover:bg-skin-message-hover"
     >
       <div class="inline-block static min-h-[1em]">
         <div :style="textStyle" :class="classNames">

src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLabel.vue

@@ -4,7 +4,6 @@
     class="px-1 cursor-text right hover:text-skin-message-hover hover:bg-skin-message-hover"
     :class="{
       'cursor-text': editing,
-      'absolute right-1/2 translate-x-1/2 bottom-0': editing && !isSelfAsync,
     }"
     :contenteditable="editing && mode === RenderMode.Dynamic"
     @dblclick="handleDblClick"
@@ -34,14 +33,13 @@ const props = withDefaults(
   },
 );
 
-const { labelText, labelPosition, isAsync, isSelf } = toRefs(props);
+const { labelText, labelPosition, isAsync } = toRefs(props);
 const store = useStore();
 const mode = computed(() => store.state.mode);
 const code = computed(() => store.getters.code);
 const onContentChange = computed(
   () => store.getters.onContentChange || (() => {}),
 );
-const isSelfAsync = computed(() => !!isAsync?.value && !!isSelf?.value);
 
 function updateCode(code: string) {
   store.dispatch("updateCode", { code });