@bycrux/editor 0.8.1 → 0.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bycrux/editor",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "private": false,
   "type": "module",
   "exports": {

package/src/carousel/SlideCanvas.tsx

@@ -122,6 +122,69 @@ interface Props {
   hiddenElementIds?: string[]
 }
 
+// Plain default for the inline editor when we can't read the rendered text's
+// real style (e.g. no matching node found).
+const FALLBACK_EDIT_STYLE: Partial<CSSStyleDeclaration> = {
+  color: '#ffffff',
+  fontSize: '18px',
+  fontFamily: 'system-ui, sans-serif',
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-word',
+}
+
+// Find the innermost element under `root` whose full text equals `text` — the
+// overlay's text container. Used to copy its computed style onto the editor.
+function findTextNode(root: HTMLElement, text: string): HTMLElement | null {
+  const want = text.trim()
+  if (!want) return null
+  const matches: HTMLElement[] = []
+  const walk = (el: HTMLElement) => {
+    if ((el.textContent ?? '').trim() === want) matches.push(el)
+    for (const child of Array.from(el.children)) {
+      if (child instanceof HTMLElement) walk(child)
+    }
+  }
+  walk(root)
+  if (matches.length === 0) return null
+  // Innermost match = the one with the fewest descendant elements.
+  return matches.reduce((best, el) =>
+    el.querySelectorAll('*').length < best.querySelectorAll('*').length ? el : best,
+  )
+}
+
+// Snapshot the rendered overlay text's computed style so the inline editor
+// matches it instead of a generic stub. Overlays are authored at native slide
+// pixels then CSS-scaled by `scale`; the editor is positioned in already-scaled
+// display coords with no transform, so px metrics must be multiplied by `scale`.
+// Returns null when no text node is found (caller falls back).
+function captureTextStyle(
+  wrapper: HTMLElement | undefined,
+  text: string,
+  scale: number,
+): Partial<CSSStyleDeclaration> | null {
+  if (!wrapper || typeof window === 'undefined') return null
+  const target = findTextNode(wrapper, text)
+  if (!target) return null
+  const cs = window.getComputedStyle(target)
+  const scalePx = (v: string) => {
+    const n = parseFloat(v)
+    return Number.isFinite(n) ? `${n * scale}px` : v
+  }
+  return {
+    color: cs.color,
+    fontFamily: cs.fontFamily,
+    fontWeight: cs.fontWeight,
+    fontStyle: cs.fontStyle,
+    textAlign: cs.textAlign,
+    textTransform: cs.textTransform,
+    fontSize: scalePx(cs.fontSize),
+    lineHeight: cs.lineHeight === 'normal' ? 'normal' : scalePx(cs.lineHeight),
+    letterSpacing: cs.letterSpacing === 'normal' ? 'normal' : scalePx(cs.letterSpacing),
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+  } as Partial<CSSStyleDeclaration>
+}
+
 export default function SlideCanvas({
   slide,
   slideId,
@@ -158,6 +221,7 @@ export default function SlideCanvas({
   // Inline text edit state.
   const [editingId, setEditingId] = useState<string | null>(null)
   const [editRect, setEditRect] = useState<{ left: number; top: number; width: number; height: number } | null>(null)
+  const [editStyle, setEditStyle] = useState<Partial<CSSStyleDeclaration> | null>(null)
 
   // Crop mode local state — source fraction window + loaded natural dims.
   const [cropState, setCropState] = useState<CropMode>(null)
@@ -266,6 +330,10 @@ export default function SlideCanvas({
   // ── Inline text edit ──
   function beginTextEdit(element: OverlayElement) {
     if (!interactive || typeof element.overlay.props.text !== 'string') return
+    // Snapshot the live text's style BEFORE we hide it / re-render.
+    setEditStyle(
+      captureTextStyle(wrapperRefs.current.get(element.id), element.overlay.props.text, scale),
+    )
     setEditRect({
       left: element.x * scale,
       top: element.y * scale,
@@ -275,10 +343,15 @@ export default function SlideCanvas({
     setEditingId(element.id)
   }
 
-  function commitTextEdit(element: OverlayElement, value: string) {
-    void updateOverlayProp?.(sid, element.id, 'text', value)
+  function endTextEdit() {
     setEditingId(null)
     setEditRect(null)
+    setEditStyle(null)
+  }
+
+  function commitTextEdit(element: OverlayElement, value: string) {
+    void updateOverlayProp?.(sid, element.id, 'text', value)
+    endTextEdit()
   }
 
   // ── Pointer wiring shared by drag/resize/rotate ──
@@ -461,6 +534,9 @@ export default function SlideCanvas({
                   height: element.h,
                   transform: `scale(${scale})`,
                   transformOrigin: 'top left',
+                  // Hide the live text while it's being edited in place so the
+                  // InlineTextEditor isn't doubled over it.
+                  visibility: editingId === element.id ? 'hidden' : undefined,
                 }}
               >
                 <OverlayErrorBoundary
@@ -637,16 +713,10 @@ export default function SlideCanvas({
               key={editingId}
               initialValue={initial}
               rect={editRect}
-              styleSnapshot={{
-                color: '#ffffff',
-                fontSize: '18px',
-                fontFamily: 'system-ui, sans-serif',
-                whiteSpace: 'pre-wrap',
-                wordBreak: 'break-word',
-              }}
+              styleSnapshot={editStyle ?? FALLBACK_EDIT_STYLE}
               onChange={() => {}}
               onCommit={(value) => commitTextEdit(el, value)}
-              onCancel={() => { setEditingId(null); setEditRect(null) }}
+              onCancel={endTextEdit}
             />
           )
         })()}

package/src/schema.ts

@@ -77,6 +77,8 @@ export interface VisualItem {
   nobg_src?: string         // video type only — ProRes 4444 .mov for final render
   nobg_preview_src?: string // video type only — VP9 WebM with alpha for browser preview
   normalizedSrc?: string    // derived per-window normalized cache; render/preview prefer it; src stays original
+  /** Source-time (original coords) the normalizedSrc cache starts at; the cache covers [normalizedInPoint, normalizedInPoint + duration]. Absent ⇒ assume it starts at the clip's inPoint (legacy rebase-to-0). */
+  normalizedInPoint?: number
   muted?: boolean         // video type only — suppress audio in preview and render
   sourceCrop?: { x: number; y: number; w: number; h: number }  // video type only — non-destructive crop of the source clip (0–1 fractions)
   sourceWidth?: number    // video type only — intrinsic width of the source clip in pixels

package/src/video/preview/__tests__/useVideoPlayback.test.ts

@@ -8,7 +8,8 @@ import { effectiveInPoint, effectiveOutPoint } from '../useVideoPlayback'
 // and must NOT rebase.
 
 describe('effectiveInPoint', () => {
-  it('rebases to 0 when normalizedSrc is the chosen src', () => {
+  it('rebases to 0 when normalizedSrc is the chosen src (legacy: no normalizedInPoint)', () => {
+    // Legacy: no normalizedInPoint → origin defaults to inPoint → effectiveInPoint = 0
     expect(effectiveInPoint({ inPoint: 496.92, normalizedSrc: '/cache/window.mp4' })).toBe(0)
   })
 
@@ -26,10 +27,25 @@ describe('effectiveInPoint', () => {
   it('defaults to 0 when inPoint is absent and no cache', () => {
     expect(effectiveInPoint({ src: '/orig.mov' })).toBe(0)
   })
+
+  // Regression: trim-after-cache — cache origin 0, inPoint trimmed to 0.9157
+  it('rebases by normalizedInPoint=0 after a start-trim (cache origin 0, inPoint 0.9157)', () => {
+    // Cache was built at origin 0. User trimmed the start to 0.9157.
+    // effectiveInPoint should be 0.9157 - 0 = 0.9157, NOT 0.
+    expect(
+      effectiveInPoint({ inPoint: 0.9157, normalizedInPoint: 0, normalizedSrc: '/cache/window.mp4' }),
+    ).toBeCloseTo(0.9157, 5)
+  })
+
+  it('rebases by a non-zero normalizedInPoint (cache origin 5, inPoint 6)', () => {
+    expect(
+      effectiveInPoint({ inPoint: 6, normalizedInPoint: 5, normalizedSrc: '/cache/window.mp4' }),
+    ).toBeCloseTo(1, 5)
+  })
 })
 
 describe('effectiveOutPoint', () => {
-  it('rebases to the window length (outPoint - inPoint) for a normalizedSrc cache', () => {
+  it('rebases to the window length (outPoint - inPoint) for a normalizedSrc cache (legacy: no normalizedInPoint)', () => {
     // original inPoint 496.92, outPoint 514.92 → 18s window cache
     expect(
       effectiveOutPoint({ inPoint: 496.92, outPoint: 514.92, normalizedSrc: '/cache/window.mp4' }),
@@ -49,4 +65,19 @@ describe('effectiveOutPoint', () => {
   it('returns undefined when no outPoint is stored', () => {
     expect(effectiveOutPoint({ inPoint: 496.92, normalizedSrc: '/cache/window.mp4' })).toBeUndefined()
   })
+
+  // Regression: trim-after-cache — cache origin 0, inPoint 0.9157, outPoint 16.97
+  it('rebases outPoint by normalizedInPoint=0 after a start-trim', () => {
+    // Cache was built at origin 0. User trimmed start to 0.9157.
+    // effectiveOutPoint = 16.97 - 0 = 16.97, NOT 16.97 - 0.9157.
+    expect(
+      effectiveOutPoint({ inPoint: 0.9157, outPoint: 16.97, normalizedInPoint: 0, normalizedSrc: '/cache/window.mp4' }),
+    ).toBeCloseTo(16.97, 5)
+  })
+
+  it('rebases outPoint by a non-zero normalizedInPoint (cache origin 5, outPoint 20)', () => {
+    expect(
+      effectiveOutPoint({ inPoint: 6, outPoint: 20, normalizedInPoint: 5, normalizedSrc: '/cache/window.mp4' }),
+    ).toBeCloseTo(15, 5)
+  })
 })

package/src/video/preview/useVideoPlayback.ts

@@ -32,41 +32,59 @@ function playbackSrcFor(clip: { src?: string; nobg_preview_src?: string; normali
 
 /**
  * The inPoint the preview should SEEK to for this clip, accounting for the
- * normalizedSrc cache rebase.
+ * normalizedSrc cache origin.
  *
- * A `normalizedSrc` cache covers exactly [inPoint, outPoint] of the original
- * and STARTS AT 0 (it is only `outPoint - inPoint` seconds long). When
- * `playbackSrcFor` chooses that cache as the playback src, seeking to the
- * original `clip.inPoint` (e.g. 496.92) would land far past the end of the
- * short file → the browser clamps to EOF and the preview freezes on the last
- * frame. So when the cache is the chosen src, the effective inPoint is 0 and
- * the window maps to [0, outPoint - inPoint].
+ * A `normalizedSrc` cache is a trimmed file that covers exactly
+ * [normalizedInPoint, normalizedInPoint + duration] of the original source and
+ * plays starting at time 0. When `playbackSrcFor` chooses the cache as the
+ * playback src, we must rebase by the cache origin so the seek position is
+ * relative to the cache's own timeline.
+ *
+ * The origin is `clip.normalizedInPoint ?? clip.inPoint ?? 0`:
+ * - When `normalizedInPoint` is set, the cache was built for a specific window
+ *   that may differ from the current inPoint (e.g. after a start-trim): the
+ *   cache still covers the new window, but we must subtract the origin so the
+ *   seek lands at the right position inside the cache.
+ * - When `normalizedInPoint` is absent (legacy), the cache was built assuming
+ *   it starts at the clip's inPoint → origin = inPoint → effectiveInPoint = 0
+ *   (reproduces the old rebase-to-0 behavior).
  *
  * This mirrors render's `collectAllItems` (montaj_assets/render/render.js),
- * which substitutes `item.normalizedSrc` as the src AND rebases inPoint to 0.
+ * which rebases inPoint by the same origin.
  *
  * The rebase applies ONLY when the cache is actually the chosen src.
  * `nobg_preview_src` takes precedence in `playbackSrcFor` and is NOT a window
  * cache (it covers the full source), so it keeps the original inPoint — exactly
  * as render's nobg path does.
  */
-export function effectiveInPoint(clip: { inPoint?: number; nobg_preview_src?: string; normalizedSrc?: string; src?: string }): number {
+export function effectiveInPoint(clip: { inPoint?: number; normalizedInPoint?: number; nobg_preview_src?: string; normalizedSrc?: string; src?: string }): number {
   const usingNormalizedCache = !clip.nobg_preview_src && !!clip.normalizedSrc
-  return usingNormalizedCache ? 0 : (clip.inPoint ?? 0)
+  if (!usingNormalizedCache) return clip.inPoint ?? 0
+  const origin = clip.normalizedInPoint ?? clip.inPoint ?? 0
+  return (clip.inPoint ?? 0) - origin
 }
 
 /**
  * The outPoint in the loaded src's own timeline. For a normalizedSrc cache the
- * stored `clip.outPoint` is in ORIGINAL-source coordinates (e.g. 514.92) while
- * the cache plays in [0, outPoint - inPoint]; the boundary/loop checks compare
- * against `video.currentTime` (cache time), so the outPoint must be rebased to
- * the window length. Returns undefined when no outPoint is stored, so callers
- * keep their existing fallback (clip.end - clip.start + effectiveInPoint).
+ * stored `clip.outPoint` is in ORIGINAL-source coordinates while the cache
+ * plays from its own time origin; the boundary/loop checks compare against
+ * `video.currentTime` (cache time), so the outPoint must be rebased by the
+ * cache origin.
+ *
+ * The origin is `clip.normalizedInPoint ?? clip.inPoint ?? 0` (same as
+ * effectiveInPoint). Legacy clips without `normalizedInPoint` default the
+ * origin to inPoint, reproducing the old (outPoint - inPoint) window-length
+ * behavior.
+ *
+ * Returns undefined when no outPoint is stored, so callers keep their existing
+ * fallback (clip.end - clip.start + effectiveInPoint).
  */
-export function effectiveOutPoint(clip: { inPoint?: number; outPoint?: number; nobg_preview_src?: string; normalizedSrc?: string; src?: string }): number | undefined {
+export function effectiveOutPoint(clip: { inPoint?: number; outPoint?: number; normalizedInPoint?: number; nobg_preview_src?: string; normalizedSrc?: string; src?: string }): number | undefined {
   if (clip.outPoint == null) return undefined
   const usingNormalizedCache = !clip.nobg_preview_src && !!clip.normalizedSrc
-  return usingNormalizedCache ? clip.outPoint - (clip.inPoint ?? 0) : clip.outPoint
+  if (!usingNormalizedCache) return clip.outPoint
+  const origin = clip.normalizedInPoint ?? clip.inPoint ?? 0
+  return clip.outPoint - origin
 }
 
 export function useVideoPlayback(

package/src/video/timeline/useItemDragDrop.ts

@@ -6,6 +6,7 @@ export interface Draggable {
   end: number
   inPoint?: number
   outPoint?: number
+  normalizedInPoint?: number
   type?: string
   sourceDuration?: number
 }