Update fields example to add export

Author: harbournick

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
@@ -113,6 +116,10 @@ const addField = (field) => {
   editor.value.commands.addFieldAnnotationAtSelection(field);
 }
 
+const exportDocx = () => {
+  superdoc.value?.export();
+};
+
 const onDragStart = (event) => {
 
   const getField = (id) => {
@@ -158,8 +165,11 @@ onMounted(() => init());
           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>

packages/super-editor/src/core/super-converter/exporter.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),