Merge remote-tracking branch 'origin/main' into chore/spike/new-loader-mark

Author: clarencepalmer

examples/vue-fields-example/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@harbour-enterprises/superdoc": "^0.11.8",
+    "@harbour-enterprises/superdoc": "^0.11.11",
     "vue": "^3.5.13"
   },
   "devDependencies": {

examples/vue-fields-example/src/App.vue

@@ -21,6 +21,9 @@ const init = (fileToLoad) => {
     // Enable pagination
     pagination: true,
 
+    // Enable annotation import
+    annotations: true,
+
     document: fileToLoad ? { data: fileToLoad } : sampleDocument,
 
     // Initialize the toolbar
@@ -64,10 +67,12 @@ const restoreSnapshot = () => {
   }
 }
 
-const SAMPLE_FIELD_ID = '123';
+const SAMPLE_HTML_FIELD_ID = '123';
+const SAMPLE_TEXT_FIELD_ID = '456';
+
 const replaceField = () => {
   const field = fieldAnnotationHelpers.findFieldAnnotationsByFieldId(
-    SAMPLE_FIELD_ID,
+    SAMPLE_HTML_FIELD_ID,
     editor.value.state,
   );
 
@@ -89,20 +94,46 @@ const setViewing = () => {
 const getHTMLField = () => {
   return {
     displayLabel: 'My placeholder field',
-    fieldId: SAMPLE_FIELD_ID,
+    fieldId: SAMPLE_HTML_FIELD_ID,
     type: 'html',
     fieldType: 'HTMLINPUT',
     fieldColor: '#000099',
   };
 };
 
+const getTextField = () => {
+  return {
+    displayLabel: 'My text field',
+    fieldId: SAMPLE_TEXT_FIELD_ID,
+    type: 'text',
+    fieldType: 'TEXTINPUT',
+    fieldColor: '#990000',
+  };
+};
+
 const addField = (field) => {
   if (!field) field = getHTMLField();
   editor.value.commands.addFieldAnnotationAtSelection(field);
 }
 
+const exportDocx = () => {
+  superdoc.value?.export();
+};
+
 const onDragStart = (event) => {
-  const field = getHTMLField();
+
+  const getField = (id) => {
+    switch (id) {
+      case 'html-field':
+        return getHTMLField();
+      case 'text-field':
+        return getTextField();
+      default:
+        return null;
+    }
+  }
+
+  const field = getField(event.target.id);
   event.dataTransfer.setData('fieldAnnotation', JSON.stringify({ sourceField: field }));
 };
 
@@ -117,32 +148,37 @@ onMounted(() => init());
 
     <div id="toolbar" class="my-custom-toolbar"></div>
     <div class="editor-and-button">
-      <div class="editor-buttons" style="margin-right: 10px;">
-        <div class="draggable-field" draggable="true" @dragstart="onDragStart">HTML field</div>
+      <div class="editor-buttons fields" style="margin-right: 10px;">
+        <div class="draggable-field" draggable="true" @dragstart="onDragStart" id="html-field">HTML field</div>
+        <div class="draggable-field" draggable="true" @dragstart="onDragStart" id="text-field">TEXT field</div>
       </div>
       <div id="editor" class="main-editor"></div>
       <div class="editor-buttons">
         <UploadFile :update-file="handleFileUpdate" />
-        <button class="custom-button" @click="addField">Insert '123' field</button>
-
         <button class="custom-button" @click="saveSnapshot">Save state</button>
         <button class="custom-button" @click="restoreSnapshot" :disabled="!snapshot">Restore state</button>
-        <button class="custom-button" @click="replaceField">Replace '123' field</button>
+        <button class="custom-button" @click="replaceField">Update HTML field content</button>
         <textarea
           id="custom-html"
           class="custom-textarea"
           placeholder="Type some HTML to replace custom nodes with"
           value="<p>Custom <b>Node</b> Content</p>"
         ></textarea>
 
+        <br />
         <button class="custom-button" @click="setEditable">Set editable</button>
         <button class="custom-button" @click="setViewing">Set viewing</button>
+        <br />
+        <button class="custom-button" @click="exportDocx">Export docx</button>
       </div>
     </div>
   </div>
 </template>
 
 <style>
+.fields > div {
+  margin-bottom: 10px;
+}
 textarea {
   margin-left: 10px;
 }

examples/vue-fields-example/src/custom-node.js

@@ -1735,7 +1735,7 @@ function prepareHtmlAnnotation(params) {
   } = params;
 
   const parser = new window.DOMParser();
-  const paragraphHtml = parser.parseFromString(attrs.rawHtml, 'text/html');
+  const paragraphHtml = parser.parseFromString(attrs.rawHtml || attrs.displayLabel, 'text/html');
 
   const state = EditorState.create({
     doc: PMDOMParser.fromSchema(params.editorSchema).parse(paragraphHtml),

packages/super-editor/src/core/super-converter/exporter.js

@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.11.12](https://github.com/Harbour-Enterprises/SuperDoc/compare/v0.11.11...v0.11.12) (2025-05-14)
+
+## [0.11.11](https://github.com/Harbour-Enterprises/SuperDoc/compare/v0.11.10...v0.11.11) (2025-05-14)
+
 ## [0.11.10](https://github.com/Harbour-Enterprises/SuperDoc/compare/v0.11.9...v0.11.10) (2025-05-13)
 
 ## [0.11.9](https://github.com/Harbour-Enterprises/SuperDoc/compare/v0.11.8...v0.11.9) (2025-05-13)

packages/superdoc/CHANGELOG.md

@@ -1,7 +1,7 @@
 {
   "name": "@harbour-enterprises/superdoc",
   "type": "module",
-  "version": "0.11.10",
+  "version": "0.11.12",
   "license": "AGPL-3.0",
   "readme": "../../README.md",
   "files": [