@livepreso/react-plugin-textfield 0.5.1 → 0.6.0

package/index.js

@@ -65,6 +65,10 @@ function EditableTextField({
 	disableSpellcheck = false,
 	mode,
 	tokenConfig = {},
+	// Scroll overflowing content rather than clipping it.
+	// Toolbars anchor and reposition against scrollable limits
+	// (ie. toolbar anchors to the top instead of scrolling with the content)
+	isScrollable = false,
 	// Faint prompt shown while the field is empty and editable. Destructured here
 	// so it drives the Placeholder extension rather than landing on the DOM node.
 	placeholder,
@@ -73,7 +77,7 @@ function EditableTextField({
 	// stopPropagation = false,
 	...other
 }) {
-	const { isPresomanager } = useModes();
+	const { isPresomanager, isScreenshot } = useModes();
 	const { isUserTemplateLibrary } = useSlide();
 	const [textColor, setTextColor] = useState(null);
 	const initialValue = useRef(value);
@@ -271,6 +275,8 @@ function EditableTextField({
 		// The 'interactive' class disables the LivePreso custom context,
 		// this is additional to preventing slide navigation swiping etc.
 		...(isEditable ? [style.editable, "interactive"] : []),
+		// Screenshots should clip instead of scroll.
+		...(isScrollable && !isScreenshot ? [style.scrollable] : []),
 	].filter(Boolean);
 
 	const toolbarOptions = {
@@ -342,17 +348,18 @@ function PrepEditableField({ id, prepId = id, children, isCompany, ...props }) {
 
 function CMSValField({ id, children, ...props }) {
 	const { isPresomanager, isThumbnailScreenshot } = useModes();
-	const { isUserTemplateLibrary, isUserTemplate } = useSlide();
+	const { isUserTemplateLibrary, isUserTemplate, slidePath } = useSlide();
 
 	const [cmsValue, setCMSValue] = useCMSVal(id);
 	const value = !isThumbnailScreenshot && cmsValue;
 
 	// Check if the app allows editing this field. If the function doesn't exist
-	// assume it's ok.
+	// assume it's ok. Pass calling slide's slidePath so the key resolves against
+	// this slide rather than presenter's current slide.
 	const userCanEdit =
 		isUserTemplate ||
 		isUserTemplateLibrary ||
-		(Bridge.CMSVals?.canEditKey?.(id) ?? true);
+		(Bridge.CMSVals?.canEditKey?.(id, { slidePath }) ?? true);
 
 	const isEditable =
 		props.isEditable &&

package/index.module.scss

@@ -1,4 +1,4 @@
-@import "./variables.scss";
+@import "@livepreso/react-plugin-ui/styles/tokens.module.scss";
 
 :global(.sp-presenter-overlay) {
 	* {
@@ -7,30 +7,11 @@
 
 	overflow: hidden;
 
-	--sp-toolbar-color-white: #ffffff;
-	--sp-toolbar-bg-color: var(--sp-toolbar-color-white);
-	--sp-toolbar-color: #{$toolbar-color};
-	--sp-toolbar-modal-bg-color: rgba(255, 255, 255, 0.75);
-	--sp-toolbar-separator-color: rgba(0, 0, 0, 0.12);
-	--sp-toolbar-highlight-color: rgba(0, 0, 0, 0.38);
-	--sp-toolbar-interactive-color: #{$interactive-color};
-	--sp-toolbar-focus-color: #006ce7;
-	--sp-toolbar-active-color: #{$active-color};
-	--sp-toolbar-hover-color: #cce2fa;
-	--sp-toolbar-select-trigger: #f7f7f7;
-	// Buttons
-	--sp-toolbar-button: #{$button-color};
-	--sp-toolbar-button-hover: #{$button-hover-color};
-	--sp-toolbar-button-primary: var(--sp-toolbar-focus-color);
-	--sp-toolbar-button-primary-hover: #0060ce;
-	// tokens (for the dialog)
-	--sp-token-background-color: #{$active-color};
-	--sp-token-color: #{$toolbar-color};
-
 	a,
 	button,
 	fieldset,
-	input {
+	input,
+	textarea {
 		all: unset;
 	}
 
@@ -41,16 +22,45 @@
 		right: 0;
 		bottom: 0;
 	}
+
+	.border-icon-container {
+		position: relative;
+		width: 100%;
+		height: 100%;
+
+		.border-icon {
+			position: absolute;
+			inset: 0;
+		}
+	}
 }
 
+:global(.sp-presenter-overlay) .text-field,
 .text-field {
 	overflow: hidden;
 
 	table {
 		border-collapse: collapse;
 	}
+
+	// Applied by the `isScrollable` prop.
+	&.scrollable {
+		overflow-y: auto;
+
+		// .editable pins content to the field's height; scrolling needs growth.
+		> div {
+			height: auto;
+			min-height: 100%;
+		}
+
+		:global(.tiptap) {
+			height: auto;
+			min-height: 100%;
+		}
+	}
 }
 
+:global(.sp-presenter-overlay) .editable,
 .editable {
 	outline: 1px solid $interactive-color;
 
@@ -104,6 +114,37 @@
 				}
 			}
 
+			// Default padding per table density - overridable by a deck's own CSS.
+			table.tiptap-table-density-spacious {
+				th,
+				td {
+					padding: 16px 20px;
+				}
+			}
+
+			table.tiptap-table-density-normal {
+				th,
+				td {
+					padding: 8px 12px;
+				}
+			}
+
+			table.tiptap-table-density-dense {
+				th,
+				td {
+					padding: 4px 8px;
+				}
+			}
+
+			// !FEATURE CURRENTLY NOT IN USE!
+			// This style partners with fullWidthToggle from table-toolbar-configuration.js
+			// `!important` needed to beat the inline width/min-width the resizable
+			// table's own colgroup logic (updateColumns) reasserts on every update.
+			table.tiptap-table-full-width {
+				width: 100% !important;
+				min-width: 100% !important;
+			}
+
 			// Loz: I think I broke this...
 			.column-resize-handle {
 				background-color: $interactive-color;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepreso/react-plugin-textfield",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "",
   "main": "index.js",
   "publishConfig": {
@@ -16,8 +16,6 @@
     "react-dom": "~19.2.0",
     "@babel/parser": "^7.26.10",
     "@babel/traverse": "^7.26.10",
-    "@svgr/core": "^8.1.0",
-    "@svgr/plugin-jsx": "^8.1.0",
     "@livepreso/eslint-config": "1.0.0"
   },
   "peerDependencies": {
@@ -58,7 +56,8 @@
     "@tiptap/extension-mention": "~3.20.0",
     "@tiptap/suggestion": "~3.20.0",
     "fuse.js": "~7.1.0",
-    "@livepreso/content-react": "2.2.2"
+    "@livepreso/content-react": "2.3.1",
+    "@livepreso/react-plugin-ui": "1.0.0"
   },
   "scripts": {
     "build": ""

package/utils/generate-border-icon.js

@@ -0,0 +1,22 @@
+import React from "react";
+import icons from "@livepreso/react-plugin-ui/icons";
+import { getCellBorderSides } from "../components/tiptap/Table";
+import { BORDER_SIDES } from "../constants";
+import style from "../index.module.scss";
+
+export function generateBorderIcon(editor) {
+	const sides = getCellBorderSides(editor);
+
+	if (sides.length === BORDER_SIDES.length) return <icons.BorderOuter />;
+	if (sides.length === 0) return <icons.BorderClear />;
+
+	return (
+		<div className={style.borderIconContainer}>
+			{sides.map((side) => {
+				const Component =
+					icons[`Border${side.charAt(0).toUpperCase()}${side.slice(1)}`];
+				return <Component key={side} className={style.borderIcon} />;
+			})}
+		</div>
+	);
+}

package/utils/generate-vertical-alignment-icon.js

@@ -1,5 +1,5 @@
 import React from "react";
-import icons from "../icons";
+import icons from "@livepreso/react-plugin-ui/icons";
 import {
 	CELL_VALIGN_BOTTOM,
 	CELL_VALIGN_MIDDLE,

package/components/Popover.js

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

@@ -1,80 +0,0 @@
-@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/Select/Select.js

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

@@ -1,100 +0,0 @@
-@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: 3100;
-		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

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

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

package/components/Tooltip.js

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

@@ -1,87 +0,0 @@
-@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);
-	}
-}