Finished formatting toolbar customization with old props

Author: matthewlipski

packages/react/src/FormattingToolbar/components/DefaultButtons/BlockIndentButtons.tsx

@@ -0,0 +1,37 @@
+import { formatKeyboardShortcut } from "../../../utils";
+import { RiIndentDecrease, RiIndentIncrease } from "react-icons/ri";
+import { ToolbarButton } from "../../../SharedComponents/Toolbar/components/ToolbarButton";
+
+export type IncreaseBlockIndentButtonProps = {
+  canIncreaseBlockIndent: boolean;
+  increaseBlockIndent: () => void;
+};
+
+export type DecreaseBlockIndentButtonProps = {
+  canDecreaseBlockIndent: boolean;
+  decreaseBlockIndent: () => void;
+};
+
+export const IncreaseBlockIndentButton = (
+  props: IncreaseBlockIndentButtonProps
+) => (
+  <ToolbarButton
+    onClick={props.increaseBlockIndent}
+    isDisabled={!props.canIncreaseBlockIndent}
+    mainTooltip="Indent"
+    secondaryTooltip={formatKeyboardShortcut("Tab")}
+    icon={RiIndentIncrease}
+  />
+);
+
+export const DecreaseBlockIndentButton = (
+  props: DecreaseBlockIndentButtonProps
+) => (
+  <ToolbarButton
+    onClick={props.decreaseBlockIndent}
+    isDisabled={!props.canDecreaseBlockIndent}
+    mainTooltip="Decrease Indent"
+    secondaryTooltip={formatKeyboardShortcut("Shift+Tab")}
+    icon={RiIndentDecrease}
+  />
+);

packages/react/src/FormattingToolbar/components/DefaultButtons/CreateHyperlinkButton.tsx

@@ -0,0 +1,23 @@
+import { formatKeyboardShortcut } from "../../../utils";
+import { RiLink } from "react-icons/ri";
+import LinkToolbarButton from "../LinkToolbarButton";
+
+export type CreateHyperlinkButtonProps = {
+  hyperlinkIsActive: boolean;
+  activeHyperlinkUrl: string;
+  activeHyperlinkText: string;
+  setHyperlink: (url: string, text?: string) => void;
+};
+
+export const CreateHyperlinkButton = (props: CreateHyperlinkButtonProps) => (
+  <LinkToolbarButton
+    isSelected={props.hyperlinkIsActive}
+    mainTooltip="Link"
+    secondaryTooltip={formatKeyboardShortcut("Mod+K")}
+    icon={RiLink}
+    hyperlinkIsActive={props.hyperlinkIsActive}
+    activeHyperlinkUrl={props.activeHyperlinkUrl}
+    activeHyperlinkText={props.activeHyperlinkText}
+    setHyperlink={props.setHyperlink}
+  />
+);

packages/react/src/FormattingToolbar/components/DefaultButtons/FontStyleButtons.tsx

@@ -0,0 +1,63 @@
+import { ToolbarButton } from "../../../SharedComponents/Toolbar/components/ToolbarButton";
+import { formatKeyboardShortcut } from "../../../utils";
+import { RiBold, RiItalic, RiStrikethrough, RiUnderline } from "react-icons/ri";
+
+export type ToggleBoldButtonProps = {
+  boldIsActive: boolean;
+  toggleBold: () => void;
+};
+
+export type ToggleItalicButtonProps = {
+  italicIsActive: boolean;
+  toggleItalic: () => void;
+};
+
+export type ToggleUnderlineButtonProps = {
+  underlineIsActive: boolean;
+  toggleUnderline: () => void;
+};
+
+export type ToggleStrikeButtonProps = {
+  strikeIsActive: boolean;
+  toggleStrike: () => void;
+};
+
+export const ToggleBoldButton = (props: ToggleBoldButtonProps) => (
+  <ToolbarButton
+    onClick={props.toggleBold}
+    isSelected={props.boldIsActive}
+    mainTooltip="Bold"
+    secondaryTooltip={formatKeyboardShortcut("Mod+B")}
+    icon={RiBold}
+  />
+);
+
+export const ToggleItalicButton = (props: ToggleItalicButtonProps) => (
+  <ToolbarButton
+    onClick={props.toggleItalic}
+    isSelected={props.italicIsActive}
+    mainTooltip="Italic"
+    secondaryTooltip={formatKeyboardShortcut("Mod+I")}
+    icon={RiItalic}
+  />
+);
+
+export const ToggleUnderlineButton = (props: ToggleUnderlineButtonProps) => (
+  <ToolbarButton
+    onClick={props.toggleUnderline}
+    isSelected={props.underlineIsActive}
+    mainTooltip="Underline"
+    secondaryTooltip={formatKeyboardShortcut("Mod+U")}
+    icon={RiUnderline}
+  />
+);
+
+export const ToggleStrikethroughButton = (props: ToggleStrikeButtonProps) => (
+  <ToolbarButton
+    onClick={props.toggleStrike}
+    isSelected={props.strikeIsActive}
+    mainTooltip="Strikethrough"
+    secondaryTooltip={formatKeyboardShortcut("Mod+Shift+X")}
+    icon={RiStrikethrough}
+  />
+);

packages/react/src/FormattingToolbar/components/DefaultButtons/SetColorsButton.tsx

@@ -0,0 +1,36 @@
+import { Menu } from "@mantine/core";
+import { ToolbarButton } from "../../../SharedComponents/Toolbar/components/ToolbarButton";
+import { ColorIcon } from "../../../SharedComponents/ColorPicker/components/ColorIcon";
+import { ColorPicker } from "../../../SharedComponents/ColorPicker/components/ColorPicker";
+
+export type ColorsButtonProps = {
+  textColor: string;
+  setTextColor: (color: string) => void;
+  backgroundColor: string;
+  setBackgroundColor: (color: string) => void;
+};
+
+export const SetColorsButton = (props: ColorsButtonProps) => (
+  <Menu>
+    <Menu.Target>
+      <ToolbarButton
+        mainTooltip={"Colors"}
+        icon={() => (
+          <ColorIcon
+            textColor={props.textColor}
+            backgroundColor={props.backgroundColor}
+            size={20}
+          />
+        )}
+      />
+    </Menu.Target>
+    <Menu.Dropdown>
+      <ColorPicker
+        textColor={props.textColor}
+        setTextColor={props.setTextColor}
+        backgroundColor={props.backgroundColor}
+        setBackgroundColor={props.setBackgroundColor}
+      />
+    </Menu.Dropdown>
+  </Menu>
+);

packages/react/src/FormattingToolbar/components/DefaultButtons/TextAlignButtons.tsx

@@ -0,0 +1,36 @@
+import { RiAlignCenter, RiAlignLeft, RiAlignRight } from "react-icons/ri";
+import { ToolbarButton } from "../../../SharedComponents/Toolbar/components/ToolbarButton";
+
+export type TextAlignButtonProps = {
+  textAlignment: "left" | "center" | "right" | "justify";
+  setTextAlignment: (
+    textAlignment: "left" | "center" | "right" | "justify"
+  ) => void;
+};
+
+export const TextAlignLeftButton = (props: TextAlignButtonProps) => (
+  <ToolbarButton
+    onClick={() => props.setTextAlignment("left")}
+    isSelected={props.textAlignment === "left"}
+    mainTooltip={"Align Text Left"}
+    icon={RiAlignLeft}
+  />
+);
+
+export const TextAlignCenterButton = (props: TextAlignButtonProps) => (
+  <ToolbarButton
+    onClick={() => props.setTextAlignment("center")}
+    isSelected={props.textAlignment === "center"}
+    mainTooltip={"Align Text Center"}
+    icon={RiAlignCenter}
+  />
+);
+
+export const TextAlignRightButton = (props: TextAlignButtonProps) => (
+  <ToolbarButton
+    onClick={() => props.setTextAlignment("right")}
+    isSelected={props.textAlignment === "right"}
+    mainTooltip={"Align Text Right"}
+    icon={RiAlignRight}
+  />
+);

packages/react/src/FormattingToolbar/components/DefaultDropdowns/BlockTypeDropdown.tsx

@@ -0,0 +1,85 @@
+import { Block, PartialBlock } from "@blocknote/core";
+import {
+  RiH1,
+  RiH2,
+  RiH3,
+  RiListOrdered,
+  RiListUnordered,
+  RiText,
+} from "react-icons/ri";
+import { ToolbarDropdown } from "../../../SharedComponents/Toolbar/components/ToolbarDropdown";
+
+export type BlockTypeDropdownProps = {
+  block: Block;
+  updateBlock: (updatedBlock: PartialBlock) => void;
+};
+
+export const BlockTypeDropdown = (props: BlockTypeDropdownProps) => (
+  <ToolbarDropdown
+    items={[
+      {
+        onClick: () =>
+          props.updateBlock({
+            type: "paragraph",
+            props: {},
+          }),
+        text: "Paragraph",
+        icon: RiText,
+        isSelected: props.block.type === "paragraph",
+      },
+      {
+        onClick: () =>
+          props.updateBlock({
+            type: "heading",
+            props: { level: "1" },
+          }),
+        text: "Heading 1",
+        icon: RiH1,
+        isSelected:
+          props.block.type === "heading" && props.block.props.level === "1",
+      },
+      {
+        onClick: () =>
+          props.updateBlock({
+            type: "heading",
+            props: { level: "2" },
+          }),
+        text: "Heading 2",
+        icon: RiH2,
+        isSelected:
+          props.block.type === "heading" && props.block.props.level === "2",
+      },
+      {
+        onClick: () =>
+          props.updateBlock({
+            type: "heading",
+            props: { level: "3" },
+          }),
+        text: "Heading 3",
+        icon: RiH3,
+        isSelected:
+          props.block.type === "heading" && props.block.props.level === "3",
+      },
+      {
+        onClick: () =>
+          props.updateBlock({
+            type: "bulletListItem",
+            props: {},
+          }),
+        text: "Bullet List",
+        icon: RiListUnordered,
+        isSelected: props.block.type === "bulletListItem",
+      },
+      {
+        onClick: () =>
+          props.updateBlock({
+            type: "numberedListItem",
+            props: {},
+          }),
+        text: "Numbered List",
+        icon: RiListOrdered,
+        isSelected: props.block.type === "numberedListItem",
+      },
+    ]}
+  />
+);