From 445fb04da240998270c14abab958183840ff8a11 Mon Sep 17 00:00:00 2001 From: spaenleh Date: Wed, 29 May 2024 10:34:52 +0200 Subject: [PATCH 1/3] fix: embedding setting and iframe display --- package.json | 2 +- src/components/item/form/link/LinkForm.tsx | 39 +++++++++--------- yarn.lock | 46 +++++++++++----------- 3 files changed, 44 insertions(+), 43 deletions(-) diff --git a/package.json b/package.json index 223e00200..2a3de566a 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@graasp/query-client": "3.9.0", "@graasp/sdk": "4.12.0", "@graasp/translations": "1.28.0", - "@graasp/ui": "4.19.0", + "@graasp/ui": "github:graasp/graasp-ui#iframe-div-issue", "@mui/icons-material": "5.15.18", "@mui/lab": "5.0.0-alpha.170", "@mui/material": "5.15.18", diff --git a/src/components/item/form/link/LinkForm.tsx b/src/components/item/form/link/LinkForm.tsx index 51834171c..e0cc8f206 100644 --- a/src/components/item/form/link/LinkForm.tsx +++ b/src/components/item/form/link/LinkForm.tsx @@ -244,25 +244,26 @@ const LinkForm = ({ // only show this options when embedding is allowed and there is no html code // as the html will take precedence over showing the site as an iframe // and some sites like daily motion actually allow both, we want to allow show the html setting - linkData?.isEmbeddingAllowed && linkData?.html === '' && ( - } - slotProps={{ - typography: { - width: '100%', - minWidth: '0px', - }, - }} - sx={{ - // this ensure the iframe takes up all horizontal space - '& iframe': { - width: '100%', - }, - }} - /> - ) + linkData?.isEmbeddingAllowed && + (linkData?.html === undefined || linkData?.html === '') && ( + } + slotProps={{ + typography: { + width: '100%', + minWidth: '0px', + }, + }} + sx={{ + // this ensure the iframe takes up all horizontal space + '& iframe': { + width: '100%', + }, + }} + /> + ) } ) : ( diff --git a/yarn.lock b/yarn.lock index 72deefee2..ff84efb2e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1645,25 +1645,25 @@ __metadata: languageName: node linkType: hard -"@graasp/ui@npm:4.17.1": - version: 4.17.1 - resolution: "@graasp/ui@npm:4.17.1" +"@graasp/ui@github:graasp/graasp-ui#iframe-div-issue": + version: 4.19.0 + resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=1e1593d4f4f4f925b1a3d5f994ef8d1d2d5d5caa" dependencies: - "@ag-grid-community/client-side-row-model": "npm:31.2.1" - "@ag-grid-community/react": "npm:^31.1.1" - "@ag-grid-community/styles": "npm:^31.1.1" - "@storybook/react-vite": "npm:7.6.18" + "@ag-grid-community/client-side-row-model": "npm:31.3.1" + "@ag-grid-community/react": "npm:^31.3.1" + "@ag-grid-community/styles": "npm:^31.3.1" + "@storybook/react-vite": "npm:8.1.3" http-status-codes: "npm:2.3.0" interweave: "npm:13.1.0" katex: "npm:0.16.10" lodash.truncate: "npm:4.4.2" - lucide-react: "npm:0.376.0" + lucide-react: "npm:0.379.0" react-cookie-consent: "npm:9.0.0" react-quill: "npm:2.0.0" - react-rnd: "npm:10.4.1" + react-rnd: "npm:10.4.10" react-text-mask: "npm:5.5.0" uuid: "npm:9.0.1" - vitest: "npm:1.5.2" + vitest: "npm:1.6.0" peerDependencies: "@emotion/cache": ~11.10.7 || ~11.11.0 "@emotion/react": ~11.10.6 || ~11.11.0 @@ -1680,29 +1680,29 @@ __metadata: react-router-dom: ^6.11.0 stylis: ^4.1.3 stylis-plugin-rtl: ^2.1.1 - checksum: 10/99be0678ea73a84fa6e2175f3aa61eb5c9dd8025bde4e7012706c26d73a14dfe584977e48b2487944002badb5d2888ae7aea9126ae7713e207fcc648502eb522 + checksum: 10/8437f27c2e2244121e8f7173ac7af95dd2572eded739f1d67a42d43588d6b2335757c791ae7d0ea726dbdb5be2fa5f238a3fec3b7cc2b2b6d796cb3517eb2179 languageName: node linkType: hard -"@graasp/ui@npm:4.19.0": - version: 4.19.0 - resolution: "@graasp/ui@npm:4.19.0" +"@graasp/ui@npm:4.17.1": + version: 4.17.1 + resolution: "@graasp/ui@npm:4.17.1" dependencies: - "@ag-grid-community/client-side-row-model": "npm:31.3.1" - "@ag-grid-community/react": "npm:^31.3.1" - "@ag-grid-community/styles": "npm:^31.3.1" - "@storybook/react-vite": "npm:8.1.3" + "@ag-grid-community/client-side-row-model": "npm:31.2.1" + "@ag-grid-community/react": "npm:^31.1.1" + "@ag-grid-community/styles": "npm:^31.1.1" + "@storybook/react-vite": "npm:7.6.18" http-status-codes: "npm:2.3.0" interweave: "npm:13.1.0" katex: "npm:0.16.10" lodash.truncate: "npm:4.4.2" - lucide-react: "npm:0.379.0" + lucide-react: "npm:0.376.0" react-cookie-consent: "npm:9.0.0" react-quill: "npm:2.0.0" - react-rnd: "npm:10.4.10" + react-rnd: "npm:10.4.1" react-text-mask: "npm:5.5.0" uuid: "npm:9.0.1" - vitest: "npm:1.6.0" + vitest: "npm:1.5.2" peerDependencies: "@emotion/cache": ~11.10.7 || ~11.11.0 "@emotion/react": ~11.10.6 || ~11.11.0 @@ -1719,7 +1719,7 @@ __metadata: react-router-dom: ^6.11.0 stylis: ^4.1.3 stylis-plugin-rtl: ^2.1.1 - checksum: 10/48dc536e60bc3ae1ce2285b7d6174f82c6726bc40473bbf43ac9d3b76e85ed64d23fa42e5340c947b0036fac6863b8d80e55ffbd24c17e722557474f2eaece49 + checksum: 10/99be0678ea73a84fa6e2175f3aa61eb5c9dd8025bde4e7012706c26d73a14dfe584977e48b2487944002badb5d2888ae7aea9126ae7713e207fcc648502eb522 languageName: node linkType: hard @@ -7922,7 +7922,7 @@ __metadata: "@graasp/query-client": "npm:3.9.0" "@graasp/sdk": "npm:4.12.0" "@graasp/translations": "npm:1.28.0" - "@graasp/ui": "npm:4.19.0" + "@graasp/ui": "github:graasp/graasp-ui#iframe-div-issue" "@mui/icons-material": "npm:5.15.18" "@mui/lab": "npm:5.0.0-alpha.170" "@mui/material": "npm:5.15.18" From 1062df577c2f5bd0a9c1e11cb7bf905d09c7817e Mon Sep 17 00:00:00 2001 From: spaenleh Date: Wed, 29 May 2024 11:16:42 +0200 Subject: [PATCH 2/3] fix: update html check in linkForm component --- src/components/item/form/link/LinkForm.tsx | 39 +++++++++++----------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/src/components/item/form/link/LinkForm.tsx b/src/components/item/form/link/LinkForm.tsx index e0cc8f206..b4ce56572 100644 --- a/src/components/item/form/link/LinkForm.tsx +++ b/src/components/item/form/link/LinkForm.tsx @@ -244,26 +244,25 @@ const LinkForm = ({ // only show this options when embedding is allowed and there is no html code // as the html will take precedence over showing the site as an iframe // and some sites like daily motion actually allow both, we want to allow show the html setting - linkData?.isEmbeddingAllowed && - (linkData?.html === undefined || linkData?.html === '') && ( - } - slotProps={{ - typography: { - width: '100%', - minWidth: '0px', - }, - }} - sx={{ - // this ensure the iframe takes up all horizontal space - '& iframe': { - width: '100%', - }, - }} - /> - ) + linkData?.isEmbeddingAllowed && !linkData?.html && ( + } + slotProps={{ + typography: { + width: '100%', + minWidth: '0px', + }, + }} + sx={{ + // this ensure the iframe takes up all horizontal space + '& iframe': { + width: '100%', + }, + }} + /> + ) } ) : ( From e0b4d49ce75952d72790a215eab72a2f1f46e1b6 Mon Sep 17 00:00:00 2001 From: spaenleh Date: Wed, 29 May 2024 12:13:18 +0200 Subject: [PATCH 3/3] chore: use released version of UI --- package.json | 2 +- yarn.lock | 65 ++++++++++++++++++++++------------------------------ 2 files changed, 29 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index 2a3de566a..cfbc6e49e 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@graasp/query-client": "3.9.0", "@graasp/sdk": "4.12.0", "@graasp/translations": "1.28.0", - "@graasp/ui": "github:graasp/graasp-ui#iframe-div-issue", + "@graasp/ui": "4.19.1", "@mui/icons-material": "5.15.18", "@mui/lab": "5.0.0-alpha.170", "@mui/material": "5.15.18", diff --git a/yarn.lock b/yarn.lock index ff84efb2e..51bf5513f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -29,13 +29,13 @@ __metadata: languageName: node linkType: hard -"@ag-grid-community/client-side-row-model@npm:31.3.1": - version: 31.3.1 - resolution: "@ag-grid-community/client-side-row-model@npm:31.3.1" +"@ag-grid-community/client-side-row-model@npm:31.3.2": + version: 31.3.2 + resolution: "@ag-grid-community/client-side-row-model@npm:31.3.2" dependencies: - "@ag-grid-community/core": "npm:31.3.1" + "@ag-grid-community/core": "npm:31.3.2" tslib: "npm:^2.3.0" - checksum: 10/39e313831fa91062bcfa978b55690cc2728d091b44a26a9df3cf1e20aa4f97ba3ee6f49dde938f470db99b5d802e23d63b93510b2abad264f85b14fe3b405cf1 + checksum: 10/305c8d46604c35f7e8d6ee8fad1db1d14babb4eff40c2c457abd4134f4a43eb81cbdcc1c3343ddabd3af166efaf19750d654195faa01ab9d6906192a0f7422e0 languageName: node linkType: hard @@ -48,15 +48,6 @@ __metadata: languageName: node linkType: hard -"@ag-grid-community/core@npm:31.3.1": - version: 31.3.1 - resolution: "@ag-grid-community/core@npm:31.3.1" - dependencies: - tslib: "npm:^2.3.0" - checksum: 10/03caf838d0a23cbbe2701322bd4e98d62931d35c04e2e77a074ab5cabc7e862acb4a09e774ee321f5dd267ca768e378907ef7ddbcdbe90e4b5646054becbd108 - languageName: node - linkType: hard - "@ag-grid-community/core@npm:31.3.2": version: 31.3.2 resolution: "@ag-grid-community/core@npm:31.3.2" @@ -1645,25 +1636,25 @@ __metadata: languageName: node linkType: hard -"@graasp/ui@github:graasp/graasp-ui#iframe-div-issue": - version: 4.19.0 - resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=1e1593d4f4f4f925b1a3d5f994ef8d1d2d5d5caa" +"@graasp/ui@npm:4.17.1": + version: 4.17.1 + resolution: "@graasp/ui@npm:4.17.1" dependencies: - "@ag-grid-community/client-side-row-model": "npm:31.3.1" - "@ag-grid-community/react": "npm:^31.3.1" - "@ag-grid-community/styles": "npm:^31.3.1" - "@storybook/react-vite": "npm:8.1.3" + "@ag-grid-community/client-side-row-model": "npm:31.2.1" + "@ag-grid-community/react": "npm:^31.1.1" + "@ag-grid-community/styles": "npm:^31.1.1" + "@storybook/react-vite": "npm:7.6.18" http-status-codes: "npm:2.3.0" interweave: "npm:13.1.0" katex: "npm:0.16.10" lodash.truncate: "npm:4.4.2" - lucide-react: "npm:0.379.0" + lucide-react: "npm:0.376.0" react-cookie-consent: "npm:9.0.0" react-quill: "npm:2.0.0" - react-rnd: "npm:10.4.10" + react-rnd: "npm:10.4.1" react-text-mask: "npm:5.5.0" uuid: "npm:9.0.1" - vitest: "npm:1.6.0" + vitest: "npm:1.5.2" peerDependencies: "@emotion/cache": ~11.10.7 || ~11.11.0 "@emotion/react": ~11.10.6 || ~11.11.0 @@ -1680,29 +1671,29 @@ __metadata: react-router-dom: ^6.11.0 stylis: ^4.1.3 stylis-plugin-rtl: ^2.1.1 - checksum: 10/8437f27c2e2244121e8f7173ac7af95dd2572eded739f1d67a42d43588d6b2335757c791ae7d0ea726dbdb5be2fa5f238a3fec3b7cc2b2b6d796cb3517eb2179 + checksum: 10/99be0678ea73a84fa6e2175f3aa61eb5c9dd8025bde4e7012706c26d73a14dfe584977e48b2487944002badb5d2888ae7aea9126ae7713e207fcc648502eb522 languageName: node linkType: hard -"@graasp/ui@npm:4.17.1": - version: 4.17.1 - resolution: "@graasp/ui@npm:4.17.1" +"@graasp/ui@npm:4.19.1": + version: 4.19.1 + resolution: "@graasp/ui@npm:4.19.1" dependencies: - "@ag-grid-community/client-side-row-model": "npm:31.2.1" - "@ag-grid-community/react": "npm:^31.1.1" - "@ag-grid-community/styles": "npm:^31.1.1" - "@storybook/react-vite": "npm:7.6.18" + "@ag-grid-community/client-side-row-model": "npm:31.3.2" + "@ag-grid-community/react": "npm:^31.3.1" + "@ag-grid-community/styles": "npm:^31.3.1" + "@storybook/react-vite": "npm:8.1.3" http-status-codes: "npm:2.3.0" interweave: "npm:13.1.0" katex: "npm:0.16.10" lodash.truncate: "npm:4.4.2" - lucide-react: "npm:0.376.0" + lucide-react: "npm:0.379.0" react-cookie-consent: "npm:9.0.0" react-quill: "npm:2.0.0" - react-rnd: "npm:10.4.1" + react-rnd: "npm:10.4.10" react-text-mask: "npm:5.5.0" uuid: "npm:9.0.1" - vitest: "npm:1.5.2" + vitest: "npm:1.6.0" peerDependencies: "@emotion/cache": ~11.10.7 || ~11.11.0 "@emotion/react": ~11.10.6 || ~11.11.0 @@ -1719,7 +1710,7 @@ __metadata: react-router-dom: ^6.11.0 stylis: ^4.1.3 stylis-plugin-rtl: ^2.1.1 - checksum: 10/99be0678ea73a84fa6e2175f3aa61eb5c9dd8025bde4e7012706c26d73a14dfe584977e48b2487944002badb5d2888ae7aea9126ae7713e207fcc648502eb522 + checksum: 10/51f885c2e73b97a2e8ee8f8f53e643c7f6c8e7d09b60f1aafdc000a77cf05f472773cffc46ba4218a1e4fa6b9bab4bce7e6bb3147b9d3a62ce23835ff39ac14b languageName: node linkType: hard @@ -7922,7 +7913,7 @@ __metadata: "@graasp/query-client": "npm:3.9.0" "@graasp/sdk": "npm:4.12.0" "@graasp/translations": "npm:1.28.0" - "@graasp/ui": "github:graasp/graasp-ui#iframe-div-issue" + "@graasp/ui": "npm:4.19.1" "@mui/icons-material": "npm:5.15.18" "@mui/lab": "npm:5.0.0-alpha.170" "@mui/material": "npm:5.15.18"