@onesy/ui-react 1.0.65 → 1.0.67

package/SmartTextField/SmartTextField.js

@@ -18,6 +18,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const utils_1 = require("@onesy/utils");
 const style_react_1 = require("@onesy/style-react");
+const IconMaterialSuperscriptW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialSuperscriptW100"));
+const IconMaterialSubscriptW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialSubscriptW100"));
 const IconMaterialFormatItalicW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatItalicW100"));
 const IconMaterialFormatUnderlinedW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFormatUnderlinedW100"));
 const IconMaterialStrikethroughSW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialStrikethroughSW100"));
@@ -201,7 +203,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
         setOptionsMention([...(optionsMention_ || [])]);
     }, [(0, utils_1.hash)(optionsMention_)]);
     react_1.default.useEffect(() => {
-        const valuePrevious = (0, utils_2.decodeHTMLEntities)(refs.root.current.innerHTML || '').replaceAll(' ', ' ');
+        const valuePrevious = (refs.root.current.innerHTML || '').replaceAll(' ', ' ');
         const valueNew = (0, utils_1.textToInnerHTML)(value_);
         if (value_ !== undefined && valuePrevious !== valueNew)
             validate(!value_ ? '' : (0, utils_2.sanitize)(value_));
@@ -288,7 +290,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
     refs.search.current = getAtSearchData();
     const onInput = react_1.default.useCallback((event) => {
         if (refs.root.current) {
-            let valueInput = (0, utils_2.decodeHTMLEntities)(refs.root.current.innerHTML || '');
+            let valueInput = refs.root.current.innerHTML || '';
             if (refs.root.current.textContent === '') {
                 valueInput = '';
                 refs.root.current.innerHTML = '';
@@ -454,7 +456,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
             // Remove the text node
             textNode.remove();
             // Invoke onChange method with new value
-            const valueInput = (0, utils_1.innerHTMLToText)((0, utils_2.decodeHTMLEntities)(refs.root.current.innerHTML));
+            const valueInput = (0, utils_1.innerHTMLToText)(refs.root.current.innerHTML);
             if ((0, utils_1.is)('function', refs.onChange.current))
                 refs.onChange.current(valueInput, { target: refs.root.current });
             // Update the caret position to be outside the span mention
@@ -583,6 +585,20 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
                 else
                     setTextSelected((values) => values.filter((item) => item !== 'strike-line'));
                 break;
+            case 'superscript':
+                refs.rootDocument.current.execCommand('superscript');
+                if (query('superscript'))
+                    setTextSelected(values => [...values, 'superscript']);
+                else
+                    setTextSelected(values => values.filter(item => item !== 'superscript'));
+                break;
+            case 'subscript':
+                refs.rootDocument.current.execCommand('subscript');
+                if (query('subscript'))
+                    setTextSelected(values => [...values, 'subscript']);
+                else
+                    setTextSelected(values => values.filter(item => item !== 'subscript'));
+                break;
             case 'link-add':
                 refs.rootDocument.current.execCommand('createLink', undefined, argument);
                 break;
@@ -680,6 +696,8 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
         'italic': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Italic') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('italic'), onClick: textMethod('italic') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatItalicW100_1.default, Object.assign({}, IconProps)) })) }))),
         'underline': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Underline') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('underline'), onClick: textMethod('underline') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatUnderlinedW100_1.default, Object.assign({}, IconProps)) })) }))),
         'bold': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Bold'), onClick: textMethod('bold') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('bold') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialFormatBoldW100_1.default, Object.assign({}, IconProps)) })) }))),
+        'superscript': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Superscript'), onClick: textMethod('superscript') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('superscript') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialSuperscriptW100_1.default, Object.assign({}, IconProps)) })) }))),
+        'subscript': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Subscript'), onClick: textMethod('subscript') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('subscript') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialSubscriptW100_1.default, Object.assign({}, IconProps)) })) }))),
         'strike-line': ((0, jsx_runtime_1.jsx)(WrapperToggleButton, Object.assign({ name: l('Strike Line'), onClick: textMethod('strike-line') }, { children: (0, jsx_runtime_1.jsx)(ToggleButton, Object.assign({}, ToggleButtonProps, { selected: refs.textSelected.current.includes('strike-line') }, { children: (0, jsx_runtime_1.jsx)(IconMaterialStrikethroughSW100_1.default, Object.assign({}, IconProps)) })) }))),
         'link-add': ((0, jsx_runtime_1.jsx)(WrapperAppend, Object.assign({ open: refs.open.current.linkMiniMenu, anchorElement: refs.miniMenuElements.linkAdd, element: ((0, jsx_runtime_1.jsx)(ClickListener, Object.assign({ onClickOutside: () => updateOpen('linkMiniMenu', false), include: [refs.miniMenuElements.linkAdd] }, { children: (0, jsx_runtime_1.jsx)(Input, { ref: refs.miniMenuElements.linkAddInput, name: l('Link'), labelButton: l('Add'), value: refs.inputValues.current.link, onChange: (valueNew) => updateInputValues('link', valueNew), onClick: () => {
                         if (refs.range.current) {
@@ -720,7 +738,7 @@ const SmartTextField = react_1.default.forwardRef((props_, ref) => {
                                 setTextSelection(null);
                             }, include: [refs.miniMenu, refs.miniMenu.current, refs.miniMenuElements.linkAddInput, refs.miniMenuElements.linkAddInput.current] }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', align: 'center', justify: 'flex-start', role: 'toolbar', color: 'themed', "aria-label": l('Mini menu'), Component: Surface, className: (0, style_react_1.classNames)([
                                     classes.textMiniMenu
-                                ]) }, { children: [(0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']] })), (0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['link-add'], updateElements['link-remove']] })), (0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: actionElements['clear'] }))] })) })) })) })));
+                                ]) }, { children: [(0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']] })), (0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['superscript'], updateElements['subscript']] })), (0, jsx_runtime_1.jsxs)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: [updateElements['link-add'], updateElements['link-remove']] })), (0, jsx_runtime_1.jsx)(ToggleButtons, Object.assign({}, ToggleButtonsProps, { children: actionElements['clear'] }))] })) })) })) })));
             }, parent: refs.root.current, anchor: textSelection === null || textSelection === void 0 ? void 0 : textSelection.selection, portal: true, alignment: 'center', position: 'bottom', clearOnClose: true }, AppendProps)));
     }, [open, textSelection, textSelected]);
     const menu = react_1.default.useMemo(() => {

package/esm/SmartTextField/SmartTextField.js

@@ -10,6 +10,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 import { hash, innerHTMLToText, is, isEnvironment, parse, stringToColor, textToInnerHTML } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import IconMaterialSuperscript from '@onesy/icons-material-rounded-react/IconMaterialSuperscriptW100';
+import IconMaterialSubscript from '@onesy/icons-material-rounded-react/IconMaterialSubscriptW100';
 import IconMaterialFormatItalic from '@onesy/icons-material-rounded-react/IconMaterialFormatItalicW100';
 import IconMaterialFormatUnderlined from '@onesy/icons-material-rounded-react/IconMaterialFormatUnderlinedW100';
 import IconMaterialStrikethroughS from '@onesy/icons-material-rounded-react/IconMaterialStrikethroughSW100';
@@ -32,7 +34,7 @@ import ToggleButtonElement from '../ToggleButton';
 import ClickListenerElement from '../ClickListener';
 import ToggleButtonsElement from '../ToggleButtons';
 import MenuElement from '../Menu';
-import { sanitize, caret, keyboardStyleCommands, staticClassName, decodeHTMLEntities } from '../utils';
+import { sanitize, caret, keyboardStyleCommands, staticClassName } from '../utils';
 const useStyle = styleMethod(theme => ({
   root: {
     minHeight: '20px',
@@ -227,7 +229,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     setOptionsMention([...(optionsMention_ || [])]);
   }, [hash(optionsMention_)]);
   React.useEffect(() => {
-    const valuePrevious = decodeHTMLEntities(refs.root.current.innerHTML || '').replaceAll('&nbsp;', ' ');
+    const valuePrevious = (refs.root.current.innerHTML || '').replaceAll('&nbsp;', ' ');
     const valueNew = textToInnerHTML(value_);
     if (value_ !== undefined && valuePrevious !== valueNew) validate(!value_ ? '' : sanitize(value_));
   }, [value_]);
@@ -307,7 +309,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.search.current = getAtSearchData();
   const onInput = React.useCallback(event => {
     if (refs.root.current) {
-      let valueInput = decodeHTMLEntities(refs.root.current.innerHTML || '');
+      let valueInput = refs.root.current.innerHTML || '';
       if (refs.root.current.textContent === '') {
         valueInput = '';
         refs.root.current.innerHTML = '';
@@ -472,7 +474,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
       textNode.remove();
 
       // Invoke onChange method with new value
-      const valueInput = innerHTMLToText(decodeHTMLEntities(refs.root.current.innerHTML));
+      const valueInput = innerHTMLToText(refs.root.current.innerHTML);
       if (is('function', refs.onChange.current)) refs.onChange.current(valueInput, {
         target: refs.root.current
       });
@@ -606,6 +608,14 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
         refs.rootDocument.current.execCommand('strikeThrough');
         if (query('strikeThrough')) setTextSelected(values => [...values, 'strike-line']);else setTextSelected(values => values.filter(item => item !== 'strike-line'));
         break;
+      case 'superscript':
+        refs.rootDocument.current.execCommand('superscript');
+        if (query('superscript')) setTextSelected(values => [...values, 'superscript']);else setTextSelected(values => values.filter(item => item !== 'superscript'));
+        break;
+      case 'subscript':
+        refs.rootDocument.current.execCommand('subscript');
+        if (query('subscript')) setTextSelected(values => [...values, 'subscript']);else setTextSelected(values => values.filter(item => item !== 'subscript'));
+        break;
       case 'link-add':
         refs.rootDocument.current.execCommand('createLink', undefined, argument);
         break;
@@ -769,6 +779,18 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
       selected: refs.textSelected.current.includes('bold')
     }), /*#__PURE__*/React.createElement(IconMaterialFormatBold, IconProps))),
+    'superscript': /*#__PURE__*/React.createElement(WrapperToggleButton, {
+      name: l('Superscript'),
+      onClick: textMethod('superscript')
+    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('superscript')
+    }), /*#__PURE__*/React.createElement(IconMaterialSuperscript, IconProps))),
+    'subscript': /*#__PURE__*/React.createElement(WrapperToggleButton, {
+      name: l('Subscript'),
+      onClick: textMethod('subscript')
+    }, /*#__PURE__*/React.createElement(ToggleButton, _extends({}, ToggleButtonProps, {
+      selected: refs.textSelected.current.includes('subscript')
+    }), /*#__PURE__*/React.createElement(IconMaterialSubscript, IconProps))),
     'strike-line': /*#__PURE__*/React.createElement(WrapperToggleButton, {
       name: l('Strike Line'),
       onClick: textMethod('strike-line')
@@ -862,7 +884,7 @@ const SmartTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
           "aria-label": l('Mini menu'),
           Component: Surface,
           className: classNames([classes.textMiniMenu])
-        }, /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['link-add'], updateElements['link-remove']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, actionElements['clear'])))));
+        }, /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['italic'], updateElements['underline'], updateElements['bold'], updateElements['strike-line']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['superscript'], updateElements['subscript']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, updateElements['link-add'], updateElements['link-remove']), /*#__PURE__*/React.createElement(ToggleButtons, ToggleButtonsProps, actionElements['clear'])))));
       },
       parent: refs.root.current,
       anchor: textSelection?.selection,

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.65
+/** @license UiReact v1.0.67
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.65",
+  "version": "1.0.67",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar <lazareric2@gmail.com>",