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

package/lib/esm/components/Composer/Composer.js

@@ -1,38 +1,30 @@
-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;
-};
-import React, { forwardRef, useContext, useEffect, useMemo, useReducer, useState } from 'react';
-import { http, Endpoints, formatHttpError } from '@selfcommunity/api-services';
-import { SCFeatures, SCPreferences, SCPreferencesContext, SCUserContext, UserUtils, useSCFetchAddressingTagList } from '@selfcommunity/react-core';
+import { __rest } from "tslib";
+import React, { forwardRef, useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { SCFeatureName } from '@selfcommunity/types';
+import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
+import { SCPreferences, UserUtils, useSCFetchAddressingTagList, useSCPreferences, useSCUser, } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
 import Icon from '@mui/material/Icon';
-import { Alert, AlertTitle, Avatar, Badge, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Fade, FormControl, hexToRgb, IconButton, InputBase, MenuItem, Select, Stack, TextField, ToggleButton, ToggleButtonGroup, Typography, useMediaQuery } from '@mui/material';
+import { Alert, AlertTitle, Avatar, Badge, Box, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Fade, FormControl, IconButton, InputBase, MenuItem, Select, Stack, Tab, Tabs, TextField, Tooltip, Typography, useMediaQuery } from '@mui/material';
 import { styled, useTheme } from '@mui/material/styles';
 import { COMPOSER_POLL_MIN_CHOICES, COMPOSER_TITLE_MAX_LENGTH, COMPOSER_TYPE_DISCUSSION, COMPOSER_TYPE_POST } from '../../constants/Composer';
 import { MEDIA_TYPE_SHARE } from '../../constants/Media';
 import LoadingButton from '@mui/lab/LoadingButton';
 import Audience from './Audience';
-import Categories from './Categories';
-import { random, stripHtml } from '@selfcommunity/utils';
+import CategoryAutocomplete from '../CategoryAutocomplete';
+import { iOS, isObject, random, stripHtml } from '@selfcommunity/utils';
 import classNames from 'classnames';
 import PollPreview from '../FeedObject/Poll';
 import Editor from '../Editor';
 import { Document, Image, Link, Share } from '../../shared/Media';
 import MediasPreview from '../../shared/MediasPreview';
 import Poll from './Poll';
-import Location from './Location';
+import LocationAutocomplete from '../LocationAutocomplete';
 import TagChip from '../../shared/TagChip';
 import { ComposerSkeleton } from './index';
 import { useSnackbar } from 'notistack';
 import { useThemeProps } from '@mui/system';
+import { extractHashtags } from '../../utils/editor';
 const DialogTransition = forwardRef(function Transition(props, ref) {
     return React.createElement(Fade, Object.assign({ ref: ref }, props));
 });
@@ -55,7 +47,10 @@ const TypeInput = styled(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`,
@@ -69,10 +64,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`
 };
@@ -80,128 +79,7 @@ const Root = styled(Dialog, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => {
-    let mediaActionBackground = theme.palette.getContrastText(theme.palette.primary.main);
-    if (mediaActionBackground.startsWith('#')) {
-        mediaActionBackground = 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
-        }
-    };
-});
+})(() => ({}));
 export const MAIN_VIEW = 'main';
 export const AUDIENCE_VIEW = 'audience';
 export const POLL_VIEW = 'poll';
@@ -243,9 +121,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';
@@ -258,7 +138,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.|
@@ -276,6 +158,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.|
 
@@ -288,19 +172,21 @@ export default function Composer(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { feedObjectId = null, feedObjectType = null, feedObject = null, defaultValue = {}, view = MAIN_VIEW, mediaObjectTypes = [Image, Document, Link, 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 = MAIN_VIEW, mediaObjectTypes = [Image, Document, Link, Share], EditorProps = null, onClose = null, onSuccess = null, maxWidth } = props, rest = __rest(props, ["feedObjectId", "feedObjectType", "feedObject", "defaultValue", "view", "mediaObjectTypes", "EditorProps", "onClose", "onSuccess", "maxWidth"]);
     // Context
-    const scPrefernces = useContext(SCPreferencesContext);
-    const scAuthContext = useContext(SCUserContext);
+    const scPrefernces = useSCPreferences();
+    const scUserContext = useSCUser();
     const { enqueueSnackbar } = useSnackbar();
     // HOOKS
     const { scAddressingTags } = useSCFetchAddressingTagList({ fetch: rest.open });
+    const theme = useTheme();
+    const fullScreen = useMediaQuery(theme.breakpoints.down('md'), { noSsr: typeof window !== 'undefined' });
     // State variables
-    const [fades, setFades] = useState({});
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [_view, setView] = useState(view);
     const [composerTypes, setComposerTypes] = useState([]);
     const [mediaChunks, setMediaChunks] = useState([]);
+    const [editorFocused, setEditorFocused] = useState(false);
     const [state, dispatch] = useReducer(reducer, Object.assign(Object.assign(Object.assign({}, COMPOSER_INITIAL_STATE), defaultValue), { view, key: random() }));
     const { key, id, type, title, titleError, text, categories, addressing, audience, medias, poll, pollError, location, error } = state;
     const addMedia = (media) => {
@@ -316,7 +202,7 @@ export default function Composer(inProps) {
         else {
             _feedObject = _feedObject;
         }
-        if (feedObject.author.id === scAuthContext.user.id) {
+        if (feedObject.author.id === scUserContext.user.id) {
             dispatch({
                 type: 'multiple',
                 value: {
@@ -343,9 +229,11 @@ export default function Composer(inProps) {
     const [isLoading, setIsLoading] = useState(editMode);
     const [loadError, setLoadError] = useState(false);
     // REFS
-    const unloadRef = React.useRef(false);
+    const unloadRef = useRef(false);
+    let titleRef = useRef();
+    let editorRef = useRef();
     // Create a ref for medias becaouse of state update error on chunk upload
-    const mediasRef = React.useRef({ medias, mediaChunks, addMedia, setMediaChunks });
+    const mediasRef = useRef({ medias, mediaChunks, addMedia, setMediaChunks });
     mediasRef.current = { medias, mediaChunks, addMedia, setMediaChunks };
     /*
      * Compute preferences
@@ -414,12 +302,24 @@ export default function Composer(inProps) {
             window.onbeforeunload = null;
         }
     }, [state]);
+    // Autofocus
+    useEffect(() => {
+        if (!rest.open || fullScreen) {
+            return;
+        }
+        if (type === 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_POLL_MIN_CHOICES;
+        return poll && poll.title.length > 0 && poll.title.length < COMPOSER_TITLE_MAX_LENGTH && poll.choices.length >= COMPOSER_POLL_MIN_CHOICES;
     };
     const canSubmit = () => {
-        return ((type === COMPOSER_TYPE_DISCUSSION && title.length > 0) ||
+        return ((type === COMPOSER_TYPE_DISCUSSION && title.length > 0 && title.length < COMPOSER_TITLE_MAX_LENGTH) ||
             (type === COMPOSER_TYPE_POST && (stripHtml(text).length > 0 || medias.length > 0 || hasPoll())));
     };
     /* Handlers */
@@ -436,7 +336,15 @@ export default 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_TITLE_MAX_LENGTH
+                    ? { titleError: React.createElement(FormattedMessage, { id: "ui.composer.title.error.maxlength", defaultMessage: "ui.composer.title.error.maxlength" }) }
+                    : null
+            }
+        });
     };
     const handleChange = (prop) => (event, data) => {
         let target = null;
@@ -453,9 +361,16 @@ export default function Composer(inProps) {
                 break;
             case 'categories':
             case 'addressing':
-            case 'location':
                 dispatch({ type: prop, value: event });
                 break;
+            case 'location':
+                const value = event && 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;
@@ -482,12 +397,6 @@ export default 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) {
@@ -511,7 +420,7 @@ export default function Composer(inProps) {
         });
     };
     const handleSubmit = (event) => {
-        if (UserUtils.isBlocked(scAuthContext.user)) {
+        if (UserUtils.isBlocked(scUserContext.user)) {
             // deny submit action if authenticated user is blocked
             enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                 variant: 'warning',
@@ -519,23 +428,25 @@ export default function Composer(inProps) {
             });
             return;
         }
+        // Extract hashtags and add to categories
+        const _categories = [...categories.map((c) => c.id), ...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[SCPreferences.ADDONS_POLLS_ENABLED] && hasPoll()) {
             data.poll = poll;
         }
         if (preferences[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(SCFeatures.USER_TAGGING) && audience === AUDIENCE_TAG) {
+        if (scPrefernces.features.includes(SCFeatureName.TAGGING) && audience === AUDIENCE_TAG) {
             data.addressing = addressing.map((t) => t.id);
         }
         setIsSubmitting(true);
@@ -561,67 +472,63 @@ export default function Composer(inProps) {
             dispatch({ type: 'reset' });
         })
             .catch((error) => {
-            dispatch({ type: 'multiple', value: formatHttpError(error) });
+            dispatch({ type: 'multiple', value: formatHttpErrorCode(error) });
         })
             .then(() => setIsSubmitting(false));
     };
+    // MEMO
+    const _EditorProps = useMemo(() => (EditorProps ? EditorProps : { toolbar: true, uploadImage: type === COMPOSER_TYPE_DISCUSSION }), [EditorProps, type]);
+    const isIOS = useMemo(() => iOS(), []);
     // RENDER
-    const theme = useTheme();
-    const smDown = useMediaQuery(theme.breakpoints.down('sm'), { noSsr: typeof window !== 'undefined' });
-    const fullScreen = useMediaQuery(theme.breakpoints.down('md'), { noSsr: typeof window !== 'undefined' });
     const hasMediaShare = useMemo(() => medias.findIndex((m) => m.type === MEDIA_TYPE_SHARE) !== -1, [medias]);
     const renderMediaAdornment = (mediaObjectType) => {
-        return (React.createElement(Box, { className: classes.mediasActions, onMouseEnter: handleFadeIn(mediaObjectType.name), onMouseLeave: handleFadeOut(mediaObjectType.name) },
-            React.createElement(Fade, { in: Boolean(fades[mediaObjectType.name]) },
-                React.createElement(Typography, { align: "left" },
-                    React.createElement(Button, { onClick: handleChangeView(mediaObjectType.name), variant: "text", size: "small" },
-                        React.createElement(FormattedMessage, { id: `ui.composer.media.${mediaObjectType.name}.edit`, defaultMessage: `ui.composer.media.${mediaObjectType.name}.edit` })))),
-            React.createElement(Typography, { align: "right" },
-                React.createElement(IconButton, { onClick: handleDeleteMedia(null, mediaObjectType), size: "small", color: "primary" },
-                    React.createElement(Icon, null, "delete")))));
+        return (React.createElement(Box, { className: classes.mediasActions },
+            React.createElement(Typography, { className: classes.mediasActionsTitle },
+                React.createElement(FormattedMessage, { id: `ui.composer.media.${mediaObjectType.name}.edit`, defaultMessage: `ui.composer.media.${mediaObjectType.name}.edit` })),
+            React.createElement(Typography, { className: classes.mediasActionsActions },
+                React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.edit", defaultMessage: "ui.composer.edit" }) },
+                    React.createElement(IconButton, { onClick: handleChangeView(mediaObjectType.name), color: "inherit" },
+                        React.createElement(Icon, null, "edit"))),
+                React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.delete", defaultMessage: "ui.composer.delete" }) },
+                    React.createElement(IconButton, { onClick: handleDeleteMedia(null, mediaObjectType), color: "inherit" },
+                        React.createElement(Icon, null, "delete"))))));
     };
     const renderAudienceView = () => {
         return (React.createElement(React.Fragment, null,
             React.createElement(DialogTitle, { className: classes.title },
                 React.createElement(Typography, { component: "div" },
-                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), size: "small" },
-                        React.createElement(Icon, null, "arrow_back")),
+                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW) },
+                        React.createElement(Icon, null, "arrow_back"))),
+                React.createElement(Box, null,
                     React.createElement(FormattedMessage, { id: "ui.composer.audience.title", defaultMessage: "ui.composer.audience.title" })),
                 React.createElement(Box, null,
-                    React.createElement(Avatar, { className: classes.avatar, src: scAuthContext.user.avatar })),
-                React.createElement(Box, null, smDown ? (React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit" },
-                    React.createElement(Icon, null, "check"))) : (React.createElement(Button, { onClick: handleChangeView(MAIN_VIEW), variant: "text", color: "inherit" },
-                    React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }))))),
-            React.createElement(DialogContent, { className: classes.audienceContent },
-                React.createElement(Box, { sx: { textAlign: 'center' }, className: classes.block },
-                    React.createElement(ToggleButtonGroup, { value: audience, exclusive: true, onChange: handleChange('audience') },
-                        React.createElement(ToggleButton, { value: AUDIENCE_ALL, size: "small" },
-                            React.createElement(Icon, null, "public"),
-                            React.createElement(FormattedMessage, { id: "ui.composer.audience.all", defaultMessage: "ui.composer.audience.all" })),
-                        React.createElement(ToggleButton, { value: AUDIENCE_TAG, size: "small" },
-                            React.createElement(Icon, null, "label"),
-                            " ",
-                            React.createElement(FormattedMessage, { id: "ui.composer.audience.tag", defaultMessage: "ui.composer.audience.tag" })))),
-                React.createElement(Typography, { align: "center", className: classes.block, gutterBottom: true },
+                    React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
+                        React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit" },
+                            React.createElement(Icon, null, "check"))))),
+            React.createElement(DialogContent, { className: classNames(classes.content, classes.audienceContent) },
+                React.createElement(Tabs, { value: audience, onChange: handleChange('audience'), "aria-label": "audience type" },
+                    React.createElement(Tab, { value: AUDIENCE_ALL, icon: React.createElement(Icon, null, "public"), label: React.createElement(FormattedMessage, { id: "ui.composer.audience.all", defaultMessage: "ui.composer.audience.all" }) }),
+                    React.createElement(Tab, { value: AUDIENCE_TAG, icon: React.createElement(Icon, null, "label"), label: React.createElement(FormattedMessage, { id: "ui.composer.audience.tag", defaultMessage: "ui.composer.audience.tag" }) })),
+                React.createElement(Typography, { align: "center", className: classes.block },
                     audience === AUDIENCE_ALL && (React.createElement(FormattedMessage, { id: "ui.composer.audience.all.message", defaultMessage: "ui.composer.audience.all.message" })),
                     audience === AUDIENCE_TAG && (React.createElement(FormattedMessage, { id: "ui.composer.audience.tag.message", defaultMessage: "ui.composer.audience.tag.message" }))),
-                audience === AUDIENCE_TAG && (React.createElement(Box, { className: classes.divider },
-                    React.createElement(Box, { className: classes.block, sx: { textAlign: 'center' } },
-                        React.createElement(Audience, { onChange: handleChange('addressing'), defaultValue: addressing, tags: scAddressingTags })))))));
+                audience === AUDIENCE_TAG && React.createElement(Audience, { onChange: handleChange('addressing'), defaultValue: addressing, tags: scAddressingTags }))));
     };
     const renderMediaView = (mediaObjectType) => {
         return () => {
             return (React.createElement(React.Fragment, null,
                 React.createElement(DialogTitle, { className: classes.title },
                     React.createElement(Typography, { component: "div" },
-                        React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), size: "small", disabled: mediasRef.current.mediaChunks.length > 0 },
-                            React.createElement(Icon, null, "arrow_back")),
+                        React.createElement("span", null,
+                            React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), disabled: mediasRef.current.mediaChunks.length > 0 },
+                                React.createElement(Icon, null, "arrow_back")))),
+                    React.createElement(Box, null,
                         React.createElement(FormattedMessage, { id: `ui.composer.media.${mediaObjectType.name}.edit`, defaultMessage: `ui.composer.media.${mediaObjectType.name}.edit` })),
                     React.createElement(Box, null,
-                        React.createElement(Avatar, { className: classes.avatar, src: scAuthContext.user.avatar })),
-                    React.createElement(Box, null, smDown ? (React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit", disabled: mediasRef.current.mediaChunks.length > 0 },
-                        React.createElement(Icon, null, "check"))) : (React.createElement(Button, { onClick: handleChangeView(MAIN_VIEW), variant: "text", color: "inherit", disabled: mediasRef.current.mediaChunks.length > 0 },
-                        React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }))))),
+                        React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
+                            React.createElement("span", null,
+                                React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit", disabled: mediasRef.current.mediaChunks.length > 0 },
+                                    React.createElement(Icon, null, "check")))))),
                 React.createElement(DialogContent, { className: classNames(classes.content, classes.mediaContent) }, React.createElement(mediaObjectType.editComponent, { medias: medias.filter(mediaObjectType.filter), onProgress: handleMediaProgress, onSuccess: handleAddMedia, onSort: handleSortMedia, onDelete: handleDeleteMedia }))));
         };
     };
@@ -629,20 +536,20 @@ export default function Composer(inProps) {
         return (React.createElement(React.Fragment, null,
             React.createElement(DialogTitle, { className: classes.title },
                 React.createElement(Typography, { component: "div" },
-                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), size: "small" },
-                        React.createElement(Icon, null, "arrow_back")),
-                    React.createElement(FormattedMessage, { id: "ui.composer.poll", defaultMessage: "ui.composer.poll" })),
+                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW) },
+                        React.createElement(Icon, null, "arrow_back"))),
                 React.createElement(Box, null,
-                    React.createElement(Avatar, { className: classes.avatar, src: scAuthContext.user.avatar })),
-                React.createElement(Stack, { spacing: 2, direction: "row" }, smDown ? (React.createElement(React.Fragment, null,
-                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit", disabled: !hasPoll() },
-                        React.createElement(Icon, null, "check")),
-                    React.createElement(IconButton, { onClick: handleDeletePoll, color: "inherit", disabled: !hasPoll() },
-                        React.createElement(Icon, null, "delete")))) : (React.createElement(React.Fragment, null,
-                    React.createElement(Button, { onClick: handleDeletePoll, variant: "text", color: "inherit" },
-                        React.createElement(FormattedMessage, { id: "ui.composer.delete", defaultMessage: "ui.composer.delete" })),
-                    React.createElement(Button, { onClick: handleChangeView(MAIN_VIEW), variant: "text", color: "inherit", disabled: !hasPoll() },
-                        React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" })))))),
+                    React.createElement(FormattedMessage, { id: "ui.composer.poll", defaultMessage: "ui.composer.poll" })),
+                React.createElement(Stack, { spacing: 2, direction: "row" },
+                    React.createElement(React.Fragment, null,
+                        React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.delete", defaultMessage: "ui.composer.delete" }) },
+                            React.createElement("span", null,
+                                React.createElement(IconButton, { onClick: handleDeletePoll, color: "inherit", disabled: !hasPoll() },
+                                    React.createElement(Icon, null, "delete")))),
+                        React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
+                            React.createElement("span", null,
+                                React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit", disabled: !hasPoll() },
+                                    React.createElement(Icon, null, "check"))))))),
             React.createElement(DialogContent, { className: classes.content },
                 React.createElement(Poll, { onChange: handleChangePoll, value: poll, error: pollError }))));
     };
@@ -650,63 +557,62 @@ export default function Composer(inProps) {
         return (React.createElement(React.Fragment, null,
             React.createElement(DialogTitle, { className: classes.title },
                 React.createElement(Typography, { component: "div" },
-                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), size: "small" },
-                        React.createElement(Icon, null, "arrow_back")),
-                    React.createElement(FormattedMessage, { id: "ui.composer.location.title", defaultMessage: "ui.composer.location.title" })),
+                    React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW) },
+                        React.createElement(Icon, null, "arrow_back"))),
+                React.createElement(Box, null,
+                    React.createElement(FormattedMessage, { id: "ui.locationAutocomplete.title", defaultMessage: "ui.locationAutocomplete.title" })),
                 React.createElement(Box, null,
-                    React.createElement(Avatar, { className: classes.avatar, src: scAuthContext.user.avatar })),
-                React.createElement(Box, null, smDown ? (React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit" },
-                    React.createElement(Icon, null, "check"))) : (React.createElement(Button, { onClick: handleChangeView(MAIN_VIEW), variant: "text", color: "inherit" },
-                    React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }))))),
-            React.createElement(DialogContent, { className: classes.locationContent },
-                React.createElement(Location, { onChange: handleChange('location'), defaultValue: location }))));
+                    React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.done", defaultMessage: "ui.composer.done" }) },
+                        React.createElement(IconButton, { onClick: handleChangeView(MAIN_VIEW), color: "inherit" },
+                            React.createElement(Icon, null, "check"))))),
+            React.createElement(DialogContent, { className: classNames(classes.content, classes.locationContent) },
+                React.createElement(LocationAutocomplete, { onChange: handleChange('location'), defaultValue: location ? { full_address: location.location } : '' }))));
     };
     const renderMainView = () => {
         return (React.createElement(React.Fragment, null,
             React.createElement(DialogTitle, { className: classes.title },
                 React.createElement(Box, null,
                     React.createElement(FormControl, { className: classes.types },
-                        React.createElement(Icon, null, "create"),
-                        React.createElement(Select, { value: type, onChange: handleChangeType, input: React.createElement(TypeInput, null), disabled: editMode }, composerTypes.map((t) => (React.createElement(MenuItem, { value: t, key: t }, t === 'post' ? (React.createElement(FormattedMessage, { id: 'ui.composer.type.post', defaultMessage: 'ui.composer.type.post' })) : (React.createElement(FormattedMessage, { id: 'ui.composer.type.discussion', defaultMessage: 'ui.composer.type.discussion' })))))))),
-                React.createElement(Box, null, !scAuthContext.user ? React.createElement(Avatar, { className: classes.avatar }) : React.createElement(Avatar, { className: classes.avatar, src: scAuthContext.user.avatar })),
+                        React.createElement(Select, { value: type, onChange: handleChangeType, input: React.createElement(TypeInput, null), disabled: editMode }, composerTypes.map((t) => (React.createElement(MenuItem, { value: t, key: t },
+                            React.createElement(FormattedMessage, { id: `ui.composer.type.${t}`, defaultMessage: `ui.composer.type.${t}` }))))))),
+                React.createElement(Box, null, !scUserContext.user ? React.createElement(Avatar, { className: classes.avatar }) : React.createElement(Avatar, { className: classes.avatar, src: scUserContext.user.avatar })),
                 React.createElement(Box, null,
                     React.createElement(IconButton, { onClick: handleClose },
                         React.createElement(Icon, null, "close")))),
             React.createElement(DialogContent, { className: classes.content },
                 type === COMPOSER_TYPE_DISCUSSION && (React.createElement("div", { className: classes.block },
-                    React.createElement(TextField, { label: React.createElement(FormattedMessage, { id: "ui.composer.title.label", defaultMessage: "ui.composer.title.label" }), fullWidth: true, variant: "outlined", value: title, multiline: true, onChange: handleChange('title'), InputProps: {
+                    React.createElement(TextField, { inputRef: titleRef, label: React.createElement(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.createElement(Typography, { variant: "body2" }, COMPOSER_TITLE_MAX_LENGTH - title.length)
                         }, error: Boolean(titleError), helperText: titleError, disabled: isSubmitting }))),
-                React.createElement(Editor, { key: `${key}-editor`, className: classNames(classes.block, classes.editor), onChange: handleChangeText, defaultValue: text, editable: !isSubmitting }),
+                React.createElement(Editor, Object.assign({ ref: editorRef }, _EditorProps, { key: `${key}-editor`, className: classNames(classes.block, classes.editor), onChange: handleChangeText, onFocus: () => setEditorFocused(true), defaultValue: text, editable: !isSubmitting })),
                 React.createElement(Box, { className: classes.medias },
                     React.createElement(MediasPreview, { medias: medias, mediaObjectTypes: mediaObjectTypes.map((mediaObjectType) => {
                             return Object.assign(Object.assign({}, mediaObjectType), { previewProps: { adornment: mediaObjectType.editButton !== null ? renderMediaAdornment(mediaObjectType) : null, gallery: false } });
                         }) })),
                 poll && React.createElement(PollPreview, { pollObject: poll }),
                 React.createElement(Stack, { spacing: 2, className: classes.audience, direction: "row" },
-                    location && (React.createElement(Chip, { icon: React.createElement(Icon, null, "add_location_alt"), label: location.full_address, onDelete: handleDeleteLocation, onClick: handleChangeView(LOCATION_VIEW) })),
+                    location && (React.createElement(Chip, { icon: React.createElement(Icon, null, "add_location_alt"), label: location.location, onDelete: handleDeleteLocation, onClick: handleChangeView(LOCATION_VIEW) })),
                     audience === AUDIENCE_TAG &&
                         addressing &&
                         addressing.map((t) => (React.createElement(TagChip, { key: t.id, tag: t, onDelete: handleDeleteTag(t.id), icon: React.createElement(Icon, null, "label"), onClick: handleChangeView(AUDIENCE_VIEW) })))),
                 React.createElement("div", { className: classes.block },
-                    React.createElement(Categories, { key: `${key}-categories`, onChange: handleChange('categories'), defaultValue: categories, disabled: isSubmitting })),
-                error && (React.createElement(Typography, { className: classes.block, color: "error" }, error))),
-            React.createElement(DialogActions, { className: classes.actions },
-                React.createElement(Typography, { align: "left" },
+                    React.createElement(CategoryAutocomplete, { multiple: true, key: `${key}-categories`, onChange: handleChange('categories'), defaultValue: categories, disabled: isSubmitting })),
+                error && (React.createElement(Typography, { className: classes.block, color: "error" },
+                    React.createElement(FormattedMessage, { id: "ui.composer.error.generic", defaultMessage: "ui.composer.error.generic" })))),
+            React.createElement(DialogActions, { className: classes.actions, onClick: () => setEditorFocused(false) },
+                React.createElement(Typography, { className: classes.mediaActions },
                     mediaObjectTypes
                         .filter((mediaObjectType) => mediaObjectType.editButton !== null)
                         .map((mediaObjectType) => (React.createElement(mediaObjectType.editButton, { key: mediaObjectType.name, onClick: handleChangeView(mediaObjectType.name), disabled: isSubmitting || hasMediaShare, color: medias.filter(mediaObjectType.filter).length > 0 ? 'primary' : 'default' }))),
-                    (preferences[SCPreferences.ADDONS_POLLS_ENABLED] || UserUtils.isStaff(scAuthContext.user)) && (React.createElement(IconButton, { "aria-label": "add poll", color: poll ? 'primary' : 'default', disabled: isSubmitting, onClick: handleChangeView(POLL_VIEW) },
+                    (preferences[SCPreferences.ADDONS_POLLS_ENABLED] || UserUtils.isStaff(scUserContext.user)) && (React.createElement(IconButton, { "aria-label": "add poll", color: poll ? 'primary' : 'default', disabled: isSubmitting, onClick: handleChangeView(POLL_VIEW) },
                         React.createElement(Badge, { className: classes.badgeError, badgeContent: pollError ? ' ' : null, color: "error" },
                             React.createElement(Icon, null, "bar_chart"))))),
-                React.createElement(Typography, { align: "right" },
+                React.createElement(Typography, { className: classes.filterActions },
                     preferences[SCPreferences.ADDONS_POST_GEOLOCATION_ENABLED] && (React.createElement(IconButton, { disabled: isSubmitting, onClick: handleChangeView(LOCATION_VIEW), color: location !== null ? 'primary' : 'default' },
                         React.createElement(Icon, null, "add_location_alt"))),
-                    scPrefernces.features.includes(SCFeatures.USER_TAGGING) && scAddressingTags.length > 0 && (React.createElement(IconButton, { disabled: isSubmitting, onClick: handleChangeView(AUDIENCE_VIEW) }, audience === AUDIENCE_TAG ? React.createElement(Icon, null, "label") : React.createElement(Icon, null, "public"))),
-                    !fullScreen && (React.createElement(LoadingButton, { onClick: handleSubmit, color: "primary", variant: "contained", disabled: !canSubmit(), loading: isSubmitting },
-                        React.createElement(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" })))),
-                fullScreen && (React.createElement(LoadingButton, { onClick: handleSubmit, color: "primary", variant: "contained", disabled: !canSubmit(), loading: isSubmitting, fullWidth: true },
-                    React.createElement(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" }))))));
+                    scPrefernces.features.includes(SCFeatureName.TAGGING) && scAddressingTags.length > 0 && (React.createElement(IconButton, { disabled: isSubmitting, onClick: handleChangeView(AUDIENCE_VIEW) }, audience === AUDIENCE_TAG ? React.createElement(Icon, null, "label") : React.createElement(Icon, null, "public")))),
+                React.createElement(LoadingButton, { onClick: handleSubmit, color: "primary", variant: "contained", disabled: !canSubmit(), loading: isSubmitting },
+                    React.createElement(FormattedMessage, { id: "ui.composer.submit", defaultMessage: "ui.composer.submit" })))));
     };
     let child = null;
     switch (_view) {
@@ -737,9 +643,16 @@ export default function Composer(inProps) {
                 React.createElement(FormattedMessage, { id: "ui.composer.edit.error.title", defaultMessage: "ui.composer.edit.error.title" })),
             React.createElement(FormattedMessage, { id: "ui.composer.edit.error.content", defaultMessage: "ui.composer.edit.error.content" })));
     }
-    if (!scAuthContext.user) {
+    const _maxWidth = useMemo(() => (maxWidth ? maxWidth : type === COMPOSER_TYPE_DISCUSSION ? 'md' : 'sm'), [maxWidth, type]);
+    if (!scUserContext.user && !(scUserContext.loading && open)) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: classes.root, fullScreen: fullScreen }), child()));
+    return (React.createElement(Root, Object.assign({ maxWidth: _maxWidth, TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: classNames(classes.root, { [classes.writing]: editorFocused, [classes.ios]: isIOS }), fullScreen: fullScreen }),
+        editorFocused && fullScreen && (React.createElement(Box, { className: classes.titleDense },
+            React.createElement(IconButton, { onClick: () => setEditorFocused(false) },
+                React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: "ui.composer.editorFullScreen.close", defaultMessage: "ui.composer.editorFullScreen.close" }) },
+                    React.createElement(Icon, null, "zoom_out_map"))),
+            React.createElement(IconButton, { onClick: handleClose },
+                React.createElement(Icon, null, "close")))),
+        child()));
 }
-//# sourceMappingURL=Composer.js.map