fix width transform on media elements

seed-hypermedia · Dec 10, 2024 · 15fc943 · 15fc943
1 parent 01d63f5
commit 15fc943
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 34 deletions.
diff --git a/frontend/packages/shared/src/client/__tests__/editorblock-to-hmblock.test.ts b/frontend/packages/shared/src/client/__tests__/editorblock-to-hmblock.test.ts
@@ -476,6 +476,7 @@ describe('EditorBlock to HMBlock', () => {
         children: [],
         props: {
           url: 'ipfs://foobarcid_IMAGE',
+          width: '400',
         },
         content: [
           {
@@ -492,7 +493,9 @@ describe('EditorBlock to HMBlock', () => {
         text: ``,
         link: 'ipfs://foobarcid_IMAGE',
         annotations: [],
-        attributes: {},
+        attributes: {
+          width: 400,
+        },
       }
       const val = editorBlockToHMBlock(editorBlock)
 
@@ -506,7 +509,7 @@ describe('EditorBlock to HMBlock', () => {
         children: [],
         props: {
           url: 'ipfs://foobarcid_IMAGE',
-          width: '',
+          width: '400',
         },
         content: [
           {
@@ -523,7 +526,9 @@ describe('EditorBlock to HMBlock', () => {
         text: ``,
         link: 'ipfs://foobarcid_IMAGE',
         annotations: [],
-        attributes: {},
+        attributes: {
+          width: 400,
+        },
       }
       const val = editorBlockToHMBlock(editorBlock)
 

diff --git a/frontend/packages/shared/src/client/__tests__/hmblock-to-editorblock.test.ts b/frontend/packages/shared/src/client/__tests__/hmblock-to-editorblock.test.ts
@@ -493,7 +493,9 @@ describe('HMBlock to EditorBlock', () => {
         text: ``,
         link: 'ipfs://foobarcid_IMAGE',
         annotations: [],
-        attributes: {},
+        attributes: {
+          width: 400,
+        },
         revision: 'revision123',
       }
 
@@ -504,6 +506,7 @@ describe('HMBlock to EditorBlock', () => {
         props: {
           url: 'ipfs://foobarcid_IMAGE',
           revision: 'revision123',
+          width: '400',
         },
         content: [
           {

diff --git a/frontend/packages/shared/src/client/editorblock-to-hmblock.ts b/frontend/packages/shared/src/client/editorblock-to-hmblock.ts
@@ -1,5 +1,11 @@
 import {EditorBlock, EditorInlineContent} from '../editor-types'
-import {HMAnnotations, HMBlock, HMBlockSchema, HMBlockType} from '../hm-types'
+import {
+  HMAnnotations,
+  HMBlock,
+  HMBlockSchema,
+  HMBlockType,
+  toNumber,
+} from '../hm-types'
 import {AnnotationSet, codePointLength} from './unicode'
 
 function toHMBlockType(
@@ -227,26 +233,3 @@ function getParentBlock(block: HMBlock) {
   if (block.type == 'Code') return block
   return undefined
 }
-
-function toNumber(value?: string): number | null {
-  // Handle empty or whitespace-only strings
-  if (!value) return null
-  if (typeof value !== 'string') {
-    console.error('Unexpected numeric value is not a string: ', value)
-    return null
-  }
-  if (value.trim() === '') {
-    return null
-  }
-
-  // Convert to number and check if it's valid
-  const num = Number(value)
-
-  // Check if the conversion resulted in a valid number
-  // isNaN() will return true for NaN and invalid conversions
-  if (isNaN(num)) {
-    return null
-  }
-
-  return num
-}
diff --git a/frontend/packages/shared/src/hm-types.ts b/frontend/packages/shared/src/hm-types.ts
@@ -217,24 +217,24 @@ export const HMBlockMathSchema = z
   })
   .strict()
 
-export function toNumber(value: any): number {
+export function toNumber(value: any): number | null {
   // If it's already a number, return it directly
-  if (typeof value === 'number' && !isNaN(value)) {
+  if (typeof value == 'number' && !isNaN(value)) {
     return value
   }
 
   // If it's a string, try to convert it
-  if (typeof value === 'string') {
+  if (typeof value == 'string') {
     const converted = Number(value)
     if (!isNaN(converted)) {
       return converted
     }
   }
-
-  // If we get here, throw an error
-  throw new Error(
+  console.warn(
     'Value must be a number or a string that can be converted to a number',
+    value,
   )
+  return null
 }
 
 export const HMBlockImageSchema = z

diff --git a/frontend/packages/ui/src/document-content.tsx b/frontend/packages/ui/src/document-content.tsx
@@ -1173,6 +1173,7 @@ function BlockContentImage({
       data-url={block?.link}
       data-alt={block?.attributes?.alt}
       data-width={block.attributes?.width}
+      maxWidth="100%"
       paddingVertical="$3"
       gap="$2"
       ai="center"
@@ -1182,6 +1183,7 @@ function BlockContentImage({
         width={
           block.attributes?.width ? `${block.attributes?.width}px` : undefined
         }
+        maxWidth="100%"
       >
         <img
           alt={block?.attributes?.alt}
@@ -1228,6 +1230,7 @@ function BlockContentVideo({
           width={
             block.attributes?.width ? `${block.attributes?.width}px` : "100%"
           }
+          maxWidth="100%"
           position="relative"
           paddingBottom={
             link.startsWith("ipfs://") || link.startsWith("http")