@selfcommunity/react-ui 0.7.0-alpha.32 → 0.7.0-alpha.320

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

@@ -1,67 +1,33 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LOCATION_VIEW = exports.POLL_VIEW = exports.AUDIENCE_VIEW = exports.MAIN_VIEW = void 0;
-const react_1 = __importStar(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const types_1 = require("@selfcommunity/types");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
-const Icon_1 = __importDefault(require("@mui/material/Icon"));
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const Composer_1 = require("../../constants/Composer");
 const Media_1 = require("../../constants/Media");
-const LoadingButton_1 = __importDefault(require("@mui/lab/LoadingButton"));
-const Audience_1 = __importDefault(require("./Audience"));
-const Categories_1 = __importDefault(require("./Categories"));
+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 utils_1 = require("@selfcommunity/utils");
-const classnames_1 = __importDefault(require("classnames"));
-const Poll_1 = __importDefault(require("../FeedObject/Poll"));
-const Editor_1 = __importDefault(require("../Editor"));
+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 = __importDefault(require("../../shared/MediasPreview"));
-const Poll_2 = __importDefault(require("./Poll"));
-const Location_1 = __importDefault(require("./Location"));
-const TagChip_1 = __importDefault(require("../../shared/TagChip"));
+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 notistack_1 = require("notistack");
 const system_1 = require("@mui/system");
+const editor_1 = require("../../utils/editor");
 const DialogTransition = (0, react_1.forwardRef)(function Transition(props, ref) {
     return react_1.default.createElement(material_1.Fade, Object.assign({ ref: ref }, props));
 });
@@ -84,7 +50,10 @@ const TypeInput = (0, styles_1.styled)(material_1.InputBase, {
 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`,
@@ -98,10 +67,14 @@ const classes = {
     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`
 };
@@ -109,128 +82,7 @@ const Root = (0, styles_1.styled)(material_1.Dialog, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => {
-    let mediaActionBackground = theme.palette.getContrastText(theme.palette.primary.main);
-    if (mediaActionBackground.startsWith('#')) {
-        mediaActionBackground = (0, material_1.hexToRgb)(mediaActionBackground).replace(')', ', .5)');
-    }
-    return {
-        [`& .${classes.title}`]: {
-            borderBottom: '1px solid #D1D1D1',
-            padding: theme.spacing(),
-            paddingLeft: theme.spacing(2),
-            paddingRight: theme.spacing(2),
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: 'nowrap',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            '& > div': {
-                flex: 1,
-                textAlign: 'center'
-            },
-            '& > div:first-of-type': {
-                textAlign: 'left'
-            },
-            '& > div:last-of-type': {
-                textAlign: 'right',
-                display: 'block'
-            }
-        },
-        [`& .${classes.types}`]: {
-            flexDirection: 'row',
-            alignItems: 'center'
-        },
-        [`& .${classes.avatar}`]: {
-            width: theme.spacing(4),
-            height: theme.spacing(4),
-            display: 'inline-block'
-        },
-        [`& .${classes.content}`]: {
-            paddingLeft: 0,
-            paddingRight: 0,
-            paddingBottom: 0,
-            position: 'relative',
-            overflowY: 'visible'
-        },
-        [`& .${classes.mediaContent}, & .${classes.audienceContent}, & .${classes.locationContent}`]: {
-            minHeight: 300
-        },
-        [`& .${classes.block}`]: {
-            padding: theme.spacing(2)
-        },
-        [`& .${classes.editor}`]: {
-            minHeight: 200,
-            '& .SCEditor-placeholder': {
-                top: theme.spacing(2),
-                left: theme.spacing(2)
-            }
-        },
-        [`& .${classes.divider}`]: {
-            borderTop: '1px solid #D1D1D1'
-        },
-        [`& .${classes.medias}`]: {
-            margin: '0 23px'
-        },
-        [`& .${classes.location}, & .${classes.audience}`]: {
-            padding: theme.spacing(2),
-            paddingBottom: 0
-        },
-        [`& .${classes.mediasActions}`]: {
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            background: mediaActionBackground,
-            padding: theme.spacing(),
-            zIndex: 1,
-            display: 'flex',
-            flexWrap: 'nowrap',
-            justifyContent: 'space-between'
-        },
-        [`& .${classes.sortableMedia}`]: {
-            position: 'relative'
-        },
-        [`& .${classes.sortableMediaCover}`]: {
-            backgroundSize: 'cover !important',
-            backgroundPosition: 'center !important',
-            backgroundRepeat: 'no-repeat !important',
-            border: '2px solid white',
-            borderRadius: 6,
-            height: 300
-        },
-        [`& .${classes.links}`]: {
-            padding: theme.spacing(2)
-        },
-        [`& .${classes.actions}`]: {
-            margin: 0,
-            borderTop: '1px solid #D1D1D1',
-            padding: theme.spacing(1),
-            display: 'block',
-            '& .MuiTypography-alignLeft': {
-                float: 'left'
-            },
-            '& .MuiTypography-alignRight': {
-                float: 'right'
-            },
-            [theme.breakpoints.up('md')]: {
-                display: 'flex',
-                flexDirection: 'row',
-                flexWrap: 'nowrap',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                '& .MuiTypography-alignLeft, & .MuiTypography-alignRight': {
-                    float: 'none'
-                }
-            }
-        },
-        [`& .${classes.actionInput}`]: {
-            display: 'none !important'
-        },
-        [`& .${classes.badgeError} .MuiBadge-badge`]: {
-            padding: 0
-        }
-    };
-});
+})(() => ({}));
 exports.MAIN_VIEW = 'main';
 exports.AUDIENCE_VIEW = 'audience';
 exports.POLL_VIEW = 'poll';
@@ -272,9 +124,11 @@ const reducer = (state, action) => {
     }
 };
 /**
- > API documentation for the Community-JS Composer component. Learn about the available props and the CSS API.
- > 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.
+ * > API documentation for the Community-JS Composer component. Learn about the available props and the CSS API.
  *
+ *
+ * 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.
+
  #### Import
  ```jsx
  import {Composer} from '@selfcommunity/react-ui';
@@ -287,7 +141,9 @@ 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.|
  |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.|
@@ -305,6 +161,8 @@ const reducer = (state, action) => {
  |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.|
 
@@ -317,19 +175,21 @@ function Composer(inProps) {
         props: inProps,
         name: 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], onClose = null, onSuccess = null } = props, rest = __rest(props, ["feedObjectId", "feedObjectType", "feedObject", "defaultValue", "view", "mediaObjectTypes", "onClose", "onSuccess"]);
+    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"]);
     // Context
-    const scPrefernces = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
-    const scAuthContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    const scPrefernces = (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 [fades, setFades] = (0, react_1.useState)({});
     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) => {
@@ -345,7 +205,7 @@ function Composer(inProps) {
         else {
             _feedObject = _feedObject;
         }
-        if (feedObject.author.id === scAuthContext.user.id) {
+        if (feedObject.author.id === scUserContext.user.id) {
             dispatch({
                 type: 'multiple',
                 value: {
@@ -372,9 +232,11 @@ function Composer(inProps) {
     const [isLoading, setIsLoading] = (0, react_1.useState)(editMode);
     const [loadError, setLoadError] = (0, react_1.useState)(false);
     // REFS
-    const unloadRef = react_1.default.useRef(false);
+    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 = react_1.default.useRef({ medias, mediaChunks, addMedia, setMediaChunks });
+    const mediasRef = (0, react_1.useRef)({ medias, mediaChunks, addMedia, setMediaChunks });
     mediasRef.current = { medias, mediaChunks, addMedia, setMediaChunks };
     /*
      * Compute preferences
@@ -443,12 +305,24 @@ function Composer(inProps) {
             window.onbeforeunload = null;
         }
     }, [state]);
+    // Autofocus
+    (0, react_1.useEffect)(() => {
+        if (!rest.open || fullScreen) {
+            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.choices.length >= Composer_1.COMPOSER_POLL_MIN_CHOICES;
+        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) ||
+        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 */
@@ -465,7 +339,15 @@ function Composer(inProps) {
         dispatch({ type: 'text', value });
     };
     const handleChangePoll = (poll) => {
-        dispatch({ type: 'poll', value: poll });
+        dispatch({
+            type: 'multiple',
+            value: {
+                poll: poll,
+                pollError: 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
+            }
+        });
     };
     const handleChange = (prop) => (event, data) => {
         let target = null;
@@ -482,9 +364,16 @@ function Composer(inProps) {
                 break;
             case 'categories':
             case 'addressing':
-            case 'location':
                 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;
@@ -511,12 +400,6 @@ function Composer(inProps) {
         const _addressing = addressing.filter((t) => t.id !== id);
         dispatch({ type: 'multiple', value: { audience: _addressing.length === 0 ? AUDIENCE_ALL : AUDIENCE_TAG, addressing: _addressing } });
     };
-    const handleFadeIn = (obj) => {
-        return (event) => setFades(Object.assign(Object.assign({}, fades), { [obj]: true }));
-    };
-    const handleFadeOut = (obj) => {
-        return (event) => setFades(Object.assign(Object.assign({}, fades), { [obj]: false }));
-    };
     const handleDeleteMedia = (id, mediaObjectType) => {
         return (event) => {
             if (id) {
@@ -540,7 +423,7 @@ function Composer(inProps) {
         });
     };
     const handleSubmit = (event) => {
-        if (react_core_1.UserUtils.isBlocked(scAuthContext.user)) {
+        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" }), {
                 variant: 'warning',
@@ -548,23 +431,25 @@ function Composer(inProps) {
             });
             return;
         }
+        // Extract hashtags and add to categories
+        const _categories = [...categories.map((c) => c.id), ...(0, editor_1.extractHashtags)(text)];
         const data = {
             title,
             text,
             medias: medias.map((m) => m.id),
-            categories: categories.map((c) => c.id)
+            categories: _categories.filter((item, index) => _categories.indexOf(item) === index)
         };
         if (preferences[react_core_1.SCPreferences.ADDONS_POLLS_ENABLED] && hasPoll()) {
             data.poll = poll;
         }
         if (preferences[react_core_1.SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED] && location) {
             data.location = {
-                location: location.full_address,
+                location: location.location,
                 lat: location.lat,
                 lng: location.lng
             };
         }
-        if (scPrefernces.features.includes(react_core_1.SCFeatures.USER_TAGGING) && audience === AUDIENCE_TAG) {
+        if (scPrefernces.features.includes(types_1.SCFeatureName.TAGGING) && audience === AUDIENCE_TAG) {
             data.addressing = addressing.map((t) => t.id);
         }
         setIsSubmitting(true);
@@ -590,67 +475,63 @@ function Composer(inProps) {
             dispatch({ type: 'reset' });
         })
             .catch((error) => {
-            dispatch({ type: 'multiple', value: (0, api_services_1.formatHttpError)(error) });
+            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: type === Composer_1.COMPOSER_TYPE_DISCUSSION }), [EditorProps, type]);
+    const isIOS = (0, react_1.useMemo)(() => (0, utils_1.iOS)(), []);
     // RENDER
-    const theme = (0, styles_1.useTheme)();
-    const smDown = (0, material_1.useMediaQuery)(theme.breakpoints.down('sm'), { noSsr: typeof window !== 'undefined' });
-    const fullScreen = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'), { noSsr: typeof window !== 'undefined' });
     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, onMouseEnter: handleFadeIn(mediaObjectType.name), onMouseLeave: handleFadeOut(mediaObjectType.name) },
-            react_1.default.createElement(material_1.Fade, { in: Boolean(fades[mediaObjectType.name]) },
-                react_1.default.createElement(material_1.Typography, { align: "left" },
-                    react_1.default.createElement(material_1.Button, { onClick: handleChangeView(mediaObjectType.name), variant: "text", size: "small" },
-                        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, { align: "right" },
-                react_1.default.createElement(material_1.IconButton, { onClick: handleDeleteMedia(null, mediaObjectType), size: "small", color: "primary" },
-                    react_1.default.createElement(Icon_1.default, null, "delete")))));
+        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), size: "small" },
-                        react_1.default.createElement(Icon_1.default, null, "arrow_back")),
+                    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.Avatar, { className: classes.avatar, src: scAuthContext.user.avatar })),
-                react_1.default.createElement(material_1.Box, null, smDown ? (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.Button, { onClick: handleChangeView(exports.MAIN_VIEW), variant: "text", color: "inherit" },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }))))),
-            react_1.default.createElement(material_1.DialogContent, { className: classes.audienceContent },
-                react_1.default.createElement(material_1.Box, { sx: { textAlign: 'center' }, className: classes.block },
-                    react_1.default.createElement(material_1.ToggleButtonGroup, { value: audience, exclusive: true, onChange: handleChange('audience') },
-                        react_1.default.createElement(material_1.ToggleButton, { value: AUDIENCE_ALL, size: "small" },
-                            react_1.default.createElement(Icon_1.default, null, "public"),
-                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.audience.all", defaultMessage: "ui.composer.audience.all" })),
-                        react_1.default.createElement(material_1.ToggleButton, { value: AUDIENCE_TAG, size: "small" },
-                            react_1.default.createElement(Icon_1.default, null, "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, gutterBottom: true },
+                    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(material_1.Box, { className: classes.divider },
-                    react_1.default.createElement(material_1.Box, { className: classes.block, sx: { textAlign: 'center' } },
-                        react_1.default.createElement(Audience_1.default, { onChange: handleChange('addressing'), defaultValue: addressing, tags: scAddressingTags })))))));
+                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(material_1.IconButton, { onClick: handleChangeView(exports.MAIN_VIEW), size: "small", disabled: mediasRef.current.mediaChunks.length > 0 },
-                            react_1.default.createElement(Icon_1.default, null, "arrow_back")),
+                        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.Avatar, { className: classes.avatar, src: scAuthContext.user.avatar })),
-                    react_1.default.createElement(material_1.Box, null, smDown ? (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.Button, { onClick: handleChangeView(exports.MAIN_VIEW), variant: "text", color: "inherit", disabled: mediasRef.current.mediaChunks.length > 0 },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }))))),
+                        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 }))));
         };
     };
@@ -658,20 +539,20 @@ function Composer(inProps) {
         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), size: "small" },
-                        react_1.default.createElement(Icon_1.default, null, "arrow_back")),
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.poll", defaultMessage: "ui.composer.poll" })),
+                    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(material_1.Avatar, { className: classes.avatar, src: scAuthContext.user.avatar })),
-                react_1.default.createElement(material_1.Stack, { spacing: 2, direction: "row" }, smDown ? (react_1.default.createElement(react_1.default.Fragment, 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.IconButton, { onClick: handleDeletePoll, color: "inherit", disabled: !hasPoll() },
-                        react_1.default.createElement(Icon_1.default, null, "delete")))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(material_1.Button, { onClick: handleDeletePoll, variant: "text", color: "inherit" },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.delete", defaultMessage: "ui.composer.delete" })),
-                    react_1.default.createElement(material_1.Button, { onClick: handleChangeView(exports.MAIN_VIEW), variant: "text", color: "inherit", disabled: !hasPoll() },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" })))))),
+                    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 }))));
     };
@@ -679,63 +560,62 @@ function Composer(inProps) {
         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), size: "small" },
-                        react_1.default.createElement(Icon_1.default, null, "arrow_back")),
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.location.title", defaultMessage: "ui.composer.location.title" })),
+                    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.Avatar, { className: classes.avatar, src: scAuthContext.user.avatar })),
-                react_1.default.createElement(material_1.Box, null, smDown ? (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.Button, { onClick: handleChangeView(exports.MAIN_VIEW), variant: "text", color: "inherit" },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }))))),
-            react_1.default.createElement(material_1.DialogContent, { className: classes.locationContent },
-                react_1.default.createElement(Location_1.default, { onChange: handleChange('location'), defaultValue: location }))));
+                    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(Icon_1.default, null, "create"),
-                        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 }, t === 'post' ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'ui.composer.type.post', defaultMessage: 'ui.composer.type.post' })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: 'ui.composer.type.discussion', defaultMessage: 'ui.composer.type.discussion' })))))))),
-                react_1.default.createElement(material_1.Box, null, !scAuthContext.user ? react_1.default.createElement(material_1.Avatar, { className: classes.avatar }) : react_1.default.createElement(material_1.Avatar, { className: classes.avatar, src: scAuthContext.user.avatar })),
+                        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, { 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: {
+                    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, { key: `${key}-editor`, className: (0, classnames_1.default)(classes.block, classes.editor), onChange: handleChangeText, defaultValue: text, editable: !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.full_address, onDelete: handleDeleteLocation, onClick: handleChangeView(exports.LOCATION_VIEW) })),
+                    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(Categories_1.default, { key: `${key}-categories`, onChange: handleChange('categories'), defaultValue: categories, disabled: isSubmitting })),
-                error && (react_1.default.createElement(material_1.Typography, { className: classes.block, color: "error" }, error))),
-            react_1.default.createElement(material_1.DialogActions, { className: classes.actions },
-                react_1.default.createElement(material_1.Typography, { align: "left" },
+                    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(scAuthContext.user)) && (react_1.default.createElement(material_1.IconButton, { "aria-label": "add poll", color: poll ? 'primary' : 'default', disabled: isSubmitting, onClick: handleChangeView(exports.POLL_VIEW) },
+                    (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, { align: "right" },
+                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(react_core_1.SCFeatures.USER_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"))),
-                    !fullScreen && (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" })))),
-                fullScreen && (react_1.default.createElement(LoadingButton_1.default, { onClick: handleSubmit, color: "primary", variant: "contained", disabled: !canSubmit(), loading: isSubmitting, fullWidth: true },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }))))));
+                    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) {
@@ -766,10 +646,17 @@ function Composer(inProps) {
                 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" })));
     }
-    if (!scAuthContext.user) {
+    const _maxWidth = (0, react_1.useMemo)(() => (maxWidth ? maxWidth : type === Composer_1.COMPOSER_TYPE_DISCUSSION ? 'md' : 'sm'), [maxWidth, type]);
+    if (!scUserContext.user && !(scUserContext.loading && open)) {
         return null;
     }
-    return (react_1.default.createElement(Root, Object.assign({ TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: classes.root, fullScreen: fullScreen }), child()));
+    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()));
 }
 exports.default = Composer;
-//# sourceMappingURL=Composer.js.map