@guardian/stand 0.0.40 → 0.0.42

package/dist/components/Byline/Byline.cjs

@@ -1,368 +1,335 @@
-'use strict';
-
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var prosemirrorInvisibles = require('@guardian/prosemirror-invisibles');
-var prosemirrorDropcursor = require('prosemirror-dropcursor');
-var prosemirrorHistory = require('prosemirror-history');
-var prosemirrorState = require('prosemirror-state');
-var prosemirrorView = require('prosemirror-view');
-var React = require('react');
-var lib = require('./lib.cjs');
-var placeholder = require('./placeholder.cjs');
-var plugins = require('./plugins.cjs');
-var Preview = require('./Preview.cjs');
-var schema = require('./schema.cjs');
-var styles = require('./styles.cjs');
-
-const Byline = ({
-  theme,
-  allowUntaggedContributors,
-  contributorLimit,
-  enablePreview,
-  placeholder: placeholder$1,
-  initialValue,
-  readOnly,
-  handleSave,
-  searchContributors,
-  onBlur
-}) => {
-  const editorRef = React.useRef(null);
-  const viewRef = React.useRef(null);
-  const dropdownRef = React.useRef(null);
-  const [currentText, setCurrentText] = React.useState("");
-  const [currentOptionIndex, setCurrentOptionIndex] = React.useState(0);
-  const [taggedContributors, setTaggedContributors] = React.useState([]);
-  const [currentDoc, setCurrentDoc] = React.useState(null);
-  const [showDropdown, setShowDropdown] = React.useState(false);
-  const isTypingFromStartRange = React.useRef(
-    void 0
-  );
-  const trackTypingFromStart = (tr) => {
-    const isCursorSelection = tr.selection.from === tr.selection.to;
-    const currentPosition = tr.selection.from;
-    const hasChanges = tr.steps.length > 0;
-    if (!isCursorSelection) {
-      isTypingFromStartRange.current = void 0;
-      return;
-    }
-    if (!isTypingFromStartRange.current && currentPosition === 1 && hasChanges) {
-      isTypingFromStartRange.current = {
-        start: 1,
-        maxReached: 1,
-        lastPosition: 1
-      };
-      return;
-    }
-    if (isTypingFromStartRange.current) {
-      const { start, maxReached, lastPosition } = isTypingFromStartRange.current;
-      const isWithinRange = currentPosition >= start && currentPosition <= maxReached;
-      const isExtendingRange = hasChanges && currentPosition === maxReached + 1;
-      if (isWithinRange || isExtendingRange) {
-        if (hasChanges) {
-          const positionDelta = currentPosition - lastPosition;
-          if (positionDelta < 0) {
-            isTypingFromStartRange.current.maxReached = maxReached - 1;
-          } else if (positionDelta > 0) {
-            isTypingFromStartRange.current.maxReached = maxReached + 1;
-          }
-          isTypingFromStartRange.current.lastPosition = currentPosition;
-        }
-        return;
-      }
-    }
-    isTypingFromStartRange.current = void 0;
-  };
-  const getShouldShowDropdown = (view, selectedText) => {
-    if (readOnly) {
-      return false;
-    }
-    const showDropdownBasedOnProps = !!searchContributors || !!allowUntaggedContributors;
-    if (lib.hasHitContributorLimit(view.state.doc, contributorLimit)) {
-      return false;
-    }
-    return selectedText.trim() !== "" && showDropdownBasedOnProps;
-  };
-  const [enterHit, setEnterHit] = React.useState(false);
-  const checkDropdownVisibility = () => {
-    if (dropdownRef.current?.checkVisibility) {
-      return dropdownRef.current.checkVisibility();
-    } else {
-      return dropdownRef.current?.offsetParent !== null;
-    }
-  };
-  React.useEffect(() => {
-    if (!editorRef.current) {
-      return;
-    }
-    const initialDoc = lib.convertBylineModelToNode(initialValue);
-    const state = prosemirrorState.EditorState.create({
-      schema: schema.bylineEditorSchema,
-      plugins: [
-        prosemirrorDropcursor.dropCursor(),
-        plugins.clipboardPlugin(allowUntaggedContributors, contributorLimit),
-        prosemirrorHistory.history(),
-        plugins.keybindings(),
-        prosemirrorInvisibles.createInvisiblesPlugin([prosemirrorInvisibles.space, prosemirrorInvisibles.nbSpace], {
-          displayLineEndSelection: true,
-          shouldShowInvisibles: true
-        }),
-        plugins.bylinePlugin(),
-        placeholder.createPlaceholderPlugin(placeholder$1 ?? "Enter a byline...")
-      ],
-      doc: initialDoc
-    });
-    setCurrentDoc(initialDoc);
-    viewRef.current = new prosemirrorView.EditorView(editorRef.current, {
-      state,
-      editable: () => !readOnly,
-      attributes: {
-        role: "combobox",
-        "aria-label": "byline",
-        "aria-controls": "byline-dropdown",
-        "aria-expanded": "false",
-        "data-testid": "byline-input",
-        ...readOnly && { "aria-readonly": "true" }
-      },
-      handleDOMEvents: {
-        keydown: (view, event) => {
-          if (readOnly) {
-            return false;
-          }
-          if (event.key === "Escape") {
-            setShowDropdown(false);
-            return true;
-          }
-          if (event.key === "ArrowDown") {
-            if (checkDropdownVisibility()) {
-              event.preventDefault();
-              setCurrentOptionIndex((currentOptionIndex2) => {
-                return currentOptionIndex2 + 1;
-              });
-              return true;
-            }
-            return false;
-          }
-          if (event.key === "ArrowUp") {
-            if (checkDropdownVisibility()) {
-              event.preventDefault();
-              setCurrentOptionIndex((currentOptionIndex2) => {
-                return currentOptionIndex2 - 1;
-              });
-              return true;
-            }
-            return false;
-          }
-          if (event.key === "Enter") {
-            if (checkDropdownVisibility()) {
-              event.preventDefault();
-              setEnterHit(true);
-            }
-            return false;
-          }
-          return false;
-        },
-        blur: (_view, event) => {
-          if (readOnly) {
-            return false;
-          }
-          if (!dropdownRef.current?.contains(event.relatedTarget)) {
-            setShowDropdown(false);
-          }
-          return false;
-        }
-      },
-      dispatchTransaction(tr) {
-        if (readOnly) {
-          if (tr.docChanged) {
-            return;
-          }
-          if (viewRef.current) {
-            const newState = viewRef.current.state.apply(tr);
-            viewRef.current.updateState(newState);
-          }
-          return;
-        }
-        if (viewRef.current?.hasFocus()) {
-          trackTypingFromStart(tr);
-          const newState = viewRef.current.state.apply(tr);
-          viewRef.current.updateState(newState);
-          const { selectedText } = lib.getCurrentText(
-            newState.doc,
-            newState.selection.from,
-            newState.selection.to,
-            isTypingFromStartRange.current
-          );
-          setCurrentText(selectedText);
-          const shouldShowDropdown = getShouldShowDropdown(
-            viewRef.current,
-            selectedText
-          );
-          if (shouldShowDropdown && searchContributors) {
-            void searchContributors(selectedText).then((contributors) => {
-              setTaggedContributors(contributors);
-            }).catch((error) => {
-              console.error("Error fetching tagged contributors:", error);
-              setTaggedContributors([]);
-            });
-          } else {
-            setTaggedContributors([]);
-          }
-          setShowDropdown(shouldShowDropdown);
-          if (tr.docChanged) {
-            setCurrentDoc(newState.doc);
-            handleSave(lib.convertNodeToBylineModel(newState.doc));
-          }
-        }
-      }
-    });
-    return () => {
-      viewRef.current?.destroy();
-    };
-  }, []);
-  React.useEffect(() => {
-    const numberOfOptions = taggedContributors.length + (allowUntaggedContributors ? 1 : 0);
-    if (numberOfOptions) {
-      if (currentOptionIndex < 0) {
-        setCurrentOptionIndex(numberOfOptions - 1);
-      } else {
-        setCurrentOptionIndex(currentOptionIndex % numberOfOptions);
-      }
-    }
-    if (showDropdown) {
-      const editor = document.querySelector("[role=combobox]");
-      editor?.setAttribute(
-        "aria-activedescendant",
-        `contributor-option-${currentOptionIndex}`
-      );
-      editor?.setAttribute("aria-expanded", "true");
-    }
-  }, [
-    currentOptionIndex,
-    showDropdown,
-    taggedContributors.length,
-    allowUntaggedContributors
-  ]);
-  React.useEffect(() => {
-    if (showDropdown && currentOptionIndex >= 0) {
-      const selectedOption = document.getElementById(
-        `contributor-option-${currentOptionIndex}`
-      );
-      if (selectedOption && dropdownRef.current) {
-        selectedOption.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest"
-        });
-      }
-    }
-  }, [currentOptionIndex, showDropdown]);
-  React.useEffect(() => {
-    if (enterHit) {
-      if (allowUntaggedContributors && currentOptionIndex === taggedContributors.length) {
-        lib.addUntaggedContributor(
-          viewRef,
-          setShowDropdown,
-          contributorLimit,
-          isTypingFromStartRange.current
-        );
-      } else {
-        const contributorToAdd = taggedContributors[currentOptionIndex];
-        if (contributorToAdd) {
-          lib.addTaggedContributor(
-            contributorToAdd,
-            viewRef,
-            setShowDropdown,
-            contributorLimit,
-            isTypingFromStartRange.current
-          );
-        }
-      }
-      setEnterHit(false);
-    }
-  }, [
-    currentOptionIndex,
-    enterHit,
-    taggedContributors,
-    contributorLimit,
-    allowUntaggedContributors
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: styles.bylineContainerStyles, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.bylineEditorStyles(theme), ref: editorRef, onBlur }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: dropdownRef,
-        tabIndex: 0,
-        css: styles.dropdownContainerStyles(
-          showDropdown && // show the dropdown if there are tagged contributors to select or untagged contributors are allowed
-          (taggedContributors.length > 0 || !!allowUntaggedContributors),
-          theme?.dropdown
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { id: "byline-dropdown", role: "listbox", css: styles.dropdownUlStyles, children: [
-          taggedContributors.map((contributor, i) => /* @__PURE__ */ jsxRuntime.jsx(
-            "li",
-            {
-              id: `contributor-option-${i}`,
-              role: "option",
-              "aria-selected": i === currentOptionIndex,
-              css: [
-                styles.dropdownLiStyles(theme?.dropdown),
-                i === currentOptionIndex && styles.selectedDropdownLiStyles(theme?.dropdown)
-              ],
-              onMouseMove: () => {
-                if (currentOptionIndex !== i) {
-                  setCurrentOptionIndex(i);
-                }
-              },
-              onMouseDown: (e) => {
-                e.preventDefault();
-                lib.addTaggedContributor(
-                  contributor,
-                  viewRef,
-                  setShowDropdown,
-                  contributorLimit,
-                  isTypingFromStartRange.current
-                );
-              },
-              children: contributor.internalLabel ?? contributor.label
-            },
-            contributor.tagId
-          )),
-          allowUntaggedContributors && /* @__PURE__ */ jsxRuntime.jsxs(
-            "li",
-            {
-              role: "option",
-              id: `contributor-option-${taggedContributors.length}`,
-              "aria-selected": currentOptionIndex === taggedContributors.length,
-              css: [
-                styles.dropdownLiStyles(theme?.dropdown),
-                currentOptionIndex === taggedContributors.length && styles.selectedDropdownLiStyles(theme?.dropdown)
-              ],
-              onMouseMove: () => {
-                if (currentOptionIndex !== taggedContributors.length) {
-                  setCurrentOptionIndex(taggedContributors.length);
-                }
-              },
-              onMouseDown: (e) => {
-                e.preventDefault();
-                lib.addUntaggedContributor(
-                  viewRef,
-                  setShowDropdown,
-                  contributorLimit,
-                  isTypingFromStartRange.current
-                );
-              },
-              children: [
-                'Add "',
-                currentText,
-                '" as untagged contributor'
-              ]
-            }
-          )
-        ] })
-      }
-    ),
-    enablePreview && /* @__PURE__ */ jsxRuntime.jsx(Preview.Preview, { doc: currentDoc })
-  ] });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_schema = require("./schema.cjs");
+const require_lib = require("./lib.cjs");
+const require_placeholder = require("./placeholder.cjs");
+const require_plugins = require("./plugins.cjs");
+const require_styles = require("./styles.cjs");
+const require_Preview = require("./Preview.cjs");
+let react = require("react");
+let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
+let _guardian_prosemirror_invisibles = require("@guardian/prosemirror-invisibles");
+let prosemirror_dropcursor = require("prosemirror-dropcursor");
+let prosemirror_history = require("prosemirror-history");
+let prosemirror_state = require("prosemirror-state");
+let prosemirror_view = require("prosemirror-view");
+//#region src/components/Byline/Byline.tsx
+/**
+* ## Byline
+*
+* *Status: Production*
+*
+* A flexible byline editor component built in ProseMirror and React with usability and accessibility in mind.
+*
+* **Peer dependencies:**
+*
+* You'll need to install the following peer dependencies in your project to use the `Byline` component:
+* - `@guardian/prosemirror-invisibles`
+* - `prosemirror-dropcursor`
+* - `prosemirror-history`
+* - `prosemirror-keymap`
+* - `prosemirror-model`
+* - `prosemirror-state`
+* - `prosemirror-view`
+*
+* See the `peerDependencies` section of `package.json` for compatible versions to install.
+*
+* #### Usage
+*
+* ```tsx
+* import type { BylineModel } from '@guardian/stand';
+* import { Byline } from '@guardian/stand';
+*
+* const Component = () => {
+*     const bylineModel: BylineModel = {
+*         // ...set up your byline model here
+*     };
+*     ...
+* 	return (
+*         <>
+*         ...
+*             <Byline initialValue={bylineModel} />
+*         ...
+*         </>
+*     );
+* };
+* ```
+*
+* By itself the `Byline` component is just the editor UI.
+* You will need to set up the ProseMirror editor state, schema, and plugins to get a fully functioning byline editor.
+* See the props and example below for a more complete implementation.
+* The `BylineModel` type defines the structure of the byline data which is agnostic from any other data structure. You must convert to/from this model when integrating with your application's data structures.
+*
+* #### Props
+*
+* See {@link BylineProps} for the full list of props, usage example can be seen in Storybook.
+*
+* #### Example
+*
+* The `ContentByline` component in `flexible-frontend` has a detailed example of how to use the `Byline` component from Stand.
+* See [ContentByline.tsx](https://github.com/guardian/flexible-content/blob/1d537615a18ae24a4a5410a3f945b2b9db1dbb47/flexible-frontend/src/app/components/furniture/content-byline/ContentByline.tsx#L72-L205).
+*/
+const Byline = ({ theme, allowUntaggedContributors, contributorLimit, enablePreview, placeholder, initialValue, readOnly, handleSave, searchContributors, onBlur }) => {
+	const editorRef = (0, react.useRef)(null);
+	const viewRef = (0, react.useRef)(null);
+	const dropdownRef = (0, react.useRef)(null);
+	const [currentText, setCurrentText] = (0, react.useState)("");
+	const [currentOptionIndex, setCurrentOptionIndex] = (0, react.useState)(0);
+	const [taggedContributors, setTaggedContributors] = (0, react.useState)([]);
+	const [currentDoc, setCurrentDoc] = (0, react.useState)(null);
+	const [showDropdown, setShowDropdown] = (0, react.useState)(false);
+	const isTypingFromStartRange = (0, react.useRef)(void 0);
+	const trackTypingFromStart = (tr) => {
+		const isCursorSelection = tr.selection.from === tr.selection.to;
+		const currentPosition = tr.selection.from;
+		const hasChanges = tr.steps.length > 0;
+		if (!isCursorSelection) {
+			isTypingFromStartRange.current = void 0;
+			return;
+		}
+		if (!isTypingFromStartRange.current && currentPosition === 1 && hasChanges) {
+			isTypingFromStartRange.current = {
+				start: 1,
+				maxReached: 1,
+				lastPosition: 1
+			};
+			return;
+		}
+		if (isTypingFromStartRange.current) {
+			const { start, maxReached, lastPosition } = isTypingFromStartRange.current;
+			const isWithinRange = currentPosition >= start && currentPosition <= maxReached;
+			const isExtendingRange = hasChanges && currentPosition === maxReached + 1;
+			if (isWithinRange || isExtendingRange) {
+				if (hasChanges) {
+					const positionDelta = currentPosition - lastPosition;
+					if (positionDelta < 0) isTypingFromStartRange.current.maxReached = maxReached - 1;
+					else if (positionDelta > 0) isTypingFromStartRange.current.maxReached = maxReached + 1;
+					isTypingFromStartRange.current.lastPosition = currentPosition;
+				}
+				return;
+			}
+		}
+		isTypingFromStartRange.current = void 0;
+	};
+	const getShouldShowDropdown = (view, selectedText) => {
+		if (readOnly) return false;
+		/**
+		* Determines whether to hide or show the contributor dropdown based on component props,
+		* and should be used in combination with the selected/current text when calling setShowDropdown
+		* The logic evaluates to true when either:
+		* - There are search contributors available OR
+		* - Untagged contributors are allowed
+		* - The document state is under any contributor limit
+		* - The selected text is not empty
+		*/
+		const showDropdownBasedOnProps = !!searchContributors || !!allowUntaggedContributors;
+		if (require_lib.hasHitContributorLimit(view.state.doc, contributorLimit)) return false;
+		return selectedText.trim() !== "" && showDropdownBasedOnProps;
+	};
+	const [enterHit, setEnterHit] = (0, react.useState)(false);
+	const checkDropdownVisibility = () => {
+		if (dropdownRef.current?.checkVisibility) return dropdownRef.current.checkVisibility();
+		else return dropdownRef.current?.offsetParent !== null;
+	};
+	(0, react.useEffect)(() => {
+		if (!editorRef.current) return;
+		const initialDoc = require_lib.convertBylineModelToNode(initialValue);
+		const state = prosemirror_state.EditorState.create({
+			schema: require_schema.bylineEditorSchema,
+			plugins: [
+				(0, prosemirror_dropcursor.dropCursor)(),
+				require_plugins.clipboardPlugin(allowUntaggedContributors, contributorLimit),
+				(0, prosemirror_history.history)(),
+				require_plugins.keybindings(),
+				(0, _guardian_prosemirror_invisibles.createInvisiblesPlugin)([_guardian_prosemirror_invisibles.space, _guardian_prosemirror_invisibles.nbSpace], {
+					displayLineEndSelection: true,
+					shouldShowInvisibles: true
+				}),
+				require_plugins.bylinePlugin(),
+				require_placeholder.createPlaceholderPlugin(placeholder ?? "Enter a byline...")
+			],
+			doc: initialDoc
+		});
+		setCurrentDoc(initialDoc);
+		viewRef.current = new prosemirror_view.EditorView(editorRef.current, {
+			state,
+			editable: () => !readOnly,
+			attributes: {
+				role: "combobox",
+				"aria-label": "byline",
+				"aria-controls": "byline-dropdown",
+				"aria-expanded": "false",
+				"data-testid": "byline-input",
+				...readOnly && { "aria-readonly": "true" }
+			},
+			handleDOMEvents: {
+				keydown: (view, event) => {
+					if (readOnly) return false;
+					if (event.key === "Escape") {
+						setShowDropdown(false);
+						return true;
+					}
+					if (event.key === "ArrowDown") {
+						if (checkDropdownVisibility()) {
+							event.preventDefault();
+							setCurrentOptionIndex((currentOptionIndex) => {
+								return currentOptionIndex + 1;
+							});
+							return true;
+						}
+						return false;
+					}
+					if (event.key === "ArrowUp") {
+						if (checkDropdownVisibility()) {
+							event.preventDefault();
+							setCurrentOptionIndex((currentOptionIndex) => {
+								return currentOptionIndex - 1;
+							});
+							return true;
+						}
+						return false;
+					}
+					if (event.key === "Enter") {
+						if (checkDropdownVisibility()) {
+							event.preventDefault();
+							setEnterHit(true);
+						}
+						return false;
+					}
+					return false;
+				},
+				blur: (_view, event) => {
+					if (readOnly) return false;
+					if (!dropdownRef.current?.contains(event.relatedTarget)) setShowDropdown(false);
+					return false;
+				}
+			},
+			dispatchTransaction(tr) {
+				if (readOnly) {
+					if (tr.docChanged) return;
+					if (viewRef.current) {
+						const newState = viewRef.current.state.apply(tr);
+						viewRef.current.updateState(newState);
+					}
+					return;
+				}
+				if (viewRef.current?.hasFocus()) {
+					trackTypingFromStart(tr);
+					const newState = viewRef.current.state.apply(tr);
+					viewRef.current.updateState(newState);
+					const { selectedText } = require_lib.getCurrentText(newState.doc, newState.selection.from, newState.selection.to, isTypingFromStartRange.current);
+					setCurrentText(selectedText);
+					const shouldShowDropdown = getShouldShowDropdown(viewRef.current, selectedText);
+					if (shouldShowDropdown && searchContributors) searchContributors(selectedText).then((contributors) => {
+						setTaggedContributors(contributors);
+					}).catch((error) => {
+						console.error("Error fetching tagged contributors:", error);
+						setTaggedContributors([]);
+					});
+					else setTaggedContributors([]);
+					setShowDropdown(shouldShowDropdown);
+					if (tr.docChanged) {
+						setCurrentDoc(newState.doc);
+						handleSave(require_lib.convertNodeToBylineModel(newState.doc));
+					}
+				}
+			}
+		});
+		return () => {
+			viewRef.current?.destroy();
+		};
+	}, []);
+	(0, react.useEffect)(() => {
+		const numberOfOptions = taggedContributors.length + (allowUntaggedContributors ? 1 : 0);
+		if (numberOfOptions) if (currentOptionIndex < 0) setCurrentOptionIndex(numberOfOptions - 1);
+		else setCurrentOptionIndex(currentOptionIndex % numberOfOptions);
+		if (showDropdown) {
+			const editor = document.querySelector("[role=combobox]");
+			editor?.setAttribute("aria-activedescendant", `contributor-option-${currentOptionIndex}`);
+			editor?.setAttribute("aria-expanded", "true");
+		}
+	}, [
+		currentOptionIndex,
+		showDropdown,
+		taggedContributors.length,
+		allowUntaggedContributors
+	]);
+	(0, react.useEffect)(() => {
+		if (showDropdown && currentOptionIndex >= 0) {
+			const selectedOption = document.getElementById(`contributor-option-${currentOptionIndex}`);
+			if (selectedOption && dropdownRef.current) selectedOption.scrollIntoView({
+				behavior: "smooth",
+				block: "nearest"
+			});
+		}
+	}, [currentOptionIndex, showDropdown]);
+	(0, react.useEffect)(() => {
+		if (enterHit) {
+			if (allowUntaggedContributors && currentOptionIndex === taggedContributors.length) require_lib.addUntaggedContributor(viewRef, setShowDropdown, contributorLimit, isTypingFromStartRange.current);
+			else {
+				const contributorToAdd = taggedContributors[currentOptionIndex];
+				if (contributorToAdd) require_lib.addTaggedContributor(contributorToAdd, viewRef, setShowDropdown, contributorLimit, isTypingFromStartRange.current);
+			}
+			setEnterHit(false);
+		}
+	}, [
+		currentOptionIndex,
+		enterHit,
+		taggedContributors,
+		contributorLimit,
+		allowUntaggedContributors
+	]);
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
+		css: require_styles.bylineContainerStyles,
+		children: [
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+				css: require_styles.bylineEditorStyles(theme),
+				ref: editorRef,
+				onBlur
+			}),
+			/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+				ref: dropdownRef,
+				tabIndex: 0,
+				css: require_styles.dropdownContainerStyles(showDropdown && (taggedContributors.length > 0 || !!allowUntaggedContributors), theme?.dropdown),
+				children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("ul", {
+					id: "byline-dropdown",
+					role: "listbox",
+					css: require_styles.dropdownUlStyles,
+					children: [taggedContributors.map((contributor, i) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("li", {
+						id: `contributor-option-${i}`,
+						role: "option",
+						"aria-selected": i === currentOptionIndex,
+						css: [require_styles.dropdownLiStyles(theme?.dropdown), i === currentOptionIndex && require_styles.selectedDropdownLiStyles(theme?.dropdown)],
+						onMouseMove: () => {
+							if (currentOptionIndex !== i) setCurrentOptionIndex(i);
+						},
+						onMouseDown: (e) => {
+							e.preventDefault();
+							require_lib.addTaggedContributor(contributor, viewRef, setShowDropdown, contributorLimit, isTypingFromStartRange.current);
+						},
+						children: contributor.internalLabel ?? contributor.label
+					}, contributor.tagId)), allowUntaggedContributors && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("li", {
+						role: "option",
+						id: `contributor-option-${taggedContributors.length}`,
+						"aria-selected": currentOptionIndex === taggedContributors.length,
+						css: [require_styles.dropdownLiStyles(theme?.dropdown), currentOptionIndex === taggedContributors.length && require_styles.selectedDropdownLiStyles(theme?.dropdown)],
+						onMouseMove: () => {
+							if (currentOptionIndex !== taggedContributors.length) setCurrentOptionIndex(taggedContributors.length);
+						},
+						onMouseDown: (e) => {
+							e.preventDefault();
+							require_lib.addUntaggedContributor(viewRef, setShowDropdown, contributorLimit, isTypingFromStartRange.current);
+						},
+						children: [
+							"Add \"",
+							currentText,
+							"\" as untagged contributor"
+						]
+					})]
+				})
+			}),
+			enablePreview && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Preview.Preview, { doc: currentDoc })
+		]
+	});
 };
-
+//#endregion
 exports.Byline = Byline;