fix

Author: felixfeng33

apps/www/content/docs/examples/export.mdx

@@ -17,15 +17,6 @@ title: Export
 
 Install the [PDF Toolbar Button](/docs/plate-ui/pdf-toolbar-button) component.
 
-Note: When using Tailwind CSS, you may encounter background color issues. Please refer to [this link](https://github.com/niklasvh/html2canvas/issues/2775#issuecomment-1204988157) for a solution.
-
-Add the following CSS to fix background color rendering issues with html2canvas:
-```css
-@layer base {
-  img {
-    @apply inline-block;
-  }
-}
 ```
 
 ## Examples

apps/www/src/registry/default/plate-ui/pdf-toolbar-button.tsx

@@ -3,8 +3,7 @@
 import React from 'react';
 
 import { withRef } from '@udecode/cn';
-import { useEditorRef } from '@udecode/plate-core/react';
-import { toDOMNode } from '@udecode/slate-react';
+import { toDOMNode, useEditorRef } from '@udecode/plate-common/react';
 
 import { ToolbarButton } from './toolbar';
 
@@ -19,11 +18,15 @@ export const PdfToolbarButton = withRef<typeof ToolbarButton>(
         onClick={async () => {
           const { default: html2canvas } = await import('html2canvas');
 
-          const canvas = await html2canvas(toDOMNode(editor, editor)!, {
-            onclone(document, element) {
-              console.log(document, element, 'fj');
-            },
-          });
+          const style = document.createElement('style');
+          document.head.append(style);
+          style.sheet?.insertRule(
+            'body > div:last-child img { display: inline-block !important; }'
+          );
+
+          const canvas = await html2canvas(toDOMNode(editor, editor)!);
+
+          style.remove();
 
           const PDFLib = await import('pdf-lib');
           const pdfDoc = await PDFLib.PDFDocument.create();

apps/www/src/styles/globals.css

@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* global.css */
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -36,7 +35,7 @@
 
     --brand: 217.2 91.2% 59.8%;
     --highlight: 47.9 95.8% 53.1%;
-
+    
     .prose {
       --tw-prose-body: var(--foreground);
       --tw-prose-bold: inherit;