@startlibs/form 1.1.3 → 1.2.0-rc.2

package/lib-yak/RichText.mjs

@@ -0,0 +1,776 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _zipObject from 'lodash/fp/zipObject';
+import _last from 'lodash/fp/last';
+import _flatten from 'lodash/fp/flatten';
+import _fromPairs from 'lodash/fp/fromPairs';
+import _pick from 'lodash/fp/pick';
+import _toPairs from 'lodash/fp/toPairs';
+import _identity from 'lodash/fp/identity';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React, { useRef, useEffect, useState, useContext } from 'react';
+import { styled, css } from '@yak/react';
+import ContentEditableModule from 'react-contenteditable';
+import { darken } from 'polished';
+import { getColor, stopPropagation, linkRegex } from '@startlibs/utils';
+import { usePopupToggle, useEnsureRef, useRefState, useToggle, useLazyConstant, StartlibsContext } from '@startlibs/core';
+import { Errors } from './Errors.mjs';
+import { Field } from './Field.mjs';
+import { WithForm } from './Form.mjs';
+import { TextInput } from './TextInput.mjs';
+import { useInput } from './enhanceInput.mjs';
+import { Icon, Button } from '@startlibs/components';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+
+// Node/esbuild interop em .mjs devolve module.exports; Rollup devolve o default. Cobre os dois.
+const ContentEditable = ContentEditableModule.default || ContentEditableModule;
+const InputIcon = styled(Icon)`
+  position: absolute;
+  outline: none;
+  bottom: 0;
+  font-size: 21px;
+  line-height: 3rem;
+  right: 0;
+  width: 2rem;
+  pointer-events: none;
+  color: ${__yakProps => {
+  const v = getColor('gray150');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+`;
+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 '';
+  }
+};
+
+// Precisa vir antes de RichTextContainer: o yak resolve `${ToolsContainer}` (seletor dentro de
+// props.showToolbar) estaticamente lendo o módulo de cima pra baixo — em tempo de execução
+// (sc) a ordem nunca importou, já que o template só lê ToolsContainer dentro de um callback
+// (props => ...), chamado bem depois do módulo inteiro já ter sido avaliado.
+const ToolsContainer = styled(yakDomTag("div"))`
+  background: ${__yakProps => {
+  const v = getColor('lightBluishGray');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  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 RichTextContainer = styled(yakDomTag("div")).attrs({
+  className: "styled-rich-text-container"
+})`
+  position:relative;
+  width: 100%;
+  border: 1px solid ${__yakProps => {
+  const v = getColor('gray210');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  border-radius: 8px;
+  background: white;
+  ${props => props.hasErrors && css`border-color: ${__yakProps => {
+  const v = getColor(props)('alert');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}}`};
+  ${props => props.showToolbar && css`
+    ${ToolsContainer} {
+      transition: 0.5s;
+      max-height: 7.5rem;
+      transition: 0.6s;
+      pointer-events: auto;
+    }
+  `};
+  ${props => props.focus && css`
+    border-color: ${__yakProps => {
+  const v = getColor('gray180');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    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: ${__yakProps => {
+  const v = props.linkColor;
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    }
+    a:hover {
+      color: ${__yakProps => {
+  const v = darken(0.05, props.linkColor);
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+    }
+  `}
+  ul {
+    list-style-type: disc;
+  }
+  ul, ol {
+    padding-inline-start: 25px;
+    margin-block-start: 0.5em;
+    margin-block-end: 0.5em;
+  }
+`;
+const RichTextInput = styled(yakDomTag("div")).attrs({
+  className: "styled-rich-text-input"
+})`
+  font-size: 14px;
+  color: ${__yakProps => {
+  const v = getColor('gray60');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+  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 && css`
+    &[disabled] {
+      background: rgba(0, 0, 0, 0.075) !important;
+      opacity: 0.75 !important;
+    }
+  `}
+`;
+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: ${__yakProps => {
+  const v = getColor('gray90');
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};
+      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(yakDomTag("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 setSelectionRange = function (input, selectionStart) {
+  let selectionEnd = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 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(_ref => {
+              let [k, v] = _ref;
+              return v !== "";
+            });
+            const fixedStyle = _fromPairs(usedStyles.map(_ref2 => {
+              let [k, v] = _ref2;
+              return [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 RichText = _ref3 => {
+  let {
+    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
+  } = _ref3;
+  const linkPopup = usePopupToggle();
+  const input = useEnsureRef(inputRef);
+  const activeLinkNode = useRef();
+  const container = useRef();
+  useRefState();
+
+  // auto-hide needs
+  useRefState();
+  useRefState();
+  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 = _ref4 => {
+    let {
+      linkUrl,
+      linkText
+    } = _ref4;
+    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 handlePasteDrop = e => setTimeout(() => pasted(), 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 => /*#__PURE__*/React.createElement(ToolButton, {
+    key: tool,
+    tabIndex: -1,
+    onClick: e => execCommand(e, tool),
+    className: 'button exec-command rich-text-button only-icon ' + (activatedTools[tool] ? 'activated' : ''),
+    type: "button"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: 'icon icon-' + tool
+  }));
+  const richTextElement = /*#__PURE__*/React.createElement(RichTextContainer, {
+    linkColor: linkColor,
+    ref: container,
+    onFocus: containerFocus,
+    onBlur: containerBlur,
+    focus: containerFocused.isOpen,
+    showToolbar: !disabled & !autoHideToolbar || containerFocused.isOpen,
+    className: className
+  }, /*#__PURE__*/React.createElement(ToolsContainer, {
+    className: "rich-text-tools"
+  }, formatTools.map((t, i) => t === 'separator' ? /*#__PURE__*/React.createElement(ToolSeparator, {
+    className: "separator",
+    key: "separator-" + i
+  }) : toolButton(t))), /*#__PURE__*/React.createElement(RichTextInput, null, /*#__PURE__*/React.createElement(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
+  })), locked && /*#__PURE__*/React.createElement(InputIcon, {
+    icon: "lock"
+  }), linkPopup.isOpen && /*#__PURE__*/React.createElement(EditLinkPopup, {
+    input: input,
+    activeLinkNode: activeLinkNode,
+    cancel: cancelRichTextLink,
+    values: linkPopup.isOpen,
+    removeLink: removeLink,
+    saveLink: saveRichTextLink
+  }));
+  return label ? /*#__PURE__*/React.createElement(Field, {
+    labelClick: focus,
+    descText: descText,
+    helpText: helpText,
+    label: label,
+    mandatory: mandatory
+  }, richTextElement) : richTextElement;
+};
+const EditLinkPopup = _ref5 => {
+  let {
+    cancel,
+    removeLink,
+    activeLinkNode,
+    input,
+    saveLink,
+    values
+  } = _ref5;
+  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 = _objectSpread(_objectSpread({}, 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 /*#__PURE__*/React.createElement(WithForm, {
+    skipDom: true,
+    ref: formRef,
+    action: saveLink,
+    values: values,
+    preValidation: preValidation
+  }, form => /*#__PURE__*/React.createElement("div", {
+    onClick: stopPropagation(),
+    ref: linkPopup,
+    onKeyDown: checkEscOrEnter,
+    className: "popup rich-text-link-editor ignore-link",
+    contentEditable: false
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    ref: linkTextRef,
+    mandatory: true,
+    path: "linkText",
+    label: LABELS.popupLinkText
+  }), /*#__PURE__*/React.createElement(TextInput, {
+    ref: linkUrlRef,
+    mandatory: true,
+    path: "linkUrl",
+    label: LABELS.popupLinkUrl
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "popup-footer"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "remove-link",
+    icon: "remove",
+    onClick: removeLink
+  }, LABELS.popupRemove), /*#__PURE__*/React.createElement(Button, {
+    onClick: cancel,
+    tabIndex: 0
+  }, LABELS.popupCancel), /*#__PURE__*/React.createElement(Button, {
+    highlight: true,
+    onClick: form.willSubmitForm
+  }, LABELS.popupConfirm)), /*#__PURE__*/React.createElement(Errors, null)));
+};
+
+export { RichText, RichTextContainer, RichTextInput };
+//# sourceMappingURL=RichText.mjs.map