From 27f3534df9505774bdd806880e3e6f662ed3a0cb Mon Sep 17 00:00:00 2001
From: Nick Bernal <nick@harbourshare.com>
Date: Thu, 21 Aug 2025 16:50:55 -0700
Subject: [PATCH] fix: automatically insert blank docx if SuperEditor file is
 not docx type

---
 .../super-editor/src/components/SuperEditor.vue   | 15 +++++++++++++--
 .../src/dev/components/BasicUpload.vue            |  2 +-
 .../src/dev/components/DeveloperPlayground.vue    |  2 +-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/super-editor/src/components/SuperEditor.vue b/packages/super-editor/src/components/SuperEditor.vue
index ed37b6fc5c..39203e4983 100644
--- a/packages/super-editor/src/components/SuperEditor.vue
+++ b/packages/super-editor/src/components/SuperEditor.vue
@@ -11,9 +11,12 @@ import Ruler from './rulers/Ruler.vue';
 import GenericPopover from './popovers/GenericPopover.vue';
 import LinkInput from './toolbar/LinkInput.vue';
 import { checkNodeSpecificClicks } from './cursor-helpers.js';
+import { getFileObject } from '@harbour-enterprises/common';
+import BlankDOCX from '@harbour-enterprises/common/data/blank.docx?url';
 
 const emit = defineEmits(['editor-ready', 'editor-click', 'editor-keydown', 'comments-loaded', 'selection-update']);
 
+const DOCX = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
 const props = defineProps({
   documentId: {
     type: String,
@@ -44,6 +47,8 @@ const editor = shallowRef(null);
 const editorWrapper = ref(null);
 const editorElem = ref(null);
 
+const fileSource = ref(null);
+
 /**
  * Generic popover controls including state, open and close functions
  */
@@ -95,8 +100,14 @@ const pollForMetaMapData = (ydoc, retries = 10, interval = 500) => {
 };
 
 const loadNewFileData = async () => {
+  fileSource.value = props.fileSource;
+  if (!fileSource.value || fileSource.value.type !== DOCX) {
+    fileSource.value = await getFileObject(BlankDOCX, 'blank.docx', DOCX);
+    console.debug('file source', fileSource.value);
+  }
+
   try {
-    const [docx, media, mediaFiles, fonts] = await Editor.loadXmlData(props.fileSource);
+    const [docx, media, mediaFiles, fonts] = await Editor.loadXmlData(fileSource.value);
     return { content: docx, media, mediaFiles, fonts };
   } catch (err) {
     console.debug('Error loading new file data:', err);
@@ -137,7 +148,7 @@ const initEditor = async ({ content, media = {}, mediaFiles = {}, fonts = {} } =
   editor.value = new Editor({
     mode: 'docx',
     element: editorElem.value,
-    fileSource: props.fileSource,
+    fileSource: fileSource.value,
     extensions: getExtensions(),
     externalExtensions: props.options.externalExtensions,
     documentId: props.documentId,
diff --git a/packages/super-editor/src/dev/components/BasicUpload.vue b/packages/super-editor/src/dev/components/BasicUpload.vue
index 4388731af0..36c1213e9a 100644
--- a/packages/super-editor/src/dev/components/BasicUpload.vue
+++ b/packages/super-editor/src/dev/components/BasicUpload.vue
@@ -7,7 +7,7 @@ const onFileChange = (event) => {
 
 <template>
   <div>
-    <input type="file" id="fileInput" @change="onFileChange" accept=".docx" />
+    <input type="file" id="fileInput" @change="onFileChange" accept=".docx .md" />
   </div>
 </template>
 
diff --git a/packages/super-editor/src/dev/components/DeveloperPlayground.vue b/packages/super-editor/src/dev/components/DeveloperPlayground.vue
index 3109cad166..ef11f2f586 100644
--- a/packages/super-editor/src/dev/components/DeveloperPlayground.vue
+++ b/packages/super-editor/src/dev/components/DeveloperPlayground.vue
@@ -140,7 +140,7 @@ onMounted(async () => {
           </div>
           <div class="dev-app__header-upload">
             Upload docx
-            <BasicUpload @file-change="handleNewFile" accept=".docx" />
+            <BasicUpload @file-change="handleNewFile" />
           </div>
         </div>
         <div class="dev-app__header-side dev-app__header-side--right">