@startlibs/form 1.0.12 → 1.1.1

package/src/RichText.jsx

@@ -0,0 +1,812 @@
+import React, {useContext, useEffect, useRef, useState} from 'react'
+import styled, {css} from 'styled-components'
+import ContentEditable from 'react-contenteditable'
+import {darken} from 'polished'
+import _ from 'lodash/fp'
+import {getColor, linkRegex, stopPropagation} from '@startlibs/utils'
+import {StartlibsContext, useEnsureRef, useLazyConstant, useToggle, usePopupToggle, useRefState} from '@startlibs/core'
+import {Errors} from './Errors'
+import {Field} from './Field'
+import {WithForm} from './Form'
+import {TextInput} from './TextInput'
+import {useInput} from './enhanceInput'
+import {Button, Icon} from '@startlibs/components'
+
+const InputIcon = styled(Icon)`
+  position: absolute;
+  outline: none;
+  bottom: 0;
+  font-size: 21px;
+  line-height: 3rem;
+  right: 0;
+  width: 2rem;
+  pointer-events: none;
+  color: ${getColor('gray150')};
+`
+
+const FORMAT_TOOLS = {
+  'bold': ['b', 'strong'],
+  'italic': 'i',
+  'underline': 'u',
+  'strikethrough': 'strike',
+  'link': 'a',
+  'insertUnorderedList': ['ul', 'li'],
+  'insertOrderedList': ['ol', 'li'],
+  'outdent': '',
+  'indent': 'blockquote',
+  'fontSizeUp': 'font',
+  'fontSizeDown': 'font'
+}
+
+const TAG_TO_STYLE_PROPERTY = {
+  'b': 'fontWeight',
+  'strong': 'fontWeight',
+  'u': 'textDecoration',
+  'strike': 'textDecoration',
+  'font': 'fontSize',
+  'i': 'fontStyle'
+}
+
+let GET_LIMITS_FONT_SIZE_PX = () => {
+  const s = document.createElement('span')
+  s.style.fontSize = 'medium'
+  document.body.appendChild(s)
+  const fontSize = parseInt(getComputedStyle(s).fontSize)
+  document.body.removeChild(s)
+  const limits = [fontSize * 3 / 5, fontSize * 3]
+  GET_LIMITS_FONT_SIZE_PX = () => limits
+  return limits
+}
+
+const wrapWith = (el,wrapper) => {
+  el.parentNode.insertBefore(wrapper, el);
+  wrapper.appendChild(el)
+}
+
+const FIX_STYLE = {
+  'fontWeight': (v, el) => {
+    const intFontWeight = parseInt(window.getComputedStyle(el).fontWeight)
+    return intFontWeight <= 400 ? 400 : 600
+  },
+  'fontSize': (v, el) => {
+    const [min, max] = GET_LIMITS_FONT_SIZE_PX()
+    const intFontSize = parseInt(window.getComputedStyle(el).fontSize)
+    return Math.min(max, Math.max(min, intFontSize)) + 'px'
+  },
+  'textDecoration': (v,el) => {
+    const values = v.split(' ').filter(v => v === 'underline' || v === 'line-through')
+    if (values.indexOf('underline')>=0) {
+      wrapWith(el,document.createElement('u'))
+    }
+    if (values.indexOf('line-through')>=0) {
+      wrapWith(el,document.createElement('strike'))
+    }
+    return ''
+  }
+}
+
+export const RichTextContainer = styled.div`
+  position:relative;
+  width: 100%;
+  border: 1px solid ${getColor('gray210')};
+  border-radius: 8px;
+  background: white;
+  ${props => props.hasErrors && `border-color: ${getColor(props)('alert')}`};
+  ${props => props.showToolbar && `
+    ${ToolsContainer} {
+      transition: 0.5s;
+      max-height: 7.5rem;
+      transition: 0.6s;
+      pointer-events: auto;
+    }
+  `};
+  ${props => props.focus && `
+    border-color: ${getColor('gray180')};
+    box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
+  `}
+  ${props => props.locked && css`
+    padding-right: 2.25rem;
+    background: rgba(0,0,0,0.075);
+  `}
+  ${props => props.linkColor && css`
+    a, a:visited, a:focus, a:active {
+      color: ${props.linkColor};
+    }
+    a:hover {
+      color: ${darken(0.05, props.linkColor)};
+    }
+  `}
+  ul {
+    list-style-type: disc;
+  }
+  ul, ol {
+    padding-inline-start: 25px;
+    margin-block-start: 0.5em;
+    margin-block-end: 0.5em;
+  }
+`
+
+export const RichTextInput = styled.div`
+  font-size: 14px;
+  color: ${getColor('gray60')};
+  background: white;
+  border-radius: 7px;
+  > div {
+    overflow: auto;
+    width: 100%;
+    outline: none;
+    min-height: ${props=>props.minHeight || 60}px;
+    padding: 0.7rem;
+  }
+  b, strong {
+    font-weight: 600;
+  }
+  a {
+    text-decoration: underline;
+  }
+  > div[contenteditable=true]:empty:before {
+    content: attr(placeholder);
+    color: rgba(0,0,0,0.3);
+  }
+  ${props => props.disabled && `
+    &[disabled] {
+      background: rgba(0, 0, 0, 0.075) !important;
+      opacity: 0.75 !important;
+    }
+  `}
+`
+
+const ToolsContainer = styled.div`
+  background: ${getColor('lightBluishGray')};
+  padding: 0 0.125rem;
+  border-top-left-radius: 7px;
+  border-top-right-radius: 7px;
+  transition: 0.225s;
+  max-height: 0;
+  pointer-events: none;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+`
+
+const ToolButton = styled(Button)`
+    min-height: 2rem;
+    min-width: 2rem;
+    background: transparent;
+    box-shadow: none;
+    margin: 0.25rem 0.125rem;
+    & ~ & {
+      margin-left: 0.125rem;
+    }
+    .icon {
+      font-size: 23px;
+      color: ${getColor('gray90')};
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      -webkit-transform: translate(-50%,-50%);
+              transform: translate(-50%,-50%);
+    }
+    &:hover, &.activated:hover {
+      background: rgba(0,0,0,0.11);
+    }
+    &.activated {
+      background: rgba(0,0,0,0.09);
+    }
+    &:focus:after {
+      content: none;
+    }
+`
+
+const ToolSeparator = styled.span`
+    border-left: 1px solid rgba(0,0,0,0.1);
+    margin-left: 0.75rem;
+    margin-right: 0.5rem;
+    height: 1.5rem;
+`
+
+const JS_CLASS = "EDITOR--JS"
+
+const getNextRegularCharIndex = (text, offset, direction) => {
+  const regex = /[A-Za-z0-9ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏàáâãäåæçèéêëìíîïÐÑÒÓÔÕÖØÙÚÛÜÝÞßðñòóôõöøùúûüýþÿ]/g
+  let cursor = offset
+  while ((text[cursor + direction] || '').match(regex)) {
+    cursor += direction
+  }
+  return cursor
+}
+
+const addHttp = (s) => {
+  s = s.replace(/^\s/, '')
+  if (s.indexOf('http://') === 0 || s.indexOf('https://') === 0) {
+    return s
+  } else {
+    return 'http://' + s
+  }
+}
+
+const getRightMostElement = (node) => {
+  if (node.childNodes.length) {
+    return getRightMostElement(node.childNodes[node.childNodes.length - 1])
+  } else {
+    return node
+  }
+}
+
+const setSelectionRange = (input, selectionStart, selectionEnd = 0) => {
+  if (!input) return
+  let range = document.createRange()
+  let sel = window.getSelection()
+  range.setStart(input, selectionStart)
+  if (selectionEnd) {
+    range.setEnd(input, selectionEnd)
+  } else {
+    range.collapse(true)
+  }
+  sel.removeAllRanges()
+  sel.addRange(range)
+}
+
+const cleanEditor = (editor, acceptedTags) => {
+  Array.prototype.slice.call(editor.querySelectorAll('.Apple-interchange-newline')).forEach(el => el.remove())
+  Array.prototype.slice.call(editor.querySelectorAll('iframe')).forEach(el => el.remove())
+
+  const acceptedStyles = acceptedTags.map(t => TAG_TO_STYLE_PROPERTY[t]).filter(_.identity)
+
+  const newSpace = document.createTextNode('\u00A0')
+  if (window.getSelection().rangeCount) {
+  const container = window.getSelection().getRangeAt(0).startContainer
+  if (container.nodeType === 3) {
+    container.parentNode.insertBefore(newSpace, container.nextSibling)
+  } else {
+    container.appendChild(newSpace)
+  }
+    if (newSpace.previousSibling && newSpace.previousSibling.textContent === '\u00A0') {
+      newSpace.previousSibling.remove()
+  }
+  setSelectionRange(newSpace, 0)
+  }
+
+  const clean = (children) => {
+    Array.prototype.slice.call(children).forEach(el => {
+      try {
+      if (el.nodeType === 3)
+        return
+      if (!el.tagName) {
+        el.remove()
+        return
+      }
+      let tagName = el.tagName.toLowerCase()
+      const style = getComputedStyle(el)
+      const rect = el.getBoundingClientRect()
+      const isHidden = style.display === 'none' || rect.width === 0 || rect.height === 0
+      if (isHidden && (el.children && !el.children.length) && tagName !== 'br') {
+        el.remove()
+      } else if (acceptedTags.indexOf(tagName) >= 0) {
+        clean(el.childNodes)
+        el.removeAttribute('class')
+          if (tagName === 'a') {
+            el.setAttribute('target', '_blank')
+          }
+          if (el.getAttribute('style')) {
+            const usedStyles = _.toPairs(_.pick(acceptedStyles, el.style)).filter(([k, v]) => v !== "")
+            const fixedStyle = _.fromPairs(usedStyles.map(([k, v]) => [k, (FIX_STYLE[k] || _.identity)(v, el)]))
+        el.removeAttribute('style')
+            Object.assign(el.style, fixedStyle)
+          }
+      } else if (tagName === 'a') {
+        clean(el.childNodes)
+        if (el.textContent !== el.href || el.textContent.length < 5)
+          el.outerHTML = el.innerHTML
+      } else {
+        clean(el.childNodes)
+        if (el.hasChildNodes()) {
+          const newTagName = style.display === 'inline' ? 'span' : 'div'
+          const newEl = document.createElement(newTagName)
+          Array.prototype.slice.call(el.childNodes).forEach(child => newEl.appendChild(child))
+          el.parentNode.replaceChild(newEl, el)
+        } else {
+          el.remove()
+        }
+        }
+      } catch (e) {
+        if (el && el.remove)
+          el.remove()
+      }
+    })
+  }
+  clean(editor.childNodes)
+}
+
+const insertToken = (node, offset) => {
+  const parent = node.parentNode
+  const token = document.createElement("span")
+  if (node.nodeType === Node.TEXT_NODE) {
+    const splitted = node.splitText(offset)
+    parent.insertBefore(token, splitted)
+  } else {
+    parent.insertBefore(token, node)
+  }
+  return token
+}
+
+/*
+* pagely reformat
+ .replace(/^[a-z]/, function (e) {
+      return e.toUpperCase()
+    })
+* */
+
+const parseAndExecCommand = (c) => {
+  if (c === "strikethrough" || c === "underline") {
+    document.execCommand('styleWithCSS', false, false)
+  } else {
+    document.execCommand('styleWithCSS', false, true)
+  }
+  if (c.indexOf('fontSize') === 0) {
+    const direction = c.indexOf('Up') > 0 ? 1 : -1
+    const newValue = Math.min(7, Math.max(1, parseInt(document.queryCommandValue('fontSize') || 3) + direction))
+    document.execCommand('fontSize', false, newValue)
+  } else {
+    const sanitizedCommand = (c.indexOf("List") >= 0 && document.queryCommandState(c)) ? 'outdent' : c // FIX CHROME HANGS when list is called and already active
+
+    document.execCommand(sanitizedCommand)
+  }
+}
+
+export const RichText = ({path, inputRef, label, autoHideToolbar, autoFocus, disabled, minHeight, placeholder, className, formatTools = ['bold', 'italic', 'underline', 'strikethrough', 'separator', 'link'], reformatText = _.identity, mandatory, descText, helpText, linkColor, tabIndex = 1, value, setValue,raw, locked}) => {
+
+  const linkPopup = usePopupToggle()
+
+  const input = useEnsureRef(inputRef)
+  const activeLinkNode = useRef()
+  const container = useRef()
+  const linkJustCreated = useRefState()
+
+  // auto-hide needs
+  const startSelectionToken = useRefState()
+  const endSelectionToken = useRefState()
+  const commands = useRefState([])
+  const containerFocused = useToggle()
+
+  const needsNormalize = useRefState()
+  const alreadyCancelled = useRefState()
+
+  // const [formValue, setFormValue] = useInput({path})
+  const [formValue, _setFormValue, {hasErrors}] = useInput({path,value,setValue},raw)
+
+  // const tempValue = useConstant(formValue)
+  const tempValue = useRef(formValue)
+  const setFormValue = (v) => {
+    tempValue.current = v
+    _setFormValue(v)
+  }
+
+  useEffect(() => {
+    if((value === formValue) && (formValue !== tempValue)){
+      tempValue.current = formValue
+    }
+  },[path])
+
+  const [activatedTools, setActivatedTools] = useState({})
+
+  const validElements = useLazyConstant(() => ['br', 'div', 'p', 'span'].concat(_.flatten(formatTools.map(tool => FORMAT_TOOLS[tool] || []))))
+
+  useEffect(() => {
+    cleanEditor(input.current, validElements)
+  }, [])
+
+  const focus = () => input.current && input.current.focus()
+
+  // Foco inicial opcional (ex.: abrir a dialog já no campo de descrição). Em
+  // rAF pra rodar depois que a dialog termina de montar e não perder o foco.
+  useEffect(() => {
+    if (autoFocus) {
+      requestAnimationFrame(focus)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (needsNormalize.get()) {
+      input.current.normalize()
+      needsNormalize.set(false)
+    }
+  })
+
+  const triggerScrollForPanel = (d) => {
+    requestAnimationFrame((time) => {
+        if (time > d + 250) return
+        window.dispatchEvent(new Event('scroll'))
+        triggerScrollForPanel(d)
+      }
+    )
+  }
+
+  const containerFocus = () => {
+    containerFocused.openWith(2)
+    triggerScrollForPanel(Date.now())
+  }
+
+  const containerBlur = (e) => {
+    if (containerFocused.isOpen !== 1) {
+      containerFocused.close()
+      triggerScrollForPanel(Date.now())
+    }
+  }
+
+
+  const onBlur = (e) => {
+    const newValue = input.current.textContent.length === 0 ? '' : input.current.innerHTML
+    // Só reescreve se o conteúdo mudou de fato: focar/desfocar sem editar não pode
+    // marcar o form como alterado (senão dispara a confirmação de descarte à toa).
+    // textContent vazio equivale a valor ausente/'' do form.
+    if (newValue !== (formValue || '')) {
+      setFormValue(newValue)
+    }
+  }
+
+  const keydownHandler = (e) => {
+    if (containerFocused.isOpen === 2){
+      if (formatTools.indexOf('link') < 0) {
+        return
+      }
+      if((e.key === "k" && e.ctrlKey) || (e.key === "k" && e.metaKey)){
+        e.preventDefault();
+        execCommand(null,'link')
+      }
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener('keydown',keydownHandler);
+    return () => document.removeEventListener('keydown',keydownHandler);
+  }, [containerFocused.isOpen])
+
+  const execCommand = (e, command) => {
+    if (command === 'link') {
+      let nodeEl
+      if (!isSelectionInsideRichTextEditor()) {
+        let anchor = document.createElement('a')
+        anchor.innerHTML = '&#8203;'
+        input.current.appendChild(anchor)
+        nodeEl = anchor
+      } else {
+        const range = window.getSelection().getRangeAt(0)
+        const selectedNode = range.startContainer
+        if (range.collapsed) {
+          const start = getNextRegularCharIndex(selectedNode.textContent, range.startOffset, -1)
+          const end = getNextRegularCharIndex(selectedNode.textContent, range.startOffset - 1, 1)
+          if (start < range.startOffset && end > range.startOffset - 1) {
+            range.setStart(selectedNode, start)
+            range.setEnd(selectedNode, end + 1)
+          }
+        }
+        const selectedEl = selectedNode.nodeType === Node.TEXT_NODE ? selectedNode.parentNode : selectedNode
+        const parent = selectedEl.closest('a,.'+JS_CLASS)
+        if (parent && parent.matches('a')) {
+          nodeEl = parent
+        } else {
+          let anchor = document.createElement('a')
+          anchor.innerHTML = '&#8203;'
+          if (range.collapsed) {
+            range.insertNode(anchor)
+          } else {
+            if (range.commonAncestorContainer === input.current) {
+              range.setStart(range.endContainer,0)
+            }
+            document.execCommand('createLink', false, '_')
+            anchor = window.getSelection().anchorNode
+          }
+          const parent = range.commonAncestorContainer.nodeType === 3 ? range.commonAncestorContainer.parentNode : range.commonAncestorContainer
+          const links = parent.querySelectorAll("a[href='_']")
+          Array.from(links).slice(0,-1).forEach(removeLinkFromNode)
+          nodeEl = _.last(links)
+          nodeEl.setAttribute('href', ' ')
+        }
+      }
+      tempValue.current = input.current.innerHTML
+      openDialog(nodeEl)
+    } else {
+      if (!isSelectionInsideRichTextEditor()) {
+        input.current.focus()
+        const last = document.createTreeWalker(input.current, NodeFilter.SHOW_TEXT).lastChild()
+        const range = document.createRange()
+        range.selectNodeContents(last || input.current)
+        range.collapse(false)
+        const sel = window.getSelection()
+        sel.removeAllRanges()
+        sel.addRange(range)
+      }
+      document.execCommand(command)
+      setFormValue(input.current.innerHTML)
+      toggleButtonsState()
+      focus()
+    }
+  }
+
+  const isSelectionInsideRichTextEditor = () => {
+    const range = window.getSelection().getRangeAt(0)
+    if (!range) return false
+    const el = range.startContainer
+    if (!el) return false
+    const node = el.closest ? el : (el.parentNode || document.body)
+    return node.closest('.'+JS_CLASS) === input.current
+  }
+
+
+  const saveRichTextLink = ({linkUrl, linkText}) => {
+    const currentActiveLinkNode = activeLinkNode.current
+    currentActiveLinkNode.setAttribute('href', addHttp(linkUrl))
+    currentActiveLinkNode.setAttribute('target', '_blank')
+    if (currentActiveLinkNode.textContent !== linkText) {
+      currentActiveLinkNode.innerText = linkText
+    }
+    linkPopup.close()
+    setSelectionRange(currentActiveLinkNode.lastChild, currentActiveLinkNode.textContent.length, 0)
+    focus()
+    setFormValue(input.current.innerHTML)
+  }
+
+  const cancelRichTextLink = (e) => {
+    if (alreadyCancelled.get()) return
+    const currentActiveLinkNode = activeLinkNode.current
+    const span = document.createElement('span')
+    if (currentActiveLinkNode.nextSibling)
+      (currentActiveLinkNode.parentNode).insertBefore(span, currentActiveLinkNode.nextSibling)
+    else
+      (currentActiveLinkNode.parentNode).append(span)
+    setSelectionRange(span, 0, 0)
+    focus()
+    if (currentActiveLinkNode.getAttribute('href') === ' ') {
+      removeLink(e)
+    }
+    alreadyCancelled.set(true)
+    span.remove()
+    if (input.current) {
+      input.current.normalize()
+    } else {
+      needsNormalize.set(true)
+    }
+    linkPopup.close()
+  }
+
+  const handleKeyUp = (e) => {
+    toggleButtonsState()
+    setFormValue(reformatText(input.current.innerHTML))
+  }
+
+  const handleKeyDown = (e) => {
+    /*if (linkJustCreated.current && e.which === 8) {
+       linkJustCreated.current.outerHTML = linkJustCreated.current.innerHTML
+       input.current.normalize()
+       return
+     }
+    commands.set([])
+     linkJustCreated.set(null)
+     const selectedRange = window.getSelection().getRangeAt(0)
+     if (!selectedRange) return
+     const possibleTextNode = selectedRange.startContainer
+     const node = possibleTextNode.nodeType === Node.TEXT_NODE ? possibleTextNode.parentNode : possibleTextNode
+    const parent = node.closest('a,.'+JS_CLASS)
+    if ((e.key === 'Enter' || e.which === 32) && parent && parent.matches('.'+JS_CLASS)) {
+       const range = document.createRange()
+       range.setEnd(selectedRange.startContainer, selectedRange.startOffset)
+       range.setStart(selectedRange.startContainer, 0)
+       traverseAndAddLink(range)
+    }*/
+  }
+
+  const traverseAndAddLink = (range) => {
+    const match = range.toString().match(/[\s\t\n\r]([^\s\t\n\r]*)$/)
+    if (match) {
+      if ((/^(https?:\/\/|www\.)/).test(match[1]) && linkRegex.test(match[1])) {
+        range.setStart(range.startContainer, (match).index + 1);
+        (range.endContainer).splitText(range.endContainer.textContent.length - 1)
+        const newNode = document.createElement('a')
+        newNode.href = match[1]
+        newNode.appendChild(range.extractContents())
+        range.insertNode(newNode)
+        window.getSelection().getRangeAt(0).setEndAfter(newNode)
+        window.getSelection().getRangeAt(0).setStartAfter(newNode)
+        linkJustCreated.set(newNode)
+      }
+    } else {
+      const previous = getPreviousElement(range.startContainer)
+      if (previous) {
+        range.setStart(previous, 0)
+        traverseAndAddLink(range)
+      }
+    }
+  }
+
+  const getPreviousElement = (node) => {
+    if (node.previousSibling) {
+      const rightMost = getRightMostElement(node.previousSibling)
+      if (rightMost.nodeType === Node.TEXT_NODE) {
+        return rightMost
+      } else {
+        return getPreviousElement(rightMost)
+      }
+    } else if (node.parentNode && node !== input.current) {
+      return getPreviousElement(node.parentNode)
+    } else {
+      return null
+    }
+  }
+
+  const handlePasteDrop = (e) => setTimeout(() => pasted(e), 1)
+
+  const handleClick = (e) => {
+    toggleButtonsState()
+    const el = e.target.closest('a,.'+JS_CLASS)
+    if (el && el.matches('a') && el.getAttribute('href')) {
+      openDialog(el)
+    }
+  }
+
+  const openDialog = (el) => {
+    activeLinkNode.current = el
+    alreadyCancelled.set(false)
+    linkPopup.openWith({linkText: el.textContent, linkUrl: (el.getAttribute('href') || '').trim()})
+  }
+
+
+  const removeLinkFromNode = (node) => {
+    node.outerHTML = node.innerHTML === '\u200b' ? '' : node.innerHTML
+  }
+
+  const removeLink = (e) => {
+    if (e) e.preventDefault()
+    alreadyCancelled.set(true)
+    removeLinkFromNode(activeLinkNode.current)
+    linkPopup.close()
+    if (input.current) {
+      setFormValue(input.current.innerHTML)
+      input.current.normalize()
+    }
+  }
+
+  const pasted = (e) => {
+    cleanEditor(input.current, validElements)
+  }
+
+  const toggleButtonsState = () => {
+    return setActivatedTools(_.zipObject(formatTools,formatTools.map((t)=>window.document.queryCommandState(t))))
+  }
+
+  const toolButton = (tool) => <ToolButton
+    key={tool}
+    tabIndex={-1}
+    onClick={(e) => execCommand(e, tool)}
+    className={'button exec-command rich-text-button only-icon ' + (activatedTools[tool] ? 'activated' : '')}
+    type="button"
+  >
+    <span className={'icon icon-' + tool}/>
+  </ToolButton>
+
+  const richTextElement = <RichTextContainer
+    linkColor={linkColor}
+    ref={container}
+    onFocus={containerFocus}
+    onBlur={containerBlur}
+    focus={containerFocused.isOpen}
+    showToolbar={!disabled & !autoHideToolbar || containerFocused.isOpen}
+    className={className}
+  >
+    <ToolsContainer className="rich-text-tools">
+      {formatTools.map((t, i) => t === 'separator' ? <ToolSeparator className="separator"
+                                                                    key={"separator-" + i}/> : toolButton(t))}
+    </ToolsContainer>
+    <RichTextInput>
+      <ContentEditable
+        className={JS_CLASS}
+        innerRef={input}
+        html={tempValue.current || ""}
+        onBlur={onBlur}
+        onClick={handleClick}
+        onKeyUp={handleKeyUp}
+        onKeyDown={handleKeyDown}
+        onPaste={handlePasteDrop}
+        onDrop={handlePasteDrop}
+        tabIndex={tabIndex}
+        disabled={disabled}
+        minHeight={minHeight}
+        placeholder={placeholder}
+      />
+    </RichTextInput>
+    {locked && <InputIcon icon="lock"/>}
+    {
+      linkPopup.isOpen &&
+      <EditLinkPopup
+        input={input}
+        activeLinkNode={activeLinkNode}
+        cancel={cancelRichTextLink}
+        values={linkPopup.isOpen}
+        removeLink={removeLink}
+        saveLink={saveRichTextLink}
+      />
+    }
+  </RichTextContainer>
+  return (label
+      ? <Field labelClick={focus} descText={descText} helpText={helpText} label={label} mandatory={mandatory}>
+      {richTextElement}
+    </Field>
+      : richTextElement
+  )
+}
+
+const EditLinkPopup = ({cancel, removeLink, activeLinkNode, input, saveLink, values}) => {
+  const linkPopup = useRef()
+  const formRef = useRef()
+  const linkTextRef = useRef()
+  const linkUrlRef = useRef()
+  const LABELS = useContext(StartlibsContext).labels.RichText
+
+
+  const preValidation = (formValues) => {
+    let errors
+    if (!formValues.linkText) {
+      errors = {'linkText': [LABELS.linkTextError]}
+    }
+    if (!formValues.linkUrl || formValues.linkUrl === ' ' || !linkRegex.test(formValues.linkUrl.trim())) {
+      errors = {...errors, 'linkUrl': [LABELS.linkUrlError]}
+    }
+    return errors
+  }
+
+  const checkEscOrEnter = (e) => {
+    if (e.keyCode === 27) {
+      e.stopPropagation()
+      cancel(e)
+    } else if (e.keyCode === 13) {
+      e.preventDefault()
+      e.stopPropagation()
+      formRef.current.submitForm()
+    }
+  }
+
+  useEffect(() => {
+    const currentActiveLinkNode = activeLinkNode.current
+    const currentLinkPopup = linkPopup.current
+    const offsetLeft = currentActiveLinkNode.getClientRects().length > 1 ? input.offsetLeft : currentActiveLinkNode.offsetLeft
+    const left = ((currentActiveLinkNode.offsetWidth) / 2) - (currentLinkPopup.offsetWidth / 2) + offsetLeft
+    const top = (currentActiveLinkNode.offsetHeight) + currentActiveLinkNode.offsetTop
+    Object.assign(currentLinkPopup.style, {
+      'position': 'absolute',
+      'left': left + 'px',
+      'top': top + 'px'
+    })
+    if (values.linkText) {
+      linkUrlRef.current.focus()
+    } else {
+      linkTextRef.current.focus()
+    }
+    return cancel
+  }, [])
+
+  return <WithForm skipDom ref={formRef} action={saveLink} values={values} preValidation={preValidation}>{form =>
+    <div onClick={stopPropagation()} ref={linkPopup} onKeyDown={checkEscOrEnter}
+      className="popup rich-text-link-editor ignore-link" contentEditable={false}>
+      <TextInput
+        ref={linkTextRef}
+        mandatory
+        path="linkText"
+        label={LABELS.popupLinkText}
+      />
+      <TextInput
+        ref={linkUrlRef}
+        mandatory
+        path="linkUrl"
+        label={LABELS.popupLinkUrl}
+      />
+      <div className="popup-footer">
+        <Button className="remove-link" icon="remove" onClick={removeLink}>
+          {LABELS.popupRemove}
+        </Button>
+        <Button onClick={cancel} tabIndex={0}>{LABELS.popupCancel}</Button>
+        <Button highlight onClick={form.willSubmitForm}>{LABELS.popupConfirm}</Button>
+      </div>
+      <Errors/>
+    </div>
+  }</WithForm>
+}