index.tsx 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. /*
  2. * <<
  3. * Davinci
  4. * ==
  5. * Copyright (C) 2016 - 2017 EDP
  6. * ==
  7. * Licensed under the Apache License, Version 2.0 (the "License");
  8. * you may not use this file except in compliance with the License.
  9. * You may obtain a copy of the License at
  10. *
  11. * http://www.apache.org/licenses/LICENSE-2.0
  12. *
  13. * Unless required by applicable law or agreed to in writing, software
  14. * distributed under the License is distributed on an "AS IS" BASIS,
  15. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16. * See the License for the specific language governing permissions and
  17. * limitations under the License.
  18. * >>
  19. */
  20. import React, { useContext, useCallback, useState, useEffect } from 'react'
  21. import { useDispatch } from 'react-redux'
  22. import Toolbar from 'components/RichText/Toolbar'
  23. import { RichTextNode } from 'components/RichText'
  24. import { buildLabelBoxStyles } from 'app/containers/Display/components/Layer/RichText/util'
  25. import { onLabelEditorStylesChange } from './util'
  26. import { LayerContext } from '../util'
  27. import DisplayActions from '../../../actions'
  28. import Editor from './Editor'
  29. import Styles from './RichText.less'
  30. const LabelEditor: React.FC = () => {
  31. const dispatch = useDispatch()
  32. const {
  33. layer: {
  34. params: { richText },
  35. id: layerId,
  36. params
  37. },
  38. operationInfo
  39. } = useContext(LayerContext)
  40. const { boxStyles } = buildLabelBoxStyles(params)
  41. const editing = operationInfo?.editing
  42. const editorContent = richText.content
  43. const [value, setValue] = useState(editorContent)
  44. const editorChange = useCallback(
  45. (updatedContent: RichTextNode[]) => {
  46. if (updatedContent === editorContent) {
  47. return
  48. }
  49. setValue(updatedContent)
  50. },
  51. [editorContent]
  52. )
  53. useEffect(() => {
  54. if (!editing && typeof editing === 'boolean') {
  55. dispatch(
  56. DisplayActions.editSlideLayerParams(
  57. layerId,
  58. onLabelEditorStylesChange(['richText', 'content'], value)
  59. )
  60. )
  61. }
  62. }, [editing])
  63. return (
  64. <Editor
  65. className={Styles.editor}
  66. styles={boxStyles}
  67. value={value}
  68. toolbar={
  69. !editing ? (
  70. false
  71. ) : (
  72. <Toolbar.Toolbar>
  73. <Toolbar.Font />
  74. <Toolbar.Heading />
  75. <Toolbar.Format />
  76. <Toolbar.Alignment />
  77. <Toolbar.Link />
  78. </Toolbar.Toolbar>
  79. )
  80. }
  81. readOnly={!editing}
  82. onChange={editorChange}
  83. />
  84. )
  85. }
  86. export default LabelEditor