@blockslides/react-prebuilts 0.1.0

package/src/menus/BubbleMenuPreset.tsx

@@ -0,0 +1,144 @@
+import React, { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import { useCurrentEditor } from '@blockslides/react'
+import {
+  BubbleMenuPlugin,
+  type BubbleMenuPluginProps,
+} from '@blockslides/extension-bubble-menu'
+import { NodeSelection } from '@blockslides/pm/state'
+import {
+  type BubbleMenuPresetOptions,
+  buildMenuElement,
+  DEFAULT_ITEMS,
+  DEFAULT_COLOR_PALETTE,
+  DEFAULT_HIGHLIGHT_PALETTE,
+  DEFAULT_FONTS,
+  DEFAULT_FONT_SIZES,
+  DEFAULT_ALIGNMENTS,
+} from '@blockslides/extension-bubble-menu-preset'
+import { isNodeSelection, isTextSelection, type Editor } from '@blockslides/core'
+
+export type BubbleMenuPresetProps = Omit<BubbleMenuPresetOptions, 'element' | 'pluginKey'> &
+  React.HTMLAttributes<HTMLElement> & {
+    editor?: Editor | null
+  }
+
+export const BubbleMenuPreset = React.forwardRef<HTMLElement, BubbleMenuPresetProps>(
+  (
+    {
+      editor,
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      shouldShow,
+      getReferencedVirtualElement,
+      options,
+      items,
+      className,
+      injectStyles,
+      textColors,
+      highlightColors,
+      fonts,
+      fontSizes,
+      alignments,
+      onTextAction,
+      onImageReplace,
+      ...rest
+    },
+    ref,
+  ) => {
+    const pluginKey = 'bubbleMenuPreset'
+    const { editor: currentEditor } = useCurrentEditor()
+    const menuEl = useRef<HTMLElement | null>(null)
+
+    useEffect(() => {
+      const attachToEditor = (editor || currentEditor) as Editor | null
+      if (!attachToEditor || (attachToEditor as any).isDestroyed) {
+        return
+      }
+
+      const { element, cleanup } = buildMenuElement(attachToEditor, {
+        items: items ?? DEFAULT_ITEMS,
+        className: className ?? '',
+        injectStyles: injectStyles !== false,
+        textColors: textColors ?? DEFAULT_COLOR_PALETTE,
+        highlightColors: highlightColors ?? DEFAULT_HIGHLIGHT_PALETTE,
+        fonts: fonts ?? DEFAULT_FONTS,
+        fontSizes: fontSizes ?? DEFAULT_FONT_SIZES,
+        alignments: alignments ?? DEFAULT_ALIGNMENTS,
+        onTextAction,
+        onImageReplace,
+      })
+
+      menuEl.current = element
+
+      if (typeof ref === 'function') {
+        ref(element)
+      } else if (ref) {
+        ;(ref as React.MutableRefObject<HTMLElement | null>).current = element
+      }
+
+      const defaultShouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({
+        state,
+        editor,
+      }) => {
+        const sel = state.selection
+        const imageSelection =
+          (sel instanceof NodeSelection &&
+            ['image', 'imageBlock'].includes((sel as any).node?.type?.name)) ||
+          editor.isActive('image') ||
+          editor.isActive('imageBlock')
+
+        if (imageSelection) return true
+        if (isTextSelection(sel) && !sel.empty && !imageSelection) return true
+        return false
+      }
+
+      const plugin = BubbleMenuPlugin({
+        editor: attachToEditor,
+        element,
+        updateDelay,
+        resizeDelay,
+        appendTo,
+        pluginKey,
+        shouldShow: shouldShow ?? defaultShouldShow,
+        getReferencedVirtualElement,
+        options,
+      })
+
+      attachToEditor.registerPlugin(plugin)
+
+      return () => {
+        attachToEditor.unregisterPlugin(pluginKey)
+        cleanup?.()
+        if (element.parentNode) {
+          element.parentNode.removeChild(element)
+        }
+      }
+    }, [
+      editor,
+      currentEditor,
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      shouldShow,
+      getReferencedVirtualElement,
+      options,
+      items,
+      className,
+      injectStyles,
+      textColors,
+      highlightColors,
+      fonts,
+      fontSizes,
+      alignments,
+      onTextAction,
+      onImageReplace,
+      ref,
+    ])
+
+    return menuEl.current ? createPortal(<div {...rest} />, menuEl.current) : null
+  },
+)
+
+BubbleMenuPreset.displayName = 'BubbleMenuPreset'

package/src/menus/FloatingMenu.tsx

@@ -0,0 +1,69 @@
+import type { FloatingMenuPluginProps } from '@blockslides/extension-floating-menu'
+import { FloatingMenuPlugin } from '@blockslides/extension-floating-menu'
+import { useCurrentEditor } from '@blockslides/react'
+import React, { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {
+  editor: FloatingMenuPluginProps['editor'] | null
+  options?: FloatingMenuPluginProps['options']
+} & React.HTMLAttributes<HTMLDivElement>
+
+export const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(
+  ({ pluginKey = 'floatingMenu', editor, appendTo, shouldShow = null, options, children, ...restProps }, ref) => {
+    const menuEl = useRef(document.createElement('div'))
+
+    if (typeof ref === 'function') {
+      ref(menuEl.current)
+    } else if (ref) {
+      ref.current = menuEl.current
+    }
+
+    const { editor: currentEditor } = useCurrentEditor()
+
+    useEffect(() => {
+      const floatingMenuElement = menuEl.current
+
+      floatingMenuElement.style.visibility = 'hidden'
+      floatingMenuElement.style.position = 'absolute'
+
+      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {
+        return
+      }
+
+      const attachToEditor = editor || currentEditor
+
+      if (!attachToEditor) {
+        console.warn(
+          'FloatingMenu component is not rendered inside of an editor component or does not have editor prop.',
+        )
+        return
+      }
+
+      const plugin = FloatingMenuPlugin({
+        editor: attachToEditor,
+        element: floatingMenuElement,
+        pluginKey,
+        appendTo,
+        shouldShow,
+        options,
+      })
+
+      attachToEditor.registerPlugin(plugin)
+
+      return () => {
+        attachToEditor.unregisterPlugin(pluginKey)
+        window.requestAnimationFrame(() => {
+          if (floatingMenuElement.parentNode) {
+            floatingMenuElement.parentNode.removeChild(floatingMenuElement)
+          }
+        })
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editor, currentEditor, appendTo, pluginKey, shouldShow, options])
+
+    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)
+  },
+)

package/src/menus/index.ts

@@ -0,0 +1,3 @@
+export * from './BubbleMenu.js'
+export * from './FloatingMenu.js'
+export * from './BubbleMenuPreset.js'

package/src/useSlideEditor.ts

@@ -0,0 +1,250 @@
+import { useEffect, useMemo } from "react";
+import type { DependencyList } from "react";
+import { templatesV1 } from "@blockslides/ai-context";
+import type { AnyExtension, Editor, JSONContent } from "@blockslides/core";
+import type { SlideOptions } from "@blockslides/extension-slide";
+import {
+  ExtensionKit,
+  type ExtensionKitOptions,
+} from "@blockslides/extension-kit";
+
+import {
+  useEditor,
+  type UseEditorOptions,
+} from "@blockslides/react";
+
+type PresetTemplates = ReturnType<typeof templatesV1.listPresetTemplates>;
+
+export 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">;
+
+const 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. ",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+});
+
+const defaultAddSlideButton = (presets: PresetTemplates) => ({
+  showPresets: true,
+  presets,
+  presetBackground: "#0f172a",
+  presetForeground: "#e5e7eb",
+});
+
+const defaultSlideOptions: Partial<SlideOptions> = {
+  renderMode: "dynamic",
+  hoverOutline: { color: "#3b82f6", width: "1.5px", offset: "4px" },
+  hoverOutlineCascade: false,
+};
+
+export const useSlideEditor = ({
+  content,
+  onChange,
+  extensions,
+  extensionKitOptions,
+  presetTemplates,
+  deps = [],
+  onEditorReady,
+  immediatelyRender = false,
+  shouldRerenderOnTransaction = false,
+  theme = "light",
+  editorProps,
+  onUpdate,
+  ...editorOptions
+}: UseSlideEditorProps = {}) => {
+
+
+  /**
+   * Presets for add slide button.
+   */
+  const presets = useMemo<PresetTemplates>(
+    () => presetTemplates ?? templatesV1.listPresetTemplates(),
+    [presetTemplates]
+  );
+
+  const mergedExtensionKitOptions = useMemo<ExtensionKitOptions>(() => {
+    const addSlideButton =
+      extensionKitOptions?.addSlideButton === false
+        ? false
+        : {
+            ...defaultAddSlideButton(presets),
+            ...(extensionKitOptions?.addSlideButton ?? {}),
+          };
+
+    const slide =
+      extensionKitOptions?.slide === false
+        ? false
+        : {
+            ...defaultSlideOptions,
+            ...(extensionKitOptions?.slide ?? {}),
+          };
+
+    return {
+      ...extensionKitOptions,
+      addSlideButton,
+      slide,
+    };
+  }, [extensionKitOptions, presets]);
+
+  const resolvedExtensions = useMemo<AnyExtension[]>(() => {
+    const kit = ExtensionKit.configure(mergedExtensionKitOptions);
+    return extensions ? [kit, ...extensions] : [kit];
+  }, [extensions, mergedExtensionKitOptions]);
+
+  /**
+   * Initial content for the editor.
+   * content, initialContent, defaultValue, value etc are all the same thing
+   */
+  const initialContent = 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",
+          ...(editorProps?.attributes ?? {}),
+        },
+        ...editorProps,
+      },
+      ...editorOptions,
+      onUpdate: (ctx) => {
+        const json = ctx.editor.getJSON();
+        onChange?.(json, ctx.editor);
+        onUpdate?.(ctx);
+      },
+    },
+    deps
+  );
+
+  useEffect(() => {
+    if (editor && !editor.isDestroyed) {
+      onEditorReady?.(editor);
+    }
+  }, [editor, onEditorReady]);
+
+  return { editor, presets };
+};