diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx index fb91cd44925..2e1dfa49ed6 100644 --- a/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx +++ b/ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useMemo } from "react"; +import React, { useEffect, useState, useMemo, useRef } from "react"; import { FormattedMessage, useIntl } from "react-intl"; import { Button, Form, Col, Row, ButtonGroup } from "react-bootstrap"; import Mousetrap from "mousetrap"; @@ -64,6 +64,7 @@ export const SceneEditPanel: React.FC = ({ }) => { const intl = useIntl(); const Toast = useToast(); + const titleInputRef = useRef(null); const [galleries, setGalleries] = useState([]); const [performers, setPerformers] = useState([]); @@ -674,6 +675,42 @@ export const SceneEditPanel: React.FC = ({ return renderInputField("details", "textarea", "details", props); } + function renderTitleField() { + const displayValue = formik.values.title.replace(/\n/g, " "); + + return ( + ) => { + formik.setFieldValue("title", e.target.value); + }} + onKeyDown={(event: React.KeyboardEvent) => { + if (event.key === "Enter") { + event.preventDefault(); + const cursorPosition = event.currentTarget.selectionStart ?? 0; + const newTitle = + formik.values.title.substring(0, cursorPosition) + + "\n" + + formik.values.title.substring(cursorPosition); + formik.setFieldValue("title", newTitle); + + setTimeout(() => { + if (titleInputRef.current) { + titleInputRef.current.setSelectionRange( + cursorPosition + 1, + cursorPosition + 1 + ); + } + }, 0); + } + }} + /> + ); + } + return (
= ({ - {renderInputField("title")} + {renderField( + "title", + intl.formatMessage({ id: "title" }), + renderTitleField() + )} {renderInputField("code", "text", "scene_code")} {renderURLListField("urls", onScrapeSceneURL, urlScrapable)} diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss index bb50236ecb6..d5ec3f72b71 100644 --- a/ui/v2.5/src/components/Scenes/styles.scss +++ b/ui/v2.5/src/components/Scenes/styles.scss @@ -23,6 +23,12 @@ padding: 0.5rem 1rem 0 1rem; } +.text-input { + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; +} + .performer-tag-container, .group-tag-container { display: inline-block;