@gechiui/block-editor/build-module/hooks/typography.js

Generic block editor.

import { createElement } from "@gechiui/element";

/**
 * GeChiUI dependencies
 */
import { getBlockSupport, hasBlockSupport } from '@gechiui/blocks';
import { __experimentalToolsPanelItem as ToolsPanelItem } from '@gechiui/components';
import { __ } from '@gechiui/i18n';
/**
 * Internal dependencies
 */

import InspectorControls from '../components/inspector-controls';
import { getFontAppearanceLabel } from '../components/font-appearance-control';
import { LINE_HEIGHT_SUPPORT_KEY, LineHeightEdit, hasLineHeightValue, resetLineHeight, useIsLineHeightDisabled } from './line-height';
import { FONT_STYLE_SUPPORT_KEY, FONT_WEIGHT_SUPPORT_KEY, FontAppearanceEdit, hasFontAppearanceValue, resetFontAppearance, useIsFontAppearanceDisabled, useIsFontStyleDisabled, useIsFontWeightDisabled } from './font-appearance';
import { FONT_FAMILY_SUPPORT_KEY, FontFamilyEdit, hasFontFamilyValue, resetFontFamily, useIsFontFamilyDisabled } from './font-family';
import { FONT_SIZE_SUPPORT_KEY, FontSizeEdit, hasFontSizeValue, resetFontSize, useIsFontSizeDisabled } from './font-size';
import { TEXT_DECORATION_SUPPORT_KEY, TextDecorationEdit, hasTextDecorationValue, resetTextDecoration, useIsTextDecorationDisabled } from './text-decoration';
import { TEXT_TRANSFORM_SUPPORT_KEY, TextTransformEdit, hasTextTransformValue, resetTextTransform, useIsTextTransformDisabled } from './text-transform';
import { LETTER_SPACING_SUPPORT_KEY, LetterSpacingEdit, hasLetterSpacingValue, resetLetterSpacing, useIsLetterSpacingDisabled } from './letter-spacing';
export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
export const TYPOGRAPHY_SUPPORT_KEYS = [LINE_HEIGHT_SUPPORT_KEY, FONT_SIZE_SUPPORT_KEY, FONT_STYLE_SUPPORT_KEY, FONT_WEIGHT_SUPPORT_KEY, FONT_FAMILY_SUPPORT_KEY, TEXT_DECORATION_SUPPORT_KEY, TEXT_TRANSFORM_SUPPORT_KEY, LETTER_SPACING_SUPPORT_KEY];
export function TypographyPanel(props) {
  const {
    clientId
  } = props;
  const isFontFamilyDisabled = useIsFontFamilyDisabled(props);
  const isFontSizeDisabled = useIsFontSizeDisabled(props);
  const isFontAppearanceDisabled = useIsFontAppearanceDisabled(props);
  const isLineHeightDisabled = useIsLineHeightDisabled(props);
  const isTextDecorationDisabled = useIsTextDecorationDisabled(props);
  const isTextTransformDisabled = useIsTextTransformDisabled(props);
  const isLetterSpacingDisabled = useIsLetterSpacingDisabled(props);
  const hasFontStyles = !useIsFontStyleDisabled(props);
  const hasFontWeights = !useIsFontWeightDisabled(props);
  const isDisabled = useIsTypographyDisabled(props);
  const isSupported = hasTypographySupport(props.name);
  if (isDisabled || !isSupported) return null;
  const defaultControls = getBlockSupport(props.name, [TYPOGRAPHY_SUPPORT_KEY, '__experimentalDefaultControls']);

  const createResetAllFilter = attribute => newAttributes => {
    var _newAttributes$style;

    return { ...newAttributes,
      style: { ...newAttributes.style,
        typography: { ...((_newAttributes$style = newAttributes.style) === null || _newAttributes$style === void 0 ? void 0 : _newAttributes$style.typography),
          [attribute]: undefined
        }
      }
    };
  };

  return createElement(InspectorControls, {
    __experimentalGroup: "typography"
  }, !isFontFamilyDisabled && createElement(ToolsPanelItem, {
    hasValue: () => hasFontFamilyValue(props),
    label: __('字体'),
    onDeselect: () => resetFontFamily(props),
    isShownByDefault: defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.fontFamily,
    resetAllFilter: newAttributes => ({ ...newAttributes,
      fontFamily: undefined
    }),
    panelId: clientId
  }, createElement(FontFamilyEdit, props)), !isFontSizeDisabled && createElement(ToolsPanelItem, {
    hasValue: () => hasFontSizeValue(props),
    label: __('字号'),
    onDeselect: () => resetFontSize(props),
    isShownByDefault: defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.fontSize,
    resetAllFilter: newAttributes => {
      var _newAttributes$style2;

      return { ...newAttributes,
        fontSize: undefined,
        style: { ...newAttributes.style,
          typography: { ...((_newAttributes$style2 = newAttributes.style) === null || _newAttributes$style2 === void 0 ? void 0 : _newAttributes$style2.typography),
            fontSize: undefined
          }
        }
      };
    },
    panelId: clientId
  }, createElement(FontSizeEdit, props)), !isFontAppearanceDisabled && createElement(ToolsPanelItem, {
    className: "single-column",
    hasValue: () => hasFontAppearanceValue(props),
    label: getFontAppearanceLabel(hasFontStyles, hasFontWeights),
    onDeselect: () => resetFontAppearance(props),
    isShownByDefault: defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.fontAppearance,
    resetAllFilter: newAttributes => {
      var _newAttributes$style3;

      return { ...newAttributes,
        style: { ...newAttributes.style,
          typography: { ...((_newAttributes$style3 = newAttributes.style) === null || _newAttributes$style3 === void 0 ? void 0 : _newAttributes$style3.typography),
            fontStyle: undefined,
            fontWeight: undefined
          }
        }
      };
    },
    panelId: clientId
  }, createElement(FontAppearanceEdit, props)), !isLineHeightDisabled && createElement(ToolsPanelItem, {
    className: "single-column",
    hasValue: () => hasLineHeightValue(props),
    label: __('行高'),
    onDeselect: () => resetLineHeight(props),
    isShownByDefault: defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.lineHeight,
    resetAllFilter: createResetAllFilter('lineHeight'),
    panelId: clientId
  }, createElement(LineHeightEdit, props)), !isTextDecorationDisabled && createElement(ToolsPanelItem, {
    className: "single-column",
    hasValue: () => hasTextDecorationValue(props),
    label: __('装饰'),
    onDeselect: () => resetTextDecoration(props),
    isShownByDefault: defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.textDecoration,
    resetAllFilter: createResetAllFilter('textDecoration'),
    panelId: clientId
  }, createElement(TextDecorationEdit, props)), !isTextTransformDisabled && createElement(ToolsPanelItem, {
    className: "single-column",
    hasValue: () => hasTextTransformValue(props),
    label: __('字母实例'),
    onDeselect: () => resetTextTransform(props),
    isShownByDefault: defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.textTransform,
    resetAllFilter: createResetAllFilter('textTransform'),
    panelId: clientId
  }, createElement(TextTransformEdit, props)), !isLetterSpacingDisabled && createElement(ToolsPanelItem, {
    className: "single-column",
    hasValue: () => hasLetterSpacingValue(props),
    label: __('字母间距'),
    onDeselect: () => resetLetterSpacing(props),
    isShownByDefault: defaultControls === null || defaultControls === void 0 ? void 0 : defaultControls.letterSpacing,
    resetAllFilter: createResetAllFilter('letterSpacing'),
    panelId: clientId
  }, createElement(LetterSpacingEdit, props)));
}
export const hasTypographySupport = blockName => {
  return TYPOGRAPHY_SUPPORT_KEYS.some(key => hasBlockSupport(blockName, key));
};

function useIsTypographyDisabled() {
  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  const configs = [useIsFontAppearanceDisabled(props), useIsFontSizeDisabled(props), useIsLineHeightDisabled(props), useIsFontFamilyDisabled(props), useIsTextDecorationDisabled(props), useIsTextTransformDisabled(props), useIsLetterSpacingDisabled(props)];
  return configs.filter(Boolean).length === configs.length;
}
//# sourceMappingURL=typography.js.map