@blockslides/react 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -48,10 +48,12 @@ __export(index_exports, {
   ReactNodeViewContext: () => ReactNodeViewContext,
   ReactNodeViewRenderer: () => ReactNodeViewRenderer,
   ReactRenderer: () => ReactRenderer,
+  ReactSlideEditor: () => SlideEditor,
   useCurrentEditor: () => useCurrentEditor,
   useEditor: () => useEditor,
   useEditorState: () => useEditorState,
-  useReactNodeView: () => useReactNodeView
+  useReactNodeView: () => useReactNodeView,
+  useSlideEditor: () => useSlideEditor
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1072,6 +1074,9 @@ function ReactNodeViewRenderer(component, options) {
   };
 }
 
+// src/SlideEditor.tsx
+var import_react13 = require("react");
+
 // src/menus/BubbleMenuPreset.tsx
 var import_react11 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
@@ -1082,7 +1087,6 @@ var import_core4 = require("@blockslides/core");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var BubbleMenuPreset = import_react11.default.forwardRef(
   ({
-    pluginKey = "bubbleMenuPreset",
     editor,
     updateDelay,
     resizeDelay,
@@ -1098,8 +1102,11 @@ var BubbleMenuPreset = import_react11.default.forwardRef(
     fonts,
     fontSizes,
     alignments,
+    onTextAction,
+    onImageReplace,
     ...rest
   }, ref) => {
+    const pluginKey = "bubbleMenuPreset";
     const { editor: currentEditor } = useCurrentEditor();
     const menuEl = (0, import_react11.useRef)(null);
     (0, import_react11.useEffect)(() => {
@@ -1115,7 +1122,9 @@ var BubbleMenuPreset = import_react11.default.forwardRef(
         highlightColors: highlightColors != null ? highlightColors : import_extension_bubble_menu_preset.DEFAULT_HIGHLIGHT_PALETTE,
         fonts: fonts != null ? fonts : import_extension_bubble_menu_preset.DEFAULT_FONTS,
         fontSizes: fontSizes != null ? fontSizes : import_extension_bubble_menu_preset.DEFAULT_FONT_SIZES,
-        alignments: alignments != null ? alignments : import_extension_bubble_menu_preset.DEFAULT_ALIGNMENTS
+        alignments: alignments != null ? alignments : import_extension_bubble_menu_preset.DEFAULT_ALIGNMENTS,
+        onTextAction,
+        onImageReplace
       });
       menuEl.current = element;
       if (typeof ref === "function") {
@@ -1157,7 +1166,6 @@ var BubbleMenuPreset = import_react11.default.forwardRef(
     }, [
       editor,
       currentEditor,
-      pluginKey,
       updateDelay,
       resizeDelay,
       appendTo,
@@ -1172,6 +1180,8 @@ var BubbleMenuPreset = import_react11.default.forwardRef(
       fonts,
       fontSizes,
       alignments,
+      onTextAction,
+      onImageReplace,
       ref
     ]);
     return menuEl.current ? (0, import_react_dom3.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...rest }), menuEl.current) : null;
@@ -1179,6 +1189,220 @@ var BubbleMenuPreset = import_react11.default.forwardRef(
 );
 BubbleMenuPreset.displayName = "BubbleMenuPreset";
 
+// src/useSlideEditor.ts
+var import_react12 = require("react");
+var import_ai_context = require("@blockslides/ai-context");
+var import_extension_kit = require("@blockslides/extension-kit");
+var defaultSlide = () => ({
+  /**
+   * Placeholder slide if no content is provided.
+   */
+  type: "doc",
+  content: [
+    {
+      type: "slide",
+      attrs: {
+        size: "16x9",
+        className: "",
+        id: "slide-1",
+        backgroundMode: "none",
+        backgroundColor: null,
+        backgroundImage: null,
+        backgroundOverlayColor: null,
+        backgroundOverlayOpacity: null
+      },
+      content: [
+        {
+          type: "column",
+          attrs: {
+            align: "center",
+            padding: "lg",
+            margin: null,
+            gap: "md",
+            backgroundColor: "#ffffff",
+            backgroundImage: null,
+            borderRadius: null,
+            border: null,
+            fill: true,
+            width: null,
+            height: null,
+            justify: "center"
+          },
+          content: [
+            {
+              type: "heading",
+              attrs: {
+                align: null,
+                padding: null,
+                margin: null,
+                gap: null,
+                backgroundColor: null,
+                backgroundImage: null,
+                borderRadius: null,
+                border: null,
+                fill: null,
+                width: null,
+                height: null,
+                justify: null,
+                id: "1fc4664c-333d-4203-a3f1-3ad27a54c535",
+                "data-toc-id": "1fc4664c-333d-4203-a3f1-3ad27a54c535",
+                level: 1
+              },
+              content: [
+                {
+                  type: "text",
+                  text: "Lorem ipsum dolor sit amet"
+                }
+              ]
+            },
+            {
+              type: "paragraph",
+              attrs: {
+                align: null,
+                padding: null,
+                margin: null,
+                gap: null,
+                backgroundColor: null,
+                backgroundImage: null,
+                borderRadius: null,
+                border: null,
+                fill: null,
+                width: null,
+                height: null,
+                justify: null
+              },
+              content: [
+                {
+                  type: "text",
+                  text: "Consectetur adipiscing elit. Sed do eiusmod tempor incididunt. "
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+});
+var defaultAddSlideButton = (presets) => ({
+  showPresets: true,
+  presets,
+  presetBackground: "#0f172a",
+  presetForeground: "#e5e7eb"
+});
+var defaultSlideOptions = {
+  renderMode: "dynamic",
+  hoverOutline: { color: "#3b82f6", width: "1.5px", offset: "4px" },
+  hoverOutlineCascade: false
+};
+var useSlideEditor = ({
+  content,
+  onChange,
+  extensions,
+  extensionKitOptions,
+  presetTemplates,
+  deps = [],
+  onEditorReady,
+  immediatelyRender = false,
+  shouldRerenderOnTransaction = false,
+  theme = "light",
+  editorProps,
+  onUpdate,
+  ...editorOptions
+} = {}) => {
+  var _a;
+  const presets = (0, import_react12.useMemo)(
+    () => presetTemplates != null ? presetTemplates : import_ai_context.templatesV1.listPresetTemplates(),
+    [presetTemplates]
+  );
+  const mergedExtensionKitOptions = (0, import_react12.useMemo)(() => {
+    var _a2, _b;
+    const addSlideButton = (extensionKitOptions == null ? void 0 : extensionKitOptions.addSlideButton) === false ? false : {
+      ...defaultAddSlideButton(presets),
+      ...(_a2 = extensionKitOptions == null ? void 0 : extensionKitOptions.addSlideButton) != null ? _a2 : {}
+    };
+    const slide = (extensionKitOptions == null ? void 0 : extensionKitOptions.slide) === false ? false : {
+      ...defaultSlideOptions,
+      ...(_b = extensionKitOptions == null ? void 0 : extensionKitOptions.slide) != null ? _b : {}
+    };
+    return {
+      ...extensionKitOptions,
+      addSlideButton,
+      slide
+    };
+  }, [extensionKitOptions, presets]);
+  const resolvedExtensions = (0, import_react12.useMemo)(() => {
+    const kit = import_extension_kit.ExtensionKit.configure(mergedExtensionKitOptions);
+    return extensions ? [kit, ...extensions] : [kit];
+  }, [extensions, mergedExtensionKitOptions]);
+  const initialContent = content != null ? content : defaultSlide();
+  const editor = useEditor(
+    {
+      content: initialContent,
+      extensions: resolvedExtensions,
+      immediatelyRender,
+      shouldRerenderOnTransaction,
+      theme,
+      editorProps: {
+        attributes: {
+          autocomplete: "off",
+          autocorrect: "off",
+          autocapitalize: "off",
+          class: "min-h-full min-w-full",
+          ...(_a = editorProps == null ? void 0 : editorProps.attributes) != null ? _a : {}
+        },
+        ...editorProps
+      },
+      ...editorOptions,
+      onUpdate: (ctx) => {
+        const json = ctx.editor.getJSON();
+        onChange == null ? void 0 : onChange(json, ctx.editor);
+        onUpdate == null ? void 0 : onUpdate(ctx);
+      }
+    },
+    deps
+  );
+  (0, import_react12.useEffect)(() => {
+    if (editor && !editor.isDestroyed) {
+      onEditorReady == null ? void 0 : onEditorReady(editor);
+    }
+  }, [editor, onEditorReady]);
+  return { editor, presets };
+};
+
+// src/SlideEditor.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SlideEditor = (0, import_react13.forwardRef)(
+  ({
+    bubbleMenuPreset = true,
+    editorContentProps,
+    viewportScale = 1,
+    className,
+    style,
+    ...hookProps
+  }, ref) => {
+    const { editor } = useSlideEditor(hookProps);
+    const bubbleMenuProps = (0, import_react13.useMemo)(() => {
+      if (bubbleMenuPreset === false) return null;
+      if (bubbleMenuPreset === true) return {};
+      return bubbleMenuPreset;
+    }, [bubbleMenuPreset]);
+    if (!editor) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref, className, style, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "div",
+      {
+        className: "bs-viewport",
+        style: { ["--zoom"]: viewportScale },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(EditorContent, { editor, ...editorContentProps }),
+          bubbleMenuProps && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BubbleMenuPreset, { editor, ...bubbleMenuProps })
+        ]
+      }
+    ) });
+  }
+);
+SlideEditor.displayName = "SlideEditor";
+
 // src/index.ts
 __reExport(index_exports, require("@blockslides/core"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
@@ -1200,10 +1424,12 @@ __reExport(index_exports, require("@blockslides/core"), module.exports);
   ReactNodeViewContext,
   ReactNodeViewRenderer,
   ReactRenderer,
+  ReactSlideEditor,
   useCurrentEditor,
   useEditor,
   useEditorState,
   useReactNodeView,
+  useSlideEditor,
   ...require("@blockslides/core")
 });
 //# sourceMappingURL=index.cjs.map