# All files / src/TextEditorOutput TextEditorOutput.tsx

100% Statements 10/10
100% Branches 0/0
100% Functions 1/1
100% Lines 8/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    477x
    7x
    7x

    7x

    7x

    3x
    3x

    7x
     import { Editor } from '@tinymce/tinymce-react'
    import React from 'react'
    import {
      generateExternalPlugins,
      tinyMCEConfig,
      tinyMCESource,
      tinyMCEVersion,
    } from '../_utils/TinyMCE'
    import { DivAttributes } from '../_utils/types'
    import { StyledEditor } from './TextEditorOutput.styles'
    import { TextEditorOutputProps } from './TextEditorOutput.types'

    /**

     We use TextEditorOutput to render formatted text.

     @since 10.24.0

     @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-texteditoroutput--demo)

     */
    export const TextEditorOutput = React.forwardRef<
      HTMLDivElement,
      TextEditorOutputProps & DivAttributes
    >(function TextEditorOutput({ value, init: initOverrides, ...props }, ref) {
      return (
        <StyledEditor {...props} ref={ref}>
          <Editor
            value={value}
            init={{
              ...tinyMCEConfig,
              external_plugins: generateExternalPlugins(['autoresize']),
              toolbar: false,
              autoresize_overflow_padding: 0,
              min_height: 0,
              content_style: `body { margin: 0; padding: 0; } p { margin: 0; }`,
              ...initOverrides,
            }}
            tinymceScriptSrc={`${tinyMCESource}/${tinyMCEVersion}/tinymce.min.js`}
            disabled
          />
        </StyledEditor>
      )
    })

    TextEditorOutput.displayName = 'TextEditorOutput'