From b9f132411b9c656a448b9aea8c605f3115ac6af3 Mon Sep 17 00:00:00 2001
From: Pico2x <pico2x@gmail.com>
Date: Thu, 1 Sep 2022 17:38:48 +0100
Subject: [PATCH] Hacky way to set height

I haven't figured out a way yet to get the height of the actual iframe's content, so I did some bad estimate for now to unblock shipping the feature, while I continue investigating.
---
 common/util/tiptap-iframe.ts           | 10 +++++++++-
 web/components/editor/market-modal.tsx |  2 +-
 web/components/share-embed-button.tsx  |  8 +++-----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/common/util/tiptap-iframe.ts b/common/util/tiptap-iframe.ts
index 5af63d2f..9e260821 100644
--- a/common/util/tiptap-iframe.ts
+++ b/common/util/tiptap-iframe.ts
@@ -35,7 +35,7 @@ export default Node.create<IframeOptions>({
       HTMLAttributes: {
         class: 'iframe-wrapper' + ' ' + wrapperClasses,
         // Tailwind JIT doesn't seem to pick up `pb-[20rem]`, so we hack this in:
-        style: 'padding-bottom: 20rem;',
+        style: 'padding-bottom: 20rem; ',
       },
     }
   },
@@ -48,6 +48,9 @@ export default Node.create<IframeOptions>({
       frameborder: {
         default: 0,
       },
+      height: {
+        default: 0,
+      },
       allowfullscreen: {
         default: this.options.allowFullscreen,
         parseHTML: () => this.options.allowFullscreen,
@@ -60,6 +63,11 @@ export default Node.create<IframeOptions>({
   },
 
   renderHTML({ HTMLAttributes }) {
+    this.options.HTMLAttributes.style =
+      this.options.HTMLAttributes.style +
+      ' height: ' +
+      HTMLAttributes.height +
+      ';'
     return [
       'div',
       this.options.HTMLAttributes,
diff --git a/web/components/editor/market-modal.tsx b/web/components/editor/market-modal.tsx
index af11559a..31c437b1 100644
--- a/web/components/editor/market-modal.tsx
+++ b/web/components/editor/market-modal.tsx
@@ -29,7 +29,7 @@ export function MarketModal(props: {
   async function doneAddingContracts() {
     setLoading(true)
     if (contracts.length == 1) {
-      insertContent(editor, ...contracts.map(embedContractCode))
+      insertContent(editor, embedContractCode(contracts[0]))
     } else if (contracts.length > 1) {
       insertContent(editor, embedContractGridCode(contracts))
     }
diff --git a/web/components/share-embed-button.tsx b/web/components/share-embed-button.tsx
index 5c2be0db..a42ffc34 100644
--- a/web/components/share-embed-button.tsx
+++ b/web/components/share-embed-button.tsx
@@ -12,19 +12,17 @@ import { track } from 'web/lib/service/analytics'
 export function embedContractCode(contract: Contract) {
   const title = contract.question
   const src = `https://${DOMAIN}/embed${contractPath(contract)}`
-  return embedCode(src, title)
+  return `<iframe src="${src}" title="${title}" frameborder="0"></iframe>`
 }
 
 export function embedContractGridCode(contracts: Contract[]) {
+  const height = (contracts.length - (contracts.length % 2)) * 100 + 'px'
   const src = `http://${DOMAIN}/embed/grid/${contracts
     .map((c) => c.slug)
     .join('/')}`
-  return embedCode(src, 'Grid of contracts')
+  return `<iframe height="${height}" src="${src}" title="Grid of contracts" frameborder="0"></iframe>`
 }
 
-const embedCode = (src: string, title: string) =>
-  `<iframe width="560" height="405" src="${src}" title="${title}" frameborder="0"></iframe>`
-
 export function ShareEmbedButton(props: { contract: Contract }) {
   const { contract } = props