@blockslides/react 0.3.3 → 0.5.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.
- package/dist/index.cjs +1 -336
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -82
- package/dist/index.d.ts +3 -82
- package/dist/index.js +1 -345
- package/dist/index.js.map +1 -1
- package/package.json +6 -21
- package/src/index.ts +0 -3
- package/src/SlideEditor.tsx +0 -73
- package/src/menus/BubbleMenu.tsx +0 -89
- package/src/menus/BubbleMenuPreset.tsx +0 -144
- package/src/menus/FloatingMenu.tsx +0 -69
- package/src/menus/index.ts +0 -2
- package/src/useSlideEditor.ts +0 -250
package/dist/index.js
CHANGED
|
@@ -1015,351 +1015,9 @@ function ReactNodeViewRenderer(component, options) {
|
|
|
1015
1015
|
};
|
|
1016
1016
|
}
|
|
1017
1017
|
|
|
1018
|
-
// src/SlideEditor.tsx
|
|
1019
|
-
import { forwardRef as forwardRef2, useMemo as useMemo3 } from "react";
|
|
1020
|
-
|
|
1021
|
-
// src/menus/BubbleMenuPreset.tsx
|
|
1022
|
-
import React5, { useEffect as useEffect3, useRef as useRef2 } from "react";
|
|
1023
|
-
import { createPortal } from "react-dom";
|
|
1024
|
-
import {
|
|
1025
|
-
BubbleMenuPlugin
|
|
1026
|
-
} from "@blockslides/extension-bubble-menu";
|
|
1027
|
-
import { NodeSelection } from "@blockslides/pm/state";
|
|
1028
|
-
import {
|
|
1029
|
-
buildMenuElement,
|
|
1030
|
-
DEFAULT_ITEMS,
|
|
1031
|
-
DEFAULT_COLOR_PALETTE,
|
|
1032
|
-
DEFAULT_HIGHLIGHT_PALETTE,
|
|
1033
|
-
DEFAULT_FONTS,
|
|
1034
|
-
DEFAULT_FONT_SIZES,
|
|
1035
|
-
DEFAULT_ALIGNMENTS
|
|
1036
|
-
} from "@blockslides/extension-bubble-menu-preset";
|
|
1037
|
-
import { isTextSelection } from "@blockslides/core";
|
|
1038
|
-
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
1039
|
-
var BubbleMenuPreset = React5.forwardRef(
|
|
1040
|
-
({
|
|
1041
|
-
editor,
|
|
1042
|
-
updateDelay,
|
|
1043
|
-
resizeDelay,
|
|
1044
|
-
appendTo,
|
|
1045
|
-
shouldShow,
|
|
1046
|
-
getReferencedVirtualElement,
|
|
1047
|
-
options,
|
|
1048
|
-
items,
|
|
1049
|
-
className,
|
|
1050
|
-
injectStyles,
|
|
1051
|
-
textColors,
|
|
1052
|
-
highlightColors,
|
|
1053
|
-
fonts,
|
|
1054
|
-
fontSizes,
|
|
1055
|
-
alignments,
|
|
1056
|
-
onTextAction,
|
|
1057
|
-
onImageReplace,
|
|
1058
|
-
...rest
|
|
1059
|
-
}, ref) => {
|
|
1060
|
-
const pluginKey = "bubbleMenuPreset";
|
|
1061
|
-
const { editor: currentEditor } = useCurrentEditor();
|
|
1062
|
-
const menuEl = useRef2(null);
|
|
1063
|
-
useEffect3(() => {
|
|
1064
|
-
const attachToEditor = editor || currentEditor;
|
|
1065
|
-
if (!attachToEditor || attachToEditor.isDestroyed) {
|
|
1066
|
-
return;
|
|
1067
|
-
}
|
|
1068
|
-
const { element, cleanup } = buildMenuElement(attachToEditor, {
|
|
1069
|
-
items: items != null ? items : DEFAULT_ITEMS,
|
|
1070
|
-
className: className != null ? className : "",
|
|
1071
|
-
injectStyles: injectStyles !== false,
|
|
1072
|
-
textColors: textColors != null ? textColors : DEFAULT_COLOR_PALETTE,
|
|
1073
|
-
highlightColors: highlightColors != null ? highlightColors : DEFAULT_HIGHLIGHT_PALETTE,
|
|
1074
|
-
fonts: fonts != null ? fonts : DEFAULT_FONTS,
|
|
1075
|
-
fontSizes: fontSizes != null ? fontSizes : DEFAULT_FONT_SIZES,
|
|
1076
|
-
alignments: alignments != null ? alignments : DEFAULT_ALIGNMENTS,
|
|
1077
|
-
onTextAction,
|
|
1078
|
-
onImageReplace
|
|
1079
|
-
});
|
|
1080
|
-
menuEl.current = element;
|
|
1081
|
-
if (typeof ref === "function") {
|
|
1082
|
-
ref(element);
|
|
1083
|
-
} else if (ref) {
|
|
1084
|
-
;
|
|
1085
|
-
ref.current = element;
|
|
1086
|
-
}
|
|
1087
|
-
const defaultShouldShow = ({
|
|
1088
|
-
state,
|
|
1089
|
-
editor: editor2
|
|
1090
|
-
}) => {
|
|
1091
|
-
var _a, _b;
|
|
1092
|
-
const sel = state.selection;
|
|
1093
|
-
const imageSelection = sel instanceof NodeSelection && ["image", "imageBlock"].includes((_b = (_a = sel.node) == null ? void 0 : _a.type) == null ? void 0 : _b.name) || editor2.isActive("image") || editor2.isActive("imageBlock");
|
|
1094
|
-
if (imageSelection) return true;
|
|
1095
|
-
if (isTextSelection(sel) && !sel.empty && !imageSelection) return true;
|
|
1096
|
-
return false;
|
|
1097
|
-
};
|
|
1098
|
-
const plugin = BubbleMenuPlugin({
|
|
1099
|
-
editor: attachToEditor,
|
|
1100
|
-
element,
|
|
1101
|
-
updateDelay,
|
|
1102
|
-
resizeDelay,
|
|
1103
|
-
appendTo,
|
|
1104
|
-
pluginKey,
|
|
1105
|
-
shouldShow: shouldShow != null ? shouldShow : defaultShouldShow,
|
|
1106
|
-
getReferencedVirtualElement,
|
|
1107
|
-
options
|
|
1108
|
-
});
|
|
1109
|
-
attachToEditor.registerPlugin(plugin);
|
|
1110
|
-
return () => {
|
|
1111
|
-
attachToEditor.unregisterPlugin(pluginKey);
|
|
1112
|
-
cleanup == null ? void 0 : cleanup();
|
|
1113
|
-
if (element.parentNode) {
|
|
1114
|
-
element.parentNode.removeChild(element);
|
|
1115
|
-
}
|
|
1116
|
-
};
|
|
1117
|
-
}, [
|
|
1118
|
-
editor,
|
|
1119
|
-
currentEditor,
|
|
1120
|
-
updateDelay,
|
|
1121
|
-
resizeDelay,
|
|
1122
|
-
appendTo,
|
|
1123
|
-
shouldShow,
|
|
1124
|
-
getReferencedVirtualElement,
|
|
1125
|
-
options,
|
|
1126
|
-
items,
|
|
1127
|
-
className,
|
|
1128
|
-
injectStyles,
|
|
1129
|
-
textColors,
|
|
1130
|
-
highlightColors,
|
|
1131
|
-
fonts,
|
|
1132
|
-
fontSizes,
|
|
1133
|
-
alignments,
|
|
1134
|
-
onTextAction,
|
|
1135
|
-
onImageReplace,
|
|
1136
|
-
ref
|
|
1137
|
-
]);
|
|
1138
|
-
return menuEl.current ? createPortal(/* @__PURE__ */ jsx8("div", { ...rest }), menuEl.current) : null;
|
|
1139
|
-
}
|
|
1140
|
-
);
|
|
1141
|
-
BubbleMenuPreset.displayName = "BubbleMenuPreset";
|
|
1142
|
-
|
|
1143
|
-
// src/useSlideEditor.ts
|
|
1144
|
-
import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
|
|
1145
|
-
import { templatesV1 } from "@blockslides/ai-context";
|
|
1146
|
-
import {
|
|
1147
|
-
ExtensionKit
|
|
1148
|
-
} from "@blockslides/extension-kit";
|
|
1149
|
-
var defaultSlide = () => ({
|
|
1150
|
-
/**
|
|
1151
|
-
* Placeholder slide if no content is provided.
|
|
1152
|
-
*/
|
|
1153
|
-
type: "doc",
|
|
1154
|
-
content: [
|
|
1155
|
-
{
|
|
1156
|
-
type: "slide",
|
|
1157
|
-
attrs: {
|
|
1158
|
-
size: "16x9",
|
|
1159
|
-
className: "",
|
|
1160
|
-
id: "slide-1",
|
|
1161
|
-
backgroundMode: "none",
|
|
1162
|
-
backgroundColor: null,
|
|
1163
|
-
backgroundImage: null,
|
|
1164
|
-
backgroundOverlayColor: null,
|
|
1165
|
-
backgroundOverlayOpacity: null
|
|
1166
|
-
},
|
|
1167
|
-
content: [
|
|
1168
|
-
{
|
|
1169
|
-
type: "column",
|
|
1170
|
-
attrs: {
|
|
1171
|
-
align: "center",
|
|
1172
|
-
padding: "lg",
|
|
1173
|
-
margin: null,
|
|
1174
|
-
gap: "md",
|
|
1175
|
-
backgroundColor: "#ffffff",
|
|
1176
|
-
backgroundImage: null,
|
|
1177
|
-
borderRadius: null,
|
|
1178
|
-
border: null,
|
|
1179
|
-
fill: true,
|
|
1180
|
-
width: null,
|
|
1181
|
-
height: null,
|
|
1182
|
-
justify: "center"
|
|
1183
|
-
},
|
|
1184
|
-
content: [
|
|
1185
|
-
{
|
|
1186
|
-
type: "heading",
|
|
1187
|
-
attrs: {
|
|
1188
|
-
align: null,
|
|
1189
|
-
padding: null,
|
|
1190
|
-
margin: null,
|
|
1191
|
-
gap: null,
|
|
1192
|
-
backgroundColor: null,
|
|
1193
|
-
backgroundImage: null,
|
|
1194
|
-
borderRadius: null,
|
|
1195
|
-
border: null,
|
|
1196
|
-
fill: null,
|
|
1197
|
-
width: null,
|
|
1198
|
-
height: null,
|
|
1199
|
-
justify: null,
|
|
1200
|
-
id: "1fc4664c-333d-4203-a3f1-3ad27a54c535",
|
|
1201
|
-
"data-toc-id": "1fc4664c-333d-4203-a3f1-3ad27a54c535",
|
|
1202
|
-
level: 1
|
|
1203
|
-
},
|
|
1204
|
-
content: [
|
|
1205
|
-
{
|
|
1206
|
-
type: "text",
|
|
1207
|
-
text: "Lorem ipsum dolor sit amet"
|
|
1208
|
-
}
|
|
1209
|
-
]
|
|
1210
|
-
},
|
|
1211
|
-
{
|
|
1212
|
-
type: "paragraph",
|
|
1213
|
-
attrs: {
|
|
1214
|
-
align: null,
|
|
1215
|
-
padding: null,
|
|
1216
|
-
margin: null,
|
|
1217
|
-
gap: null,
|
|
1218
|
-
backgroundColor: null,
|
|
1219
|
-
backgroundImage: null,
|
|
1220
|
-
borderRadius: null,
|
|
1221
|
-
border: null,
|
|
1222
|
-
fill: null,
|
|
1223
|
-
width: null,
|
|
1224
|
-
height: null,
|
|
1225
|
-
justify: null
|
|
1226
|
-
},
|
|
1227
|
-
content: [
|
|
1228
|
-
{
|
|
1229
|
-
type: "text",
|
|
1230
|
-
text: "Consectetur adipiscing elit. Sed do eiusmod tempor incididunt. "
|
|
1231
|
-
}
|
|
1232
|
-
]
|
|
1233
|
-
}
|
|
1234
|
-
]
|
|
1235
|
-
}
|
|
1236
|
-
]
|
|
1237
|
-
}
|
|
1238
|
-
]
|
|
1239
|
-
});
|
|
1240
|
-
var defaultAddSlideButton = (presets) => ({
|
|
1241
|
-
showPresets: true,
|
|
1242
|
-
presets,
|
|
1243
|
-
presetBackground: "#0f172a",
|
|
1244
|
-
presetForeground: "#e5e7eb"
|
|
1245
|
-
});
|
|
1246
|
-
var defaultSlideOptions = {
|
|
1247
|
-
renderMode: "dynamic",
|
|
1248
|
-
hoverOutline: { color: "#3b82f6", width: "1.5px", offset: "4px" },
|
|
1249
|
-
hoverOutlineCascade: false
|
|
1250
|
-
};
|
|
1251
|
-
var useSlideEditor = ({
|
|
1252
|
-
content,
|
|
1253
|
-
onChange,
|
|
1254
|
-
extensions,
|
|
1255
|
-
extensionKitOptions,
|
|
1256
|
-
presetTemplates,
|
|
1257
|
-
deps = [],
|
|
1258
|
-
onEditorReady,
|
|
1259
|
-
immediatelyRender = false,
|
|
1260
|
-
shouldRerenderOnTransaction = false,
|
|
1261
|
-
theme = "light",
|
|
1262
|
-
editorProps,
|
|
1263
|
-
onUpdate,
|
|
1264
|
-
...editorOptions
|
|
1265
|
-
} = {}) => {
|
|
1266
|
-
var _a;
|
|
1267
|
-
const presets = useMemo2(
|
|
1268
|
-
() => presetTemplates != null ? presetTemplates : templatesV1.listPresetTemplates(),
|
|
1269
|
-
[presetTemplates]
|
|
1270
|
-
);
|
|
1271
|
-
const mergedExtensionKitOptions = useMemo2(() => {
|
|
1272
|
-
var _a2, _b;
|
|
1273
|
-
const addSlideButton = (extensionKitOptions == null ? void 0 : extensionKitOptions.addSlideButton) === false ? false : {
|
|
1274
|
-
...defaultAddSlideButton(presets),
|
|
1275
|
-
...(_a2 = extensionKitOptions == null ? void 0 : extensionKitOptions.addSlideButton) != null ? _a2 : {}
|
|
1276
|
-
};
|
|
1277
|
-
const slide = (extensionKitOptions == null ? void 0 : extensionKitOptions.slide) === false ? false : {
|
|
1278
|
-
...defaultSlideOptions,
|
|
1279
|
-
...(_b = extensionKitOptions == null ? void 0 : extensionKitOptions.slide) != null ? _b : {}
|
|
1280
|
-
};
|
|
1281
|
-
return {
|
|
1282
|
-
...extensionKitOptions,
|
|
1283
|
-
addSlideButton,
|
|
1284
|
-
slide
|
|
1285
|
-
};
|
|
1286
|
-
}, [extensionKitOptions, presets]);
|
|
1287
|
-
const resolvedExtensions = useMemo2(() => {
|
|
1288
|
-
const kit = ExtensionKit.configure(mergedExtensionKitOptions);
|
|
1289
|
-
return extensions ? [kit, ...extensions] : [kit];
|
|
1290
|
-
}, [extensions, mergedExtensionKitOptions]);
|
|
1291
|
-
const initialContent = content != null ? content : defaultSlide();
|
|
1292
|
-
const editor = useEditor(
|
|
1293
|
-
{
|
|
1294
|
-
content: initialContent,
|
|
1295
|
-
extensions: resolvedExtensions,
|
|
1296
|
-
immediatelyRender,
|
|
1297
|
-
shouldRerenderOnTransaction,
|
|
1298
|
-
theme,
|
|
1299
|
-
editorProps: {
|
|
1300
|
-
attributes: {
|
|
1301
|
-
autocomplete: "off",
|
|
1302
|
-
autocorrect: "off",
|
|
1303
|
-
autocapitalize: "off",
|
|
1304
|
-
class: "min-h-full min-w-full",
|
|
1305
|
-
...(_a = editorProps == null ? void 0 : editorProps.attributes) != null ? _a : {}
|
|
1306
|
-
},
|
|
1307
|
-
...editorProps
|
|
1308
|
-
},
|
|
1309
|
-
...editorOptions,
|
|
1310
|
-
onUpdate: (ctx) => {
|
|
1311
|
-
const json = ctx.editor.getJSON();
|
|
1312
|
-
onChange == null ? void 0 : onChange(json, ctx.editor);
|
|
1313
|
-
onUpdate == null ? void 0 : onUpdate(ctx);
|
|
1314
|
-
}
|
|
1315
|
-
},
|
|
1316
|
-
deps
|
|
1317
|
-
);
|
|
1318
|
-
useEffect4(() => {
|
|
1319
|
-
if (editor && !editor.isDestroyed) {
|
|
1320
|
-
onEditorReady == null ? void 0 : onEditorReady(editor);
|
|
1321
|
-
}
|
|
1322
|
-
}, [editor, onEditorReady]);
|
|
1323
|
-
return { editor, presets };
|
|
1324
|
-
};
|
|
1325
|
-
|
|
1326
|
-
// src/SlideEditor.tsx
|
|
1327
|
-
import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
1328
|
-
var SlideEditor = forwardRef2(
|
|
1329
|
-
({
|
|
1330
|
-
bubbleMenuPreset = true,
|
|
1331
|
-
editorContentProps,
|
|
1332
|
-
viewportScale = 1,
|
|
1333
|
-
className,
|
|
1334
|
-
style,
|
|
1335
|
-
...hookProps
|
|
1336
|
-
}, ref) => {
|
|
1337
|
-
const { editor } = useSlideEditor(hookProps);
|
|
1338
|
-
const bubbleMenuProps = useMemo3(() => {
|
|
1339
|
-
if (bubbleMenuPreset === false) return null;
|
|
1340
|
-
if (bubbleMenuPreset === true) return {};
|
|
1341
|
-
return bubbleMenuPreset;
|
|
1342
|
-
}, [bubbleMenuPreset]);
|
|
1343
|
-
if (!editor) return null;
|
|
1344
|
-
return /* @__PURE__ */ jsx9("div", { ref, className, style, children: /* @__PURE__ */ jsxs3(
|
|
1345
|
-
"div",
|
|
1346
|
-
{
|
|
1347
|
-
className: "bs-viewport",
|
|
1348
|
-
style: { ["--zoom"]: viewportScale },
|
|
1349
|
-
children: [
|
|
1350
|
-
/* @__PURE__ */ jsx9(EditorContent, { editor, ...editorContentProps }),
|
|
1351
|
-
bubbleMenuProps && /* @__PURE__ */ jsx9(BubbleMenuPreset, { editor, ...bubbleMenuProps })
|
|
1352
|
-
]
|
|
1353
|
-
}
|
|
1354
|
-
) });
|
|
1355
|
-
}
|
|
1356
|
-
);
|
|
1357
|
-
SlideEditor.displayName = "SlideEditor";
|
|
1358
|
-
|
|
1359
1018
|
// src/index.ts
|
|
1360
1019
|
export * from "@blockslides/core";
|
|
1361
1020
|
export {
|
|
1362
|
-
BubbleMenuPreset,
|
|
1363
1021
|
EditorConsumer,
|
|
1364
1022
|
EditorContent,
|
|
1365
1023
|
EditorContext,
|
|
@@ -1376,11 +1034,9 @@ export {
|
|
|
1376
1034
|
ReactNodeViewContext,
|
|
1377
1035
|
ReactNodeViewRenderer,
|
|
1378
1036
|
ReactRenderer,
|
|
1379
|
-
SlideEditor as ReactSlideEditor,
|
|
1380
1037
|
useCurrentEditor,
|
|
1381
1038
|
useEditor,
|
|
1382
1039
|
useEditorState,
|
|
1383
|
-
useReactNodeView
|
|
1384
|
-
useSlideEditor
|
|
1040
|
+
useReactNodeView
|
|
1385
1041
|
};
|
|
1386
1042
|
//# sourceMappingURL=index.js.map
|