utility.md

ImageChooser

ImageChooser is used when developer wants a dialog to choose an image. It's used like Modal where you need a state to show/hide the dialog.

<ImageChooser visible={shown} ... />

type ImageChooserProps = {
  visible: boolean;
  value?: BrowseImageCallbackParams;
  multiple?: boolean;
  options?: { showInline?: boolean };
  onConfirm?: (
    value: BrowseImageCallbackParams,
    options?: { inline?: boolean }
  ) => void;
  onCancel?: () => void;
};

type BrowseImageCallbackParams = ImageInfo[];

interface ImageInfo {
  src: string;
  description?: string;
  id?: string | number;
}

ImageSetting

ImageSetting is a component with 'Choose' button and wrapping ImageChooser pop up.

export const ImageSetting = (props: {
  defaultVisible?: boolean;
  value: DME.ImageInfo;
  onChange: (value: DMEImageInfo) => void;
})

LinkChooser

Simiar to ImageChooser, LinkChooser is a component with Choose button and wrapping ImageChooser pop up. Specially useful in setting panel.

LinkChooser uses ref object to open.

<LinkChooser ref={linkRef} ... />

//trigger open
<button onClick={()=>linkRef.current?.open()}>Choose</button>


//Ref type
type LinkRef = {
  open: () => void;
};


//Property type
interface LinkChooserProps {
  defaultVisible: boolean; //mostly case it's false
  value?: BrowseLinkCallbackParams;
  onConfirm?: (value: BrowseLinkCallbackParams) => void;
  showOpenNew?: boolean;
  urlOnly?: boolean; //show only url or mail and other format(mail, telephone), useful in eg. iframe url
}



type  BrowseLinkCallbackParams = { link: string; openNew?: boolean }

MiniRichText

MiniRichText is rich text edit used in editing on blocks area. Use rich-text setting component if you want to edit on setting area.

Eg. it's used in table cell.

<MiniRichText ... />

interface MiniRichTextProps {
  placeHolder?: string;
  mode?: DME.WidgetRenderProps["mode"];
  value?: Array<Descendant> | null;
  onValueChange: (value: Descendant[]) => void;
}

PickColor

Color picker component.

<PickColr ... />

interface PickColorProps {
  color: string | undefined;
  onChange?: (color?: string) => void;
}

Helper functions

iterateBlockList

It iterates all block list (can be saved data) from top to down.

iterateBlockList: (
  blocklist: DMEData.BlockList,
  callback: (blockItem: DMEData.Block) => boolean | void
)=>void

If the callback returns false, it will stop iterate.

iterateBlockTree

It iterates block's children from top to down.

iterateBlockList: (
  block: DMEData.Block,
  callback: (blockItem: DMEData.Block) => boolean | void
)=>void

If the callback returns false, it will stop iterate.

richTextJsonToHTML

richTextJsonToHTML convert rich text json to html, which might be useful for data export

richTextJsonToHTML: (value: Descendant[]) => string;