Fix Editor Build + Styling Tweaks (#742)

Co-authored-by: Alder Whiteford <[email protected]>

frontend/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@generatesac/lib",
-    "version": "1.0.52",
+    "version": "1.0.53",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",
     "files": [
@@ -15,7 +15,8 @@
         "test": "echo \"Woah there, we have no frontend tests as of right now. Let's just say we're passing.\" && exit 0",
         "lint": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
         "format": "prettier --write .",
-        "build": "rimraf dist && tsc",
+        "clean": "rimraf dist",
+        "build": "yarn clean && tsc",
         "watch": "tsc --watch"
     },
     "dependencies": {
@@ -27,17 +28,23 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.1.0",
+        "react-redux": "^9.1.2",
+        "rollup-plugin-typescript2": "^0.36.0",
         "zod": "^3.23.4"
     },
     "devDependencies": {
+        "@babel/core": "^7.24.5",
         "@trivago/prettier-plugin-sort-imports": "^4.3.0",
         "@types/react": "^18",
         "eslint-plugin-prettier": "^5.1.3",
-        "postcss": "^8.4.38",
         "prettier": "^3.2.4",
         "rimraf": "^5.0.5",
+        "tslib": "^2.6.2",
         "typescript": "^5.4.5"
     },
+    "peerDependencies": {
+        "react": "^18.3.1"
+    },
     "publishConfig": {
         "@generatesac:registry": "https://npm.pkg.github.com"
     }

frontend/lib/src/components/RichTextEditor/BlockNote.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Dispatch, SetStateAction } from 'react';
 
 import { PartialBlock } from '@blocknote/core';
@@ -8,7 +6,8 @@ import { BlockNoteView, useCreateBlockNote } from '@blocknote/react';
 import { EditorFonts, editorFonts, schema } from './config/config';
 import SideBarMenu from './elements/SideBarMenu';
 import SuggestionMenu from './elements/SuggestionMenu';
-import './styles/BlockNote.styles.css';
+import "@blocknote/react/style.css";
+import FormattingToolbar from './elements/FormattingToolbar';
 
 type EditorProps = {
     description: PartialBlock[];
@@ -39,7 +38,6 @@ export default function Editor({
 
     // Save the content to state on any change:
     function onChange() {
-        console.log(editor.document);
         const content: any = editor.document;
         setDescription(content as Record<string, string>);
     }
@@ -59,9 +57,11 @@ export default function Editor({
                 theme={editorFonts[fontFamily]}
                 slashMenu={false}
                 sideMenu={false}
+                formattingToolbar={false}
             >
                 <SuggestionMenu editor={editor} />
                 <SideBarMenu />
+                <FormattingToolbar />
             </BlockNoteView>
         </div>
     );

frontend/lib/src/components/RichTextEditor/elements/FormattingToolbar.tsx

@@ -0,0 +1,69 @@
+import {
+    BasicTextStyleButton,
+    BlockTypeSelect,
+    CreateLinkButton,
+    FormattingToolbar as Toolbar,
+    FormattingToolbarController,
+    ImageCaptionButton,
+    ReplaceImageButton,
+    blockTypeSelectItems,
+  } from "@blocknote/react";
+import { LuHeading } from "react-icons/lu";
+
+export default function FormattingToolbar() {
+    const suggestionItems = () => {
+        const itemsToRemove = [
+            'Image',
+            'Heading 1',
+            'Heading 2',
+            'Table'
+        ];
+        const filteredSlashMenuItems = blockTypeSelectItems.filter((item) => {
+            if (item.name === 'Heading 3') {
+                item.name = 'Heading';
+                item.icon = LuHeading;
+            }
+
+            return !itemsToRemove.includes(item.name);
+        });
+
+        return filteredSlashMenuItems;
+    };
+
+    return (
+        <FormattingToolbarController
+            formattingToolbar={() => (
+                <Toolbar>
+                    <BlockTypeSelect key={"blockTypeSelect"} items={suggestionItems()} />
+
+                    <ImageCaptionButton key={"imageCaptionButton"} />
+                    <ReplaceImageButton key={"replaceImageButton"} />
+
+                    <BasicTextStyleButton
+                        basicTextStyle={"bold"}
+                        key={"boldStyleButton"}
+                    />
+                    <BasicTextStyleButton
+                        basicTextStyle={"italic"}
+                        key={"italicStyleButton"}
+                    />
+                    <BasicTextStyleButton
+                        basicTextStyle={"underline"}
+                        key={"underlineStyleButton"}
+                    />
+                    <BasicTextStyleButton
+                        basicTextStyle={"strike"}
+                        key={"strikeStyleButton"}
+                    />
+                    {/* Extra button to toggle code styles */}
+                    <BasicTextStyleButton
+                        key={"codeStyleButton"}
+                        basicTextStyle={"code"}
+                    />
+
+                    <CreateLinkButton key={"createLinkButton"} />
+                </Toolbar>
+            )}
+        />
+    );
+}

frontend/lib/src/components/RichTextEditor/elements/RemoveBlockButton.tsx

@@ -7,7 +7,7 @@ import {
 } from '@blocknote/react';
 
 // Custom Side Menu button to remove the hovered block.
-export function RemoveBlockButton(props: SideMenuProps) {
+export default function RemoveBlockButton(props: SideMenuProps) {
     const editor = useBlockNoteEditor();
 
     return (

frontend/lib/src/components/RichTextEditor/elements/SideBarMenu.tsx

@@ -3,8 +3,8 @@ import {
     SideMenu,
     SideMenuController
 } from '@blocknote/react';
+import RemoveBlockButton from './RemoveBlockButton';
 
-import { RemoveBlockButton } from './RemoveBlockButton';
 
 export default function SideBarMenu() {
     return (