입력 컨트롤 렌더링

필드 렌더링

Editor 위젯은 다양한 입력 컨트롤을 렌더링하는 기능을 제공합니다. 이 컨트롤에는 기본 입력 유형, 고급 컴포넌트, 그리고 댓글 및 작업 목록과 같은 특수 위젯이 포함됩니다. 각 컨트롤은 특정 사용 사례에 맞게 레이블, 키 및 추가 속성으로 커스터마이징할 수 있습니다.

Editor에서 색상 선택 컨트롤 렌더링

@svar-ui/react-core에서 ColorSelect 컨트롤을 가져와 Editor 아이템으로 등록합니다:

import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { ColorSelect } from "@svar-ui/react-core";

registerEditorItem("colorselect", ColorSelect);

const items = [
  {
    comp: "colorselect",
    key: "name",
    label: "Name"
  }
];

<Editor items={items} />

색상 선택 컨트롤은 사용자가 그래픽 인터페이스를 통해 색상을 선택할 수 있도록 합니다. 테마 커스터마이징이나 카테고리에 색상을 지정하는 등 색상을 정의해야 하는 경우에 적합합니다.

Editor에서 날짜 선택 컨트롤 렌더링

@svar-ui/react-core에서 DatePicker 컨트롤을 가져와 Editor 아이템으로 등록합니다:

import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { DatePicker } from "@svar-ui/react-core";

registerEditorItem("datepicker", DatePicker);

const items = [
  {
    comp: "datepicker",
    key: "name",
    label: "Name"
  }
];

<Editor items={items} />

날짜 선택 컨트롤은 사용자가 캘린더 인터페이스에서 날짜를 선택할 수 있도록 합니다. 일정 관리, 마감일 설정 또는 날짜 관련 입력이 필요한 시나리오에 유용합니다.

Editor에서 라디오 버튼 렌더링

@svar-ui/react-core에서 RadioButtonGroup 컨트롤을 가져와 Editor 아이템으로 등록합니다:

import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { RadioButtonGroup } from "@svar-ui/react-core";

registerEditorItem("radio-group", RadioButtonGroup);

const items = [
  {
    comp: "radio-group",
    key: "name",
    label: "Name",
    options: [
      {
        value: "s",
        label: "Scorpions",
      },
      {
        value: "m",
        label: "Muse",
      },
    ]
  }
];

<Editor items={items} />

라디오 버튼은 하나만 선택 가능한 여러 옵션을 사용자에게 제공할 때 사용합니다. 환경 설정이나 카테고리 선택과 같은 시나리오에 적합합니다.

Editor에서 읽기 전용 블록 렌더링

이 컨트롤은 내장 컨트롤로 별도의 등록이 필요하지 않습니다.

import { Editor } from "@svar-ui/react-editor";

const items = [
  {
    comp: "readonly",
    key: "name",
    label: "Name"
  }
];

<Editor items={items} />

읽기 전용 블록은 편집할 수 없는 정적 정보를 표시하는 데 사용됩니다. 미리 정의된 데이터나 시스템이 생성한 데이터를 표시하는 데 유용합니다.

Editor에서 Rich Select 컨트롤 렌더링

@svar-ui/react-core에서 RichSelect 컨트롤을 가져와 Editor 아이템으로 등록합니다:

import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { RichSelect } from "@svar-ui/react-core";

registerEditorItem("select", RichSelect);

const items = [
  {
    comp: "select",
    key: "name",
    label: "Name",
    options: [
      { id: 1, label: "High", color: "#DF282F" },
      { id: 2, label: "Medium", color: "#FFC975" },
      { id: 3, label: "Low", color: "#65D3B3" },
    ]
  }
];

<Editor items={items} />

Rich Select 컨트롤은 색상이나 아이콘 등의 추가 속성을 통해 더 나은 시각화와 함께 목록에서 옵션을 선택할 수 있도록 합니다. 우선순위 선택이나 분류 작업에 적합합니다.

Editor에서 슬라이더 컨트롤 렌더링

@svar-ui/react-core에서 Slider 컨트롤을 가져와 Editor 아이템으로 등록합니다:

import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { Slider } from "@svar-ui/react-core";

registerEditorItem("slider", Slider);

const items = [
  {
    comp: "slider",
    key: "name",
    label: "Name"
  }
];

<Editor items={items} />

슬라이더 컨트롤은 미리 정의된 범위 내에서 값을 선택하는 데 사용됩니다. 볼륨, 밝기 또는 평점 시스템과 같은 설정에 주로 활용됩니다.

Editor에서 편집 가능한 텍스트 컨트롤 렌더링

이 컨트롤은 내장 컨트롤로 별도의 등록이 필요하지 않습니다.

import { Editor } from "@svar-ui/react-editor";

const items = [
  {
    comp: "text",
    key: "name",
    label: "Name"
  }
];

<Editor items={items} />

편집 가능한 텍스트 컨트롤은 한 줄 텍스트를 입력하기 위한 기본 입력 필드입니다. 이름, 제목 또는 간단한 설명 등 단순 데이터 입력에 적합합니다.

Editor에서 Textarea 컨트롤 렌더링

이 컨트롤은 내장 컨트롤로 별도의 등록이 필요하지 않습니다.

import { Editor } from "@svar-ui/react-editor";

const items = [
  {
    comp: "textarea",
    key: "name",
    label: "Name"
  }
];

<Editor items={items} />

Textarea 컨트롤은 더 긴 텍스트를 입력하기 위한 여러 줄 입력 필드를 제공합니다. 댓글, 설명 또는 메모 작성에 적합합니다.

Editor에 댓글 추가

@svar-ui/react-comments에서 Comments 위젯을 가져와 Editor 아이템으로 등록합니다:

import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { Comments } from "@svar-ui/react-comments";

registerEditorItem("comments", Comments);

const users = [
  {
    id: 1,
    name: "John Doe",
    avatar: "https://via.placeholder.com/150",
  },
];

const items = [
  {
    comp: "comments",
    key: "comments",
    label: "Comments",
    users,
    activeUser: 1,
  },
];

const data = {
  comments: [
    {
      id: 1,
      user: 1,
      content: "Greetings, fellow colleagues.",
      date: new Date(),
    },
  ],
};

<Editor items={items} values={data} />

Comments 위젯은 사용자가 에디터 내에서 댓글을 추가, 조회 및 관리할 수 있도록 합니다. 사용자 식별 및 타임스탬프 기능을 갖추고 있어 협업 워크플로우나 피드백 시스템에 유용합니다.

관련 샘플: Comments

Editor에 작업 목록 추가

@svar-ui/react-tasklist에서 TaskList 위젯을 가져와 Editor 아이템으로 등록합니다:

import { Editor, registerEditorItem } from "@svar-ui/react-editor";
import { TaskList } from "@svar-ui/react-tasklist";

registerEditorItem("tasks", TaskList);

const items = [
  {
    comp: "tasks",
    key: "task",
    label: "Task",
  },
];

const data = {
  task: [
    {
      id: 1,
      title: "Task 1",
      status: 1,
    },
  ],
};

<Editor items={items} values={data} />

작업 목록 위젯은 에디터에 작업 관리 기능을 통합합니다. 작업 제목 및 상태 업데이트 필드를 통해 작업을 생성하고 추적하는 데 적합합니다.

관련 샘플: Tasklist