@particle-academy/fancy-slides 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -477,6 +477,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,
@@ -515,19 +527,58 @@ function TextElementRenderer({
     overflow: "hidden"
   };
   if (editing && selected) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
+    const fontPx = Math.round((style.fontSize ?? 28) * scale);
+    const lh = style.lineHeight ?? 1.4;
+    const editScope = scopeId;
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+            reactFancy.Editor,
+            {
+              value: element.content,
+              onChange: (md) => onContentChange?.(normalizeSlideMarkdown(md)),
+              outputFormat: "markdown",
+              lineSpacing: lh,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Editor.Toolbar, { actions: PRESENTATION_EDITOR_ACTIONS }),
+                /* @__PURE__ */ jsxRuntime.jsx(reactFancy.Editor.Content, {})
+              ]
+            },
+            element.id
+          )
+        ]
       }
     );
   }
@@ -1658,6 +1709,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__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1670,12 +1726,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__ */ jsxRuntime.jsx(Slide, { slide, theme, width, renderElement })
+      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Slide, { slide, theme, width: designWidth, renderElement })
+        }
+      )
     }
   );
 }
@@ -3112,7 +3183,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),
@@ -3153,6 +3224,7 @@ exports.DeckEditor = DeckEditor;
 exports.EditorToolbar = EditorToolbar;
 exports.ElementInspector = ElementInspector;
 exports.ImageElementRenderer = ImageElementRenderer;
+exports.PRESENTATION_EDITOR_ACTIONS = PRESENTATION_EDITOR_ACTIONS;
 exports.PresenterView = PresenterView;
 exports.ShapeElementRenderer = ShapeElementRenderer;
 exports.Slide = Slide;
@@ -3173,6 +3245,7 @@ exports.defineTheme = defineTheme;
 exports.elementId = elementId;
 exports.isByParagraph = isByParagraph;
 exports.nextId = nextId;
+exports.normalizeSlideMarkdown = normalizeSlideMarkdown;
 exports.paragraphReveals = paragraphReveals;
 exports.reduceDeck = reduce;
 exports.resolveTheme = resolveTheme;