update

src/views/components/element/ShapeElement/BaseShapeElement.vue

@@ -57,7 +57,7 @@
           </g>
         </svg>
 
-        <div class="shape-text" :class="text.align">
+        <div class="shape-text" :style="text.style" :class="[text.align, { 'editable': editable || text.content }]">
           <div class="ProseMirror-static" v-html="text.content"></div>
         </div>
       </div>
@@ -131,6 +131,8 @@ const text = computed<ShapeText>(() => {
   }
 }
 .shape-text {
+  width:100%;
+  height:100%;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -140,6 +142,11 @@ const text = computed<ShapeText>(() => {
   flex-direction: column;
   padding: 5px;
   word-break: break-word;
+  pointer-events: none;
+
+  &.editable {
+    pointer-events: all;
+  }
 
   &.top {
     justify-content: space-around;

src/views/components/element/TextElement/BaseTextElement.vue

@@ -16,7 +16,7 @@
         class="element-content"
         :style="{
           width: elementInfo.vertical ? 'auto' : elementInfo.width + 'px',
-          height: elementInfo.vertical ? elementInfo.height + 'px' : 'auto',
+          height: elementInfo.vertical ? elementInfo.height + 'px' :  elementInfo.height + 'px',
           backgroundColor: elementInfo.fill,
           opacity: elementInfo.opacity,
           textShadow: shadowStyle,
@@ -30,19 +30,21 @@
           overflow: hidden,
         }"
       >
-        <ElementOutline
-          :width="elementInfo.width"
-          :height="elementInfo.height"
-          :outline="elementInfo.outline"
-        />
-        <div 
-          class="text ProseMirror-static" 
-          :class="{ 'thumbnail': target === 'thumbnail' }"
-          :style="{
-            '--paragraphSpace': `${elementInfo.paragraphSpace === undefined ? 5 : elementInfo.paragraphSpace}px`,
-          }"
-          v-html="elementInfo.content"
-        ></div>
+        <div class="shape-text" :style="elementInfo.style" :class="[elementInfo.align, { 'editable': editable || elementInfo.content }]">
+          <ElementOutline
+            :width="elementInfo.width"
+            :height="elementInfo.height"
+            :outline="elementInfo.outline"
+          />
+          <div 
+            class="text ProseMirror-static" 
+            :class="{ 'thumbnail': target === 'thumbnail' }"
+            :style="{
+              '--paragraphSpace': `${elementInfo.paragraphSpace === undefined ? 5 : elementInfo.paragraphSpace}px`,
+            }"
+            v-html="elementInfo.content"
+          ></div>
+        </div>
       </div>
     </div>
   </div>
@@ -86,4 +88,37 @@ const { shadowStyle } = useElementShadow(shadow)
     }
   }
 }
+
+.shape-text {
+  width:100%;
+  height:100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  word-break: break-word;
+  pointer-events: none;
+
+  &.editable {
+    pointer-events: all;
+  }
+
+  &.top {
+    justify-content: space-around;
+  }
+  &.middle {
+    justify-content: center;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+  }
+  &.bottom {
+    justify-content: flex-end;
+  }
+}
+
 </style>