@simplysm/solid 13.0.69 → 13.0.70

package/src/components/form-control/editor/EditorToolbar.tsx

@@ -26,44 +26,46 @@ import {
   IconClearFormatting,
 } from "@tabler/icons-solidjs";
 import { Icon } from "../../display/Icon";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 
 export interface EditorToolbarProps {
   editor: Editor;
   class?: string;
 }
 
-// 툴바 컨테이너 스타일
+// Toolbar container style
 const toolbarClass = clsx(
   "flex flex-wrap items-center gap-0.5",
   "border-b border-base-300 dark:border-base-700",
   "px-2 py-1",
 );
 
-// 툴바 버튼 기본 스타일
+// Toolbar button base style
 const toolbarBtnClass = twMerge(iconButtonBase, "size-7");
 
-// 툴바 버튼 활성 스타일
+// Toolbar button active style
 const toolbarBtnActiveClass = clsx(
   "bg-primary-100 text-primary-700",
   "dark:bg-primary-900/40 dark:text-primary-300",
 );
 
-// 구분선 스타일
+// Separator style
 const separatorClass = clsx("mx-1 h-5 w-px", "bg-base-300 dark:bg-base-700");
 
-// 색상 선택 label 스타일
+// Color picker label style
 const colorLabelClass = twMerge(iconButtonBase, "relative", "size-7");
 
-// 색상 input 숨기기 스타일
+// Color input hide style
 const colorInputClass = clsx("absolute opacity-0", "size-0");
 
-// 색상 indicator 스타일
+// Color indicator style
 const colorIndicatorClass = clsx("absolute inset-x-1 bottom-0.5", "h-0.5 rounded-full");
 
 export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
   const e = () => props.editor;
+  const i18n = useI18nOptional();
 
-  // createEditorTransaction으로 반응적 활성 상태 추적
+  // Track active state reactively with createEditorTransaction
   const isBold = createEditorTransaction(e, (editor) => editor.isActive("bold"));
   const isItalic = createEditorTransaction(e, (editor) => editor.isActive("italic"));
   const isUnderline = createEditorTransaction(e, (editor) => editor.isActive("underline"));
@@ -87,13 +89,13 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
     editor.isActive({ textAlign: "justify" } as unknown as string),
   );
 
-  // 현재 텍스트 색상
+  // Current text color
   const currentColor = createEditorTransaction(
     e,
     (editor) => (editor.getAttributes("textStyle")["color"] as string | undefined) ?? "#000000",
   );
 
-  // 현재 하이라이트 색상
+  // Current highlight color
   const currentHighlight = createEditorTransaction(
     e,
     (editor) => (editor.getAttributes("highlight")["color"] as string | undefined) ?? "#ffff00",
@@ -102,7 +104,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
   const btnClass = (active: () => boolean) =>
     twMerge(toolbarBtnClass, active() && toolbarBtnActiveClass);
 
-  // 이미지 삽입 핸들러
+  // Image insert handler
   const handleImageInsert = () => {
     const input = document.createElement("input");
     input.type = "file";
@@ -125,11 +127,11 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
 
   return (
     <div class={twMerge(toolbarClass, props.class)}>
-      {/* 1. 헤더 (H1, H2) */}
+      {/* 1. Header (H1, H2) */}
       <button
         type="button"
         class={btnClass(isH1)}
-        title="제목 1"
+        title={i18n?.t("editorToolbar.heading1") ?? "Heading 1"}
         onClick={() => props.editor.chain().focus().toggleHeading({ level: 1 }).run()}
       >
         <Icon icon={IconH1} size="1em" />
@@ -137,20 +139,20 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isH2)}
-        title="제목 2"
+        title={i18n?.t("editorToolbar.heading2") ?? "Heading 2"}
         onClick={() => props.editor.chain().focus().toggleHeading({ level: 2 }).run()}
       >
         <Icon icon={IconH2} size="1em" />
       </button>
 
-      {/* 2. 구분선 */}
+      {/* 2. Separator */}
       <div class={separatorClass} />
 
-      {/* 3. 텍스트 서식 (Bold, Italic, Underline, Strike) */}
+      {/* 3. Text format (Bold, Italic, Underline, Strike) */}
       <button
         type="button"
         class={btnClass(isBold)}
-        title="굵게"
+        title={i18n?.t("editorToolbar.bold") ?? "Bold"}
         onClick={() => props.editor.chain().focus().toggleBold().run()}
       >
         <Icon icon={IconBold} size="1em" />
@@ -158,7 +160,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isItalic)}
-        title="기울임"
+        title={i18n?.t("editorToolbar.italic") ?? "Italic"}
         onClick={() => props.editor.chain().focus().toggleItalic().run()}
       >
         <Icon icon={IconItalic} size="1em" />
@@ -166,7 +168,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isUnderline)}
-        title="밑줄"
+        title={i18n?.t("editorToolbar.underline") ?? "Underline"}
         onClick={() => props.editor.chain().focus().toggleUnderline().run()}
       >
         <Icon icon={IconUnderline} size="1em" />
@@ -174,17 +176,17 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isStrike)}
-        title="취소선"
+        title={i18n?.t("editorToolbar.strikethrough") ?? "Strikethrough"}
         onClick={() => props.editor.chain().focus().toggleStrike().run()}
       >
         <Icon icon={IconStrikethrough} size="1em" />
       </button>
 
-      {/* 4. 구분선 */}
+      {/* 4. Separator */}
       <div class={separatorClass} />
 
-      {/* 5. 텍스트 색상 + 배경색 (input[type=color] 사용) */}
-      <label class={colorLabelClass} title="텍스트 색상">
+      {/* 5. Text color + background color (using input[type=color]) */}
+      <label class={colorLabelClass} title={i18n?.t("editorToolbar.textColor") ?? "Text color"}>
         <span class={clsx("text-sm font-bold")}>A</span>
         <div class={colorIndicatorClass} style={{ "background-color": currentColor() }} />
         <input
@@ -194,7 +196,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
           onInput={(ev) => props.editor.chain().focus().setColor(ev.currentTarget.value).run()}
         />
       </label>
-      <label class={colorLabelClass} title="배경색">
+      <label class={colorLabelClass} title={i18n?.t("editorToolbar.bgColor") ?? "Background color"}>
         <span
           class={clsx("rounded px-0.5 text-sm font-bold")}
           style={{ "background-color": currentHighlight() }}
@@ -211,14 +213,14 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
         />
       </label>
 
-      {/* 6. 구분선 */}
+      {/* 6. Separator */}
       <div class={separatorClass} />
 
-      {/* 7. 리스트 (Bullet, Ordered) */}
+      {/* 7. List (Bullet, Ordered) */}
       <button
         type="button"
         class={btnClass(isBulletList)}
-        title="글머리 기호 목록"
+        title={i18n?.t("editorToolbar.bulletList") ?? "Bullet list"}
         onClick={() => props.editor.chain().focus().toggleBulletList().run()}
       >
         <Icon icon={IconList} size="1em" />
@@ -226,20 +228,20 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isOrderedList)}
-        title="번호 매기기 목록"
+        title={i18n?.t("editorToolbar.numberedList") ?? "Numbered list"}
         onClick={() => props.editor.chain().focus().toggleOrderedList().run()}
       >
         <Icon icon={IconListNumbers} size="1em" />
       </button>
 
-      {/* 8. 구분선 */}
+      {/* 8. Separator */}
       <div class={separatorClass} />
 
-      {/* 9. 들여쓰기 (Increase, Decrease) */}
+      {/* 9. Indentation (Increase, Decrease) */}
       <button
         type="button"
         class={toolbarBtnClass}
-        title="들여쓰기"
+        title={i18n?.t("editorToolbar.increaseIndent") ?? "Increase indent"}
         onClick={() => props.editor.chain().focus().sinkListItem("listItem").run()}
       >
         <Icon icon={IconIndentIncrease} size="1em" />
@@ -247,20 +249,20 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={toolbarBtnClass}
-        title="내어쓰기"
+        title={i18n?.t("editorToolbar.decreaseIndent") ?? "Decrease indent"}
         onClick={() => props.editor.chain().focus().liftListItem("listItem").run()}
       >
         <Icon icon={IconIndentDecrease} size="1em" />
       </button>
 
-      {/* 10. 구분선 */}
+      {/* 10. Separator */}
       <div class={separatorClass} />
 
-      {/* 11. 블록 (Blockquote, CodeBlock) */}
+      {/* 11. Block (Blockquote, CodeBlock) */}
       <button
         type="button"
         class={btnClass(isBlockquote)}
-        title="인용"
+        title={i18n?.t("editorToolbar.blockquote") ?? "Blockquote"}
         onClick={() => props.editor.chain().focus().toggleBlockquote().run()}
       >
         <Icon icon={IconQuote} size="1em" />
@@ -268,20 +270,20 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isCodeBlock)}
-        title="코드 블록"
+        title={i18n?.t("editorToolbar.codeBlock") ?? "Code block"}
         onClick={() => props.editor.chain().focus().toggleCodeBlock().run()}
       >
         <Icon icon={IconCode} size="1em" />
       </button>
 
-      {/* 12. 구분선 */}
+      {/* 12. Separator */}
       <div class={separatorClass} />
 
-      {/* 13. 정렬 (Left, Center, Right, Justify) */}
+      {/* 13. Alignment (Left, Center, Right, Justify) */}
       <button
         type="button"
         class={btnClass(isAlignLeft)}
-        title="왼쪽 정렬"
+        title={i18n?.t("editorToolbar.alignLeft") ?? "Align left"}
         onClick={() => props.editor.chain().focus().setTextAlign("left").run()}
       >
         <Icon icon={IconAlignLeft} size="1em" />
@@ -289,7 +291,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isAlignCenter)}
-        title="가운데 정렬"
+        title={i18n?.t("editorToolbar.alignCenter") ?? "Align center"}
         onClick={() => props.editor.chain().focus().setTextAlign("center").run()}
       >
         <Icon icon={IconAlignCenter} size="1em" />
@@ -297,7 +299,7 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isAlignRight)}
-        title="오른쪽 정렬"
+        title={i18n?.t("editorToolbar.alignRight") ?? "Align right"}
         onClick={() => props.editor.chain().focus().setTextAlign("right").run()}
       >
         <Icon icon={IconAlignRight} size="1em" />
@@ -305,20 +307,20 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
       <button
         type="button"
         class={btnClass(isAlignJustify)}
-        title="양쪽 정렬"
+        title={i18n?.t("editorToolbar.justify") ?? "Justify"}
         onClick={() => props.editor.chain().focus().setTextAlign("justify").run()}
       >
         <Icon icon={IconAlignJustified} size="1em" />
       </button>
 
-      {/* 14. 구분선 */}
+      {/* 14. Separator */}
       <div class={separatorClass} />
 
-      {/* 15. 테이블 삽입 */}
+      {/* 15. Insert table */}
       <button
         type="button"
         class={toolbarBtnClass}
-        title="테이블 삽입"
+        title={i18n?.t("editorToolbar.insertTable") ?? "Insert table"}
         onClick={() =>
           props.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
         }
@@ -326,19 +328,19 @@ export const EditorToolbar: Component<EditorToolbarProps> = (props) => {
         <Icon icon={IconTablePlus} size="1em" />
       </button>
 
-      {/* 16. 이미지 삽입 */}
-      <button type="button" class={toolbarBtnClass} title="이미지 삽입" onClick={handleImageInsert}>
+      {/* 16. Insert image */}
+      <button type="button" class={toolbarBtnClass} title={i18n?.t("editorToolbar.insertImage") ?? "Insert image"} onClick={handleImageInsert}>
         <Icon icon={IconPhoto} size="1em" />
       </button>
 
-      {/* 17. 구분선 */}
+      {/* 17. Separator */}
       <div class={separatorClass} />
 
-      {/* 18. 서식 지우기 */}
+      {/* 18. Clear formatting */}
       <button
         type="button"
         class={toolbarBtnClass}
-        title="서식 지우기"
+        title={i18n?.t("editorToolbar.clearFormatting") ?? "Clear formatting"}
         onClick={() => props.editor.chain().focus().clearNodes().unsetAllMarks().run()}
       >
         <Icon icon={IconClearFormatting} size="1em" />

package/src/components/form-control/editor/RichTextEditor.tsx

@@ -27,26 +27,26 @@ import type { FieldSize } from "../field/Field.styles";
 import { EditorToolbar } from "./EditorToolbar";
 
 export interface RichTextEditorProps {
-  /** HTML 문자열 값 */
+  /** HTML string value */
   value?: string;
 
-  /** 값 변경 콜백 */
+  /** Value change callback */
   onValueChange?: (value: string) => void;
 
-  /** 비활성화 */
+  /** Disabled */
   disabled?: boolean;
 
-  /** 사이즈 */
+  /** Size */
   size?: FieldSize;
 
-  /** 커스텀 class */
+  /** Custom class */
   class?: string;
 
-  /** 커스텀 style */
+  /** Custom style */
   style?: JSX.CSSProperties;
 }
 
-// 에디터 wrapper 스타일
+// Editor wrapper style
 const editorWrapperClass = clsx(
   "flex flex-col",
   "bg-primary-50 dark:bg-primary-950/30",
@@ -56,10 +56,10 @@ const editorWrapperClass = clsx(
   "focus-within:border-primary-500",
 );
 
-// 에디터 disabled 스타일
+// Editor disabled style
 const editorDisabledClass = clsx("bg-base-100 dark:bg-base-800", "text-base-500");
 
-// 에디터 콘텐츠 영역 스타일
+// Editor content area style
 const editorContentClass = clsx(
   "px-4 py-3",
   "min-h-32",
@@ -68,7 +68,7 @@ const editorContentClass = clsx(
   "dark:prose-invert",
 );
 
-// 에디터 콘텐츠 사이즈별 스타일
+// Editor content size-based style
 const editorContentSizeClasses: Record<FieldSize, string> = {
   xs: clsx("px-1.5 py-1", "min-h-12"),
   sm: clsx("px-3 py-2", "min-h-24"),
@@ -91,7 +91,7 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
     onChange: () => local.onValueChange,
   });
 
-  // 에디터 내부 업데이트(onUpdate)와 외부 value 변경을 구분하기 위한 플래그
+  // Flag to distinguish editor internal update (onUpdate) from external value change
   let isInternalUpdate = false;
 
   let editorRef!: HTMLDivElement;
@@ -119,7 +119,7 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
         allowBase64: true,
       }),
     ],
-    // untrack: value/editable 변경 시 에디터 재생성 방지 (createEffect에서 동기화)
+    // untrack: prevent editor recreation on value/editable change (synced in createEffect)
     content: untrack(() => value()),
     editable: untrack(() => !local.disabled),
     onUpdate({ editor: e }) {
@@ -132,7 +132,7 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
     },
   }));
 
-  // disabled 변경 시 에디터 editable 상태 동기화
+  // Sync editor editable state when disabled changes
   createEffect(() => {
     const e = editor();
     if (e) {
@@ -140,12 +140,12 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
     }
   });
 
-  // 외부에서 value가 변경될 때만 에디터 콘텐츠 동기화
+  // Sync editor content only when external value changes
   createEffect(
     on(
       () => value(),
       (newValue) => {
-        // 에디터 내부 업데이트로 인한 value 변경은 무시
+        // Ignore value change from editor internal update
         if (isInternalUpdate) return;
 
         const e = editor();
@@ -160,7 +160,7 @@ export const RichTextEditor: Component<RichTextEditorProps> = (props) => {
     ),
   );
 
-  // 클린업
+  // Cleanup
   onCleanup(() => {
     editor()?.destroy();
   });

package/src/components/form-control/editor/editor.css

@@ -1,4 +1,4 @@
-/* 에디터 콘텐츠 영역 기본 스타일 */
+/* Editor content area default styles */
 [data-rich-text-editor] .tiptap {
   outline: none;
 }
@@ -11,7 +11,7 @@
   pointer-events: none;
 }
 
-/* 테이블 스타일 */
+/* Table styles */
 [data-rich-text-editor] .tiptap table {
   border-collapse: collapse;
   width: 100%;
@@ -40,7 +40,7 @@
   background-color: #374151;
 }
 
-/* 이미지 스타일 */
+/* Image styles */
 [data-rich-text-editor] .tiptap img {
   max-width: 100%;
   height: auto;
@@ -51,7 +51,7 @@
   outline: 2px solid #3b82f6;
 }
 
-/* 코드 블록 스타일 */
+/* Code block styles */
 [data-rich-text-editor] .tiptap pre {
   background-color: #1e293b;
   color: #e2e8f0;
@@ -68,7 +68,7 @@
   padding: 0;
 }
 
-/* 인용 블록 */
+/* Block quote */
 [data-rich-text-editor] .tiptap blockquote {
   border-left: 3px solid #d1d5db;
   padding-left: 1rem;