fix: PDF block example styling (#785)

* Fixed PDF block example styling

* Fixed CSS scoping

Author: matthewlipski

examples/05-custom-schema/04-pdf-file-block/PDF.tsx

@@ -6,9 +6,10 @@ import {
   FileAndCaptionWrapper,
   ReactCustomBlockRenderProps,
 } from "@blocknote/react";
-
 import { RiFilePdfFill } from "react-icons/ri";
 
+import "./styles.css";
+
 export const PDFPreview = (
   props: Omit<
     ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
@@ -21,8 +22,6 @@ export const PDFPreview = (
       src={props.block.props.url}
       contentEditable={false}
       draggable={false}
-      height={props.editor.domElement.clientWidth * 1.5}
-      width={props.editor.domElement.clientWidth}
       onClick={() => props.editor.setTextCursorPosition(props.block)}
     />
   );

examples/05-custom-schema/04-pdf-file-block/styles.css

@@ -0,0 +1,10 @@
+[data-content-type="pdf"] .bn-file-block-content-wrapper,
+[data-content-type="pdf"] .bn-file-and-caption-wrapper {
+    height: 800px;
+    width: 100%;
+}
+
+[data-content-type="pdf"] embed {
+    height: 100%;
+    width: 100%;
+}