Skip to content

Commit b2d2df9

Browse files
matthewlipskimatthewlipski
committed
Small fixes
1 parent 5481ed2 commit b2d2df9

File tree

3 files changed

+98
-104
lines changed

3 files changed

+98
-104
lines changed

‎examples/03-ui-components/03-formatting-toolbar-block-type-items/src/App.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,6 @@ export default function App() {
6666
name: "Alert",
6767
type: "alert",
6868
icon: RiAlertFill,
69-
isSelected: (block) => block.type === "alert",
7069
} satisfies BlockTypeSelectItem,
7170
]}
7271
/>

‎examples/03-ui-components/13-custom-ui/src/MUIFormattingToolbar.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -129,9 +129,16 @@ function MUIBlockTypeSelect() {
129129
// Gets the selected item.
130130
const selectedItem = useMemo(
131131
() =>
132-
defaultBlockTypeSelectItems.find((item) =>
133-
item.isSelected(block as any),
134-
)!,
132+
defaultBlockTypeSelectItems.find((item) => {
133+
const typesMatch = item.type === block.type;
134+
const propsMatch =
135+
Object.entries(item.props || {}).filter(
136+
([propName, propValue]) =>
137+
propValue !== (block as any).props[propName],
138+
).length === 0;
139+
140+
return typesMatch && propsMatch;
141+
})!,
135142
[defaultBlockTypeSelectItems, block],
136143
);
137144

‎packages/react/src/components/FormattingToolbar/DefaultSelects/BlockTypeSelect.tsx‎

Lines changed: 88 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -36,106 +36,94 @@ export type BlockTypeSelectItem = {
3636
icon: IconType;
3737
};
3838

39-
const headingLevelIcons: Record<any, IconType> = {
40-
1: RiH1,
41-
2: RiH2,
42-
3: RiH3,
43-
4: RiH4,
44-
5: RiH5,
45-
6: RiH6,
46-
};
47-
48-
export function getDefaultBlockTypeSelectItems<
49-
BSchema extends BlockSchema,
50-
I extends InlineContentSchema,
51-
S extends StyleSchema,
52-
>(editor: BlockNoteEditor<BSchema, I, S>) {
53-
const items: BlockTypeSelectItem[] = [];
54-
55-
if (editorHasBlockWithType(editor, "paragraph")) {
56-
items.push({
57-
name: editor.dictionary.slash_menu.paragraph.title,
58-
type: "paragraph",
59-
icon: RiText,
60-
});
61-
}
62-
63-
if (editorHasBlockWithType(editor, "heading", { level: "number" })) {
64-
(
65-
editor.schema.blockSchema.heading.propSchema.level.values || [1, 2, 3]
66-
).forEach((level) => {
67-
items.push({
68-
name: editor.dictionary.slash_menu[
69-
// TODO: This should be cleaned up, heading level 1 has no "_1"
70-
// suffix which makes this more complicated than necessary.
71-
`heading${level === 1 ? "" : "_" + level}` as keyof typeof editor.dictionary.slash_menu
72-
].title,
73-
type: "heading",
74-
props: { level, isToggleable: false },
75-
icon: headingLevelIcons[level],
76-
});
77-
});
78-
}
79-
80-
if (
81-
editorHasBlockWithType(editor, "heading", {
82-
level: "number",
83-
isToggleable: "boolean",
84-
})
85-
) {
86-
(editor.schema.blockSchema.heading.propSchema.level.values || [1, 2, 3])
87-
.filter((level) => level <= 3)
88-
.forEach((level) => {
89-
items.push({
90-
name: editor.dictionary.slash_menu[
91-
`toggle_heading${level === 1 ? "" : "_" + level}` as keyof typeof editor.dictionary.slash_menu
92-
].title,
93-
type: "heading",
94-
props: { level, isToggleable: true },
95-
icon: headingLevelIcons[level],
96-
});
97-
});
98-
}
99-
100-
if (editorHasBlockWithType(editor, "quote")) {
101-
items.push({
102-
name: editor.dictionary.slash_menu.quote.title,
103-
type: "quote",
104-
icon: RiQuoteText,
105-
});
106-
}
107-
108-
if (editorHasBlockWithType(editor, "toggleListItem")) {
109-
items.push({
110-
name: editor.dictionary.slash_menu.toggle_list.title,
111-
type: "toggleListItem",
112-
icon: RiPlayList2Fill,
113-
});
114-
}
115-
if (editorHasBlockWithType(editor, "bulletListItem")) {
116-
items.push({
117-
name: editor.dictionary.slash_menu.bullet_list.title,
118-
type: "bulletListItem",
119-
icon: RiListUnordered,
120-
});
121-
}
122-
if (editorHasBlockWithType(editor, "numberedListItem")) {
123-
items.push({
124-
name: editor.dictionary.slash_menu.numbered_list.title,
125-
type: "numberedListItem",
126-
icon: RiListOrdered,
127-
});
128-
}
129-
if (editorHasBlockWithType(editor, "checkListItem")) {
130-
items.push({
131-
name: editor.dictionary.slash_menu.check_list.title,
132-
type: "checkListItem",
133-
icon: RiListCheck3,
134-
});
135-
}
136-
137-
return items;
138-
}
39+
export const getDefaultBlockTypeSelectItems = (
40+
editor: BlockNoteEditor<any, any, any>,
41+
): BlockTypeSelectItem[] => [
42+
{
43+
name: editor.dictionary.slash_menu.paragraph.title,
44+
type: "paragraph",
45+
icon: RiText,
46+
},
47+
{
48+
name: editor.dictionary.slash_menu.heading.title,
49+
type: "heading",
50+
props: { level: 1, isToggleable: false },
51+
icon: RiH1,
52+
},
53+
{
54+
name: editor.dictionary.slash_menu.heading_2.title,
55+
type: "heading",
56+
props: { level: 2, isToggleable: false },
57+
icon: RiH2,
58+
},
59+
{
60+
name: editor.dictionary.slash_menu.heading_3.title,
61+
type: "heading",
62+
props: { level: 3, isToggleable: false },
63+
icon: RiH3,
64+
},
65+
{
66+
name: editor.dictionary.slash_menu.heading_4.title,
67+
type: "heading",
68+
props: { level: 4, isToggleable: false },
69+
icon: RiH4,
70+
},
71+
{
72+
name: editor.dictionary.slash_menu.heading_5.title,
73+
type: "heading",
74+
props: { level: 5, isToggleable: false },
75+
icon: RiH5,
76+
},
77+
{
78+
name: editor.dictionary.slash_menu.heading_6.title,
79+
type: "heading",
80+
props: { level: 6, isToggleable: false },
81+
icon: RiH6,
82+
},
83+
{
84+
name: editor.dictionary.slash_menu.toggle_heading.title,
85+
type: "heading",
86+
props: { level: 1, isToggleable: true },
87+
icon: RiH1,
88+
},
89+
{
90+
name: editor.dictionary.slash_menu.toggle_heading_2.title,
91+
type: "heading",
92+
props: { level: 2, isToggleable: true },
93+
icon: RiH2,
94+
},
95+
{
96+
name: editor.dictionary.slash_menu.toggle_heading_3.title,
97+
type: "heading",
98+
props: { level: 3, isToggleable: true },
99+
icon: RiH3,
100+
},
101+
{
102+
name: editor.dictionary.slash_menu.quote.title,
103+
type: "quote",
104+
icon: RiQuoteText,
105+
},
106+
{
107+
name: editor.dictionary.slash_menu.toggle_list.title,
108+
type: "toggleListItem",
109+
icon: RiPlayList2Fill,
110+
},
111+
{
112+
name: editor.dictionary.slash_menu.bullet_list.title,
113+
type: "bulletListItem",
114+
icon: RiListUnordered,
115+
},
116+
{
117+
name: editor.dictionary.slash_menu.numbered_list.title,
118+
type: "numberedListItem",
119+
icon: RiListOrdered,
120+
},
121+
{
122+
name: editor.dictionary.slash_menu.check_list.title,
123+
type: "checkListItem",
124+
icon: RiListCheck3,
125+
},
126+
];
139127

140128
export const BlockTypeSelect = (props: { items?: BlockTypeSelectItem[] }) => {
141129
const Components = useComponentsContext()!;

0 commit comments

Comments
 (0)