@livepreso/react-plugin-textfield 0.0.2

package/components/LinkEditDialog.js

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from "react";
+import { Dialog } from "radix-ui";
+import style from "./LinkEditDialog.module.scss";
+import classNames from "classnames";
+import { Close } from "../icons";
+import { ToolbarToggle } from "./editor-toolbars/ToolbarToggle";
+
+const LinkEditDialog = ({
+	icon,
+	active,
+	label,
+	id,
+	onChange,
+	value = "https://www.livepreso.com/",
+}) => {
+	const div = window.Bridge.UI.overlay;
+
+	const [urlInput, setUrlInput] = useState("");
+	const [open, setOpen] = useState(false);
+
+	useEffect(() => setUrlInput(value || ""), [value]);
+
+	const submitInput = () => {
+		onChange(urlInput);
+	};
+
+	const checkForEnter = (event) => {
+		if (event.key === "Enter") {
+			onChange(urlInput);
+			setOpen(false);
+		}
+	};
+
+	return (
+		<Dialog.Root open={open} onOpenChange={setOpen}>
+			<Dialog.Trigger asChild>
+				<ToolbarToggle
+					key={id}
+					label={label}
+					icon={icon}
+					disabled={false}
+					pressed={active}
+				/>
+			</Dialog.Trigger>
+
+			<Dialog.Portal container={div}>
+				<Dialog.Overlay className={style.overlay} />
+				<Dialog.Content className={style.content}>
+					<div className={style.titleRow}>
+						<Dialog.Title className={style.title}>
+							Insert / Edit link
+						</Dialog.Title>
+
+						<Dialog.Close asChild>
+							<button className={classNames(style.button, style.iconButton)}>
+								<Close />
+							</button>
+						</Dialog.Close>
+					</div>
+
+					<Dialog.Description className={style.description}>
+						Links should include full https:// syntax. Click save when you're
+						done.
+					</Dialog.Description>
+
+					<fieldset className={style.fieldset}>
+						<label className={style.label} htmlFor="name">
+							URL
+						</label>
+						<input
+							className={style.input}
+							id="url"
+							value={urlInput}
+							onChange={(e) => {
+								let value = e.target.value;
+								if (!value.startsWith("http")) value = `https://${value}`;
+								setUrlInput(value);
+							}}
+							onKeyDown={checkForEnter}
+						/>
+					</fieldset>
+
+					<div className={style.buttonRow}>
+						<Dialog.Close asChild>
+							<button className={style.button} aria-label="Close">
+								Cancel
+							</button>
+						</Dialog.Close>
+						<Dialog.Close asChild>
+							<button
+								aria-label="Save"
+								onClick={submitInput}
+								className={classNames(style.button, style.primary)}
+							>
+								Save
+							</button>
+						</Dialog.Close>
+					</div>
+				</Dialog.Content>
+			</Dialog.Portal>
+		</Dialog.Root>
+	);
+};
+
+export default LinkEditDialog;

package/components/LinkEditDialog.module.scss

@@ -0,0 +1,171 @@
+@import "./style.module.scss";
+
+:global(.sp-presenter-overlay) {
+	.overlay {
+		background-color: var(--sp-toolbar-modal-bg-color);
+		position: fixed;
+		inset: 0;
+		animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+	}
+
+	// Specificity below is required to beat the unset
+	// found in index.module.scss
+	.content {
+		@extend %root;
+		position: fixed;
+		top: 50%;
+		left: 50%;
+		flex-direction: column;
+		transform: translate(-50%, -50%);
+		width: 90vw;
+		max-width: 500px;
+		max-height: 85vh;
+		padding: 15px;
+		animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+
+		&:focus {
+			outline: none;
+		}
+
+		.title-row {
+			display: flex;
+			justify-content: space-between;
+		}
+
+		.title {
+			margin: 0;
+			color: var(--sp-toolbar-color);
+			font-size: 20px;
+			line-height: 1.3em;
+			font-weight: 400;
+		}
+
+		.description {
+			margin: 10px 0 20px;
+			color: var(--sp-toolbar-highlight-color);
+			font-size: 14px;
+			line-height: 1.3em;
+			font-weight: 400;
+		}
+
+		.fieldset {
+			display: flex;
+			flex-direction: column;
+			margin-bottom: 15px;
+		}
+
+		.label {
+			color: var(--sp-toolbar-color);
+			font-size: 14px;
+			line-height: 1.3em;
+			font-weight: 400;
+		}
+
+		.input {
+			flex: none;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: 4px;
+			padding: 0 10px;
+			font-size: 16px;
+			line-height: 24;
+			font-weight: 400;
+			color: var(--sp-toolbar-color);
+			border: 1px solid var(--sp-toolbar-highlight-color);
+			// box-shadow: 0 0 0 1px var(--violet-7);
+			height: 35px;
+		}
+		.input:focus {
+			border: 1px solid var(--sp-toolbar-focus-color);
+			// box-shadow: 0 0 0 2px var(--violet-8);
+		}
+
+		.button-row {
+			display: flex;
+			margin-top: 10px;
+			justify-content: flex-end;
+
+			.button {
+				&:not(:first-child) {
+					margin-left: 8px;
+				}
+			}
+		}
+
+		.button {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: 6px;
+			padding: 4px 16px;
+			font-size: 14px;
+			line-height: 24px;
+			font-weight: 700;
+			user-select: none;
+			color: var(--sp-toolbar-color);
+			background-color: var(--sp-toolbar-button);
+			cursor: pointer;
+
+			&:hover {
+				background-color: var(--sp-toolbar-button-hover);
+			}
+
+			&:focus:not(:focus-visible) {
+				outline: 0;
+			}
+
+			&:focus-visible {
+				outline: 2px solid var(--sp-toolbar-button);
+				outline-offset: 2px;
+			}
+
+			&[data-disabled],
+			&[disabled] {
+				@extend %disabled;
+			}
+
+			&.primary {
+				color: var(--sp-toolbar-color-white);
+				background-color: var(--sp-toolbar-button-primary);
+
+				&:focus-visible {
+					outline-color: var(--sp-toolbar-button-primary);
+				}
+
+				&:hover {
+					background-color: var(--sp-toolbar-button-primary-hover);
+				}
+			}
+
+			&.icon-button {
+				padding: 6px;
+				background-color: transparent;
+
+				&:hover {
+					background-color: var(--sp-toolbar-button-hover);
+				}
+			}
+		}
+	}
+}
+
+@keyframes overlayShow {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes contentShow {
+	from {
+		opacity: 0;
+		transform: translate(-50%, -48%) scale(0.96);
+	}
+	to {
+		opacity: 1;
+		transform: translate(-50%, -50%) scale(1);
+	}
+}

package/components/Popover.js

@@ -0,0 +1,43 @@
+import React from "react";
+
+import style from "./Popover.module.scss";
+import { Popover as PopoverBase } from "radix-ui";
+
+export function Popover({
+	tooltip,
+	colors = [],
+	active,
+	onChange,
+	// Use this when the popover appears within a dropdown menu (or similar)
+	// to prevent it closing when the mouse moved outside of the trigger.
+	preventInteractOutside = false,
+	trigger = "open",
+	triggerClassName,
+	children,
+}) {
+	const div = window.Bridge.UI.overlay;
+
+	return (
+		<PopoverBase.Root>
+			<PopoverBase.Trigger className={triggerClassName} asChild>
+				{trigger}
+			</PopoverBase.Trigger>
+
+			<PopoverBase.Portal container={div}>
+				<PopoverBase.Content
+					collisionBoundary={div}
+					onOpenAutoFocus={(e) => e.preventDefault()} // Prevents focus moving to the content on open
+					onCloseAutoFocus={(e) => e.preventDefault()} // Prevents focus moving to the trigger on close
+					onInteractOutside={(e) =>
+						preventInteractOutside && e.preventDefault()
+					} // Prevents closing when inside DropdownMenu
+					className={style.content}
+					sideOffset={5}
+				>
+					<div className={style.contentContainer}>{children}</div>
+					<PopoverBase.Arrow className={style.arrow} />
+				</PopoverBase.Content>
+			</PopoverBase.Portal>
+		</PopoverBase.Root>
+	);
+}

package/components/Popover.module.scss

@@ -0,0 +1,80 @@
+@import "./style.module.scss";
+
+:global(.sp-presenter-overlay) {
+	.content {
+		@extend %root;
+		padding: 2px;
+		animation-duration: 400ms;
+		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+		will-change: transform, opacity;
+
+		&-container {
+			overflow: hidden;
+			border-radius: 5px;
+		}
+	}
+
+	.content:focus {
+		@extend %focus;
+	}
+	.content[data-state="open"][data-side="top"] {
+		animation-name: slideDownAndFade;
+	}
+	.content[data-state="open"][data-side="right"] {
+		animation-name: slideLeftAndFade;
+	}
+	.content[data-state="open"][data-side="bottom"] {
+		animation-name: slideUpAndFade;
+	}
+	.content[data-state="open"][data-side="left"] {
+		animation-name: slideRightAndFade;
+	}
+
+	.arrow {
+		fill: white;
+	}
+}
+
+@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/PrimaryToolbar.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+import { BubbleMenu } from "./BubbleMenu";
+import { EditorToolbar } from "./editor-toolbars/EditorToolbar";
+
+export function PrimaryToolbar({
+	editor,
+	editorState,
+	userSelections,
+	configuration = [],
+	maskSelector,
+}) {
+	return (
+		<BubbleMenu
+			editor={editor}
+			options={{ placement: "top-start", maskSelector }}
+			shouldShow={({ editor }) => editor.isFocused}
+		>
+			<EditorToolbar
+				configuration={configuration}
+				editor={editor}
+				editorState={editorState}
+				userSelections={userSelections}
+			/>
+		</BubbleMenu>
+	);
+}

package/components/Select/Select.js

@@ -0,0 +1,71 @@
+import React, { Fragment } from "react";
+
+import classNames from "classnames";
+import { Select as SelectBase } from "radix-ui";
+
+import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
+
+import style from "./Select.module.scss";
+import { SelectGroup } from "./SelectGroup";
+
+export function Select({
+	className,
+	options = [],
+	placeholder = "Select an option",
+	label = "Options",
+	onValueChange,
+	value,
+}) {
+	const div = window.Bridge.UI.overlay;
+
+	const isGroupedOptions = Array.isArray(options[0]);
+
+	return (
+		<SelectBase.Root
+			value={value}
+			onValueChange={(value) => onValueChange(value)}
+		>
+			<SelectBase.Trigger
+				className={classNames(style.trigger, className)}
+				aria-label={label}
+			>
+				<SelectBase.Value placeholder={placeholder} />
+				<SelectBase.Icon className={style.icon}>
+					<ChevronDownIcon />
+				</SelectBase.Icon>
+			</SelectBase.Trigger>
+
+			<SelectBase.Portal container={div}>
+				<SelectBase.Content
+					collisionBoundary={div}
+					className={style.content}
+					onCloseAutoFocus={(e) => e.preventDefault()}
+					position="popper"
+				>
+					<SelectBase.ScrollUpButton className={style.scrollButton}>
+						<ChevronUpIcon />
+					</SelectBase.ScrollUpButton>
+					<SelectBase.Viewport className={style.viewport}>
+						{isGroupedOptions ? (
+							options.map((group, idx) => {
+								return (
+									<Fragment key={group.map(({ value }) => value).join("_")}>
+										{idx > 0 && (
+											<SelectBase.Separator className={style.separator} />
+										)}
+										<SelectGroup options={group} />
+									</Fragment>
+								);
+							})
+						) : (
+							<SelectGroup options={options} />
+						)}
+					</SelectBase.Viewport>
+					<SelectBase.ScrollDownButton className={style.scrollButton}>
+						<ChevronDownIcon />
+					</SelectBase.ScrollDownButton>
+				</SelectBase.Content>
+			</SelectBase.Portal>
+		</SelectBase.Root>
+	);
+}

package/components/Select/Select.module.scss

@@ -0,0 +1,100 @@
+@import "../style.module.scss";
+
+:global(.sp-presenter-overlay) {
+	button.trigger {
+		@extend %item;
+		display: inline-flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 5px;
+		border-radius: 4px;
+		padding: 0 15px;
+		height: $item-height;
+		min-width: 120px;
+		background-color: var(--sp-toolbar-select-trigger);
+
+		&:hover {
+			@extend %hover;
+		}
+
+		&:focus {
+			@extend %focus;
+		}
+
+		&[data-placeholder] {
+			color: var(--sp-toolbar-highlight-color);
+		}
+
+		.icon {
+			color: var(--sp-toolbar-color);
+		}
+	}
+
+	.content {
+		@extend %root;
+		position: relative;
+		z-index: 10000;
+		max-height: var(--radix-select-content-available-height);
+
+		.group {
+			&:first-child {
+				.item:first-child {
+					padding-top: 8px;
+				}
+			}
+
+			&:last-child {
+				.item:last-child {
+					padding-bottom: 8px;
+				}
+			}
+		}
+
+		.item {
+			@extend %item-vertical;
+			position: relative;
+			display: flex;
+			align-items: center;
+			padding-right: 35px;
+			padding-left: 25px;
+			user-select: none;
+
+			&:hover,
+			&[data-highlighted] {
+				@extend %hover;
+				outline: 0;
+			}
+
+			&:focus {
+				@extend %focus;
+			}
+
+			&[data-disabled] {
+				@extend %disabled;
+			}
+		}
+
+		.item-indicator {
+			position: absolute;
+			left: 0;
+			width: 25px;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.scroll-button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 25px;
+			background-color: white;
+			color: var(--sp-toolbar-color);
+			cursor: default;
+		}
+	}
+
+	.separator {
+		@extend %separator-horizontal;
+	}
+}

package/components/Select/SelectGroup.js

@@ -0,0 +1,37 @@
+import React from "react";
+
+import classNames from "classnames";
+import { Select as SelectBase } from "radix-ui";
+
+import { CheckIcon } from "@radix-ui/react-icons";
+
+import style from "./Select.module.scss";
+
+export function SelectGroup({ options = [] }) {
+	return (
+		<SelectBase.Group className={style.group}>
+			{options.map(({ label, value }, index) => (
+				<SelectItem key={`option-${index}`} value={value}>
+					{label}
+				</SelectItem>
+			))}
+		</SelectBase.Group>
+	);
+}
+
+const SelectItem = React.forwardRef(
+	({ children, className, ...props }, forwardedRef) => {
+		return (
+			<SelectBase.Item
+				className={classNames(style.item, className)}
+				{...props}
+				ref={forwardedRef}
+			>
+				<SelectBase.ItemText>{children}</SelectBase.ItemText>
+				<SelectBase.ItemIndicator className={style.itemIndicator}>
+					<CheckIcon />
+				</SelectBase.ItemIndicator>
+			</SelectBase.Item>
+		);
+	},
+);

package/components/Select/index.js

@@ -0,0 +1 @@
+export { Select } from "./Select";

package/components/TableCellMenu.js

@@ -0,0 +1,43 @@
+import React from "react";
+
+import { useTransitions } from "@livepreso/content-react";
+
+import { BubbleMenu } from "./BubbleMenu.js";
+import { EditorMenu } from "./editor-toolbars/EditorMenu.js";
+// import { ToolbarOptions } from "./ToolbarOptions.js";
+
+export function TableCellMenu({
+	editor,
+	editorState,
+	userSelections,
+	configuration = [],
+	maskSelector,
+}) {
+	const { exited } = useTransitions();
+
+	if (exited) {
+		return null;
+	}
+
+	return (
+		<BubbleMenu
+			editor={editor}
+			options={{
+				placement: "right-start",
+				offset: { mainAxis: -30, crossAxis: 4 },
+				closestSelector: "td, th",
+				maskSelector,
+			}}
+			shouldShow={({ editor }) => {
+				return editor.isFocused && editor.isActive("table");
+			}}
+		>
+			<EditorMenu
+				configuration={configuration}
+				editor={editor}
+				editorState={editorState}
+				userSelections={userSelections}
+			/>
+		</BubbleMenu>
+	);
+}