Improve RTL editor layout and core interactions

docs/content/docs/features/blocks/index.mdx

@@ -35,6 +35,8 @@ type DefaultProps = {
 };
 ```
 
+In the editor, `"left"` means the logical start of the block and `"right"` means the logical end. They appear left/right in LTR blocks and right/left in RTL blocks; the stored values and default remain unchanged.
+
 ## Configuring Default Blocks
 
 Some default blocks can be configured with options. For example, headings can be configured to have different available levels:

examples/01-basic/18-rtl/.bnexample.json

@@ -0,0 +1,6 @@
+{
+  "playground": true,
+  "docs": false,
+  "author": "",
+  "tags": ["Basic"]
+}

examples/01-basic/18-rtl/README.md

@@ -0,0 +1,11 @@
+# Right-to-left (RTL)
+
+A Hebrew-localized editor with Hebrew, Arabic, and mixed English text. Use the Hebrew dictionary, Mantine's `DirectionProvider`, and `dir="rtl"` on `BlockNoteView` to localize the UI and mirror the layout while keeping code left-to-right. The provider uses `initialDirection="rtl"` and `detectDirection={false}` so this example stays RTL independently of the surrounding playground.
+
+**Try it out!** Edit the nested lists, open a block menu, edit the link, or type `/` and `:sm` in the empty paragraph to try the slash menu and emoji picker.
+
+**Relevant Docs:**
+
+- [Editor Setup](/docs/getting-started/editor-setup)
+- [Localization](/docs/features/localization)
+- [Mantine RTL setup](https://mantine.dev/styles/rtl/)

examples/01-basic/18-rtl/index.html

@@ -0,0 +1,17 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"
+    />
+    <title>Right-to-left (RTL)</title>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

examples/01-basic/18-rtl/main.tsx

@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./src/App.jsx";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

examples/01-basic/18-rtl/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@blocknote/example-basic-rtl",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
+  "private": true,
+  "version": "0.12.4",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build:prod": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@blocknote/ariakit": "latest",
+    "@blocknote/core": "latest",
+    "@blocknote/mantine": "latest",
+    "@blocknote/react": "latest",
+    "@blocknote/shadcn": "latest",
+    "@mantine/core": "^9.0.2",
+    "@mantine/hooks": "^9.0.2",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "vite": "^8.0.0"
+  }
+}

examples/01-basic/18-rtl/src/App.tsx

@@ -0,0 +1,73 @@
+import "@blocknote/core/fonts/inter.css";
+import { he } from "@blocknote/core/locales";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import { DirectionProvider } from "@mantine/core";
+
+export default function App() {
+  const editor = useCreateBlockNote({
+    dictionary: he,
+    initialContent: [
+      {
+        type: "heading",
+        props: { level: 2 },
+        content: "שלום — مرحباً",
+      },
+      {
+        type: "paragraph",
+        content: "עורך מימין לשמאל — محرر من اليمين إلى اليسار",
+      },
+      {
+        type: "paragraph",
+        content: "עברית, العربية ו-English (123) — טקסט מעורב / نص مختلط.",
+      },
+      {
+        type: "bulletListItem",
+        content: "רשימה עם פריטים מקוננים",
+        children: [
+          { type: "bulletListItem", content: "פריט פנימי — بند فرعي" },
+          {
+            type: "bulletListItem",
+            content: "English inside an RTL list (456)",
+          },
+        ],
+      },
+      { type: "numberedListItem", content: "الخطوة الأولى — שלב ראשון" },
+      { type: "numberedListItem", content: "الخطوة الثانية — שלב שני" },
+      { type: "checkListItem", content: "משימה לבדיקה — مهمة للتجربة" },
+      { type: "quote", content: "اقتباس قصير — ציטוט קצר" },
+      {
+        type: "toggleListItem",
+        content: "פרטים נוספים — تفاصيل إضافية",
+        children: [
+          {
+            type: "paragraph",
+            content: "אפשר לערוך גם כאן — يمكنك الكتابة هنا أيضاً.",
+          },
+        ],
+      },
+      {
+        type: "paragraph",
+        content: [
+          { type: "text", text: "קישור לדוגמה — ", styles: {} },
+          {
+            type: "link",
+            href: "https://www.blocknotejs.org",
+            content: "توثيق BlockNote",
+          },
+        ],
+      },
+      { type: "codeBlock", content: 'const greeting = "שלום — مرحباً";' },
+      { type: "paragraph" },
+    ],
+  });
+
+  // Keep Mantine's direction context and the editor's DOM direction in sync,
+  // without detecting or changing the surrounding playground's direction.
+  return (
+    <DirectionProvider initialDirection="rtl" detectDirection={false}>
+      <BlockNoteView editor={editor} dir="rtl" lang="he" />
+    </DirectionProvider>
+  );
+}

examples/01-basic/18-rtl/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "composite": true,
+    "paths": {
+      "@shared/*": ["../../../shared/*"]
+    }
+  },
+  "include": ["."],
+  "__ADD_FOR_LOCAL_DEV_references": [
+    {
+      "path": "../../../packages/core/"
+    },
+    {
+      "path": "../../../packages/react/"
+    }
+  ]
+}

examples/01-basic/18-rtl/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/01-basic/18-rtl/vite.config.ts

@@ -0,0 +1,35 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import react from "@vitejs/plugin-react";
+import * as fs from "fs";
+import * as path from "path";
+import { defineConfig } from "vite";
+// https://vitejs.dev/config/
+export default defineConfig(((conf: { command: string }) => ({
+  plugins: [react()],
+  optimizeDeps: {},
+  build: {
+    sourcemap: true,
+  },
+  resolve: {
+    alias:
+      conf.command === "build" ||
+      !fs.existsSync(path.resolve(__dirname, "../../../packages/core/src"))
+        ? {}
+        : ({
+            // The repo-wide alias for the shared test-utils directory (private,
+            // so it only resolves inside the monorepo). Harmless for examples
+            // that don't use it.
+            "@shared": path.resolve(__dirname, "../../../shared/"),
+            // Comment out the lines below to load a built version of blocknote
+            // or, keep as is to load live from sources with live reload working
+            "@blocknote/core": path.resolve(
+              __dirname,
+              "../../../packages/core/src/",
+            ),
+            "@blocknote/react": path.resolve(
+              __dirname,
+              "../../../packages/react/src/",
+            ),
+          } as any),
+  },
+})) as Parameters<typeof defineConfig>[0]);

packages/ariakit/src/input/TextInput.tsx

@@ -14,6 +14,7 @@ export const TextInput = forwardRef<
   const {
     className,
     name,
+    dir,
     label,
     variant,
     icon,
@@ -48,6 +49,7 @@ export const TextInput = forwardRef<
           )}
           ref={setRefs}
           name={name}
+          dir={dir}
           value={value}
           placeholder={placeholder}
           disabled={disabled}

packages/ariakit/src/style.css

@@ -194,7 +194,7 @@
   height: 100%;
   width: 18px;
   padding: 0;
-  margin-left: 4px;
+  margin-inline-start: 4px;
   cursor: col-resize;
 }