@particle-academy/fancy-slides 0.6.0 → 0.7.0

package/dist/index.d.cts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties } from 'react';
 import { h as Slide$1, o as Theme, j as SlideElement, D as Deck, d as DeckOp, g as ShapeKind, l as SlideTransition, i as SlideBackground, E as ElementAnimation, m as TextElement, I as ImageElement, S as ShapeElement, k as SlideLayout } from './types-9BbelJX1.cjs';
 export { A as AnimationEffect, a as AnimationTrigger, C as ChartElement, b as CodeElement, c as DeckActivity, e as ElementBase, f as EmbedElement, T as TableElement, n as TextStyle, p as ThemeColors, q as ThemeFonts, r as TransitionKind } from './types-9BbelJX1.cjs';
+import { EditorAction } from '@particle-academy/react-fancy';
 
 interface SlideProps {
     /** The slide to render. */
@@ -181,6 +182,16 @@ interface SlideThumbnailProps {
  * presenter view, and anywhere else a deck wants to show its slides as
  * thumbnails. Re-uses the shared <Slide> so the layout matches the viewer
  * exactly — no second rendering path.
+ *
+ * The slide is rendered at its full DESIGN width and the whole thing is
+ * CSS-`scale()`d down to the thumbnail size (the same approach fancy-artboard
+ * uses for its piece previews). Scaling the rendered output — rather than
+ * rendering the slide *at* the thumbnail width — is what makes heavy embedded
+ * surfaces (ECharts charts, the fancy-code editor) shrink proportionally:
+ * those render at fixed internal font sizes that ignore `slideWidthPx`, so a
+ * directly-undersized render leaves them oversized in the thumb. A uniform
+ * transform shrinks everything identically, so the thumb is a faithful
+ * miniature of the live slide.
  */
 declare function SlideThumbnail({ slide, theme, width, active, onClick, onContextMenu, renderElement, className, style, }: SlideThumbnailProps): react_jsx_runtime.JSX.Element;
 
@@ -474,6 +485,29 @@ interface TextElementRendererProps {
  */
 declare function TextElementRenderer({ element, theme, slideWidthPx, editing, selected, onContentChange, paraReveal, }: TextElementRendererProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Presentation-tuned toolbar preset for the react-fancy `Editor` used to edit
+ * slide text inline. Only commands that round-trip cleanly through the editor's
+ * `htmlToMarkdown` output are included — bold (`**`), italic (`*`), heading
+ * (`## `), and bullet list (`- `). Box-level typography (alignment, color, font
+ * size, line height) is NOT here: those are per-element `TextStyle` properties
+ * edited in the ElementInspector, and `text-align`/color spans don't survive the
+ * markdown the slide content commits to.
+ */
+declare const PRESENTATION_EDITOR_ACTIONS: EditorAction[];
+/**
+ * Normalize the `Editor`'s markdown output to the *line-based* paragraph model
+ * the slide content commits to. The editor emits a blank line (`\n\n`) between
+ * `<p>` blocks, but `splitParagraphs` (and the dark-slide pptx writer) treat a
+ * single `\n` as one paragraph / build unit, and a blank interior line as its
+ * own (phantom) build. Collapsing runs of newlines to a single `\n` keeps
+ * "by paragraph" reveals and per-paragraph pptx builds correct — bullets are
+ * already one-per-`\n`, so they're unaffected. The round-trip invariant
+ * (`content → Editor → normalize → content` preserves the `\n` paragraph count)
+ * is covered by a unit test.
+ */
+declare function normalizeSlideMarkdown(md: string): string;
+
 interface ImageElementRendererProps {
     element: ImageElement;
 }
@@ -637,4 +671,4 @@ type ChartKind = "bar" | "line" | "pie" | "area" | "scatter";
 type Option = Record<string, unknown>;
 declare function chartStarterOption(kind: ChartKind): Option;
 
-export { type Build, type BuildStep, type ChartKind$1 as ChartKind, Deck, DeckEditor, type DeckEditorProps, DeckOp, type DeckStateApi, EditorToolbar, type EditorToolbarProps, ElementAnimation, ElementInspector, type ElementInspectorProps, ImageElement, ImageElementRenderer, type ImageElementRendererProps, type ParaReveal, PresenterView, type PresenterViewProps, ShapeElement, ShapeElementRenderer, type ShapeElementRendererProps, ShapeKind, Slide, SlideBackground, type SlideContextValue, Slide$1 as SlideData, SlideElement, type SlideKeyboardOptions, SlideLayout, type SlideProps, SlideRail, type SlideRailProps, SlideThumbnail, type SlideThumbnailProps, SlideTransition, SlideViewer, type SlideViewerProps, SpeakerNotes, type SpeakerNotesProps, TextElement, TextElementRenderer, type TextElementRendererProps, Theme, type UseDeckStateOptions, buildSteps, buildsForStep, builtinThemes, chartStarterOption, collectBuilds, darkTheme, deckId, defaultTheme, defineTheme, elementId, isByParagraph, nextId, paragraphReveals, reduce as reduceDeck, resolveTheme, slideId, splitParagraphs, stepDelays, totalBuildSteps, useDeckState, useIsDarkSlide, useSlideContext, useSlideKeyboard, useSlideTheme, visibleElementIds, vividTheme };
+export { type Build, type BuildStep, type ChartKind$1 as ChartKind, Deck, DeckEditor, type DeckEditorProps, DeckOp, type DeckStateApi, EditorToolbar, type EditorToolbarProps, ElementAnimation, ElementInspector, type ElementInspectorProps, ImageElement, ImageElementRenderer, type ImageElementRendererProps, PRESENTATION_EDITOR_ACTIONS, type ParaReveal, PresenterView, type PresenterViewProps, ShapeElement, ShapeElementRenderer, type ShapeElementRendererProps, ShapeKind, Slide, SlideBackground, type SlideContextValue, Slide$1 as SlideData, SlideElement, type SlideKeyboardOptions, SlideLayout, type SlideProps, SlideRail, type SlideRailProps, SlideThumbnail, type SlideThumbnailProps, SlideTransition, SlideViewer, type SlideViewerProps, SpeakerNotes, type SpeakerNotesProps, TextElement, TextElementRenderer, type TextElementRendererProps, Theme, type UseDeckStateOptions, buildSteps, buildsForStep, builtinThemes, chartStarterOption, collectBuilds, darkTheme, deckId, defaultTheme, defineTheme, elementId, isByParagraph, nextId, normalizeSlideMarkdown, paragraphReveals, reduce as reduceDeck, resolveTheme, slideId, splitParagraphs, stepDelays, totalBuildSteps, useDeckState, useIsDarkSlide, useSlideContext, useSlideKeyboard, useSlideTheme, visibleElementIds, vividTheme };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties } from 'react';
 import { h as Slide$1, o as Theme, j as SlideElement, D as Deck, d as DeckOp, g as ShapeKind, l as SlideTransition, i as SlideBackground, E as ElementAnimation, m as TextElement, I as ImageElement, S as ShapeElement, k as SlideLayout } from './types-9BbelJX1.js';
 export { A as AnimationEffect, a as AnimationTrigger, C as ChartElement, b as CodeElement, c as DeckActivity, e as ElementBase, f as EmbedElement, T as TableElement, n as TextStyle, p as ThemeColors, q as ThemeFonts, r as TransitionKind } from './types-9BbelJX1.js';
+import { EditorAction } from '@particle-academy/react-fancy';
 
 interface SlideProps {
     /** The slide to render. */
@@ -181,6 +182,16 @@ interface SlideThumbnailProps {
  * presenter view, and anywhere else a deck wants to show its slides as
  * thumbnails. Re-uses the shared <Slide> so the layout matches the viewer
  * exactly — no second rendering path.
+ *
+ * The slide is rendered at its full DESIGN width and the whole thing is
+ * CSS-`scale()`d down to the thumbnail size (the same approach fancy-artboard
+ * uses for its piece previews). Scaling the rendered output — rather than
+ * rendering the slide *at* the thumbnail width — is what makes heavy embedded
+ * surfaces (ECharts charts, the fancy-code editor) shrink proportionally:
+ * those render at fixed internal font sizes that ignore `slideWidthPx`, so a
+ * directly-undersized render leaves them oversized in the thumb. A uniform
+ * transform shrinks everything identically, so the thumb is a faithful
+ * miniature of the live slide.
  */
 declare function SlideThumbnail({ slide, theme, width, active, onClick, onContextMenu, renderElement, className, style, }: SlideThumbnailProps): react_jsx_runtime.JSX.Element;
 
@@ -474,6 +485,29 @@ interface TextElementRendererProps {
  */
 declare function TextElementRenderer({ element, theme, slideWidthPx, editing, selected, onContentChange, paraReveal, }: TextElementRendererProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Presentation-tuned toolbar preset for the react-fancy `Editor` used to edit
+ * slide text inline. Only commands that round-trip cleanly through the editor's
+ * `htmlToMarkdown` output are included — bold (`**`), italic (`*`), heading
+ * (`## `), and bullet list (`- `). Box-level typography (alignment, color, font
+ * size, line height) is NOT here: those are per-element `TextStyle` properties
+ * edited in the ElementInspector, and `text-align`/color spans don't survive the
+ * markdown the slide content commits to.
+ */
+declare const PRESENTATION_EDITOR_ACTIONS: EditorAction[];
+/**
+ * Normalize the `Editor`'s markdown output to the *line-based* paragraph model
+ * the slide content commits to. The editor emits a blank line (`\n\n`) between
+ * `<p>` blocks, but `splitParagraphs` (and the dark-slide pptx writer) treat a
+ * single `\n` as one paragraph / build unit, and a blank interior line as its
+ * own (phantom) build. Collapsing runs of newlines to a single `\n` keeps
+ * "by paragraph" reveals and per-paragraph pptx builds correct — bullets are
+ * already one-per-`\n`, so they're unaffected. The round-trip invariant
+ * (`content → Editor → normalize → content` preserves the `\n` paragraph count)
+ * is covered by a unit test.
+ */
+declare function normalizeSlideMarkdown(md: string): string;
+
 interface ImageElementRendererProps {
     element: ImageElement;
 }
@@ -637,4 +671,4 @@ type ChartKind = "bar" | "line" | "pie" | "area" | "scatter";
 type Option = Record<string, unknown>;
 declare function chartStarterOption(kind: ChartKind): Option;
 
-export { type Build, type BuildStep, type ChartKind$1 as ChartKind, Deck, DeckEditor, type DeckEditorProps, DeckOp, type DeckStateApi, EditorToolbar, type EditorToolbarProps, ElementAnimation, ElementInspector, type ElementInspectorProps, ImageElement, ImageElementRenderer, type ImageElementRendererProps, type ParaReveal, PresenterView, type PresenterViewProps, ShapeElement, ShapeElementRenderer, type ShapeElementRendererProps, ShapeKind, Slide, SlideBackground, type SlideContextValue, Slide$1 as SlideData, SlideElement, type SlideKeyboardOptions, SlideLayout, type SlideProps, SlideRail, type SlideRailProps, SlideThumbnail, type SlideThumbnailProps, SlideTransition, SlideViewer, type SlideViewerProps, SpeakerNotes, type SpeakerNotesProps, TextElement, TextElementRenderer, type TextElementRendererProps, Theme, type UseDeckStateOptions, buildSteps, buildsForStep, builtinThemes, chartStarterOption, collectBuilds, darkTheme, deckId, defaultTheme, defineTheme, elementId, isByParagraph, nextId, paragraphReveals, reduce as reduceDeck, resolveTheme, slideId, splitParagraphs, stepDelays, totalBuildSteps, useDeckState, useIsDarkSlide, useSlideContext, useSlideKeyboard, useSlideTheme, visibleElementIds, vividTheme };
+export { type Build, type BuildStep, type ChartKind$1 as ChartKind, Deck, DeckEditor, type DeckEditorProps, DeckOp, type DeckStateApi, EditorToolbar, type EditorToolbarProps, ElementAnimation, ElementInspector, type ElementInspectorProps, ImageElement, ImageElementRenderer, type ImageElementRendererProps, PRESENTATION_EDITOR_ACTIONS, type ParaReveal, PresenterView, type PresenterViewProps, ShapeElement, ShapeElementRenderer, type ShapeElementRendererProps, ShapeKind, Slide, SlideBackground, type SlideContextValue, Slide$1 as SlideData, SlideElement, type SlideKeyboardOptions, SlideLayout, type SlideProps, SlideRail, type SlideRailProps, SlideThumbnail, type SlideThumbnailProps, SlideTransition, SlideViewer, type SlideViewerProps, SpeakerNotes, type SpeakerNotesProps, TextElement, TextElementRenderer, type TextElementRendererProps, Theme, type UseDeckStateOptions, buildSteps, buildsForStep, builtinThemes, chartStarterOption, collectBuilds, darkTheme, deckId, defaultTheme, defineTheme, elementId, isByParagraph, nextId, normalizeSlideMarkdown, paragraphReveals, reduce as reduceDeck, resolveTheme, slideId, splitParagraphs, stepDelays, totalBuildSteps, useDeckState, useIsDarkSlide, useSlideContext, useSlideKeyboard, useSlideTheme, visibleElementIds, vividTheme };

package/dist/index.js

@@ -2,8 +2,8 @@ import { defaultElementRegistry } from './chunk-YEJZYKVB.js';
 import { isDarkColor, SlideContext } from './chunk-WIUXPQAK.js';
 export { useIsDarkSlide, useSlideContext, useSlideTheme } from './chunk-WIUXPQAK.js';
 import { useId, useRef, useState, useEffect, useMemo, useCallback } from 'react';
-import { ContentRenderer, Text, Action, ContextMenu, Separator, Tooltip, Dropdown, Badge, Heading, Tabs, Card, Select, Input, ColorPicker, Slider, Switch, Textarea } from '@particle-academy/react-fancy';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Editor, ContentRenderer, Text, Action, ContextMenu, Separator, Tooltip, Dropdown, Badge, Heading, Tabs, Card, Select, Input, ColorPicker, Slider, Switch, Textarea } from '@particle-academy/react-fancy';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/theme/default-theme.ts
 var defaultTheme = {
@@ -268,6 +268,18 @@ var BUILD_KEYFRAMES = `
     }
 }
 `;
+
+// src/components/elements/TextElement/editor-preset.ts
+var PRESENTATION_EDITOR_ACTIONS = [
+  { icon: "B", label: "Bold", command: "bold" },
+  { icon: "I", label: "Italic", command: "italic" },
+  { icon: "H", label: "Heading", command: "formatBlock", commandArg: "<h2>" },
+  { icon: "P", label: "Paragraph", command: "formatBlock", commandArg: "<p>" },
+  { icon: "\u2022", label: "Bullet list", command: "insertUnorderedList" }
+];
+function normalizeSlideMarkdown(md) {
+  return md.replace(/\r\n/g, "\n").replace(/\n{2,}/g, "\n").replace(/[ \t]+$/gm, "").trim();
+}
 function TextElementRenderer({
   element,
   theme,
@@ -306,19 +318,58 @@ function TextElementRenderer({
     overflow: "hidden"
   };
   if (editing && selected) {
-    return /* @__PURE__ */ jsx(
-      "textarea",
+    const fontPx = Math.round((style.fontSize ?? 28) * scale);
+    const lh = style.lineHeight ?? 1.4;
+    const editScope = scopeId;
+    return /* @__PURE__ */ jsxs(
+      "div",
       {
-        value: element.content,
-        onChange: (e) => onContentChange?.(e.target.value),
+        "data-fs-edit-scope": editScope,
         style: {
-          ...css,
-          whiteSpace: "pre-wrap",
-          resize: "none",
-          border: "none",
+          width: "100%",
+          height: "100%",
           pointerEvents: "auto",
-          cursor: "text"
-        }
+          cursor: "text",
+          textAlign: style.align ?? "left",
+          color: style.color ?? t.colors?.text,
+          fontFamily: style.fontFamily ?? t.fonts?.body
+        },
+        onPointerDown: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx("style", { children: `
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor] {
+                        border: none; background: transparent; border-radius: 0;
+                        height: 100%; display: flex; flex-direction: column; overflow: hidden;
+                    }
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor-toolbar] {
+                        background: rgba(244,244,245,0.85); border-radius: 6px 6px 0 0;
+                        padding: 2px 4px;
+                    }
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor-content] {
+                        flex: 1; min-height: 0; padding: 4px 2px; overflow: auto;
+                        font-size: ${fontPx}px; line-height: ${lh};
+                    }
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor-content] :is(p, ul, ol, li) { font-size: inherit; margin: 0; }
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor-content] :where(p, li) + :where(p, li, ul, ol) { margin-top: 0.4em; }
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor-content] h1 { font-size: 1.6em; font-weight: 700; margin: 0; }
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor-content] h2 { font-size: 1.35em; font-weight: 700; margin: 0; }
+                    [data-fs-edit-scope="${editScope}"] [data-react-fancy-editor-content] h3 { font-size: 1.15em; font-weight: 600; margin: 0; }
+                ` }),
+          /* @__PURE__ */ jsxs(
+            Editor,
+            {
+              value: element.content,
+              onChange: (md) => onContentChange?.(normalizeSlideMarkdown(md)),
+              outputFormat: "markdown",
+              lineSpacing: lh,
+              children: [
+                /* @__PURE__ */ jsx(Editor.Toolbar, { actions: PRESENTATION_EDITOR_ACTIONS }),
+                /* @__PURE__ */ jsx(Editor.Content, {})
+              ]
+            },
+            element.id
+          )
+        ]
       }
     );
   }
@@ -1407,6 +1458,11 @@ function SlideThumbnail({
   className,
   style
 }) {
+  const resolved = resolveTheme(theme);
+  const ratio = resolved.aspectRatio ?? 16 / 9;
+  const designWidth = resolved.slideWidth ?? 1280;
+  const scale = width / designWidth;
+  const height = width / ratio;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1419,12 +1475,27 @@ function SlideThumbnail({
         boxShadow: active ? "0 0 0 3px rgba(139, 92, 246, 0.2)" : "0 1px 2px rgba(0,0,0,0.05)",
         background: "#ffffff",
         width,
+        height,
         ...style
       },
       onClick,
       onContextMenu,
       "data-fancy-slides-thumbnail": slide.id,
-      children: /* @__PURE__ */ jsx(Slide, { slide, theme, width, renderElement })
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: designWidth,
+            height: designWidth / ratio,
+            transform: `scale(${scale})`,
+            transformOrigin: "top left",
+            // The thumb owns interaction — charts/code/iframes inside the
+            // scaled slide shouldn't capture clicks.
+            pointerEvents: "none"
+          },
+          children: /* @__PURE__ */ jsx(Slide, { slide, theme, width: designWidth, renderElement })
+        }
+      )
     }
   );
 }
@@ -2861,7 +2932,7 @@ function DeckEditor({
                     slide,
                     theme: deck.theme,
                     editing: true,
-                    onElementContentChange: (eid, content) => ops.updateElement(slide.id, eid, { content }),
+                    onElementContentChange: (eid, content) => ops.updateElement(slide.id, eid, { content, format: "markdown" }),
                     onElementSelect: setElementIdSelected,
                     selectedElementId: elementIdSelected,
                     onElementMove: (eid, x, y) => ops.moveElement(slide.id, eid, x, y),
@@ -2898,6 +2969,6 @@ function DeckEditor({
   );
 }
 
-export { DeckEditor, EditorToolbar, ElementInspector, ImageElementRenderer, PresenterView, ShapeElementRenderer, Slide, SlideRail, SlideThumbnail, SlideViewer, SpeakerNotes, TextElementRenderer, buildSteps, buildsForStep, builtinThemes, chartStarterOption, collectBuilds, darkTheme, deckId, defaultTheme, defineTheme, elementId, isByParagraph, nextId, paragraphReveals, reduce as reduceDeck, resolveTheme, slideId, splitParagraphs, stepDelays, totalBuildSteps, useDeckState, useSlideKeyboard, visibleElementIds, vividTheme };
+export { DeckEditor, EditorToolbar, ElementInspector, ImageElementRenderer, PRESENTATION_EDITOR_ACTIONS, PresenterView, ShapeElementRenderer, Slide, SlideRail, SlideThumbnail, SlideViewer, SpeakerNotes, TextElementRenderer, buildSteps, buildsForStep, builtinThemes, chartStarterOption, collectBuilds, darkTheme, deckId, defaultTheme, defineTheme, elementId, isByParagraph, nextId, normalizeSlideMarkdown, paragraphReveals, reduce as reduceDeck, resolveTheme, slideId, splitParagraphs, stepDelays, totalBuildSteps, useDeckState, useSlideKeyboard, visibleElementIds, vividTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map