Playground vanilla styles & non-editable custom blocks (#438)

* Added playground for vanilla styles and added simple image block

* Fixed imports to make examples standalone

Author: matthewlipski

examples/editor/examples/basic/App.tsx

@@ -1,8 +1,7 @@
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
 import "@blocknote/core/style.css";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
-
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
 
 export function App() {

examples/editor/examples/collaboration/App.tsx

@@ -1,8 +1,7 @@
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
 import "@blocknote/core/style.css";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
-
 import YPartyKitProvider from "y-partykit/provider";
 import * as Y from "yjs";
 

examples/editor/examples/react-custom-blocks/App.tsx

@@ -5,6 +5,7 @@ import {
   createReactBlockSpec,
   useBlockNote,
 } from "@blocknote/react";
+import "../vanilla-custom-blocks/style.css";
 
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
 
@@ -48,14 +49,8 @@ export const alertBlock = createReactBlockSpec(
   {
     render: (props) => (
       <div
+        className={"alert"}
         style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          flexGrow: "1",
-          height: "48px",
-          padding: "4px",
-          maxWidth: "100%",
           backgroundColor: alertTypes[props.block.props.type].backgroundColor,
         }}>
         <select
@@ -72,12 +67,34 @@ export const alertBlock = createReactBlockSpec(
           <option value="info">{alertTypes["info"].icon}</option>
           <option value="success">{alertTypes["success"].icon}</option>
         </select>
-        <div style={{ flexGrow: 1 }} ref={props.contentRef} />
+        <div className={"inline-content"} ref={props.contentRef} />
       </div>
     ),
   }
 );
 
+const simpleImageBlock = createReactBlockSpec(
+  {
+    type: "simpleImage",
+    propSchema: {
+      src: {
+        default:
+          "https://www.pulsecarshalton.co.uk/wp-content/uploads/2016/08/jk-placeholder-image.jpg",
+      },
+    },
+    content: "none",
+  },
+  {
+    render: (props) => (
+      <img
+        className={"simple-image"}
+        src={props.block.props.src}
+        alt="placeholder"
+      />
+    ),
+  }
+);
+
 export const bracketsParagraphBlock = createReactBlockSpec(
   {
     type: "bracketsParagraph",
@@ -88,19 +105,10 @@ export const bracketsParagraphBlock = createReactBlockSpec(
   },
   {
     render: (props) => (
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          flexGrow: "1",
-          height: "48px",
-          padding: "4px",
-          maxWidth: "100%",
-        }}>
+      <div className={"brackets-paragraph"}>
         <div contentEditable={"false"}>{"["}</div>
         <span contentEditable={"false"}>{"{"}</span>
-        <div style={{ flexGrow: 1 }} ref={props.contentRef} />
+        <div className={"inline-content"} ref={props.contentRef} />
         <span contentEditable={"false"}>{"}"}</span>
         <div contentEditable={"false"}>{"]"}</div>
       </div>
@@ -119,6 +127,7 @@ export function ReactCustomBlocks() {
     blockSpecs: {
       ...defaultBlockSpecs,
       alert: alertBlock,
+      simpleImage: simpleImageBlock,
       bracketsParagraph: bracketsParagraphBlock,
     },
     initialContent: [
@@ -129,6 +138,12 @@ export function ReactCustomBlocks() {
         },
         content: "Alert",
       },
+      {
+        type: "simpleImage",
+        props: {
+          src: "https://t3.ftcdn.net/jpg/02/48/42/64/360_F_248426448_NVKLywWqArG2ADUxDq6QprtIzsF82dMF.jpg",
+        },
+      },
       {
         type: "bracketsParagraph",
         content: "Brackets Paragraph",

examples/editor/examples/react-custom-styles/App.tsx

@@ -1,22 +1,20 @@
+import {
+  BlockNoteEditor,
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  defaultStyleSpecs,
+} from "@blocknote/core";
 import "@blocknote/core/style.css";
 import {
   BlockNoteView,
+  createReactStyleSpec,
   FormattingToolbarPositioner,
   Toolbar,
   ToolbarButton,
-  createReactStyleSpec,
   useActiveStyles,
   useBlockNote,
 } from "@blocknote/react";
 
-import {
-  BlockNoteEditor,
-  DefaultBlockSchema,
-  DefaultInlineContentSchema,
-  StyleSchemaFromSpecs,
-  defaultStyleSpecs,
-} from "@blocknote/core";
-
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
 
 const small = createReactStyleSpec(
@@ -45,16 +43,13 @@ const fontSize = createReactStyleSpec(
   }
 );
 
-const customReactStyles = {
-  ...defaultStyleSpecs,
-  small,
-  fontSize,
-};
-
 type MyEditorType = BlockNoteEditor<
   DefaultBlockSchema,
   DefaultInlineContentSchema,
-  StyleSchemaFromSpecs<typeof customReactStyles>
+  {
+    small: (typeof small)["config"];
+    fontSize: (typeof fontSize)["config"];
+  }
 >;
 
 const CustomFormattingToolbar = (props: { editor: MyEditorType }) => {
@@ -86,6 +81,12 @@ const CustomFormattingToolbar = (props: { editor: MyEditorType }) => {
   );
 };
 
+const customReactStyles = {
+  ...defaultStyleSpecs,
+  small,
+  fontSize,
+};
+
 export function ReactStyles() {
   const editor = useBlockNote(
     {

examples/editor/examples/vanilla-custom-blocks/App.tsx

@@ -5,6 +5,7 @@ import {
 } from "@blocknote/core";
 import "@blocknote/core/style.css";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import "./style.css";
 
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
 
@@ -48,9 +49,7 @@ const alertBlock = createBlockSpec(
   {
     render: (block, editor) => {
       const alert = document.createElement("div");
-      Object.entries(alertStyles).forEach(([key, value]) => {
-        alert.style[key as any] = value;
-      });
+      alert.className = "alert";
       alert.style.backgroundColor =
         alertTypes[block.props.type].backgroundColor;
 
@@ -110,16 +109,30 @@ const alertBlock = createBlockSpec(
   }
 );
 
-// TODO: use CSS?
-const alertStyles = {
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  flexGrow: "1",
-  height: "48px",
-  padding: "4px",
-  maxWidth: "100%",
-};
+const simpleImageBlock = createBlockSpec(
+  {
+    type: "simpleImage",
+    propSchema: {
+      src: {
+        default:
+          "https://www.pulsecarshalton.co.uk/wp-content/uploads/2016/08/jk-placeholder-image.jpg",
+      },
+    },
+    content: "none",
+  },
+  {
+    render: (block) => {
+      const image = document.createElement("img");
+      image.className = "simple-image";
+      image.src = block.props.src;
+      image.alt = "placeholder";
+
+      return {
+        dom: image,
+      };
+    },
+  }
+);
 
 const bracketsParagraphBlock = createBlockSpec(
   {
@@ -132,9 +145,7 @@ const bracketsParagraphBlock = createBlockSpec(
   {
     render: () => {
       const bracketsParagraph = document.createElement("div");
-      Object.entries(bracketsParagraphStyles).forEach(([key, value]) => {
-        bracketsParagraph.style[key as any] = value;
-      });
+      bracketsParagraph.className = "brackets-paragraph";
 
       const leftBracket = document.createElement("div");
       leftBracket.contentEditable = "false";
@@ -146,7 +157,7 @@ const bracketsParagraphBlock = createBlockSpec(
       bracketsParagraph.appendChild(leftCurlyBracket);
 
       const inlineContent = document.createElement("div");
-      inlineContent.style.flexGrow = "1";
+      inlineContent.className = "inline-content";
 
       bracketsParagraph.appendChild(inlineContent);
 
@@ -167,17 +178,6 @@ const bracketsParagraphBlock = createBlockSpec(
   }
 );
 
-// TODO: use CSS
-const bracketsParagraphStyles = {
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  flexGrow: "1",
-  height: "48px",
-  padding: "4px",
-  maxWidth: "100%",
-};
-
 export function CustomBlocks() {
   const editor = useBlockNote({
     domAttributes: {
@@ -190,6 +190,7 @@ export function CustomBlocks() {
       ...defaultBlockSpecs,
       alert: alertBlock,
       bracketsParagraph: bracketsParagraphBlock,
+      simpleImage: simpleImageBlock,
     },
     initialContent: [
       {
@@ -199,6 +200,12 @@ export function CustomBlocks() {
         },
         content: ["Alert"],
       },
+      {
+        type: "simpleImage",
+        props: {
+          src: "https://t3.ftcdn.net/jpg/02/48/42/64/360_F_248426448_NVKLywWqArG2ADUxDq6QprtIzsF82dMF.jpg",
+        },
+      },
       {
         type: "bracketsParagraph",
         content: "Brackets Paragraph",

examples/editor/examples/vanilla-custom-blocks/style.css

@@ -0,0 +1,17 @@
+.alert, .brackets-paragraph {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-grow: 1;
+    height: 48px;
+    padding: 4px;
+    max-width: 100%;
+}
+
+.simple-image {
+    width: 100%;
+}
+
+.inline-content {
+    flex-grow: 1;
+}