Skip to content

Commit ff052c8

Browse files
matthewlipskiwielinde
matthewlipski
and
wielinde
authored
chore: Regression test for #2677 (#2688)
* fix(clipboard): use ProseMirror selection state for Shadow DOM compatibility * Added e2e test and example for test --------- Co-authored-by: Wieland Lindenthal <w.lindenthal@forkmerge.com>
1 parent 130a916 commit ff052c8

14 files changed

Lines changed: 409 additions & 13 deletions

File tree

‎examples/06-custom-schema/08-non-editable-block/.bnexample.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"playground": true,
3+
"docs": false,
4+
"author": "matthewlipski",
5+
"tags": ["Intermediate", "Blocks", "Custom Schemas"]
6+
}

‎examples/06-custom-schema/08-non-editable-block/README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Non-Editable Block
2+
3+
In this example, we create a custom block which renders a simple HTML paragraph with placeholder text. The block has no editable content.
4+
5+
**Relevant Docs:**
6+
7+
- [Custom Blocks](/docs/features/custom-schemas/custom-blocks)
8+
- [Editor Setup](/docs/getting-started/editor-setup)

‎examples/06-custom-schema/08-non-editable-block/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+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<title>Non-Editable Block</title>
6+
<script>
7+
<!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
8+
</script>
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="./main.tsx"></script>
13+
</body>
14+
</html>

‎examples/06-custom-schema/08-non-editable-block/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 "./src/App.jsx";
5+
6+
const root = createRoot(document.getElementById("root")!);
7+
root.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>
11+
);

‎examples/06-custom-schema/08-non-editable-block/package.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "@blocknote/example-custom-schema-non-editable-block",
3+
"description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
4+
"type": "module",
5+
"private": true,
6+
"version": "0.12.4",
7+
"scripts": {
8+
"start": "vite",
9+
"dev": "vite",
10+
"build:prod": "tsc && vite build",
11+
"preview": "vite preview"
12+
},
13+
"dependencies": {
14+
"@blocknote/ariakit": "latest",
15+
"@blocknote/core": "latest",
16+
"@blocknote/mantine": "latest",
17+
"@blocknote/react": "latest",
18+
"@blocknote/shadcn": "latest",
19+
"@mantine/core": "^8.3.11",
20+
"@mantine/hooks": "^8.3.11",
21+
"@mantine/utils": "^6.0.22",
22+
"react": "^19.2.3",
23+
"react-dom": "^19.2.3"
24+
},
25+
"devDependencies": {
26+
"@types/react": "^19.2.3",
27+
"@types/react-dom": "^19.2.3",
28+
"@vitejs/plugin-react": "^6.0.1",
29+
"vite": "^8.0.8"
30+
}
31+
}

‎examples/06-custom-schema/08-non-editable-block/src/App.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { BlockNoteSchema } from "@blocknote/core";
2+
import "@blocknote/core/fonts/inter.css";
3+
import { BlockNoteView } from "@blocknote/mantine";
4+
import "@blocknote/mantine/style.css";
5+
import { useCreateBlockNote } from "@blocknote/react";
6+
7+
import { createNonEditableBlock } from "./NonEditableBlock";
8+
9+
// Our schema with block specs, which contain the configs and implementations for
10+
// blocks that we want our editor to use.
11+
const schema = BlockNoteSchema.create().extend({
12+
blockSpecs: {
13+
// Creates an instance of the Non-Editable block and adds it to the schema.
14+
nonEditable: createNonEditableBlock(),
15+
},
16+
});
17+
18+
export default function App() {
19+
// Creates a new editor instance.
20+
const editor = useCreateBlockNote({
21+
schema,
22+
initialContent: [
23+
{
24+
type: "paragraph",
25+
content: "Welcome to this demo!",
26+
},
27+
{
28+
type: "nonEditable",
29+
},
30+
{
31+
type: "paragraph",
32+
},
33+
],
34+
});
35+
36+
// Renders the editor instance.
37+
return <BlockNoteView editor={editor} />;
38+
}

‎examples/06-custom-schema/08-non-editable-block/src/NonEditableBlock.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { createReactBlockSpec } from "@blocknote/react";
2+
3+
// The Non-Editable block.
4+
export const createNonEditableBlock = createReactBlockSpec(
5+
{
6+
type: "nonEditable",
7+
propSchema: {},
8+
content: "none",
9+
},
10+
{
11+
render: () => <p>This is a non-editable block.</p>,
12+
},
13+
);

‎examples/06-custom-schema/08-non-editable-block/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": "bundler",
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/06-custom-schema/08-non-editable-block/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+
}));

‎playground/src/examples.gen.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1414,6 +1414,27 @@
14141414
},
14151415
"readme": "This example shows how you can configure the editor's default blocks. Specifically, heading blocks are made to only support levels 1-3, and cannot be toggleable.\n\n**Relevant Docs:**\n\n- [Editor Setup](/docs/getting-started/editor-setup)\n- [Default Schema](/docs/foundations/schemas)\n- [Custom Schemas](/docs/features/custom-schemas)"
14161416
},
1417+
{
1418+
"projectSlug": "non-editable-block",
1419+
"fullSlug": "custom-schema/non-editable-block",
1420+
"pathFromRoot": "examples/06-custom-schema/08-non-editable-block",
1421+
"config": {
1422+
"playground": true,
1423+
"docs": false,
1424+
"author": "matthewlipski",
1425+
"tags": [
1426+
"Intermediate",
1427+
"Blocks",
1428+
"Custom Schemas"
1429+
]
1430+
},
1431+
"title": "Non-Editable Block",
1432+
"group": {
1433+
"pathFromRoot": "examples/06-custom-schema",
1434+
"slug": "custom-schema"
1435+
},
1436+
"readme": "In this example, we create a custom block which renders a simple HTML paragraph with placeholder text. The block has no editable content.\n\n**Relevant Docs:**\n\n- [Custom Blocks](/docs/features/custom-schemas/custom-blocks)\n- [Editor Setup](/docs/getting-started/editor-setup)"
1437+
},
14171438
{
14181439
"projectSlug": "draggable-inline-content",
14191440
"fullSlug": "custom-schema/draggable-inline-content",

0 commit comments

Comments
 (0)