feat: add etherpad UI components (#206)

* feat: add etherpad iframe, improve H5P security

* feat: add etherpad icon

* fix: pass styles to etherpad iframe

* fix: allow etherpad iframe to ring service server

* chore: bump @graasp/sdk

package.json

@@ -51,7 +51,7 @@
     "storybook:build": "build-storybook"
   },
   "dependencies": {
-    "@graasp/sdk": "github:graasp/graasp-sdk#v0.1.0",
+    "@graasp/sdk": "0.2.0",
     "clsx": "1.1.1",
     "http-status-codes": "2.2.0",
     "immutable": "4.1.0",

src/icons/ItemIcon.tsx

@@ -2,6 +2,7 @@ import AppsIcon from '@mui/icons-material/Apps';
 import DescriptionIcon from '@mui/icons-material/Description';
 import FolderIcon from '@mui/icons-material/Folder';
 import FolderZipIcon from '@mui/icons-material/FolderZip';
+import GroupsIcon from '@mui/icons-material/Groups';
 import ImageIcon from '@mui/icons-material/Image';
 import ShortcutIcon from '@mui/icons-material/Input';
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
@@ -23,7 +24,6 @@ import {
   getS3FileExtra,
 } from '@graasp/sdk';
 
-
 import { StyledImage } from '../StyledComponents/StyledBaseComponents';
 import { ITEM_ICON_MAX_SIZE, MIME_TYPES } from '../constants';
 
@@ -129,6 +129,10 @@ const ItemIcon: FC<ItemIconProps> = ({
       Icon = Looks5Icon;
       break;
     }
+    case ItemType.ETHERPAD: {
+      Icon = GroupsIcon;
+      break;
+    }
     default:
       break;
   }

src/items/EtherpadItem.tsx

@@ -0,0 +1,61 @@
+import React, { FC } from 'react';
+
+import { SCREEN_MAX_HEIGHT } from '../constants';
+
+/**
+ * @see https://etherpad.org/doc/v1.8.18/#index_embed-parameters
+ */
+type EtherpadEmbedOptions = {
+  showLineNumbers?: boolean;
+  showControls?: boolean;
+  showChat?: boolean;
+  useMonospaceFont?: boolean;
+  userName?: string;
+  userColor?: string;
+  noColors?: boolean;
+  alwaysShowChat?: boolean;
+  lang?: string;
+  rtl?: boolean;
+  '#L'?: number;
+};
+
+interface EtherpadItemProps {
+  itemId: string;
+  padUrl: string;
+  iframeId?: string;
+  options?: EtherpadEmbedOptions;
+  style?: React.CSSProperties;
+}
+
+const EtherpadItem: FC<EtherpadItemProps> = ({
+  itemId,
+  padUrl,
+  iframeId = `etherpad-container-${itemId}`,
+  options,
+  style,
+}) => {
+  const src = new URL(padUrl);
+  if (options) {
+    Object.entries(options).forEach(([param, value]) =>
+      src.searchParams.set(param, String(value)),
+    );
+  }
+
+  return (
+    <iframe
+      id={iframeId}
+      src={src.href}
+      frameBorder={0}
+      sandbox='allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts allow-same-origin'
+      style={{
+        width: '100%',
+        height: SCREEN_MAX_HEIGHT,
+        border: 'none',
+        display: 'block',
+        ...style,
+      }}
+    ></iframe>
+  );
+};
+
+export default EtherpadItem;

src/items/H5PItem.tsx

@@ -9,6 +9,7 @@ interface H5PItemProps {
   itemId: string;
   contentId: string;
   integrationUrl: string;
+  iframeId?: string;
 }
 /**
  * The H5PItem component displays an iframe with the content of an H5P
@@ -20,6 +21,7 @@ const H5PItem: FC<H5PItemProps> = ({
   itemId,
   contentId,
   integrationUrl: integrationBase,
+  iframeId = `h5p-container-${itemId}`,
 }) => {
   /*
     h5p-standalone (and H5P itself) expect the integration to be done on the
@@ -87,10 +89,11 @@ const H5PItem: FC<H5PItemProps> = ({
   return (
     <iframe
       ref={iframeRef}
-      id={`h5p-container-${itemId}`}
+      id={iframeId}
       src={integrationUrl.href}
       scrolling={'no'}
       frameBorder={0}
+      sandbox='allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts'
       style={{ width: '100%', border: 'none', display: 'block' }}
     ></iframe>
   );

src/items/index.ts

@@ -13,3 +13,5 @@ export { default as FavoriteButton } from '../buttons/FavoriteButton/FavoriteBut
 export { default as LikeButton } from '../buttons/LikeButton/LikeButton';
 
 export { default as H5PItem } from './H5PItem';
+
+export { default as EtherpadItem } from './EtherpadItem';

yarn.lock

@@ -2557,9 +2557,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/sdk@github:graasp/graasp-sdk#v0.1.0":
-  version: 0.1.0
-  resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=08cadf0216fc011dd01d6bb23547a3cf1b363732"
+"@graasp/sdk@npm:0.2.0":
+  version: 0.2.0
+  resolution: "@graasp/sdk@npm:0.2.0"
   dependencies:
     "@fastify/secure-session": 5.2.0
     aws-sdk: 2.1111.0
@@ -2570,7 +2570,7 @@ __metadata:
     qs: 6.11.0
     slonik: 28.1.1
     uuid: 8.3.2
-  checksum: 263b2349837b9b6f3f5ff6b0c86e71b2a37625156b435061ca5d9c5cdd1a730cd52a76ede6e1c7d4dae45a2c131f99cb699a81d100960ac2861a53e27d0c007a
+  checksum: 95a76c69dd4577f8a0eb51197d83fdb5c61c58c1c6a7c895e7ca543d4883603bc7deb534fd5b7bc4f61b5f15cd0b6c403bf165e6a6a4a756707f9ad877961339
   languageName: node
   linkType: hard
 
@@ -2592,7 +2592,7 @@ __metadata:
     "@commitlint/config-conventional": 17.0.2
     "@emotion/react": 11.10.4
     "@emotion/styled": 11.10.4
-    "@graasp/sdk": "github:graasp/graasp-sdk#v0.1.0"
+    "@graasp/sdk": 0.2.0
     "@mdx-js/react": 1.6.22
     "@mui/icons-material": 5.10.6
     "@mui/lab": 5.0.0-alpha.101