@selfcommunity/react-ui 0.7.0-alpha.335 → 0.7.0-alpha.337

package/lib/cjs/components/Composer/Composer.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LOCATION_VIEW = exports.POLL_VIEW = exports.AUDIENCE_VIEW = exports.MAIN_VIEW = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const types_1 = require("@selfcommunity/types");
@@ -13,100 +12,57 @@ const styles_1 = require("@mui/material/styles");
 const Composer_1 = require("../../constants/Composer");
 const Media_1 = require("../../constants/Media");
 const LoadingButton_1 = tslib_1.__importDefault(require("@mui/lab/LoadingButton"));
-const Audience_1 = tslib_1.__importDefault(require("./Audience"));
-const CategoryAutocomplete_1 = tslib_1.__importDefault(require("../CategoryAutocomplete"));
+const AudienceLayer_1 = tslib_1.__importDefault(require("./Layer/AudienceLayer"));
 const utils_1 = require("@selfcommunity/utils");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Poll_1 = tslib_1.__importDefault(require("../FeedObject/Poll"));
-const Editor_1 = tslib_1.__importDefault(require("../Editor"));
-const Media_2 = require("../../shared/Media");
-const MediasPreview_1 = tslib_1.__importDefault(require("../../shared/MediasPreview"));
-const Poll_2 = tslib_1.__importDefault(require("./Poll"));
-const LocationAutocomplete_1 = tslib_1.__importDefault(require("../LocationAutocomplete"));
-const TagChip_1 = tslib_1.__importDefault(require("../../shared/TagChip"));
-const index_1 = require("./index");
+const ContentPoll_1 = tslib_1.__importDefault(require("./Content/ContentPoll"));
 const notistack_1 = require("notistack");
 const system_1 = require("@mui/system");
 const editor_1 = require("../../utils/editor");
+const TypeSwitchButtonGroup_1 = tslib_1.__importDefault(require("./TypeSwitchButtonGroup"));
+const ContentPost_1 = tslib_1.__importDefault(require("./Content/ContentPost"));
+const CategoryLayer_1 = tslib_1.__importDefault(require("./Layer/CategoryLayer"));
+const LocationLayer_1 = tslib_1.__importDefault(require("./Layer/LocationLayer"));
+const ContentDiscussion_1 = tslib_1.__importDefault(require("./Content/ContentDiscussion"));
+const Media_2 = require("../../shared/Media");
+const Attributes_1 = tslib_1.__importDefault(require("./Attributes"));
+const constants_1 = require("./constants");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const CloseLayer_1 = tslib_1.__importDefault(require("./Layer/CloseLayer"));
 const DialogTransition = (0, react_1.forwardRef)(function Transition(props, ref) {
     return react_1.default.createElement(material_1.Fade, Object.assign({ ref: ref }, props));
 });
-const TypeInput = (0, styles_1.styled)(material_1.InputBase, {
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    '&.Mui-InputBase-root': {
-        'label + &': {
-            marginTop: theme.spacing(3)
-        }
-    },
-    '& .Mui-InputBase-input': {
-        position: 'relative',
-        backgroundColor: theme.palette.background.paper,
-        border: 0,
-        padding: '10px 26px 10px 12px'
-    }
-}));
-const PREFIX = 'SCComposer';
 const classes = {
-    root: `${PREFIX}-root`,
-    ios: `${PREFIX}-ios`,
-    writing: `${PREFIX}-writing`,
-    title: `${PREFIX}-title`,
-    titleDense: `${PREFIX}-title-dense`,
-    types: `${PREFIX}-types`,
-    avatar: `${PREFIX}-avatar`,
-    content: `${PREFIX}-content`,
-    mediaContent: `${PREFIX}-mediaContent`,
-    audienceContent: `${PREFIX}-audienceContent`,
-    locationContent: `${PREFIX}-locationContent`,
-    block: `${PREFIX}-block`,
-    editor: `${PREFIX}-editor`,
-    divider: `${PREFIX}-divider`,
-    medias: `${PREFIX}-medias`,
-    location: `${PREFIX}-location`,
-    audience: `${PREFIX}-audience`,
-    mediasActions: `${PREFIX}-mediasActions`,
-    mediasActionsTitle: `${PREFIX}-mediasActionsTitle`,
-    mediasActionsActions: `${PREFIX}-mediasActionsActions`,
-    sortableMedia: `${PREFIX}-sortableMedia`,
-    sortableMediaCover: `${PREFIX}-sortableMediaCover`,
-    links: `${PREFIX}-links`,
-    actions: `${PREFIX}-actions`,
-    mediaActions: `${PREFIX}-media-actions`,
-    filterActions: `${PREFIX}-filter-actions`,
-    actionInput: `${PREFIX}-actionInput`,
-    badgeError: `${PREFIX}-badgeError`
+    root: `${constants_1.PREFIX}-root`,
+    ios: `${constants_1.PREFIX}-ios`,
+    title: `${constants_1.PREFIX}-title`,
+    types: `${constants_1.PREFIX}-types`,
+    content: `${constants_1.PREFIX}-content`,
+    attributes: `${constants_1.PREFIX}-attributes`,
+    medias: `${constants_1.PREFIX}-medias`,
+    actions: `${constants_1.PREFIX}-actions`,
+    layerTransitionRoot: `${constants_1.PREFIX}-layer-transition-root`
 };
 const Root = (0, styles_1.styled)(material_1.Dialog, {
-    name: PREFIX,
+    name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(() => ({}));
-exports.MAIN_VIEW = 'main';
-exports.AUDIENCE_VIEW = 'audience';
-exports.POLL_VIEW = 'poll';
-exports.LOCATION_VIEW = 'location';
-const AUDIENCE_ALL = 'all';
-const AUDIENCE_TAG = 'tag';
-const PREFERENCES = [
-    react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED,
-    react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED,
-    react_core_1.SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED,
-    react_core_1.SCPreferences.ADDONS_POLLS_ENABLED,
-    react_core_1.SCPreferences.ADDONS_VIDEO_UPLOAD_ENABLED
-];
+const LayerTransitionRoot = (0, styles_1.styled)(material_1.Slide, {
+    name: constants_1.PREFIX,
+    slot: 'LayerTransitionRoot',
+    overridesResolver: (props, styles) => styles.layerTransitionRoot
+})(({ theme }) => ({}));
 const COMPOSER_INITIAL_STATE = {
     id: null,
     type: null,
     title: '',
     titleError: null,
-    text: '',
-    textError: null,
+    html: '',
+    htmlError: null,
     categories: [],
     categoriesError: null,
-    audience: AUDIENCE_ALL,
-    addressing: [],
+    addressing: null,
     addressingError: null,
     medias: [],
     poll: null,
@@ -128,6 +84,14 @@ const reducer = (state, action) => {
  *
  *
  * The Composer component contains the logic around the creation of [Post](https://developers.selfcommunity.com/docs/apireference/v2/post/create_a_post) and [Discussion](https://developers.selfcommunity.com/docs/apireference/v2/discussion/create_a_discussion) objects.
+ *
+ *
+ :::info
+ To prevent the editor toolbar and action botton bar being hidden underneath the Virtual Keyboard you need to set the `interactive-widget=resizes-content` on meta viewport.
+ This works on chrome for android.
+ For iOS devices there is a lack of support of this meta so we force the blur event when the user start dragging.
+ [More information](https://bram.us/2021/09/13/prevent-items-from-being-hidden-underneath-the-virtual-keyboard-by-means-of-the-virtualkeyboard-api/)
+ :::
 
  #### Import
  ```jsx
@@ -141,30 +105,14 @@ const reducer = (state, action) => {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCComposer-root|Styles applied to the root element.|
- |writing|.SCComposer-writing|Styles applied to the root element when user is writing in the editor.|
+ |ios|.SCComposer-ios|Styles applied to the root element when the device is ios.|
  |title|.SCComposer-title|Styles applied to the title element.|
- |titleDense|.SCComposer-title-dense|Styles applied to the dense title element.|
  |types|.SCComposer-types|Styles applied to the types element.|
- |avatar|.SCComposer-avatar|Styles applied to the avatar element.|
  |content|.SCComposer-content|Styles applied to the content.|
- |mediaContent|.SCComposer-mediaContent|Styles applied to the media content.|
- |audienceContent|.SCComposer-audienceContent|Styles applied to the audience content.|
- |locationContent|.SCComposer-locationContent|Styles applied to the location content.|
- |block|.SCComposer-block|Styles applied to the block element.|
- |editor|.SCComposer-editor|Styles applied to the editor element.|
- |divider|.SCComposer-divider|Styles applied to the divider element.|
+ |attributes|.SCComposer-attributes|Styles applied to the attributes.|
  |medias|.SCComposer-medias|Styles applied to the medias.|
- |location|.SCComposer-location|Styles applied to the location element.|
- |audience|.SCComposer-audience|Styles applied to the audience element.|
- |mediasActions|.SCComposer-mediasActions|Styles applied to the medias actions section.|
- |sortableMedia|.SCComposer-sortableMedia|Styles applied to the sortable media element.|
- |sortableMediaCover|.SCComposer-sortableMediaCover|Styles applied to the sortable media cover element.|
- |links|.SCComposer-links|Styles applied to the links element.|
  |actions|.SCComposer-actions|Styles applied to the actions section.|
- |mediaActions|.SCComposer-media-actions|Styles applied to the media actions section.|
- |filterActions|.SCComposer-filter-actions|Styles applied to the filter actions section.|
- |actionInput|.SCComposer-actionInput|Styles applied to the action input element.|
- |badgeError|.SCComposer-badgeError|Styles applied to the badge error element.|
+ |layerTransitionRoot|.SCComposer-layer-transition-root|Styles applied to the overlay layers (eg. location).|
 
 
  * @param inProps
@@ -173,33 +121,26 @@ function Composer(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
-    const { feedObjectId = null, feedObjectType = null, feedObject = null, defaultValue = {}, view = exports.MAIN_VIEW, mediaObjectTypes = [Media_2.Image, Media_2.Document, Media_2.Link, Media_2.Share], EditorProps = null, onClose = null, onSuccess = null, maxWidth } = props, rest = tslib_1.__rest(props, ["feedObjectId", "feedObjectType", "feedObject", "defaultValue", "view", "mediaObjectTypes", "EditorProps", "onClose", "onSuccess", "maxWidth"]);
+    const { feedObjectId = null, feedObjectType = null, feedObject = null, defaultValue = {}, mediaObjectTypes = [Media_2.File, Media_2.Link, Media_2.Share], EditorProps = {}, onClose = null, onSuccess = null, maxWidth } = props, rest = tslib_1.__rest(props, ["feedObjectId", "feedObjectType", "feedObject", "defaultValue", "mediaObjectTypes", "EditorProps", "onClose", "onSuccess", "maxWidth"]);
     // Context
-    const scPrefernces = (0, react_core_1.useSCPreferences)();
+    const { preferences, features } = (0, react_core_1.useSCPreferences)();
     const scUserContext = (0, react_core_1.useSCUser)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // HOOKS
-    const { scAddressingTags } = (0, react_core_1.useSCFetchAddressingTagList)({ fetch: rest.open });
     const theme = (0, styles_1.useTheme)();
     const fullScreen = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'), { noSsr: typeof window !== 'undefined' });
     // State variables
     const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
-    const [_view, setView] = (0, react_1.useState)(view);
-    const [composerTypes, setComposerTypes] = (0, react_1.useState)([]);
-    const [mediaChunks, setMediaChunks] = (0, react_1.useState)([]);
-    const [editorFocused, setEditorFocused] = (0, react_1.useState)(false);
-    const [state, dispatch] = (0, react_1.useReducer)(reducer, Object.assign(Object.assign(Object.assign({}, COMPOSER_INITIAL_STATE), defaultValue), { view, key: (0, utils_1.random)() }));
-    const { key, id, type, title, titleError, text, categories, addressing, audience, medias, poll, pollError, location, error } = state;
-    const addMedia = (media) => {
-        dispatch({ type: 'medias', value: [...medias, media] });
-    };
+    const [layer, setLayer] = (0, react_1.useState)();
+    const [state, dispatch] = (0, react_1.useReducer)(reducer, Object.assign(Object.assign(Object.assign({}, COMPOSER_INITIAL_STATE), defaultValue), { key: (0, utils_1.random)() }));
+    const { key, id, type, title, titleError, html, categories, addressing, audience, medias, poll, pollError, location, error } = state;
     const destructureFeedObject = (_feedObject) => {
-        if (_feedObject.type === Composer_1.COMPOSER_TYPE_POST) {
+        if (_feedObject.type === types_1.SCContributionType.POST) {
             _feedObject = _feedObject;
         }
-        else if (_feedObject.type === Composer_1.COMPOSER_TYPE_DISCUSSION) {
+        else if (_feedObject.type === types_1.SCContributionType.DISCUSSION) {
             _feedObject = _feedObject;
         }
         else {
@@ -210,11 +151,10 @@ function Composer(inProps) {
                 type: 'multiple',
                 value: {
                     id: _feedObject.id,
-                    type: _feedObject.type,
+                    type: _feedObject.poll ? Composer_1.COMPOSER_TYPE_POLL : feedObject.type,
                     title: _feedObject.title,
-                    text: _feedObject.html,
+                    html: _feedObject.html,
                     categories: _feedObject.categories,
-                    audience: _feedObject.addressing ? AUDIENCE_TAG : AUDIENCE_ALL,
                     addressing: _feedObject.addressing,
                     medias: _feedObject.medias,
                     poll: _feedObject.poll,
@@ -228,43 +168,25 @@ function Composer(inProps) {
         }
     };
     // Edit state variables
-    const editMode = Boolean((feedObjectId && feedObjectType) || feedObject);
+    const editMode = (0, react_1.useMemo)(() => Boolean((feedObjectId && feedObjectType) || feedObject), [feedObjectId, feedObjectType, feedObject]);
     const [isLoading, setIsLoading] = (0, react_1.useState)(editMode);
     const [loadError, setLoadError] = (0, react_1.useState)(false);
     // REFS
+    const dialogRef = (0, react_1.useRef)();
     const unloadRef = (0, react_1.useRef)(false);
-    let titleRef = (0, react_1.useRef)();
-    let editorRef = (0, react_1.useRef)();
-    // Create a ref for medias becaouse of state update error on chunk upload
-    const mediasRef = (0, react_1.useRef)({ medias, mediaChunks, addMedia, setMediaChunks });
-    mediasRef.current = { medias, mediaChunks, addMedia, setMediaChunks };
-    /*
-     * Compute preferences
-     */
-    const preferences = (0, react_1.useMemo)(() => {
-        const _preferences = {};
-        PREFERENCES.map((p) => (_preferences[p] = p in scPrefernces.preferences ? scPrefernces.preferences[p].value : null));
-        return _preferences;
-    }, [scPrefernces.preferences]);
-    /*
-     * Compose the enabled types of posts that can be created based on preferences
-     */
-    const setEnabledComposerTypes = () => {
-        const types = [];
-        if (preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED]) {
-            types.push(Composer_1.COMPOSER_TYPE_POST);
-        }
-        if (preferences[react_core_1.SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED]) {
-            types.push(Composer_1.COMPOSER_TYPE_DISCUSSION);
-        }
-        if (!type) {
-            dispatch({ type: 'type', value: preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED] ? Composer_1.COMPOSER_TYPE_POST : Composer_1.COMPOSER_TYPE_DISCUSSION });
-        }
-        if (JSON.stringify(composerTypes) !== JSON.stringify(types)) {
-            setComposerTypes(types);
-        }
-    };
-    setEnabledComposerTypes();
+    // Create a ref for medias because of state update error on chunk upload
+    const mediasRef = (0, react_1.useRef)({ medias });
+    mediasRef.current = { medias };
+    // MEMO
+    const hasPoll = (0, react_1.useMemo)(() => {
+        return poll && poll.title.length > 0 && poll.title.length < Composer_1.COMPOSER_TITLE_MAX_LENGTH && poll.choices.length >= Composer_1.COMPOSER_POLL_MIN_CHOICES;
+    }, [poll]);
+    const canSubmit = (0, react_1.useMemo)(() => {
+        return !isLoading && ((type === types_1.SCContributionType.DISCUSSION && title.length > 0 && title.length < Composer_1.COMPOSER_TITLE_MAX_LENGTH) ||
+            (type === types_1.SCContributionType.POST && ((0, utils_1.stripHtml)(html).length > 0 || medias.length > 0 || hasPoll)) ||
+            (type === Composer_1.COMPOSER_TYPE_POLL && hasPoll));
+    }, [isLoading, type, title, html, medias, hasPoll]);
+    const isIOS = (0, react_1.useMemo)(() => (0, utils_1.iOS)(), []);
     // Load feed object
     (0, react_1.useEffect)(() => {
         if (!editMode) {
@@ -288,11 +210,9 @@ function Composer(inProps) {
         })
             .then(() => setIsLoading(false));
     }, [editMode]);
-    // Props update
-    (0, react_1.useEffect)(() => setView(view), [view]);
     // Prevent unload
     (0, react_1.useEffect)(() => {
-        if (!unloadRef.current && canSubmit()) {
+        if (!unloadRef.current && canSubmit) {
             unloadRef.current = true;
             const onUnload = (event) => {
                 event.preventDefault();
@@ -300,129 +220,135 @@ function Composer(inProps) {
             };
             window.onbeforeunload = onUnload;
         }
-        else if (unloadRef.current && !canSubmit()) {
+        else if (unloadRef.current && !canSubmit) {
             unloadRef.current = false;
             window.onbeforeunload = null;
         }
-    }, [state]);
-    // Autofocus
+    }, [state, canSubmit]);
     (0, react_1.useEffect)(() => {
-        if (!rest.open || fullScreen) {
+        if (!dialogRef.current || !isIOS) {
             return;
         }
-        if (type === Composer_1.COMPOSER_TYPE_DISCUSSION) {
-            titleRef.current && titleRef.current.focus();
-        }
-        else {
-            editorRef.current && editorRef.current.focus();
-        }
-    }, [fullScreen, rest.open, type, editorRef]);
-    // CHECKS
-    const hasPoll = () => {
-        return poll && poll.title.length > 0 && poll.title.length < Composer_1.COMPOSER_TITLE_MAX_LENGTH && poll.choices.length >= Composer_1.COMPOSER_POLL_MIN_CHOICES;
-    };
-    const canSubmit = () => {
-        return ((type === Composer_1.COMPOSER_TYPE_DISCUSSION && title.length > 0 && title.length < Composer_1.COMPOSER_TITLE_MAX_LENGTH) ||
-            (type === Composer_1.COMPOSER_TYPE_POST && ((0, utils_1.stripHtml)(text).length > 0 || medias.length > 0 || hasPoll())));
-    };
-    /* Handlers */
-    const handleChangeView = (view) => {
-        return (event) => {
-            setView(view);
+        const handleBlur = () => {
+            dialogRef.current.focus();
         };
-    };
-    const handleChangeType = (event, child) => {
-        const target = event.target;
-        dispatch({ type: 'type', value: target.value });
-    };
-    const handleChangeText = (value) => {
-        dispatch({ type: 'text', value });
-    };
-    const handleChangePoll = (poll) => {
+        dialogRef.current.addEventListener("touchstart", handleBlur);
+        return () => { var _a; return (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("touchstart", handleBlur); };
+    }, [dialogRef.current, isIOS]);
+    /* Handlers */
+    const handleAddLayer = (0, react_1.useCallback)((layer) => setLayer(layer), []);
+    const handleRemoveLayer = (0, react_1.useCallback)(() => setLayer(null), []);
+    const handleChangeType = (0, react_1.useCallback)((value) => {
+        dispatch({ type: 'type', value });
+    }, []);
+    const handleChangePoll = (0, react_1.useCallback)((content) => {
         dispatch({
             type: 'multiple',
-            value: {
-                poll: poll,
-                pollError: poll.title.length > Composer_1.COMPOSER_TITLE_MAX_LENGTH
+            value: Object.assign(Object.assign({}, content), { pollError: content.poll.title.length > Composer_1.COMPOSER_TITLE_MAX_LENGTH
                     ? { titleError: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" }) }
-                    : null
-            }
+                    : null })
         });
-    };
-    const handleChange = (prop) => (event, data) => {
-        let target = null;
-        switch (prop) {
-            case 'title':
-                target = event.target;
-                dispatch({
-                    type: 'multiple',
-                    value: {
-                        title: target.value,
-                        titleError: target.value.length > Composer_1.COMPOSER_TITLE_MAX_LENGTH ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null
-                    }
-                });
-                break;
-            case 'categories':
-            case 'addressing':
-                dispatch({ type: prop, value: event });
-                break;
-            case 'location':
-                const value = event && (0, utils_1.isObject)(event)
-                    ? event['location']
-                        ? { location: event['location'], lat: event['lat'], lng: event['lng'] }
-                        : { location: event['full_address'], lat: event['lat'], lng: event['lng'] }
-                    : null;
-                dispatch({ type: prop, value });
-                break;
-            case 'audience':
-                data !== null && dispatch({ type: 'multiple', value: { audience: data, addressing: audience === AUDIENCE_ALL ? [] : audience } });
-                break;
-            default:
-                target = event.target;
-                dispatch({ type: prop, value: target.value });
-                break;
+    }, []);
+    const handleChangeDiscussion = (0, react_1.useCallback)((content) => {
+        dispatch({
+            type: 'multiple',
+            value: Object.assign(Object.assign({}, content), { titleError: content.title.length > Composer_1.COMPOSER_TITLE_MAX_LENGTH ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" })) : null })
+        });
+    }, []);
+    const handleChangePost = (0, react_1.useCallback)((content) => {
+        dispatch({
+            type: 'multiple',
+            value: Object.assign({}, content)
+        });
+    }, []);
+    const handleChangeCategories = (0, react_1.useCallback)((value) => {
+        dispatch({ type: 'categories', value });
+        setLayer(null);
+    }, []);
+    const handleAddCategoryLayer = (0, react_1.useCallback)(() => handleAddLayer({
+        name: 'category',
+        Component: CategoryLayer_1.default,
+        ComponentProps: {
+            onClose: handleRemoveLayer,
+            onSave: handleChangeCategories,
+            defaultValue: categories
         }
-    };
-    const handleClose = (event) => {
-        if (unloadRef.current) {
-            window.onbeforeunload = null;
+    }), [handleAddLayer, handleRemoveLayer, handleChangeCategories, categories]);
+    const handleChangeAudience = (0, react_1.useCallback)((value) => {
+        dispatch({ type: 'addressing', value });
+        setLayer(null);
+    }, []);
+    const handleAddAudienceLayer = (0, react_1.useCallback)(() => handleAddLayer({
+        name: 'audience',
+        Component: AudienceLayer_1.default,
+        ComponentProps: {
+            onClose: handleRemoveLayer,
+            onSave: handleChangeAudience,
+            defaultValue: addressing
         }
-        onClose && onClose(event);
-    };
-    const handleDeletePoll = (event) => {
-        dispatch({ type: 'poll', value: null });
-        setView(exports.MAIN_VIEW);
-    };
-    const handleDeleteLocation = (event) => {
-        dispatch({ type: 'location', value: null });
-    };
-    const handleDeleteTag = (id) => (event) => {
-        const _addressing = addressing.filter((t) => t.id !== id);
-        dispatch({ type: 'multiple', value: { audience: _addressing.length === 0 ? AUDIENCE_ALL : AUDIENCE_TAG, addressing: _addressing } });
-    };
-    const handleDeleteMedia = (id, mediaObjectType) => {
-        return (event) => {
-            if (id) {
-                dispatch({ type: 'medias', value: medias.filter((m) => m.id != id) });
-            }
-            else if (mediaObjectType) {
-                dispatch({ type: 'medias', value: medias.filter((m) => !mediaObjectType.filter(m)) });
-            }
-        };
-    };
-    const handleMediaProgress = (chunks) => {
-        mediasRef.current.setMediaChunks(chunks);
-    };
-    const handleAddMedia = (media) => {
-        mediasRef.current.addMedia(media);
-    };
-    const handleSortMedia = (newSort) => {
+    }), [handleAddLayer, handleRemoveLayer, handleChangeAudience, addressing]);
+    const handleChangeLocation = (0, react_1.useCallback)((value) => {
+        dispatch({ type: 'location', value });
+        setLayer(null);
+    }, []);
+    const handleAddLocationLayer = (0, react_1.useCallback)(() => handleAddLayer({
+        name: 'location',
+        Component: LocationLayer_1.default,
+        ComponentProps: {
+            onClose: handleRemoveLayer,
+            onSave: handleChangeLocation,
+            defaultValue: location
+        }
+    }), [handleAddLayer, handleRemoveLayer, handleChangeLocation, location]);
+    const handleChangeMedias = (0, react_1.useCallback)((value) => {
+        const _medias = [...value];
         dispatch({
             type: 'medias',
-            value: [...medias.filter((media) => newSort.findIndex((m) => m.id === media.id) === -1), ...newSort]
+            value: [...value]
         });
-    };
-    const handleSubmit = (event) => {
+        mediasRef.current.medias = _medias;
+        setLayer(null);
+    }, []);
+    const handleAddMedia = (0, react_1.useCallback)((media) => {
+        const _medias = [...mediasRef.current.medias, media];
+        dispatch({
+            type: 'medias',
+            value: _medias
+        });
+        mediasRef.current.medias = _medias;
+    }, []);
+    const handleMediaTriggerClick = (0, react_1.useCallback)((mediaObjectType) => (event) => {
+        if (mediaObjectType.layerComponent) {
+            handleAddLayer({
+                name: mediaObjectType.name,
+                Component: mediaObjectType.layerComponent,
+                ComponentProps: {
+                    onClose: handleRemoveLayer,
+                    onSave: handleChangeMedias,
+                    defaultValue: medias
+                }
+            });
+        }
+    }, [handleAddLayer, handleRemoveLayer, handleChangeMedias, medias]);
+    const handleChangeAttributes = (0, react_1.useCallback)((content) => {
+        dispatch({
+            type: 'multiple',
+            value: Object.assign({}, content)
+        });
+    }, []);
+    const handleClickAttributes = (0, react_1.useCallback)((attr) => {
+        switch (attr) {
+            case 'categories':
+                handleAddCategoryLayer();
+                break;
+            case 'addressing':
+                handleAddAudienceLayer();
+                break;
+        }
+    }, [handleAddCategoryLayer, handleAddAudienceLayer]);
+    const handleSubmit = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
         if (react_core_1.UserUtils.isBlocked(scUserContext.user)) {
             // deny submit action if authenticated user is blocked
             enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
@@ -432,32 +358,29 @@ function Composer(inProps) {
             return;
         }
         // Extract hashtags and add to categories
-        const _categories = [...categories.map((c) => c.id), ...(0, editor_1.extractHashtags)(text)];
+        const _categories = [...categories.map((c) => c.id), ...(0, editor_1.extractHashtags)(html)];
         const data = {
             title,
-            text,
+            text: html,
             medias: medias.map((m) => m.id),
             categories: _categories.filter((item, index) => _categories.indexOf(item) === index)
         };
-        if (preferences[react_core_1.SCPreferences.ADDONS_POLLS_ENABLED] && hasPoll()) {
+        if (preferences[react_core_1.SCPreferences.ADDONS_POLLS_ENABLED].value && hasPoll) {
             data.poll = poll;
         }
-        if (preferences[react_core_1.SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED] && location) {
-            data.location = {
-                location: location.location,
-                lat: location.lat,
-                lng: location.lng
-            };
+        if (preferences[react_core_1.SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED].value && location) {
+            data.location = location;
         }
-        if (scPrefernces.features.includes(types_1.SCFeatureName.TAGGING) && audience === AUDIENCE_TAG) {
+        if (features.includes(types_1.SCFeatureName.TAGGING) && addressing !== null) {
             data.addressing = addressing.map((t) => t.id);
         }
         setIsSubmitting(true);
         // Finding right url
-        let url = api_services_1.Endpoints.Composer.url({ type });
+        const _type = type === Composer_1.COMPOSER_TYPE_POLL ? types_1.SCContributionType.POST : type;
+        let url = api_services_1.Endpoints.Composer.url({ type: _type });
         let method = api_services_1.Endpoints.Composer.method;
         if (editMode) {
-            url = api_services_1.Endpoints.ComposerEdit.url({ type, id });
+            url = api_services_1.Endpoints.ComposerEdit.url({ type: feedObjectType ? feedObjectType : _type, id });
             method = api_services_1.Endpoints.ComposerEdit.method;
         }
         // Perform request
@@ -478,185 +401,86 @@ function Composer(inProps) {
             dispatch({ type: 'multiple', value: (0, api_services_1.formatHttpErrorCode)(error) });
         })
             .then(() => setIsSubmitting(false));
-    };
-    // MEMO
-    const _EditorProps = (0, react_1.useMemo)(() => (EditorProps ? EditorProps : { toolbar: true, uploadImage: true }), [EditorProps, type]);
-    const isIOS = (0, react_1.useMemo)(() => (0, utils_1.iOS)(), []);
+    }, [scUserContext.user, feedObjectType, id, type, title, html, categories, addressing, audience, medias, poll, location, hasPoll]);
+    const handleClose = (0, react_1.useCallback)((event) => {
+        if (unloadRef.current) {
+            window.onbeforeunload = null;
+        }
+        onClose && onClose(event);
+        setLayer(null);
+        dispatch({ type: 'reset' });
+    }, [onClose]);
+    const handleClosePrompt = (0, react_1.useCallback)((event) => {
+        if (canSubmit) {
+            handleAddLayer({
+                name: 'close',
+                Component: CloseLayer_1.default,
+                ComponentProps: {
+                    onClose: handleRemoveLayer,
+                    onSave: handleClose
+                }
+            });
+        }
+        else {
+            handleClose(event);
+        }
+    }, [canSubmit, handleAddLayer, handleRemoveLayer, handleClose]);
     // RENDER
     const hasMediaShare = (0, react_1.useMemo)(() => medias.findIndex((m) => m.type === Media_1.MEDIA_TYPE_SHARE) !== -1, [medias]);
-    const renderMediaAdornment = (mediaObjectType) => {
-        return (react_1.default.createElement(material_1.Box, { className: classes.mediasActions },
-            react_1.default.createElement(material_1.Typography, { className: classes.mediasActionsTitle },
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.composer.media.${mediaObjectType.name}.edit`, defaultMessage: `ui.composer.media.${mediaObjectType.name}.edit` })),
-            react_1.default.createElement(material_1.Typography, { className: classes.mediasActionsActions },
-                react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.edit", defaultMessage: "ui.composer.edit" }) },
-                    react_1.default.createElement(material_1.IconButton, { onClick: handleChangeView(mediaObjectType.name), color: "inherit" },
-                        react_1.default.createElement(Icon_1.default, null, "edit"))),
-                react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.delete", defaultMessage: "ui.composer.delete" }) },
-                    react_1.default.createElement(material_1.IconButton, { onClick: handleDeleteMedia(null, mediaObjectType), color: "inherit" },
-                        react_1.default.createElement(Icon_1.default, null, "delete"))))));
-    };
-    const renderAudienceView = () => {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(material_1.DialogTitle, { className: classes.title },
-                react_1.default.createElement(material_1.Typography, { component: "div" },
-                    react_1.default.createElement(material_1.IconButton, { onClick: handleChangeView(exports.MAIN_VIEW) },
-                        react_1.default.createElement(Icon_1.default, null, "arrow_back"))),
-                react_1.default.createElement(material_1.Box, null,
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.audience.title", defaultMessage: "ui.composer.audience.title" })),
-                react_1.default.createElement(material_1.Box, null,
-                    react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
-                        react_1.default.createElement(material_1.IconButton, { onClick: handleChangeView(exports.MAIN_VIEW), color: "inherit" },
-                            react_1.default.createElement(Icon_1.default, null, "check"))))),
-            react_1.default.createElement(material_1.DialogContent, { className: (0, classnames_1.default)(classes.content, classes.audienceContent) },
-                react_1.default.createElement(material_1.Tabs, { value: audience, onChange: handleChange('audience'), "aria-label": "audience type" },
-                    react_1.default.createElement(material_1.Tab, { value: AUDIENCE_ALL, icon: react_1.default.createElement(Icon_1.default, null, "public"), label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.audience.all", defaultMessage: "ui.composer.audience.all" }) }),
-                    react_1.default.createElement(material_1.Tab, { value: AUDIENCE_TAG, icon: react_1.default.createElement(Icon_1.default, null, "label"), label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.audience.tag", defaultMessage: "ui.composer.audience.tag" }) })),
-                react_1.default.createElement(material_1.Typography, { align: "center", className: classes.block },
-                    audience === AUDIENCE_ALL && (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.audience.all.message", defaultMessage: "ui.composer.audience.all.message" })),
-                    audience === AUDIENCE_TAG && (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.audience.tag.message", defaultMessage: "ui.composer.audience.tag.message" }))),
-                audience === AUDIENCE_TAG && react_1.default.createElement(Audience_1.default, { onChange: handleChange('addressing'), defaultValue: addressing, tags: scAddressingTags }))));
-    };
-    const renderMediaView = (mediaObjectType) => {
-        return () => {
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(material_1.DialogTitle, { className: classes.title },
-                    react_1.default.createElement(material_1.Typography, { component: "div" },
-                        react_1.default.createElement("span", null,
-                            react_1.default.createElement(material_1.IconButton, { onClick: handleChangeView(exports.MAIN_VIEW), disabled: mediasRef.current.mediaChunks.length > 0 },
-                                react_1.default.createElement(Icon_1.default, null, "arrow_back")))),
-                    react_1.default.createElement(material_1.Box, null,
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.composer.media.${mediaObjectType.name}.edit`, defaultMessage: `ui.composer.media.${mediaObjectType.name}.edit` })),
-                    react_1.default.createElement(material_1.Box, null,
-                        react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
-                            react_1.default.createElement("span", null,
-                                react_1.default.createElement(material_1.IconButton, { onClick: handleChangeView(exports.MAIN_VIEW), color: "inherit", disabled: mediasRef.current.mediaChunks.length > 0 },
-                                    react_1.default.createElement(Icon_1.default, null, "check")))))),
-                react_1.default.createElement(material_1.DialogContent, { className: (0, classnames_1.default)(classes.content, classes.mediaContent) }, react_1.default.createElement(mediaObjectType.editComponent, { medias: medias.filter(mediaObjectType.filter), onProgress: handleMediaProgress, onSuccess: handleAddMedia, onSort: handleSortMedia, onDelete: handleDeleteMedia }))));
-        };
-    };
-    const renderPollView = () => {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(material_1.DialogTitle, { className: classes.title },
-                react_1.default.createElement(material_1.Typography, { component: "div" },
-                    react_1.default.createElement(material_1.IconButton, { onClick: handleChangeView(exports.MAIN_VIEW) },
-                        react_1.default.createElement(Icon_1.default, null, "arrow_back"))),
-                react_1.default.createElement(material_1.Box, null,
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.poll", defaultMessage: "ui.composer.poll" })),
-                react_1.default.createElement(material_1.Stack, { spacing: 2, direction: "row" },
-                    react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.delete", defaultMessage: "ui.composer.delete" }) },
-                            react_1.default.createElement("span", null,
-                                react_1.default.createElement(material_1.IconButton, { onClick: handleDeletePoll, color: "inherit", disabled: !hasPoll() },
-                                    react_1.default.createElement(Icon_1.default, null, "delete")))),
-                        react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
-                            react_1.default.createElement("span", null,
-                                react_1.default.createElement(material_1.IconButton, { onClick: handleChangeView(exports.MAIN_VIEW), color: "inherit", disabled: !hasPoll() },
-                                    react_1.default.createElement(Icon_1.default, null, "check"))))))),
-            react_1.default.createElement(material_1.DialogContent, { className: classes.content },
-                react_1.default.createElement(Poll_2.default, { onChange: handleChangePoll, value: poll, error: pollError }))));
-    };
-    const renderLocationView = () => {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(material_1.DialogTitle, { className: classes.title },
-                react_1.default.createElement(material_1.Typography, { component: "div" },
-                    react_1.default.createElement(material_1.IconButton, { onClick: handleChangeView(exports.MAIN_VIEW) },
-                        react_1.default.createElement(Icon_1.default, null, "arrow_back"))),
-                react_1.default.createElement(material_1.Box, null,
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.locationAutocomplete.title", defaultMessage: "ui.locationAutocomplete.title" })),
-                react_1.default.createElement(material_1.Box, null,
-                    react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
-                        react_1.default.createElement(material_1.IconButton, { onClick: handleChangeView(exports.MAIN_VIEW), color: "inherit" },
-                            react_1.default.createElement(Icon_1.default, null, "check"))))),
-            react_1.default.createElement(material_1.DialogContent, { className: (0, classnames_1.default)(classes.content, classes.locationContent) },
-                react_1.default.createElement(LocationAutocomplete_1.default, { onChange: handleChange('location'), defaultValue: location ? { full_address: location.location } : '' }))));
-    };
-    const renderMainView = () => {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(material_1.DialogTitle, { className: classes.title },
-                react_1.default.createElement(material_1.Box, null,
-                    react_1.default.createElement(material_1.FormControl, { className: classes.types },
-                        react_1.default.createElement(material_1.Select, { value: type, onChange: handleChangeType, input: react_1.default.createElement(TypeInput, null), disabled: editMode }, composerTypes.map((t) => (react_1.default.createElement(material_1.MenuItem, { value: t, key: t },
-                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.composer.type.${t}`, defaultMessage: `ui.composer.type.${t}` }))))))),
-                react_1.default.createElement(material_1.Box, null, !scUserContext.user ? react_1.default.createElement(material_1.Avatar, { className: classes.avatar }) : react_1.default.createElement(material_1.Avatar, { className: classes.avatar, src: scUserContext.user.avatar })),
-                react_1.default.createElement(material_1.Box, null,
-                    react_1.default.createElement(material_1.IconButton, { onClick: handleClose },
-                        react_1.default.createElement(Icon_1.default, null, "close")))),
-            react_1.default.createElement(material_1.DialogContent, { className: classes.content },
-                type === Composer_1.COMPOSER_TYPE_DISCUSSION && (react_1.default.createElement("div", { className: classes.block },
-                    react_1.default.createElement(material_1.TextField, { inputRef: titleRef, label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.title.label", defaultMessage: "ui.composer.title.label" }), fullWidth: true, variant: "outlined", value: title, multiline: true, onChange: handleChange('title'), InputProps: {
-                            endAdornment: react_1.default.createElement(material_1.Typography, { variant: "body2" }, Composer_1.COMPOSER_TITLE_MAX_LENGTH - title.length)
-                        }, error: Boolean(titleError), helperText: titleError, disabled: isSubmitting }))),
-                react_1.default.createElement(Editor_1.default, Object.assign({ ref: editorRef }, _EditorProps, { key: `${key}-editor`, className: (0, classnames_1.default)(classes.block, classes.editor), onChange: handleChangeText, onFocus: () => setEditorFocused(true), defaultValue: text, editable: !isSubmitting })),
-                react_1.default.createElement(material_1.Box, { className: classes.medias },
-                    react_1.default.createElement(MediasPreview_1.default, { medias: medias, mediaObjectTypes: mediaObjectTypes.map((mediaObjectType) => {
-                            return Object.assign(Object.assign({}, mediaObjectType), { previewProps: { adornment: mediaObjectType.editButton !== null ? renderMediaAdornment(mediaObjectType) : null, gallery: false } });
-                        }) })),
-                poll && react_1.default.createElement(Poll_1.default, { pollObject: poll }),
-                react_1.default.createElement(material_1.Stack, { spacing: 2, className: classes.audience, direction: "row" },
-                    location && (react_1.default.createElement(material_1.Chip, { icon: react_1.default.createElement(Icon_1.default, null, "add_location_alt"), label: location.location, onDelete: handleDeleteLocation, onClick: handleChangeView(exports.LOCATION_VIEW) })),
-                    audience === AUDIENCE_TAG &&
-                        addressing &&
-                        addressing.map((t) => (react_1.default.createElement(TagChip_1.default, { key: t.id, tag: t, onDelete: handleDeleteTag(t.id), icon: react_1.default.createElement(Icon_1.default, null, "label"), onClick: handleChangeView(exports.AUDIENCE_VIEW) })))),
-                react_1.default.createElement("div", { className: classes.block },
-                    react_1.default.createElement(CategoryAutocomplete_1.default, { multiple: true, key: `${key}-categories`, onChange: handleChange('categories'), defaultValue: categories, disabled: isSubmitting })),
-                error && (react_1.default.createElement(material_1.Typography, { className: classes.block, color: "error" },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.error.generic", defaultMessage: "ui.composer.error.generic" })))),
-            react_1.default.createElement(material_1.DialogActions, { className: classes.actions, onClick: () => setEditorFocused(false) },
-                react_1.default.createElement(material_1.Typography, { className: classes.mediaActions },
-                    mediaObjectTypes
-                        .filter((mediaObjectType) => mediaObjectType.editButton !== null)
-                        .map((mediaObjectType) => (react_1.default.createElement(mediaObjectType.editButton, { key: mediaObjectType.name, onClick: handleChangeView(mediaObjectType.name), disabled: isSubmitting || hasMediaShare, color: medias.filter(mediaObjectType.filter).length > 0 ? 'primary' : 'default' }))),
-                    (preferences[react_core_1.SCPreferences.ADDONS_POLLS_ENABLED] || react_core_1.UserUtils.isStaff(scUserContext.user)) && (react_1.default.createElement(material_1.IconButton, { "aria-label": "add poll", color: poll ? 'primary' : 'default', disabled: isSubmitting, onClick: handleChangeView(exports.POLL_VIEW) },
-                        react_1.default.createElement(material_1.Badge, { className: classes.badgeError, badgeContent: pollError ? ' ' : null, color: "error" },
-                            react_1.default.createElement(Icon_1.default, null, "bar_chart"))))),
-                react_1.default.createElement(material_1.Typography, { className: classes.filterActions },
-                    preferences[react_core_1.SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED] && (react_1.default.createElement(material_1.IconButton, { disabled: isSubmitting, onClick: handleChangeView(exports.LOCATION_VIEW), color: location !== null ? 'primary' : 'default' },
-                        react_1.default.createElement(Icon_1.default, null, "add_location_alt"))),
-                    scPrefernces.features.includes(types_1.SCFeatureName.TAGGING) && scAddressingTags.length > 0 && (react_1.default.createElement(material_1.IconButton, { disabled: isSubmitting, onClick: handleChangeView(exports.AUDIENCE_VIEW) }, audience === AUDIENCE_TAG ? react_1.default.createElement(Icon_1.default, null, "label") : react_1.default.createElement(Icon_1.default, null, "public")))),
-                react_1.default.createElement(LoadingButton_1.default, { onClick: handleSubmit, color: "primary", variant: "contained", disabled: !canSubmit(), loading: isSubmitting },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" })))));
-    };
-    let child = null;
-    switch (_view) {
-        case exports.MAIN_VIEW:
-            child = renderMainView;
-            break;
-        case exports.POLL_VIEW:
-            child = renderPollView;
-            break;
-        case exports.AUDIENCE_VIEW:
-            child = renderAudienceView;
-            break;
-        case exports.LOCATION_VIEW:
-            child = renderLocationView;
-            break;
-        default:
-            const media = mediaObjectTypes
-                .filter((mediaObjectType) => mediaObjectType.editComponent !== null)
-                .find((mv) => mv.name === _view);
-            child = media ? renderMediaView(media) : renderMainView;
-    }
-    if (editMode && isLoading) {
-        child = () => react_1.default.createElement(index_1.ComposerSkeleton, null);
-    }
-    else if (editMode && loadError) {
-        child = () => (react_1.default.createElement(material_1.Alert, { severity: "error", onClose: handleClose },
-            react_1.default.createElement(material_1.AlertTitle, null,
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.edit.error.title", defaultMessage: "ui.composer.edit.error.title" })),
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.edit.error.content", defaultMessage: "ui.composer.edit.error.content" })));
-    }
-    const _maxWidth = (0, react_1.useMemo)(() => (maxWidth ? maxWidth : type === Composer_1.COMPOSER_TYPE_DISCUSSION ? 'md' : 'sm'), [maxWidth, type]);
+    const content = (0, react_1.useMemo)(() => {
+        if (editMode && isLoading) {
+            return react_1.default.createElement(Skeleton_1.default, null);
+        }
+        else if (editMode && loadError) {
+            return (react_1.default.createElement(material_1.Alert, { severity: "error", onClose: handleClose },
+                react_1.default.createElement(material_1.AlertTitle, null,
+                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.edit.error.title", defaultMessage: "ui.composer.edit.error.title" })),
+                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.edit.error.content", defaultMessage: "ui.composer.edit.error.content" })));
+        }
+        switch (type) {
+            case Composer_1.COMPOSER_TYPE_POLL:
+                return react_1.default.createElement(ContentPoll_1.default, { key: key, onChange: handleChangePoll, value: { html, categories, addressing, medias, poll, location }, error: pollError, disabled: isSubmitting });
+            case types_1.SCContributionType.DISCUSSION:
+                return react_1.default.createElement(ContentDiscussion_1.default, { key: key, value: { title, html, categories, addressing, medias, poll, location }, error: { titleError, error }, onChange: handleChangeDiscussion, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: true, uploadImage: true }, EditorProps) });
+            default:
+                return react_1.default.createElement(ContentPost_1.default, { key: key, value: { html, categories, addressing, medias, poll, location }, error: { error }, onChange: handleChangePost, disabled: isSubmitting, EditorProps: Object.assign({ toolbar: false, uploadImage: false }, EditorProps) });
+        }
+    }, [key, type, title, html, categories, addressing, medias, poll, pollError, location, error, handleChangePoll, handleChangePost, isSubmitting]);
     if (!scUserContext.user && !(scUserContext.loading && open)) {
         return null;
     }
-    return (react_1.default.createElement(Root, Object.assign({ maxWidth: _maxWidth, TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: (0, classnames_1.default)(classes.root, { [classes.writing]: editorFocused, [classes.ios]: isIOS }), fullScreen: fullScreen }),
-        editorFocused && fullScreen && (react_1.default.createElement(material_1.Box, { className: classes.titleDense },
-            react_1.default.createElement(material_1.IconButton, { onClick: () => setEditorFocused(false) },
-                react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.editorFullScreen.close", defaultMessage: "ui.composer.editorFullScreen.close" }) },
-                    react_1.default.createElement(Icon_1.default, null, "zoom_out_map"))),
-            react_1.default.createElement(material_1.IconButton, { onClick: handleClose },
-                react_1.default.createElement(Icon_1.default, null, "close")))),
-        child()));
+    return (react_1.default.createElement(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: (0, classnames_1.default)(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }),
+        react_1.default.createElement("form", { onSubmit: handleSubmit, method: "post" },
+            react_1.default.createElement(material_1.DialogTitle, { className: classes.title },
+                react_1.default.createElement(material_1.IconButton, { onClick: handleClosePrompt },
+                    react_1.default.createElement(Icon_1.default, null, "close")),
+                react_1.default.createElement(LoadingButton_1.default, { size: "small", type: "submit", color: "secondary", variant: "contained", disabled: !canSubmit, loading: isSubmitting },
+                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }))),
+            react_1.default.createElement(material_1.DialogContent, { className: classes.content },
+                react_1.default.createElement(Attributes_1.default, { value: { categories, addressing, location }, className: classes.attributes, onChange: handleChangeAttributes, onClick: handleClickAttributes }),
+                content,
+                medias && medias.length > 0 && react_1.default.createElement(material_1.Box, { className: classes.medias }, mediaObjectTypes.map((mediaObjectType) => {
+                    if (mediaObjectType.previewComponent) {
+                        return react_1.default.createElement(mediaObjectType.previewComponent, { key: mediaObjectType.name, value: medias, onChange: handleChangeMedias });
+                    }
+                    else if (mediaObjectType.displayComponent) {
+                        return react_1.default.createElement(mediaObjectType.displayComponent, { key: mediaObjectType.name, value: medias });
+                    }
+                }))),
+            !canSubmit && !editMode && react_1.default.createElement(TypeSwitchButtonGroup_1.default, { className: classes.types, onChange: handleChangeType, size: "small", value: type }),
+            react_1.default.createElement(material_1.DialogActions, { className: classes.actions },
+                mediaObjectTypes
+                    .filter((mediaObjectType) => mediaObjectType.triggerButton !== null)
+                    .map((mediaObjectType) => {
+                    const props = mediaObjectType.layerComponent ? { onClick: handleMediaTriggerClick(mediaObjectType) } : { onAdd: handleAddMedia };
+                    return (react_1.default.createElement(mediaObjectType.triggerButton, Object.assign({ key: mediaObjectType.name, disabled: isSubmitting || hasMediaShare, color: medias.filter(mediaObjectType.filter).length > 0 ? 'primary' : 'default' }, props)));
+                }),
+                react_1.default.createElement(material_1.IconButton, { disabled: isSubmitting, onClick: handleAddCategoryLayer },
+                    react_1.default.createElement(Icon_1.default, null, "category")),
+                react_1.default.createElement(material_1.IconButton, { disabled: isSubmitting || !features.includes(types_1.SCFeatureName.TAGGING), onClick: handleAddAudienceLayer }, addressing === null || addressing.length === 0 ? react_1.default.createElement(Icon_1.default, null, "public") : react_1.default.createElement(Icon_1.default, null, "label")),
+                preferences[react_core_1.SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED] && (react_1.default.createElement(material_1.IconButton, { disabled: isSubmitting, onClick: handleAddLocationLayer, color: location !== null ? 'primary' : 'default' },
+                    react_1.default.createElement(Icon_1.default, null, "add_location_alt"))))),
+        layer && react_1.default.createElement(LayerTransitionRoot, { className: classes.layerTransitionRoot, in: true, container: dialogRef.current, direction: "left" },
+            react_1.default.createElement(layer.Component, Object.assign({}, layer.ComponentProps)))));
 }
 exports.default = Composer;