Skip to content

Commit 5a43f26

Browse files
areknawomatthewlipskiYousefED
authored
feat: Mobile-optimized formatting toolbar (#1284)
* fix: Import only from a single Shiki bundle * fix: Select options styling on Chrome, Linux * fix: Detect proper language ID when parsing from HTML * fix: Support "typescriptreact" alias for tsx * minor code change * remove setting cursor position when inserting code block * experiment: Visual Viewport API * experiment: Directly setting transform * feat: Experimental mobile formatting toolbar controller * feat: Optimize formatting toolbar controller for mobile * fix: Move overflow-x to bn-toolbar * chore: Describe the experimental mobile formatting toolbar controller * chore: Add an example for the experimental mobile formatting toolbar controller * fix: Experimental toolbar positioning --------- Co-authored-by: matthewlipski <[email protected]> Co-authored-by: yousefed <[email protected]>
1 parent 71792c2 commit 5a43f26

File tree

18 files changed

+351
-17
lines changed

18 files changed

+351
-17
lines changed

‎examples/03-ui-components/14-experimental-mobile-formatting-toolbar/.bnexample.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"playground": true,
3+
"docs": true,
4+
"author": "areknawo",
5+
"tags": [
6+
"Intermediate",
7+
"UI Components",
8+
"Formatting Toolbar",
9+
"Appearance & Styling"
10+
]
11+
}

‎examples/03-ui-components/14-experimental-mobile-formatting-toolbar/App.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import "@blocknote/core/fonts/inter.css";
2+
import {
3+
ExperimentalMobileFormattingToolbarController,
4+
useCreateBlockNote,
5+
} from "@blocknote/react";
6+
import { BlockNoteView } from "@blocknote/mantine";
7+
import "@blocknote/mantine/style.css";
8+
9+
import "./style.css";
10+
11+
export default function App() {
12+
// Creates a new editor instance.
13+
const editor = useCreateBlockNote({
14+
initialContent: [
15+
{
16+
type: "paragraph",
17+
content: "Welcome to this demo!",
18+
},
19+
{
20+
type: "paragraph",
21+
content:
22+
"Check out the experimental mobile formatting toolbar by selecting some text (best experienced on a mobile device).",
23+
},
24+
{
25+
type: "paragraph",
26+
},
27+
],
28+
});
29+
30+
// Renders the editor instance using a React component.
31+
return (
32+
// Disables the default formatting toolbar and re-adds it without the
33+
// `FormattingToolbarController` component. You may have seen
34+
// `FormattingToolbarController` used in other examples, but we omit it here
35+
// as we want to control the position and visibility ourselves. BlockNote
36+
// also uses the `FormattingToolbarController` when displaying the
37+
// Formatting Toolbar by default.
38+
<BlockNoteView editor={editor} formattingToolbar={false}>
39+
<ExperimentalMobileFormattingToolbarController />
40+
</BlockNoteView>
41+
);
42+
}

‎examples/03-ui-components/14-experimental-mobile-formatting-toolbar/README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Experimental Mobile Formatting Toolbar
2+
3+
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.
4+
5+
Controller is currently marked **experimental** due to the flickering issue with positioning (caused by delays of the Visual Viewport API)
6+
7+
**Relevant Docs:**
8+
9+
- [Changing the Formatting Toolbar](/docs/ui-components/formatting-toolbar#changing-the-formatting-toolbar)
10+
- [Editor Setup](/docs/editor-basics/setup)

‎examples/03-ui-components/14-experimental-mobile-formatting-toolbar/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html lang="en">
2+
<head>
3+
<script>
4+
<!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
5+
</script>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Experimental Mobile Formatting Toolbar</title>
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="./main.tsx"></script>
13+
</body>
14+
</html>

‎examples/03-ui-components/14-experimental-mobile-formatting-toolbar/main.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
2+
import React from "react";
3+
import { createRoot } from "react-dom/client";
4+
import App from "./App";
5+
6+
const root = createRoot(document.getElementById("root")!);
7+
root.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>
11+
);

‎examples/03-ui-components/14-experimental-mobile-formatting-toolbar/package.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "@blocknote/example-experimental-mobile-formatting-toolbar",
3+
"description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
4+
"private": true,
5+
"version": "0.12.4",
6+
"scripts": {
7+
"start": "vite",
8+
"dev": "vite",
9+
"build": "tsc && vite build",
10+
"preview": "vite preview",
11+
"lint": "eslint . --max-warnings 0"
12+
},
13+
"dependencies": {
14+
"@blocknote/core": "latest",
15+
"@blocknote/react": "latest",
16+
"@blocknote/ariakit": "latest",
17+
"@blocknote/mantine": "latest",
18+
"@blocknote/shadcn": "latest",
19+
"react": "^18.3.1",
20+
"react-dom": "^18.3.1"
21+
},
22+
"devDependencies": {
23+
"@types/react": "^18.0.25",
24+
"@types/react-dom": "^18.0.9",
25+
"@vitejs/plugin-react": "^4.3.1",
26+
"eslint": "^8.10.0",
27+
"vite": "^5.3.4"
28+
},
29+
"eslintConfig": {
30+
"extends": [
31+
"../../../.eslintrc.js"
32+
]
33+
},
34+
"eslintIgnore": [
35+
"dist"
36+
]
37+
}

‎examples/03-ui-components/14-experimental-mobile-formatting-toolbar/style.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.bn-container {
2+
display: flex;
3+
flex-direction: column-reverse;
4+
gap: 8px;
5+
}
6+
7+
.bn-formatting-toolbar {
8+
margin-inline: auto;
9+
}

‎examples/03-ui-components/14-experimental-mobile-formatting-toolbar/tsconfig.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
3+
"compilerOptions": {
4+
"target": "ESNext",
5+
"useDefineForClassFields": true,
6+
"lib": [
7+
"DOM",
8+
"DOM.Iterable",
9+
"ESNext"
10+
],
11+
"allowJs": false,
12+
"skipLibCheck": true,
13+
"esModuleInterop": false,
14+
"allowSyntheticDefaultImports": true,
15+
"strict": true,
16+
"forceConsistentCasingInFileNames": true,
17+
"module": "ESNext",
18+
"moduleResolution": "Node",
19+
"resolveJsonModule": true,
20+
"isolatedModules": true,
21+
"noEmit": true,
22+
"jsx": "react-jsx",
23+
"composite": true
24+
},
25+
"include": [
26+
"."
27+
],
28+
"__ADD_FOR_LOCAL_DEV_references": [
29+
{
30+
"path": "../../../packages/core/"
31+
},
32+
{
33+
"path": "../../../packages/react/"
34+
}
35+
]
36+
}

‎examples/03-ui-components/14-experimental-mobile-formatting-toolbar/vite.config.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
2+
import react from "@vitejs/plugin-react";
3+
import * as fs from "fs";
4+
import * as path from "path";
5+
import { defineConfig } from "vite";
6+
// import eslintPlugin from "vite-plugin-eslint";
7+
// https://vitejs.dev/config/
8+
export default defineConfig((conf) => ({
9+
plugins: [react()],
10+
optimizeDeps: {},
11+
build: {
12+
sourcemap: true,
13+
},
14+
resolve: {
15+
alias:
16+
conf.command === "build" ||
17+
!fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
18+
? {}
19+
: ({
20+
// Comment out the lines below to load a built version of blocknote
21+
// or, keep as is to load live from sources with live reload working
22+
"@blocknote/core": path.resolve(
23+
__dirname,
24+
"../../packages/core/src/"
25+
),
26+
"@blocknote/react": path.resolve(
27+
__dirname,
28+
"../../packages/react/src/"
29+
),
30+
} as any),
31+
},
32+
}));

‎packages/ariakit/src/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@
1111
gap: 0.5rem;
1212
}
1313

14+
.bn-toolbar.bn-ak-toolbar {
15+
overflow-x: auto;
16+
max-width: 100vw;
17+
}
1418
.bn-toolbar .bn-ak-button {
1519
width: unset;
1620
}

0 commit comments

Comments
 (0)