[{"id":"87a065ca-5b05-4a28-87bb-4340864bdcf9","type":"image","props":{"backgroundColor":"default","textAlignment":"center","name":"Screenshot 2024-09-26 at 3.16.11 AM.png","url":"https://blog-be.jaeung.com/posts/media/66f50a481587b9a584454021","caption":"","showPreview":true,"previewWidth":992},"children":[]},{"id":"704c1c53-269b-4390-9aab-22fd3b14f72a","type":"heading","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left","level":2},"content":[{"type":"text","text":"Introduction","styles":{}}],"children":[]},{"id":"68739320-573c-42f1-acc9-5307282a7a66","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"BlockNote","styles":{"bold":true}},{"type":"text","text":" is a opensource Block-Based rich text editor. What you see here is built on BlockNote and it allows to easily integrate text editors into your project. After going through some research, I found that this is a great text editor to use for my project on building my blog for the ease of implementation, as they claimed that 'it just works.' BlockNote came with most of the basic features needed for rich text editor and it has the modern look and feel of the text editor from Notion, one of the famous note-taking app out there, that there is not much additional works needed to make it better.","styles":{}}],"children":[]},{"id":"5972820c-f598-44b8-9a59-02e4f7519286","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"1c3c20f4-04c9-455c-b9e2-37d7debc1440","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Since my first post about creating my own blog, I soon encountered a significant challenge with BlockNote: it does not support code blocks out of the box. As I will be uploading posts heavy on codebase, having a code block feature was essential.","styles":{}}],"children":[]},{"id":"5bd7032a-56ac-401b-8d16-89355806aec7","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"96594757-997f-46dd-aa4d-2047d020cd77","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"After navigating through various GitHub issues, Discord threads, and countless Google searches, I finally found an approach that worked for me. If you're reading this, I assume you've faced the same hurdle, and I hope my solution can help you too.","styles":{}}],"children":[]},{"id":"93709f56-8d97-47b6-bf57-e2a766b8a1dc","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2dd7f826-f71d-4533-9023-ddf77deda9ae","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"To make it easier for others, I also created a pull request on BlockNote to add an example on their website, making it more accessible for everyone.","styles":{}}],"children":[]},{"id":"067b7bb4-35e0-4bd2-9e1d-153aaf36f45f","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"6a64df10-7cd3-4676-801b-d7f128162ec4","type":"heading","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left","level":2},"content":[{"type":"text","text":"Setup","styles":{}}],"children":[]},{"id":"73b04637-b9b9-49cb-abdd-a30036c792cd","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If you’ve already set up ","styles":{}},{"type":"text","text":"BlockNote","styles":{"bold":true}},{"type":"text","text":", feel free to skip this section. Otherwise, follow the official ","styles":{}},{"type":"link","href":"https://nextjs.org/docs/getting-started/installation","content":[{"type":"text","text":"Next.js installation guide","styles":{}}]},{"type":"text","text":" to get started.","styles":{}}],"children":[]},{"id":"820d0561-fc8c-42b2-a07b-c11fdb86cfdb","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"b2592c2c-986f-459a-9a09-cfdbf9991ea6","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Once set, Let's install necessary packages:","styles":{}}],"children":[]},{"id":"c187f56a-248b-4402-8ec6-97ee789844f0","type":"codeBlock","props":{"textColor":"default","textAlignment":"left","data":"npm install \\\n@blocknote/core \\\n@blocknote/react \\\n@blocknote/mantine \\\nlucide-react \\\n@uiw/react-codemirror \\\n@uiw/codemirror-extensions-langs","language":"shell"},"children":[]},{"id":"663bf982-b192-46c5-8443-d06f7582da98","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9beabb0b-2f16-4fa0-a453-6f412029ffac","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"After you finish installing, you will have below file structures:","styles":{}}],"children":[]},{"id":"1cab3324-59fa-40c9-b62d-bb9aab28d241","type":"image","props":{"backgroundColor":"default","textAlignment":"center","name":"Screenshot 2024-10-07 at 6.43.28 PM.png","url":"https://blog-be.jaeung.com/posts/media/670464141587b9a584454023","caption":"","showPreview":true,"previewWidth":431},"children":[]},{"id":"81579519-5dea-499b-b43d-c05f2ddbc3b6","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Let's create a folder called ","styles":{}},{"type":"text","text":"components","styles":{"bold":true}},{"type":"text","text":" and create three files:","styles":{}}],"children":[]},{"id":"7724c2cd-6596-41be-aafe-638c69ba8fc0","type":"bulletListItem","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"App.tsx","styles":{"bold":true}},{"type":"text","text":" - This will be the main BlockNote editor.","styles":{}}],"children":[]},{"id":"bdf1e6b8-cf73-4269-87fb-e1a9c992dda7","type":"bulletListItem","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Code.tsx","styles":{"bold":true}},{"type":"text","text":" - This is a custom extension to include Code Block into BlockNote.","styles":{}}],"children":[]},{"id":"aef4d7bd-b16d-4518-9745-0b06594025be","type":"bulletListItem","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"styles.css","styles":{"bold":true}},{"type":"text","text":" - This is a style file for Code Block.","styles":{}}],"children":[]},{"id":"0aaec1aa-0611-4fc6-9f92-1b1ced6614de","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"6e75633d-5df9-4e9a-b570-97e47b50ffa5","type":"heading","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left","level":2},"content":[{"type":"text","text":"Setup main page","styles":{}}],"children":[]},{"id":"35514684-f798-4cb3-8b44-6378a2d659c5","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Once your project is ready, let's remove any default codes on ","styles":{}},{"type":"text","text":"app/page.txt","styles":{"bold":true}},{"type":"text","text":" to start with fresh. The code will import BlockNote App from components and load it into the main page.","styles":{}}],"children":[]},{"id":"8bb2dde6-a742-44de-96b1-0a2dd0432334","type":"codeBlock","props":{"textColor":"default","textAlignment":"left","data":"// app/page.txt\n\nimport App from \"@/components/App\";\n\nexport default function Home() {\n return (\n \n );\n}\n","language":"typescript"},"children":[]},{"id":"e11a1ab2-4dec-487d-9849-dbc0788fb6aa","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"5bc38290-5823-4460-afb9-ab0313047a02","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If you have an existing project, just import the App into necessary location.","styles":{}}],"children":[]},{"id":"20b177d4-591a-4e67-a7e9-8805a4f9193c","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"ff0f8e1a-429b-4ac6-8a8c-65355fc9da44","type":"heading","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left","level":3},"content":[{"type":"text","text":"App.tsx - BlockNote Editor","styles":{}}],"children":[]},{"id":"439b17e3-39fe-4a31-afc0-d44e3925cf0a","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This file will contain the main codebase for setting up BlockNote editor and import custom code block into the editor.","styles":{}}],"children":[]},{"id":"9fc30544-76ea-437c-9382-107489b885ec","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Let's import all necessary components first. Since it is a client side component, you need to declare that it's client component at the top of the file.","styles":{}}],"children":[]},{"id":"ac6132b6-b8d3-406e-9deb-fd18c13027fe","type":"codeBlock","props":{"textColor":"default","textAlignment":"left","data":"// components/App.tsx\n\n\"use client\"\n\nimport {\n BlockNoteSchema,\n defaultBlockSpecs,\n filterSuggestionItems,\n insertOrUpdateBlock,\n} from \"@blocknote/core\";\nimport \"@blocknote/core/fonts/inter.css\";\nimport {\n SuggestionMenuController,\n getDefaultReactSlashMenuItems,\n useCreateBlockNote,\n} from \"@blocknote/react\";\nimport { BlockNoteView } from \"@blocknote/mantine\";\nimport \"@blocknote/mantine/style.css\";\n\nimport { Code } from \"./Code\";\nimport { Code as CodeIcon } from \"lucide-react\";\n\n...","language":"typescript"},"children":[]},{"id":"87f49cb9-cf71-4281-8078-06c9c9884578","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"38ea8abd-f803-4d4a-b1ec-f8193e47e034","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"We will then going to create schema for the block specs. We will use the default BlockNote's schema and extend with default schema with the code block.","styles":{}}],"children":[]},{"id":"623b08ac-4954-4943-b6a7-c21155b85244","type":"codeBlock","props":{"textColor":"default","textAlignment":"left","data":"...\n// Our schema with block specs, which contain the configs and implementations for blocks\n// that we want our editor to use.\nconst schema = BlockNoteSchema.create({\n blockSpecs: {\n // Adds all default blocks.\n ...defaultBlockSpecs,\n // Adds the Code block.\n codeBlock: Code,\n },\n});\n...","language":"typescript"},"children":[]},{"id":"dfe4a6e7-686d-46e4-bccd-1870d1e38d77","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"3b70e1c2-2b5e-436d-8e26-19815ec25a07","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"To make the Code block selectable through slash menu,","styles":{}}],"children":[]},{"id":"77fdbc45-88a8-45fc-8158-1f2bef69a332","type":"image","props":{"backgroundColor":"default","textAlignment":"center","name":"Screenshot 2024-10-07 at 7.46.03 PM.png","url":"https://blog-be.jaeung.com/posts/media/670472cc1587b9a584454024","caption":"","showPreview":true,"previewWidth":345},"children":[]},{"id":"f3ad728b-b9b6-46e9-b1e6-38c83de07990","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"4941c51e-a671-4e44-82db-807327ed92a7","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Let's create insertCodeBlock component and define the configuration for the block.","styles":{}}],"children":[]},{"id":"a3798a03-bb81-478a-8d91-51bf10d6ffe3","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The title is the text used with slash menu inside BlockNote. This allows the Code block to appear when you type /code.","styles":{}}],"children":[]},{"id":"0c82e5dd-d780-4402-9e64-6da752df954f","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"We are going to assign it into Others group as it's a custom block, and we are going to use the Code icon from Lucide-react package.","styles":{}}],"children":[]},{"id":"5141f6a5-c8fe-4f28-92e8-a38a83b6ddb3","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Additionally we are going to provide subtext which will be appeared below title to give more context on what this block do.","styles":{}}],"children":[]},{"id":"5b565e9a-c39c-4ccd-adec-44138cb251d0","type":"codeBlock","props":{"textColor":"default","textAlignment":"left","data":"...\n// Slash menu item to insert an Code block\nconst insertCodeBlock = (editor: typeof schema.BlockNoteEditor) => ({\n title: \"Code\",\n onItemClick: () => {\n insertOrUpdateBlock(editor, {\n type: \"codeBlock\",\n });\n },\n aliases: [\"code\"],\n group: \"Others\",\n icon: ,\n subtext: \"Insert a code block.\",\n});\n...","language":"typescript"},"children":[]},{"id":"6e73799e-fbc2-431a-8631-0501e52d9dfa","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"7528af09-ac9d-429b-970a-beb7f153d924","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Lastly, we are going to create the main App component for the BlockNote and return it so that we can import on other components to show the BlockNote editor.","styles":{}}],"children":[]},{"id":"dfe6da55-36ed-47c8-8773-6d7e44d6a86f","type":"codeBlock","props":{"textColor":"default","textAlignment":"left","data":"...\nexport default function App() {\n // Creates a new editor instance.\n const editor = useCreateBlockNote({\n schema,\n initialContent: [\n {\n type: \"paragraph\",\n content: \"Welcome to this demo!\",\n },\n {\n type: \"codeBlock\",\n props: {\n data: `// Your JavaScript code...\nconsole.log('Hello, world!');`,\n },\n },\n {\n type: \"paragraph\",\n content: \"Press the '/' key to open the Slash Menu and add another\",\n },\n {\n type: \"paragraph\",\n },\n ],\n });\n\n // Renders the editor instance.\n return (\n \n {/* Replaces the default Slash Menu. */}\n \n // Gets all default slash menu items and `insertCodeBlock` item.\n filterSuggestionItems(\n [...getDefaultReactSlashMenuItems(editor), insertCodeBlock(editor)],\n query\n )\n }\n />\n \n );\n}","language":"typescript"},"children":[]},{"id":"4e7b6609-b41d-46d5-9950-362e4f80238e","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"3722477f-7c1d-4a3b-9593-effee9c190fb","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If you finish until now and try running the code, you will see an error message. This is expected and the reason is because we have not implemented ","styles":{}},{"type":"text","text":"components/Code.tsx","styles":{"bold":true}},{"type":"text","text":" file. Let's go ahead and implement the Code.tsx file now.","styles":{}}],"children":[]},{"id":"b9434bb2-6625-4c96-b81e-b561495dd375","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"6c8c1a13-a7df-43f9-be0b-a63e61ca8025","type":"heading","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left","level":3},"content":[{"type":"text","text":"Code.tsx - Code Block extension for BlockNote","styles":{}}],"children":[]},{"id":"30977e13-f8ae-4999-8caf-c6977166bfd7","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This file is the main codebase for the Code block extension.","styles":{}}],"children":[]},{"id":"f304e526-1e0d-4cac-b710-71986a54bb31","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Here, we will use ","styles":{}},{"type":"text","text":"React CodeMirror","styles":{"bold":true}},{"type":"text","text":" package to create the code block while let BlockNote to manage the code block content.","styles":{}}],"children":[]},{"id":"bc34e922-4b56-4c02-b151-abec5f1448d4","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"additionally, we are going to create a drop down option to select which language to use for syntax highlighting.","styles":{}}],"children":[]},{"id":"b47a596c-f50c-485b-b363-b4c337f6a730","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"cb5161b1-4d67-412d-87c8-b20f3fb75518","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Let's import all the necessary components again on ","styles":{}},{"type":"text","text":"components/Code.tsx","styles":{"bold":true}},{"type":"text","text":" file.","styles":{}}],"children":[]},{"id":"8ae21f53-cc40-482a-b01e-8c1a7ba087cb","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This will be a client component as well so please include 'use client' at the top of the file.","styles":{}}],"children":[]},{"id":"ef983ffb-7c01-459f-87d0-eab36e01e0e1","type":"codeBlock","props":{"textColor":"default","textAlignment":"left","data":"// components/Code.tsx\n\n\"use client\";\n\nimport { useState } from \"react\";\nimport { ReactCustomBlockRenderProps } from \"@blocknote/react\";\nimport {\n defaultProps,\n PropSchema,\n BlockConfig,\n CustomBlockConfig,\n} from \"@blocknote/core\";\nimport { createReactBlockSpec } from \"@blocknote/react\";\nimport CodeMirror from \"@uiw/react-codemirror\";\nimport {\n langs,\n langNames,\n LanguageName,\n} from \"@uiw/codemirror-extensions-langs\";\nimport { material } from \"@uiw/codemirror-theme-material\";\nimport {\n CheckIcon,\n Group,\n Combobox,\n Input,\n InputBase,\n useCombobox,\n} from \"@mantine/core\";\nimport \"./styles.css\";\n...","language":"javascript"},"children":[]},{"id":"f7b1e219-5de2-43c8-8e3f-af65c47d8de0","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"9db9c094-f080-4725-b453-63c43c3e0971","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"We will now going to create the Code Block.","styles":{}}],"children":[]},{"id":"498c88e2-967a-49e6-9525-1d551e4c6012","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"We are going to call this ","styles":{}},{"type":"text","text":"codeBlock","styles":{"code":true}},{"type":"text","text":". This needs to match with the type above for ","styles":{}},{"type":"text","text":"insertCodeBlock","styles":{"code":true}},{"type":"text","text":" on ","styles":{}},{"type":"text","text":"components/App.tsx","styles":{"bold":true}},{"type":"text","text":" file. If you set it to something else other than ","styles":{}},{"type":"text","text":"codeBlock","styles":{"bold":true}},{"type":"text","text":", please make sure that they match.","styles":{}}],"children":[]},{"id":"499f2a05-7a94-4c29-9664-06bf703881ce","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"d064b7ca-e59b-45f0-9db5-b449800f8135","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"We are going to add two more props and keep track of it: data and language.","styles":{}}],"children":[]},{"id":"0362d886-9c99-4964-af02-ad229d9e410d","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"data - it will be used to keep track of the contents of the editor.","styles":{}}],"children":[]},{"id":"8d4409ae-8a66-4e5f-8b1c-e17b2f8faa75","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"language - it will keep track of the currently selected language. Let's set the default value be \"javascript,\" and all available languages can be found from \"","styles":{}},{"type":"text","text":"langNames","styles":{"bold":true}},{"type":"text","text":"\" from package \"@uiw/codemirror-extensions-langs\"","styles":{}}],"children":[]},{"id":"5c270180-baa1-46a8-88c7-f138a20347f9","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"8a108fc2-7c05-439a-a0d2-8e00768a9c21","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"I also imported 'material' theme from CodeMirror for the editor. If you want to change to different theme, you can find all available styles here:\n","styles":{}},{"type":"link","href":"https://uiwjs.github.io/react-codemirror/#/theme/data/dracula","content":[{"type":"text","text":"https://uiwjs.github.io/react-codemirror/#/theme/data/dracula","styles":{}}]}],"children":[]},{"id":"26d9e1b6-9e1a-4f39-851a-9fe675125212","type":"codeBlock","props":{"textColor":"default","textAlignment":"left","data":"...\nexport const Code = createReactBlockSpec(\n {\n type: \"codeBlock\",\n content: \"none\",\n propSchema: {\n textAlignment: defaultProps.textAlignment,\n textColor: defaultProps.textColor,\n data: {\n default: \"\",\n },\n language: {\n default: \"javascript\",\n },\n },\n },\n {\n render: (props) => {\n const { data } = props.block.props;\n const { language } = props.block.props;\n\n // event handler for input change\n const onInputChange = (val: string) => {\n props.editor.updateBlock(props.block, {\n props: {\n ...props.block.props,\n language: val,\n },\n });\n };\n\n return (\n // wrapper for Code block\n

\n {/* section to display currently selected language */}\n

\n {/* ---- Uncomment below later ---- */}\n {/* */}\n

\n\n {/* component to display code using Codemirror */}\n \n

\n );\n },\n }\n);\n","language":"typescript"},"children":[]},{"id":"fb1fa292-ced5-4ca5-87ec-30ba0ca0dfc9","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2c8c1251-4428-41e4-a310-78f0cf632529","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When you are done and run the project with ","styles":{}},{"type":"text","text":"npm run dev","styles":{"code":true}},{"type":"text","text":",","styles":{}}],"children":[]},{"id":"0fffcdd1-8e62-4dba-86f3-4aae223f2b84","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"you will be able to see it running on ","styles":{}},{"type":"text","text":"localhost:3000","styles":{"code":true}},{"type":"text","text":" (by default). with below screen.","styles":{}}],"children":[]},{"id":"34ffdd2c-1f0e-440b-b4c1-309adae0ec22","type":"image","props":{"backgroundColor":"default","textAlignment":"center","name":"Screenshot 2024-10-09 at 12.44.32 AM.png","url":"https://blog-be.jaeung.com/posts/media/67060a3a1587b9a584454026","caption":"","showPreview":true,"previewWidth":512},"children":[]},{"id":"7abc6c4e-d3a6-4074-9e89-8ed0e6aee5b2","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This editor seems fine to use, but there are some rooms to improve in terms of the styling. Before we go and add the feature to select style, let's go ahead and create ","styles":{}},{"type":"text","text":"styles.css","styles":{"bold":true}},{"type":"text","text":" file in the same directory. This file will contains rules on how the editor should be look to you.","styles":{}}],"children":[]},{"id":"7c79e859-aee3-4356-bd4d-99500e46906e","type":"codeBlock","props":{"textColor":"default","textAlignment":"left","data":"/* components/styles.css */\n\n.bn-block-content.ProseMirror-selectednode > *,\n.ProseMirror-selectednode > .bn-block-content > * {\n outline: none;\n border-radius: 8px;\n}\n\n.ProseMirror:not([contenteditable=\"true\"])\n .ProseMirror-selectednode\n > .bn-block-content\n > * {\n outline: none;\n}\n\n.cm-scroller {\n padding: 16px;\n}\n\n.ͼ1.cm-focused {\n outline: none;\n}\n\n.cm-content,\n.cm-gutter {\n display: flex !important;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n}\n\n.code-block {\n border-radius: 0.5rem;\n overflow: hidden;\n background-color: rgb(39 39 42);\n width: 100%;\n color: rgb(255 255 255);\n}\n\n.code-block-language-wrapper {\n display: flex;\n width: 100%;\n margin: 1rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.mantine-Combobox-dropdown {\n left: 70px !important;\n width: 160px !important;\n background-color: white !important;\n color: black;\n padding: 0 6px !important;\n border-radius: 4px !important;\n border: 1px solid rgb(223, 223, 223) !important;\n}\n\n.mantine-Combobox-option:hover {\n background-color: rgb(242, 242, 242);\n}\n\n.mantine-Combobox-input {\n color: rgb(160, 160, 160);\n margin-top: 4px;\n border-bottom: 1px solid rgb(223, 223, 223);\n}","language":"css"},"children":[]},{"id":"4d1fe067-8885-4ed7-b32a-de00b1cf9582","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2da8b759-6038-49cf-bcdc-957ea40363c8","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"If you add this file, you will be able to see that the editor's appearance has changed like below.","styles":{}}],"children":[]},{"id":"d44eddc2-41a6-4937-8fe1-08883da2a898","type":"image","props":{"backgroundColor":"default","textAlignment":"center","name":"Screenshot 2024-10-09 at 12.50.33 AM.png","url":"https://blog-be.jaeung.com/posts/media/67060ba71587b9a584454028","caption":"","showPreview":true,"previewWidth":1008},"children":[]},{"id":"2732de93-8ce3-4dcc-be7f-dc3a8fb2f21f","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"5b0a35f0-c56c-4d1f-ba8f-c7bd7bd31372","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The style looks better then before and we now need to add a feature to select, browse, and search which language to use for syntax highlighting.","styles":{}}],"children":[]},{"id":"222528d7-3505-42c7-ac0e-f2f3be61c524","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Since Mantine UI, the component UI library used for BlockNote, already comes with search drop down component, let's use this to list out the available language for syntax highlighting.","styles":{}}],"children":[]},{"id":"d6cfc86b-cb16-47e4-9332-81daa9187294","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"16492bbc-818e-4012-9628-ed28b25fdd6c","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The search drop down component keeps track of the selected value through React state. Since State cannot used inside BlockNote's render function, we need to create a new component and call this new component inside the render. that way the state can still be used for the component and we can safely use the component to list the available language.","styles":{}}],"children":[]},{"id":"de4bf8fa-392a-4ee3-9f60-637ebe23842a","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"ad4686db-399c-45c1-9c96-96281ab15af1","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Since this component will use the default value for the language and BlockNote need to capture any changes on the language, let's pass the props from BlockNote to this component. To do so, we need to create a type for the props since we are using typescript. we can get the props from BlockNote and we need to extend to add the two props, data and language.","styles":{}}],"children":[]},{"id":"7bfe65ff-0f9f-4426-9940-d2a3885a402b","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"48613f9f-375b-4053-8c3f-ea5bb907b48c","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"I placed below code between import statements and the Code editor component.","styles":{}}],"children":[]},{"id":"01cfb543-3f24-4e20-83d1-d6209da4f0d1","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"4d5c3e40-59dc-4769-9936-a7e3db357e4e","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The default value is set to the BlockNote's default value we set for ","styles":{}},{"type":"text","text":"language","styles":{"bold":true}},{"type":"text","text":", and we update the BlockNote's language when an event to change selected variabled is triggered.","styles":{}}],"children":[]},{"id":"79240c8d-2c71-4b4e-9ca6-aa6c402fbf43","type":"codeBlock","props":{"textColor":"default","textAlignment":"left","data":"...\n// // Custom block configuration\ntype CustomCodeBlockConfig = {\n type: string;\n readonly propSchema: {\n language: {\n default: string;\n };\n data: {\n default: string;\n };\n };\n content: \"none\";\n isSelectable?: boolean;\n isFileBlock: false;\n};\n\n// Dropdown search component for selecting language\n// export const SelectDropdownSearch = (props: any\nexport const SelectDropdownSearch = (\n props: Omit<\n ReactCustomBlockRenderProps,\n \"contentRef\"\n >\n) => {\n const [search, setSearch] = useState(\"\");\n const [value, setValue] = useState(props.block.props.language);\n\n const combobox = useCombobox({\n onDropdownClose: () => {\n combobox.resetSelectedOption();\n combobox.focusTarget();\n setSearch(\"\");\n },\n\n onDropdownOpen: () => {\n combobox.focusSearchInput();\n },\n });\n\n // options for the dropdown from CodeMirror language names\n const options = langNames\n .filter((item) => item.toLowerCase().includes(search.toLowerCase().trim()))\n .map((item) => (\n \n \n {item === value && }\n {item}\n \n \n ));\n\n return (\n {\n setValue(val);\n props.editor.updateBlock(props.block, {\n props: {\n ...props.block.props,\n language: val,\n },\n });\n combobox.closeDropdown();\n }}>\n \n }\n onClick={() => combobox.toggleDropdown()}\n rightSectionPointerEvents=\"none\">\n {value || Pick language}\n \n \n\n \n setSearch(event.currentTarget.value)}\n placeholder=\"Search language...\"\n />\n \n {options.length > 0 ? (\n options\n ) : (\n No language found.\n )}\n \n \n \n );\n};\n...","language":"typescript"},"children":[]},{"id":"fb81bd48-78cb-4b63-96c5-4956e7a5d920","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"0bbd890e-f997-48d9-a121-72fc83b19f91","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"After you add the selectDropDownSearch component, you won't see any changes on the editor. This is because I commented out the lines for this component on the editor. Let's scroll down to the ","styles":{}},{"type":"text","text":"Code","styles":{"bold":true}},{"type":"text","text":" component, and uncomment below code block and save for the effect to take place.","styles":{}}],"children":[]},{"id":"037f7e02-b9cd-41a9-92f4-a4dd1cdc8839","type":"codeBlock","props":{"textColor":"default","textAlignment":"left","data":"...\n {/* ---- Uncomment below later ---- */}\n {/* */}\n...","language":"typescript"},"children":[]},{"id":"bedf5550-917a-4cd4-b97d-66ce451b2119","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2bd91dfa-8649-4431-b41c-3f13af3de92a","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"After you successfully follow it all, you will see the working editor with language selecting for syntax highlighting as well.","styles":{}}],"children":[]},{"id":"8aed3fb8-3272-4611-b035-53dc87427377","type":"image","props":{"backgroundColor":"default","textAlignment":"center","name":"Screenshot 2024-10-09 at 1.21.23 AM.png","url":"https://blog-be.jaeung.com/posts/media/670612ff1587b9a584454029","caption":"","showPreview":true,"previewWidth":1045},"children":[]},{"id":"9e766d20-7e82-4457-b163-86c935ae34d1","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"4ade3a20-5644-4819-86d4-48dcbf635069","type":"heading","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left","level":1},"content":[{"type":"text","text":"Conclusion","styles":{}}],"children":[]},{"id":"09ab18ed-6e7f-431c-9597-5dc4e1d46294","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"By following the steps outlined in this post, you’ve successfully implemented the ","styles":{}},{"type":"text","text":"code block","styles":{"bold":true}},{"type":"text","text":" feature in BlockNote with syntax highlighting using codemirror. With the code block, you can display code snippets into your BlockNote based application, which is one of the crutial feature if the purpose of the app is to cover technical posts.\n\nStay tuned for the next post, where I’ll cover how to change the language for syntax highlighting.","styles":{}}],"children":[]},{"id":"c95d24c8-a245-43b9-9c48-d06cd124c69e","type":"paragraph","props":{"textColor":"default","backgroundColor":"default","textAlignment":"left"},"content":[],"children":[]}]