fix: enhance Playground.vue components in SuperEditor and SuperDoc

Author: caiopizzol

packages/super-editor/src/dev/components/Playground.vue

@@ -196,9 +196,11 @@ onMounted(async () => {
   display: flex;
   justify-content: center;
 }
+
 .page-spacer:nth-child(odd) {
   background-color: #aa000055;
 }
+
 .dev-app {
   --header-height: 154px;
   --toolbar-height: 39px;
@@ -225,9 +227,11 @@ onMounted(async () => {
 .dev-app__header-side {
   display: flex;
 }
+
 .dev-app__header-side--left {
   flex-direction: column;
 }
+
 .dev-app__header-side--right {
   align-items: flex-end;
 }

packages/superdoc/src/dev/components/Playground.vue

@@ -206,7 +206,7 @@ onMounted(async () => {
           </div>
           <div class="dev-app__header-upload">
             Upload docx, html or markdown
-            <BasicUpload @file-change="handleNewFile" />
+            <BasicUpload @file-change="handleNewFile" accept=".docx,.html,.md" />
           </div>
         </div>
         <div class="dev-app__header-side dev-app__header-side--right">
@@ -240,6 +240,7 @@ onMounted(async () => {
   position: relative;
   z-index: 1;
 }
+
 .comments-panel {
   width: 320px;
 }
@@ -258,13 +259,15 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
 }
+
 .comments-panel {
   position: absolute;
   right: 0;
   height: 100%;
   background-color: #fafafa;
   z-index: 100;
 }
+
 .dev-app {
   --header-height: 154px;
   --toolbar-height: 39px;
@@ -291,9 +294,11 @@ onMounted(async () => {
 .dev-app__header-side {
   display: flex;
 }
+
 .dev-app__header-side--left {
   flex-direction: column;
 }
+
 .dev-app__header-side--right {
   align-items: flex-end;
 }