@particle-academy/fancy-slides 0.6.1 → 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
+          )
+        ]
       }
     );
   }
@@ -3132,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),
@@ -3173,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;
@@ -3193,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;