Merge pull request #2585 from NDLANO/refactor/slateh5p-to-dialog

Refactor h5p and remove h5p when no item selected
NDLANO · Nov 5, 2024 · 01bf9cf · 01bf9cf
2 parents 8acd125 + 4a25881
commit 01bf9cf
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 65 deletions.
diff --git a/src/components/SlateEditor/plugins/audio/SlateAudio.tsx b/src/components/SlateEditor/plugins/audio/SlateAudio.tsx
@@ -35,10 +35,8 @@ const StyledEmbedWrapper = styled(EmbedWrapper, {
   base: {
     position: "relative",
     _selected: {
-      "& > figure": {
-        outline: "2px solid",
-        outlineColor: "brand.primary",
-      },
+      outline: "2px solid",
+      outlineColor: "stroke.default",
     },
   },
 });
@@ -114,7 +112,7 @@ const SlateAudio = ({ element, editor, attributes, children }: Props) => {
       <StyledEmbedWrapper
         {...attributes}
         contentEditable={false}
-        data-selected={isSelected}
+        aria-selected={isSelected}
         data-type={embed?.embedData.type}
       >
         {audioMetaQuery.isLoading ? (

diff --git a/src/components/SlateEditor/plugins/embed/FigureButtons.tsx b/src/components/SlateEditor/plugins/embed/FigureButtons.tsx
@@ -6,16 +6,17 @@
  *
  */
 
-import styled from "@emotion/styled";
-import { spacing, stackOrder } from "@ndla/core";
+import { styled } from "@ndla/styled-system/jsx";
 
-export const StyledFigureButtons = styled.div`
-  display: flex;
-  flex-flow: row;
-  justify-content: flex-end;
-  position: absolute;
-  right: ${spacing.nsmall};
-  top: ${spacing.nsmall};
-  z-index: ${stackOrder.offsetDouble};
-  gap: ${spacing.xsmall};
-`;
+export const StyledFigureButtons = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    position: "absolute",
+    right: "xxsmall",
+    top: "xxsmall",
+    gap: "xsmall",
+    zIndex: "docked",
+  },
+});
diff --git a/src/components/SlateEditor/plugins/h5p/EditH5PModal.tsx b/src/components/SlateEditor/plugins/h5p/EditH5PModal.tsx
@@ -8,30 +8,34 @@
 
 import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Editor, Path, Transforms } from "slate";
+import { Editor, Path, Transforms, Element } from "slate";
 import { ReactEditor } from "slate-react";
-import styled from "@emotion/styled";
+import { Portal } from "@ark-ui/react";
 import { Link } from "@ndla/icons/common";
-import { Modal, ModalContent, ModalTrigger } from "@ndla/modal";
-import { IconButton } from "@ndla/primitives";
+import { DialogBody, IconButton, DialogContent, DialogRoot, DialogTrigger } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { H5pEmbedData, H5pMetaData } from "@ndla/types-embed";
-import { H5pElement } from "./types";
+import { H5pElement, TYPE_H5P } from "./types";
 import config from "../../../../config";
 import { getH5pLocale } from "../../../H5PElement/h5pApi";
 import H5PElement, { OnSelectObject } from "../../../H5PElement/H5PElement";
 
-const StyledModalBody = styled.div`
-  display: flex;
-  height: 100%;
-`;
+const StyledDialogBody = styled(DialogBody, {
+  base: {
+    display: "flex",
+    height: "100%",
+    paddingInline: 0,
+    paddingBlock: 0,
+  },
+});
 
-const StyledModalContent = styled(ModalContent)`
-  padding: 0;
-  width: 100% !important;
-  height: 100%;
-  max-height: 95%;
-  overflow: hidden;
-`;
+const StyledDialogContent = styled(DialogContent, {
+  base: {
+    maxHeight: "95%",
+    height: "100%",
+    width: "100%",
+  },
+});
 
 interface Props {
   embed: H5pMetaData | undefined;
@@ -81,27 +85,35 @@ const EditH5PModal = ({ embed, language, editor, element }: Props) => {
         Transforms.select(editor, Path.next(path));
       }, 0);
     }
+    if (!element.data) {
+      Transforms.removeNodes(editor, {
+        at: path,
+        match: (node) => Element.isElement(node) && node.type === TYPE_H5P,
+      });
+    }
   };
 
   return (
-    <Modal open={isOpen} onOpenChange={setOpen}>
-      <ModalTrigger>
+    <DialogRoot size="large" open={isOpen} onOpenChange={(details) => (details.open ? setOpen(true) : onClose())}>
+      <DialogTrigger asChild>
         <IconButton variant="secondary" size="small" title={t("form.editH5p")} aria-label={t("form.editH5p")}>
           <Link />
         </IconButton>
-      </ModalTrigger>
-      <StyledModalContent size="large">
-        <StyledModalBody>
-          <H5PElement
-            canReturnResources
-            h5pUrl={embed?.embedData.url}
-            onClose={onClose}
-            locale={language}
-            onSelect={onSave}
-          />
-        </StyledModalBody>
-      </StyledModalContent>
-    </Modal>
+      </DialogTrigger>
+      <Portal>
+        <StyledDialogContent>
+          <StyledDialogBody>
+            <H5PElement
+              canReturnResources
+              h5pUrl={embed?.embedData.url}
+              onClose={onClose}
+              locale={language}
+              onSelect={onSave}
+            />
+          </StyledDialogBody>
+        </StyledDialogContent>
+      </Portal>
+    </DialogRoot>
   );
 };
 

diff --git a/src/components/SlateEditor/plugins/h5p/SlateH5p.tsx b/src/components/SlateEditor/plugins/h5p/SlateH5p.tsx
@@ -10,10 +10,9 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Editor, Transforms } from "slate";
 import { ReactEditor, RenderElementProps, useSelected } from "slate-react";
-import styled from "@emotion/styled";
-import { spacing, colors, stackOrder } from "@ndla/core";
 import { DeleteForever } from "@ndla/icons/editor";
 import { IconButton } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { H5pMetaData } from "@ndla/types-embed";
 import { EmbedWrapper, H5pEmbed } from "@ndla/ui";
 import EditH5PModal from "./EditH5PModal";
@@ -30,19 +29,21 @@ interface Props extends RenderElementProps {
   editor: Editor;
 }
 
-const StyledEmbedWrapper = styled(EmbedWrapper)`
-  &[data-selected="true"] {
-    figure {
-      outline: 2px solid ${colors.brand.primary};
-    }
-  }
-`;
+const StyledEmbedWrapper = styled(EmbedWrapper, {
+  base: {
+    _selected: {
+      outline: "2px solid",
+      outlineColor: "stroke.default",
+    },
+  },
+});
 
-const FigureButtons = styled(StyledFigureButtons)`
-  right: ${spacing.small};
-  top: ${spacing.medium};
-  z-index: ${stackOrder.offsetSingle};
-`;
+const FigureButtons = styled(StyledFigureButtons, {
+  base: {
+    right: "xsmall",
+    top: "medium",
+  },
+});
 
 const SlateH5p = ({ element, editor, attributes, children }: Props) => {
   const { t } = useTranslation();
@@ -73,7 +74,7 @@ const SlateH5p = ({ element, editor, attributes, children }: Props) => {
   };
 
   return (
-    <StyledEmbedWrapper {...attributes} data-selected={isSelected} contentEditable={false}>
+    <StyledEmbedWrapper {...attributes} aria-selected={isSelected} contentEditable={false}>
       <FigureButtons>
         {config.h5pMetaEnabled === true && <EditMetadataModal embed={embed} editor={editor} element={element} />}
         <EditH5PModal embed={embed} language={language} editor={editor} element={element} />

diff --git a/src/components/SlateEditor/plugins/video/SlateVideo.tsx b/src/components/SlateEditor/plugins/video/SlateVideo.tsx
@@ -29,8 +29,8 @@ import { StyledFigureButtons } from "../embed/FigureButtons";
 export const VideoWrapper = styled(EmbedWrapper, {
   base: {
     display: "block",
-    outline: "2px solid transparent",
     _selected: {
+      outline: "2px solid",
       outlineColor: "stroke.default",
     },
     "&[data-error='true']": {
@@ -106,7 +106,7 @@ const SlateVideo = ({ attributes, element, editor, children }: Props) => {
 
   return (
     <DialogRoot open={open} onOpenChange={({ open }) => setOpen(open)}>
-      <VideoWrapper {...attributes} data-selected={isSelected} data-error={hasError} contentEditable={false}>
+      <VideoWrapper {...attributes} aria-selected={isSelected} data-error={hasError} contentEditable={false}>
         {!embed ? (
           <Spinner />
         ) : (