-
-
Notifications
You must be signed in to change notification settings - Fork 492
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into optional-props
- Loading branch information
Showing
132 changed files
with
1,736 additions
and
1,263 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
examples/03-ui-components/14-experimental-mobile-formatting-toolbar/.bnexample.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "playground": true, | ||
| "docs": true, | ||
| "author": "areknawo", | ||
| "tags": [ | ||
| "Intermediate", | ||
| "UI Components", | ||
| "Formatting Toolbar", | ||
| "Appearance & Styling" | ||
| ] | ||
| } |
42 changes: 42 additions & 0 deletions
42
examples/03-ui-components/14-experimental-mobile-formatting-toolbar/App.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import "@blocknote/core/fonts/inter.css"; | ||
| import { | ||
| ExperimentalMobileFormattingToolbarController, | ||
| useCreateBlockNote, | ||
| } from "@blocknote/react"; | ||
| import { BlockNoteView } from "@blocknote/mantine"; | ||
| import "@blocknote/mantine/style.css"; | ||
|
|
||
| import "./style.css"; | ||
|
|
||
| export default function App() { | ||
| // Creates a new editor instance. | ||
| const editor = useCreateBlockNote({ | ||
| initialContent: [ | ||
| { | ||
| type: "paragraph", | ||
| content: "Welcome to this demo!", | ||
| }, | ||
| { | ||
| type: "paragraph", | ||
| content: | ||
| "Check out the experimental mobile formatting toolbar by selecting some text (best experienced on a mobile device).", | ||
| }, | ||
| { | ||
| type: "paragraph", | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| // Renders the editor instance using a React component. | ||
| return ( | ||
| // Disables the default formatting toolbar and re-adds it without the | ||
| // `FormattingToolbarController` component. You may have seen | ||
| // `FormattingToolbarController` used in other examples, but we omit it here | ||
| // as we want to control the position and visibility ourselves. BlockNote | ||
| // also uses the `FormattingToolbarController` when displaying the | ||
| // Formatting Toolbar by default. | ||
| <BlockNoteView editor={editor} formattingToolbar={false}> | ||
| <ExperimentalMobileFormattingToolbarController /> | ||
| </BlockNoteView> | ||
| ); | ||
| } |
10 changes: 10 additions & 0 deletions
10
examples/03-ui-components/14-experimental-mobile-formatting-toolbar/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| # Experimental Mobile Formatting Toolbar | ||
|
|
||
| This example shows how to use the experimental mobile formatting toolbar, which uses [Visual Viewport API](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API) to position the toolbar right above the virtual keyboard on mobile devices. | ||
|
|
||
| Controller is currently marked **experimental** due to the flickering issue with positioning (caused by delays of the Visual Viewport API) | ||
|
|
||
| **Relevant Docs:** | ||
|
|
||
| - [Changing the Formatting Toolbar](/docs/ui-components/formatting-toolbar#changing-the-formatting-toolbar) | ||
| - [Editor Setup](/docs/editor-basics/setup) |
14 changes: 14 additions & 0 deletions
14
examples/03-ui-components/14-experimental-mobile-formatting-toolbar/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <html lang="en"> | ||
| <head> | ||
| <script> | ||
| <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY --> | ||
| </script> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Experimental Mobile Formatting Toolbar</title> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script type="module" src="./main.tsx"></script> | ||
| </body> | ||
| </html> |
11 changes: 11 additions & 0 deletions
11
examples/03-ui-components/14-experimental-mobile-formatting-toolbar/main.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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( | ||
| <React.StrictMode> | ||
| <App /> | ||
| </React.StrictMode> | ||
| ); |
37 changes: 37 additions & 0 deletions
37
examples/03-ui-components/14-experimental-mobile-formatting-toolbar/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| { | ||
| "name": "@blocknote/example-experimental-mobile-formatting-toolbar", | ||
| "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" | ||
| ] | ||
| } |
9 changes: 9 additions & 0 deletions
9
examples/03-ui-components/14-experimental-mobile-formatting-toolbar/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| .bn-container { | ||
| display: flex; | ||
| flex-direction: column-reverse; | ||
| gap: 8px; | ||
| } | ||
|
|
||
| .bn-formatting-toolbar { | ||
| margin-inline: auto; | ||
| } |
36 changes: 36 additions & 0 deletions
36
examples/03-ui-components/14-experimental-mobile-formatting-toolbar/tsconfig.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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/" | ||
| } | ||
| ] | ||
| } |
32 changes: 32 additions & 0 deletions
32
examples/03-ui-components/14-experimental-mobile-formatting-toolbar/vite.config.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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), | ||
| }, | ||
| })); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.