@blocknote/ariakit 0.17.0 → 0.18.0

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.
Files changed (11) hide show
  1. package/dist/blocknote-ariakit.js +401 -1013
  2. package/dist/blocknote-ariakit.js.map +1 -1
  3. package/dist/blocknote-ariakit.umd.cjs +1 -30
  4. package/dist/blocknote-ariakit.umd.cjs.map +1 -1
  5. package/dist/style.css +1 -1
  6. package/dist/webpack-stats.json +1 -1
  7. package/package.json +6 -8
  8. package/src/index.tsx +2 -0
  9. package/src/style.css +106 -81
  10. package/src/tableHandle/ExtendButton.tsx +30 -0
  11. package/types/src/tableHandle/ExtendButton.d.ts +7 -0
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "*.css"
7
7
  ],
8
8
  "license": "MPL-2.0",
9
- "version": "0.17.0",
9
+ "version": "0.18.0",
10
10
  "files": [
11
11
  "dist",
12
12
  "types",
@@ -52,10 +52,8 @@
52
52
  },
53
53
  "dependencies": {
54
54
  "@ariakit/react": "^0.4.3",
55
- "@blocknote/core": "^0.17.0",
56
- "@blocknote/react": "^0.17.0",
57
- "react": "^18",
58
- "react-dom": "^18"
55
+ "@blocknote/core": "^0.18.0",
56
+ "@blocknote/react": "^0.18.0"
59
57
  },
60
58
  "devDependencies": {
61
59
  "@types/react": "^18.0.25",
@@ -71,8 +69,8 @@
71
69
  "vite-plugin-externalize-deps": "^0.8.0"
72
70
  },
73
71
  "peerDependencies": {
74
- "react": "^18",
75
- "react-dom": "^18"
72
+ "react": "18 - 19",
73
+ "react-dom": "18 - 19"
76
74
  },
77
75
  "eslintConfig": {
78
76
  "extends": [
@@ -83,5 +81,5 @@
83
81
  "access": "public",
84
82
  "registry": "https://registry.npmjs.org/"
85
83
  },
86
- "gitHead": "2921a6ad0e06ee1292d70b569558da651073b98e"
84
+ "gitHead": "8de0dd7f58b982f87af167eb16d6dfd0d9a58a72"
87
85
  }
package/src/index.tsx CHANGED
@@ -39,6 +39,7 @@ import { SuggestionMenuItem } from "./suggestionMenu/SuggestionMenuItem.js";
39
39
  import { SuggestionMenuLabel } from "./suggestionMenu/SuggestionMenuLabel.js";
40
40
  import { SuggestionMenuLoader } from "./suggestionMenu/SuggestionMenuLoader.js";
41
41
  import { TableHandle } from "./tableHandle/TableHandle.js";
42
+ import { ExtendButton } from "./tableHandle/ExtendButton.js";
42
43
  import { Toolbar } from "./toolbar/Toolbar.js";
43
44
  import { ToolbarButton } from "./toolbar/ToolbarButton.js";
44
45
  import { ToolbarSelect } from "./toolbar/ToolbarSelect.js";
@@ -81,6 +82,7 @@ export const components: Components = {
81
82
  },
82
83
  TableHandle: {
83
84
  Root: TableHandle,
85
+ ExtendButton: ExtendButton,
84
86
  },
85
87
  Generic: {
86
88
  Form: {
package/src/style.css CHANGED
@@ -6,181 +6,206 @@
6
6
  @import "./ariakitStyles.css";
7
7
 
8
8
  .bn-ak-input-wrapper {
9
- align-items: center;
10
- display: flex;
11
- gap: 0.5rem;
9
+ align-items: center;
10
+ display: flex;
11
+ gap: 0.5rem;
12
12
  }
13
13
 
14
14
  .bn-toolbar .bn-ak-button {
15
- width: unset;
15
+ width: unset;
16
16
  }
17
17
 
18
18
  .bn-toolbar .bn-ak-button[data-selected] {
19
- padding-top: 0.125rem;
20
- box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 0 var(--border);
19
+ padding-top: 0.125rem;
20
+ box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 0 var(--border);
21
21
  }
22
22
 
23
23
  .bn-toolbar .bn-ak-button[data-selected]:where(.dark, .dark *) {
24
- box-shadow: inset 0 0 0 1px var(--border), inset 0 1px 1px 1px var(--shadow);
24
+ box-shadow: inset 0 0 0 1px var(--border), inset 0 1px 1px 1px var(--shadow);
25
25
  }
26
26
 
27
27
  .bn-toolbar .bn-ak-popover {
28
- gap: 0.5rem;
28
+ gap: 0.5rem;
29
29
  }
30
30
 
31
31
  .bn-ariakit .bn-tab-panel {
32
- align-items: center;
33
- display: flex;
34
- flex-direction: column;
35
- gap: 0.5rem;
32
+ align-items: center;
33
+ display: flex;
34
+ flex-direction: column;
35
+ gap: 0.5rem;
36
36
  }
37
37
 
38
38
  .bn-ariakit .bn-file-input {
39
- max-width: 100%;
39
+ max-width: 100%;
40
40
  }
41
41
 
42
42
  .bn-ak-button {
43
- outline-style: none;
43
+ outline-style: none;
44
44
  }
45
45
 
46
46
  .bn-ak-menu-item[aria-selected="true"],
47
47
  .bn-ak-menu-item:hover {
48
- background-color: hsl(204 100% 40%);
49
- color: hsl(204 20% 100%);
48
+ background-color: hsl(204 100% 40%);
49
+ color: hsl(204 20% 100%);
50
50
  }
51
51
 
52
52
  .bn-ak-menu-item {
53
- display: flex;
53
+ display: flex;
54
54
  }
55
55
 
56
56
  .bn-ariakit .bn-dropdown {
57
- overflow: visible;
57
+ overflow: visible;
58
58
  }
59
59
 
60
60
  .bn-ariakit .bn-suggestion-menu {
61
- height: fit-content;
62
- max-height: 100%;
61
+ height: fit-content;
62
+ max-height: 100%;
63
63
  }
64
64
 
65
65
  .bn-ariakit .bn-color-picker-dropdown {
66
- overflow: scroll;
66
+ overflow: scroll;
67
67
  }
68
68
 
69
69
  .bn-ak-suggestion-menu-item-body {
70
- flex: 1;
70
+ flex: 1;
71
71
  }
72
72
 
73
73
  .bn-ak-suggestion-menu-item-subtitle {
74
- font-size: 0.7rem;
74
+ font-size: 0.7rem;
75
75
  }
76
76
 
77
77
  .bn-ak-suggestion-menu-item-section[data-position="left"] {
78
- padding: 8px;
78
+ padding: 8px;
79
79
  }
80
80
 
81
81
  .bn-ak-suggestion-menu-item-section[data-position="right"] {
82
- --border: rgb(0 0 0/13%);
83
- --highlight: rgb(255 255 255/20%);
84
- --shadow: rgb(0 0 0/10%);
85
- box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 0 var(--highlight),
82
+ --border: rgb(0 0 0/13%);
83
+ --highlight: rgb(255 255 255/20%);
84
+ --shadow: rgb(0 0 0/10%);
85
+ box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 0 var(--highlight),
86
86
  inset 0 -1px 0 var(--shadow), 0 1px 1px var(--shadow);
87
- font-size: 0.7rem;
88
- border-radius: 4px;
89
- padding-inline: 4px;
87
+ font-size: 0.7rem;
88
+ border-radius: 4px;
89
+ padding-inline: 4px;
90
90
  }
91
91
 
92
92
  .bn-ariakit .bn-grid-suggestion-menu {
93
- background: var(--bn-colors-menu-background);
94
- border-radius: var(--bn-border-radius-large);
95
- box-shadow: var(--bn-shadow-medium);
96
- display: grid;
97
- gap: 7px;
98
- height: fit-content;
99
- justify-items: center;
100
- max-height: min(500px, 100%);
101
- overflow-y: auto;
102
- padding: 20px;
93
+ background: var(--bn-colors-menu-background);
94
+ border-radius: var(--bn-border-radius-large);
95
+ box-shadow: var(--bn-shadow-medium);
96
+ display: grid;
97
+ gap: 7px;
98
+ height: fit-content;
99
+ justify-items: center;
100
+ max-height: min(500px, 100%);
101
+ overflow-y: auto;
102
+ padding: 20px;
103
103
  }
104
104
 
105
105
  .bn-ariakit .bn-grid-suggestion-menu-item {
106
- align-items: center;
107
- border-radius: var(--bn-border-radius-large);
108
- cursor: pointer;
109
- display: flex;
110
- font-size: 24px;
111
- height: 32px;
112
- justify-content: center;
113
- margin: 2px;
114
- padding: 4px;
115
- width: 32px;
106
+ align-items: center;
107
+ border-radius: var(--bn-border-radius-large);
108
+ cursor: pointer;
109
+ display: flex;
110
+ font-size: 24px;
111
+ height: 32px;
112
+ justify-content: center;
113
+ margin: 2px;
114
+ padding: 4px;
115
+ width: 32px;
116
116
  }
117
117
 
118
118
  .bn-ariakit .bn-grid-suggestion-menu-item[aria-selected="true"],
119
119
  .bn-ariakit .bn-grid-suggestion-menu-item:hover {
120
- background-color: var(--bn-colors-hovered-background);
120
+ background-color: var(--bn-colors-hovered-background);
121
121
  }
122
122
 
123
123
  .bn-ariakit .bn-grid-suggestion-menu-empty-item,
124
124
  .bn-ariakit .bn-grid-suggestion-menu-loader {
125
- align-items: center;
126
- color: var(--bn-colors-menu-text);
127
- display: flex;
128
- font-size: 14px;
129
- font-weight: 500;
130
- height: 32px;
131
- justify-content: center;
125
+ align-items: center;
126
+ color: var(--bn-colors-menu-text);
127
+ display: flex;
128
+ font-size: 14px;
129
+ font-weight: 500;
130
+ height: 32px;
131
+ justify-content: center;
132
132
  }
133
133
 
134
134
  .bn-ariakit .bn-grid-suggestion-menu-loader span {
135
- background-color: var(--bn-colors-side-menu);
135
+ background-color: var(--bn-colors-side-menu);
136
136
  }
137
137
 
138
138
  .bn-ariakit .bn-side-menu {
139
- align-items: center;
140
- display: flex;
141
- justify-content: center;
139
+ align-items: center;
140
+ display: flex;
141
+ justify-content: center;
142
142
  }
143
143
 
144
144
  .bn-side-menu .bn-ak-button {
145
- height: fit-content;
146
- padding: 0;
147
- width: fit-content;
145
+ height: fit-content;
146
+ padding: 0;
147
+ width: fit-content;
148
148
  }
149
149
 
150
150
  .bn-ariakit .bn-panel-popover {
151
- background-color: transparent;
152
- border: none;
153
- box-shadow: none;
151
+ background-color: transparent;
152
+ border: none;
153
+ box-shadow: none;
154
154
  }
155
155
 
156
156
  .bn-ariakit .bn-table-handle {
157
- height: fit-content;
158
- padding: 0;
159
- width: fit-content;
157
+ height: fit-content;
158
+ padding: 0;
159
+ width: fit-content;
160
160
  }
161
161
 
162
162
  .bn-ariakit .bn-side-menu,
163
- .bn-ariakit .bn-table-handle {
164
- color: gray;
163
+ .bn-ariakit .bn-table-handle,
164
+ .bn-ariakit .bn-extend-button {
165
+ color: gray;
166
+ }
167
+
168
+ .bn-ariakit .bn-extend-button-editing {
169
+ background-color: hsl(204 4% 0% / 0.05);
170
+ }
171
+
172
+ .bn-ariakit .bn-extend-button-editing:where(.dark, .dark *) {
173
+ background-color: hsl(204 20% 100% / 0.05);
174
+ }
175
+
176
+ .bn-ariakit .bn-extend-button-add-remove-columns {
177
+ height: 100%;
178
+ width: 18px;
179
+ padding: 0;
180
+ margin-left: 4px;
181
+ cursor: col-resize;
182
+ }
183
+
184
+ .bn-ariakit .bn-extend-button-add-remove-rows {
185
+ height: 18px;
186
+ width: 100%;
187
+ padding: 0;
188
+ margin-top: 4px;
189
+ cursor: row-resize;
165
190
  }
166
191
 
167
192
  .bn-ak-button:where(.dark, .dark *) {
168
- color: hsl(204 20% 100%);
193
+ color: hsl(204 20% 100%);
169
194
  }
170
195
 
171
196
  .bn-ak-tab,
172
197
  .bn-ariakit .bn-file-input {
173
- background-color: transparent;
174
- color: black;
198
+ background-color: transparent;
199
+ color: black;
175
200
  }
176
201
 
177
202
  .bn-ak-tab:where(.dark, .dark *),
178
203
  .bn-ariakit .bn-file-input:where(.dark, .dark *) {
179
- color: white;
204
+ color: white;
180
205
  }
181
206
 
182
207
  .bn-ak-tooltip {
183
- align-items: center;
184
- display: flex;
185
- flex-direction: column;
208
+ align-items: center;
209
+ display: flex;
210
+ flex-direction: column;
186
211
  }
package/src/tableHandle/ExtendButton.tsx ADDED
@@ -0,0 +1,30 @@
1
+ import { Button as AriakitButton } from "@ariakit/react";
2
+
3
+ import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
4
+ import { ComponentProps } from "@blocknote/react";
5
+ import { forwardRef } from "react";
6
+
7
+ export const ExtendButton = forwardRef<
8
+ HTMLButtonElement,
9
+ ComponentProps["TableHandle"]["ExtendButton"]
10
+ >((props, ref) => {
11
+ const { children, className, onMouseDown, onClick, ...rest } = props;
12
+
13
+ // false, because rest props can be added by mantine when button is used as a trigger
14
+ // assertEmpty in this case is only used at typescript level, not runtime level
15
+ assertEmpty(rest, false);
16
+
17
+ return (
18
+ <AriakitButton
19
+ className={mergeCSSClasses(
20
+ "bn-ak-button bn-ak-secondary",
21
+ className || ""
22
+ )}
23
+ ref={ref}
24
+ onMouseDown={onMouseDown}
25
+ onClick={onClick}
26
+ {...rest}>
27
+ {children}
28
+ </AriakitButton>
29
+ );
30
+ });
package/types/src/tableHandle/ExtendButton.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ export declare const ExtendButton: import("react").ForwardRefExoticComponent<{
3
+ className?: string | undefined;
4
+ onClick: (e: import("react").MouseEvent<Element, MouseEvent>) => void;
5
+ onMouseDown: (e: import("react").MouseEvent<Element, MouseEvent>) => void;
6
+ children: import("react").ReactNode;
7
+ } & import("react").RefAttributes<HTMLButtonElement>>;