@blocknote/core 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/blocknote.js +3453 -2421
- package/dist/blocknote.js.map +1 -1
- package/dist/blocknote.umd.cjs +35 -71
- package/dist/blocknote.umd.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +7 -6
- package/src/BlockNoteTheme.ts +150 -0
- package/src/extensions/Blocks/BlockAttributes.ts +12 -0
- package/src/extensions/Blocks/MultipleNodeSelection.ts +87 -0
- package/src/extensions/Blocks/PreviousBlockTypePlugin.ts +8 -2
- package/src/extensions/Blocks/nodes/Block.module.css +37 -37
- package/src/extensions/Blocks/nodes/Block.ts +77 -32
- package/src/extensions/Blocks/nodes/BlockGroup.ts +18 -1
- package/src/extensions/Blocks/nodes/Content.ts +14 -1
- package/src/extensions/BubbleMenu/BubbleMenuExtension.tsx +8 -1
- package/src/extensions/BubbleMenu/component/BubbleMenu.tsx +116 -88
- package/src/extensions/BubbleMenu/component/LinkToolbarButton.tsx +8 -8
- package/src/extensions/DraggableBlocks/DraggableBlocksPlugin.tsx +143 -33
- package/src/extensions/DraggableBlocks/components/DragHandle.tsx +14 -19
- package/src/extensions/DraggableBlocks/components/DragHandleMenu.tsx +8 -7
- package/src/extensions/Hyperlinks/HyperlinkMenuPlugin.tsx +31 -66
- package/src/extensions/Hyperlinks/menus/EditHyperlinkMenu.tsx +44 -0
- package/src/extensions/Hyperlinks/menus/EditHyperlinkMenuItem.tsx +34 -0
- package/src/extensions/Hyperlinks/menus/EditHyperlinkMenuItemIcon.tsx +31 -0
- package/src/extensions/Hyperlinks/menus/EditHyperlinkMenuItemInput.tsx +40 -0
- package/src/extensions/Hyperlinks/menus/HoverHyperlinkMenu.tsx +37 -0
- package/src/extensions/Hyperlinks/menus/HyperlinkMenu.tsx +63 -0
- package/src/extensions/SlashMenu/SlashMenuItem.ts +3 -1
- package/src/extensions/SlashMenu/defaultCommands.tsx +4 -4
- package/src/shared/components/toolbar/Toolbar.tsx +8 -3
- package/src/shared/components/toolbar/ToolbarButton.tsx +57 -0
- package/src/shared/components/toolbar/ToolbarDropdown.tsx +35 -0
- package/src/shared/components/toolbar/ToolbarDropdownItem.tsx +35 -0
- package/src/shared/components/toolbar/ToolbarDropdownTarget.tsx +31 -0
- package/src/shared/plugins/suggestion/SuggestionItem.ts +3 -1
- package/src/shared/plugins/suggestion/{SuggestionListReactRenderer.ts → SuggestionListReactRenderer.tsx} +13 -4
- package/src/shared/plugins/suggestion/components/SuggestionGroup.tsx +6 -93
- package/src/shared/plugins/suggestion/components/SuggestionGroupItem.tsx +82 -0
- package/src/shared/plugins/suggestion/components/SuggestionList.tsx +24 -23
- package/src/utils.ts +12 -0
- package/types/src/BlockNoteTheme.d.ts +2 -0
- package/types/src/commands/indentation.d.ts +2 -0
- package/types/src/extensions/Blocks/BlockAttributes.d.ts +2 -0
- package/types/src/extensions/Blocks/MultipleNodeSelection.d.ts +24 -0
- package/types/src/extensions/Blocks/nodes/Block.d.ts +1 -1
- package/types/src/extensions/BubbleMenu/component/LinkToolbarButton.d.ts +2 -2
- package/types/src/extensions/Hyperlinks/menus/EditHyperlinkMenu.d.ts +11 -0
- package/types/src/extensions/Hyperlinks/menus/EditHyperlinkMenuItem.d.ts +13 -0
- package/types/src/extensions/Hyperlinks/menus/EditHyperlinkMenuItemIcon.d.ts +8 -0
- package/types/src/extensions/Hyperlinks/menus/EditHyperlinkMenuItemInput.d.ts +9 -0
- package/types/src/extensions/Hyperlinks/menus/HoverHyperlinkMenu.d.ts +12 -0
- package/types/src/extensions/Hyperlinks/menus/HyperlinkMenu.d.ts +21 -0
- package/types/src/extensions/Hyperlinks/menus/helpers/PanelTextInput.d.ts +39 -0
- package/types/src/extensions/Hyperlinks/menus/helpers/PanelTextInputStyles.d.ts +3 -0
- package/types/src/extensions/Hyperlinks/menus/helpers/ToolbarComponent.d.ts +13 -0
- package/types/src/extensions/SlashMenu/SlashMenuItem.d.ts +4 -7
- package/types/src/nodes/ChildgroupNode.d.ts +28 -0
- package/types/src/nodes/patchNodes.d.ts +1 -0
- package/types/src/plugins/TreeViewPlugin/index.d.ts +2 -0
- package/types/src/plugins/animation.d.ts +2 -0
- package/types/src/react/BlockNoteComposer.d.ts +17 -0
- package/types/src/react/BlockNotePlugin.d.ts +1 -0
- package/types/src/react/index.d.ts +3 -0
- package/types/src/react/useBlockNoteSetup.d.ts +2 -0
- package/types/src/registerBlockNote.d.ts +2 -0
- package/types/src/shared/components/toolbar/SimpleToolbarButton.d.ts +2 -3
- package/types/src/shared/components/toolbar/SimpleToolbarDropdown.d.ts +11 -0
- package/types/src/shared/components/toolbar/SimpleToolbarDropdownItem.d.ts +11 -0
- package/types/src/shared/components/toolbar/Toolbar.d.ts +2 -2
- package/types/src/shared/components/toolbar/ToolbarButton.d.ts +15 -0
- package/types/src/shared/components/toolbar/ToolbarDropdown.d.ts +17 -0
- package/types/src/shared/components/toolbar/ToolbarDropdownItem.d.ts +11 -0
- package/types/src/shared/components/toolbar/ToolbarDropdownTarget.d.ts +8 -0
- package/types/src/shared/plugins/suggestion/SuggestionItem.d.ts +2 -4
- package/types/src/shared/plugins/suggestion/components/SuggestionGroupItem.d.ts +9 -0
- package/types/src/shared/plugins/suggestion/components/SuggestionList.d.ts +0 -15
- package/types/src/themes/BlockNoteEditorTheme.d.ts +11 -0
- package/types/src/utils.d.ts +2 -0
- package/src/extensions/BubbleMenu/component/DropdownBlockItem.module.css +0 -13
- package/src/extensions/BubbleMenu/component/DropdownBlockItem.tsx +0 -25
- package/src/extensions/DraggableBlocks/components/DragHandle.module.css +0 -33
- package/src/extensions/DraggableBlocks/components/DragHandleMenu.module.css +0 -10
- package/src/extensions/Hyperlinks/menus/HyperlinkBasicMenu.tsx +0 -59
- package/src/extensions/Hyperlinks/menus/HyperlinkEditMenu.tsx +0 -72
- package/src/extensions/Hyperlinks/menus/atlaskit/PanelTextInput.tsx +0 -173
- package/src/extensions/Hyperlinks/menus/atlaskit/PanelTextInputStyles.ts +0 -36
- package/src/extensions/Hyperlinks/menus/atlaskit/README.md +0 -1
- package/src/extensions/Hyperlinks/menus/atlaskit/ToolbarComponent.tsx +0 -61
- package/src/extensions/helpers/formatKeyboardShortcut.ts +0 -9
- package/src/lib/atlaskit/browser.ts +0 -47
- package/src/shared/components/toolbar/SimpleToolbarButton.module.css +0 -13
- package/src/shared/components/toolbar/SimpleToolbarButton.tsx +0 -56
- package/src/shared/components/toolbar/Toolbar.module.css +0 -10
- package/src/shared/components/toolbar/ToolbarSeparator.module.css +0 -13
- package/src/shared/components/toolbar/ToolbarSeparator.tsx +0 -7
- package/src/shared/plugins/suggestion/components/SuggestionGroup.module.css +0 -45
- package/src/shared/plugins/suggestion/components/SuggestionList.module.css +0 -10
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { Button } from "@mantine/core";
|
|
2
|
+
import { HiChevronDown } from "react-icons/hi";
|
|
3
|
+
import { IconType } from "react-icons";
|
|
4
|
+
import { forwardRef } from "react";
|
|
5
|
+
|
|
6
|
+
export type ToolbarDropdownTargetProps = {
|
|
7
|
+
text: string;
|
|
8
|
+
icon?: IconType;
|
|
9
|
+
isDisabled?: boolean;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export const ToolbarDropdownTarget = forwardRef<
|
|
13
|
+
HTMLButtonElement,
|
|
14
|
+
ToolbarDropdownTargetProps
|
|
15
|
+
>((props: ToolbarDropdownTargetProps, ref) => {
|
|
16
|
+
const { text, icon, isDisabled, ...others } = props;
|
|
17
|
+
|
|
18
|
+
const TargetIcon = props.icon;
|
|
19
|
+
return (
|
|
20
|
+
<Button
|
|
21
|
+
leftIcon={TargetIcon && <TargetIcon size={16} />}
|
|
22
|
+
rightIcon={<HiChevronDown />}
|
|
23
|
+
size={"xs"}
|
|
24
|
+
variant={"subtle"}
|
|
25
|
+
disabled={props.isDisabled}
|
|
26
|
+
ref={ref}
|
|
27
|
+
{...others}>
|
|
28
|
+
{props.text}
|
|
29
|
+
</Button>
|
|
30
|
+
);
|
|
31
|
+
});
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { IconType } from "react-icons";
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* A generic interface used in all suggestion menus (slash menu, mentions, etc)
|
|
3
5
|
*/
|
|
@@ -15,7 +17,7 @@ export default interface SuggestionItem {
|
|
|
15
17
|
/**
|
|
16
18
|
* The react icon
|
|
17
19
|
*/
|
|
18
|
-
icon?:
|
|
20
|
+
icon?: IconType;
|
|
19
21
|
|
|
20
22
|
hint?: string;
|
|
21
23
|
|
|
@@ -6,6 +6,8 @@ import {
|
|
|
6
6
|
SuggestionList,
|
|
7
7
|
SuggestionListProps,
|
|
8
8
|
} from "./components/SuggestionList";
|
|
9
|
+
import { BlockNoteTheme } from "../../../BlockNoteTheme";
|
|
10
|
+
import { MantineProvider } from "@mantine/core";
|
|
9
11
|
|
|
10
12
|
/**
|
|
11
13
|
* The interface that each suggestion renderer should conform to.
|
|
@@ -140,10 +142,17 @@ export default function createRenderer<T extends SuggestionItem>(
|
|
|
140
142
|
selectedIndex,
|
|
141
143
|
};
|
|
142
144
|
|
|
143
|
-
component = new ReactRenderer(
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
145
|
+
component = new ReactRenderer(
|
|
146
|
+
(props: SuggestionListProps<T>) => (
|
|
147
|
+
<MantineProvider theme={BlockNoteTheme}>
|
|
148
|
+
<SuggestionList {...props} />
|
|
149
|
+
</MantineProvider>
|
|
150
|
+
),
|
|
151
|
+
{
|
|
152
|
+
editor: editor as ReactEditor,
|
|
153
|
+
props: componentProps,
|
|
154
|
+
}
|
|
155
|
+
);
|
|
147
156
|
|
|
148
157
|
popup = tippy("body", {
|
|
149
158
|
getReferenceClientRect: newProps.clientRect,
|
|
@@ -1,94 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import React from "react";
|
|
1
|
+
import { Menu } from "@mantine/core";
|
|
3
2
|
import SuggestionItem from "../SuggestionItem";
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
const MIN_LEFT_MARGIN = 5;
|
|
7
|
-
|
|
8
|
-
function SuggestionContent<T extends SuggestionItem>(props: { item: T }) {
|
|
9
|
-
return (
|
|
10
|
-
<div className={styles.suggestionWrapper}>
|
|
11
|
-
<div>
|
|
12
|
-
<div className={styles.buttonName}>{props.item.name}</div>
|
|
13
|
-
{props.item.hint && (
|
|
14
|
-
<div className={styles.buttonHint}>{props.item.hint}</div>
|
|
15
|
-
)}
|
|
16
|
-
</div>
|
|
17
|
-
{props.item.shortcut && (
|
|
18
|
-
<div>
|
|
19
|
-
<div className={styles.buttonShortcut}>{props.item.shortcut}</div>
|
|
20
|
-
</div>
|
|
21
|
-
)}
|
|
22
|
-
</div>
|
|
23
|
-
);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function getIcon<T extends SuggestionItem>(
|
|
27
|
-
item: T,
|
|
28
|
-
isButtonSelected: boolean
|
|
29
|
-
): JSX.Element | undefined {
|
|
30
|
-
const Icon = item.icon;
|
|
31
|
-
return (
|
|
32
|
-
Icon && (
|
|
33
|
-
<div className={styles.iconWrapper}>
|
|
34
|
-
<Icon
|
|
35
|
-
className={
|
|
36
|
-
styles.icon + " " + (isButtonSelected ? styles.selectedIcon : "")
|
|
37
|
-
}
|
|
38
|
-
/>
|
|
39
|
-
</div>
|
|
40
|
-
)
|
|
41
|
-
);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
type SuggestionComponentProps<T> = {
|
|
45
|
-
item: T;
|
|
46
|
-
index: number;
|
|
47
|
-
selectedIndex?: number;
|
|
48
|
-
clickItem: (item: T) => void;
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
function SuggestionComponent<T extends SuggestionItem>(
|
|
52
|
-
props: SuggestionComponentProps<T>
|
|
53
|
-
) {
|
|
54
|
-
let isButtonSelected =
|
|
55
|
-
props.selectedIndex !== undefined && props.selectedIndex === props.index;
|
|
56
|
-
|
|
57
|
-
const buttonRef = React.useRef<HTMLElement>(null);
|
|
58
|
-
React.useEffect(() => {
|
|
59
|
-
if (
|
|
60
|
-
isButtonSelected &&
|
|
61
|
-
buttonRef.current &&
|
|
62
|
-
buttonRef.current.getBoundingClientRect().left > MIN_LEFT_MARGIN //TODO: Kinda hacky, fix
|
|
63
|
-
// This check is needed because initially the menu is initialized somewhere above outside the screen (with left = 1)
|
|
64
|
-
// scrollIntoView() is called before the menu is set in the right place, and without the check would scroll to the top of the page every time
|
|
65
|
-
) {
|
|
66
|
-
buttonRef.current.scrollIntoView({
|
|
67
|
-
behavior: "smooth",
|
|
68
|
-
block: "nearest",
|
|
69
|
-
});
|
|
70
|
-
}
|
|
71
|
-
}, [isButtonSelected]);
|
|
72
|
-
|
|
73
|
-
return (
|
|
74
|
-
<div className={styles.buttonItem}>
|
|
75
|
-
<ButtonItem
|
|
76
|
-
isSelected={isButtonSelected} // This is needed to navigate with the keyboard
|
|
77
|
-
iconBefore={getIcon(props.item, isButtonSelected)}
|
|
78
|
-
onClick={(_e) => {
|
|
79
|
-
setTimeout(() => {
|
|
80
|
-
props.clickItem(props.item);
|
|
81
|
-
}, 0);
|
|
82
|
-
|
|
83
|
-
// e.stopPropagation();
|
|
84
|
-
// e.preventDefault();
|
|
85
|
-
}}
|
|
86
|
-
ref={buttonRef}>
|
|
87
|
-
<SuggestionContent item={props.item} />
|
|
88
|
-
</ButtonItem>
|
|
89
|
-
</div>
|
|
90
|
-
);
|
|
91
|
-
}
|
|
3
|
+
import { SuggestionGroupItem } from "./SuggestionGroupItem";
|
|
92
4
|
|
|
93
5
|
type SuggestionGroupProps<T> = {
|
|
94
6
|
/**
|
|
@@ -117,10 +29,11 @@ export function SuggestionGroup<T extends SuggestionItem>(
|
|
|
117
29
|
props: SuggestionGroupProps<T>
|
|
118
30
|
) {
|
|
119
31
|
return (
|
|
120
|
-
|
|
32
|
+
<>
|
|
33
|
+
<Menu.Label>{props.name}</Menu.Label>
|
|
121
34
|
{props.items.map((item, index) => {
|
|
122
35
|
return (
|
|
123
|
-
<
|
|
36
|
+
<SuggestionGroupItem
|
|
124
37
|
item={item}
|
|
125
38
|
key={index} // TODO: using index as key is not ideal for performance, better have ids on suggestionItems
|
|
126
39
|
index={index}
|
|
@@ -129,6 +42,6 @@ export function SuggestionGroup<T extends SuggestionItem>(
|
|
|
129
42
|
/>
|
|
130
43
|
);
|
|
131
44
|
})}
|
|
132
|
-
|
|
45
|
+
</>
|
|
133
46
|
);
|
|
134
47
|
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import SuggestionItem from "../SuggestionItem";
|
|
2
|
+
import { useEffect, useRef } from "react";
|
|
3
|
+
import { Badge, createStyles, Menu, Stack, Text } from "@mantine/core";
|
|
4
|
+
|
|
5
|
+
const MIN_LEFT_MARGIN = 5;
|
|
6
|
+
|
|
7
|
+
export type SuggestionGroupItemProps<T> = {
|
|
8
|
+
item: T;
|
|
9
|
+
index: number;
|
|
10
|
+
selectedIndex?: number;
|
|
11
|
+
clickItem: (item: T) => void;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export function SuggestionGroupItem<T extends SuggestionItem>(
|
|
15
|
+
props: SuggestionGroupItemProps<T>
|
|
16
|
+
) {
|
|
17
|
+
const itemRef = useRef<HTMLButtonElement>(null);
|
|
18
|
+
const { classes } = createStyles({ root: {} })(undefined, {
|
|
19
|
+
name: "SuggestionListItem",
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
function isSelected() {
|
|
23
|
+
const isKeyboardSelected =
|
|
24
|
+
props.selectedIndex !== undefined && props.selectedIndex === props.index;
|
|
25
|
+
const isMouseSelected = itemRef.current?.matches(":hover");
|
|
26
|
+
|
|
27
|
+
return isKeyboardSelected || isMouseSelected;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Updates HTML "data-hovered" attribute which Mantine uses to set mouse hover styles.
|
|
31
|
+
// Allows users to "hover" menu items when navigating using the keyboard.
|
|
32
|
+
function updateSelection() {
|
|
33
|
+
isSelected()
|
|
34
|
+
? itemRef.current?.setAttribute("data-hovered", "true")
|
|
35
|
+
: itemRef.current?.removeAttribute("data-hovered");
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
useEffect(() => {
|
|
39
|
+
// Updates whether the item is selected with the keyboard (triggered on selectedIndex prop change).
|
|
40
|
+
updateSelection();
|
|
41
|
+
|
|
42
|
+
if (
|
|
43
|
+
isSelected() &&
|
|
44
|
+
itemRef.current &&
|
|
45
|
+
itemRef.current.getBoundingClientRect().left > MIN_LEFT_MARGIN //TODO: Kinda hacky, fix
|
|
46
|
+
// This check is needed because initially the menu is initialized somewhere above outside the screen (with left = 1)
|
|
47
|
+
// scrollIntoView() is called before the menu is set in the right place, and without the check would scroll to the top of the page every time
|
|
48
|
+
) {
|
|
49
|
+
itemRef.current.scrollIntoView({
|
|
50
|
+
behavior: "smooth",
|
|
51
|
+
block: "nearest",
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
const Icon = props.item.icon;
|
|
57
|
+
|
|
58
|
+
return (
|
|
59
|
+
<Menu.Item
|
|
60
|
+
className={classes.root}
|
|
61
|
+
icon={Icon && <Icon size={18} />}
|
|
62
|
+
onClick={() => props.clickItem(props.item)}
|
|
63
|
+
// Ensures an item selected with both mouse & keyboard doesn't get deselected on mouse leave.
|
|
64
|
+
onMouseLeave={() => {
|
|
65
|
+
setTimeout(() => {
|
|
66
|
+
updateSelection();
|
|
67
|
+
});
|
|
68
|
+
}}
|
|
69
|
+
ref={itemRef}
|
|
70
|
+
rightSection={
|
|
71
|
+
props.item.shortcut && <Badge size={"xs"}>{props.item.shortcut}</Badge>
|
|
72
|
+
}>
|
|
73
|
+
<Stack>
|
|
74
|
+
{/*Might need separate classes.*/}
|
|
75
|
+
<Text size={14} weight={500}>
|
|
76
|
+
{props.item.name}
|
|
77
|
+
</Text>
|
|
78
|
+
<Text size={10}>{props.item.hint}</Text>
|
|
79
|
+
</Stack>
|
|
80
|
+
</Menu.Item>
|
|
81
|
+
);
|
|
82
|
+
}
|
|
@@ -1,39 +1,31 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import styles from "./SuggestionList.module.css";
|
|
3
|
-
import rootStyles from "../../../../root.module.css";
|
|
1
|
+
import { createStyles, Menu } from "@mantine/core";
|
|
4
2
|
import { SuggestionGroup } from "./SuggestionGroup";
|
|
5
3
|
import SuggestionItem from "../SuggestionItem";
|
|
6
4
|
|
|
7
5
|
export type SuggestionListProps<T> = {
|
|
8
|
-
|
|
9
|
-
* Object containing all suggestion items, grouped by their `groupName`.
|
|
10
|
-
*/
|
|
6
|
+
// Object containing all suggestion items, grouped by their `groupName`.
|
|
11
7
|
groups: {
|
|
12
8
|
[groupName: string]: T[];
|
|
13
9
|
};
|
|
14
10
|
|
|
15
|
-
|
|
16
|
-
* The total number of suggestion-items
|
|
17
|
-
*/
|
|
11
|
+
//The total number of suggestion-items
|
|
18
12
|
count: number;
|
|
19
13
|
|
|
20
|
-
|
|
21
|
-
* This callback gets executed whenever an item is clicked on
|
|
22
|
-
*/
|
|
14
|
+
// This callback gets executed whenever an item is clicked on
|
|
23
15
|
onSelectItem: (item: T) => void;
|
|
24
16
|
|
|
25
|
-
|
|
26
|
-
* The index of the item that is currently selected (but not yet clicked on)
|
|
27
|
-
*/
|
|
17
|
+
// The index of the item that is currently selected (but not yet clicked on)
|
|
28
18
|
selectedIndex: number;
|
|
29
19
|
};
|
|
30
20
|
|
|
31
|
-
|
|
32
|
-
* Stateless component that renders the suggestion list
|
|
33
|
-
*/
|
|
21
|
+
// Stateless component that renders the suggestion list
|
|
34
22
|
export function SuggestionList<T extends SuggestionItem>(
|
|
35
23
|
props: SuggestionListProps<T>
|
|
36
24
|
) {
|
|
25
|
+
const { classes } = createStyles({ root: {} })(undefined, {
|
|
26
|
+
name: "SuggestionList",
|
|
27
|
+
});
|
|
28
|
+
|
|
37
29
|
const renderedGroups = [];
|
|
38
30
|
|
|
39
31
|
let currentGroupIndex = 0;
|
|
@@ -58,15 +50,24 @@ export function SuggestionList<T extends SuggestionItem>(
|
|
|
58
50
|
}
|
|
59
51
|
|
|
60
52
|
return (
|
|
61
|
-
<
|
|
62
|
-
|
|
53
|
+
<Menu
|
|
54
|
+
/** Hacky fix to get the desired menu behaviour. The trigger="hover"
|
|
55
|
+
* attribute allows focus to remain on the editor, allowing for suggestion
|
|
56
|
+
* filtering. The closeDelay=10000000 attribute allows the menu to stay open
|
|
57
|
+
* practically indefinitely, as normally hovering off it would cause it to
|
|
58
|
+
* close due to trigger="hover".
|
|
59
|
+
*/
|
|
60
|
+
defaultOpened={true}
|
|
61
|
+
trigger={"hover"}
|
|
62
|
+
closeDelay={10000000}>
|
|
63
|
+
<Menu.Dropdown className={classes.root}>
|
|
63
64
|
{renderedGroups.length > 0 ? (
|
|
64
65
|
renderedGroups
|
|
65
66
|
) : (
|
|
66
|
-
<
|
|
67
|
+
<Menu.Item>No match found</Menu.Item>
|
|
67
68
|
)}
|
|
68
|
-
</
|
|
69
|
-
</
|
|
69
|
+
</Menu.Dropdown>
|
|
70
|
+
</Menu>
|
|
70
71
|
|
|
71
72
|
// doesn't work well yet, maybe https://github.com/atomiks/tippyjs-react/issues/173
|
|
72
73
|
// We now render the tippy element manually in SuggestionListReactRenderer
|
package/src/utils.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export const isAppleOS = () =>
|
|
2
|
+
/Mac/.test(navigator.platform) ||
|
|
3
|
+
(/AppleWebKit/.test(navigator.userAgent) &&
|
|
4
|
+
/Mobile\/\w+/.test(navigator.userAgent));
|
|
5
|
+
|
|
6
|
+
export function formatKeyboardShortcut(shortcut: string) {
|
|
7
|
+
if (isAppleOS()) {
|
|
8
|
+
return shortcut.replace("Mod", "⌘");
|
|
9
|
+
} else {
|
|
10
|
+
return shortcut.replace("Mod", "Ctrl");
|
|
11
|
+
}
|
|
12
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { Selection } from "prosemirror-state";
|
|
2
|
+
import { Node, ResolvedPos, Slice } from "prosemirror-model";
|
|
3
|
+
import { Mappable } from "prosemirror-transform";
|
|
4
|
+
/**
|
|
5
|
+
* This class represents an editor selection which spans multiple nodes/blocks. It's currently only used to allow users
|
|
6
|
+
* to drag multiple blocks at the same time. Expects the selection anchor and head to be between nodes, i.e. just before
|
|
7
|
+
* the first target node and just after the last, and that anchor and head are at the same nesting level.
|
|
8
|
+
*
|
|
9
|
+
* Partially based on ProseMirror's NodeSelection implementation:
|
|
10
|
+
* (https://github.com/ProseMirror/prosemirror-state/blob/master/src/selection.ts)
|
|
11
|
+
* MultipleNodeSelection differs from NodeSelection in the following ways:
|
|
12
|
+
* 1. Stores which nodes are included in the selection instead of just a single node.
|
|
13
|
+
* 2. Already expects the selection to start just before the first target node and ends just after the last, while a
|
|
14
|
+
* NodeSelection automatically sets both anchor and head to just before the single target node.
|
|
15
|
+
*/
|
|
16
|
+
export declare class MultipleNodeSelection extends Selection {
|
|
17
|
+
nodes: Array<Node>;
|
|
18
|
+
constructor($anchor: ResolvedPos, $head: ResolvedPos);
|
|
19
|
+
static create(doc: Node, from: number, to?: number): MultipleNodeSelection;
|
|
20
|
+
content(): Slice;
|
|
21
|
+
eq(selection: Selection): boolean;
|
|
22
|
+
map(doc: Node, mapping: Mappable): Selection;
|
|
23
|
+
toJSON(): any;
|
|
24
|
+
}
|
|
@@ -2,7 +2,7 @@ import { Node } from "@tiptap/core";
|
|
|
2
2
|
export interface IBlock {
|
|
3
3
|
HTMLAttributes: Record<string, any>;
|
|
4
4
|
}
|
|
5
|
-
export declare type Level = 1 | 2 | 3;
|
|
5
|
+
export declare type Level = "1" | "2" | "3";
|
|
6
6
|
export declare type ListType = "li" | "oli";
|
|
7
7
|
declare module "@tiptap/core" {
|
|
8
8
|
interface Commands<ReturnType> {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Editor } from "@tiptap/core";
|
|
3
|
-
import {
|
|
4
|
-
declare type Props =
|
|
3
|
+
import { ToolbarButtonProps } from "../../../shared/components/toolbar/ToolbarButton";
|
|
4
|
+
declare type Props = ToolbarButtonProps & {
|
|
5
5
|
editor: Editor;
|
|
6
6
|
};
|
|
7
7
|
/**
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare type EditHyperlinkMenuProps = {
|
|
3
|
+
url: string;
|
|
4
|
+
text: string;
|
|
5
|
+
update: (url: string, text: string) => void;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Menu which opens when editing an existing hyperlink or creating a new one.
|
|
9
|
+
* Provides input fields for setting the hyperlink URL and title.
|
|
10
|
+
*/
|
|
11
|
+
export declare const EditHyperlinkMenu: (props: EditHyperlinkMenuProps) => JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { IconType } from "react-icons";
|
|
3
|
+
export declare type EditHyperlinkMenuItemProps = {
|
|
4
|
+
icon: IconType;
|
|
5
|
+
mainIconTooltip: string;
|
|
6
|
+
secondaryIconTooltip?: string;
|
|
7
|
+
autofocus?: boolean;
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
value?: string;
|
|
10
|
+
onChange: (value: string) => void;
|
|
11
|
+
onSubmit: () => void;
|
|
12
|
+
};
|
|
13
|
+
export declare function EditHyperlinkMenuItem(props: EditHyperlinkMenuItemProps): JSX.Element;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { IconType } from "react-icons";
|
|
3
|
+
export declare type EditHyperlinkMenuItemIconProps = {
|
|
4
|
+
icon: IconType;
|
|
5
|
+
mainTooltip: string;
|
|
6
|
+
secondaryTooltip?: string;
|
|
7
|
+
};
|
|
8
|
+
export declare function EditHyperlinkMenuItemIcon(props: EditHyperlinkMenuItemIconProps): JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare type EditHyperlinkMenuItemInputProps = {
|
|
3
|
+
autofocus?: boolean;
|
|
4
|
+
placeholder?: string;
|
|
5
|
+
value?: string;
|
|
6
|
+
onChange: (value: string) => void;
|
|
7
|
+
onSubmit: () => void;
|
|
8
|
+
};
|
|
9
|
+
export declare function EditHyperlinkMenuItemInput(props: EditHyperlinkMenuItemInputProps): JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare type HoverHyperlinkMenuProps = {
|
|
3
|
+
url: string;
|
|
4
|
+
edit: () => void;
|
|
5
|
+
remove: () => void;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Menu which opens when hovering an existing hyperlink.
|
|
9
|
+
* Provides buttons for editing, opening, and removing the hyperlink.
|
|
10
|
+
*/
|
|
11
|
+
export declare const HoverHyperlinkMenu: (props: HoverHyperlinkMenuProps) => JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
declare type HyperlinkMenuProps = {
|
|
3
|
+
url: string;
|
|
4
|
+
text: string;
|
|
5
|
+
pos: {
|
|
6
|
+
height: number;
|
|
7
|
+
width: number;
|
|
8
|
+
left: number;
|
|
9
|
+
right: number;
|
|
10
|
+
top: number;
|
|
11
|
+
bottom: number;
|
|
12
|
+
};
|
|
13
|
+
update: (url: string, text: string) => void;
|
|
14
|
+
remove: () => void;
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* Main menu component for the hyperlink extension.
|
|
18
|
+
* Either renders a menu to create/edit a hyperlink, or a menu to interact with it on mouse hover.
|
|
19
|
+
*/
|
|
20
|
+
export declare const HyperlinkMenu: (props: HyperlinkMenuProps) => JSX.Element;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { KeyboardEvent, PureComponent } from "react";
|
|
2
|
+
import { FocusEvent } from "react";
|
|
3
|
+
export interface Props {
|
|
4
|
+
autoFocus?: boolean | FocusOptions;
|
|
5
|
+
defaultValue?: string;
|
|
6
|
+
onChange?: (value: string) => void;
|
|
7
|
+
onSubmit?: (value: string) => void;
|
|
8
|
+
onCancel?: (e: KeyboardEvent) => void;
|
|
9
|
+
placeholder?: string;
|
|
10
|
+
onMouseDown?: Function;
|
|
11
|
+
onKeyDown?: (e: KeyboardEvent<any>) => void;
|
|
12
|
+
onUndo?: Function;
|
|
13
|
+
onRedo?: Function;
|
|
14
|
+
onBlur?: Function;
|
|
15
|
+
width?: number;
|
|
16
|
+
maxLength?: number;
|
|
17
|
+
testId?: string;
|
|
18
|
+
ariaLabel?: string;
|
|
19
|
+
id?: string;
|
|
20
|
+
}
|
|
21
|
+
export interface State {
|
|
22
|
+
value?: string;
|
|
23
|
+
}
|
|
24
|
+
export default class PanelTextInput extends PureComponent<Props, State> {
|
|
25
|
+
private input?;
|
|
26
|
+
private focusTimeoutId;
|
|
27
|
+
constructor(props: Props);
|
|
28
|
+
UNSAFE_componentWillReceiveProps(nextProps: Props): void;
|
|
29
|
+
componentWillUnmount(): void;
|
|
30
|
+
onMouseDown: () => void;
|
|
31
|
+
onBlur: (e: FocusEvent<any>) => void;
|
|
32
|
+
render(): JSX.Element;
|
|
33
|
+
focus(): void;
|
|
34
|
+
private handleChange;
|
|
35
|
+
private handleKeydown;
|
|
36
|
+
private isUndoEvent;
|
|
37
|
+
private isRedoEvent;
|
|
38
|
+
private handleRef;
|
|
39
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const N80 = "#97A0AF";
|
|
2
|
+
export declare const N30 = "#EBECF0";
|
|
3
|
+
export declare const RECENT_SEARCH_WIDTH_IN_PX = 420;
|
|
4
|
+
export declare const RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
|
|
5
|
+
export declare const RECENT_SEARCH_HEIGHT_IN_PX = 360;
|
|
6
|
+
export declare const InputWrapper = "\n display: flex;\n line-height: 0;\n padding: 4px 0;\n align-items: center;\n";
|
|
7
|
+
export declare const UrlInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
|
+
export declare const Container: import("styled-components").StyledComponent<"div", any, {
|
|
9
|
+
provider: boolean;
|
|
10
|
+
}, never>;
|
|
11
|
+
export declare const TextInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
|
+
export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
13
|
+
export declare const ContainerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { Editor, Range } from "@tiptap/core";
|
|
3
2
|
import SuggestionItem from "../../shared/plugins/suggestion/SuggestionItem";
|
|
3
|
+
import { IconType } from "react-icons";
|
|
4
4
|
export declare type SlashMenuCallback = (editor: Editor, range: Range) => boolean;
|
|
5
5
|
export declare enum SlashMenuGroups {
|
|
6
6
|
HEADINGS = "Headings",
|
|
@@ -20,9 +20,7 @@ export declare class SlashMenuItem implements SuggestionItem {
|
|
|
20
20
|
readonly group: SlashMenuGroups;
|
|
21
21
|
readonly execute: SlashMenuCallback;
|
|
22
22
|
readonly aliases: string[];
|
|
23
|
-
readonly icon?:
|
|
24
|
-
className: string;
|
|
25
|
-
}> | undefined;
|
|
23
|
+
readonly icon?: IconType | undefined;
|
|
26
24
|
readonly hint?: string | undefined;
|
|
27
25
|
readonly shortcut?: string | undefined;
|
|
28
26
|
groupName: string;
|
|
@@ -34,10 +32,9 @@ export declare class SlashMenuItem implements SuggestionItem {
|
|
|
34
32
|
* @param execute The callback for creating a new node
|
|
35
33
|
* @param aliases Aliases for this command
|
|
36
34
|
* @param icon To be shown next to the name in the menu
|
|
35
|
+
* @param hint Short description of command
|
|
37
36
|
* @param shortcut Info about keyboard shortcut that would activate this command
|
|
38
37
|
*/
|
|
39
|
-
constructor(name: string, group: SlashMenuGroups, execute: SlashMenuCallback, aliases?: string[], icon?:
|
|
40
|
-
className: string;
|
|
41
|
-
}> | undefined, hint?: string | undefined, shortcut?: string | undefined);
|
|
38
|
+
constructor(name: string, group: SlashMenuGroups, execute: SlashMenuCallback, aliases?: string[], icon?: IconType | undefined, hint?: string | undefined, shortcut?: string | undefined);
|
|
42
39
|
match(query: string): boolean;
|
|
43
40
|
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { EditorConfig, ElementNode, LexicalNode, NodeKey, RangeSelection, SerializedElementNode, Spread, TextNode } from "lexical";
|
|
9
|
+
export declare type SerializedChildgroupNode = Spread<{
|
|
10
|
+
type: "childgroup";
|
|
11
|
+
version: 1;
|
|
12
|
+
}, SerializedElementNode>;
|
|
13
|
+
export declare class ChildgroupNode extends ElementNode {
|
|
14
|
+
static getType(): string;
|
|
15
|
+
static clone(node: ChildgroupNode): ChildgroupNode;
|
|
16
|
+
constructor(key?: NodeKey);
|
|
17
|
+
canBeEmpty(): boolean;
|
|
18
|
+
createDOM(_config: EditorConfig): HTMLElement;
|
|
19
|
+
updateDOM(_prevNode: TextNode, _dom: HTMLElement, _config: EditorConfig): boolean;
|
|
20
|
+
select(_anchorOffset?: number | undefined, _focusOffset?: number | undefined): RangeSelection;
|
|
21
|
+
selectStart(): RangeSelection;
|
|
22
|
+
insertBeforeDOM(dom: HTMLElement, childDOM: HTMLElement, referenceNode: Node | null): void;
|
|
23
|
+
static importJSON(_serializedNode: SerializedChildgroupNode): ChildgroupNode;
|
|
24
|
+
exportJSON(): SerializedChildgroupNode;
|
|
25
|
+
getClassName(): string;
|
|
26
|
+
}
|
|
27
|
+
export declare function $isChildgroupNode(node: LexicalNode | null | undefined): node is ChildgroupNode;
|
|
28
|
+
export declare function $createChildgroupNode(): ChildgroupNode;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function patchNode(node: any): void;
|