Merge pull request saleor#4295 from mirumee/fix-rich-text

Fix story and responsiveness or RichTextEditor
ranfow · Jun 18, 2019 · 6bab31a · 6bab31a
2 parents 3d30d8c + 26ff833
commit 6bab31a
Show file tree

Hide file tree

Showing 5 changed files with 557 additions and 15 deletions.
diff --git a/saleor/static/dashboard-next/components/RichTextEditor/LinkEntity.tsx b/saleor/static/dashboard-next/components/RichTextEditor/LinkEntity.tsx
@@ -38,6 +38,9 @@ const styles = (theme: Theme) =>
     inline: {
       display: "inline-block"
     },
+    popover: {
+      zIndex: 1
+    },
     root: {
       alignItems: "center",
       display: "flex",
@@ -76,6 +79,7 @@ const LinkEntity = withStyles(styles, {
       <>
         <div className={classes.anchor} ref={anchor}>
           <Popper
+            className={classes.popover}
             open={isOpened}
             anchorEl={anchor.current}
             transition
@@ -93,7 +97,7 @@ const LinkEntity = withStyles(styles, {
                   <ClickAwayListener onClickAway={disable} mouseEvent="onClick">
                     <div className={classes.container}>
                       <Typography className={classes.inline} variant="body2">
-                        {contentState.getEntity(entityKey).getData().href}
+                        {contentState.getEntity(entityKey).getData().url}
                       </Typography>
                       <span className={classes.separator} />
                       <Button
@@ -116,7 +120,7 @@ const LinkEntity = withStyles(styles, {
           </Popper>
         </div>
         <Link
-          href={contentState.getEntity(entityKey).getData().href}
+          href={contentState.getEntity(entityKey).getData().url}
           onClick={toggle}
         >
           {children}

diff --git a/saleor/static/dashboard-next/components/RichTextEditor/LinkSource.tsx b/saleor/static/dashboard-next/components/RichTextEditor/LinkSource.tsx
@@ -21,15 +21,15 @@ interface LinkSourceProps {
 }
 
 class LinkSource extends React.Component<LinkSourceProps> {
-  submit = (href: string) => {
+  submit = (url: string) => {
     const { editorState, entityType, onComplete } = this.props;
 
-    if (href) {
+    if (url) {
       const content = editorState.getCurrentContent();
       const contentWithEntity = content.createEntity(
         entityType.type,
         "MUTABLE",
-        { href }
+        { url }
       );
       const entityKey = contentWithEntity.getLastCreatedEntityKey();
       const newEditorState = EditorState.set(editorState, {
@@ -49,23 +49,23 @@ class LinkSource extends React.Component<LinkSourceProps> {
 
   render() {
     const { entity, onClose } = this.props;
-    const initial = entity ? entity.getData().href : "";
+    const initial = entity ? entity.getData().url : "";
 
     return (
       <Dialog onClose={onClose} open={true} fullWidth maxWidth="sm">
         <Form
-          initial={{ href: initial }}
-          onSubmit={({ href }) => this.submit(href)}
+          initial={{ url: initial }}
+          onSubmit={({ url }) => this.submit(url)}
         >
           {({ data, change, submit }) => (
             <>
               <DialogTitle>{i18n.t("Add or Edit Link")}</DialogTitle>
               <DialogContent>
                 <TextField
-                  name="href"
+                  name="url"
                   fullWidth
                   label={i18n.t("URL Linked")}
-                  value={data.href}
+                  value={data.url}
                   onChange={change}
                 />
               </DialogContent>

diff --git a/saleor/static/dashboard-next/components/RichTextEditor/RichTextEditor.tsx b/saleor/static/dashboard-next/components/RichTextEditor/RichTextEditor.tsx
@@ -188,7 +188,11 @@ const styles = (theme: Theme) =>
           background: theme.palette.background.default,
           border: `1px ${theme.overrides.MuiCard.root.borderColor} solid`,
           display: "inline-flex",
-          marginBottom: theme.spacing.unit
+          flexWrap: "wrap",
+          marginBottom: theme.spacing.unit,
+          [theme.breakpoints.down(460)]: {
+            width: "min-content"
+          }
         },
         "&-block": {
           "&--blockquote": {
@@ -302,7 +306,7 @@ const RichTextEditor = withStyles(styles, { name: "RichTextEditor" })(
           enableLineBreak
           entityTypes={[
             {
-              attributes: ["href"],
+              attributes: ["url"],
               decorator: LinkEntity,
               icon: <LinkIcon className={classes.linkIcon} />,
               source: LinkSource,