From 2f9dbfa91d9346411d26087479415db5bb35d21d Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Sun, 8 Mar 2020 12:46:00 -0400
Subject: [PATCH] Progress

---
 .../autosuggest_textbox.js                    |  35 ++++-
 .../gabsocial/components/emoji/emoji.js       |   4 +-
 .../gabsocial/components/modal/modal_base.js  |   4 +-
 .../panel/notification_filter_panel.js        |   6 +-
 .../gabsocial/components/{poll => }/poll.js   |  19 ++-
 .../gabsocial/components/poll/index.js        |   1 -
 .../gabsocial/components/poll/poll.scss       | 147 ------------------
 .../components/sidebar_section_item.js        |   2 +-
 .../gabsocial/components/status/status.js     |   5 +-
 .../gabsocial/components/status_action_bar.js |   4 -
 .../components/compose_form/compose_form.js   |   2 +-
 .../features/compose/components/poll_form.js  |  29 ++--
 .../search_results/search_results.js          |  41 ++---
 app/javascript/styles/gabsocial/polls.scss    |  71 ---------
 package.json                                  |   2 +
 yarn.lock                                     |  94 ++++++++++-
 16 files changed, 189 insertions(+), 277 deletions(-)
 rename app/javascript/gabsocial/components/{poll => }/poll.js (94%)
 delete mode 100644 app/javascript/gabsocial/components/poll/index.js
 delete mode 100644 app/javascript/gabsocial/components/poll/poll.scss
 delete mode 100644 app/javascript/styles/gabsocial/polls.scss

diff --git a/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js b/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js
index cf862011..9175aacb 100644
--- a/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js
+++ b/app/javascript/gabsocial/components/autosuggest_textbox/autosuggest_textbox.js
@@ -3,6 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import classNames from 'classnames/bind'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import Textarea from 'react-textarea-autosize'
+import ContentEditable from 'react-contenteditable'
 import { isRtl } from '../../utils/rtl'
 import { textAtCursorMatchesToken } from '../../utils/cursor_token_match'
 import AutosuggestAccount from '../autosuggest_account'
@@ -228,18 +229,46 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       marginRight5PX: small,
     })
 
+    // <div aria-activedescendant="typeaheadFocus-0.35973815699338085"
+    // aria-autocomplete="list"
+    // aria-controls="typeaheadDropdownWrapped-0"
+    // aria-describedby="placeholder-7g4r6"
+    // aria-label="Tweet text"
+    // aria-multiline="true"
+    // class="notranslate public-DraftEditor-content"
+    // contenteditable="true"
+    // data-testid="tweetTextarea_0"
+    // role="textbox"
+    // spellcheck="true"
+    // tabindex="0"
+    // no-focuscontainer-refocus="true"
+    // style="outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;">
+    
     if (textarea) {
       return (
       <Fragment>
           <div className={[_s.default, _s.flexGrow1].join(' ')}>
             <div className={[_s.default, _s.marginLeft5PX].join(' ')}>
-              <Textarea
+
+              <ContentEditable
+                noFocuscontainerRefocus
+                ariaMultiline
+                contentEditable
+                spellcheck
+                tabindex='0'
+                ariaLabel='Gab text'
+                role='textbox'
+                ariaAutocomplete='list'
+                style={{
+                  userSelect: 'text',
+                  'white-space': 'pre-wrap',
+                  overflowWrap: 'break-word'
+                }}
                 inputRef={this.setTextbox}
                 className={textClasses}
                 disabled={disabled}
                 placeholder={placeholder}
                 autoFocus={autoFocus}
-                value={value}
                 onChange={this.onChange}
                 onKeyDown={this.onKeyDown}
                 onKeyUp={onKeyUp}
@@ -247,7 +276,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
                 onBlur={this.onBlur}
                 onPaste={this.onPaste}
                 style={style}
-                aria-autocomplete='list'
+                html={value}
               />
             </div>
             {children}
diff --git a/app/javascript/gabsocial/components/emoji/emoji.js b/app/javascript/gabsocial/components/emoji/emoji.js
index 988cea25..ada12cfc 100644
--- a/app/javascript/gabsocial/components/emoji/emoji.js
+++ b/app/javascript/gabsocial/components/emoji/emoji.js
@@ -29,7 +29,7 @@ const emojify = (str, customEmojis = {}) => {
         // if you want additional emoji handler, add statements below which set replacement and return true.
         if (shortname in customEmojis) {
           const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url;
-          replacement = `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${filename}" />`;
+          replacement = `<img draggable="false" style="height:20px;width:20px;margin:-3px 0 0;" alt="${shortname}" title="${shortname}" src="${filename}" />`;
           return true;
         }
         return false;
@@ -60,7 +60,7 @@ const emojify = (str, customEmojis = {}) => {
     } else { // matched to unicode emoji
       const { filename, shortCode } = unicodeMapping[match];
       const title = shortCode ? `:${shortCode}:` : '';
-      replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${assetHost}/emoji/${filename}.svg" />`;
+      replacement = `<img draggable="false" style="height:20px;width:20px;margin: -3px 0 0;" alt="${match}" title="${title}" src="${assetHost}/emoji/${filename}.svg" />`;
       rend = i + match.length;
       // If the matched character was followed by VS15 (for selecting text presentation), skip it.
       if (str.codePointAt(rend) === 65038) {
diff --git a/app/javascript/gabsocial/components/modal/modal_base.js b/app/javascript/gabsocial/components/modal/modal_base.js
index 23ee4beb..1b39762e 100644
--- a/app/javascript/gabsocial/components/modal/modal_base.js
+++ b/app/javascript/gabsocial/components/modal/modal_base.js
@@ -120,6 +120,8 @@ class ModalBase extends PureComponent {
     const containerClasses = cx({
       default: 1,
       z4: 1,
+      height100PC: visible,
+      width100PC: visible,
       displayNone: !visible,
     })
 
@@ -135,7 +137,7 @@ class ModalBase extends PureComponent {
             />
             <div
               role='dialog'
-              className={[_s.default, _s.positionFixed, _s.alignItemsCenter, _s.justifyContentCenter, _s.z4, _s.width100PC, _s.height100PC, _s.pointerEventsNone, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
+              className={[_s.default, _s.positionFixed, _s.alignItemsCenter, _s.justifyContentCenter, _s.z4, _s.width100PC, _s.height100PC, _s.top0, _s.rightAuto, _s.bottomAuto, _s.left0].join(' ')}
             >
               {children}
             </div>
diff --git a/app/javascript/gabsocial/components/panel/notification_filter_panel.js b/app/javascript/gabsocial/components/panel/notification_filter_panel.js
index ac7d866e..30c3015d 100644
--- a/app/javascript/gabsocial/components/panel/notification_filter_panel.js
+++ b/app/javascript/gabsocial/components/panel/notification_filter_panel.js
@@ -33,7 +33,11 @@ class NotificationFilterPanel extends ImmutablePureComponent {
 
     return (
       <PanelLayout title={intl.formatMessage(messages.title)}>
-
+        <Text>Date</Text>
+        <Text>Verified</Text>
+        <Text>Users</Text>
+        <Text>Status Id</Text>
+        <Text>Only People I Follow</Text>
       </PanelLayout>
     )
   }
diff --git a/app/javascript/gabsocial/components/poll/poll.js b/app/javascript/gabsocial/components/poll.js
similarity index 94%
rename from app/javascript/gabsocial/components/poll/poll.js
rename to app/javascript/gabsocial/components/poll.js
index 26e130a4..c680f760 100644
--- a/app/javascript/gabsocial/components/poll/poll.js
+++ b/app/javascript/gabsocial/components/poll.js
@@ -5,13 +5,13 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
 import classNames from 'classnames/bind'
 import escapeTextContentForBrowser from 'escape-html'
 import spring from 'react-motion/lib/spring'
-import Motion from '../../features/ui/util/optional_motion'
-import { vote } from '../../actions/polls'
-import emojify from '../emoji/emoji'
-import RelativeTimestamp from '../relative_timestamp'
-import Button from '../button'
-import DotTextSeperator from '../dot_text_seperator'
-import Text from '../text'
+import Motion from '../features/ui/util/optional_motion'
+import { vote } from '../actions/polls'
+import emojify from './emoji/emoji'
+import RelativeTimestamp from './relative_timestamp'
+import Button from './button'
+import DotTextSeperator from './dot_text_seperator'
+import Text from './text'
 
 const cx = classNames.bind(_s)
 
@@ -159,7 +159,10 @@ class Poll extends ImmutablePureComponent {
               !showResults && <span className={inputClasses} />
             }
 
-            <span dangerouslySetInnerHTML={{ __html: titleEmojified }} />
+            <span
+              className={_s.text}
+              dangerouslySetInnerHTML={{ __html: titleEmojified }}
+            />
 
             {
               showResults &&
diff --git a/app/javascript/gabsocial/components/poll/index.js b/app/javascript/gabsocial/components/poll/index.js
deleted file mode 100644
index 89d61718..00000000
--- a/app/javascript/gabsocial/components/poll/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './poll'
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/poll/poll.scss b/app/javascript/gabsocial/components/poll/poll.scss
deleted file mode 100644
index 834874c4..00000000
--- a/app/javascript/gabsocial/components/poll/poll.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-.poll {
-  margin-top: 16px;
-
-  &__list {
-    display: block;
-  }
-
-  &__chart {
-    height: 100%;
-    display: inline-block;
-    border-radius: 4px;
-    background: rgba($gab-placeholder-accent, .3);
-
-    @include abs-position(0, auto, auto, 0);
-
-    &--leading {
-      background: rgba($gab-placeholder-accent, .6);
-    }
-  }
-
-  &__text {
-    position: relative;
-    display: inline-block;
-    padding: 6px 0;
-    line-height: 18px;
-    cursor: default;
-    color: #fff;
-
-    @include text-overflow(nowrap);
-
-    body.theme-gabsocial-light & {
-      color: $gab-default-text-light;
-    }
-
-    input[type=radio],
-    input[type=checkbox] {
-      display: none;
-    }
-
-    .autossugest-input {
-      flex: 1 1 auto;
-    }
-
-    input[type=text] {
-      display: block;
-      box-sizing: border-box;
-      width: 100%;
-      font-size: 14px;
-      color: $inverted-text-color;
-      display: block;
-      outline: 0;
-      font-family: inherit;
-      background: $simple-background-color;
-      padding: 6px 10px;
-
-      @include border-design(darken($simple-background-color, 14%), 1px, 4px);
-
-      &:focus {
-        border-color: $highlight-text-color;
-      }
-    }
-
-    &.selectable {
-      cursor: pointer;
-    }
-
-    &.editable {
-      display: flex;
-      align-items: center;
-      overflow: visible;
-    }
-  }
-
-  &__input {
-    display: inline-block;
-    position: relative;
-    border: 1px solid $ui-primary-color;
-    box-sizing: border-box;
-    flex: 0 0 auto;
-    margin-right: 10px;
-    top: -1px;
-    vertical-align: middle;
-
-    @include circle(18px);
-
-    &--checkbox {
-      border-radius: 4px;
-    }
-
-    &--active {
-      border-color: $valid-value-color;
-      background: $valid-value-color;
-    }
-  }
-
-  &__footer {
-    color: $dark-text-color;
-
-    @include vertical-padding(6px, 5px);
-
-    span {
-      font-size: 14px;
-    }
-  }
-
-  &__link {
-    display: inline;
-    background: transparent;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    color: $dark-text-color;
-    text-decoration: underline;
-    font-size: inherit;
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    &:active,
-    &:focus {
-      background-color: rgba($dark-text-color, .1);
-    }
-  }
-
-  &__button {
-    margin-right: 10px;
-  }
-}
-
-.poll-item {
-  position: relative;
-  margin-bottom: 10px;
-  height: 30px;
-
-  &__number {
-    display: inline-block;
-    width: 36px;
-    padding: 0 10px;
-
-    @include text-sizing(14px, 700, 1, right);
-  }
-
-  &__text {
-    @include text-sizing(14px, 400);
-  }
-}
\ No newline at end of file
diff --git a/app/javascript/gabsocial/components/sidebar_section_item.js b/app/javascript/gabsocial/components/sidebar_section_item.js
index ebdee42d..22f11ba6 100644
--- a/app/javascript/gabsocial/components/sidebar_section_item.js
+++ b/app/javascript/gabsocial/components/sidebar_section_item.js
@@ -63,7 +63,7 @@ export default class SidebarSectionItem extends PureComponent {
 
     const iconClasses = cx({
       fillColorBlack: shouldShowActive,
-      fillColorSecondary: !hovering && !active,
+      fillcolorSecondary: !hovering && !active,
     })
 
     const countClasses = cx({
diff --git a/app/javascript/gabsocial/components/status/status.js b/app/javascript/gabsocial/components/status/status.js
index 1f76a5c7..6ca47db2 100644
--- a/app/javascript/gabsocial/components/status/status.js
+++ b/app/javascript/gabsocial/components/status/status.js
@@ -8,6 +8,7 @@ import classNames from 'classnames/bind'
 import { displayMedia } from '../../initial_state';
 import Card from '../../features/status/components/card';
 import { MediaGallery, Video } from '../../features/ui/util/async-components';
+import ComposeFormContainer from '../../features/compose/containers/compose_form_container'
 import Avatar from '../avatar';
 import StatusQuote from '../status_quote';
 import RelativeTimestamp from '../relative_timestamp';
@@ -496,7 +497,9 @@ class Status extends ImmutablePureComponent {
             ) */ }
 
               <StatusActionBar status={status} account={account} {...other} />
-              { /* : todo : comment bar, comments */ }
+              {/*<div className={[_s.default, _s.borderTop1PX, _s.borderColorSecondary, _s.paddingTop10PX, _s.paddingHorizontal15PX, _s.marginBottom10PX].join(' ')}>
+                <ComposeFormContainer statusId={status.get('id')} shouldCondense />
+          </div>*/}
             </div>
           </Block>
         </div>
diff --git a/app/javascript/gabsocial/components/status_action_bar.js b/app/javascript/gabsocial/components/status_action_bar.js
index e5f31dd4..3c8f300d 100644
--- a/app/javascript/gabsocial/components/status_action_bar.js
+++ b/app/javascript/gabsocial/components/status_action_bar.js
@@ -4,7 +4,6 @@ import { defineMessages, injectIntl } from 'react-intl'
 import classNames from 'classnames/bind'
 import { openModal } from '../actions/modal'
 import { me, isStaff } from '../initial_state'
-import ComposeFormContainer from '../features/compose/containers/compose_form_container'
 import Text from './text'
 import StatusActionBarItem from './status_action_bar_item'
 
@@ -229,9 +228,6 @@ class StatusActionBar extends ImmutablePureComponent {
             />
           </div>
         </div>
-        <div className={[_s.default, _s.borderTop1PX, _s.borderColorSecondary, _s.paddingTop10PX, _s.marginBottom10PX].join(' ')}>
-          { /* <ComposeFormContainer statusId={status.get('id')} shouldCondense /> */}
-        </div>
       </div>
     )
   }
diff --git a/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js b/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
index e02e4561..d2de4ccf 100644
--- a/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
+++ b/app/javascript/gabsocial/features/compose/components/compose_form/compose_form.js
@@ -349,7 +349,7 @@ class ComposeForm extends ImmutablePureComponent {
               }
               <SpoilerButton small={shouldCondense} />
               <SchedulePostDropdown small={shouldCondense} position={isModalOpen ? 'top' : undefined} />
-              <EmojiPickerButton />
+              <EmojiPickerButton small={shouldCondense} />
             </div>
             <CharacterCounter max={maxPostCharacterCount} text={text} small={shouldCondense} />
             {
diff --git a/app/javascript/gabsocial/features/compose/components/poll_form.js b/app/javascript/gabsocial/features/compose/components/poll_form.js
index cdbf6e6e..5a6050f1 100644
--- a/app/javascript/gabsocial/features/compose/components/poll_form.js
+++ b/app/javascript/gabsocial/features/compose/components/poll_form.js
@@ -100,19 +100,22 @@ class PollFormOption extends ImmutablePureComponent {
           />
         </label>
 
-        <Button
-          narrow
-          circle
-          backgroundColor='none'
-          className={[_s.marginLeft5PX, _s.justifyContentCenter].join(' ')}
-          icon='close'
-          iconWidth='8px'
-          iconHeight='8px'
-          iconClassName={_s.fillColorSecondary}
-          disabled={index <= 1}
-          title={intl.formatMessage(messages.remove_option)}
-          onClick={this.handleOptionRemove}
-        />
+        {
+          index > 1 &&
+          <Button
+            narrow
+            circle
+            backgroundColor='none'
+            className={[_s.marginLeft5PX, _s.justifyContentCenter].join(' ')}
+            icon='close'
+            iconWidth='8px'
+            iconHeight='8px'
+            iconClassName={_s.fillColorSecondary}
+            disabled={index <= 1}
+            title={intl.formatMessage(messages.remove_option)}
+            onClick={this.handleOptionRemove}
+          />
+        }
       </li>
     );
   }
diff --git a/app/javascript/gabsocial/features/compose/components/search_results/search_results.js b/app/javascript/gabsocial/features/compose/components/search_results/search_results.js
index db366004..607a16b9 100644
--- a/app/javascript/gabsocial/features/compose/components/search_results/search_results.js
+++ b/app/javascript/gabsocial/features/compose/components/search_results/search_results.js
@@ -1,40 +1,41 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage } from 'react-intl';
-import TrendingItem from '../../../../components/trends_panel_item';
-import Icon from '../../../../components/icon';
-import { WhoToFollowPanel } from '../../../../components/panel';
-// import TrendsPanel from '../../ui/components/trends_panel';
-import GroupListItem from '../../../../components/group_list_item';
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { FormattedMessage } from 'react-intl'
+import TrendingItem from '../../../../components/trends_panel_item'
+import Icon from '../../../../components/icon'
+import { WhoToFollowPanel } from '../../../../components/panel'
+// import TrendsPanel from '../../ui/components/trends_panel'
+import GroupListItem from '../../../../components/group_list_item'
+import Block from '../../../../components/block'
 
 export default class SearchResults extends ImmutablePureComponent {
 
   static propTypes = {
     results: ImmutablePropTypes.map.isRequired,
     location: PropTypes.object,
-  };
+  }
 
   state = {
     isSmallScreen: (window.innerWidth <= 895),
   }
 
   render () {
-    const { results, location } = this.props;
-    const { isSmallScreen } = this.state;
+    const { results, location } = this.props
+    const { isSmallScreen } = this.state
 
     if (results.isEmpty() && isSmallScreen) {
       return (
         <div className='search-results'>
           <WhoToFollowPanel />
         </div>
-      );
+      )
     }
 
-    const pathname = location.pathname || '';
-    const showPeople = pathname === '/search/people';
-    const showHashtags = pathname === '/search/hashtags';
-    const showGroups = pathname === '/search/groups';
-    const isTop = !showPeople && !showHashtags && !showGroups;
+    const pathname = location.pathname || ''
+    const showPeople = pathname === '/search/people'
+    const showHashtags = pathname === '/search/hashtags'
+    const showGroups = pathname === '/search/groups'
+    const isTop = !showPeople && !showHashtags && !showGroups
 
     let accounts, statuses, hashtags, groups;
     let count = 0;
@@ -73,7 +74,7 @@ export default class SearchResults extends ImmutablePureComponent {
     }
 
     return (
-      <div className='search-results'>
+      <Block>
         <div className='search-results__header'>
           <Icon id='search' fixedWidth />
           <FormattedMessage
@@ -89,8 +90,8 @@ export default class SearchResults extends ImmutablePureComponent {
         {groups}
         {statuses}
         {hashtags}
-      </div>
-    );
+      </Block>
+    )
   }
 
 }
diff --git a/app/javascript/styles/gabsocial/polls.scss b/app/javascript/styles/gabsocial/polls.scss
deleted file mode 100644
index 6c6a9305..00000000
--- a/app/javascript/styles/gabsocial/polls.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-.compose-form__poll-wrapper {
-  border-top: 1px solid darken($simple-background-color, 8%);
-
-  ul {
-    padding: 10px;
-  }
-
-  .poll__footer {
-    border-top: 1px solid darken($simple-background-color, 8%);
-    padding: 10px;
-    display: flex;
-    align-items: center;
-
-    button,
-    select {
-      flex: 1 1 50%;
-    }
-  }
-
-  .button.button--secondary {
-    padding: 6px 10px;
-    height: auto;
-    color: $action-button-color;
-    border-color: $action-button-color;
-    margin-right: 5px;
-
-    @include text-sizing(14px, 400, inherit);
-  }
-
-  li {
-    display: flex;
-    align-items: center;
-
-    .poll__text {
-      flex: 0 0 auto;
-      width: calc(100% - (23px + 6px));
-      margin-right: 6px;
-    }
-  }
-
-  select {
-    appearance: none;
-    box-sizing: border-box;
-    font-size: 14px;
-    color: $inverted-text-color;
-    display: inline-block;
-    width: auto;
-    outline: 0;
-    font-family: inherit;
-    background: $simple-background-color url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>") no-repeat right 8px center / auto 16px;
-    padding: 6px 30px 6px 10px;
-
-    @include border-design(darken($simple-background-color, 14%), 1px, 4px);
-  }
-
-  .icon-button.disabled {
-    color: darken($simple-background-color, 14%);
-  }
-}
-
-.muted .poll {
-  color: $dark-text-color;
-
-  &__chart {
-    background: rgba(darken($ui-primary-color, 14%), 0.2);
-
-    &.leading {
-      background: rgba($ui-highlight-color, 0.2);
-    }
-  }
-}
\ No newline at end of file
diff --git a/package.json b/package.json
index 5be22b49..d9274428 100644
--- a/package.json
+++ b/package.json
@@ -129,6 +129,7 @@
     "punycode": "^2.1.0",
     "rails-ujs": "^5.2.3",
     "react": "^16.12.0",
+    "react-contenteditable": "^3.3.3",
     "react-datepicker": "^2.9.6",
     "react-dom": "^16.7.0",
     "react-hotkeys": "^1.1.4",
@@ -155,6 +156,7 @@
     "requestidlecallback": "^0.3.0",
     "reselect": "^4.0.0",
     "rimraf": "^2.6.3",
+    "sanitize-html": "^1.22.0",
     "sass": "^1.20.3",
     "sass-loader": "^7.0.3",
     "sass-resources-loader": "^2.0.1",
diff --git a/yarn.lock b/yarn.lock
index 44c5e726..82611ca5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5216,6 +5216,14 @@ dom-serializer@0:
     domelementtype "^2.0.1"
     entities "^2.0.0"
 
+dom-serializer@^0.2.1:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
+  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
+  dependencies:
+    domelementtype "^2.0.1"
+    entities "^2.0.0"
+
 dom-serializer@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0"
@@ -5258,6 +5266,13 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
+domhandler@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.0.0.tgz#51cd13efca31da95bbb0c5bee3a48300e333b3e9"
+  integrity sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw==
+  dependencies:
+    domelementtype "^2.0.1"
+
 domutils@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
@@ -5274,6 +5289,15 @@ domutils@^1.5.1, domutils@^1.7.0:
     dom-serializer "0"
     domelementtype "1"
 
+domutils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.0.0.tgz#15b8278e37bfa8468d157478c58c367718133c08"
+  integrity sha512-n5SelJ1axbO636c2yUtOGia/IcJtVtlhQbFiVDBZHKV5ReJO1ViX7sFEemtuyoAnBxk5meNSYgA8V4s0271efg==
+  dependencies:
+    dom-serializer "^0.2.1"
+    domelementtype "^2.0.1"
+    domhandler "^3.0.0"
+
 dot-case@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.3.tgz#21d3b52efaaba2ea5fda875bb1aa8124521cf4aa"
@@ -6992,6 +7016,16 @@ htmlparser2@^3.3.0, htmlparser2@^3.9.1:
     inherits "^2.0.1"
     readable-stream "^3.1.1"
 
+htmlparser2@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-4.1.0.tgz#9a4ef161f2e4625ebf7dfbe6c0a2f52d18a59e78"
+  integrity sha512-4zDq1a1zhE4gQso/c5LP1OtrhYTncXNSpvJYtWJBtXAETPlMfi3IFNjGuQbYLuVY4ZR0QMqRVvo4Pdy9KLyP8Q==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^3.0.0"
+    domutils "^2.0.0"
+    entities "^2.0.0"
+
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
@@ -8662,6 +8696,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -8677,6 +8716,11 @@ lodash.escape@^4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
   integrity sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=
 
+lodash.escaperegexp@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz#64762c48618082518ac3df4ccf5d5886dae20347"
+  integrity sha1-ZHYsSGGAglGKw99Mz11YhtriA0c=
+
 lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
@@ -8707,11 +8751,26 @@ lodash.isobject@^3.0.2:
   resolved "https://registry.yarnpkg.com/lodash.isobject/-/lodash.isobject-3.0.2.tgz#3c8fb8d5b5bf4bf90ae06e14f2a530a4ed935e1d"
   integrity sha1-PI+41bW/S/kK4G4U8qUwpO2TXh0=
 
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
+
+lodash.isstring@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
+  integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.mergewith@^4.6.1:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
+  integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -10748,7 +10807,7 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.18, postcss@^7.0.5
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^7.0.16, postcss@^7.0.23, postcss@^7.0.26:
+postcss@^7.0.16, postcss@^7.0.23, postcss@^7.0.26, postcss@^7.0.27:
   version "7.0.27"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.27.tgz#cc67cdc6b0daa375105b7c424a85567345fc54d9"
   integrity sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==
@@ -10908,7 +10967,7 @@ prop-types-extra@^1.0.1:
     react-is "^16.3.2"
     warning "^3.0.0"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.1, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -11132,6 +11191,14 @@ react-clientside-effect@^1.2.2:
   dependencies:
     "@babel/runtime" "^7.0.0"
 
+react-contenteditable@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/react-contenteditable/-/react-contenteditable-3.3.3.tgz#73ea271a0e84d54516e6075c318d4372e5b95c70"
+  integrity sha512-3sOt9x6A7SzHqJgFRqKfaUnIh2tdxrdnJcE/0g1dN/g3twsqNxMxUCJGWvZUUDIQjUzqdSz6tsnGdddrPr5UNg==
+  dependencies:
+    fast-deep-equal "^2.0.1"
+    prop-types "^15.7.1"
+
 react-datepicker@^2.9.6:
   version "2.9.6"
   resolved "https://registry.yarnpkg.com/react-datepicker/-/react-datepicker-2.9.6.tgz#26190c9f71692149d0d163398aa19e08626444b1"
@@ -12156,6 +12223,22 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
+sanitize-html@^1.22.0:
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-1.22.0.tgz#9df779c53cf5755adb2322943c21c1c1dffca7bf"
+  integrity sha512-3RPo65mbTKpOAdAYWU496MSty1YbB3Y5bjwL5OclgaSSMtv65xvM7RW/EHRumzaZ1UddEJowCbSdK0xl5sAu0A==
+  dependencies:
+    chalk "^2.4.1"
+    htmlparser2 "^4.1.0"
+    lodash.clonedeep "^4.5.0"
+    lodash.escaperegexp "^4.1.2"
+    lodash.isplainobject "^4.0.6"
+    lodash.isstring "^4.0.1"
+    lodash.mergewith "^4.6.1"
+    postcss "^7.0.27"
+    srcset "^2.0.1"
+    xtend "^4.0.1"
+
 sass-graph@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49"
@@ -12697,6 +12780,11 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+srcset@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/srcset/-/srcset-2.0.1.tgz#8f842d357487eb797f413d9c309de7a5149df5ac"
+  integrity sha512-00kZI87TdRKwt+P8jj8UZxbfp7mK2ufxcIMWvhAOZNJTRROimpHeruWrGvCZneiuVDLqdyHefVp748ECTnyUBQ==
+
 sshpk@^1.7.0:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.16.1.tgz#fb661c0bef29b39db40769ee39fa70093d6f6877"
@@ -14169,7 +14257,7 @@ xml-name-validator@^3.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
   integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
-xtend@^4.0.0, xtend@~4.0.1:
+xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==