プロパティエディター

デザインエディターは、プロパティの型に基づいてデフォルトの編集UI（プロパティエディター）を提供します。

ただし、デフォルトのプロパティエディターでは対応できないユースケースもあります。たとえば、画像選択ダイアログを使用してユーザーが選択した画像をプロパティとして設定する場合です。

このような場合、プロパティエディターをカスタマイズする必要があります。

プロパティエディターをカスタマイズする

プロパティエディターをカスタマイズするには、OrizmEditorComposerコンポーネントのcustomPropEditorsプロパティを使用します。以下はその具体例です。

import "@orizm-private/orizm-editor/editor.css";
import {
  OrizmEditor,
  OrizmEditorComposer,
} from "@orizm-private/orizm-editor/editor";
 
const Page: React.FC = () => {
  return (
    <OrizmEditorComposer
      // other props...
 
      customPropEditors={{
        Image: {
          image: ImageUpload,
        },
      }}
    >
      <OrizmEditor />
    </OrizmEditorComposer>
  );
};

コードの説明

• Image: 対象となるコンポーネントを表します。
• image: プロパティ名を表します。
• ImageUpload: カスタムプロパティエディターとして使用するReactコンポーネントです。

カスタムプロパティエディターの要件

カスタムプロパティエディターとして使用するコンポーネントは、以下のインターフェイスを満たす必要があります。

export interface PropEditorProps<T> {
  value: T;
  onChange: (newValue: T) => void;
}

実装のポイント

• value: 現在のプロパティ値を受け取ります。
• onChange: ユーザー操作に応じて新しい値を渡します。

注意点

無名関数をそのまま渡すような書き方は避けてください。具体的には次のような書き方です。

<OrizmEditorComposer
  // other props...
 
  customPropEditors={{
    Image: {
      image: (props) => <ImageUpload {...props} />,
    },
  }}
>
  <OrizmEditor />
</OrizmEditorComposer>

プロパティエディターの関数インスタンスは変わらないことが期待されます。この書き方はレンダリングのたびに新しい関数インスタンスを生成するため、意図しないタイミングでフォーカスが外れるなどの不具合の原因となります。