@atlaskit/editor-toolbar 0.3.5 → 0.3.6

package/examples/toolbar/examples/useExampleToolbarState.tsx

@@ -1,86 +0,0 @@
-import { useState } from 'react';
-
-type TextStyle =
-	| 'normal'
-	| 'heading1'
-	| 'heading2'
-	| 'heading3'
-	| 'heading4'
-	| 'heading5'
-	| 'heading6'
-	| 'quote';
-type Formatting =
-	| 'bold'
-	| 'italic'
-	| 'underline'
-	| 'strikethrough'
-	| 'code'
-	| 'subscript'
-	| 'superscript';
-type Pinning = 'none' | 'pinned';
-type ListOrAlignment = 'none' | 'left' | 'center' | 'right' | 'bulleted' | 'numbered';
-
-export const useExampleToolbarState = () => {
-	const [textStyle, setTextStyle] = useState<TextStyle>('normal');
-	const [formatting, setFormatting] = useState<Partial<Record<Formatting, boolean>>>({});
-	const [listOrAlignment, setListOrAlignment] = useState<ListOrAlignment>('none');
-	const [pinning, setPinning] = useState<Pinning>('none');
-	const [lastAction, setLastAction] = useState<string | null>(null);
-
-	const onSetTextStyle = (style: TextStyle) => () => {
-		setTextStyle(style);
-	};
-
-	const onToggleFormatting = (format: Formatting) => () => {
-		setFormatting((prev) => {
-			if (format === 'code') {
-				return {
-					code: !prev.code,
-				};
-			} else if (prev.code) {
-				return prev;
-			}
-			return {
-				...prev,
-				[format]: !prev[format],
-			};
-		});
-	};
-
-	const onToggleListOrAlignment = (newListOrAlignment: ListOrAlignment) => () => {
-		setListOrAlignment((prev) => {
-			const isList = (value: ListOrAlignment) => value === 'bulleted' || value === 'numbered';
-			if (isList(prev) && !isList(newListOrAlignment)) {
-				return prev;
-			}
-			if (prev === newListOrAlignment) {
-				return 'none';
-			}
-			return newListOrAlignment;
-		});
-	};
-
-	const onTogglePinning = () => {
-		setPinning((prev) => (prev === 'none' ? 'pinned' : 'none'));
-	};
-
-	const onClick = (action: string, callback?: () => void) => () => {
-		callback?.();
-		setLastAction(action);
-	};
-
-	console.log('rendering with list or alignment:', listOrAlignment);
-
-	return {
-		textStyle,
-		onSetTextStyle,
-		formatting,
-		onToggleFormatting,
-		listOrAlignment,
-		onToggleListOrAlignment,
-		pinning,
-		onTogglePinning,
-		onClick,
-		lastAction,
-	};
-};

package/examples/toolbar-ui.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-
-import { cssMap } from '@atlaskit/css';
-import { Box } from '@atlaskit/primitives/compiled';
-import { token } from '@atlaskit/tokens';
-
-import { ExampleManuallyComposedToolbar } from './toolbar/examples/ExampleManuallyComposedToolbar';
-
-const styles = cssMap({
-	container: {
-		paddingTop: token('space.400'),
-		paddingRight: token('space.400'),
-		paddingBottom: token('space.400'),
-		paddingLeft: token('space.400'),
-	},
-});
-
-const App = () => {
-	return (
-		<Box xcss={styles.container} as="main">
-			<ExampleManuallyComposedToolbar />
-		</Box>
-	);
-};
-
-export default App;

package/src/hooks/ui-context.tsx

@@ -1,63 +0,0 @@
-import React, { createContext, useContext } from 'react';
-
-import type { OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
-
-export type ToolbarUIContextType = {
-	/**
-	 * Callback for when the dropdown is open/closed. Receives an object with `isOpen` state.
-	 *
-	 * If the dropdown was closed programmatically, the `event` parameter will be `null`.
-	 */
-	onDropdownOpenChanged: (args: OnOpenChangeArgs) => void;
-
-	/**
-	 * Whether to prevent default behavior on mouse down events on ToolbarButton.
-	 */
-	preventDefaultOnMouseDown?: boolean;
-
-	/**
-	 * Indicates whether the toolbar is disabled when the editor is offline.
-	 */
-	isDisabled?: boolean;
-	popupsMountPoint?: HTMLElement;
-};
-
-const ToolbarUIContext = createContext<ToolbarUIContextType>({
-	onDropdownOpenChanged: () => {},
-	preventDefaultOnMouseDown: false,
-	isDisabled: false,
-	popupsMountPoint: undefined,
-});
-
-/**
- * Access consumer specific config and state within a toolbar component
- */
-export const useToolbarUI = () => {
-	const context = useContext(ToolbarUIContext);
-
-	if (!context) {
-		throw new Error('useToolbarUI must be used within ToolbarUIContext');
-	}
-
-	return context;
-};
-
-type ToolbarUIProviderProps = {
-	children: React.ReactNode;
-} & ToolbarUIContextType;
-
-export const ToolbarUIProvider = ({
-	children,
-	onDropdownOpenChanged,
-	preventDefaultOnMouseDown,
-	isDisabled,
-	popupsMountPoint,
-}: ToolbarUIProviderProps) => {
-	return (
-		<ToolbarUIContext.Provider
-			value={{ onDropdownOpenChanged, preventDefaultOnMouseDown, isDisabled, popupsMountPoint }}
-		>
-			{children}
-		</ToolbarUIContext.Provider>
-	);
-};

package/src/index.ts

@@ -1,74 +0,0 @@
-/* eslint-disable @atlaskit/editor/no-re-export */
-export { Toolbar, PrimaryToolbar } from './ui/Toolbar';
-export { ToolbarButton } from './ui/ToolbarButton';
-export { ToolbarButtonGroup } from './ui/ToolbarButtonGroup';
-export { ToolbarDropdownMenu } from './ui/ToolbarDropdownMenu';
-export { ToolbarDropdownItem } from './ui/ToolbarDropdownItem';
-export { ToolbarDropdownItemSection } from './ui/ToolbarDropdownItemSection';
-export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
-export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
-export { ToolbarSection } from './ui/ToolbarSection';
-export { ToolbarTooltip } from './ui/ToolbarTooltip';
-export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
-export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
-
-export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
-export { AIChatIcon } from './ui/icons/AIChatIcon';
-export { AIBriefcaseIcon } from './ui/icons/AIProfessionalIcon';
-export { AICasualIcon } from './ui/icons/AICasualIcon';
-export { AIHeartIcon } from './ui/icons/AIHeartIcon';
-export { AIShortenIcon } from './ui/icons/AIShortenIcon';
-export { AISpellcheckIcon } from './ui/icons/AISpellcheckIcon';
-export { AIChangeToneIcon } from './ui/icons/AIChangeToneIcon';
-export { AILengthenIcon } from './ui/icons/AILengthenIcon';
-export { AISummarizeIcon } from './ui/icons/AISummarizeIcon';
-export { AITranslateIcon } from './ui/icons/AITranslateIcon';
-export { NestedDropdownRightIcon } from './ui/icons/NestedDropdownRightIcon';
-export { AICommandIcon } from './ui/icons/AICommandIcon';
-export { AddIcon } from './ui/icons/AddIcon';
-export { AppsIcon } from './ui/icons/AppsIcon';
-export { BoldIcon } from './ui/icons/BoldIcon';
-export { CommentIcon } from './ui/icons/CommentIcon';
-export { HeadingFiveIcon } from './ui/icons/HeadingFiveIcon';
-export { HeadingFourIcon } from './ui/icons/HeadingFourIcon';
-export { HeadingOneIcon } from './ui/icons/HeadingOneIcon';
-export { HeadingSixIcon } from './ui/icons/HeadingSixIcon';
-export { HeadingThreeIcon } from './ui/icons/HeadingThreeIcon';
-export { HeadingTwoIcon } from './ui/icons/HeadingTwoIcon';
-export { ItalicIcon } from './ui/icons/ItalicIcon';
-export { LinkIcon } from './ui/icons/LinkIcon';
-export { ListBulletedIcon } from './ui/icons/ListBulletedIcon';
-export { ListNumberedIcon } from './ui/icons/ListNumberedIcon';
-export { MoreItemsIcon } from './ui/icons/MoreItemsIcon';
-export { PinIcon } from './ui/icons/PinIcon';
-export { PinnedIcon } from './ui/icons/PinnedIcon';
-export { QuoteIcon } from './ui/icons/QuoteIcon';
-export { TextColorIcon } from './ui/icons/TextColorIcon';
-export { TextIcon } from './ui/icons/TextIcon';
-export { ClearFormattingIcon } from './ui/icons/ClearFormattingIcon';
-export { UnderlineIcon } from './ui/icons/UnderlineIcon';
-export { StrikeThroughIcon } from './ui/icons/StrikeThroughIcon';
-export { CodeIcon } from './ui/icons/CodeIcon';
-export { SubscriptIcon } from './ui/icons/SubscriptIcon';
-export { SuperscriptIcon } from './ui/icons/SuperscriptIcon';
-export { ShowMoreHorizontalIcon } from './ui/icons/ShowMoreHorizontal';
-export { AlignTextLeftIcon } from './ui/icons/AlignTextLeftIcon';
-export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
-export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
-export { IndentIcon } from './ui/icons/IndentIcon';
-export { OutdentIcon } from './ui/icons/OutdentIcon';
-export { EmojiIcon } from './ui/icons/EmojiIcon';
-export { LayoutIcon } from './ui/icons/LayoutIcon';
-export { ImageIcon } from './ui/icons/ImageIcon';
-export { MentionIcon } from './ui/icons/MentionIcon';
-export { TableIcon } from './ui/icons/TableIcon';
-export { TaskIcon } from './ui/icons/TaskIcon';
-export { UndoIcon } from './ui/icons/UndoIcon';
-export { RedoIcon } from './ui/icons/RedoIcon';
-export { HistoryIcon } from './ui/icons/HistoryIcon';
-
-export { default as ColorPalette } from './ui/ColorPalette';
-
-export type { IconComponent } from './types';
-
-export { useToolbarUI, ToolbarUIProvider, type ToolbarUIContextType } from './hooks/ui-context';

package/src/types.ts

@@ -1,3 +0,0 @@
-import { type NewCoreIconProps } from '@atlaskit/icon';
-
-export type IconComponent = (props: NewCoreIconProps) => JSX.Element;

package/src/ui/ColorPalette/Color.tsx

@@ -1,118 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { useCallback, memo } from 'react';
-
-import { css, jsx } from '@compiled/react';
-
-import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
-import { token } from '@atlaskit/tokens';
-import Tooltip from '@atlaskit/tooltip';
-
-import type { ColorProps } from './types';
-
-const buttonWrapperStyles = css({
-	borderColor: 'transparent',
-	borderStyle: 'solid',
-	borderWidth: '1px',
-	display: 'flex',
-	alignItems: 'center',
-	paddingTop: token('space.025', '2px'),
-	paddingRight: token('space.025', '2px'),
-	paddingBottom: token('space.025', '2px'),
-	paddingLeft: token('space.025', '2px'),
-	borderRadius: token('border.radius.100', '4px'),
-	'&:focus-within, &:focus, &:hover': {
-		borderColor: token('color.border'),
-	},
-});
-
-const buttonStyles = css({
-	height: token('space.300', '26px'),
-	width: token('space.300', '26px'),
-	backgroundColor: token('color.background.neutral'),
-	padding: 0,
-	borderRadius: token('border.radius.050', '4px'),
-	border: `1px solid ${token('color.border.inverse')}`,
-	cursor: 'pointer',
-	display: 'block',
-	position: 'relative',
-	'&:focus': {
-		outline: `2px solid ${token('color.border.focused')}`,
-		outlineOffset: token('space.025', '2px'),
-	},
-});
-
-/**
- * Individual color palette item component
- * Displays a single color swatch with tooltip and selection state
- */
-export const Color = memo<ColorProps>(
-	({
-		autoFocus,
-		tabIndex,
-		value,
-		label,
-		isSelected,
-		borderColor,
-		checkMarkColor = token('color.icon.inverse', '#FFFFFF'),
-		hexToPaletteColor,
-		decorator,
-		onClick,
-		onKeyDown,
-	}) => {
-		const colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
-
-		const handleMouseDown = useCallback((e: React.MouseEvent) => {
-			e.preventDefault();
-		}, []);
-
-		const handleClick = useCallback(
-			(e: React.MouseEvent) => {
-				e.preventDefault();
-				onClick(value, label);
-			},
-			[onClick, value, label],
-		);
-
-		const handleKeyDown = useCallback(
-			(e: React.KeyboardEvent) => {
-				if (!onKeyDown) {
-					return;
-				}
-				e.preventDefault();
-				onKeyDown(value, label, e);
-			},
-			[onKeyDown, value, label],
-		);
-
-		return (
-			<Tooltip content={label}>
-				<span css={buttonWrapperStyles}>
-					<button
-						type="button"
-						css={buttonStyles}
-						aria-label={label}
-						role="radio"
-						aria-checked={isSelected}
-						onClick={handleClick}
-						onKeyDown={handleKeyDown}
-						onMouseDown={handleMouseDown}
-						tabIndex={tabIndex}
-						style={{
-							backgroundColor: colorStyle || token('color.background.input', '#FFFFFF'),
-							border: `1px solid ${borderColor}`,
-						}}
-						autoFocus={autoFocus}
-					>
-						{!decorator && isSelected && (
-							<EditorDoneIcon LEGACY_primaryColor={checkMarkColor} label="" />
-						)}
-						{decorator}
-					</button>
-				</span>
-			</Tooltip>
-		);
-	},
-);

package/src/ui/ColorPalette/getColorMessage.ts

@@ -1,27 +0,0 @@
-import { type MessageDescriptor } from 'react-intl-next';
-
-/**
- * Retrieves the appropriate internationalization message for a given color
- * @param messages - Record of color values to message descriptors
- * @param color - The color value to look up
- * @returns The message descriptor or undefined if not found
- */
-export default function getColorMessage(
-	messages: Record<string | number, MessageDescriptor>,
-	color: string,
-): MessageDescriptor | undefined {
-	const message = messages[color as keyof typeof messages];
-
-	if (!message) {
-		// eslint-disable-next-line no-console
-		console.warn(
-			`Color palette does not have an internationalization message for color ${color.toUpperCase()}.
-You must add a message description to properly translate this color.
-Using current label as default message.
-This could have happened when someone changed the 'colorPalette' from 'adf-schema' without updating this file.
-`,
-		);
-	}
-
-	return message;
-}

package/src/ui/ColorPalette/index.tsx

@@ -1,125 +0,0 @@
-import React, { useMemo } from 'react';
-
-import chromatism from 'chromatism';
-import { useIntl } from 'react-intl-next';
-
-import { cssMap } from '@atlaskit/css';
-import { Box } from '@atlaskit/primitives/compiled';
-import { token, useThemeObserver } from '@atlaskit/tokens';
-
-import { Color } from './Color';
-import getColorMessage from './getColorMessage';
-import type { ColorPaletteProps } from './types';
-import {
-	DEFAULT_COLOR_PICKER_COLUMNS,
-	getColorsPerRowFromPalette,
-	getTokenCSSVariableValue,
-} from './utils';
-
-const styles = cssMap({
-	paletteWrapper: {
-		display: 'flex',
-	},
-});
-
-/**
- * For a given color pick the color from a list of colors with
- * the highest contrast
- *
- * @param color color string, supports HEX, RGB, RGBA etc.
- * @param useIconToken boolean, describes if a token should be used for the icon color
- * @return Highest contrast color in pool
- */
-function getCheckMarkColor(color: string, useIconToken: boolean): string {
-	const tokenVal = getTokenCSSVariableValue(color);
-	const colorValue = !!tokenVal ? tokenVal : color;
-
-	// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-	const contrastColor = ['#FFFFFF', '#42526E'].sort(
-		(a, b) => chromatism.difference(b, colorValue) - chromatism.difference(a, colorValue),
-	)[0];
-
-	if (!useIconToken) {
-		return contrastColor;
-	}
-
-	// Use of these token comes from guidance from designers in the Design System team
-	// they are only intended for use with text colors (and there are different tokens
-	// planned to be used when this extended to be used with other palettes).
-	// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-	return contrastColor === '#FFFFFF' ? token('color.icon.inverse') : token('color.icon');
-}
-
-/**
- * ColorPalette component for displaying a grid of selectable colors
- *
- * Features:
- * - Responsive grid layout
- * - Keyboard navigation support
- * - Accessibility compliance (ARIA attributes)
- * - Theme-aware tooltips
- * - Design token integration
- * - Customizable color mapping
- */
-const ColorPalette = ({
-	cols = DEFAULT_COLOR_PICKER_COLUMNS,
-	onClick,
-	onKeyDown,
-	selectedColor,
-	paletteOptions,
-}: ColorPaletteProps) => {
-	const { formatMessage } = useIntl();
-	const { palette, hexToPaletteColor, paletteColorTooltipMessages } = paletteOptions;
-
-	const { colorMode: tokenTheme } = useThemeObserver();
-	const useIconToken = !!hexToPaletteColor;
-
-	const colorsPerRow = useMemo(() => {
-		return getColorsPerRowFromPalette(palette, cols);
-	}, [palette, cols]);
-
-	return (
-		<>
-			{colorsPerRow.map((row) => (
-				<Box xcss={styles.paletteWrapper} key={`row-first-color-${row[0].value}`} role="radiogroup">
-					{row.map(({ value, label, border, message, decorator }) => {
-						let tooltipMessage = message;
-
-						// Override with theme-specific tooltip messages if provided
-						if (paletteColorTooltipMessages) {
-							if (tokenTheme === 'dark') {
-								tooltipMessage = getColorMessage(
-									paletteColorTooltipMessages.dark,
-									value.toUpperCase(),
-								);
-							}
-							if (tokenTheme === 'light') {
-								tooltipMessage = getColorMessage(
-									paletteColorTooltipMessages.light,
-									value.toUpperCase(),
-								);
-							}
-						}
-
-						return (
-							<Color
-								key={value}
-								value={value}
-								borderColor={border}
-								label={tooltipMessage ? formatMessage(tooltipMessage) : label}
-								onClick={onClick}
-								onKeyDown={onKeyDown}
-								isSelected={value === selectedColor}
-								checkMarkColor={getCheckMarkColor(value, useIconToken)}
-								hexToPaletteColor={hexToPaletteColor}
-								decorator={decorator}
-							/>
-						);
-					})}
-				</Box>
-			))}
-		</>
-	);
-};
-
-export default ColorPalette;

package/src/ui/ColorPalette/types.ts

@@ -1,96 +0,0 @@
-import { type ReactElement } from 'react';
-
-import { type MessageDescriptor } from 'react-intl-next';
-
-/**
- * Represents a single color in the palette
- */
-export interface PaletteColor {
-	/** The color value (hex, token, etc.) */
-	value: string;
-	/** Display label for the color */
-	label: string;
-	/** Border color for the color swatch */
-	border: string;
-	/** Optional internationalization message */
-	message?: MessageDescriptor;
-	/** Optional decorator element to display instead of checkmark */
-	decorator?: ReactElement;
-}
-
-/**
- * Array of palette colors
- */
-export type Palette = Array<PaletteColor>;
-
-/**
- * Tooltip messages for different themes
- */
-export type PaletteTooltipMessages = {
-	dark: Record<string, MessageDescriptor>;
-	light: Record<string, MessageDescriptor>;
-};
-
-/**
- * Configuration options for the color palette
- */
-export interface PaletteOptions {
-	/** Array of colors to display */
-	palette: PaletteColor[];
-	/**
-	 * Function to convert hex codes to design system tokens
-	 * Different color palettes may use different mapping functions
-	 */
-	hexToPaletteColor?: (hexColor: string) => string | undefined;
-	/**
-	 * Tooltip messages for different color themes
-	 * Consumer determines which tooltip messages to use
-	 */
-	paletteColorTooltipMessages?: PaletteTooltipMessages;
-}
-
-/**
- * Props for the main ColorPalette component
- */
-export interface ColorPaletteProps {
-	/** Currently selected color value */
-	selectedColor: string | null;
-	/** Callback when a color is clicked */
-	onClick: (value: string, label: string) => void;
-	/** Optional callback for keyboard navigation */
-	onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
-	/** Number of columns in the palette grid */
-	cols?: number;
-	/** Optional CSS class name */
-	className?: string;
-	/** Palette configuration options */
-	paletteOptions: PaletteOptions;
-}
-
-/**
- * Props for individual color palette items
- */
-export interface ColorProps {
-	/** The color value */
-	value: string;
-	/** Display label for accessibility */
-	label: string;
-	/** Tab index for keyboard navigation */
-	tabIndex?: number;
-	/** Whether this color is currently selected */
-	isSelected?: boolean;
-	/** Click handler */
-	onClick: (value: string, label: string) => void;
-	/** Keyboard event handler */
-	onKeyDown?: (value: string, label: string, event: React.KeyboardEvent) => void;
-	/** Border color for the swatch */
-	borderColor: string;
-	/** Color for the checkmark icon */
-	checkMarkColor?: string;
-	/** Whether to auto-focus this item */
-	autoFocus?: boolean;
-	/** Function to convert hex to palette color */
-	hexToPaletteColor?: (hexColor: string) => string | undefined;
-	/** Optional decorator element */
-	decorator?: ReactElement;
-}