TypeCellOS · YousefED · Jul 9, 2024 · Jul 3, 2024 · Jul 4, 2024 · Jul 5, 2024
diff --git a/examples/01-basic/11-removing-block-option/.bnexample.json b/examples/01-basic/11-removing-block-option/.bnexample.json
@@ -0,0 +1,6 @@
+{
+  "playground": true,
+  "docs": true,
+  "author": "hunxjunedo",
+  "tags": ["Basic", "removing", "custom"]
+}
diff --git a/examples/01-basic/11-removing-block-option/App.tsx b/examples/01-basic/11-removing-block-option/App.tsx
@@ -0,0 +1,54 @@
+import "@blocknote/core/fonts/inter.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+import { BlockNoteSchema, defaultBlockSpecs, defaultInlineContentSpecs,  defaultStyleSpecs } from "@blocknote/core";
+
+export default function App() {
+  //create custom schema
+  let editedSchema : any =  {}
+
+  //define the blocks which are not allowed
+  const unwantedBlocks = ['audio', 'image']
+
+  //Loop thru default schema and remove the unwanted blocks
+  Object.entries(defaultBlockSpecs).forEach(([blockName, blockSchema])=>{
+    if(!unwantedBlocks.includes(blockName)){
+
+      //only allow to to pass if the blockName is not unwanted
+      editedSchema[blockName] = blockSchema
+    }
+  })
+
+  //now create the schema
+  const schema = BlockNoteSchema.create({
+    blockSpecs: {
+      ...editedSchema,
+
+      // Add your own custom blocks:
+      // customBlock: CustomBlock,
+    },
+    inlineContentSpecs: {
+      // enable the default inline content if desired
+      ...defaultInlineContentSpecs,
+
+      // Add your own custom inline content:
+      // customInlineContent: CustomInlineContent,
+    },
+    styleSpecs: {
+      // enable the default styles if desired
+      ...defaultStyleSpecs,
+
+      // Add your own custom styles:
+      // customStyle: CustomStyle
+    },
+  });
+
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    schema
+  });
+
+  // Renders the editor instance using a React component.
+  return <BlockNoteView editor={editor} />;
+}
diff --git a/examples/01-basic/11-removing-block-option/README.md b/examples/01-basic/11-removing-block-option/README.md
@@ -0,0 +1,7 @@
+# Removing Default Blocks Options
+
+In this example, we pass a custom schema to the editor function, which retuurns an editor which has our custom schema. While create thi schema we remove the blocks which we don't want, by using simple logic.
+
+**Relevant Docs:**
+
+- [Editor Setup](/docs/editor-basics/setup)
diff --git a/examples/01-basic/11-removing-block-option/index.html b/examples/01-basic/11-removing-block-option/index.html
@@ -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>Removing Default Blocks Options</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/01-basic/11-removing-block-option/main.tsx b/examples/01-basic/11-removing-block-option/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(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/01-basic/11-removing-block-option/package.json b/examples/01-basic/11-removing-block-option/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@blocknote/example-removing-block-option",
+  "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.0.4",
+    "eslint": "^8.10.0",
+    "vite": "^4.4.8"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}
diff --git a/examples/01-basic/11-removing-block-option/tsconfig.json b/examples/01-basic/11-removing-block-option/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/"
+    }
+  ]
+}
diff --git a/examples/01-basic/11-removing-block-option/vite.config.ts b/examples/01-basic/11-removing-block-option/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/examples/01-basic/11-removing-default-blocks/.bnexample.json b/examples/01-basic/11-removing-default-blocks/.bnexample.json
@@ -0,0 +1,6 @@
+{
+  "playground": true,
+  "docs": true,
+  "author": "hunxjunedo",
+  "tags": ["Basic", "removing", "custom"]
+}
diff --git a/examples/01-basic/11-removing-default-blocks/App.tsx b/examples/01-basic/11-removing-default-blocks/App.tsx
@@ -0,0 +1,41 @@
+import "@blocknote/core/fonts/inter.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+import { BlockNoteSchema, BlockSpec, defaultBlockSpecs, defaultInlineContentSpecs,  defaultStyleSpecs } from "@blocknote/core";
+
+export default function App() {
+
+  // create the schema
+  const schema = BlockNoteSchema.create({
+    blockSpecs: {
+      //first pass all the blocks
+      ...defaultBlockSpecs,
+      //now make the unwanted blocks undefined
+      audio: undefined as any,
+      image: undefined as any
+    },
+    inlineContentSpecs: {
+      // enable the default inline content if desired
+      ...defaultInlineContentSpecs,
+
+      // Add your own custom inline content:
+      // customInlineContent: CustomInlineContent,
+    },
+    styleSpecs: {
+      // enable the default styles if desired
+      ...defaultStyleSpecs,
+
+      // Add your own custom styles:
+      // customStyle: CustomStyle
+    },
+  });
+
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    schema
+  });
+
+  // Renders the editor instance using a React component.
+  return <BlockNoteView editor={editor} />;
+}
diff --git a/examples/01-basic/11-removing-default-blocks/README.md b/examples/01-basic/11-removing-default-blocks/README.md
@@ -0,0 +1,8 @@
+# Removing Default Blocks Options
+
+In this example, we pass a custom schema to the editor function, which returns an editor which has our custom schema. While creating this schema we remove the blocks - audio and image in this example - which we don't want, by making those blocks undefined.
+
+**Relevant Docs:**
+
+- [Editor Setup](/docs/editor-basics/setup)
+- [Custom Schemas](/docs/custom-schemas)