@yuntijs/ui/es/RichTextEditor/components/ToolBar/FontSizeInput.js

☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { ActionIcon } from '@lobehub/ui';
import { InputNumber } from 'antd';
import { Minus, Plus } from 'lucide-react';
import { useEffect, useState } from 'react';
import { DEFAULT_FONT_SIZE, MAX_ALLOWED_FONT_SIZE, MIN_ALLOWED_FONT_SIZE } from "../../constants/toolbar";
import { UpdateFontSizeType, updateFontSize, updateFontSizeInSelection } from "./utils";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export var FontSizeInput = function FontSizeInput(_ref) {
  var selectionFontSize = _ref.selectionFontSize,
    disabled = _ref.disabled,
    editor = _ref.editor;
  var _useState = useState(selectionFontSize),
    _useState2 = _slicedToArray(_useState, 2),
    inputValue = _useState2[0],
    setInputValue = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    inputChangeFlag = _useState4[0],
    setInputChangeFlag = _useState4[1];
  var updateFontSizeByInputValue = function updateFontSizeByInputValue(inputValueNumber) {
    var updatedFontSize = inputValueNumber;
    if (inputValueNumber > MAX_ALLOWED_FONT_SIZE) {
      updatedFontSize = MAX_ALLOWED_FONT_SIZE;
    } else if (inputValueNumber < MIN_ALLOWED_FONT_SIZE) {
      updatedFontSize = MIN_ALLOWED_FONT_SIZE;
    }
    setInputValue(updatedFontSize);
    updateFontSizeInSelection(editor, String(updatedFontSize) + 'px', null);
    setInputChangeFlag(false);
  };
  var handleKeyPress = function handleKeyPress(e) {
    var inputValueNumber = Number(inputValue);
    if (e.key === 'Tab') {
      return;
    }
    if (['e', 'E', '+', '-'].includes(e.key) || Number.isNaN(inputValueNumber)) {
      e.preventDefault();
      return;
    }
    setInputChangeFlag(true);
    if (e.key === 'Enter' || e.key === 'Escape') {
      e.preventDefault();
      updateFontSizeByInputValue(inputValueNumber);
    }
  };
  var handleInputBlur = function handleInputBlur() {
    if (inputValue && inputChangeFlag) {
      var inputValueNumber = Number(inputValue);
      updateFontSizeByInputValue(inputValueNumber);
    }
  };
  useEffect(function () {
    setInputValue(selectionFontSize);
  }, [selectionFontSize]);
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx(ActionIcon, {
      disabled: disabled || !!selectionFontSize && Number(inputValue) <= MIN_ALLOWED_FONT_SIZE,
      icon: Minus,
      onClick: function onClick() {
        return updateFontSize(editor, UpdateFontSizeType.decrement, inputValue);
      },
      size: {
        size: 14,
        blockSize: 22
      }
    }), /*#__PURE__*/_jsx(InputNumber, {
      controls: false,
      disabled: disabled,
      max: MAX_ALLOWED_FONT_SIZE,
      min: MIN_ALLOWED_FONT_SIZE,
      onBlur: handleInputBlur,
      onChange: function onChange(v) {
        return setInputValue(v || DEFAULT_FONT_SIZE);
      },
      onKeyDown: handleKeyPress,
      size: "small",
      style: {
        width: 40,
        textAlign: 'center'
      },
      value: inputValue
    }), /*#__PURE__*/_jsx(ActionIcon, {
      disabled: disabled || !!selectionFontSize && Number(inputValue) >= MAX_ALLOWED_FONT_SIZE,
      icon: Plus,
      onClick: function onClick() {
        return updateFontSize(editor, UpdateFontSizeType.increment, inputValue);
      },
      size: {
        size: 14,
        blockSize: 22
      }
    })]
  });
};