@atlaskit/editor-toolbar 0.0.0

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-toolbar

package/README.md

@@ -0,0 +1,3 @@
+# EditorToolbar
+
+Common UI for Toolbars across the platform

package/examples/basic.tsx

@@ -0,0 +1,3 @@
+export default function Basic() {
+	return null;
+}

package/examples/config.jsonc

@@ -0,0 +1,8 @@
+/**
+ * This file is used by the test scaling project to optimise test result caching
+ * Examples that are used by tests affect the outcome of tests so must be included when hashing
+ * They are defined here so the hashing algorithm doesn't need to search test files for example usage each time
+ */
+{
+	"testExamples": ["basic.tsx"],
+}

package/examples/toolbar/examples/ExampleManuallyComposedToolbar.tsx

@@ -0,0 +1,336 @@
+import React from 'react';
+
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+import { ColorIndicatorWrapper } from '../../../src/ui/ColorIndicatorWrapper';
+import { AddIcon } from '../../../src/ui/icons/AddIcon';
+import { AIAdjustLengthIcon } from '../../../src/ui/icons/AIAdjustLengthIcon';
+import { AIChatIcon } from '../../../src/ui/icons/AIChatIcon';
+import { AICommandIcon } from '../../../src/ui/icons/AICommandIcon';
+import { AppsIcon } from '../../../src/ui/icons/AppsIcon';
+import { BoldIcon } from '../../../src/ui/icons/BoldIcon';
+import { CommentIcon } from '../../../src/ui/icons/CommentIcon';
+import { HeadingFiveIcon } from '../../../src/ui/icons/HeadingFiveIcon';
+import { HeadingFourIcon } from '../../../src/ui/icons/HeadingFourIcon';
+import { HeadingOneIcon } from '../../../src/ui/icons/HeadingOneIcon';
+import { HeadingSixIcon } from '../../../src/ui/icons/HeadingSixIcon';
+import { HeadingThreeIcon } from '../../../src/ui/icons/HeadingThreeIcon';
+import { HeadingTwoIcon } from '../../../src/ui/icons/HeadingTwoIcon';
+import { ItalicIcon } from '../../../src/ui/icons/ItalicIcon';
+import { LinkIcon } from '../../../src/ui/icons/LinkIcon';
+import { ListBulletedIcon } from '../../../src/ui/icons/ListBulletedIcon';
+import { ListNumberedIcon } from '../../../src/ui/icons/ListNumberedIcon';
+import { MoreItemsIcon } from '../../../src/ui/icons/MoreItemsIcon';
+import { PinIcon } from '../../../src/ui/icons/PinIcon';
+import { PinnedIcon } from '../../../src/ui/icons/PinnedIcon';
+import { QuoteIcon } from '../../../src/ui/icons/QuoteIcon';
+import { TextColorIcon } from '../../../src/ui/icons/TextColorIcon';
+import { TextIcon } from '../../../src/ui/icons/TextIcon';
+import { Toolbar } from '../../../src/ui/Toolbar';
+import { ToolbarButton } from '../../../src/ui/ToolbarButton';
+import { ToolbarButtonGroup } from '../../../src/ui/ToolbarButtonGroup';
+import { ToolbarDivider } from '../../../src/ui/ToolbarDivider';
+import { ToolbarDropdownItem } from '../../../src/ui/ToolbarDropdownItem';
+import { ToolbarDropdownMenu } from '../../../src/ui/ToolbarDropdownMenu';
+import { ToolbarKeyboardShortcutHint } from '../../../src/ui/ToolbarKeyboardShortcutHint';
+import { ToolbarSection } from '../../../src/ui/ToolbarSection';
+
+import { useExampleToolbarState } from './useExampleToolbarState';
+
+export const ExampleManuallyComposedToolbar = () => {
+	const {
+		textStyle,
+		onSetTextStyle,
+		formatting,
+		onToggleFormatting,
+		listOrAlignment,
+		onToggleListOrAlignment,
+		pinning,
+		onTogglePinning,
+		onClick,
+		lastAction,
+	} = useExampleToolbarState();
+
+	return (
+		<>
+			<Toolbar label="Editor Toolbar">
+				<ToolbarSection>
+					<ToolbarButtonGroup>
+						<ToolbarButton
+							icon={AIChatIcon}
+							label="Ask Rovo"
+							onClick={onClick('Ask Rovo')}
+							groupLocation="start"
+						>
+							Ask Rovo
+						</ToolbarButton>
+						<ToolbarDropdownMenu icon={MoreItemsIcon} label="More formatting" groupLocation="end">
+							<ToolbarDropdownItem
+								elemBefore={<AIAdjustLengthIcon label="Adjust length" />}
+								onClick={onClick('Adjust length')}
+							>
+								Adjust length
+							</ToolbarDropdownItem>
+						</ToolbarDropdownMenu>
+					</ToolbarButtonGroup>
+
+					<ToolbarButtonGroup>
+						<ToolbarButton
+							icon={AICommandIcon}
+							label="Improve writing"
+							onClick={onClick('Improve writing')}
+						>
+							Improve writing
+						</ToolbarButton>
+					</ToolbarButtonGroup>
+				</ToolbarSection>
+
+				<ToolbarDivider />
+
+				<ToolbarSection>
+					<ToolbarButtonGroup>
+						<ToolbarDropdownMenu
+							icon={
+								{
+									none: TextIcon,
+									normal: TextIcon,
+									heading1: HeadingOneIcon,
+									heading2: HeadingTwoIcon,
+									heading3: HeadingThreeIcon,
+									heading4: HeadingFourIcon,
+									heading5: HeadingFiveIcon,
+									heading6: HeadingSixIcon,
+									quote: QuoteIcon,
+								}[textStyle]
+							}
+							label="Text styles"
+						>
+							<ToolbarDropdownItem
+								elemBefore={<TextIcon label="Normal text" />}
+								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥0" />}
+								onClick={onClick('Normal text', onSetTextStyle('normal'))}
+								isSelected={textStyle === 'normal'}
+								textStyle="normal"
+							>
+								Normal text
+							</ToolbarDropdownItem>
+							<ToolbarDropdownItem
+								elemBefore={<HeadingOneIcon label="Heading One" />}
+								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥1" />}
+								onClick={onClick('Heading one', onSetTextStyle('heading1'))}
+								isSelected={textStyle === 'heading1'}
+								textStyle="heading1"
+							>
+								Heading 1
+							</ToolbarDropdownItem>
+							<ToolbarDropdownItem
+								elemBefore={<HeadingTwoIcon label="Heading Two" />}
+								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥2" />}
+								onClick={onClick('Heading two', onSetTextStyle('heading2'))}
+								isSelected={textStyle === 'heading2'}
+								textStyle="heading2"
+							>
+								Heading 2
+							</ToolbarDropdownItem>
+							<ToolbarDropdownItem
+								elemBefore={<HeadingThreeIcon label="Heading Three" />}
+								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥3" />}
+								onClick={onClick('Heading three', onSetTextStyle('heading3'))}
+								isSelected={textStyle === 'heading3'}
+								textStyle="heading3"
+							>
+								Heading 3
+							</ToolbarDropdownItem>
+							<ToolbarDropdownItem
+								elemBefore={<HeadingFourIcon label="Heading Four" />}
+								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥4" />}
+								onClick={onClick('Heading four', onSetTextStyle('heading4'))}
+								isSelected={textStyle === 'heading4'}
+								textStyle="heading4"
+							>
+								Heading 4
+							</ToolbarDropdownItem>
+							<ToolbarDropdownItem
+								elemBefore={<HeadingFiveIcon label="Heading Five" />}
+								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥5" />}
+								onClick={onClick('Heading five', onSetTextStyle('heading5'))}
+								isSelected={textStyle === 'heading5'}
+								textStyle="heading5"
+							>
+								Heading 5
+							</ToolbarDropdownItem>
+							<ToolbarDropdownItem
+								elemBefore={<HeadingSixIcon label="Heading Six" />}
+								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥6" />}
+								onClick={onClick('Heading six', onSetTextStyle('heading6'))}
+								isSelected={textStyle === 'heading6'}
+								textStyle="heading6"
+							>
+								Heading 6
+							</ToolbarDropdownItem>
+							<ToolbarDropdownItem
+								elemBefore={<QuoteIcon label="Quote" />}
+								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⌥9" />}
+								onClick={onClick('Quote', onSetTextStyle('quote'))}
+								isSelected={textStyle === 'quote'}
+								textStyle="normal"
+							>
+								Quote
+							</ToolbarDropdownItem>
+						</ToolbarDropdownMenu>
+					</ToolbarButtonGroup>
+
+					<ToolbarButtonGroup>
+						<ToolbarButton
+							icon={formatting.italic && !formatting.bold ? ItalicIcon : BoldIcon}
+							label={formatting.italic && !formatting.bold ? 'Italic' : 'Bold'}
+							onClick={onClick(
+								formatting.italic && !formatting.bold ? 'Italic' : 'Bold',
+								onToggleFormatting(formatting.italic && !formatting.bold ? 'italic' : 'bold'),
+							)}
+							groupLocation="start"
+							isSelected={formatting.bold || formatting.italic}
+						/>
+						<ToolbarDropdownMenu icon={MoreItemsIcon} label="More formatting" groupLocation="end">
+							<ToolbarDropdownItem
+								elemBefore={<BoldIcon label="Bold" />}
+								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘B" />}
+								onClick={onClick('Bold', onToggleFormatting('bold'))}
+								isSelected={formatting.bold}
+							>
+								Bold
+							</ToolbarDropdownItem>
+							<ToolbarDropdownItem
+								elemBefore={<ItalicIcon label="Italic" />}
+								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘I" />}
+								onClick={onClick('Italic', onToggleFormatting('italic'))}
+								isSelected={formatting.italic}
+							>
+								Italic
+							</ToolbarDropdownItem>
+						</ToolbarDropdownMenu>
+					</ToolbarButtonGroup>
+
+					<ToolbarButtonGroup>
+						<ToolbarDropdownMenu
+							icon={({ label, color, shouldRecommendSmallIcon, size, spacing, testId }) => (
+								<ColorIndicatorWrapper color={token('color.border.accent.blue')}>
+									<TextColorIcon
+										label={label}
+										color={color}
+										shouldRecommendSmallIcon={shouldRecommendSmallIcon}
+										size={size}
+										spacing={spacing}
+										testId={testId}
+									/>
+								</ColorIndicatorWrapper>
+							)}
+							label="Text color"
+						>
+							<ToolbarDropdownItem
+								elemBefore={<TextIcon label="Text color" />}
+								onClick={onClick('Text color')}
+							>
+								Text color
+							</ToolbarDropdownItem>
+						</ToolbarDropdownMenu>
+					</ToolbarButtonGroup>
+
+					<ToolbarButtonGroup>
+						<ToolbarButton
+							icon={listOrAlignment === 'numbered' ? ListNumberedIcon : ListBulletedIcon}
+							label={listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list'}
+							onClick={onClick(
+								listOrAlignment === 'numbered' ? 'Numbered list' : 'Bulleted list',
+								onToggleListOrAlignment(listOrAlignment === 'numbered' ? 'numbered' : 'bulleted'),
+							)}
+							groupLocation="start"
+							isSelected={listOrAlignment !== 'none'}
+						/>
+						<ToolbarDropdownMenu
+							icon={MoreItemsIcon}
+							label="Lists, indentation and alignment"
+							groupLocation="end"
+						>
+							<ToolbarDropdownItem
+								elemBefore={<ListBulletedIcon label="Bulleted list" />}
+								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⇧8" />}
+								onClick={onClick('Bulleted list', onToggleListOrAlignment('bulleted'))}
+								isSelected={listOrAlignment === 'bulleted'}
+							>
+								Bulleted list
+							</ToolbarDropdownItem>
+							<ToolbarDropdownItem
+								elemBefore={<ListNumberedIcon label="Numbered list" />}
+								elemAfter={<ToolbarKeyboardShortcutHint shortcut="⌘⇧7" />}
+								onClick={onClick('Numbered list', onToggleListOrAlignment('numbered'))}
+								isSelected={listOrAlignment === 'numbered'}
+							>
+								Numbered list
+							</ToolbarDropdownItem>
+						</ToolbarDropdownMenu>
+					</ToolbarButtonGroup>
+				</ToolbarSection>
+
+				<ToolbarDivider />
+
+				<ToolbarSection>
+					<ToolbarButtonGroup>
+						<ToolbarButton icon={LinkIcon} label="Link" onClick={onClick('Link')} />
+					</ToolbarButtonGroup>
+				</ToolbarSection>
+
+				<ToolbarDivider />
+
+				<ToolbarSection>
+					<ToolbarButtonGroup>
+						<ToolbarButton icon={CommentIcon} label="Comment" onClick={onClick('Comment')} />
+					</ToolbarButtonGroup>
+				</ToolbarSection>
+
+				<ToolbarDivider />
+
+				<ToolbarSection>
+					<ToolbarButtonGroup>
+						<ToolbarDropdownMenu icon={AppsIcon} label="Apps and extensions">
+							<ToolbarDropdownItem
+								elemBefore={<AddIcon label="Create Jira work item" />}
+								onClick={onClick('Create Jira work item')}
+							>
+								Create Jira work item
+							</ToolbarDropdownItem>
+						</ToolbarDropdownMenu>
+					</ToolbarButtonGroup>
+				</ToolbarSection>
+
+				<ToolbarDivider />
+
+				<ToolbarSection>
+					<ToolbarButtonGroup>
+						<ToolbarButton
+							icon={pinning === 'pinned' ? PinnedIcon : PinIcon}
+							label={pinning === 'pinned' ? 'Unpin toolbar' : 'Pin toolbar'}
+							onClick={onClick(
+								pinning === 'pinned' ? 'Unpin toolbar' : 'Pin toolbar',
+								onTogglePinning,
+							)}
+						/>
+					</ToolbarButtonGroup>
+				</ToolbarSection>
+			</Toolbar>
+			<Box as="pre">
+				{`
+Last action: ${lastAction || 'None'}
+Text style:  ${textStyle}
+Formatting:  ${Object.entries(formatting)
+					.filter(([, value]) => value)
+					.map(([key]) => key)
+					.join(', ')}
+List/Align:  ${listOrAlignment}
+Pinning:     ${pinning}
+				`}
+			</Box>
+		</>
+	);
+};

package/examples/toolbar/examples/useExampleToolbarState.tsx

@@ -0,0 +1,86 @@
+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

@@ -0,0 +1,26 @@
+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/package.json

@@ -0,0 +1,86 @@
+{
+	"name": "@atlaskit/editor-toolbar",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	},
+	"version": "0.0.0",
+	"description": "Common UI for Toolbars across the platform",
+	"atlassian": {
+		"team": "Editor"
+	},
+	"repository": "https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo",
+	"author": "Atlassian Pty Ltd",
+	"license": "Apache-2.0",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"module:es2019": "dist/es2019/index.js",
+	"types": "dist/types/index.d.ts",
+	"sideEffects": [
+		"*.compiled.css"
+	],
+	"atlaskit:src": "src/index.ts",
+	"af:exports": {
+		".": "./src/index.ts"
+	},
+	"dependencies": {
+		"@atlaskit/badge": "^18.1.0",
+		"@atlaskit/button": "^23.2.0",
+		"@atlaskit/css": "^0.12.0",
+		"@atlaskit/dropdown-menu": "^16.1.0",
+		"@atlaskit/icon": "^27.3.0",
+		"@atlaskit/icon-lab": "^5.1.0",
+		"@atlaskit/logo": "^19.5.0",
+		"@atlaskit/popup": "^4.3.0",
+		"@atlaskit/primitives": "^14.10.0",
+		"@atlaskit/tokens": "^5.5.0",
+		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.3"
+	},
+	"peerDependencies": {
+		"react": "^18.2.0"
+	},
+	"devDependencies": {
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/ssr": "workspace:^",
+		"@atlaskit/visual-regression": "workspace:^",
+		"@testing-library/react": "^13.4.0",
+		"react-dom": "^18.2.0",
+		"typescript": "~5.4.2"
+	},
+	"techstack": {
+		"@atlassian/frontend": {
+			"import-structure": [
+				"atlassian-conventions"
+			],
+			"circular-dependencies": [
+				"file-and-folder-level"
+			]
+		},
+		"@repo/internal": {
+			"dom-events": "use-bind-event-listener",
+			"analytics": [
+				"analytics-next"
+			],
+			"design-tokens": [
+				"color"
+			],
+			"theming": [
+				"react-context"
+			],
+			"ui-components": [
+				"lite-mode"
+			],
+			"deprecation": [
+				"no-deprecated-imports"
+			],
+			"styling": [
+				"static",
+				"compiled"
+			],
+			"imports": [
+				"import-no-extraneous-disable-for-examples-and-docs"
+			]
+		}
+	}
+}

package/src/index.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { Toolbar } from './ui/Toolbar';
+export { ToolbarButton } from './ui/ToolbarButton';
+export { ToolbarDropdownItem } from './ui/ToolbarDropdownItem';
+export { ToolbarDropdownMenu } from './ui/ToolbarDropdownMenu';
+export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
+export { ToolbarSection } from './ui/ToolbarSection';
+
+export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
+export { AIChatIcon } from './ui/icons/AIChatIcon';
+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 type { ToolbarButtonGroupLocation } from './types';

package/src/types.ts

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

package/src/ui/ColorIndicatorWrapper.tsx

@@ -0,0 +1,25 @@
+import React, { type ReactNode } from 'react';
+
+import { cssMap } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+type ColorIndicatorWrapperProps = {
+	children?: ReactNode;
+	color?: string;
+};
+
+const styles = cssMap({
+	indicator: {
+		height: '16px',
+		borderBottomColor: token('color.border.bold'),
+		borderBottomStyle: 'solid',
+		borderBottomWidth: token('border.width.indicator'),
+	},
+});
+
+export const ColorIndicatorWrapper = ({ color, children }: ColorIndicatorWrapperProps) => (
+	<Box xcss={styles.indicator} style={{ borderBottomColor: color }} as="span">
+		{children}
+	</Box>
+);

package/src/ui/Toolbar.tsx

@@ -0,0 +1,31 @@
+import React, { type ReactNode } from 'react';
+
+import { cssMap } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+const styles = cssMap({
+	toolbar: {
+		paddingRight: token('space.050'),
+		paddingLeft: token('space.050'),
+		boxShadow: token('elevation.shadow.overlay'),
+		borderRadius: '6px',
+		height: '40px',
+		width: 'min-content',
+		display: 'flex',
+		alignItems: 'center',
+	},
+});
+
+type ToolbarProps = {
+	children?: ReactNode;
+	label: string;
+};
+
+export const Toolbar = ({ children, label }: ToolbarProps) => {
+	return (
+		<Box xcss={styles.toolbar} role="toolbar" aria-label={label}>
+			{children}
+		</Box>
+	);
+};

package/src/ui/ToolbarButton.tsx

@@ -0,0 +1,127 @@
+import React, { forwardRef, type ReactNode, type Ref } from 'react';
+
+import { cssMap, cx } from '@atlaskit/css';
+import { type TriggerProps } from '@atlaskit/popup';
+import { Pressable } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+import { type IconComponent, type ToolbarButtonGroupLocation } from '../types';
+
+const styles = cssMap({
+	button: {
+		display: 'flex',
+		gap: token('space.075'),
+		backgroundColor: token('color.background.neutral.subtle'),
+		whiteSpace: 'nowrap',
+		alignItems: 'center',
+		justifyContent: 'center',
+		borderRadius: token('border.radius.100'),
+		minHeight: '32px',
+		color: token('color.text.subtle'),
+		fontWeight: token('font.weight.medium'),
+		paddingLeft: token('space.100'),
+		paddingRight: token('space.100'),
+
+		'&:hover': {
+			backgroundColor: token('color.background.neutral.subtle.hovered'),
+		},
+
+		'&:active': {
+			backgroundColor: token('color.background.neutral.subtle.pressed'),
+		},
+	},
+	selected: {
+		backgroundColor: token('color.background.selected'),
+
+		'&:hover': {
+			backgroundColor: token('color.background.selected.hovered'),
+		},
+
+		'&:active': {
+			backgroundColor: token('color.background.selected.pressed'),
+		},
+	},
+	groupStart: {
+		borderTopRightRadius: '0px',
+		borderBottomRightRadius: '0px',
+		justifyContent: 'flex-end',
+		paddingLeft: token('space.075'),
+		paddingRight: token('space.025'),
+	},
+	groupMiddle: {
+		borderTopLeftRadius: '0px',
+		borderBottomLeftRadius: '0px',
+		borderTopRightRadius: '0px',
+		borderBottomRightRadius: '0px',
+		paddingLeft: token('space.050'),
+		paddingRight: token('space.050'),
+	},
+	groupEnd: {
+		borderTopLeftRadius: '0px',
+		borderBottomLeftRadius: '0px',
+		justifyContent: 'flex-start',
+		paddingLeft: token('space.025'),
+		paddingRight: token('space.075'),
+	},
+});
+
+type ToolbarButtonProps = Partial<TriggerProps> & {
+	children?: ReactNode;
+	isSelected?: boolean;
+	onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+	onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+	onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+	testId?: string;
+	label: string;
+	icon: IconComponent;
+	groupLocation?: ToolbarButtonGroupLocation;
+};
+
+export const ToolbarButton = forwardRef(
+	(
+		{
+			icon: IconComponent,
+			label,
+			children,
+			onClick,
+			isSelected,
+			'aria-expanded': ariaExpanded,
+			'aria-haspopup': ariaHasPopup,
+			'aria-controls': ariaControls,
+			'data-ds--level': dataDsLevel,
+			onBlur,
+			onFocus,
+			testId,
+			groupLocation,
+		}: ToolbarButtonProps,
+		ref: Ref<HTMLButtonElement>,
+	) => {
+		return (
+			<Pressable
+				ref={ref}
+				xcss={cx(
+					styles.button,
+					isSelected && styles.selected,
+					groupLocation === 'start' && styles.groupStart,
+					groupLocation === 'middle' && styles.groupMiddle,
+					groupLocation === 'end' && styles.groupEnd,
+				)}
+				aria-expanded={ariaExpanded}
+				aria-haspopup={ariaHasPopup}
+				aria-controls={ariaControls}
+				data-ds--level={dataDsLevel}
+				onClick={onClick}
+				onBlur={onBlur}
+				onFocus={onFocus}
+				testId={testId}
+			>
+				<IconComponent
+					label={label}
+					size="medium"
+					color={isSelected ? token('color.icon.selected') : token('color.icon.subtle')}
+				/>
+				{children}
+			</Pressable>
+		);
+	},
+);

package/src/ui/ToolbarButtonGroup.tsx

@@ -0,0 +1,18 @@
+import React, { type ReactNode } from 'react';
+
+import { cssMap } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+
+const styles = cssMap({
+	container: {
+		display: 'flex',
+	},
+});
+
+type ToolbarButtonGroupProps = {
+	children?: ReactNode;
+};
+
+export const ToolbarButtonGroup = ({ children }: ToolbarButtonGroupProps) => {
+	return <Box xcss={styles.container}>{children}</Box>;
+};

package/src/ui/ToolbarDivider.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { cssMap } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+const styles = cssMap({
+	divider: {
+		height: '16px',
+		borderLeftColor: token('color.border'),
+		borderLeftStyle: 'solid',
+		borderLeftWidth: token('border.width'),
+		marginLeft: token('space.050'),
+		marginRight: token('space.050'),
+	},
+});
+
+export const ToolbarDivider = () => {
+	return <Box xcss={styles.divider} />;
+};

package/src/ui/ToolbarDropdownItem.tsx

@@ -0,0 +1,121 @@
+import React, { type ReactNode } from 'react';
+
+import { cssMap, cx } from '@atlaskit/css';
+import { DropdownItem } from '@atlaskit/dropdown-menu';
+import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import { token } from '@atlaskit/tokens';
+
+type TextStyle =
+	| 'normal'
+	| 'heading1'
+	| 'heading2'
+	| 'heading3'
+	| 'heading4'
+	| 'heading5'
+	| 'heading6';
+
+const styles = cssMap({
+	toolbarDropdownItem: {
+		position: 'relative',
+		backgroundColor: token('color.background.neutral.subtle'),
+		width: '100%',
+		minHeight: '36px',
+		paddingLeft: token('space.150'),
+		paddingRight: token('space.150'),
+
+		'&:hover': {
+			backgroundColor: token('color.background.neutral.subtle.hovered'),
+		},
+
+		'&:active': {
+			backgroundColor: token('color.background.neutral.subtle.pressed'),
+		},
+	},
+	selected: {
+		backgroundColor: token('color.background.selected'),
+		color: token('color.text.selected'),
+
+		'&:hover': {
+			backgroundColor: token('color.background.selected.hovered'),
+		},
+
+		'&:active': {
+			backgroundColor: token('color.background.selected.pressed'),
+		},
+	},
+	normal: {
+		font: token('font.body'),
+	},
+	heading1: {
+		font: token('font.heading.xlarge'),
+	},
+	heading2: {
+		font: token('font.heading.large'),
+	},
+	heading3: {
+		font: token('font.heading.medium'),
+	},
+	heading4: {
+		font: token('font.heading.small'),
+	},
+	heading5: {
+		font: token('font.heading.xsmall'),
+	},
+	heading6: {
+		font: token('font.heading.xxsmall'),
+	},
+});
+
+type ToolbarDropdownItemProps = {
+	onClick: () => void;
+	elemBefore?: ReactNode;
+	elemAfter?: ReactNode;
+	isSelected?: boolean;
+	children?: React.ReactNode;
+	textStyle?: TextStyle;
+};
+
+export const ToolbarDropdownItem = ({
+	onClick,
+	elemBefore,
+	elemAfter,
+	isSelected,
+	children,
+	textStyle = 'normal',
+}: ToolbarDropdownItemProps) => {
+	return (
+		<DropdownItem
+			onClick={onClick}
+			elemBefore={elemBefore}
+			elemAfter={elemAfter}
+			isSelected={isSelected}
+			component={({
+				children,
+				'data-testid': testId,
+				disabled,
+				draggable,
+				onClick,
+				onDragStart,
+				onMouseDown,
+				ref,
+				tabIndex,
+			}) => (
+				<Pressable
+					testId={testId}
+					xcss={cx(styles.toolbarDropdownItem, isSelected && styles.selected)}
+					isDisabled={disabled}
+					draggable={draggable}
+					onClick={onClick}
+					onDragStart={onDragStart}
+					onMouseDown={onMouseDown}
+					tabIndex={tabIndex}
+					ref={ref}
+				>
+					{children}
+				</Pressable>
+			)}
+		>
+			<Box xcss={styles[textStyle]}>{children}</Box>
+		</DropdownItem>
+	);
+};

package/src/ui/ToolbarDropdownMenu.tsx

@@ -0,0 +1,44 @@
+import React, { type ReactNode } from 'react';
+
+import DropdownMenu from '@atlaskit/dropdown-menu';
+
+import { type IconComponent, type ToolbarButtonGroupLocation } from '../types';
+
+import { ToolbarButton } from './ToolbarButton';
+
+type ToolbarDropdownMenuProps = {
+	icon: IconComponent;
+	label: string;
+	children?: ReactNode;
+	groupLocation?: ToolbarButtonGroupLocation;
+};
+
+export const ToolbarDropdownMenu = ({
+	icon,
+	label,
+	groupLocation,
+	children,
+}: ToolbarDropdownMenuProps) => {
+	return (
+		<DropdownMenu<HTMLButtonElement>
+			trigger={(triggerProps) => (
+				<ToolbarButton
+					ref={triggerProps.triggerRef}
+					isSelected={triggerProps.isSelected}
+					aria-expanded={triggerProps['aria-expanded']}
+					aria-haspopup={triggerProps['aria-haspopup']}
+					aria-controls={triggerProps['aria-controls']}
+					onBlur={triggerProps.onBlur}
+					onClick={triggerProps.onClick}
+					onFocus={triggerProps.onFocus}
+					testId={triggerProps.testId}
+					icon={icon}
+					label={label}
+					groupLocation={groupLocation}
+				/>
+			)}
+		>
+			{children}
+		</DropdownMenu>
+	);
+};

package/src/ui/ToolbarKeyboardShortcutHint.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import Badge from '@atlaskit/badge';
+
+type ToolbarKeyboardShortcutHintProps = {
+	shortcut: string;
+};
+
+export const ToolbarKeyboardShortcutHint = ({ shortcut }: ToolbarKeyboardShortcutHintProps) => {
+	return <Badge>{shortcut}</Badge>;
+};

package/src/ui/ToolbarSection.tsx

@@ -0,0 +1,19 @@
+import React, { type ReactNode } from 'react';
+
+import { cssMap } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+
+const styles = cssMap({
+	container: {
+		display: 'flex',
+		alignItems: 'center',
+	},
+});
+
+type ToolbarSectionProps = {
+	children?: ReactNode;
+};
+
+export const ToolbarSection = ({ children }: ToolbarSectionProps) => {
+	return <Box xcss={styles.container}>{children}</Box>;
+};

package/src/ui/icons/AIAdjustLengthIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AIAdjustLengthIcon } from '@atlaskit/icon-lab/core/text-adjust-length';

package/src/ui/icons/AIChatIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { RovoIcon as RovoLogoIcon } from '@atlaskit/logo';
+
+type AIChatIconProps = {
+	label: string;
+	testId?: string;
+};
+
+export const AIChatIcon = ({ label, testId }: AIChatIconProps) => (
+	<RovoLogoIcon label={label} testId={testId} size="small" appearance="neutral" />
+);

package/src/ui/icons/AICommandIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AICommandIcon } from '@atlaskit/icon/core/magic-wand';

package/src/ui/icons/AddIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AddIcon } from '@atlaskit/icon/core/add';

package/src/ui/icons/AppsIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as AppsIcon } from '@atlaskit/icon/core/apps';

package/src/ui/icons/BoldIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as BoldIcon } from '@atlaskit/icon/core/text-bold';

package/src/ui/icons/CommentIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as CommentIcon } from '@atlaskit/icon/core/comment';

package/src/ui/icons/HeadingFiveIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as HeadingFiveIcon } from '@atlaskit/icon-lab/core/text-heading-five';

package/src/ui/icons/HeadingFourIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as HeadingFourIcon } from '@atlaskit/icon-lab/core/text-heading-four';

package/src/ui/icons/HeadingOneIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as HeadingOneIcon } from '@atlaskit/icon-lab/core/text-heading-one';

package/src/ui/icons/HeadingSixIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as HeadingSixIcon } from '@atlaskit/icon-lab/core/text-heading-six';

package/src/ui/icons/HeadingThreeIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as HeadingThreeIcon } from '@atlaskit/icon-lab/core/text-heading-three';

package/src/ui/icons/HeadingTwoIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as HeadingTwoIcon } from '@atlaskit/icon-lab/core/text-heading-two';

package/src/ui/icons/ItalicIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as ItalicIcon } from '@atlaskit/icon/core/text-italic';

package/src/ui/icons/LinkIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as LinkIcon } from '@atlaskit/icon/core/link';

package/src/ui/icons/ListBulletedIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as ListBulletedIcon } from '@atlaskit/icon/core/list-bulleted';

package/src/ui/icons/ListNumberedIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as ListNumberedIcon } from '@atlaskit/icon/core/list-numbered';

package/src/ui/icons/MoreItemsIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Icon from '@atlaskit/icon/core/chevron-down';
+
+import { type IconComponent } from '../../types';
+
+export const MoreItemsIcon: IconComponent = ({
+	label,
+	testId,
+	color,
+	shouldRecommendSmallIcon,
+	spacing,
+}) => (
+	<Icon
+		label={label}
+		testId={testId}
+		color={color}
+		shouldRecommendSmallIcon={shouldRecommendSmallIcon}
+		spacing={spacing}
+		size="small"
+	/>
+);

package/src/ui/icons/PinIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as PinIcon } from '@atlaskit/icon/core/pin';

package/src/ui/icons/PinnedIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as PinnedIcon } from '@atlaskit/icon/core/pin-filled';

package/src/ui/icons/QuoteIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as QuoteIcon } from '@atlaskit/icon/core/quotation-mark';

package/src/ui/icons/TextColorIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as TextColorIcon } from '@atlaskit/icon/core/text-style';

package/src/ui/icons/TextIcon.tsx

@@ -0,0 +1,2 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+export { default as TextIcon } from '@atlaskit/icon/core/text';

package/tsconfig.app.json

@@ -0,0 +1,63 @@
+{
+	"extends": "../../../tsconfig.base.json",
+	"include": ["./src/**/*.ts", "./src/**/*.tsx"],
+	"exclude": [
+		"**/docs/**/*",
+		"**/__tests__/**/*",
+		"**/vr-tests/**/*",
+		"**/__perf__/**/*",
+		"**/*.test.*",
+		"**/test.*",
+		"**/test-*",
+		"**/examples.ts",
+		"**/examples.tsx",
+		"**/examples/*.ts",
+		"**/examples/*.tsx",
+		"**/examples/**/*.ts",
+		"**/examples/**/*.tsx",
+		"**/storybook/**/*",
+		"**/constellation/**/*",
+		".storybook/*",
+		"./__fixtures__/**/*",
+		"./__generated__/**/*",
+		"./mocks/**/*",
+		"./__mocks__/**/*",
+		"**/mock.*",
+		"**/codemods/**/*.ts",
+		"**/codemods/**/*.tsx"
+	],
+	"compilerOptions": {
+		"composite": true,
+		"outDir": "../../../tsDist/@atlaskit__editor-toolbar/app"
+	},
+	"references": [
+		{
+			"path": "../../design-system/badge/tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/css/tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/dropdown-menu/tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/icon/tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/icon-lab/tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/logo/tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/popup/tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/primitives/tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/tokens/tsconfig.app.json"
+		}
+	],
+	"files": []
+}

package/tsconfig.dev.json

@@ -0,0 +1,47 @@
+{
+	"extends": "../../../tsconfig.base.json",
+	"include": [
+		"**/docs/**/*",
+		"**/__tests__/**/*",
+		"**/vr-tests/**/*",
+		"**/__perf__/**/*",
+		"**/*.test.*",
+		"**/test.*",
+		"**/test-*",
+		"**/examples.ts",
+		"**/examples.tsx",
+		"**/examples/*.ts",
+		"**/examples/*.tsx",
+		"**/examples/**/*.ts",
+		"**/examples/**/*.tsx",
+		"**/storybook/**/*",
+		"**/constellation/**/*",
+		".storybook/*",
+		"./__fixtures__/**/*",
+		"./__generated__/**/*",
+		"./mocks/**/*",
+		"./__mocks__/**/*",
+		"**/mock.*",
+		"**/codemods/**/*.ts",
+		"**/codemods/**/*.tsx"
+	],
+	"exclude": ["./dist/**/*", "./build/**/*", "./node_modules/**/*"],
+	"compilerOptions": {
+		"composite": true,
+		"outDir": "../../../tsDist/@atlaskit__editor-toolbar/dev"
+	},
+	"references": [
+		{
+			"path": "./tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/css/tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/primitives/tsconfig.app.json"
+		},
+		{
+			"path": "../../design-system/tokens/tsconfig.app.json"
+		}
+	]
+}

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../../tsconfig.json",
+  "include": [
+    "__tests__/**/*.ts",
+    "__tests__/**/*.tsx",
+    "examples/**/*.ts",
+    "examples/**/*.tsx",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "compilerOptions": {}
+}