diff --git a/examples/01-basic/10-rtl-direction/.bnexample.json b/examples/01-basic/10-rtl-direction/.bnexample.json new file mode 100644 index 000000000..80a17d7ef --- /dev/null +++ b/examples/01-basic/10-rtl-direction/.bnexample.json @@ -0,0 +1,6 @@ +{ + "playground": true, + "docs": true, + "author": "zaaakher", + "tags": ["Basic"] +} diff --git a/examples/01-basic/10-rtl-direction/App.tsx b/examples/01-basic/10-rtl-direction/App.tsx new file mode 100644 index 000000000..fefef4c3d --- /dev/null +++ b/examples/01-basic/10-rtl-direction/App.tsx @@ -0,0 +1,19 @@ +import { locales } from "@blocknote/core"; +import "@blocknote/core/fonts/inter.css"; +import { BlockNoteView } from "@blocknote/mantine"; +import "@blocknote/mantine/style.css"; +import { useCreateBlockNote } from "@blocknote/react"; +// import { useTranslation } from "some-i18n-library"; // You can use any i18n library you like + +export default function App() { + // const { lang } = useTranslation('common'); // You can get the current language from the i18n library or alternatively from a router + // Creates a new editor instance. + const editor = useCreateBlockNote(); + + // Renders the editor instance using a React component. + return ( +
+ +
+ ); +} diff --git a/examples/01-basic/10-rtl-direction/README.md b/examples/01-basic/10-rtl-direction/README.md new file mode 100644 index 000000000..bd40ed99b --- /dev/null +++ b/examples/01-basic/10-rtl-direction/README.md @@ -0,0 +1,7 @@ +# RTL Direction + +In this example, we set the layout direction to RTL. + +**Relevant Docs:** + +- [Editor Setup](/docs/editor-basics/setup) diff --git a/examples/01-basic/10-rtl-direction/index.html b/examples/01-basic/10-rtl-direction/index.html new file mode 100644 index 000000000..b1743ce88 --- /dev/null +++ b/examples/01-basic/10-rtl-direction/index.html @@ -0,0 +1,14 @@ + + + + + + RTL Direction + + +
+ + + diff --git a/examples/01-basic/10-rtl-direction/main.tsx b/examples/01-basic/10-rtl-direction/main.tsx new file mode 100644 index 000000000..f88b490fb --- /dev/null +++ b/examples/01-basic/10-rtl-direction/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 "./App"; + +const root = createRoot(document.getElementById("root")!); +root.render( + + + +); diff --git a/examples/01-basic/10-rtl-direction/package.json b/examples/01-basic/10-rtl-direction/package.json new file mode 100644 index 000000000..9cae7ab30 --- /dev/null +++ b/examples/01-basic/10-rtl-direction/package.json @@ -0,0 +1,37 @@ +{ + "name": "@blocknote/example-rtl-direction", + "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY", + "private": true, + "version": "0.12.4", + "scripts": { + "start": "vite", + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview", + "lint": "eslint . --max-warnings 0" + }, + "dependencies": { + "@blocknote/core": "latest", + "@blocknote/react": "latest", + "@blocknote/ariakit": "latest", + "@blocknote/mantine": "latest", + "@blocknote/shadcn": "latest", + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "devDependencies": { + "@types/react": "^18.0.25", + "@types/react-dom": "^18.0.9", + "@vitejs/plugin-react": "^4.3.1", + "eslint": "^8.10.0", + "vite": "^5.3.4" + }, + "eslintConfig": { + "extends": [ + "../../../.eslintrc.js" + ] + }, + "eslintIgnore": [ + "dist" + ] +} \ No newline at end of file diff --git a/examples/01-basic/10-rtl-direction/tsconfig.json b/examples/01-basic/10-rtl-direction/tsconfig.json new file mode 100644 index 000000000..1bd8ab3c5 --- /dev/null +++ b/examples/01-basic/10-rtl-direction/tsconfig.json @@ -0,0 +1,36 @@ +{ + "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY", + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": [ + "DOM", + "DOM.Iterable", + "ESNext" + ], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "composite": true + }, + "include": [ + "." + ], + "__ADD_FOR_LOCAL_DEV_references": [ + { + "path": "../../../packages/core/" + }, + { + "path": "../../../packages/react/" + } + ] +} \ No newline at end of file diff --git a/examples/01-basic/10-rtl-direction/vite.config.ts b/examples/01-basic/10-rtl-direction/vite.config.ts new file mode 100644 index 000000000..f62ab20bc --- /dev/null +++ b/examples/01-basic/10-rtl-direction/vite.config.ts @@ -0,0 +1,32 @@ +// 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"; +// import eslintPlugin from "vite-plugin-eslint"; +// https://vitejs.dev/config/ +export default defineConfig((conf) => ({ + plugins: [react()], + optimizeDeps: {}, + build: { + sourcemap: true, + }, + resolve: { + alias: + conf.command === "build" || + !fs.existsSync(path.resolve(__dirname, "../../packages/core/src")) + ? {} + : ({ + // 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), + }, +})); diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx index eaac16275..03e853c70 100644 --- a/playground/src/examples.gen.tsx +++ b/playground/src/examples.gen.tsx @@ -174,6 +174,24 @@ "slug": "basic" } }, + { + "projectSlug": "rtl-direction", + "fullSlug": "basic/rtl-direction", + "pathFromRoot": "examples/01-basic/10-rtl-direction", + "config": { + "playground": true, + "docs": true, + "author": "zaaakher", + "tags": [ + "Basic" + ] + }, + "title": "RTL Direction", + "group": { + "pathFromRoot": "examples/01-basic", + "slug": "basic" + } + }, { "projectSlug": "testing", "fullSlug": "basic/testing",