@blockslides/react 0.2.1 → 0.3.0

package/dist/index.d.ts

@@ -1,11 +1,16 @@
 import * as react_jsx_runtime_js from 'react/jsx-runtime.js';
-import { EditorOptions, Editor, MarkViewRendererOptions, MarkView, MarkViewProps, MarkViewRenderer, NodeViewProps, NodeViewRendererOptions, NodeView, NodeViewRendererProps, NodeViewRenderer } from '@blockslides/core';
+import * as _blockslides_core from '@blockslides/core';
+import { EditorOptions, Editor, MarkViewRendererOptions, MarkView, MarkViewProps, MarkViewRenderer, NodeViewProps, NodeViewRendererOptions, NodeView, NodeViewRendererProps, NodeViewRenderer, JSONContent, AnyExtension } from '@blockslides/core';
 export * from '@blockslides/core';
 import * as React from 'react';
-import React__default, { DependencyList, ReactNode, HTMLAttributes, HTMLProps, ForwardedRef, ComponentProps, ComponentClass, FunctionComponent, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, ComponentType as ComponentType$1 } from 'react';
+import React__default, { DependencyList, ReactNode, HTMLAttributes, HTMLProps, ForwardedRef, ComponentProps, ComponentClass, FunctionComponent, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, ComponentType as ComponentType$1, CSSProperties } from 'react';
 import { Node } from '@blockslides/pm/model';
 import { Decoration, DecorationSource } from '@blockslides/pm/view';
+import * as packages_ai_context_src_templates_v1_presetTemplateBuilder_js from 'packages/ai-context/src/templates/v1/presetTemplateBuilder.js';
+import * as _blockslides_extension_kit from '@blockslides/extension-kit';
+import { ExtensionKitOptions } from '@blockslides/extension-kit';
 import { BubbleMenuPresetOptions } from '@blockslides/extension-bubble-menu-preset';
+import { templatesV1 } from '@blockslides/ai-context';
 
 /**
  * The options for the `useEditor` hook.
@@ -287,6 +292,79 @@ declare class ReactNodeView<T = HTMLElement, Component extends ComponentType$1<R
  */
 declare function ReactNodeViewRenderer<T = HTMLElement>(component: ComponentType$1<ReactNodeViewProps<T>>, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
 
+type BubbleMenuPresetProps = Omit<BubbleMenuPresetOptions, 'element' | 'pluginKey'> & React__default.HTMLAttributes<HTMLElement> & {
+    editor?: Editor | null;
+};
+declare const BubbleMenuPreset: React__default.ForwardRefExoticComponent<Omit<BubbleMenuPresetOptions, "element" | "pluginKey"> & React__default.HTMLAttributes<HTMLElement> & {
+    editor?: Editor | null;
+} & React__default.RefAttributes<HTMLElement>>;
+
+type PresetTemplates = ReturnType<typeof templatesV1.listPresetTemplates>;
+type UseSlideEditorProps = {
+    /**
+     * Initial content for the editor. If omitted, a single preset slide is used.
+     */
+    content?: UseEditorOptions["content"];
+    /**
+     * Called on every update with the current JSON document.
+     */
+    onChange?: (doc: JSONContent, editor: Editor) => void;
+    /**
+     * Additional extensions to append after the ExtensionKit bundle.
+     */
+    extensions?: AnyExtension[];
+    /**
+     * Customize or disable pieces of ExtensionKit (e.g., bubbleMenu: false).
+     */
+    extensionKitOptions?: ExtensionKitOptions;
+    /**
+     * Optional preset list to power the add-slide button.
+     */
+    presetTemplates?: PresetTemplates;
+    /**
+     * Dependencies array forwarded to useEditor for re-instantiation control.
+     * Leave empty to avoid recreating the editor on prop changes.
+     */
+    deps?: DependencyList;
+    /**
+     * Called once when an editor instance is ready.
+     */
+    onEditorReady?: (editor: Editor) => void;
+} & Omit<UseEditorOptions, "extensions" | "content">;
+declare const useSlideEditor: ({ content, onChange, extensions, extensionKitOptions, presetTemplates, deps, onEditorReady, immediatelyRender, shouldRerenderOnTransaction, theme, editorProps, onUpdate, ...editorOptions }?: UseSlideEditorProps) => {
+    editor: Editor;
+    presets: templatesV1.PresetTemplate[];
+};
+
+declare const SlideEditor: React__default.ForwardRefExoticComponent<{
+    content?: UseEditorOptions["content"];
+    onChange?: (doc: _blockslides_core.JSONContent, editor: _blockslides_core.Editor) => void;
+    extensions?: _blockslides_core.AnyExtension[];
+    extensionKitOptions?: _blockslides_extension_kit.ExtensionKitOptions;
+    presetTemplates?: packages_ai_context_src_templates_v1_presetTemplateBuilder_js.PresetTemplate[];
+    deps?: React__default.DependencyList;
+    onEditorReady?: (editor: _blockslides_core.Editor) => void;
+} & Omit<UseEditorOptions, "content" | "extensions"> & {
+    /**
+     * Toggle or customize the built-in BubbleMenuPreset.
+     * - true (default): render with defaults
+     * - false: disable entirely
+     * - object: pass through to BubbleMenuPreset
+     */
+    bubbleMenuPreset?: boolean | BubbleMenuPresetProps;
+    /**
+     * Additional props forwarded to EditorContent.
+     */
+    editorContentProps?: Omit<EditorContentProps, "editor">;
+    /**
+     * Viewport scale factor applied to the slide viewport.
+     * @default 1
+     */
+    viewportScale?: number;
+    className?: string;
+    style?: CSSProperties;
+} & React__default.RefAttributes<HTMLDivElement>>;
+
 type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
     editor: TEditor;
     transactionNumber: number;
@@ -347,11 +425,4 @@ declare const ReactNodeViewContentProvider: ({ children, content }: {
 }) => React.FunctionComponentElement<React.ProviderProps<ReactNodeViewContextProps>>;
 declare const useReactNodeView: () => ReactNodeViewContextProps;
 
-type BubbleMenuPresetProps = Omit<BubbleMenuPresetOptions, 'element'> & React__default.HTMLAttributes<HTMLElement> & {
-    editor?: Editor | null;
-};
-declare const BubbleMenuPreset: React__default.ForwardRefExoticComponent<Omit<BubbleMenuPresetOptions, "element"> & React__default.HTMLAttributes<HTMLElement> & {
-    editor?: Editor | null;
-} & React__default.RefAttributes<HTMLElement>>;
-
-export { BubbleMenuPreset, type BubbleMenuPresetProps, EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, MarkViewContent, type MarkViewContentProps, type MarkViewContextProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactMarkView, ReactMarkViewContext, ReactMarkViewRenderer, type ReactMarkViewRendererOptions, ReactNodeView, ReactNodeViewContentProvider, ReactNodeViewContext, type ReactNodeViewContextProps, type ReactNodeViewProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView };
+export { BubbleMenuPreset, type BubbleMenuPresetProps, EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, MarkViewContent, type MarkViewContentProps, type MarkViewContextProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactMarkView, ReactMarkViewContext, ReactMarkViewRenderer, type ReactMarkViewRendererOptions, ReactNodeView, ReactNodeViewContentProvider, ReactNodeViewContext, type ReactNodeViewContextProps, type ReactNodeViewProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, SlideEditor as ReactSlideEditor, type UseEditorOptions, type UseEditorStateOptions, type UseSlideEditorProps, useCurrentEditor, useEditor, useEditorState, useReactNodeView, useSlideEditor };

package/dist/index.js

@@ -1015,6 +1015,9 @@ function ReactNodeViewRenderer(component, options) {
   };
 }
 
+// src/SlideEditor.tsx
+import { forwardRef as forwardRef2, useMemo as useMemo3 } from "react";
+
 // src/menus/BubbleMenuPreset.tsx
 import React5, { useEffect as useEffect3, useRef as useRef2 } from "react";
 import { createPortal } from "react-dom";
@@ -1035,7 +1038,6 @@ import { isTextSelection } from "@blockslides/core";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var BubbleMenuPreset = React5.forwardRef(
   ({
-    pluginKey = "bubbleMenuPreset",
     editor,
     updateDelay,
     resizeDelay,
@@ -1055,6 +1057,7 @@ var BubbleMenuPreset = React5.forwardRef(
     onImageReplace,
     ...rest
   }, ref) => {
+    const pluginKey = "bubbleMenuPreset";
     const { editor: currentEditor } = useCurrentEditor();
     const menuEl = useRef2(null);
     useEffect3(() => {
@@ -1114,7 +1117,6 @@ var BubbleMenuPreset = React5.forwardRef(
     }, [
       editor,
       currentEditor,
-      pluginKey,
       updateDelay,
       resizeDelay,
       appendTo,
@@ -1138,6 +1140,222 @@ var BubbleMenuPreset = React5.forwardRef(
 );
 BubbleMenuPreset.displayName = "BubbleMenuPreset";
 
+// src/useSlideEditor.ts
+import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
+import { templatesV1 } from "@blockslides/ai-context";
+import {
+  ExtensionKit
+} from "@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 = useMemo2(
+    () => presetTemplates != null ? presetTemplates : templatesV1.listPresetTemplates(),
+    [presetTemplates]
+  );
+  const mergedExtensionKitOptions = useMemo2(() => {
+    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 = useMemo2(() => {
+    const 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
+  );
+  useEffect4(() => {
+    if (editor && !editor.isDestroyed) {
+      onEditorReady == null ? void 0 : onEditorReady(editor);
+    }
+  }, [editor, onEditorReady]);
+  return { editor, presets };
+};
+
+// src/SlideEditor.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var SlideEditor = forwardRef2(
+  ({
+    bubbleMenuPreset = true,
+    editorContentProps,
+    viewportScale = 1,
+    className,
+    style,
+    ...hookProps
+  }, ref) => {
+    const { editor } = useSlideEditor(hookProps);
+    const bubbleMenuProps = useMemo3(() => {
+      if (bubbleMenuPreset === false) return null;
+      if (bubbleMenuPreset === true) return {};
+      return bubbleMenuPreset;
+    }, [bubbleMenuPreset]);
+    if (!editor) return null;
+    return /* @__PURE__ */ jsx9("div", { ref, className, style, children: /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "bs-viewport",
+        style: { ["--zoom"]: viewportScale },
+        children: [
+          /* @__PURE__ */ jsx9(EditorContent, { editor, ...editorContentProps }),
+          bubbleMenuProps && /* @__PURE__ */ jsx9(BubbleMenuPreset, { editor, ...bubbleMenuProps })
+        ]
+      }
+    ) });
+  }
+);
+SlideEditor.displayName = "SlideEditor";
+
 // src/index.ts
 export * from "@blockslides/core";
 export {
@@ -1158,9 +1376,11 @@ export {
   ReactNodeViewContext,
   ReactNodeViewRenderer,
   ReactRenderer,
+  SlideEditor as ReactSlideEditor,
   useCurrentEditor,
   useEditor,
   useEditorState,
-  useReactNodeView
+  useReactNodeView,
+  useSlideEditor
 };
 //# sourceMappingURL=index.js.map