feat: custom styles and custom inline content

examples/editor/src/App.tsx → examples/editor/examples/Basic.tsx

@@ -1,16 +1,12 @@
-// import logo from './logo.svg'
-import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
 import "@blocknote/core/style.css";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
-import "./App.css";
+
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
 
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
 
-function App() {
+export function App() {
   const editor = useBlockNote({
-    onEditorContentChange: (editor) => {
-      console.log(editor.topLevelBlocks);
-    },
     domAttributes: {
       editor: {
         class: "editor",
@@ -23,7 +19,7 @@ function App() {
   // Give tests a way to get prosemirror instance
   (window as WindowWithProseMirror).ProseMirror = editor?._tiptapEditor;
 
-  return <BlockNoteView editor={editor} />;
+  return <BlockNoteView className="root" editor={editor} />;
 }
 
 export default App;

examples/editor/examples/Collaboration.tsx

@@ -0,0 +1,48 @@
+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";
+
+const doc = new Y.Doc();
+
+const provider = new YPartyKitProvider(
+  "blocknote-dev.yousefed.partykit.dev",
+  // use a unique name as a "room" for your application:
+  "your-project-name",
+  doc
+);
+
+type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
+
+export function App() {
+  const editor = useBlockNote({
+    domAttributes: {
+      editor: {
+        class: "editor",
+        "data-test": "editor",
+      },
+    },
+    collaboration: {
+      // The Yjs Provider responsible for transporting updates:
+      provider,
+      // Where to store BlockNote data in the Y.Doc:
+      fragment: doc.getXmlFragment("document-storesss"),
+      // Information (name and color) for this user:
+      user: {
+        name: "My Username",
+        color: "#ff0000",
+      },
+    },
+    uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
+  });
+
+  // Give tests a way to get prosemirror instance
+  (window as WindowWithProseMirror).ProseMirror = editor?._tiptapEditor;
+
+  return <BlockNoteView className="root" editor={editor} />;
+}
+
+export default App;

examples/editor/examples/ReactInlineContent.tsx

@@ -0,0 +1,90 @@
+import { defaultInlineContentSpecs } from "@blocknote/core";
+import "@blocknote/core/style.css";
+import {
+  BlockNoteView,
+  createReactInlineContentSpec,
+  useBlockNote,
+} from "@blocknote/react";
+
+type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
+
+const mention = createReactInlineContentSpec(
+  {
+    type: "mention",
+    propSchema: {
+      user: {
+        default: "",
+      },
+    },
+    content: "none",
+  },
+  {
+    render: (props) => {
+      return <span>@{props.inlineContent.props.user}</span>;
+    },
+  }
+);
+
+const tag = createReactInlineContentSpec(
+  {
+    type: "tag",
+    propSchema: {},
+    content: "styled",
+  },
+  {
+    render: (props) => {
+      return (
+        <span>
+          #<span ref={props.contentRef}></span>
+        </span>
+      );
+    },
+  }
+);
+
+export function ReactInlineContent() {
+  const editor = useBlockNote({
+    inlineContentSpecs: {
+      mention,
+      tag,
+      ...defaultInlineContentSpecs,
+    },
+    domAttributes: {
+      editor: {
+        class: "editor",
+        "data-test": "editor",
+      },
+    },
+    initialContent: [
+      {
+        type: "paragraph",
+        content: [
+          "I enjoy working with ",
+          {
+            type: "mention",
+            props: {
+              user: "Matthew",
+            },
+            content: undefined,
+          } as any,
+        ],
+      },
+      {
+        type: "paragraph",
+        content: [
+          "I love ",
+          {
+            type: "tag",
+            // props: {},
+            content: "BlockNote",
+          } as any,
+        ],
+      },
+    ],
+  });
+
+  // Give tests a way to get prosemirror instance
+  (window as WindowWithProseMirror).ProseMirror = editor?._tiptapEditor;
+
+  return <BlockNoteView className="root" editor={editor} />;
+}

examples/editor/examples/ReactStyles.tsx

@@ -0,0 +1,138 @@
+import "@blocknote/core/style.css";
+import {
+  BlockNoteView,
+  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(
+  {
+    type: "small",
+    propSchema: "boolean",
+  },
+  {
+    render: (props) => {
+      return <small ref={props.contentRef}></small>;
+    },
+  }
+);
+
+const fontSize = createReactStyleSpec(
+  {
+    type: "fontSize",
+    propSchema: "string",
+  },
+  {
+    render: (props) => {
+      return (
+        <span ref={props.contentRef} style={{ fontSize: props.value }}></span>
+      );
+    },
+  }
+);
+
+const customReactStyles = {
+  ...defaultStyleSpecs,
+  small,
+  fontSize,
+};
+
+type MyEditorType = BlockNoteEditor<
+  DefaultBlockSchema,
+  DefaultInlineContentSchema,
+  StyleSchemaFromSpecs<typeof customReactStyles>
+>;
+
+const CustomFormattingToolbar = (props: { editor: MyEditorType }) => {
+  const activeStyles = useActiveStyles(props.editor);
+
+  return (
+    <Toolbar>
+      <ToolbarButton
+        mainTooltip={"small"}
+        onClick={() => {
+          props.editor.toggleStyles({
+            small: true,
+          });
+        }}
+        isSelected={activeStyles.small}>
+        Small
+      </ToolbarButton>
+      <ToolbarButton
+        mainTooltip={"font size"}
+        onClick={() => {
+          props.editor.toggleStyles({
+            fontSize: "30px",
+          });
+        }}
+        isSelected={!!activeStyles.fontSize}>
+        Font size
+      </ToolbarButton>
+    </Toolbar>
+  );
+};
+
+export function ReactStyles() {
+  const editor = useBlockNote(
+    {
+      styleSpecs: customReactStyles,
+      onEditorContentChange: (editor) => {
+        console.log(editor.topLevelBlocks);
+      },
+      domAttributes: {
+        editor: {
+          class: "editor",
+          "data-test": "editor",
+        },
+      },
+      initialContent: [
+        {
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              text: "large text",
+              styles: {
+                fontSize: "30px",
+              },
+            },
+            {
+              type: "text",
+              text: "small text",
+              styles: {
+                small: true,
+              },
+            },
+          ],
+        },
+      ],
+    },
+    []
+  );
+
+  // Give tests a way to get prosemirror instance
+  (window as WindowWithProseMirror).ProseMirror = editor?._tiptapEditor;
+
+  return (
+    <BlockNoteView className="root" editor={editor}>
+      <FormattingToolbarPositioner
+        editor={editor}
+        formattingToolbar={CustomFormattingToolbar}
+      />
+    </BlockNoteView>
+  );
+}

examples/editor/package.json

@@ -11,8 +11,12 @@
   "dependencies": {
     "@blocknote/core": "^0.9.6",
     "@blocknote/react": "^0.9.6",
+    "@mantine/core": "^5.6.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.0",
+    "y-partykit": "^0.0.0-4c022c1",
+    "yjs": "^13.6.10"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",

examples/editor/src/App.css

@@ -2,3 +2,12 @@
   margin: 0 calc((100% - 731px) / 2);
   height: 100%;
 }
+
+body {
+  margin: 0;
+}
+
+.root {
+  height: 100%;
+  width: 100%;
+}