update

src/App.vue

@@ -135,11 +135,6 @@ window.addEventListener('beforeunload', () => {
   height: 100%;
 }
 
-sub {
-  display: grid;
-  align-items: center;
-}
-
 .image-preview {
   position: fixed;
   inset: 0;

src/assets/styles/prosemirror.scss

@@ -59,8 +59,7 @@
     font-size: smaller;
   }
   sub {
-    vertical-align: sub;
-    font-size: smaller;
+    vertical-align: baseline;
   }
 
   blockquote {

src/components/CollapsibleToolbar/index.vue

@@ -383,7 +383,6 @@ const getTypeClass = (type?: number) => {
   font-weight: 500;
   color: #6b7280;
   text-align: center;
-  line-height: 1.2;
 }
 
 .sidebar-item:hover .item-label,

src/utils/prosemirror/schema/marks.ts

@@ -10,7 +10,7 @@ const subscript: MarkSpec = {
       getAttrs: value => value === 'sub' && null
     },
   ],
-  toDOM: () => ['sub', 0],
+  toDOM: () => ['sub', { style: 'vertical-align: baseline;' },  0],
 }
 
 const superscript: MarkSpec = {

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

@@ -138,8 +138,7 @@ const text = computed<ShapeText>(() => {
   right: 0;
   display: flex;
   flex-direction: column;
-  padding: 10px;
-  line-height: 1.2;
+  padding: 5px;
   word-break: break-word;
 
   &.top {

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

@@ -236,8 +236,7 @@ const startEdit = () => {
   right: 0;
   display: flex;
   flex-direction: column;
-  padding: 10px;
-  line-height: 1.2;
+  padding: 5px;
   word-break: break-word;
   pointer-events: none;
 

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

@@ -25,6 +25,9 @@
           color: elementInfo.defaultColor,
           fontFamily: elementInfo.defaultFontName,
           writingMode: elementInfo.vertical ? 'vertical-rl' : 'horizontal-tb',
+          display: 'flex',
+          alignItems: 'center',
+          overflow: hidden,
         }"
       >
         <ElementOutline