@team-monolith/cds 1.81.0 → 1.82.0

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputControlledSelectionRange.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface SelectionRange {
+    start: number;
+    end: number;
+}
+/** selectionRange에 대한 controlled input 컴포넌트입니다.
+ * 일반적인 input처럼 동작하도록 작성되어, 비지니스 로직을 포함하지 않습니다.
+ * 선택 범위에 대한 state, setState를 props로 받아 사용합니다.
+ */
+export declare const InputControlledSelectionRange: React.ForwardRefExoticComponent<{
+    selectionRange: SelectionRange;
+    onSelectionRangeChange: (selectionRange: SelectionRange) => void;
+} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputControlledSelectionRange.js

@@ -0,0 +1,54 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useRef } from "react";
+import { useEffect } from "react";
+/** selectionRange에 대한 controlled input 컴포넌트입니다.
+ * 일반적인 input처럼 동작하도록 작성되어, 비지니스 로직을 포함하지 않습니다.
+ * 선택 범위에 대한 state, setState를 props로 받아 사용합니다.
+ */
+export const InputControlledSelectionRange = React.forwardRef(function InputControlledSelectionRange(props, ref) {
+    // eslint-disable-next-line react/prop-types
+    const { selectionRange, onSelectionRangeChange, onSelect } = props, inputProps = __rest(props, ["selectionRange", "onSelectionRangeChange", "onSelect"]);
+    const internalRef = useRef(null);
+    // selectionRange가 바뀔 때마다, 실제 DOM input의 selection range를 동기화
+    useEffect(() => {
+        const element = internalRef.current;
+        if (!element)
+            return;
+        const { start, end } = selectionRange;
+        try {
+            element.setSelectionRange(start, end);
+        }
+        catch (err) {
+            // 범위가 잘못되거나 input이 포커스가 없을 때 에러가 발생할 수 있으므로 주의
+            console.warn("setSelectionRange error:", err);
+        }
+    }, [selectionRange]);
+    return (_jsx("input", Object.assign({}, inputProps, { ref: (element) => {
+            internalRef.current = element;
+            if (typeof ref === "function") {
+                ref(element);
+            }
+            else if (ref !== null) {
+                ref.current =
+                    element;
+            }
+        }, onSelect: (e) => {
+            var _a, _b;
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(e);
+            onSelectionRangeChange({
+                start: (_a = e.currentTarget.selectionStart) !== null && _a !== void 0 ? _a : 0,
+                end: (_b = e.currentTarget.selectionEnd) !== null && _b !== void 0 ? _b : 0,
+            });
+        } })));
+});

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SegmentedInput.js

@@ -4,6 +4,8 @@ import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import { InputBase } from "../../../../components/InputBase";
 import { useRef, useState } from "react";
+import { useEventListener } from "usehooks-ts";
+import { InputControlledSelectionRange, } from "./InputControlledSelectionRange";
 /**
  *  SOT는 value이고, 그 value는 숨겨진 input에 작성됩니다.
  *  그리고 그 value는 split되어 segmented input에 표시됩니다.
@@ -18,8 +20,35 @@ export function SegmentedInput(props) {
     const despacedFormat = splitedFormat.filter((v) => v !== " ");
     // "안녕 하세요" => ["안","녕","하","세","요"]
     const splitedValues = value.split("").filter((v) => v !== " ");
-    const [focusedIndex, setFocusedIndex] = useState(null);
+    // 현재 선택범위를 state로 관리합니다. 현재 커서 위치의 Source of Truth입니다.
+    const [selectionRange, setSelectionRange] = useState({
+        start: 0,
+        end: 0,
+    });
+    // 글자를 조합중인지 여부 (ex: "안"을 입력중 "아"일 때 해당합니다.)
+    const [isComposing, setIsComposing] = useState(false);
+    // 현재 선택된 SquareInput의 index Range.([이상, 이하])
+    // isComposing일 때는 입력중인 글자만 포커싱되도록 합니다.
+    // isComposing이 아닐 때는 start이상 ~ end미만의 범위가 포커싱되도록 합니다.
+    const selectedSquareInputIndexRange = isComposing
+        ? [
+            Math.max(selectionRange.start - 1, 0),
+            Math.max(selectionRange.start - 1, 0),
+        ]
+        : [
+            selectionRange.start,
+            Math.max(selectionRange.end - 1, selectionRange.start),
+        ];
+    const isSelectedSquareInputIndex = (i) => i >= selectedSquareInputIndexRange[0] &&
+        i <= selectedSquareInputIndexRange[1];
     const hiddenRef = useRef(null);
+    const [isHiddenInputFocused, setIsHiddenInputFocused] = useState(false);
+    useEventListener("compositionstart", () => {
+        setIsComposing(true);
+    }, hiddenRef);
+    useEventListener("compositionend", () => {
+        setIsComposing(false);
+    }, hiddenRef);
     /** value의 공백을 제거하고, format에 맞춰 공백을 추가한 값을 리턴합니다. */
     const getFormattedValue = (value) => {
         const despacedValue = value.replace(/ /g, "");
@@ -32,26 +61,36 @@ export function SegmentedInput(props) {
             }
         }, "");
     };
-    return (_jsxs(Container, { children: [_jsx("input", { type: "input", ref: hiddenRef, value: splitedValues.join(""), readOnly: readOnly, onKeyDown: (e) => {
-                    if (e.key === "ArrowLeft") {
-                        if (focusedIndex !== null && focusedIndex > 0) {
-                            setFocusedIndex(focusedIndex - 1);
-                        }
-                    }
-                    else if (e.key === "ArrowRight") {
-                        if (focusedIndex !== null &&
-                            focusedIndex < despacedFormat.length - 1) {
-                            setFocusedIndex(focusedIndex + 1);
-                        }
-                    }
-                }, onChange: (event) => {
+    return (_jsxs(Container, { children: [_jsx(InputControlledSelectionRange, { type: "input", ref: hiddenRef, value: splitedValues.join(""), readOnly: readOnly, selectionRange: selectionRange, onSelectionRangeChange: setSelectionRange, onKeyDown: (e) => {
                     var _a;
-                    onChange(getFormattedValue(event.target.value).slice(0, answerFormat.length));
-                    const selectionStart = (_a = hiddenRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart;
-                    setFocusedIndex(selectionStart ? selectionStart - 1 : null);
+                    if (e.key === "Backspace") {
+                        // 만약 조합중이라면 원래 동작대로 현재 글자를 지우고,
+                        // 조합중이 아니라면 selectedSquareInputIndex의 글자를 지워야 합니다.(delete와 같은 동작)
+                        if (isComposing)
+                            return;
+                        e.preventDefault();
+                        const value = ((_a = hiddenRef.current) === null || _a === void 0 ? void 0 : _a.value) || "";
+                        const focusedIndex = selectedSquareInputIndexRange[0];
+                        // 마지막 글자에 포커싱된 경우 마지막 글자를 지우고, 아닌 경우 포커싱된 글자를 지웁니다.
+                        const newValue = focusedIndex >= value.length - 1
+                            ? value.slice(0, -1)
+                            : value.slice(0, focusedIndex) + value.slice(focusedIndex + 1);
+                        onChange(getFormattedValue(newValue));
+                        // 이전 글자로 포커싱을 이동합니다.
+                        const newFocusedIndex = Math.max(focusedIndex - 1, 0);
+                        setSelectionRange({
+                            start: newFocusedIndex,
+                            end: newFocusedIndex,
+                        });
+                    }
+                }, onChange: (e) => {
+                    onChange(getFormattedValue(e.target.value).slice(0, answerFormat.length));
+                }, onFocus: () => {
+                    setIsHiddenInputFocused(true);
                 }, onBlur: (e) => {
+                    setIsHiddenInputFocused(false);
                     onChange(getFormattedValue(e.target.value).slice(0, answerFormat.length));
-                    setFocusedIndex(null);
+                    setIsComposing(false);
                 }, css: css `
           opacity: 0;
           height: 0;
@@ -63,7 +102,7 @@ export function SegmentedInput(props) {
                                 ? "activeSuccess"
                                 : isCorrect === false
                                     ? "activeDanger"
-                                    : focusedIndex === i
+                                    : isHiddenInputFocused && isSelectedSquareInputIndex(i)
                                         ? "activePrimary"
                                         : "default", css: isCorrect === false &&
                                 css `
@@ -72,13 +111,16 @@ export function SegmentedInput(props) {
                   }
                 `, inputProps: {
                                 readOnly,
+                                tabIndex: -1,
                                 onFocus: () => {
-                                    var _a, _b;
+                                    var _a;
                                     if (readOnly)
                                         return;
-                                    setFocusedIndex(i);
+                                    setSelectionRange({
+                                        start: i,
+                                        end: i,
+                                    });
                                     (_a = hiddenRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                    (_b = hiddenRef.current) === null || _b === void 0 ? void 0 : _b.setSelectionRange(i, i);
                                 },
                             }, value: splitedValues[i] || "", onChange: () => { } }, i))) })), _jsx(InputMarker, {})] }), _jsx(Text, { children: placeholder })] }));
 }

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/index.js

@@ -23,16 +23,12 @@ export function ImagesPlugin({ captionsEnabled, }) {
         }
         return mergeRegister(editor.registerCommand(INSERT_IMAGE_COMMAND, (payload) => {
             const imageNode = $createImageNode(payload);
-            $insertNodeToNearestRoot(imageNode);
-            // lexical의 원본코드: 이미지 노드를 텍스트 노드 안에 삽입하고 있습니다.
+            // lexical의 원본코드에서는 이미지 노드를 텍스트 노드 안에 삽입하고 있었습니다.
             // 이 때문에 이미지 노드 아래에 불필요한 텍스트 라인이 생성됩니다.
-            // 이를 막기 위해 다른 커스텀 노드처럼 노드를 직접 삽입합니다.
             // before: images/2025-01-06-15-16-05.png
+            // 이를 막기 위해 다른 커스텀 노드처럼 노드를 직접 삽입합니다.
             // after: images/2025-01-06-15-14-39.png
-            // $insertNodes([imageNode]);
-            // if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
-            //   $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
-            // }
+            $insertNodeToNearestRoot(imageNode);
             return true;
         }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(DRAGSTART_COMMAND, (event) => {
             return onDragStart(event);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.81.0",
+  "version": "1.82.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,