<commit_before>/*
 * Copyright (C) 2021 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

import I18n from 'i18n!discussion_posts'
import React, {useRef, useState, useEffect} from 'react'
import {Flex} from '@instructure/ui-flex'
import {Button} from '@instructure/ui-buttons'
import {View} from '@instructure/ui-view'
import {nanoid} from 'nanoid'
import PropTypes from 'prop-types'
import CanvasRce from '@canvas/rce/react/CanvasRce'
import {name as mentionsPluginName} from '@canvas/rce/plugins/canvas_mentions/plugin'

export const DiscussionEdit = props => {
  const rceRef = useRef()
  const [rceContent, setRceContent] = useState(false)
  const textAreaId = useRef(`message-body-${nanoid()}`)

  const rceMentionsIsEnabled = () => {
    return !!ENV.rce_mentions_in_discussions
  }

  const getPlugins = () => {
    const plugins = []

    // Non-Editable
    plugins.push('noneditable')

    // Mentions
    if (rceMentionsIsEnabled()) {
      plugins.push(mentionsPluginName)
    }

    return plugins
  }

  useEffect(() => {
    setRceContent(props.value)
  }, [props.value, setRceContent])

  return (
    <div
      style={{
        width: '100%',
        // props.show allows you to load an RCE without displaying it which can aleviate load times
        display: props.show ? '' : 'none'
      }}
      data-testid="DiscussionEdit-container"
    >
      <View display="block">
        <span>
          <CanvasRce
            textareaId={textAreaId.current}
            onFocus={() => {}}
            onBlur={() => {}}
            onInit={() => {
              setTimeout(() => {
                rceRef?.current?.focus()
              }, 1500)
            }}
            ref={rceRef}
            onContentChange={content => {
              setRceContent(content)
            }}
            editorOptions={{
              focus: true,
              plugins: getPlugins()
            }}
            height={300}
            defaultContent={props.replyPreview + props.value}
            mirroredAttrs={{'data-testid': 'message-body'}}
          />
        </span>
      </View>
      <Flex margin="small none none none">
        <Flex.Item shouldGrow shouldShrink textAlign="end">
          <Button
            onClick={() => {
              if (props.onCancel) {
                props.onCancel()
              }
            }}
            display="inline-block"
            color="secondary"
            data-testid="DiscussionEdit-cancel"
          >
            {I18n.t('Cancel')}
          </Button>
          <Button
            onClick={() => {
              if (props.onSubmit) {
                props.onSubmit(rceContent)
              }
            }}
            display="inline-block"
            color="primary"
            margin="none none none small"
            data-testid="DiscussionEdit-submit"
          >
            {props.isEdit ? I18n.t('Save') : I18n.t('Reply')}
          </Button>
        </Flex.Item>
      </Flex>
    </div><commit_msg>make reply/cancel buttons responsive in discussions rce<commit_after>/*
 * Copyright (C) 2021 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

import I18n from 'i18n!discussion_posts'
import React, {useRef, useState, useEffect} from 'react'
import {Flex} from '@instructure/ui-flex'
import {Button} from '@instructure/ui-buttons'
import {Responsive} from '@instructure/ui-responsive'
import {Text} from '@instructure/ui-text'
import {responsiveQuerySizes} from '../../utils'
import {View} from '@instructure/ui-view'
import {nanoid} from 'nanoid'
import PropTypes from 'prop-types'
import CanvasRce from '@canvas/rce/react/CanvasRce'
import {name as mentionsPluginName} from '@canvas/rce/plugins/canvas_mentions/plugin'

export const DiscussionEdit = props => {
  const rceRef = useRef()
  const [rceContent, setRceContent] = useState(false)
  const textAreaId = useRef(`message-body-${nanoid()}`)

  const rceMentionsIsEnabled = () => {
    return !!ENV.rce_mentions_in_discussions
  }

  const getPlugins = () => {
    const plugins = []

    // Non-Editable
    plugins.push('noneditable')

    // Mentions
    if (rceMentionsIsEnabled()) {
      plugins.push(mentionsPluginName)
    }

    return plugins
  }

  useEffect(() => {
    setRceContent(props.value)
  }, [props.value, setRceContent])

  return (
    <div
      style={{
        width: '100%',
        // props.show allows you to load an RCE without displaying it which can aleviate load times
        display: props.show ? '' : 'none'
      }}
      data-testid="DiscussionEdit-container"
    >
      <View display="block">
        <span>
          <CanvasRce
            textareaId={textAreaId.current}
            onFocus={() => {}}
            onBlur={() => {}}
            onInit={() => {
              setTimeout(() => {
                rceRef?.current?.focus()
              }, 1500)
            }}
            ref={rceRef}
            onContentChange={content => {
              setRceContent(content)
            }}
            editorOptions={{
              focus: true,
              plugins: getPlugins()
            }}
            height={300}
            defaultContent={props.replyPreview + props.value}
            mirroredAttrs={{'data-testid': 'message-body'}}
          />
        </span>
      </View>
      <Responsive
        match="media"
        query={responsiveQuerySizes({mobile: true, desktop: true})}
        props={{
          mobile: {
            direction: 'column',
            display: 'block',
            margin: 'small 0 0 0'
          },
          desktop: {
            direction: 'row',
            display: 'inline-block',
            margin: '0 0 0 small'
          }
        }}
        render={responsiveProps => (
          <Flex margin="small none none none" direction={responsiveProps.direction}>
            <Flex.Item
              shouldGrow
              shouldShrink
              textAlign="end"
              overflowY="hidden"
              overflowX="hidden"
            >
              <Button
                onClick={() => {
                  if (props.onCancel) {
                    props.onCancel()
                  }
                }}
                display={responsiveProps.display}
                color="secondary"
                data-testid="DiscussionEdit-cancel"
              >
                <Text size="medium">{I18n.t('Cancel')}</Text>
              </Button>
              <Button
                onClick={() => {
                  if (props.onSubmit) {
                    props.onSubmit(rceContent)
                  }
                }}
                display={responsiveProps.display}
                color="primary"
                margin={responsiveProps.margin}
                data-testid="DiscussionEdit-submit"
              >
                <Text size="medium">{props.isEdit ? I18n.t('Save') : I18n.t('Reply')} </Text>
              </Button>
            </Flex.Item>
          </Flex>
        )}
      />
    </div>
{'fraction_non_alphanumeric': 0.11804878048780487, 'fraction_numerical': 0.006829268292682927, 'mean_word_length': 1.9030088495575221, 'pattern_counts': {'":': 0, '<': 40, '<?xml version=': 0, '>': 63, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6545046', 'n_tokens_mistral': 2332, 'n_tokens_neox': 2242, 'n_words': 584}