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.
This commit is contained in:
Pico2x 2022-09-01 17:38:48 +01:00
parent 119a1be1dd
commit b9f132411b
3 changed files with 13 additions and 7 deletions

View File

@ -48,6 +48,9 @@ export default Node.create<IframeOptions>({
frameborder: { frameborder: {
default: 0, default: 0,
}, },
height: {
default: 0,
},
allowfullscreen: { allowfullscreen: {
default: this.options.allowFullscreen, default: this.options.allowFullscreen,
parseHTML: () => this.options.allowFullscreen, parseHTML: () => this.options.allowFullscreen,
@ -60,6 +63,11 @@ export default Node.create<IframeOptions>({
}, },
renderHTML({ HTMLAttributes }) { renderHTML({ HTMLAttributes }) {
this.options.HTMLAttributes.style =
this.options.HTMLAttributes.style +
' height: ' +
HTMLAttributes.height +
';'
return [ return [
'div', 'div',
this.options.HTMLAttributes, this.options.HTMLAttributes,

View File

@ -29,7 +29,7 @@ export function MarketModal(props: {
async function doneAddingContracts() { async function doneAddingContracts() {
setLoading(true) setLoading(true)
if (contracts.length == 1) { if (contracts.length == 1) {
insertContent(editor, ...contracts.map(embedContractCode)) insertContent(editor, embedContractCode(contracts[0]))
} else if (contracts.length > 1) { } else if (contracts.length > 1) {
insertContent(editor, embedContractGridCode(contracts)) insertContent(editor, embedContractGridCode(contracts))
} }

View File

@ -12,19 +12,17 @@ import { track } from 'web/lib/service/analytics'
export function embedContractCode(contract: Contract) { export function embedContractCode(contract: Contract) {
const title = contract.question const title = contract.question
const src = `https://${DOMAIN}/embed${contractPath(contract)}` 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[]) { export function embedContractGridCode(contracts: Contract[]) {
const height = (contracts.length - (contracts.length % 2)) * 100 + 'px'
const src = `http://${DOMAIN}/embed/grid/${contracts const src = `http://${DOMAIN}/embed/grid/${contracts
.map((c) => c.slug) .map((c) => c.slug)
.join('/')}` .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 }) { export function ShareEmbedButton(props: { contract: Contract }) {
const { contract } = props const { contract } = props