@livepreso/react-plugin-textfield 0.0.2

package/components/editor-toolbars/EditorToolbar.js

@@ -0,0 +1,146 @@
+import React from "react";
+import { Toolbar, Tooltip as TooltipPrimitive } from "radix-ui";
+
+import { Tooltip } from "../Tooltip";
+import { TOOLBAR_COMPONENT_TYPES } from "../../constants";
+import { Popover } from "../Popover";
+import { getState } from "./utils";
+import { ToolbarButton } from "./ToolbarButton";
+import { ToolbarToggle } from "./ToolbarToggle";
+import { ToolbarToggleGroup } from "./ToolbarToggleGroup";
+import style from "./EditorToolbar.module.scss";
+
+export function EditorToolbar({
+	configuration,
+	editor,
+	editorState,
+	userSelections,
+}) {
+	const states = { editorState, userSelections };
+
+	return (
+		<TooltipPrimitive.Provider delayDuration={800} skipDelayDuration={500}>
+			<Toolbar.Root className={style.root} aria-label="Formatting options">
+				{configuration.flatMap(({ id: groupId, items = [] }, index) => [
+					index !== 0 && (
+						<Toolbar.Separator
+							key={`separator-${groupId}`}
+							className={style.separator}
+						/>
+					),
+					<div key={groupId} className={style.itemGroup}>
+						{items.map((item = {}) => {
+							const {
+								id,
+								type,
+								label,
+								tooltip,
+								icon: iconComponent,
+								renderIcon,
+								...itemsProps
+							} = item;
+							const { isEnabled, isActive, value } = getState(id, editorState);
+							const itemState = { isEnabled, isActive, value };
+
+							const icon = renderIcon ? renderIcon(editor) : iconComponent;
+
+							if (type === TOOLBAR_COMPONENT_TYPES.CUSTOM) {
+								const { renderContent } = itemsProps;
+								return (
+									<Tooltip content={label} key={id}>
+										<span>
+											{renderContent({
+												editor,
+												...states,
+												...itemState,
+											})}
+										</span>
+									</Tooltip>
+								);
+							}
+
+							if (type === TOOLBAR_COMPONENT_TYPES.BUTTON) {
+								const { command = () => {} } = itemsProps;
+
+								return (
+									<Tooltip content={tooltip || label} key={id}>
+										<ToolbarButton
+											label={label}
+											icon={icon}
+											disabled={!isEnabled}
+											onClick={() => command(editor, states)}
+										/>
+									</Tooltip>
+								);
+							}
+
+							if (type === TOOLBAR_COMPONENT_TYPES.POPOVER) {
+								const { renderContent } = itemsProps;
+
+								const trigger = (
+									<ToolbarButton key={id} icon={icon} disabled={!isEnabled} />
+								);
+
+								return (
+									<Tooltip content={tooltip || label} key={id}>
+										<Popover trigger={trigger}>
+											{renderContent({
+												editor,
+												...states,
+												...itemState,
+											})}
+										</Popover>
+									</Tooltip>
+								);
+							}
+
+							if (type === TOOLBAR_COMPONENT_TYPES.TOGGLE) {
+								const { command = () => {} } = itemsProps;
+
+								return (
+									<Tooltip content={tooltip || label} key={id}>
+										<ToolbarToggle
+											label={label}
+											icon={icon}
+											pressed={isActive}
+											disabled={!isEnabled}
+											onPressedChange={() => {
+												command(editor, states);
+												return true;
+											}}
+										/>
+									</Tooltip>
+								);
+							}
+
+							if (type === TOOLBAR_COMPONENT_TYPES.TOGGLE_GROUP) {
+								const {
+									command = () => {},
+									defaultValue,
+									options,
+								} = itemsProps;
+
+								return (
+									<ToolbarToggleGroup
+										key={id}
+										label={label}
+										type="single"
+										defaultValue={defaultValue}
+										onValueChange={(value) =>
+											command(editor, { value, ...states })
+										}
+										options={options.map(({ id: toggleId, ...opt } = {}) => {
+											return { id: toggleId, disabled: !isEnabled, ...opt };
+										})}
+									/>
+								);
+							}
+
+							return null;
+						})}
+					</div>,
+				])}
+			</Toolbar.Root>
+		</TooltipPrimitive.Provider>
+	);
+}

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

@@ -0,0 +1,75 @@
+@import "../style.module.scss";
+
+:global(.sp-presenter-overlay) {
+	.root {
+		@extend %root;
+		padding: 6px;
+		// min-width: 100%;
+		// min-width: 0;
+		// min-height: 0;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		row-gap: 8px;
+
+		// Loz: gets rid of the forced height applied to spans
+		// I don't like it...
+		> span {
+			line-height: 0;
+		}
+
+		.item-group {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			height: $item-height;
+		}
+
+		.item {
+			@extend %item;
+			flex: 0 0 auto;
+			height: $item-height;
+			padding: 0 5px;
+			margin: 0 2px;
+			border-radius: 4px;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+
+			&:hover {
+				@extend %hover;
+			}
+
+			&:focus {
+				@extend %focus;
+			}
+
+			&.toggle {
+				&[data-state="on"] {
+					@extend %active;
+				}
+			}
+
+			&[data-disabled],
+			&[disabled] {
+				@extend %disabled;
+			}
+		}
+
+		.toggle-group {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			// Loz: gets rid of the forced height applied to spans
+			// I don't like it...
+			> span {
+				line-height: 0;
+			}
+		}
+
+		.separator {
+			@extend %separator-vertical;
+		}
+	}
+}

package/components/editor-toolbars/MenuItem.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { DropdownMenu } from "radix-ui";
+
+import style from "./EditorMenu.module.scss";
+
+export function MenuItem({
+	label,
+	icon,
+	disabled = false,
+	onClick = () => {},
+}) {
+	return (
+		<DropdownMenu.Item
+			className={style.item}
+			value={label}
+			aria-label={label}
+			disabled={disabled}
+			onClick={onClick}
+		>
+			<div className={style.itemIcon}>{icon}</div>
+			<div className={style.itemLabel}>{label}</div>
+		</DropdownMenu.Item>
+	);
+}

package/components/editor-toolbars/SubMenu.js

@@ -0,0 +1,50 @@
+import React, { Fragment } from "react";
+import classNames from "classnames";
+import { DropdownMenu } from "radix-ui";
+
+import { ChevronRightIcon } from "@radix-ui/react-icons";
+import { MenuItem } from "./MenuItem";
+import style from "./EditorMenu.module.scss";
+
+export function SubMenu({
+	label,
+	icon,
+	items = [],
+	disabled = false,
+	renderItem = null,
+}) {
+	const div = window.Bridge.UI.overlay;
+
+	return (
+		<DropdownMenu.Sub>
+			<DropdownMenu.SubTrigger className={style.item}>
+				<div className={style.itemIcon}>{icon}</div>
+				<div className={style.itemLabel}>{label}</div>
+				<div className={classNames(style.itemIcon, style.itemIconRight)}>
+					<ChevronRightIcon />
+				</div>
+			</DropdownMenu.SubTrigger>
+
+			<DropdownMenu.Portal container={div}>
+				<DropdownMenu.SubContent
+					className={style.content}
+					sideOffset={-30}
+					alignOffset={-5}
+					collisionBoundary={div}
+				>
+					{items.map((item) => {
+						if (typeof renderItem === "function") {
+							return (
+								<Fragment key={item.id}>
+									{renderItem({ ...item, disabled })}
+								</Fragment>
+							);
+						}
+
+						return <MenuItem key={item.id} disabled={disabled} {...item} />;
+					})}
+				</DropdownMenu.SubContent>
+			</DropdownMenu.Portal>
+		</DropdownMenu.Sub>
+	);
+}

package/components/editor-toolbars/ToolbarButton.js

@@ -0,0 +1,26 @@
+import React from "react";
+import classNames from "classnames";
+import { Toolbar } from "radix-ui";
+
+import style from "./EditorToolbar.module.scss";
+
+export const ToolbarButton = React.forwardRef(
+	(
+		{ label, icon, className, disabled, onClick = () => {}, ...props },
+		forwardedRef,
+	) => {
+		return (
+			<Toolbar.Button
+				ref={forwardedRef}
+				className={classNames(className, style.item)}
+				value={label}
+				aria-label={label}
+				disabled={disabled}
+				onClick={onClick}
+				{...props}
+			>
+				{icon}
+			</Toolbar.Button>
+		);
+	},
+);

package/components/editor-toolbars/ToolbarToggle.js

@@ -0,0 +1,35 @@
+import React from "react";
+import classNames from "classnames";
+import { Toggle } from "radix-ui";
+
+import style from "./EditorToolbar.module.scss";
+
+export const ToolbarToggle = React.forwardRef(
+	(
+		{
+			label,
+			icon,
+			pressed,
+			disabled,
+			onClick = () => {},
+			onPressedChange = () => {},
+			...props
+		},
+		forwardedRef,
+	) => {
+		return (
+			<Toggle.Root
+				ref={forwardedRef}
+				className={classNames(style.item, style.toggle)}
+				aria-label={label}
+				pressed={pressed}
+				disabled={disabled}
+				onPressedChange={onPressedChange}
+				onClick={onClick}
+				{...props}
+			>
+				{icon}
+			</Toggle.Root>
+		);
+	},
+);

package/components/editor-toolbars/ToolbarToggleGroup.js

@@ -0,0 +1,43 @@
+import React from "react";
+import classNames from "classnames";
+import { Toolbar } from "radix-ui";
+
+import { Tooltip } from "../Tooltip";
+import style from "./EditorToolbar.module.scss";
+
+export function ToolbarToggleGroup({
+	label,
+	defaultValue,
+	type = "single",
+	options = [],
+	value,
+	onValueChange = () => {},
+}) {
+	return (
+		<Toolbar.ToggleGroup
+			type={type}
+			defaultValue={defaultValue}
+			aria-label={label}
+			className={style.toggleGroup}
+			onValueChange={onValueChange}
+			value={value}
+		>
+			{options.map(
+				({ id, value, icon, label: toggleLabel, tooltip, disabled } = {}) => {
+					return (
+						<Tooltip key={id} content={tooltip || toggleLabel}>
+							<Toolbar.ToggleItem
+								className={classNames(style.item, style.toggle)}
+								disabled={disabled}
+								value={value}
+								aria-label={`${label} aligned`}
+							>
+								{icon}
+							</Toolbar.ToggleItem>
+						</Tooltip>
+					);
+				},
+			)}
+		</Toolbar.ToggleGroup>
+	);
+}

package/components/editor-toolbars/utils.js

@@ -0,0 +1,7 @@
+export function getState(id, state) {
+	return {
+		isEnabled: state[id]?.enabled ?? true,
+		isActive: state[id]?.active ?? false,
+		value: state[id]?.value ?? null,
+	};
+}

package/components/hooks/use-presenter.js

@@ -0,0 +1,5 @@
+export function UsePresenter() {
+	const div = window.document.getElementById("presenter");
+
+	return { div };
+}

package/components/style.module.scss

@@ -0,0 +1,63 @@
+$item-height: 30px;
+
+%shadow {
+	box-shadow: 0 2px 10px var(--sp-toolbar-highlight-color);
+}
+
+%root {
+	@extend %shadow;
+	display: flex;
+	border-radius: 6px;
+	color: var(--sp-toolbar-color);
+	background-color: var(--sp-toolbar-bg-color);
+}
+
+%separator {
+	background-color: var(--sp-toolbar-separator-color);
+}
+
+%separator-vertical {
+	@extend %separator;
+	width: 1px;
+	height: $item-height;
+	margin: 0 8px;
+}
+
+%separator-horizontal {
+	@extend %separator;
+	height: 1px;
+	width: 100%;
+	margin: 6px 0;
+}
+
+%item {
+	font-size: 13px;
+	line-height: 1em;
+	color: var(--sp-toolbar-color);
+	cursor: pointer;
+}
+
+%item-vertical {
+	@extend %item;
+	padding: 4px 12px 4px 8px;
+	min-height: 32px;
+}
+
+%disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+%hover {
+	border: 0;
+	background-color: var(--sp-toolbar-hover-color);
+}
+
+%focus {
+	position: relative;
+	box-shadow: 0 0 0 1px var(--sp-toolbar-hover-color);
+}
+
+%active {
+	background-color: var(--sp-toolbar-active-color);
+}

package/components/tiptap/ListItem.js

@@ -0,0 +1,5 @@
+import { ListItem as ListItemBase } from "@tiptap/extension-list";
+
+export const ListItem = ListItemBase.extend({
+	content: "block*",
+});