Merge pull request #2 from konstantinmuenster/dev

feat: allow to insert video without fixed dimensions
konstantinmuenster · Mar 27, 2024 · 3a595da · 3a595da
2 parents c1f82eb + 4a506a4
commit 3a595da
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 12 deletions.
diff --git a/packages/strapi-plugin-rich-text/admin/src/components/RichText/Editor.tsx b/packages/strapi-plugin-rich-text/admin/src/components/RichText/Editor.tsx
@@ -49,7 +49,11 @@ const extensions: (Extension | Node | Mark)[] = [
   TextAlign,
   Text,
   Underline,
-  Youtube,
+  Youtube.configure({
+    modestBranding: true,
+    width: undefined,
+    height: undefined,
+  }),
 ];
 
 const OUTPUT_PREFIX = "<!--strapi-plugin-rich-text-output-->";

diff --git a/packages/strapi-plugin-rich-text/admin/src/components/RichText/Toolbar.tsx b/packages/strapi-plugin-rich-text/admin/src/components/RichText/Toolbar.tsx
@@ -306,27 +306,38 @@ function InsertLinkDialog({ editor, onExit }: DialogProps) {
 
 function InsertYouTubeDialog({ editor, onExit }: DialogProps) {
   const [src, setSrc] = useState("");
-  const [height, setHeight] = useState<number | string>(360);
+  const [fixedDimensions, setFixedDimensions] = useState(false);
+  const [height, setHeight] = useState<number | string>(480);
   const [width, setWidth] = useState<number | string>(640);
 
   const onInsert = useCallback(
     ({
       src,
       height,
       width,
+      fixedDimensions,
     }: {
       src: string;
       height: number | string;
       width: number | string;
+      fixedDimensions: boolean;
     }) => {
       try {
         editor
           .chain()
           .focus()
           .setYoutubeVideo({
             src,
-            width: typeof width === "number" ? width : parseInt(width, 10),
-            height: typeof height === "number" ? height : parseInt(height, 10),
+            width: fixedDimensions
+              ? typeof width === "number"
+                ? width
+                : parseInt(width, 10)
+              : undefined,
+            height: fixedDimensions
+              ? typeof height === "number"
+                ? height
+                : parseInt(height, 10)
+              : undefined,
           })
           .run();
         onExit();
@@ -351,24 +362,44 @@ function InsertYouTubeDialog({ editor, onExit }: DialogProps) {
             }
             aria-label="YouTube URL"
           />
-
-          <Stack horizontal={true} spacing={2}>
+          <Box style={{ marginTop: "20px" }}>
+            <Checkbox
+              value={fixedDimensions}
+              onValueChange={(v: boolean) => {
+                setFixedDimensions(v);
+              }}
+            >
+              Set Fixed Dimensions
+            </Checkbox>
+          </Box>
+          <Stack
+            horizontal={true}
+            spacing={2}
+            style={
+              !fixedDimensions
+                ? {
+                    pointerEvents: "none",
+                    opacity: 0.5,
+                    filter: "grayscale(1)",
+                  }
+                : undefined
+            }
+          >
             <TextInput
-              label="YouTube Video Width"
+              label="Width"
               type="number"
-              placeholder="Add Video Height"
+              placeholder="Add Width"
               name="width"
               value={width}
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
                 setWidth(e.target.value)
               }
               aria-label="YouTube Video Width"
             />
-
             <TextInput
-              label="YouTube Video Height"
+              label="Height"
               type="number"
-              placeholder="Add Video Height"
+              placeholder="Add Height"
               name="height"
               value={height}
               onChange={(e: ChangeEvent<HTMLInputElement>) =>
@@ -388,7 +419,7 @@ function InsertYouTubeDialog({ editor, onExit }: DialogProps) {
         endAction={
           <Button
             disabled={src.length === 0}
-            onClick={() => onInsert({ src, width, height })}
+            onClick={() => onInsert({ src, width, height, fixedDimensions })}
             variant="success-light"
           >
             Insert YouTube Embed