Preserve ODT image dimensions in Markdown conversion

src/odt/LibreOffice.ts

@@ -123,11 +123,15 @@ export class SvgDesc {
 @XmlElementChild('draw:object', 'object', 'DrawObject')
 @XmlElementChild('draw:image', 'image', 'DrawImage')
 @XmlElementChild('svg:desc', 'description', 'SvgDesc')
+@XmlAttribute('svg:width', 'width')
+@XmlAttribute('svg:height', 'height')
 export class DrawFrame implements ParagraphSection {
   type = 'draw_frame';
   object?: DrawObject;
   image?: DrawImage;
   description?: SvgDesc;
+  width?: string;
+  height?: string;
 }
 
 @XmlElement()

src/odt/MarkdownNodes.ts

@@ -39,8 +39,8 @@ export interface TagPayload {
 
   x?: number;
   y?: number;
-  width?: number;
-  height?: number;
+  width?: number | string;
+  height?: number | string;
   transform?: string;
 }
 

src/odt/OdtToMarkdown.ts

@@ -411,14 +411,14 @@ export class OdtToMarkdown {
       const svgId = urlToFolderId(altText);
 
       if (svgId) {
-        const node = this.chunks.createNode('SVG/', { href: 'gdoc:' + svgId });
+        const node = this.chunks.createNode('SVG/', { href: 'gdoc:' + svgId, width: drawFrame.width, height: drawFrame.height });
         this.chunks.append(currentTagNode, node);
       } else
       if (imageLink.endsWith('.svg')) {
-        const node = this.chunks.createNode('SVG/', { href: imageLink, alt: altText });
+        const node = this.chunks.createNode('SVG/', { href: imageLink, alt: altText, width: drawFrame.width, height: drawFrame.height });
         this.chunks.append(currentTagNode, node);
       } else {
-        const node = this.chunks.createNode('IMG/', { href: imageLink, alt: altText });
+        const node = this.chunks.createNode('IMG/', { href: imageLink, alt: altText, width: drawFrame.width, height: drawFrame.height });
         this.chunks.append(currentTagNode, node);
       }
     }

src/odt/markdownNodesUtils.ts

@@ -78,6 +78,29 @@ function buildSvgStart(payload: TagPayload) {
   return retVal;
 }
 
+function buildImageTag(payload: TagPayload) {
+  const src = payload.href || '';
+  const alt = payload.alt || '';
+  const width = payload.width;
+  const height = payload.height;
+
+  // Build inline styles for images with physical dimensions (from ODT)
+  // Only handle string dimensions with physical units (in, cm, mm)
+  const styles = [];
+  if (width && typeof width === 'string') {
+    styles.push(`width:${width}`);
+  }
+  if (height && typeof height === 'string') {
+    styles.push(`height:${height}`);
+  }
+
+  if (styles.length > 0) {
+    return `<img src="${src}" alt="${alt}" style="${styles.join('; ')};" />`;
+  }
+
+  return `<img src="${src}" alt="${alt}" />`;
+}
+
 interface ToTextContext {
   mode: OutputMode;
   onlyNotTag?: boolean;
@@ -255,8 +278,14 @@ function chunkToText(chunk: MarkdownNode, ctx: ToTextContext) {
         case 'A':
           return '[' + chunksToText(chunk.children, ctx) + `](${chunk.payload.href})`;
         case 'SVG/':
+          if (chunk.payload.width || chunk.payload.height) {
+            return buildImageTag(chunk.payload);
+          }
           return `![](${chunk.payload.href})`;
         case 'IMG/':
+          if (chunk.payload.width || chunk.payload.height) {
+            return buildImageTag(chunk.payload);
+          }
           return `![](${chunk.payload.href})`;
         case 'EMB_SVG':
           return buildSvgStart(chunk.payload);
@@ -325,8 +354,14 @@ function chunkToText(chunk: MarkdownNode, ctx: ToTextContext) {
         case 'TOC':
           return chunksToText(chunk.children, ctx);
         case 'SVG/':
+          if (chunk.payload.width || chunk.payload.height) {
+            return buildImageTag(chunk.payload);
+          }
           return `<object type="image/svg+xml" data="${chunk.payload.href}" ></object>`;
         case 'IMG/':
+          if (chunk.payload.width || chunk.payload.height) {
+            return buildImageTag(chunk.payload);
+          }
           return `<img src="${chunk.payload.href}" />`;
         case 'EMB_SVG':
           return buildSvgStart(chunk.payload) + chunksToText(chunk.children, ctx) + '</svg>\n';

test/odt_md/code-blocks.md

@@ -21,10 +21,10 @@ hi2();
 
 This is a cool new wikiGDrive! With a change.
 
-![](100000000000080100000600B855EF66465B18B1.jpg)
+<img src="100000000000080100000600B855EF66465B18B1.jpg" alt="" style="width:6.5in; height:4.8752in;" />
 
-![](1000000000000801000006008E6541DADAF62125.jpg)
+<img src="1000000000000801000006008E6541DADAF62125.jpg" alt="" style="width:6.5in; height:4.8752in;" />
 
-![](10000000000009C400000753DA4A57339A651C1F.jpg)
+<img src="10000000000009C400000753DA4A57339A651C1F.jpg" alt="" style="width:6.5in; height:4.8752in;" />
 
-![](10000000000009C40000075322E66BBDAA567D45.jpg)
+<img src="10000000000009C40000075322E66BBDAA567D45.jpg" alt="" style="width:6.5in; height:4.8752in;" />

test/odt_md/embedded-diagram-example.md

@@ -52,6 +52,6 @@ done
 
 Inserted as unlinked:
 
-![](100002010000025C000001488DD4BFD479C0CF61.png)
+<img src="100002010000025C000001488DD4BFD479C0CF61.png" alt="" style="width:6.2917in; height:3.4165in;" />
 
 done

test/odt_md/example-document.md

@@ -64,9 +64,9 @@ After subtable</td>
 
 ## Image
 
-![](1000000000000640000001CF60FB0243CA95EC14.jpg)
+<img src="1000000000000640000001CF60FB0243CA95EC14.jpg" alt="" style="width:4.5256in; height:1.3055in;" />
 
-![](10000000000003F0000003F092F85671239C65F9.jpg)
+<img src="10000000000003F0000003F092F85671239C65F9.jpg" alt="" style="width:6.1839in; height:6.1839in;" />
 
 ## Preformatted Text
 

test/odt_md/image-dimensions.md

@@ -0,0 +1,25 @@
+# Image Dimensions Test
+
+This document tests that ODT image dimensions are preserved when converting to Markdown.
+
+## Small Image
+
+<img src="small-image.png" alt="Small test image" style="width:2.0in; height:1.5in;" />
+
+## Medium Image
+
+<img src="medium-image.jpg" alt="Medium test image" style="width:4.5in; height:3.2in;" />
+
+## Large Image
+
+<img src="large-image.png" alt="Large test image" style="width:6.5in; height:4.8in;" />
+
+## Image with Centimeters
+
+<img src="metric-image.png" alt="Metric dimensions" style="width:12.3cm; height:6.7cm;" />
+
+## Image with Millimeters
+
+<img src="mm-image.jpg" alt="Millimeter dimensions" style="width:120mm; height:80mm;" />
+
+These images should maintain their relative sizes when rendered.

test/odt_md/issue-434-2.md

@@ -11,10 +11,10 @@
 
 This is a cool new wikiGDrive! With a change.
 
-![](1000000000000801000006000FC688CE4398B42C.jpg)
+<img src="1000000000000801000006000FC688CE4398B42C.jpg" alt="" style="width:6.5in; height:4.8752in;" />
 
-![](100000000000080100000600C22E7BC1728488D6.jpg)
+<img src="100000000000080100000600C22E7BC1728488D6.jpg" alt="" style="width:6.5in; height:4.8752in;" />
 
-![](10000000000009C4000007537CA7AEBC30C18882.jpg)
+<img src="10000000000009C4000007537CA7AEBC30C18882.jpg" alt="" style="width:6.5in; height:4.8752in;" />
 
-![](10000000000009C400000753E2645860B6CEB342.jpg)
+<img src="10000000000009C400000753E2645860B6CEB342.jpg" alt="" style="width:6.5in; height:4.8752in;" />

test/odt_md/issue-435-436.md

@@ -7,9 +7,9 @@ Similar to adding a new question, users must have the proper permission to modif
 3. Click the <strong>?Show Questions</strong> button
 4. Locate the question to update and click on the row.
 
-![](10000001000001AE0000013A3DD8D81D5AC3DDAE.png)
+<img src="10000001000001AE0000013A3DD8D81D5AC3DDAE.png" alt="" style="width:3.2866in; height:2.4063in;" />
 
 5. From here, you may update the Description, the process order, the question code, or the response.
     a.  You may not change this from one "type" of response (like Text) to another type (like Yes/No).  For this type of change, create a new question.
     b.  Be sure to click the Submit button at the bottom to save your changes.
-        ![](10000001000003C90000010BE8F0122D00285531.png)
+        <img src="10000001000003C90000010BE8F0122D00285531.png" alt="" style="width:5.6307in; height:1.5543in;" />

test/odt_md/list-indent.md

@@ -1,15 +1,15 @@
 1. If not already there, navigate to the <strong>Health Surveillance</strong> menu of the Control Panel.
 2. Using the information acquired in the Health Surveillance Matrix, begin entering the appropriate actions to each of the respective panels, as needed, clicking <strong>Add Panel</strong>. Otherwise, click <strong>Edit</strong> on an existing panel action to make any necessary changes.
 
-![](10000201000004BE0000011D30E30AE192655040.png)
+<img src="10000201000004BE0000011D30E30AE192655040.png" alt="" style="width:6.5in; height:1.528in;" />
 
 3. When adding action items to panels, the [Representative Event panel action](#representative-event-panel-action) is usually added to the panel first. Fill out all of the necessary fields according to the information acquired in the Health Surveillance matrix, and click <strong>Submit</strong> to save the panel action to the panel.
     a.  <strong>Action Name</strong>: Required field. The Action Name is usually the name of a test/procedure that is the component/action of the panel. The name will be displayed listings and dialogues throughout the system.
     b.  <strong>Lead Time</strong>: The Lead Time translates to the number of days prior to the Trigger Date the panel action becomes visible and is created within the system. This defines how many days before the Trigger Date that the panel/orders will populate on the Due List. Keep Lead Times consistent when setting multiple action items in a panel; otherwise, each component of the panel will have different Due Dates if there are different Lead Times on each. Emails can be configured to send email notifications, as needed, with a list of associated charts/employees that will be due. The recipient has the time between receiving the email and the panel action Trigger Date to notify Health Services of any issues or mistakes with the list. Emails to the member/chart will not be sent until the actual Trigger Date. (Email reminders are separately configured on a per client basis. Email notification may not apply to all clients).
 
 {{% tip %}}
 If the panel action is for a type of exposure, users will not want to set any Lead Time days. Lead Time is not needed for an exposure type panel action.
-![](1000020100000311000001824A182983854F26CB.png)
+<img src="1000020100000311000001824A182983854F26CB.png" alt="" style="width:6.5in; height:3.1945in;" />
 {{% /tip %}}
 
     c.  <strong>Required for Certification</strong>: Select this to indicate the panel action is required for members of the panel. Leave unchecked if the panel action is voluntary. If checked, a panel member failing or becoming overdue for the action will become de-certified from the panel.
@@ -21,7 +21,7 @@ If the panel action is for a type of exposure, users will not want to set any Le
         i. <strong>Date of Birth</strong>: Triggers the panel action on the panel member's date of birth, on a schedule determined by the starting age and frequency. Assumes the panel member's DOB has been captured in the chart demographics.
         ii. <strong>Other Action (Triggered)</strong>: The Other Action (Triggered) trigger date allows users to trigger a panel action at the same time as another action item, indicated in this panel action. For example, an action to trigger an Audiogram may be for Entry, Routine, or Exit actions; if checked, other actions may use this panel action as a trigger. This option must be selected for the action to display in the Related Action list. The Related Action list displays when then Trigger Date is set to Other Action (Triggered) or Prior Action (Completed). Additionally, action items can be configured to trigger with the Representative Events, as needed, if that programming is utilized. This allows all action items to trigger together for a panel. Triggers with all the same date are usually tied to representative event.
 
-![](100002010000033B00000036339CF669B6C2B512.png)
+<img src="100002010000033B00000036339CF669B6C2B512.png" alt="" style="width:6.5in; height:0.4307in;" />
 
         iii. <strong>Point in Time</strong>: The Point in Time trigger date allows users to trigger an action item on the same day and month, each year (must be MM/DD format).
         iv. <strong>Panel Expiration</strong>: Triggers on the expiration date specified in the panel status. Most panels will be configured with a representative event as the

test/odt_md/project-overview.md

@@ -43,7 +43,7 @@ With a "Shared Drive" as the key, WikiGDrive:
 
 WikiGDrive scans for changes in the drive and then refresh the local converted files.
 
-![](10000201000002BA000001464F317568B8F12696.png)
+<img src="10000201000002BA000001464F317568B8F12696.png" alt="" style="width:5.272in; height:2.4583in;" />
 
 The WikiGDrive refreshes the "Local Filesystem" with changes from the Google Shared Drive overwriting or deleting any content to bring it into sync.  The Local Filesystem is not preserved (since we will be committing the markdown in github anyway).
 
@@ -178,11 +178,11 @@ The index is a listing of all of the defined terms and their references in the d
 ## Markdown Cleanup
 
 * Bold headings: ([issue](https://github.com/mieweb/wikiGDrive/issues/17)) Remove the ** bold markdown from all headings.
-    ![](10000201000001A5000000492C856905A808045C.png)
+    <img src="10000201000001A5000000492C856905A808045C.png" alt="" style="width:2.161in; height:0.3756in;" />
 * End of line bold text: ([issue](https://github.com/mieweb/wikiGDrive/issues/15)) The closing ** for bold text at the end of a line is being placed on a newline and not being parsed.
-    ![](10000201000005480000004BB83F3F8B5F0C77BD.png)
+    <img src="10000201000005480000004BB83F3F8B5F0C77BD.png" alt="" style="width:6.5in; height:0.361in;" />
 * Italics/bold in an unordered list: ([issue](https://github.com/mieweb/wikiGDrive/issues/16)) Italics are not being rendered if in a list item.  We may need to find these and replace the */** with em/strong tags. Example is rendered in browser next to [Google Doc](gdoc:108WScoxxGKKKOsGWF7UNZ4rLRanGXu6BPdJ-axjVn5s).
-    ![](1000020100000243000000F28AB7617254FDBB3A.png)
+    <img src="1000020100000243000000F28AB7617254FDBB3A.png" alt="" style="width:3.2134in; height:1.3374in;" />
 <a id="c00wob6zjk55"></a>
 <a id="_dqy5042w3u8q"></a>
 ## Images

test/odt_md/rewrite-rules.md

@@ -4,7 +4,7 @@
 
 How to show a player:
 
-<img src="10000001000005700000040E226C4E068C6BB2BE.png" />
+<img src="10000001000005700000040E226C4E068C6BB2BE.png" alt="" style="width:2.7681in; height:2.0634in;" />
 
 You