fix: Keep multiline CSS caret visible

apps/builder/app/builder/shared/css-editor/css-editor.tsx

@@ -97,6 +97,15 @@ import {
 const initialIndentation = `20px`;
 const shorthandSet = new Set<string>(shorthandProperties);
 
+const getLineBreakSelection = (input: HTMLInputElement) => {
+  const end = input.selectionEnd ?? input.value.length;
+  const start = input.selectionStart ?? end;
+  return {
+    start: start === 0 && end === input.value.length ? end : start,
+    end,
+  };
+};
+
 export const insertStyleDeclarations = (
   cssText: string,
   onAddDeclarations: (styleMap: CssStyleMap) => void,
@@ -617,8 +626,7 @@ const AdvancedPropertyValue = ({
               return;
             }
             const input = event.currentTarget;
-            const start = input.selectionStart ?? input.value.length;
-            const end = input.selectionEnd ?? start;
+            const { start, end } = getLineBreakSelection(input);
             const isCollapsedVariable =
               styleDecl.cascadedValue.type === "var" &&
               input.value === `--${styleDecl.cascadedValue.value}`;
@@ -1480,10 +1488,9 @@ export const CssEditor = ({
                     }
                     if (event.key === "Enter" && event.shiftKey) {
                       event.preventDefault();
-                      const { value, selectionStart, selectionEnd } =
-                        event.currentTarget;
-                      const start = selectionStart ?? value.length;
-                      const end = selectionEnd ?? start;
+                      const input = event.currentTarget;
+                      const { value } = input;
+                      const { start, end } = getLineBreakSelection(input);
                       if (draftValue !== "") {
                         const delimiter = draftValue.trimEnd().endsWith(";")
                           ? ""
@@ -1643,10 +1650,9 @@ export const CssEditor = ({
               onKeyDown={(event) => {
                 if (event.key === "Enter" && event.shiftKey) {
                   event.preventDefault();
-                  const { value, selectionStart, selectionEnd } =
-                    event.currentTarget;
-                  const start = selectionStart ?? value.length;
-                  const end = selectionEnd ?? start;
+                  const input = event.currentTarget;
+                  const { value } = input;
+                  const { start, end } = getLineBreakSelection(input);
                   openValueDraft(
                     `${value.slice(0, start)}\n${value.slice(end)}`,
                     start + 1

apps/builder/app/shared/code-editor-base.tsx

@@ -128,6 +128,9 @@ const editorContentStyle = css({
   "& .cm-cursor, & .cm-dropCursor": {
     borderLeftColor: "currentColor",
   },
+  "& .cm-cursor": {
+    marginLeft: 0,
+  },
   "& .cm-activeLine": {
     backgroundColor: cssVar("--overlay-interaction-hover"),
   },
@@ -385,6 +388,12 @@ export const EditorContent = ({
     };
   }, []);
 
+  useEffect(() => {
+    if (autoFocus) {
+      viewRef.current?.focus();
+    }
+  }, [autoFocus]);
+
   // update extensions whenever variables data is changed
 
   useEffect(() => {
@@ -491,12 +500,6 @@ export const EditorContent = ({
     }
   }, [initialSelection]);
 
-  useEffect(() => {
-    if (autoFocus) {
-      viewRef.current?.focus();
-    }
-  }, [autoFocus]);
-
   useImperativeHandle(editorApiRef, () => ({
     replaceSelection: (string) => {
       const view = viewRef.current;