argous 1.2.217 → 1.2.218

package/lib/components/TextToHtml/TextToHtml.js

@@ -1,463 +0,0 @@
-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: '' };
-
-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) => {
-    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 createCharactersFromInitialValue = useCallback((text) => {
-    if (typeof text === 'string') {
-      let newCharacters = [];
-      for (let index = 0; (index < text.length); index++) {
-        const string = text[index];
-        let newCharacter = { ...initialStateCharacter, string };
-        newCharacters.push(newCharacter);
-      }
-      newCharacters.push(initialStateCursor);
-      setCharacters(newCharacters);
-      focusToWrite();
-    }
-  }, [setCharacters]);
-
-  const setStyleFromInitialValue = (cssText) => {
-    const element = document.getElementById(TEXT_TO_HTML_ID);
-    (element) && (element.style.cssText = cssText);
-  };
-
-  const loadInitialValue = useCallback((initialValue) => {
-    (initialValue.text) && createCharactersFromInitialValue(initialValue.text);
-    (initialValue.cssText) && setStyleFromInitialValue(initialValue.cssText);
-  }, [createCharactersFromInitialValue]);
-  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

@@ -1,2 +0,0 @@
-<?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

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

package/lib/components/TextToHtml/index.js

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

package/lib/components/TextToHtml/style.css

@@ -1,40 +0,0 @@
-.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;
-}