@remotion/studio 4.0.484 → 4.0.485

package/dist/components/SelectedOutlineElement.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectedOutlineElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../helpers/client-id");
@@ -49,6 +50,7 @@ const ContextMenu_1 = require("./ContextMenu");
 const effect_drag_and_drop_1 = require("./effect-drag-and-drop");
 const ForceSpecificCursor_1 = require("./ForceSpecificCursor");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const options_sidebar_tabs_1 = require("./options-sidebar-tabs");
 const selected_outline_drag_1 = require("./selected-outline-drag");
 const selected_outline_measurement_1 = require("./selected-outline-measurement");
 const selected_outline_types_1 = require("./selected-outline-types");
@@ -56,6 +58,7 @@ const selected_outline_uv_1 = require("./selected-outline-uv");
 const call_add_keyframe_1 = require("./Timeline/call-add-keyframe");
 const disable_sequence_interactivity_1 = require("./Timeline/disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./Timeline/duplicate-selected-timeline-item");
+const focus_inspector_field_1 = require("./Timeline/focus-inspector-field");
 const get_sequence_context_menu_items_1 = require("./Timeline/get-sequence-context-menu-items");
 const save_sequence_prop_1 = require("./Timeline/save-sequence-prop");
 const timeline_asset_link_1 = require("./Timeline/timeline-asset-link");
@@ -310,7 +313,7 @@ const SelectedOutlineTransformOriginHandle = ({ outline, onDraggingChange, targe
             jsx_runtime_1.jsx("circle", { cx: position.x, cy: position.y, r: 4, stroke: colors_1.BLUE, fill: "none", strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x - 8, y1: position.y, x2: position.x + 8, y2: position.y, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" }), jsx_runtime_1.jsx("line", { x1: position.x, y1: position.y - 8, x2: position.x, y2: position.y + 8, stroke: colors_1.BLUE, strokeWidth: 2, vectorEffect: "non-scaling-stroke" })
         ] }));
 };
-const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSelect, scale, target, }) => {
+const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, hovered, onContextMenuOpen, outline, onDraggingChange, onHoverChange, onSelect, onTextEditStart, scale, target, }) => {
     var _a, _b, _c, _d;
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses, setDragOverrides, clearDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -339,6 +342,9 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
         if (drag === null || interaction.shiftKey || interaction.toggleKey) {
             return;
         }
+        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
+            return;
+        }
         const startPointerX = event.clientX;
         const startPointerY = event.clientY;
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineDragStates)({
@@ -478,6 +484,14 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
         setDragOverrides,
         target,
     ]);
+    const onDoubleClick = react_1.default.useCallback((event) => {
+        if (target === undefined) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        onTextEditStart(target);
+    }, [onTextEditStart, target]);
     const onEffectDragOver = react_1.default.useCallback((event) => {
         if (effectDrop === null || !(0, effect_drag_and_drop_1.hasEffectDragType)(event.dataTransfer)) {
             return;
@@ -526,7 +540,7 @@ const SelectedOutlinePolygon = ({ allDragTargets, contextMenuValues, dragging, h
                     if (!dragging) {
                         onHoverChange(null);
                     }
-                }, onPointerDown: onPointerDown, onDragOver: effectDrop === null ? undefined : onEffectDragOver, onDragLeave: effectDrop === null ? undefined : onEffectDragLeave, onDrop: effectDrop === null ? undefined : onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
+                }, onPointerDown: onPointerDown, onDoubleClick: onDoubleClick, onDragOver: effectDrop === null ? undefined : onEffectDragOver, onDragLeave: effectDrop === null ? undefined : onEffectDragLeave, onDrop: effectDrop === null ? undefined : onEffectDrop }), jsx_runtime_1.jsx(ContextMenu_1.ContextMenuForTarget, { triggerRef: polygonRef, values: [...contextMenuValues], onOpen: onContextMenuOpen })
         ] }));
 };
 const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues, dragging, edge, outline, onDraggingChange, onContextMenuOpen, onHoverChange, onSelect, target, }) => {
@@ -554,6 +568,9 @@ const SelectedOutlineScaleEdgeLine = ({ allScaleDragTargets, contextMenuValues,
         if (interaction.shiftKey || interaction.toggleKey) {
             return;
         }
+        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
+            return;
+        }
         const startPointer = { x: event.clientX, y: event.clientY };
         const dragStates = (0, selected_outline_drag_1.getSelectedOutlineScaleDragStates)({
             dragTargets: selected ? allScaleDragTargets : [scaleDrag],
@@ -728,6 +745,9 @@ const SelectedOutlineRotationCornerHandle = ({ allRotationDragTargets, contextMe
         if (interaction.toggleKey) {
             return;
         }
+        if ((0, focus_inspector_field_1.commitPendingInspectorFields)()) {
+            return;
+        }
         const startPointer = { x: event.clientX, y: event.clientY };
         const svgRect = svg.getBoundingClientRect();
         const center = svgPointToClientPoint((0, selected_outline_measurement_1.getSelectedOutlineRotationPivot)({
@@ -916,6 +936,28 @@ const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allSca
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const onTextEditStart = react_1.default.useCallback((editTarget) => {
+        const { textEdit } = editTarget;
+        if (textEdit === null) {
+            return;
+        }
+        if (textEdit.propStatus.status !== 'static' ||
+            typeof textEdit.propStatus.codeValue !== 'string') {
+            (0, NotificationCenter_1.showNotification)('This text is computed and cannot be edited visually', 3000);
+            return;
+        }
+        (0, react_dom_1.flushSync)(() => {
+            var _a;
+            if (!editTarget.selected) {
+                onSelect(editTarget.selection, { shiftKey: false, toggleKey: false });
+            }
+            (_a = options_sidebar_tabs_1.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectInspectorPanel();
+        });
+        (0, focus_inspector_field_1.requestFocusInspectorField)({
+            fieldKey: 'children',
+            nodePath: textEdit.nodePath,
+        });
+    }, [onSelect]);
     const onContextMenuOpen = react_1.default.useCallback(async () => {
         if (target === undefined || previewServerState.type !== 'connected') {
             return false;
@@ -1071,7 +1113,7 @@ const SelectedOutlineElement = ({ allDragTargets, allRotationDragTargets, allSca
         updateResolvedStackTrace,
     ]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, scale: scale, target: target }), (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
+            jsx_runtime_1.jsx(SelectedOutlinePolygon, { allDragTargets: allDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, hovered: hovered, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, onTextEditStart: onTextEditStart, scale: scale, target: target }), (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
                 ? ['top', 'right', 'bottom', 'left'].map((edge) => (jsx_runtime_1.jsx(SelectedOutlineScaleEdgeLine, { allScaleDragTargets: allScaleDragTargets, contextMenuValues: emptyContextMenuValues, dragging: dragging, edge: edge, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, edge)))
                 : null, (target === null || target === void 0 ? void 0 : target.containsSelection) || hovered
                 ? ['top-left', 'top-right', 'bottom-right', 'bottom-left'].map((corner) => (jsx_runtime_1.jsx(SelectedOutlineRotationCornerHandle, { allRotationDragTargets: allRotationDragTargets, contextMenuValues: emptyContextMenuValues, corner: corner, dragging: dragging, outline: outline, onContextMenuOpen: onContextMenuOpen, onDraggingChange: onDraggingChange, onHoverChange: onHoverChange, onSelect: onSelect, target: target }, corner)))

package/dist/components/SelectedOutlineOverlay.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type SelectedOutline } from './selected-outline-geometry';
 import { type SelectedOutlineTarget } from './selected-outline-types';
-export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineUvSnapThresholdPx, selectedOutlineTransformOriginSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineUv, snapSelectedOutlineTransformOriginUv, } from './selected-outline-drag';
+export { applySelectedOutlineDragAxisLock, applySelectedOutlineTransformOriginAxisLock, compensateTranslateForTransformOrigin, getSelectedOutlineActiveSchema, getSelectedOutlineDragChanges, getSelectedOutlineDragValues, getSelectedOutlineKeyboardNudgeDelta, getSelectedOutlineKeyboardNudgeDeltas, getSelectedOutlineRotationDragChanges, getSelectedOutlineRotationDragStates, getSelectedOutlineRotationDragValues, getSelectedOutlineScaleDragChanges, getSelectedOutlineScaleDragStates, getSelectedOutlineScaleDragValues, getSelectedOutlineScaleEdgeInfo, getSelectedOutlineTransformOriginLockedAxis, isSelectedOutlineDragPastThreshold, selectedOutlineTransformOriginSnapThresholdPx, selectedOutlineUvSnapThresholdPx, snapSelectedOutlineRotationDeltaDegrees, snapSelectedOutlineTransformOriginUv, snapSelectedOutlineUv, } from './selected-outline-drag';
 export { getOutlineSelectionInteraction, getSelectedEffectFieldsBySequenceKey, getSelectedOutlineRotationCornerInfo, getSelectedOutlineRotationDeltaDegrees, getSelectedOutlineRotationPivot, getSelectedSequenceKeys, getSequencesWithSelectableOutlines, getTransformedSvgViewportPoints, } from './selected-outline-measurement';
 export { selectedOutlineDragThresholdPx } from './selected-outline-types';
 export type { SelectedOutlineDragState, SelectedOutlineRotationDragState, SelectedOutlineScaleDragState, } from './selected-outline-types';

package/dist/components/SelectedOutlineOverlay.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.selectedOutlineUvSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
+exports.SelectedOutlineOverlay = exports.orderOutlinesForRendering = exports.selectedOutlineDragThresholdPx = exports.getTransformedSvgViewportPoints = exports.getSequencesWithSelectableOutlines = exports.getSelectedSequenceKeys = exports.getSelectedOutlineRotationPivot = exports.getSelectedOutlineRotationDeltaDegrees = exports.getSelectedOutlineRotationCornerInfo = exports.getSelectedEffectFieldsBySequenceKey = exports.getOutlineSelectionInteraction = exports.snapSelectedOutlineUv = exports.snapSelectedOutlineTransformOriginUv = exports.snapSelectedOutlineRotationDeltaDegrees = exports.selectedOutlineUvSnapThresholdPx = exports.selectedOutlineTransformOriginSnapThresholdPx = exports.isSelectedOutlineDragPastThreshold = exports.getSelectedOutlineTransformOriginLockedAxis = exports.getSelectedOutlineScaleEdgeInfo = exports.getSelectedOutlineScaleDragValues = exports.getSelectedOutlineScaleDragStates = exports.getSelectedOutlineScaleDragChanges = exports.getSelectedOutlineRotationDragValues = exports.getSelectedOutlineRotationDragStates = exports.getSelectedOutlineRotationDragChanges = exports.getSelectedOutlineKeyboardNudgeDeltas = exports.getSelectedOutlineKeyboardNudgeDelta = exports.getSelectedOutlineDragValues = exports.getSelectedOutlineDragChanges = exports.getSelectedOutlineActiveSchema = exports.compensateTranslateForTransformOrigin = exports.applySelectedOutlineTransformOriginAxisLock = exports.applySelectedOutlineDragAxisLock = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = __importStar(require("react"));
@@ -73,11 +73,11 @@ Object.defineProperty(exports, "getSelectedOutlineScaleDragValues", { enumerable
 Object.defineProperty(exports, "getSelectedOutlineScaleEdgeInfo", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineScaleEdgeInfo; } });
 Object.defineProperty(exports, "getSelectedOutlineTransformOriginLockedAxis", { enumerable: true, get: function () { return selected_outline_drag_2.getSelectedOutlineTransformOriginLockedAxis; } });
 Object.defineProperty(exports, "isSelectedOutlineDragPastThreshold", { enumerable: true, get: function () { return selected_outline_drag_2.isSelectedOutlineDragPastThreshold; } });
-Object.defineProperty(exports, "selectedOutlineUvSnapThresholdPx", { enumerable: true, get: function () { return selected_outline_drag_2.selectedOutlineUvSnapThresholdPx; } });
 Object.defineProperty(exports, "selectedOutlineTransformOriginSnapThresholdPx", { enumerable: true, get: function () { return selected_outline_drag_2.selectedOutlineTransformOriginSnapThresholdPx; } });
+Object.defineProperty(exports, "selectedOutlineUvSnapThresholdPx", { enumerable: true, get: function () { return selected_outline_drag_2.selectedOutlineUvSnapThresholdPx; } });
 Object.defineProperty(exports, "snapSelectedOutlineRotationDeltaDegrees", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineRotationDeltaDegrees; } });
-Object.defineProperty(exports, "snapSelectedOutlineUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineUv; } });
 Object.defineProperty(exports, "snapSelectedOutlineTransformOriginUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineTransformOriginUv; } });
+Object.defineProperty(exports, "snapSelectedOutlineUv", { enumerable: true, get: function () { return selected_outline_drag_2.snapSelectedOutlineUv; } });
 const selected_outline_measurement_2 = require("./selected-outline-measurement");
 Object.defineProperty(exports, "getOutlineSelectionInteraction", { enumerable: true, get: function () { return selected_outline_measurement_2.getOutlineSelectionInteraction; } });
 Object.defineProperty(exports, "getSelectedEffectFieldsBySequenceKey", { enumerable: true, get: function () { return selected_outline_measurement_2.getSelectedEffectFieldsBySequenceKey; } });
@@ -176,6 +176,8 @@ const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
             const rotationPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.rotateFieldKey];
             const transformOriginFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema[selected_outline_types_1.transformOriginFieldKey];
             const transformOriginPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses[selected_outline_types_1.transformOriginFieldKey];
+            const textContentFieldSchema = activeSchema === null || activeSchema === void 0 ? void 0 : activeSchema.children;
+            const textContentPropStatus = nodePropStatuses === null || nodePropStatuses === void 0 ? void 0 : nodePropStatuses.children;
             const transformOriginValueForRotation = (transformOriginFieldSchema === null || transformOriginFieldSchema === void 0 ? void 0 : transformOriginFieldSchema.type) === 'transform-origin' &&
                 ((transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'static' ||
                     (transformOriginPropStatus === null || transformOriginPropStatus === void 0 ? void 0 : transformOriginPropStatus.status) === 'keyframed')
@@ -228,6 +230,10 @@ const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
                 canTransformOriginTranslateStatus;
             const canDropEffect = previewServerState.type === 'connected' &&
                 (controls === null || controls === void 0 ? void 0 : controls.supportsEffects) === true;
+            const canTextEdit = previewServerState.type === 'connected' &&
+                controls !== null &&
+                (textContentFieldSchema === null || textContentFieldSchema === void 0 ? void 0 : textContentFieldSchema.type) === 'text-content' &&
+                textContentPropStatus !== undefined;
             return {
                 key,
                 containsSelection,
@@ -342,6 +348,12 @@ const SelectedOutlineOverlay = ({ scale, translationX, translationY }) => {
                         })) !== null && _f !== void 0 ? _f : fieldSchema.default),
                     }
                     : null,
+                textEdit: canTextEdit
+                    ? {
+                        nodePath,
+                        propStatus: textContentPropStatus,
+                    }
+                    : null,
                 uvHandles: containsSelection
                     ? (0, selected_outline_uv_1.getSelectedUvHandles)({
                         propStatuses,

package/dist/components/Timeline/TimelineDeleteKeybindings.js

@@ -11,6 +11,7 @@ const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const delete_selected_timeline_item_1 = require("./delete-selected-timeline-item");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const reset_selected_timeline_props_1 = require("./reset-selected-timeline-props");
+const split_selected_timeline_item_1 = require("./split-selected-timeline-item");
 const TimelineSelection_1 = require("./TimelineSelection");
 const update_selected_easing_1 = require("./update-selected-easing");
 const TimelineDeleteKeybindings = () => {
@@ -128,7 +129,10 @@ const TimelineDeleteKeybindings = () => {
         const duplicate = keybindings.registerKeybinding({
             event: 'keydown',
             key: 'd',
-            callback: () => {
+            callback: (event) => {
+                if (!(0, split_selected_timeline_item_1.shouldHandleTimelineDuplicateShortcut)(event)) {
+                    return;
+                }
                 const { selectedItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
                     return;
@@ -147,10 +151,39 @@ const TimelineDeleteKeybindings = () => {
             triggerIfInputFieldFocused: false,
             keepRegisteredWhenNotHighestContext: false,
         });
+        const split = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'd',
+            callback: (event) => {
+                if (!(0, split_selected_timeline_item_1.shouldHandleTimelineSplitShortcut)(event)) {
+                    return;
+                }
+                const { selectedItems } = currentSelection.current;
+                if (selectedItems.length === 0) {
+                    return;
+                }
+                const splitPromise = (0, split_selected_timeline_item_1.splitSelectedTimelineItems)({
+                    selections: selectedItems,
+                    sequences: sequencesRef.current,
+                    overrideIdsToNodePaths: overrideIdToNodePathMappings,
+                    propStatuses: propStatusesRef.current,
+                    splitFrame: timelinePositionRef.current,
+                });
+                if (splitPromise === null) {
+                    return;
+                }
+                splitPromise.catch(() => undefined);
+            },
+            commandCtrlKey: true,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+            keepRegisteredWhenNotHighestContext: false,
+        });
         return () => {
             backspace.unregister();
             deleteKey.unregister();
             duplicate.unregister();
+            split.unregister();
         };
     }, [
         canSelect,

package/dist/components/Timeline/TimelineExpandedSection.js

@@ -56,6 +56,7 @@ const TimelineExpandedSection = ({ sequence, validatedLocation, nodePathInfo, ne
     const { filteredTree, getIsExpanded, toggleTrack } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
+        includeTextContent: false,
     });
     const flat = (0, react_1.useMemo)(() => (0, timeline_layout_1.flattenVisibleTreeNodes)({ nodes: filteredTree, getIsExpanded }), [filteredTree, getIsExpanded]);
     const expandedHeight = (0, react_1.useMemo)(() => {

package/dist/components/Timeline/TimelineInOutPointerHandle.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const line = {
     height: '100%',
@@ -30,7 +31,7 @@ const InnerTimelineInOutPointerHandle = ({ atFrame, dragging, onPointerDown, tim
             top: 0,
         };
     }, [atFrame, dragging, timelineWidth, videoConfig.durationInFrames]);
-    return (jsx_runtime_1.jsx("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style, onPointerDown: onPointerDown }));
+    return (jsx_runtime_1.jsx("div", { ref: type === 'in' ? exports.inPointerHandle : exports.outPointerHandle, style: style, onPointerDown: onPointerDown, [TimelineSelection_1.TIMELINE_SCRUBBER_ATTR]: true }));
 };
 const TimelineInOutPointerHandle = ({ dragging, onPointerDown, type, atFrame, }) => {
     const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);

package/dist/components/Timeline/TimelineKeyframeControls.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatus, DragOverrideValue, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
+import type { CanUpdateSequencePropStatus, DragOverrideValue, InteractivitySchema, SequencePropsSubscriptionKey } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type TimelineSelection } from './TimelineSelection';
 export declare const getSelectedKeyframeControlNodePathInfos: ({ clickedNodePathInfo, selectedItems, }: {

package/dist/components/Timeline/TimelineKeyframeControls.js

@@ -113,6 +113,7 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
         getDragOverrides,
         getEffectDragOverrides,
         propStatuses,
+        includeTextContent: false,
     });
     const fieldNode = findFieldNode(tree, (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo));
     if (fieldNode === null || fieldNode.field === null) {

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -8,6 +8,7 @@ const TimelineEnumField_1 = require("./TimelineEnumField");
 const TimelineNumberField_1 = require("./TimelineNumberField");
 const TimelineRotationField_1 = require("./TimelineRotationField");
 const TimelineScaleField_1 = require("./TimelineScaleField");
+const TimelineTextContentField_1 = require("./TimelineTextContentField");
 const TimelineTransformOriginField_1 = require("./TimelineTransformOriginField");
 const TimelineTranslateField_1 = require("./TimelineTranslateField");
 const TimelineUvCoordinateField_1 = require("./TimelineUvCoordinateField");
@@ -52,6 +53,9 @@ const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragE
     if (field.typeName === 'enum') {
         return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineEnumField_1.TimelineEnumField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
     }
+    if (field.typeName === 'text-content') {
+        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineTextContentField_1.TimelineTextContentField, { effectiveValue: effectiveValue, field: field, nodePath: scaleLockNodePath, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
     throw new Error(`Unsupported field type: ${field.typeName}`);
 };
 exports.TimelinePrimitiveFieldValue = TimelinePrimitiveFieldValue;

package/dist/components/Timeline/TimelineSelection.js

@@ -404,6 +404,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
             getDragOverrides,
             getEffectDragOverrides,
             propStatuses,
+            includeTextContent: false,
         });
         const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
             nodes: tree,

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -63,6 +63,7 @@ const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceName_1 = require("./TimelineSequenceName");
 const use_open_sequence_in_editor_1 = require("./use-open-sequence-in-editor");
+const use_rename_sequence_1 = require("./use-rename-sequence");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
 const use_timeline_expanded_tree_1 = require("./use-timeline-expanded-tree");
 const labelContainerStyle = {
@@ -78,24 +79,12 @@ const effectDropHighlight = {
     outlineOffset: -1,
 };
 const SEQUENCE_REORDER_MIME_TYPE = 'application/remotion-sequence-reorder';
-const getSequenceNameSaveAction = ({ editedName, currentDisplayName, fallbackDisplayName, hasStaticNameProp, }) => {
-    if (!hasStaticNameProp &&
-        (editedName === '' || editedName === fallbackDisplayName)) {
-        return { type: 'noop' };
-    }
-    if (hasStaticNameProp && editedName === currentDisplayName) {
-        return { type: 'noop' };
-    }
-    return {
-        type: 'save',
-        defaultValue: editedName === '' ? JSON.stringify('') : null,
-    };
-};
 let currentSequenceDrag = null;
 const TimelineSequenceExpandArrow = ({ disabled, isExpanded, nodePathInfo, onToggleExpand, sequence }) => {
     const { filteredTree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
         sequence,
         nodePathInfo,
+        includeTextContent: false,
     });
     if (filteredTree.length === 0) {
         return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});
@@ -163,14 +152,13 @@ const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
 const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, trackIndex, }) => {
-    var _a, _b, _c, _d;
-    var _e, _f, _g, _h;
-    const nodePath = (_e = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _e !== void 0 ? _e : null;
+    var _a, _b, _c;
+    var _d, _e, _f;
+    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { isHighestContext } = (0, use_keybinding_1.useKeybinding)();
@@ -201,9 +189,17 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
         };
     }, [originalLocation]);
+    const { canRename: canRenameThisSequence, displayName, fallbackDisplayName, propStatusesForOverride, saveName, } = (0, use_rename_sequence_1.useRenameSequence)({
+        clientId: previewServerState.type === 'connected'
+            ? previewServerState.clientId
+            : null,
+        nodePathInfo,
+        sequence,
+        validatedLocation,
+    });
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
-    const parentId = (_f = sequence.parent) !== null && _f !== void 0 ? _f : null;
+    const parentId = (_e = sequence.parent) !== null && _e !== void 0 ? _e : null;
     const canReorderSequence = previewConnected &&
         Boolean(nodePath && nodePathKey && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) &&
         (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) === 1;
@@ -450,13 +446,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         }
         toggleTrack(nodePathInfo);
     }, [nodePathInfo, toggleTrack]);
-    const propStatusesForOverride = (0, react_1.useMemo)(() => {
-        return nodePath
-            ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
-            : undefined;
-    }, [propStatuses, nodePath]);
     const codeHiddenStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.hidden;
-    const codeNameStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.name;
     const isItemHidden = (0, react_1.useMemo)(() => {
         var _a;
         const propStatus = codeHiddenStatus && codeHiddenStatus.status === 'static'
@@ -466,26 +456,6 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         const effective = (propStatus !== null && propStatus !== void 0 ? propStatus : runtimeValue);
         return effective !== null && effective !== void 0 ? effective : false;
     }, [codeHiddenStatus, (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation]);
-    const fallbackDisplayName = (_g = (_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.componentName) !== null && _g !== void 0 ? _g : '<Sequence>';
-    const staticNamePropValue = (codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status) === 'static' &&
-        typeof codeNameStatus.codeValue === 'string'
-        ? codeNameStatus.codeValue
-        : null;
-    const hasStaticNameProp = staticNamePropValue !== null;
-    const displayName = (0, react_1.useMemo)(() => {
-        if (staticNamePropValue !== null) {
-            return staticNamePropValue;
-        }
-        if ((codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status) === 'static') {
-            return fallbackDisplayName;
-        }
-        return sequence.displayName;
-    }, [
-        codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status,
-        fallbackDisplayName,
-        sequence.displayName,
-        staticNamePropValue,
-    ]);
     const onToggleVisibility = (0, react_1.useCallback)((type) => {
         if (!sequence.controls ||
             !nodePath ||
@@ -554,14 +524,6 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
         codeHiddenStatus.status === 'static';
-    const canRenameThisSequence = previewServerState.type === 'connected' &&
-        !window.remotion_isReadOnlyStudio &&
-        Boolean(sequence.controls) &&
-        nodePath !== null &&
-        validatedLocation !== null &&
-        codeNameStatus !== undefined &&
-        codeNameStatus !== null &&
-        codeNameStatus.status === 'static';
     const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
         if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
             e.stopPropagation();
@@ -577,58 +539,14 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
         selectedItems.length === 1 &&
-        ((_c = selectedItems[0]) === null || _c === void 0 ? void 0 : _c.type) === 'sequence';
+        ((_b = selectedItems[0]) === null || _b === void 0 ? void 0 : _b.type) === 'sequence';
     const onCancelRenaming = (0, react_1.useCallback)(() => {
         setIsRenaming(false);
     }, []);
     const onSaveName = (0, react_1.useCallback)(async (name) => {
-        if (!canRenameThisSequence ||
-            previewServerState.type !== 'connected' ||
-            !sequence.controls ||
-            !nodePath ||
-            !validatedLocation) {
-            setIsRenaming(false);
-            return;
-        }
-        const action = getSequenceNameSaveAction({
-            editedName: name,
-            currentDisplayName: displayName,
-            fallbackDisplayName,
-            hasStaticNameProp,
-        });
-        if (action.type === 'noop') {
-            setIsRenaming(false);
-            return;
-        }
-        const savePromise = (0, save_sequence_prop_1.saveSequenceProps)({
-            changes: [
-                {
-                    fileName: validatedLocation.source,
-                    nodePath,
-                    fieldKey: 'name',
-                    value: name,
-                    defaultValue: action.defaultValue,
-                    schema: sequence.controls.schema,
-                },
-            ],
-            setPropStatuses,
-            clientId: previewServerState.clientId,
-            undoLabel: 'Rename sequence',
-            redoLabel: 'Rename sequence again',
-        });
         setIsRenaming(false);
-        await savePromise;
-    }, [
-        canRenameThisSequence,
-        displayName,
-        fallbackDisplayName,
-        hasStaticNameProp,
-        nodePath,
-        previewServerState,
-        sequence.controls,
-        setPropStatuses,
-        validatedLocation,
-    ]);
+        await saveName(name);
+    }, [saveName]);
     react_1.default.useEffect(() => {
         if (!canRenameSelectedSequence || !process.env.KEYBOARD_SHORTCUTS_ENABLED) {
             setIsRenaming(false);
@@ -673,7 +591,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         sequenceFrameOffset,
         setPropStatuses,
         timelinePosition,
-        validatedSource: (_h = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _h !== void 0 ? _h : null,
+        validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
     });
     const canAddEffect = (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects) === true &&
         previewServerState.type === 'connected' &&
@@ -780,7 +698,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const canDropEffect = previewServerState.type === 'connected' &&
         nodePath !== null &&
         validatedLocation !== null &&
-        ((_d = sequence.controls) === null || _d === void 0 ? void 0 : _d.supportsEffects) === true;
+        ((_c = sequence.controls) === null || _c === void 0 ? void 0 : _c.supportsEffects) === true;
     const sequenceReorderLineStyle = (0, react_1.useMemo)(() => {
         if (!sequenceDropIndicator) {
             return null;

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -64,9 +64,11 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
         if (!clientId) {
             return Promise.reject(new Error('Not connected to studio server'));
         }
-        const defaultValue = field.fieldSchema.default !== undefined
-            ? JSON.stringify(field.fieldSchema.default)
-            : null;
+        const defaultValue = field.fieldSchema.type === 'text-content'
+            ? null
+            : field.fieldSchema.default !== undefined
+                ? JSON.stringify(field.fieldSchema.default)
+                : null;
         const stringifiedValue = JSON.stringify(value);
         const fieldLabel = (_a = field.description) !== null && _a !== void 0 ? _a : field.key;
         if (value === propStatus.codeValue) {
@@ -97,6 +99,7 @@ const Value = ({ field, nodePath, validatedLocation, schema, propStatus }) => {
         clientId,
         field.description,
         field.fieldSchema.default,
+        field.fieldSchema.type,
         field.key,
         nodePath,
         schema,

package/dist/components/Timeline/TimelineTextContentField.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { CanUpdateSequencePropStatusStatic, SequencePropsSubscriptionKey } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
+export declare const TimelineTextContentField: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly effectiveValue: unknown;
+    readonly propStatus: CanUpdateSequencePropStatusStatic;
+    readonly nodePath: SequencePropsSubscriptionKey | null;
+    readonly onDragEnd: () => void;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
+    readonly onSave: TimelineFieldOnSave;
+}>;