Xennis · Xennis · May 29, 2024 · May 29, 2024
diff --git a/examples/nextjs/src/app/layout.tsx b/examples/nextjs/src/app/layout.tsx
@@ -1,5 +1,7 @@
 import { Inter } from "next/font/google"
 import "./globals.css"
+import { classNames } from "@react-notion-cms/render/dist/util"
+import { ToggleDarkModeButton, ToggleRtlDirectionButton } from "@/components/toggle-button"
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -10,8 +12,16 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.className} suppressHydrationWarning>
-        {children}
+      <body className={classNames(inter.className, "dark:bg-slate-800")} suppressHydrationWarning>
+        <header className="w-full bg-teal-500">
+          <div className="mx-auto max-w-screen-lg py-2">
+            <div className="flex gap-4">
+              <ToggleDarkModeButton />
+              <ToggleRtlDirectionButton />
+            </div>
+          </div>
+        </header>
+        <main>{children}</main>
       </body>
     </html>
   )

diff --git a/examples/nextjs/src/components/toggle-button.tsx b/examples/nextjs/src/components/toggle-button.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import { useState } from "react"
+import { classNames } from "@react-notion-cms/render/dist/util"
+
+const Button = ({ className, ...props }: React.ComponentPropsWithoutRef<"button">) => {
+  return (
+    <button
+      className={classNames("rounded bg-black px-2 py-1 text-sm font-semibold text-white", className ?? "")}
+      {...props}
+    >
+      {props.children}
+    </button>
+  )
+}
+
+export const ToggleDarkModeButton = () => {
+  const [darkMode, setDarkMode] = useState(false)
+
+  const handleClick = () => {
+    const enabled = !darkMode
+    setDarkMode(enabled)
+    if (enabled) {
+      document.querySelector("html")?.classList.add("dark")
+    } else {
+      document.querySelector("html")?.classList.remove("dark")
+    }
+  }
+
+  return <Button onClick={handleClick}>{darkMode ? "Light" : "Dark"} Mode</Button>
+}
+
+export const ToggleRtlDirectionButton = () => {
+  const [rtlDirection, setRtlDirection] = useState(false)
+
+  const handleClick = () => {
+    const enabled = !rtlDirection
+    setRtlDirection(enabled)
+    if (enabled) {
+      document.body.style.direction = "rtl"
+    } else {
+      document.body.style.direction = "ltr"
+    }
+  }
+
+  return <Button onClick={handleClick}>{rtlDirection ? "LTR" : "RTL"} Direction</Button>
+}
diff --git a/examples/nextjs/tailwind.config.ts b/examples/nextjs/tailwind.config.ts
@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss"
 
 const config: Config = {
+  darkMode: "selector",
   content: [
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",

diff --git a/packages/render/src/block.tsx b/packages/render/src/block.tsx
@@ -114,7 +114,7 @@ const Block = ({ block, options }: { block: BlockObjectResponseWithChildren; opt
             style={{ marginTop: "1px", marginBottom: "1px" }}
             className="box-border flex w-full select-none overflow-hidden rounded-[3px] border border-solid border-[--fg-color-1] no-underline dark:border-[--bg-color-0]"
           >
-            <div className="flex-[4_1_180px] overflow-hidden px-3.5 pb-3.5 pt-3 text-left text-[--fg-color]">
+            <div className="flex-[4_1_180px] overflow-hidden px-3.5 pb-3.5 pt-3 text-start text-[--fg-color]">
               {/* ref: .notion-bookmark-title */}
               {title && (
                 <div className="mb-0.5 min-h-[24px] overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-5">
@@ -186,7 +186,7 @@ const Block = ({ block, options }: { block: BlockObjectResponseWithChildren; opt
       }
       return (
         // ref: .notion-row
-        <div className="flex space-x-4">
+        <div className="flex gap-4">
           {columnListChildren.map((column, index) => {
             return (
               // ref: .notion-column
@@ -285,7 +285,7 @@ const Block = ({ block, options }: { block: BlockObjectResponseWithChildren; opt
           </div>
           {imageHasCaption ? (
             // ref: .notion-asset-caption
-            <figcaption className="whitespace-pre-wrap break-words py-1.5 pl-0.5 pr-0 text-sm leading-[1.4] text-[color:var(--fg-color-3)] caret-[color:var(--fg-color)]">
+            <figcaption className="whitespace-pre-wrap break-words py-1.5 pe-0 ps-0.5 text-sm leading-[1.4] text-[color:var(--fg-color-3)] caret-[color:var(--fg-color)]">
               <RichTexts value={block.image.caption} options={options} />
             </figcaption>
           ) : (
@@ -318,7 +318,7 @@ const Block = ({ block, options }: { block: BlockObjectResponseWithChildren; opt
         <blockquote
           style={notionColor(block.quote.color)}
           className={
-            "mx-0 my-1.5 block w-full whitespace-pre-wrap break-words border-l-[3px] border-solid border-l-[currentcolor] px-[0.9em] py-[0.2em] text-[1.2em]"
+            "mx-0 my-1.5 block w-full whitespace-pre-wrap break-words border-s-[3px] border-solid border-s-[currentcolor] px-[0.9em] py-[0.2em] text-[1.2em]"
           }
         >
           <div>

diff --git a/packages/render/src/components/checkbox.tsx b/packages/render/src/components/checkbox.tsx
@@ -6,7 +6,7 @@ export const Checkbox = ({ checked }: { checked: boolean }) => {
     content = (
       // ref: .notion-property-checkbox-checked
       <div className="h-4 w-4 bg-[--select-color-0]">
-        <svg viewBox="0 0 14 14" className="relative left-px top-px block h-3.5 w-3.5 fill-white">
+        <svg viewBox="0 0 14 14" className="relative start-px top-px block h-3.5 w-3.5 fill-white">
           <path d="M5.5 12L14 3.5 12.5 2l-7 7-4-4.003L0 6.499z" />
         </svg>
       </div>

diff --git a/packages/render/src/thirdparty/react-notion-x/styles.css b/packages/render/src/thirdparty/react-notion-x/styles.css
@@ -50,7 +50,7 @@
   --notion-gray_background_co: rgba(235, 236, 237, 0.3);
 }
 
-.dark-mode {
+.dark {
   --fg-color: rgba(255, 255, 255, 0.9);
   --fg-color-0: var(--fg-color);
   --fg-color-1: var(--fg-color);