@livepreso/react-plugin-textfield 0.1.3 → 0.2.1

package/components/tiptap/token/Token.module.scss

@@ -0,0 +1,28 @@
+@import "../../../variables.scss";
+
+.token,
+:global(.sp-presenter-overlay) .token {
+	position: relative;
+	// wanted this to be var(--brand-primary-light)
+	// but the branding definitions do not extend into the sp-presenter-overlay scope
+	background-color: $active-color;
+	color: $toolbar-color;
+	font-size: 0.9em;
+	line-height: 1em;
+	border-radius: 0.8rem;
+	box-decoration-break: clone;
+	padding: 0.2em 0.4em;
+	cursor: pointer;
+
+	// Hit area
+	&:after {
+		content: "";
+		position: absolute;
+		inset: -5px;
+	}
+
+	// zero-width space to prevent collapse when empty
+	&::after {
+		content: "\200B";
+	}
+}

package/components/tiptap/token/TokenList.js

@@ -0,0 +1,93 @@
+import React, {
+	forwardRef,
+	useEffect,
+	useImperativeHandle,
+	useState,
+} from "react";
+import classNames from "classnames";
+import style from "./TokenList.module.scss";
+import buttonStyle from "../../editor-toolbars/SimpleButton.module.scss";
+import InsertTokenDialog from "../../InsertTokenDialog";
+import { Separator } from "radix-ui";
+
+// the UI associated with the suggestion dropdown
+export const TokenList = forwardRef(
+	({ items, choices, command }, forwardedRef) => {
+		const [selectedIndex, setSelectedIndex] = useState(0);
+
+		const selectItem = (index) => {
+			const item = items[index];
+
+			if (item) {
+				command({ id: item.id, label: item.label });
+			}
+		};
+
+		const upHandler = () => {
+			setSelectedIndex((selectedIndex + items.length - 1) % items.length);
+		};
+
+		const downHandler = () => {
+			setSelectedIndex((selectedIndex + 1) % items.length);
+		};
+
+		const enterHandler = () => {
+			selectItem(selectedIndex);
+		};
+
+		useEffect(() => setSelectedIndex(0), [items]);
+
+		useImperativeHandle(forwardedRef, () => ({
+			onKeyDown: ({ event }) => {
+				if (event.key === "ArrowUp") {
+					upHandler();
+					return true;
+				}
+
+				if (event.key === "ArrowDown") {
+					downHandler();
+					return true;
+				}
+
+				if (event.key === "Enter") {
+					enterHandler();
+					return true;
+				}
+				return false;
+			},
+		}));
+
+		return (
+			<div
+				className={classNames(style.root, "interactive")}
+				data-companywide-interactive
+				ref={forwardedRef}
+			>
+				<div className={style.tokenPopup}>
+					<div className={style.dropdownMenu}>
+						{items.length ? (
+							items.map(({ id, label }, index) => (
+								<button
+									className={classNames(buttonStyle.button, style.suggestion, {
+										[style.isSelected]: index === selectedIndex,
+									})}
+									key={id}
+									onClick={() => selectItem(index)}
+								>
+									{label}
+								</button>
+							))
+						) : (
+							<div className={style.item}>No result</div>
+						)}
+					</div>
+					<Separator.Root className={style.separator} />
+					<InsertTokenDialog
+						tokens={choices}
+						onChange={(token) => command(token)}
+					/>
+				</div>
+			</div>
+		);
+	},
+);

package/components/tiptap/token/TokenList.module.scss

@@ -0,0 +1,58 @@
+@import "../../style.module.scss";
+
+:global(.sp-presenter-overlay) {
+	.root {
+		@extend %root;
+
+		.token-popup {
+			z-index: 1000;
+			background: var(--white);
+			display: flex;
+			flex-direction: column;
+		}
+
+		/* Dropdown menu */
+		.dropdown-menu {
+			display: flex;
+			flex-direction: column;
+			overflow: auto;
+			position: relative;
+		}
+
+		.separator {
+			@extend %separator-horizontal;
+			flex: none;
+		}
+
+		.button {
+			@extend %item-vertical;
+			align-items: center;
+			background-color: transparent;
+			display: flex;
+			text-align: left;
+			width: 100%;
+			border-radius: none;
+
+			&:first-child {
+				padding-top: 8px;
+			}
+
+			&:last-child {
+				padding-bottom: 8px;
+			}
+		}
+
+		.suggestion {
+			padding-left: 12px;
+
+			&:hover,
+			&:hover.is-selected {
+				background-color: var(--sp-toolbar-hover-color);
+			}
+
+			&.is-selected {
+				background-color: var(--sp-toolbar-hover-color);
+			}
+		}
+	}
+}

package/components/tiptap/token/utils.js

@@ -0,0 +1,92 @@
+// modified from http://github.com/ueberdosis/tiptap/blob/main/demos/src/Nodes/Mention/React/suggestion.js
+// the output of the function is a configuration object for the [Suggestion engine](https://tiptap.dev/docs/editor/api/utilities/suggestion)
+// that Tiptap uses to drive the mention / Token plugin's output
+
+import { computePosition, flip, shift } from "@floating-ui/react-dom";
+import { posToDOMRect, ReactRenderer } from "@tiptap/react";
+import { TokenList } from "./TokenList";
+
+export const TOKEN_TRIGGER_CHAR = "@";
+
+const updatePosition = (editor, element) => {
+	const virtualElement = {
+		getBoundingClientRect: () =>
+			posToDOMRect(
+				editor.view,
+				editor.state.selection.from,
+				editor.state.selection.to,
+			),
+	};
+
+	computePosition(virtualElement, element, {
+		placement: "bottom-start",
+		strategy: "absolute",
+		middleware: [shift(), flip()],
+	}).then(({ x, y, strategy }) => {
+		element.style.width = "max-content";
+		element.style.position = strategy;
+		element.style.left = `${x}px`;
+		element.style.top = `${y}px`;
+	});
+};
+
+// TODO wrap this in a useMemo hook or similar to avoid unnecessary instantiations of Fuse
+export function generateSuggestionConfiguration({ tokens = [], fuse }) {
+	return {
+		char: TOKEN_TRIGGER_CHAR,
+		items: ({ query }) => {
+			if (query === "") return tokens.slice(0, 5);
+			return fuse.search(query, { limit: 5 }).map((r) => r.item);
+		},
+		// this is a cached value for use in
+		choices: tokens,
+		// Disable UI if editor is not in editable mode or another condition is met
+		allow: ({ editor, state, range }) => editor.isEditable && tokens.length > 0,
+		render: () => {
+			let component;
+			return {
+				onStart: (props) => {
+					component = new ReactRenderer(TokenList, {
+						props: { ...props, choices: tokens },
+						editor: props.editor,
+					});
+
+					if (!props.clientRect) {
+						return;
+					}
+
+					component.element.style.position = "absolute";
+
+					window.Bridge.UI.overlay.appendChild(component.element);
+
+					updatePosition(props.editor, component.element);
+				},
+
+				onUpdate(props) {
+					component.updateProps(props);
+
+					if (!props.clientRect) {
+						return;
+					}
+
+					updatePosition(props.editor, component.element);
+				},
+
+				onKeyDown(props) {
+					if (props.event.key === "Escape") {
+						component.destroy();
+
+						return true;
+					}
+
+					return component.ref?.onKeyDown(props);
+				},
+
+				onExit() {
+					component.element.remove();
+					component.destroy();
+				},
+			};
+		},
+	};
+}

package/configs/generate-toolbar-configuration.js

@@ -4,13 +4,23 @@ import {
 	TABLE_TOOLBAR_IDS,
 } from "../constants";
 
-const generateGroup = (id, { label = null, items = [], options = {} } = {}) => {
+const generateGroup = (
+	id,
+	{ label = null, items: itemsConfig = [], options = {} } = {},
+) => {
+	// a given generator can return null
+	// if the item will not funciton with the supplied options
+	const items = itemsConfig
+		.map((generator) => generator(options))
+		.filter(Boolean);
+
+	// if, having run the generators, the group has no items, return null
 	if (items.length === 0) return null;
 
 	return {
 		id,
 		label,
-		items: items.map((generator) => generator(options)),
+		items,
 	};
 };
 
@@ -75,10 +85,12 @@ export const generateToolbarConfiguration = ({
 	itemGenerators = {},
 	textStyles = [],
 	colors = [],
+	tokens = [],
 } = {}) => {
 	const options = {
 		textStyles,
 		colors,
+		tokens,
 	};
 
 	const generateItem = (item) => {

package/configs/generate-toolbar-options.js

@@ -1,6 +1,6 @@
 import { tableItemGenerators } from "./table-toolbar-configuration";
 import { generateToolbarConfiguration } from "./generate-toolbar-configuration";
-import { TABLE, TOOLBAR_SCOPES } from "../constants";
+import { TABLE, TOKEN, TOOLBAR_SCOPES } from "../constants";
 import { primaryItemGenerators } from "./toolbar-configuration";
 
 const testUniqueIds = (options) => {
@@ -26,9 +26,11 @@ export const generateToolbarOptions = ({
 	tableToolbarConfig = [],
 	textStyles = [],
 	colors = [],
+	tokens = [],
 } = {}) => {
 	const includeTableEditor = toolbarConfig.includes(TABLE);
-	const options = { textStyles, colors };
+	const includeToken = toolbarConfig.includes(TOKEN) && tokens.length > 0;
+	const options = { textStyles, colors, tokens: includeToken ? tokens : [] };
 
 	const primaryOptions = generateToolbarConfiguration({
 		toolbar: toolbarConfig,

package/configs/toolbar-configuration.js

@@ -23,6 +23,7 @@ import LinkEditDialog from "../components/LinkEditDialog";
 import { Gapcursor } from "@tiptap/extensions";
 import { ColorPickerCombo } from "../components/color-picker/ColorPickerCombo";
 import { TableCreatorCombo } from "../components/table-creator/TableCreatorCombo";
+import { TOKEN_TRIGGER_CHAR } from "../components/tiptap/token/utils";
 
 function generateTextStyleTest(textStyles) {
 	return (editor) => {
@@ -283,6 +284,19 @@ const removeLinkButton = () => ({
 	enabled: (editor) => editor.isActive("link"),
 	icon: <icons.LinkOff />,
 });
+const insertTokenButton = ({ tokens = [] }) =>
+	tokens.length
+		? {
+				id: PRIMARY_TOOLBAR_IDS.INSERT_TOKEN,
+				label: "Insert token",
+				type: TOOLBAR_COMPONENT_TYPES.BUTTON,
+				icon: <icons.WandStars />,
+				// Token extension is always enabled, so nothing to load here
+				extensions: [],
+				command: (editor) =>
+					editor.chain().focus().insertContent(TOKEN_TRIGGER_CHAR).run(),
+			}
+		: null;
 
 const clearFormattingButton = () => ({
 	id: PRIMARY_TOOLBAR_IDS.CLEAR_FORMATTING,
@@ -333,6 +347,7 @@ export const primaryItemGenerators = {
 	[PRIMARY_TOOLBAR_IDS.ORDERED_LIST]: numberedListButton,
 	[PRIMARY_TOOLBAR_IDS.INSERT_LINK]: addLinkButton,
 	[PRIMARY_TOOLBAR_IDS.REMOVE_LINK]: removeLinkButton,
+	[PRIMARY_TOOLBAR_IDS.INSERT_TOKEN]: insertTokenButton,
 	[PRIMARY_TOOLBAR_IDS.CLEAR_FORMATTING]: clearFormattingButton,
 	[PRIMARY_TOOLBAR_IDS.INSERT_TABLE]: insertTableButton,
 };

package/constants.js

@@ -9,6 +9,10 @@ export const TOOLBAR_COMPONENT_TYPES = Object.freeze({
 	CUSTOM: "custom",
 });
 
+export const NODE_TYPES = Object.freeze({
+	TOKEN: "token",
+});
+
 /**
  * What a toolbar option can affect, and where they will appear in the editor.
  *
@@ -30,6 +34,7 @@ export const BLOCK = "block";
 export const TEXT_STYLE = "text-style";
 export const ALIGNMENT = "alignment";
 export const LINK = "link";
+export const TOKEN = "token";
 export const LIST = "list";
 export const CLEAR_FORMATTING = "clear-formatting";
 export const TABLE = "table";
@@ -48,6 +53,7 @@ export const PRIMARY_TOOLBAR_IDS = Object.freeze({
 	TEXT_ALIGN: "textAlign",
 	INSERT_LINK: "insertLink",
 	REMOVE_LINK: "unlink",
+	INSERT_TOKEN: "insertToken",
 	ORDERED_LIST: "orderedList",
 	UNORDERED_LIST: "unorderedList",
 	INSERT_TABLE: "insertTable",
@@ -107,6 +113,10 @@ const PRIMARY_TOOLBAR_GROUPS = Object.freeze({
 		label: "Links",
 		items: [PRIMARY_TOOLBAR_IDS.INSERT_LINK, PRIMARY_TOOLBAR_IDS.REMOVE_LINK],
 	},
+	[TOKEN]: {
+		label: "Tokens",
+		items: [PRIMARY_TOOLBAR_IDS.INSERT_TOKEN],
+	},
 	[TABLE]: { label: "Insert table", items: [PRIMARY_TOOLBAR_IDS.INSERT_TABLE] },
 	[CLEAR_FORMATTING]: {
 		label: "Clear formatting",
@@ -170,6 +180,7 @@ export const COMPLETE_TOOLBAR_CONFIG = [
 	TEXT_STYLE,
 	ALIGNMENT,
 	LINK,
+	TOKEN,
 	TABLE,
 	CLEAR_FORMATTING,
 ];
@@ -185,7 +196,12 @@ export const DEFAULT_TABLE_TOOLBAR_CONFIG = [...COMPLETE_TABLE_TOOLBAR_CONFIG];
 
 // Alternative toolbar configurations
 export const MINIMAL_TOOLBAR_CONFIG = [UNDO_REDO];
-export const SIMPLE_TOOLBAR_CONFIG = [UNDO_REDO, TEXT_STYLE, CLEAR_FORMATTING];
+export const SIMPLE_TOOLBAR_CONFIG = [
+	UNDO_REDO,
+	TEXT_STYLE,
+	TOKEN,
+	CLEAR_FORMATTING,
+];
 
 export const SIMPLE_TABLE_TOOLBAR_CONFIG = [
 	DELETE_TABLE,
@@ -196,3 +212,9 @@ export const SIMPLE_TABLE_TOOLBAR_CONFIG = [
 		TABLE_TOOLBAR_IDS.REMOVE_ROW,
 	],
 ];
+
+// these are passed to the editable so it knows what mode it is in -
+// useful for plugins that behave differently in different modes
+export const MODE_CMS = "cms";
+export const MODE_PREP = "prep";
+export const MODE_UNMANAGED = "unmanaged";

package/icons/HelpCenter.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const HelpCenter = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M480.77-257.31q17.15 0 28.96-11.81 11.81-11.8 11.81-28.96 0-17.15-11.81-28.96-11.81-11.81-28.96-11.81t-28.96 11.81Q440-315.23 440-298.08q0 17.16 11.81 28.96 11.81 11.81 28.96 11.81Zm-28.31-143.23h56.31q.77-31.38 8.96-47.81 8.19-16.42 33.04-41.27 31.92-31.92 45.65-54.26 13.73-22.35 13.73-50.81 0-49.92-34.07-80.5-34.08-30.58-87.77-30.58-48.85 0-83.5 24.89-34.66 24.88-49.27 64.8l51.38 20.62q8.54-25.46 28.39-41.58 19.84-16.11 49.77-16.11 32.38 0 50.57 17.57 18.2 17.58 18.2 42.73 0 18.54-11 36.39t-33.93 38.54q-32.61 29.38-44.53 54.54-11.93 25.15-11.93 62.84ZM140-140v-680h680v680H140Zm60-60h560v-560H200v560Zm0 0v-560 560Z" />
+	</svg>
+);
+export default HelpCenter;

package/icons/MoreVert.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const MoreVert = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M480-189.23q-24.75 0-42.37-17.63Q420-224.48 420-249.23q0-24.75 17.63-42.38 17.62-17.62 42.37-17.62 24.75 0 42.37 17.62Q540-273.98 540-249.23q0 24.75-17.63 42.37-17.62 17.63-42.37 17.63ZM480-420q-24.75 0-42.37-17.63Q420-455.25 420-480q0-24.75 17.63-42.37Q455.25-540 480-540q24.75 0 42.37 17.63Q540-504.75 540-480q0 24.75-17.63 42.37Q504.75-420 480-420Zm0-230.77q-24.75 0-42.37-17.62Q420-686.02 420-710.77q0-24.75 17.63-42.37 17.62-17.63 42.37-17.63 24.75 0 42.37 17.63Q540-735.52 540-710.77q0 24.75-17.63 42.38-17.62 17.62-42.37 17.62Z" />
+	</svg>
+);
+export default MoreVert;

package/icons/WandStars.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+const WandStars = (props) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		height="24px"
+		viewBox="0 -960 960 960"
+		width="24px"
+		{...props}
+	>
+		<path d="M182.15-140 140-182.15 445.23-488l-174.84-43.08L453-644.46 437.16-860l164.76 139.08L801-802l-80.08 199.69L860-438.16 644.46-453l-114 182.61L487-445.23 182.15-140Zm23.62-523.85L140-729.62l65.77-65.76 65.77 65.76-65.77 65.77ZM555-422.61l57.23-93.24 109.54 8.16L651-591.77l41.16-101.39L590.77-652l-84.08-70.16 8.16 108.93L422-555.38l106.15 26.23L555-422.61ZM729.62-140l-65.77-65.77 65.77-65.77 65.76 65.77L729.62-140ZM572.08-572.69Z" />
+	</svg>
+);
+export default WandStars;

package/icons/help_center.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480.77-257.31q17.15 0 28.96-11.81 11.81-11.8 11.81-28.96 0-17.15-11.81-28.96-11.81-11.81-28.96-11.81t-28.96 11.81Q440-315.23 440-298.08q0 17.16 11.81 28.96 11.81 11.81 28.96 11.81Zm-28.31-143.23h56.31q.77-31.38 8.96-47.81 8.19-16.42 33.04-41.27 31.92-31.92 45.65-54.26 13.73-22.35 13.73-50.81 0-49.92-34.07-80.5-34.08-30.58-87.77-30.58-48.85 0-83.5 24.89-34.66 24.88-49.27 64.8l51.38 20.62q8.54-25.46 28.39-41.58 19.84-16.11 49.77-16.11 32.38 0 50.57 17.57 18.2 17.58 18.2 42.73 0 18.54-11 36.39t-33.93 38.54q-32.61 29.38-44.53 54.54-11.93 25.15-11.93 62.84ZM140-140v-680h680v680H140Zm60-60h560v-560H200v560Zm0 0v-560 560Z"/></svg>

package/icons/index.js

@@ -41,12 +41,14 @@ import FormatListBulleted from "./FormatListBulleted.js";
 import FormatListNumbered from "./FormatListNumbered.js";
 import FormatStrikethrough from "./FormatStrikethrough.js";
 import FormatUnderlined from "./FormatUnderlined.js";
+import HelpCenter from "./HelpCenter.js";
 import HorizontalRule from "./HorizontalRule.js";
 import Italic from "./Italic.js";
 import ItalicIcon from "./ItalicIcon.js";
 import Link from "./Link.js";
 import LinkOff from "./LinkOff.js";
 import MergeCells from "./MergeCells.js";
+import MoreVert from "./MoreVert.js";
 import Redo from "./Redo.js";
 import RemoveColumnOutline from "./RemoveColumnOutline.js";
 import RemoveRowOutline from "./RemoveRowOutline.js";
@@ -59,6 +61,7 @@ import Undo from "./Undo.js";
 import VerticalAlignBottom from "./VerticalAlignBottom.js";
 import VerticalAlignCenter from "./VerticalAlignCenter.js";
 import VerticalAlignTop from "./VerticalAlignTop.js";
+import WandStars from "./WandStars.js";
 
 export const MATERIAL_SVG_PARAMS = {
 	style: "sharp",
@@ -101,19 +104,20 @@ export {
 	FormatBold,
 	FormatClear,
 	FormatColorFill,
-	FormatColorText,
 	FormatItalic,
 	FormatLineSpacing,
 	FormatListBulleted,
 	FormatListNumbered,
 	FormatStrikethrough,
 	FormatUnderlined,
+	HelpCenter,
 	HorizontalRule,
 	Italic,
 	ItalicIcon,
 	Link,
 	LinkOff,
 	MergeCells,
+	MoreVert,
 	Redo,
 	RemoveColumnOutline,
 	RemoveRowOutline,
@@ -126,6 +130,7 @@ export {
 	VerticalAlignBottom,
 	VerticalAlignCenter,
 	VerticalAlignTop,
+	WandStars,
 };
 
 export default {
@@ -170,12 +175,14 @@ export default {
 	FormatListNumbered,
 	FormatStrikethrough,
 	FormatUnderlined,
+	HelpCenter,
 	HorizontalRule,
 	Italic,
 	ItalicIcon,
 	Link,
 	LinkOff,
 	MergeCells,
+	MoreVert,
 	Redo,
 	RemoveColumnOutline,
 	RemoveRowOutline,
@@ -188,4 +195,5 @@ export default {
 	VerticalAlignBottom,
 	VerticalAlignCenter,
 	VerticalAlignTop,
+	WandStars,
 };

package/icons/more_vert.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-189.23q-24.75 0-42.37-17.63Q420-224.48 420-249.23q0-24.75 17.63-42.38 17.62-17.62 42.37-17.62 24.75 0 42.37 17.62Q540-273.98 540-249.23q0 24.75-17.63 42.37-17.62 17.63-42.37 17.63ZM480-420q-24.75 0-42.37-17.63Q420-455.25 420-480q0-24.75 17.63-42.37Q455.25-540 480-540q24.75 0 42.37 17.63Q540-504.75 540-480q0 24.75-17.63 42.37Q504.75-420 480-420Zm0-230.77q-24.75 0-42.37-17.62Q420-686.02 420-710.77q0-24.75 17.63-42.37 17.62-17.63 42.37-17.63 24.75 0 42.37 17.63Q540-735.52 540-710.77q0 24.75-17.63 42.38-17.62 17.62-42.37 17.62Z"/></svg>

package/icons/wand_stars.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M182.15-140 140-182.15 445.23-488l-174.84-43.08L453-644.46 437.16-860l164.76 139.08L801-802l-80.08 199.69L860-438.16 644.46-453l-114 182.61L487-445.23 182.15-140Zm23.62-523.85L140-729.62l65.77-65.76 65.77 65.76-65.77 65.77ZM555-422.61l57.23-93.24 109.54 8.16L651-591.77l41.16-101.39L590.77-652l-84.08-70.16 8.16 108.93L422-555.38l106.15 26.23L555-422.61ZM729.62-140l-65.77-65.77 65.77-65.77 65.76 65.77L729.62-140ZM572.08-572.69Z"/></svg>