@livepreso/react-plugin-textfield 0.0.2

package/components/TableToolbar.js

@@ -0,0 +1,41 @@
+import React from "react";
+
+import { useTransitions } from "@livepreso/content-react";
+
+import { BubbleMenu } from "./BubbleMenu.js";
+import { EditorToolbar } from "./editor-toolbars/EditorToolbar.js";
+
+export function TableToolbar({
+	editor,
+	editorState,
+	userSelections,
+	configuration = [],
+	maskSelector,
+}) {
+	const { exited } = useTransitions();
+
+	if (exited) {
+		return null;
+	}
+
+	return (
+		<BubbleMenu
+			editor={editor}
+			options={{
+				placement: "bottom-start",
+				closestSelector: "table",
+				maskSelector,
+			}}
+			shouldShow={({ editor }) => {
+				return editor.isFocused && editor.isActive("table");
+			}}
+		>
+			<EditorToolbar
+				configuration={configuration}
+				editor={editor}
+				editorState={editorState}
+				userSelections={userSelections}
+			/>
+		</BubbleMenu>
+	);
+}

package/components/Tooltip.js

@@ -0,0 +1,34 @@
+// your-tooltip.jsx
+import React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import style from "./Tooltip.module.scss";
+
+export function Tooltip({
+	children,
+	content,
+	open,
+	defaultOpen,
+	onOpenChange,
+	...props
+}) {
+	return (
+		<TooltipPrimitive.Root
+			open={open}
+			defaultOpen={defaultOpen}
+			onOpenChange={onOpenChange}
+		>
+			<TooltipPrimitive.Trigger asChild>
+				<span>{children}</span>
+			</TooltipPrimitive.Trigger>
+			<TooltipPrimitive.Content
+				side="top"
+				align="center"
+				{...props}
+				className={style.content}
+			>
+				{content}
+				<TooltipPrimitive.Arrow width={11} height={5} className={style.arrow} />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Root>
+	);
+}

package/components/Tooltip.module.scss

@@ -0,0 +1,87 @@
+@import "./style.module.scss";
+
+$background_colour: var(--sp-toolbar-color);
+
+:global(.sp-presenter-overlay) {
+	.content {
+		position: relative;
+		top: -12px;
+		border-radius: 4px;
+		padding: 6px 10px;
+		font-size: 12px;
+		line-height: 1;
+		color: var(--sp-toolbar-color-white);
+		background-color: $background_colour;
+		box-shadow:
+			hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+			hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+		user-select: none;
+		animation-duration: 400ms;
+		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+		will-change: transform, opacity;
+
+		&[data-state="delayed-open"] {
+			animation-name: slideUpAndFade;
+		}
+		&[data-state="delayed-open"][data-side="top"] {
+			animation-name: slideUpAndFade;
+		}
+		&[data-state="delayed-open"][data-side="right"] {
+			animation-name: slideRightAndFade;
+		}
+		&[data-state="delayed-open"][data-side="bottom"] {
+			animation-name: slideDownAndFade;
+		}
+		&[data-state="delayed-open"][data-side="left"] {
+			animation-name: slideLeftAndFade;
+		}
+	}
+
+	.arrow {
+		fill: $background_colour;
+	}
+}
+
+@keyframes slideUpAndFade {
+	from {
+		opacity: 0;
+		transform: translateY(2px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes slideRightAndFade {
+	from {
+		opacity: 0;
+		transform: translateX(-2px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+@keyframes slideDownAndFade {
+	from {
+		opacity: 0;
+		transform: translateY(-2px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes slideLeftAndFade {
+	from {
+		opacity: 0;
+		transform: translateX(2px);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}

package/components/VerticalAlignToggle.js

@@ -0,0 +1,65 @@
+import React from "react";
+
+import icons from "../icons";
+import { Toolbar, Tooltip } from "radix-ui";
+import { ToolbarToggleGroup } from "./editor-toolbars/ToolbarToggleGroup";
+import toolbarBaseStyle from "./editor-toolbars/EditorToolbar.module.scss";
+import classNames from "classnames";
+
+/**
+ * A component that renders a toggle group for vertical alignment options.
+ *
+ * @param {Object} props - The component props
+ * @param {string} props.id - The unique identifier for the toggle group
+ * @param {string} props.className - CSS class name to apply to the toolbar
+ * @param {Function} props.onChange - Callback function triggered when the alignment selection changes
+ * @param {string} props.value - The currently selected vertical alignment value
+ * @returns {React.Element} A toolbar component containing vertical alignment toggle options
+ */
+
+export function VerticalAlignToggle({
+	id,
+	className,
+	onChange = () => {},
+	value,
+}) {
+	return (
+		<Tooltip.Provider delayDuration={800} skipDelayDuration={500}>
+			<Toolbar.Root className={classNames(toolbarBaseStyle.root, className)}>
+				<ToolbarToggleGroup
+					key={id}
+					label="Vertical alignment"
+					type="single"
+					value={value}
+					options={[
+						{
+							id: "align-top",
+							tooltip: "Align top",
+							label: "Top",
+							value: "top",
+							icon: <icons.VerticalAlignTop />,
+						},
+						{
+							id: "align-middle",
+							tooltip: "Align middle",
+							label: "Middle",
+							value: "middle",
+							icon: <icons.VerticalAlignCenter />,
+						},
+						{
+							id: "align-bottom",
+							tooltip: "Align bottom",
+							label: "Bottom",
+							value: "bottom",
+							icon: <icons.VerticalAlignBottom />,
+						},
+					]}
+					onValueChange={(value) => {
+						onChange(value);
+					}}
+					defaultValue="top"
+				/>
+			</Toolbar.Root>
+		</Tooltip.Provider>
+	);
+}

package/components/color-picker/ColorPicker.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+import style from "./ColorPicker.module.scss";
+import { ColorPickerChip } from "./ColorPickerChip";
+
+export function ColorPicker({
+	className,
+	colors = [],
+	onChange = () => {},
+	value,
+}) {
+	function handleChange(color) {
+		onChange(color);
+	}
+
+	return (
+		<div className={style.options}>
+			{colors.map((color, idx) => (
+				<ColorPickerChip
+					key={`${color}_${idx}`}
+					selected={value === color}
+					color={color}
+					onClick={() => handleChange(color)}
+				/>
+			))}
+		</div>
+	);
+}

package/components/color-picker/ColorPicker.module.scss

@@ -0,0 +1,8 @@
+:global(.sp-presenter-overlay) {
+	.options {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		width: 180px;
+	}
+}

package/components/color-picker/ColorPickerChip.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+import classNames from "classnames";
+
+import style from "./ColorPickerChip.module.scss";
+
+export function ColorPickerChip({
+	className,
+	color = "#000000",
+	selected = false,
+	onClick,
+}) {
+	return (
+		<div
+			onClick={onClick}
+			className={classNames(style.colorPickerChip, className, {
+				[style.selected]: selected,
+			})}
+			style={{ backgroundColor: color }}
+		/>
+	);
+}

package/components/color-picker/ColorPickerChip.module.scss

@@ -0,0 +1,25 @@
+:global(.sp-presenter-overlay) {
+	.color-picker-chip {
+		width: 30px;
+		height: 30px;
+		border: 0;
+		transition:
+			transform 100ms ease-out,
+			border-width 100ms ease-out;
+		cursor: pointer;
+
+		&:hover {
+			border: 1px solid var(--sp-toolbar-highlight-color);
+			transform: scale(0.8);
+		}
+
+		&.selected {
+			border: 1px solid var(--sp-toolbar-highlight-color);
+			transform: scale(0.8);
+
+			&:hover {
+				transform: scale(0.6);
+			}
+		}
+	}
+}

package/components/color-picker/ColorPickerCombo.js

@@ -0,0 +1,45 @@
+import React from "react";
+import classNames from "classnames";
+
+import { ColorPicker } from "./ColorPicker";
+import { Popover } from "../Popover";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { ToolbarButton } from "../editor-toolbars/ToolbarButton";
+import { TextColorIcon } from "./TextColorIcon";
+import toolbarStyle from "../editor-toolbars/EditorToolbar.module.scss";
+import style from "./ColorPickerCombo.module.scss";
+
+export function ColorPickerCombo({
+	colors,
+	onChange,
+	value,
+	pickerValue,
+	disabled,
+}) {
+	return (
+		<div className={style.container}>
+			<ToolbarButton
+				className={style.button}
+				icon={<TextColorIcon color={value} />}
+				onClick={() => onChange(value)}
+				disabled={disabled}
+			/>
+			<Popover
+				triggerClassName={classNames(
+					toolbarStyle.item,
+					style.button,
+					style.dropdown,
+				)}
+				trigger={<ChevronDownIcon disabled={disabled} />}
+				disabled={disabled}
+			>
+				<ColorPicker
+					colors={colors}
+					// null and empty string may be valid for "no color"
+					value={typeof pickerValue === "undefined" ? value : pickerValue}
+					onChange={onChange}
+				/>
+			</Popover>
+		</div>
+	);
+}

package/components/color-picker/ColorPickerCombo.module.scss

@@ -0,0 +1,23 @@
+@import "../style.module.scss";
+
+:global(.sp-presenter-overlay) {
+	.container {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		height: $item-height;
+		border-radius: 4px;
+		background-color: var(--sp-toolbar-select-trigger);
+
+		.button {
+			margin: 0;
+			line-height: 0;
+
+			&.dropdown {
+				width: 25px;
+				padding: 0;
+			}
+		}
+	}
+}

package/components/color-picker/TextColorIcon.js

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+export function TextColorIcon({ color, ...props }) {
+	return (
+		<svg
+			id="Layer_1"
+			xmlns="http://www.w3.org/2000/svg"
+			version="1.1"
+			height="24px"
+			width="24px"
+			viewBox="0 0 24 24"
+			{...props}
+		>
+			<rect x="2.5" y="20.3" width="19" height="3.7" fill={color} />
+			<path d="M12.9,3.5h-1.7l-5.3,13.5h1.8l1.4-3.6h6l1.3,3.6h1.8L12.9,3.5ZM9.5,11.9l2.4-6.3h.1l2.4,6.3h-4.9Z" />
+		</svg>
+	);
+}

package/components/editor-toolbars/EditorMenu.js

@@ -0,0 +1,104 @@
+import React, { Fragment } from "react";
+import classNames from "classnames";
+import { DropdownMenu } from "radix-ui";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+
+import { TOOLBAR_COMPONENT_TYPES } from "../../constants";
+import { MenuItem } from "./MenuItem";
+import { SubMenu } from "./SubMenu";
+import { getState } from "./utils";
+import style from "./EditorMenu.module.scss";
+
+export function EditorMenu({
+	configuration,
+	editor,
+	editorState,
+	userSelections,
+}) {
+	const div = window.Bridge.UI.overlay;
+	const states = { editorState, userSelections };
+
+	return (
+		<DropdownMenu.Root aria-label="Formatting options">
+			<DropdownMenu.Trigger className={classNames(style.trigger, style.light)}>
+				<ChevronDownIcon />
+			</DropdownMenu.Trigger>
+
+			<DropdownMenu.Portal container={div}>
+				<DropdownMenu.Content
+					className={style.content}
+					onCloseAutoFocus={(e) => e.preventDefault()}
+					align="start"
+					sideOffset={5}
+					collisionBoundary={div}
+				>
+					{configuration.flatMap(({ id: groupId, items = [] }, index) => [
+						index !== 0 && (
+							<DropdownMenu.Separator
+								key={`separator-${groupId}`}
+								className={style.separator}
+							/>
+						),
+						...items.map(
+							({
+								id,
+								type,
+								label,
+								icon: iconComponent,
+								renderIcon,
+								...itemsProps
+							}) => {
+								const icon = renderIcon ? renderIcon(editor) : iconComponent;
+
+								if (type === TOOLBAR_COMPONENT_TYPES.CUSTOM) {
+									const { renderContent } = itemsProps;
+									return (
+										<Fragment key={id}>
+											{renderContent(editor, states)}
+										</Fragment>
+									);
+								}
+
+								if (type === TOOLBAR_COMPONENT_TYPES.SUB) {
+									const { items, renderItem } = itemsProps;
+									const { isEnabled, value } = getState(id, editorState);
+
+									return (
+										<SubMenu
+											key={id}
+											icon={icon}
+											label={label}
+											items={items}
+											disabled={!isEnabled}
+											renderItem={(item) =>
+												renderItem(item, { editor, value, ...states })
+											}
+										/>
+									);
+								}
+
+								if (type === TOOLBAR_COMPONENT_TYPES.BUTTON) {
+									const { command = () => {} } = itemsProps;
+									const { isEnabled } = getState(id, editorState);
+
+									return (
+										<MenuItem
+											key={id}
+											icon={icon}
+											label={label}
+											className={style.item}
+											onClick={() => command(editor, states)}
+											disabled={!isEnabled}
+										/>
+									);
+								}
+
+								return null;
+							},
+						),
+					])}
+				</DropdownMenu.Content>
+			</DropdownMenu.Portal>
+		</DropdownMenu.Root>
+	);
+}

package/components/editor-toolbars/EditorMenu.module.scss

@@ -0,0 +1,96 @@
+@import "../style.module.scss";
+
+:global(.sp-presenter-overlay) {
+	button.trigger {
+		@extend %shadow;
+		padding: 5px;
+		min-width: max-content;
+		border-radius: 6px;
+		height: auto;
+		cursor: pointer;
+		line-height: 0;
+
+		&[data-disabled] {
+			@extend %disabled;
+		}
+
+		&.light {
+			background-color: white;
+		}
+	}
+
+	.content {
+		@extend %root;
+		flex-direction: column;
+		// min-height: max-content;
+		overflow-y: auto;
+		overflow-x: hidden;
+		max-height: var(--radix-dropdown-menu-content-available-height);
+		// overflow: hidden;
+
+		.item {
+			@extend %item-vertical;
+			display: flex;
+			flex-direction: row;
+			flex: 0 0 auto;
+			align-items: center;
+			justify-content: flex-start;
+
+			&:first-child {
+				padding-top: 8px;
+			}
+
+			&:last-child {
+				padding-bottom: 8px;
+			}
+
+			&-label {
+				flex: 1;
+			}
+
+			&-icon {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: 24px;
+				height: 24px;
+
+				&.item-icon-right {
+					justify-content: flex-end;
+				}
+			}
+
+			&-label,
+			&-icon {
+				margin: 0 4px;
+
+				&:first-child {
+					margin-left: 0;
+				}
+
+				&:last-child {
+					margin-right: 0;
+				}
+			}
+
+			&:hover {
+				@extend %hover;
+			}
+
+			&:focus {
+				@extend %focus;
+				box-shadow: none;
+			}
+
+			&[data-disabled],
+			&[disabled] {
+				@extend %disabled;
+			}
+		}
+
+		.separator {
+			@extend %separator-horizontal;
+			flex: none;
+		}
+	}
+}