@particle-academy/fancy-slides 0.6.1 → 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. */
@@ -484,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;
 }
@@ -647,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. */
@@ -484,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;
 }
@@ -647,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
+          )
+        ]
       }
     );
   }
@@ -2881,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),
@@ -2918,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