@wordpress/format-library/build/text-color/inline.native.js

Format library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = InlineColorUI;
exports.getActiveColors = getActiveColors;
var _element = require("@wordpress/element");
var _richText = require("@wordpress/rich-text");
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _index = require("./index.js");
var _inline = require("./inline.js");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function parseCSS(css = '') {
  return css.split(';').reduce((accumulator, rule) => {
    if (rule) {
      const [property, value] = rule.replace(/ /g, '').split(':');
      if (property === 'color') {
        accumulator.color = value;
      }
      if (property === 'background-color' && value !== _index.transparentValue) {
        accumulator.backgroundColor = value;
      }
    }
    return accumulator;
  }, {});
}
function getActiveColors(value, name, colorSettings) {
  const activeColorFormat = (0, _richText.getActiveFormat)(value, name);
  if (!activeColorFormat) {
    return {};
  }
  return {
    ...parseCSS(activeColorFormat.attributes.style),
    ...(0, _inline.parseClassName)(activeColorFormat.attributes.class, colorSettings)
  };
}
function setColors(value, name, colorSettings, colors, contentRef) {
  const {
    color,
    backgroundColor
  } = {
    ...getActiveColors(value, name, colorSettings),
    ...colors
  };
  if (!color) {
    contentRef?.onRemoveMarkFormatting();
    return (0, _richText.removeFormat)(value, name);
  }
  const styles = [];
  const classNames = [];
  const attributes = {};
  if (backgroundColor) {
    styles.push(['background-color', backgroundColor].join(':'));
  } else {
    // Override default browser color for mark element.
    styles.push(['background-color', _index.transparentValue].join(':'));
  }
  if (color) {
    const colorObject = (0, _blockEditor.getColorObjectByColorValue)(colorSettings, color);
    if (colorObject) {
      classNames.push((0, _blockEditor.getColorClassName)('color', colorObject.slug));
      styles.push(['color', colorObject.color].join(':'));
    } else {
      styles.push(['color', color].join(':'));
    }
  }
  if (styles.length) {
    attributes.style = styles.join(';');
  }
  if (classNames.length) {
    attributes.class = classNames.join(' ');
  }
  const format = {
    type: name,
    attributes
  };
  const hasNoSelection = value.start === value.end;
  if (hasNoSelection) {
    contentRef?.onMarkFormatting(color);
  }
  return (0, _richText.applyFormat)(value, format);
}
function ColorPicker({
  name,
  value,
  onChange,
  contentRef
}) {
  const property = 'color';
  const colors = (0, _blockEditor.useMobileGlobalStylesColors)();
  const colorSettings = (0, _blockEditor.useMultipleOriginColorsAndGradients)();
  colorSettings.allAvailableColors = colors;
  const onColorChange = (0, _element.useCallback)(color => {
    onChange(setColors(value, name, colors, {
      [property]: color
    }, contentRef));
  }, [colors, contentRef, name, onChange, value]);
  const activeColors = (0, _element.useMemo)(() => getActiveColors(value, name, colors), [name, value, colors]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ColorSettings, {
    colorValue: activeColors[property],
    onColorChange: onColorChange,
    onColorCleared: onColorChange,
    defaultSettings: colorSettings,
    hideNavigation: true
  });
}
function InlineColorUI({
  name,
  value,
  onChange,
  onClose,
  contentRef
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheet, {
    isVisible: true,
    onClose: onClose,
    hideHeader: true,
    contentStyle: {
      paddingLeft: 0,
      paddingRight: 0
    },
    hasNavigation: true,
    leftButton: null,
    testID: "inline-text-color-modal",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheet.NavigationContainer, {
      animate: true,
      main: true,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.BottomSheet.NavigationScreen, {
        name: "text-color",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorPicker, {
          name: name,
          value: value,
          onChange: onChange,
          contentRef: contentRef
        })
      })
    })
  });
}
//# sourceMappingURL=inline.native.js.map