argous 1.2.218 → 1.2.219

package/lib/components/TextToHtml/TextToHtml.js

@@ -0,0 +1,450 @@
+import Cursor from './Cursor';
+import TextStyles from './TextStyles';
+import { translateKey } from './utils';
+import { ClickAwayListener } from '@material-ui/core';
+import { isEqual } from 'lodash';
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import './style.css';
+
+
+const resizeStyle = { 
+  resize: 'both', 
+  overflow: 'auto' 
+};
+
+
+export const TEXT_TO_HTML_ID = 'text-to-html';
+const TEXT_TO_HTML_CURSOR_ID = 'text-to-html-cursor';
+const TEXT_TO_HTML_TEXT_CONTAINER_ID = 'text-to-html-text-container';
+
+
+export const initialStateCharacter = { 
+  key: undefined, 
+  keyCode: undefined, 
+  code: undefined, 
+  string: '', 
+  dead: false, 
+  shift: false, 
+  mark: [] 
+};
+
+export const initialStateCursor = { ...initialStateCharacter, string: 'cursor' };
+
+export const textToHtmlInitialValue = { text: '', cssText: '', markedPeople: [], characters: [] };
+
+const initialStateMove = { 
+  isDown: false, 
+  offset: [] 
+};
+
+const initialStateKeyboardRef = { altGraph: false };
+
+const initialStateTextStyle = { 
+  color: { r: 255, g: 255, b: 255, a: 1 }, 
+  textAlign: 'center', 
+  fontSize: 2, 
+  fontFamily: 'Roboto, Helvetica, Arial, sans-serif', 
+  letterSpacing: '0.01em' 
+};
+
+const initialState = { 
+  textStyle: initialStateTextStyle, 
+  createCursorClick: false, 
+  clickAway: undefined, 
+  tap: 0, 
+  resize: false, 
+  move: initialStateMove, 
+  characters: [] 
+};
+
+
+const TextToHtml = ({ initialValue = textToHtmlInitialValue, onChange, onDelete, defaultSpacing, setExternalValues }, ref) => {
+
+  const keyboardRef = useRef(initialStateKeyboardRef);
+  const [state, setState] = useState(initialState);
+  const { createCursorClick, characters, move, resize, tap, textStyle } = state;
+  const { color, fontSize, fontFamily, textAlign, letterSpacing } = textStyle;
+  const propsRef = useRef({ 
+    onChange 
+  });
+
+  const cursor = characters.findIndex(({ string }) => (string === 'cursor'));
+  const canWrite = (cursor > -1);
+
+
+  const logicSetState = ({ type, field, value }) => setState(values => ({ 
+    ...values, 
+    [type]: (type && field) ? { ...values[type], [field]: value } : value 
+  }));
+
+
+  const setCharacters = useCallback(value => logicSetState({ type: 'characters', value: value }), []);
+
+  const focusToWrite = () => {
+    const element = document.getElementById(TEXT_TO_HTML_ID);
+    if (element) element.focus();
+  };
+
+  const toggleResize = () => logicSetState({ type: 'resize', value: !resize });
+  const toggleClickAway = () => logicSetState({ type: 'clickAway', value: (state.clickAway === undefined) ? false : undefined });
+  const disableResize = useCallback(() => logicSetState({ type: 'resize', value: false }), []);
+  const handleCreateCursorClick = useCallback((boolean) => logicSetState({ type: 'createCursorClick', value: boolean }), []);
+  const deleteCursor = useCallback(() => logicSetState({ type: 'characters', value: characters.filter(({ string }) => string !== 'cursor') }), [characters]);
+
+  const createCursor = useCallback((e) => {
+    let newCharacters = [...characters];
+    newCharacters.push(initialStateCursor);
+    focusToWrite();
+    logicSetState({ type: 'characters', value: newCharacters });
+  }, [characters]);
+
+  const clickAway = useCallback((e) => {
+    if (createCursorClick) {
+      handleCreateCursorClick(false);
+      return;
+    }
+    disableResize();
+    deleteCursor();
+  }, [createCursorClick, deleteCursor, disableResize, handleCreateCursorClick]);
+
+  const handleClickAway = (e) => {
+    if (state.clickAway === false) return;
+    clickAway(e);
+  };
+
+  const handleContainerClick = (e) => {
+    if (canWrite) {
+      clickAway(e);
+      return;
+    }
+    createCursor(e);
+    handleCreateCursorClick(true);
+  };
+
+  const handleClick = (e) => {
+    e.stopPropagation();
+    if (canWrite) return;
+    if (createCursorClick) handleCreateCursorClick(false);
+    createCursor(e);
+  };
+
+  const pasteTextFromClipboard = async (e) => {
+    const text = await navigator.clipboard?.readText();
+    if (text?.length) {
+      let newCharacters = [...characters];
+
+      for (let index = 0; (index < text.length); index++) {
+        const string = text[index];
+        let newCharacter = { ...initialStateCharacter, string };
+        newCharacters.push(newCharacter);
+      }
+
+      const cursorIndex = newCharacters.findIndex(({ string }) => (string === 'cursor'));
+      if (cursorIndex > -1) {
+        const [cursor] = newCharacters.splice(cursorIndex, 1);
+        (cursor) && newCharacters.push(cursor);
+      }
+
+      (!isEqual(characters, newCharacters)) && setCharacters(newCharacters);
+    }
+  };
+
+  const setStyleFromInitialValue = (cssText) => {
+    const element = document.getElementById(TEXT_TO_HTML_ID);
+    (element) && (element.style.cssText = cssText);
+  };
+
+  const loadInitialValue = useCallback((initialValue) => {
+    (initialValue.cssText) && setStyleFromInitialValue(initialValue.cssText);
+    (initialValue.characters) && setCharacters(initialValue.characters);
+  }, [setCharacters]);
+  useEffect(() => loadInitialValue(initialValue), [initialValue, loadInitialValue]);
+
+  const handleKeyDown = (e) => {
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!canWrite) return;
+
+    const key = e.key;
+    const keyCode = e.keyCode;
+    const code = e.code;
+    const shift = e.shiftKey;
+    const ctrlKey = e.ctrlKey;
+    const shiftKey = e.shiftKey;
+    const capsLock = e.getModifierState('CapsLock');
+
+    let deleted = undefined;
+    let newCharacter = { string: null };
+    let newCharacters = [...characters];
+
+    const paste = (((key === 'v') || (key === 'V')) && (keyCode === 86) && (code === 'KeyV') && ctrlKey && !shiftKey);
+    const characterBeforeCursorIndex = (cursor - 1);
+    let characterBeforeCursor = newCharacters[characterBeforeCursorIndex];
+
+
+    function moveCursor(direction) {
+      const start = (direction === 'start');
+      const end = (direction === 'end');
+      const left = (direction === 'left');
+      const right = (direction === 'right');
+      if (!start && !end && !left && !right) return;
+
+      const cursorIndex = cursor;
+      if ((left || start) && (cursorIndex === 0)) return;
+      const cursorObject = newCharacters.splice(cursorIndex, 1)[0];
+      newCharacters.splice((start) ? 0 : (end) ? (newCharacters.length) : (left) ? (cursorIndex - 1) : (cursorIndex + 1), 0, cursorObject);
+    }
+
+    function deleteText(direction) {
+      const left = (direction === 'left');
+      const targetIndex = (left) ? (cursor === 0) ? 0 : (cursor - 1) : (cursor + 1);
+      const nextObjectToDelete = newCharacters[targetIndex];
+      if (nextObjectToDelete?.string === 'cursor') return;
+      deleted = newCharacters.splice(targetIndex, 1)?.[0];
+    }
+
+    if (paste) pasteTextFromClipboard(e);
+    else if (key === 'Home') moveCursor('start');
+    else if (key === 'End') moveCursor('end');
+    else if (key === 'ArrowLeft') moveCursor('left');
+    else if (key === 'ArrowRight') moveCursor('right');
+    else if (key === 'AltGraph') keyboardRef.current.altGraph = true;
+    else if (key === 'Backspace') deleteText('left');
+    else if (key === 'Delete') deleteText('right');
+    else {
+      const { string, before } = translateKey({ key, keyCode, code, shift, altGraph: keyboardRef.current.altGraph, capsLock, before: characterBeforeCursor });
+      if (string) {
+        newCharacter = { 
+          ...initialStateCharacter, 
+          key, 
+          keyCode, 
+          code, 
+          string, 
+          dead: before.dead, 
+          shift 
+        };
+
+        newCharacters.splice(cursor, 0, newCharacter);
+        if (characterBeforeCursor) {
+          if (before.delete) newCharacters.splice(characterBeforeCursorIndex, 1);
+          else if (characterBeforeCursor.dead) {
+            characterBeforeCursor.dead = false;
+            newCharacters.splice(characterBeforeCursorIndex, 1, characterBeforeCursor);
+          }
+        }
+      }
+    }
+
+    (!isEqual(newCharacters, characters)) && setCharacters(newCharacters);
+    if (deleted) onDelete && onDelete(e, deleted, newCharacters);
+  };
+
+  const handleKeyUp = (e) => {
+    const key = e.key;
+    if (key === 'AltGraph') keyboardRef.current.altGraph = false;
+  };
+
+  const handleDoubleClick = (e) => {
+    toggleResize();
+  };
+
+  const handleTap = () => {
+    let newTap = tap;
+    newTap += 1;
+    if (newTap > 1) toggleResize();
+    logicSetState({ type: 'tap', value: newTap });
+    setTimeout(() => logicSetState({ type: 'tap', value: 0 }), 300);
+  };
+
+  const handleMouseDownTouchStart = (e) => {
+    if (e.type === 'touchstart') handleTap();
+    if (resize) return;
+    const element = document.getElementById(TEXT_TO_HTML_ID);
+    if (!element) return;
+    const clientX = (e.clientX || e.touches[0].clientX);
+    const clientY = (e.clientY || e.touches[0].clientY);
+    logicSetState({ 
+      type: 'move', 
+      value: { 
+        ...move, 
+        isDown: true, 
+        offset: [
+          element.offsetLeft - clientX, 
+          element.offsetTop - clientY
+        ]
+      } 
+    });
+  };
+
+  const handleMouseUpTouchEnd = (e) => {
+    logicSetState({ type: 'move', field: 'isDown', value: false });
+    const element = document.getElementById(TEXT_TO_HTML_ID);
+    if (element) {
+      element.style.cursor = 'pointer';
+    }
+  };
+
+  const handleMouseTouchMove = (e) => {
+    const { isDown, offset } = move;
+    const containerElement = document.getElementById(TEXT_TO_HTML_TEXT_CONTAINER_ID);
+    const textElement = document.getElementById(TEXT_TO_HTML_ID);
+    if (containerElement && textElement && isDown) {
+      const containerHeight = containerElement.clientHeight;
+      const containerWidth = containerElement.clientWidth;
+      const clientX = (e.clientX || e.touches[0].clientX);
+      const clientY = (e.clientY || e.touches[0].clientY);
+      const top = (clientY + offset[1]);
+      const left = (clientX + offset[0]);
+      const textTop = ((top / containerHeight) * 100);
+      const textLeft = ((left / containerWidth) * 100);
+      textElement.style.top = textTop + '%';
+      textElement.style.left = textLeft + '%';
+      textElement.style.cursor = 'grabbing';
+    }
+  };
+
+  const handleFontSizeChange = (e) => {
+    logicSetState({ type: 'clickAway', value: false });
+    let newFontSize = fontSize;
+    if (newFontSize > 2) newFontSize = 1;
+    else newFontSize += 1;
+    logicSetState({ type: 'textStyle', field: 'fontSize', value: newFontSize });
+    focusToWrite();
+    setTimeout(() => logicSetState({ type: 'clickAway', value: undefined }), 0);
+  };
+
+  const handleTextAlignChange = (e) => {
+    logicSetState({ type: 'clickAway', value: false });
+    let newTextAlign = textAlign;
+    switch (textAlign) {
+      case 'start':
+        newTextAlign = 'end';
+        break;
+      case 'end':
+        newTextAlign = 'center';
+        break;
+      case 'center':
+        newTextAlign = 'justify';
+        break;
+      case 'justify':
+        newTextAlign = 'start';
+        break;
+      default:
+        return null;
+    }
+    logicSetState({ type: 'textStyle', field: 'textAlign', value: newTextAlign });
+    focusToWrite();
+    setTimeout(() => logicSetState({ type: 'clickAway', value: undefined }), 0);
+  };
+
+  const changeStyles = useCallback(({ resize }) => {
+    const element = document.getElementById(TEXT_TO_HTML_ID);
+    if (element) {
+      if (resize) {
+        element.style.resize = resizeStyle.resize;
+        element.style.overflow = resizeStyle.overflow;
+      } else {
+        element.style.resize = '';
+        element.style.overflow = '';
+      }
+    }
+  }, []);
+  useEffect(() => changeStyles({ resize }), [resize, changeStyles]);
+
+  const createHtmlString = useCallback(() => {
+    const element = document.getElementById(TEXT_TO_HTML_ID);
+    if (element) {
+      let htmlDataString = '';
+      characters.forEach(({ string }) => (string === 'cursor') ? null : htmlDataString += string);
+      element.setAttribute('data-string', htmlDataString);
+
+      let newElement = element.cloneNode(true);
+      newElement.id = `${Math.floor(Math.random() * 1000001)}-${element.id}`;
+      newElement.style.cursor = 'inherit';
+      const htmlString = newElement.outerHTML;
+
+      (propsRef.current?.onChange) && propsRef.current.onChange(htmlString);
+      if (ref.current) ref.current.htmlString = htmlString;
+      return { htmlString };
+    }
+  }, [characters, ref]);
+  useEffect(() => createHtmlString(), [characters, createHtmlString]);
+
+
+  useEffect(() => ref.current = { 
+    ...ref.current, 
+    ...state, 
+    clickAway, 
+    focusToWrite, 
+    createCursor, 
+    setCharacters, 
+    createHtmlString, 
+    setExternalValues 
+  }, [ref, state, setCharacters, createCursor, createHtmlString, clickAway, setExternalValues]);
+
+  const updateExternalValues = ({ state, setExternalValues }) => {
+    setExternalValues && setExternalValues(state);
+  };
+  useEffect(() => updateExternalValues({ state, setExternalValues }), [state, setExternalValues]);
+
+
+  return <div className='text-to-html-container'>
+    {(canWrite) && (
+      <TextStyles 
+        setColor={value => logicSetState({ type: 'textStyle', field: 'color', value })} 
+        {...{ color, defaultSpacing, toggleClickAway, handleFontSizeChange, textAlign, handleTextAlignChange }} 
+      />
+    )}
+    <div id={TEXT_TO_HTML_TEXT_CONTAINER_ID} onClick={handleContainerClick} className='text-to-html-text-container'>
+      <ClickAwayListener mouseEvent={state.clickAway} touchEvent={state.clickAway} disableReactTree onClickAway={handleClickAway}>
+        <div 
+          id={TEXT_TO_HTML_ID} 
+          tabIndex={0} 
+          onKeyDown={handleKeyDown} 
+          onKeyUp={handleKeyUp} 
+          onMouseDown={handleMouseDownTouchStart} 
+          onMouseUp={handleMouseUpTouchEnd} 
+          onMouseMove={handleMouseTouchMove} 
+          onTouchStart={handleMouseDownTouchStart} 
+          onTouchEnd={handleMouseUpTouchEnd} 
+          onTouchMove={handleMouseTouchMove} 
+          onClick={handleClick} 
+          onDoubleClick={handleDoubleClick} 
+          style={{ 
+            color: (color) ? `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})` : 'inherit', 
+            textAlign: (textAlign) ? textAlign : 'inherit', 
+            fontSize: (fontSize) ? `${fontSize}rem` : '1rem', 
+            fontFamily: (fontFamily) ? fontFamily : 'inherit', 
+            letterSpacing: (letterSpacing) ? letterSpacing : 'inherit' 
+          }} 
+          className='text-to-html'
+        >
+          <p>
+            {characters.map(({ code, string, dead, mark }, stringIndex) => {
+              switch (string) {
+                case 'cursor':
+                  return <Cursor key={`${stringIndex}-${string}`} id={TEXT_TO_HTML_CURSOR_ID} className='text-to-html-cursor' />;
+                default:
+                  return (string) ? (
+                    <span 
+                      key={`${stringIndex}-${string}`} 
+                      style={{ 
+                        textDecoration: (dead || mark?.length) ? 'underline' : '' 
+                      }}
+                    >
+                      {string}
+                    </span>
+                  ) : null;
+              }
+            })}
+          </p>
+        </div>
+      </ClickAwayListener>
+    </div>
+  </div>;
+};
+
+
+export default forwardRef(TextToHtml);

package/lib/components/TextToHtml/icons/resize_area.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.354 9.354l-.707-.707-13 13 .707.707zm0 7l-.707-.707-6 6 .707.707z"/><path fill="none" d="M0 0h24v24H0z"/></svg>

package/lib/components/TextToHtml/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TextToHtml';
+export * from './TextToHtml';

package/lib/components/TextToHtml/index.js

@@ -0,0 +1 @@
+export { default } from './TextToHtml';

package/lib/components/TextToHtml/style.css

@@ -0,0 +1,40 @@
+.text-to-html-container {
+    width: 100%;
+}
+
+.text-to-html-text-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.text-to-html {
+    touch-action: none;
+    position: absolute;
+    top: 45%;
+    left: 13%;
+    width: 80%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    outline: 0;
+    cursor: pointer;
+    color: inherit;
+}
+
+.text-to-html > p {
+    margin: 0;
+}
+
+.text-to-html::-webkit-resizer {
+    background-color: #fff;
+    background-image: url('./icons/resize_area.svg');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.text-to-html-cursor {
+    opacity: 0;
+}