@selfcommunity/react-ui 0.7.0-alpha.334 → 0.7.0-alpha.336

package/lib/esm/shared/Media/Link/DisplayComponent.js

@@ -0,0 +1,67 @@
+import { __rest } from "tslib";
+import React, { useMemo } from 'react';
+import { styled } from '@mui/material/styles';
+import LazyLoad from 'react-lazyload';
+import { MEDIA_TYPE_VIDEO } from '../../../constants/Media';
+import AutoPlayer from '../../AutoPlayer';
+import Box from '@mui/material/Box';
+import { DEFAULT_PRELOAD_OFFSET_VIEWPORT } from '../../../constants/LazyLoad';
+import Skeleton from '@mui/material/Skeleton';
+import classNames from 'classnames';
+import { PREFIX } from './constants';
+import filter from './filter';
+const classes = {
+    displayRoot: `${PREFIX}-display-root`,
+    displayLink: `${PREFIX}-link`,
+    displayVideo: `${PREFIX}-video`,
+    thumbnail: `${PREFIX}-thumbnail`,
+    thumbnailFullWidth: `${PREFIX}-thumbnail`,
+    image: `${PREFIX}-image`,
+    snippet: `${PREFIX}-snippet`,
+    snippetTitle: `${PREFIX}-snippet-title`,
+    snippetDescription: `${PREFIX}-snippet-description`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'DisplayRoot'
+})(({ theme }) => ({}));
+export default (props) => {
+    // PROPS
+    const { className = '', medias, fullWidth = false, onMediaClick = null } = props, rest = __rest(props, ["className", "medias", "fullWidth", "onMediaClick"]);
+    // HANDLERS
+    const handleLinkClick = (link) => {
+        onMediaClick && onMediaClick(link);
+    };
+    // MEMO
+    const _medias = useMemo(() => medias.filter(filter), [medias]);
+    // RENDER
+    /**
+     * Renders link display
+     * @param (link)
+     * @param(key)
+     */
+    const renderPreview = (link, key) => {
+        const domain = new URL(link.embed.metadata.url).hostname.replace('www.', '');
+        return (React.createElement(Box, { className: classes.displayLink, key: key },
+            link.embed.metadata.images && link.embed.metadata.images.length > 0 && (React.createElement(React.Fragment, null, fullWidth ? (React.createElement(Box, { className: classNames(classes.thumbnailFullWidth, classes.image), style: { background: `url(${link.image})`, paddingBottom: `${100 / link.image_width / link.image_height}%` } })) : (React.createElement(Box, { className: classNames(classes.thumbnail, classes.image), style: { background: `url(${link.image})` } })))),
+            React.createElement(Box, { className: classes.snippet },
+                React.createElement("b", { className: classes.snippetTitle }, link.embed.metadata.title),
+                React.createElement("br", null),
+                React.createElement("p", { className: classes.snippetDescription }, link.embed.metadata.description),
+                React.createElement("a", { href: link.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(link) }, domain)),
+            React.createElement("div", { style: { clear: 'both' } })));
+    };
+    /**
+     * Renders component
+     */
+    if (_medias.length === 0) {
+        return null;
+    }
+    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest), _medias.map((l, i) => {
+        if (l.embed.metadata && l.embed.metadata.type === MEDIA_TYPE_VIDEO) {
+            return (React.createElement(LazyLoad, { className: classes.displayVideo, placeholder: React.createElement(Skeleton, { variant: "rectangular", height: 360, width: '100%' }), key: i, once: true, offset: DEFAULT_PRELOAD_OFFSET_VIEWPORT },
+                React.createElement(AutoPlayer, { url: l.url, width: '100%', key: i, onVideoWatch: () => handleLinkClick(l) })));
+        }
+        return React.createElement(React.Fragment, { key: i }, renderPreview(l, i));
+    })));
+};

package/lib/esm/shared/Media/Link/LayerComponent.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BoxProps } from '@mui/material';
+import { SCMediaType } from '@selfcommunity/types/src/index';
+import { ComposerLayerProps } from '../../../types/composer';
+export interface LayerComponentProps extends Omit<BoxProps, 'defaultValue'>, ComposerLayerProps {
+    defaultValue: SCMediaType[];
+}
+declare const LayerComponent: React.ForwardRefExoticComponent<Pick<LayerComponentProps, "p" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "component" | "sx" | "classes" | "onClose" | "onSave"> & React.RefAttributes<unknown>>;
+export default LayerComponent;

package/lib/esm/shared/Media/Link/LayerComponent.js

@@ -0,0 +1,44 @@
+import { __rest } from "tslib";
+import React, { useCallback, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Box, Button, DialogTitle, IconButton, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import Icon from '@mui/material/Icon';
+import DialogContent from '@mui/material/DialogContent';
+import classNames from 'classnames';
+import { PREFIX } from './constants';
+import PreviewComponent from './PreviewComponent';
+import UrlTextField from './UrlTextField';
+const classes = {
+    layerRoot: `${PREFIX}-layer-root`,
+    title: `${PREFIX}-layer-title`,
+    content: `${PREFIX}-layer-content`,
+    media: `${PREFIX}-media`,
+    delete: `${PREFIX}-delete`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'LayerRoot'
+})(() => ({}));
+const LayerComponent = React.forwardRef((props, ref) => {
+    // PROPS
+    const { className, onClose, onSave, defaultValue = [] } = props, rest = __rest(props, ["className", "onClose", "onSave", "defaultValue"]);
+    // STATE
+    const [value, setValue] = useState(defaultValue);
+    // HANDLERS
+    const handleSave = useCallback(() => onSave(value), [value]);
+    const handleAdd = useCallback((media) => setValue([...value, media]), [value]);
+    const handleChange = useCallback((medias) => setValue(medias), []);
+    return React.createElement(Root, Object.assign({ ref: ref, className: classNames(className, classes.layerRoot) }, rest),
+        React.createElement(DialogTitle, { className: classes.title },
+            React.createElement(IconButton, { onClick: onClose },
+                React.createElement(Icon, null, "arrow_back")),
+            React.createElement(Typography, null,
+                React.createElement(FormattedMessage, { id: "ui.composer.media.link.layer.title", defaultMessage: "ui.composer.media.link.layer.title" })),
+            React.createElement(Button, { size: "small", color: "secondary", variant: "contained", onClick: handleSave },
+                React.createElement(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }))),
+        React.createElement(DialogContent, { className: classes.content },
+            React.createElement(UrlTextField, { id: "page", name: "page", label: React.createElement(FormattedMessage, { id: "ui.composer.media.link.add.label", defaultMessage: "ui.composer.media.link.add.label" }), fullWidth: true, variant: "outlined", placeholder: "https://", onSuccess: handleAdd }),
+            React.createElement(PreviewComponent, { onChange: handleChange, value: value })));
+});
+export default LayerComponent;

package/lib/esm/shared/Media/Link/PreviewComponent.d.ts

@@ -1,23 +1,9 @@
 import React from 'react';
-export interface LinkPreviewProps {
-    /**
-     * Medias
-     */
-    medias: any[];
-    /**
-     * Handle full width option
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Component adornments
-     * @default null
-     */
-    adornment?: React.ReactNode;
-    /**
-     * Handles on media click
-     */
-    onMediaClick?: (any: any) => void;
+import { BoxProps } from '@mui/material';
+import { SCMediaType } from '@selfcommunity/types/src/index';
+export interface PreviewComponentProps extends Omit<BoxProps, 'value' | 'onChange'> {
+    onChange: (value: SCMediaType[]) => void;
+    value: SCMediaType[];
 }
-declare const _default: (props: LinkPreviewProps) => JSX.Element;
-export default _default;
+declare const PreviewComponent: React.ForwardRefExoticComponent<Pick<PreviewComponentProps, "p" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "component" | "sx" | "classes" | "value"> & React.RefAttributes<unknown>>;
+export default PreviewComponent;

package/lib/esm/shared/Media/Link/PreviewComponent.js

@@ -1,62 +1,35 @@
-import React from 'react';
+import { __rest } from "tslib";
+import React, { useCallback, useMemo } from 'react';
+import { Box, IconButton } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import LazyLoad from 'react-lazyload';
-import { MEDIA_TYPE_VIDEO } from '../../../constants/Media';
-import AutoPlayer from '../../AutoPlayer';
-import Box from '@mui/material/Box';
-import { DEFAULT_PRELOAD_OFFSET_VIEWPORT } from '../../../constants/LazyLoad';
-import Skeleton from '@mui/material/Skeleton';
+import Icon from '@mui/material/Icon';
 import classNames from 'classnames';
-const PREFIX = 'SCPreviewMediaLink';
+import { ReactSortable } from 'react-sortablejs';
+import DisplayComponent from './DisplayComponent';
+import { PREFIX } from './constants';
+import filter from './filter';
 const classes = {
-    previewLink: `${PREFIX}-preview-link`,
-    previewVideo: `${PREFIX}-preview-video`,
-    thumbnail: `${PREFIX}-thumbnail`,
-    thumbnailFullWidth: `${PREFIX}-thumbnail`,
-    image: `${PREFIX}-image`,
-    snippet: `${PREFIX}-snippet`,
-    snippetTitle: `${PREFIX}-snippet-title`,
-    snippetDescription: `${PREFIX}-snippet-description`
+    previewRoot: `${PREFIX}-preview-root`,
+    media: `${PREFIX}-media`,
+    delete: `${PREFIX}-delete`
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
-export default (props) => {
+    slot: 'PreviewRoot'
+})(() => ({}));
+const PreviewComponent = React.forwardRef((props, ref) => {
     // PROPS
-    const { medias, fullWidth = false, adornment = null, onMediaClick = null } = props;
+    const { className, onChange, value = [] } = props, rest = __rest(props, ["className", "onChange", "value"]);
+    // MEMO
+    const medias = useMemo(() => value.filter(filter), [value]);
     // HANDLERS
-    const handleLinkClick = (link) => {
-        onMediaClick && onMediaClick(link);
-    };
-    // RENDER
-    /**
-     * Renders link preview
-     * @param (link)
-     * @param(key)
-     */
-    const renderPreview = (link, key) => {
-        const domain = new URL(link.embed.metadata.url).hostname.replace('www.', '');
-        return (React.createElement(Box, { className: classes.previewLink, key: key },
-            link.embed.metadata.images && link.embed.metadata.images.length > 0 && (React.createElement(React.Fragment, null, fullWidth ? (React.createElement(Box, { className: classNames(classes.thumbnailFullWidth, classes.image), style: { background: `url(${link.image})`, paddingBottom: `${100 / link.image_width / link.image_height}%` } })) : (React.createElement(Box, { className: classNames(classes.thumbnail, classes.image), style: { background: `url(${link.image})` } })))),
-            React.createElement(Box, { className: classes.snippet },
-                React.createElement("b", { className: classes.snippetTitle }, link.embed.metadata.title),
-                React.createElement("br", null),
-                React.createElement("p", { className: classes.snippetDescription }, link.embed.metadata.description),
-                React.createElement("a", { href: link.embed.metadata.url, target: '_blank', onClick: () => handleLinkClick(link) }, domain)),
-            React.createElement("div", { style: { clear: 'both' } })));
-    };
-    /**
-     * Renders component
-     */
-    return (React.createElement(React.Fragment, null, medias.length > 0 && (React.createElement(Root, null,
-        adornment,
-        medias.map((l, i) => {
-            if (l.embed.metadata && l.embed.metadata.type === MEDIA_TYPE_VIDEO) {
-                return (React.createElement(LazyLoad, { className: classes.previewVideo, placeholder: React.createElement(Skeleton, { variant: "rectangular", height: 360, width: '100%' }), key: i, once: true, offset: DEFAULT_PRELOAD_OFFSET_VIEWPORT },
-                    React.createElement(AutoPlayer, { url: l.url, width: '100%', key: i, onVideoWatch: () => handleLinkClick(l) })));
-            }
-            return React.createElement(React.Fragment, { key: i }, renderPreview(l, i));
-        })))));
-};
+    const handleSort = useCallback((medias) => {
+        onChange && onChange([...value.filter((media) => medias.findIndex((m) => m.id === media.id) === -1), ...medias]);
+    }, [onChange]);
+    const handleDelete = useCallback((id) => () => onChange && onChange(value.filter((media) => media.id !== id)), [onChange, value]);
+    return React.createElement(Root, Object.assign({ ref: ref, className: classNames(className, classes.previewRoot) }, rest), medias.length > 0 && (React.createElement(ReactSortable, { list: medias, setList: handleSort }, medias.map((media) => (React.createElement(Box, { key: media.id, className: classes.media },
+        React.createElement(DisplayComponent, { medias: [media] }),
+        React.createElement(IconButton, { className: classes.delete, onClick: handleDelete(media.id), size: "small" },
+            React.createElement(Icon, null, "delete"))))))));
+});
+export default PreviewComponent;

package/lib/esm/shared/Media/Link/TriggerButton.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { IconButtonProps } from '@mui/material';
+declare const _default: ({ className, ...rest }: IconButtonProps) => ReactElement;
+export default _default;

package/lib/esm/shared/Media/Link/TriggerButton.js

@@ -0,0 +1,19 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { IconButton } from '@mui/material';
+import Icon from '@mui/material/Icon';
+import { PREFIX } from './constants';
+import { styled } from '@mui/material/styles';
+import classNames from 'classnames';
+const classes = {
+    triggerRoot: `${PREFIX}-trigger-root`
+};
+const Root = styled(IconButton, {
+    name: PREFIX,
+    slot: 'TriggerRoot'
+})(() => ({}));
+export default (_a) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.triggerRoot) }, rest, { "aria-label": "add link" }),
+        React.createElement(Icon, null, "link")));
+};

package/lib/esm/shared/Media/Link/UrlTextField/index.js

@@ -1,10 +1,9 @@
 import { __rest } from "tslib";
 import React, { useEffect, useState } from 'react';
 import InputAdornment from '@mui/material/InputAdornment';
-import Icon from '@mui/material/Icon';
 import IconButton from '@mui/material/IconButton';
 import TextField from '@mui/material/TextField';
-import { http, Endpoints, formatHttpErrorCode } from '@selfcommunity/api-services';
+import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
 import { isValidUrl } from '@selfcommunity/utils';
 import { MEDIA_TYPE_URL } from '../../../../constants/Media';
 import { FormattedMessage } from 'react-intl';
@@ -77,6 +76,6 @@ export default (props) => {
                 (urlError && (React.createElement(FormattedMessage, { id: `ui.composer.media.link.add.error.${urlError}`, defaultMessage: `ui.composer.media.link.add.error.${urlError}` }))) || React.createElement(FormattedMessage, { id: "ui.composer.media.link.add.help", defaultMessage: "ui.composer.media.link.add.help" }), disabled: isCreating }, rest, { InputProps: {
                 endAdornment: (React.createElement(InputAdornment, { position: "end" },
                     React.createElement(Fade, { in: urlError === null && url !== '' },
-                        React.createElement(IconButton, { size: "small", disabled: isCreating, type: "submit" }, isCreating ? React.createElement(CircularProgress, { color: "primary", size: 20 }) : React.createElement(Icon, null, "play_arrow")))))
+                        React.createElement(IconButton, { size: "small", disabled: isCreating, type: "submit" }, isCreating ? React.createElement(CircularProgress, { color: "primary", size: 20 }) : React.createElement(FormattedMessage, { id: "ui.composer.media.link.add.submit", defaultMessage: "ui.composer.media.link.add.submit" })))))
             } }))));
 };

package/lib/esm/shared/Media/Link/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCMediaLink";

package/lib/esm/shared/Media/Link/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCMediaLink';

package/lib/esm/shared/Media/Link/filter.d.ts

@@ -0,0 +1,3 @@
+import { SCMediaType } from '@selfcommunity/types/src/types';
+declare const _default: (media: SCMediaType) => boolean;
+export default _default;

package/lib/esm/shared/Media/Link/filter.js

@@ -0,0 +1,2 @@
+import { MEDIA_EMBED_SC_LINK_TYPE, MEDIA_TYPE_URL } from '../../../constants/Media';
+export default (media) => media.type === MEDIA_TYPE_URL && media.embed && media.embed.embed_type === MEDIA_EMBED_SC_LINK_TYPE;

package/lib/esm/shared/Media/Link/index.js

@@ -1,13 +1,14 @@
-import React from 'react';
+import DisplayComponent from './DisplayComponent';
+import TriggerButton from './TriggerButton';
+import LayerComponent from './LayerComponent';
 import PreviewComponent from './PreviewComponent';
-import EditButton from './EditButton';
-import EditComponent from './EditComponent';
-import { MEDIA_TYPE_URL, MEDIA_EMBED_SC_LINK_TYPE } from '../../../constants/Media';
+import filter from './filter';
 const Link = {
     name: 'link',
-    previewComponent: (props) => React.createElement(PreviewComponent, Object.assign({}, props)),
-    editButton: (props) => React.createElement(EditButton, Object.assign({}, props)),
-    editComponent: (props) => React.createElement(EditComponent, Object.assign({}, props)),
-    filter: (media) => media.type === MEDIA_TYPE_URL && media.embed && media.embed.embed_type === MEDIA_EMBED_SC_LINK_TYPE
+    displayComponent: DisplayComponent,
+    triggerButton: TriggerButton,
+    layerComponent: LayerComponent,
+    previewComponent: PreviewComponent,
+    filter
 };
 export default Link;

package/lib/esm/shared/Media/Share/DisplayComponent.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { SCMediaType } from '@selfcommunity/types/src/types';
+import { BoxProps } from '@mui/material';
+export interface DisplayComponentProps extends BoxProps {
+    /**
+     * Medias
+     */
+    medias: SCMediaType[];
+}
+declare const _default: ({ className, medias, ...rest }: DisplayComponentProps) => ReactElement;
+export default _default;

package/lib/esm/shared/Media/Share/DisplayComponent.js

@@ -0,0 +1,29 @@
+import { __rest } from "tslib";
+import React, { useMemo } from 'react';
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import FeedObject from '../../../components/FeedObject';
+import { SCFeedObjectTemplateType } from '../../../types/feedObject';
+import { CacheStrategies } from '@selfcommunity/utils';
+import classNames from 'classnames';
+import filter from './filter';
+import { PREFIX } from './constants';
+const classes = {
+    displayRoot: `${PREFIX}-display-root`,
+    sharePreview: `${PREFIX}-share-preview`,
+    sharePlaceholder: `${PREFIX}-share-placeholder`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'DisplayRoot'
+})(({ theme }) => ({}));
+export default (_a) => {
+    var { className, medias = [] } = _a, rest = __rest(_a, ["className", "medias"]);
+    // MEMO
+    const _medias = useMemo(() => medias.filter(filter), [medias]);
+    if (_medias.length === 0) {
+        return null;
+    }
+    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.displayRoot) }, rest), _medias.map((media, i) => (React.createElement(Box, { className: classes.sharePreview, key: i },
+        React.createElement(FeedObject, { feedObjectId: media.embed.metadata.id, feedObjectType: media.embed.metadata.type, variant: 'outlined', template: SCFeedObjectTemplateType.SHARE, cacheStrategy: CacheStrategies.CACHE_FIRST }))))));
+};

package/lib/esm/shared/Media/Share/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCMediaShare";

package/lib/esm/shared/Media/Share/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCMediaShare';

package/lib/esm/shared/Media/Share/filter.d.ts

@@ -0,0 +1,3 @@
+import { SCMediaType } from '@selfcommunity/types/src/types';
+declare const _default: (media: SCMediaType) => boolean;
+export default _default;

package/lib/esm/shared/Media/Share/filter.js

@@ -0,0 +1,2 @@
+import { MEDIA_TYPE_SHARE } from '../../../constants/Media';
+export default (media) => media.type === MEDIA_TYPE_SHARE;

package/lib/esm/shared/Media/Share/index.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import PreviewComponent from './PreviewComponent';
-import { MEDIA_TYPE_SHARE } from '../../../constants/Media';
+import DisplayComponent from './DisplayComponent';
+import filter from './filter';
 const Share = {
     name: 'share',
-    previewComponent: (props) => React.createElement(PreviewComponent, Object.assign({}, props)),
-    editButton: null,
-    editComponent: null,
-    filter: (media) => media.type === MEDIA_TYPE_SHARE
+    displayComponent: DisplayComponent,
+    triggerButton: null,
+    layerComponent: null,
+    previewComponent: null,
+    filter
 };
 export default Share;

package/lib/esm/shared/Media/index.d.ts

@@ -1,7 +1,5 @@
-import Image from './Image';
-import Document from './Document';
+import File from './File';
 import Link from './Link';
-import Video from './Video';
 import Share from './Share';
 import { EditMediaProps } from './types';
-export { Image, Document, Link, Video, Share, EditMediaProps };
+export { File, Link, Share, EditMediaProps };

package/lib/esm/shared/Media/index.js

@@ -1,6 +1,4 @@
-import Image from './Image';
-import Document from './Document';
+import File from './File';
 import Link from './Link';
-import Video from './Video';
 import Share from './Share';
-export { Image, Document, Link, Video, Share };
+export { File, Link, Share };

package/lib/esm/types/composer.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+import { SCFeedPostType } from '@selfcommunity/types/src/types';
+export interface ComposerLayerType {
+    name: string;
+    Component: (props: any) => ReactElement;
+    ComponentProps: any;
+}
+export interface ComposerLayerProps {
+    onClose: () => void;
+    onSave: (value: any) => void;
+    defaultValue: any;
+}
+export declare type ComposerContentType = Omit<SCFeedPostType, 'id' | 'last_activity_at' | 'added_at' | 'slug' | 'summary' | 'deleted' | 'collapsed' | 'comment_count' | 'share_count' | 'view_count' | 'vote_count' | 'follower_count' | 'reaction' | 'reactions_count' | 'flag_count' | 'type'> & {
+    title?: string;
+};

package/lib/esm/types/composer.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/types/media.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 /**
  * Interface MediaObject
  */
@@ -10,19 +10,23 @@ export interface SCMediaObjectType {
     /**
      * The component used to display media
      */
-    previewComponent: React.ElementType;
+    displayComponent: (props: any) => ReactElement;
     /**
      * Hook for insert custom props to preview component
      */
-    previewProps?: any;
+    displayProps?: any;
     /**
      * The button used to trigger the action
      */
-    editButton: React.ElementType | null;
+    triggerButton: (props: any) => ReactElement;
+    /**
+     * The component used to preview the list of media of this type in the composer
+     */
+    previewComponent: (props: any) => ReactElement;
     /**
      * The component used to interact with the list of media of this type
      */
-    editComponent: React.ElementType | null;
+    layerComponent: (props: any) => ReactElement;
     /**
      * The function used to filter media objects for rendering purpose
      */