@tldraw/commenting 0.0.0-bootstrap → 5.3.0-internal.c5c7f1d817d0

package/src/ui/mention-list.tsx

@@ -38,15 +38,15 @@ function DefaultMemberRow({ member }: { member: MentionMember }) {
 	return (
 		<>
 			<Avatar name={member.name} color={member.color} image={member.avatar} />
-			<span className="cmt-mention-list__text">
-				<span className="cmt-mention-list__name">
+			<span className="tlui-cmt-mention-list__text">
+				<span className="tlui-cmt-mention-list__name">
 					{member.name}
 					{member.you && (
-						<span className="cmt-mention-list__you">{`(${msg('comments.mention-you')})`}</span>
+						<span className="tlui-cmt-mention-list__you">{`(${msg('comments.mention-you')})`}</span>
 					)}
 				</span>
 				{member.secondary && (
-					<span className="cmt-mention-list__secondary">{member.secondary}</span>
+					<span className="tlui-cmt-mention-list__secondary">{member.secondary}</span>
 				)}
 			</span>
 		</>
@@ -69,13 +69,13 @@ export function MentionList({
 	const msg = useTranslation()
 	if (members.length === 0) {
 		return (
-			<div className="cmt-mention-list cmt-mention-list--empty">
+			<div className="tlui-cmt-mention-list tlui-cmt-mention-list--empty">
 				{emptyLabel ?? msg('comments.mention-no-matches')}
 			</div>
 		)
 	}
 	return (
-		<div className="cmt-mention-list" role="listbox">
+		<div className="tlui-cmt-mention-list" role="listbox">
 			{members.map((member, i) => {
 				const active = i === activeIndex
 				return (
@@ -86,8 +86,8 @@ export function MentionList({
 						aria-selected={active}
 						className={
 							active
-								? 'cmt-mention-list__item cmt-mention-list__item--active'
-								: 'cmt-mention-list__item'
+								? 'tlui-cmt-mention-list__item tlui-cmt-mention-list__item--active'
+								: 'tlui-cmt-mention-list__item'
 						}
 						// Keep the composer focused on a row press: it's portaled outside the editor, so a
 						// bare mousedown would blur the composer — which now dismisses the picker — before

package/src/ui/mention-suggestion.tsx

@@ -139,7 +139,7 @@ export function createMentionSuggestion(
 			// the caret, matching its width), and remember the field's page-space anchor for reposition.
 			const place = () => {
 				if (!container || !editorEl || container.style.display === 'none') return
-				const field = editorEl.closest('.cmt-composer__field') ?? editorEl
+				const field = editorEl.closest('.tlui-cmt-composer__field') ?? editorEl
 				const rect = field.getBoundingClientRect()
 				popupWidth = rect.width
 				anchorPage = options.editor?.screenToPage({ x: rect.left, y: rect.bottom }) ?? null
@@ -193,7 +193,7 @@ export function createMentionSuggestion(
 			// only redispatch when it can't). Done imperatively because the popup lives outside React.
 			const onWheel = (e: WheelEvent) => {
 				if ((e as any).isSpecialRedispatchedEvent || !canvasEl) return
-				const list = container?.querySelector('.cmt-mention-list')
+				const list = container?.querySelector('.tlui-cmt-mention-list')
 				if (list && list.scrollHeight > list.clientHeight) return
 				e.preventDefault()
 				const redispatched = new WheelEvent('wheel', e)
@@ -217,7 +217,7 @@ export function createMentionSuggestion(
 					// composer — leaving Escape a no-op and the roster stuck on screen.
 					editorEl.addEventListener('blur', hide)
 					container = document.createElement('div')
-					container.className = 'cmt-mention-popup'
+					container.className = 'tlui-cmt-mention-popup'
 					container.appendChild(renderer.element)
 					// Mount inside the tldraw container so the popup inherits the theme variables
 					// (--tl-color-*); portaling to document.body would strip them and lose the panel.

package/src/ui/mention.tsx

@@ -5,5 +5,5 @@ export interface MentionProps {
 
 /** An \@-mention pill for referencing a person in a comment. @public @react */
 export function Mention({ name }: MentionProps) {
-	return <span className="cmt-mention">@{name}</span>
+	return <span className="tlui-cmt-mention">@{name}</span>
 }

package/src/ui/reaction.tsx

@@ -8,9 +8,12 @@ export interface ReactionProps {
 /** A single emoji reaction pill with a count, highlighted when the user reacted. @public @react */
 export function Reaction({ emoji, count, active }: ReactionProps) {
 	return (
-		<button className={active ? 'cmt-reaction cmt-reaction--active' : 'cmt-reaction'} type="button">
-			<span className="cmt-reaction__emoji">{emoji}</span>
-			<span className="cmt-reaction__count">{count}</span>
+		<button
+			className={active ? 'tlui-cmt-reaction tlui-cmt-reaction--active' : 'tlui-cmt-reaction'}
+			type="button"
+		>
+			<span className="tlui-cmt-reaction__emoji">{emoji}</span>
+			<span className="tlui-cmt-reaction__count">{count}</span>
 		</button>
 	)
 }

package/src/ui/reactions.tsx

@@ -3,11 +3,15 @@ import { Reaction } from './reaction'
 /** The row of reactions under a comment, plus an add-reaction button. @public @react */
 export function Reactions() {
 	return (
-		<div className="cmt-reactions">
+		<div className="tlui-cmt-reactions">
 			<Reaction emoji="👍" count={3} active={true} />
 			<Reaction emoji="🎉" count={1} active={false} />
 			<Reaction emoji="👀" count={2} active={false} />
-			<button className="cmt-reaction cmt-reaction--add" type="button" aria-label="Add reaction">
+			<button
+				className="tlui-cmt-reaction tlui-cmt-reaction--add"
+				type="button"
+				aria-label="Add reaction"
+			>
 				＋
 			</button>
 		</div>

package/src/ui/send-button.tsx

@@ -8,7 +8,7 @@ export interface SendButtonProps {
 /** The button that posts a comment. @public @react */
 export function SendButton({ label, disabled, onClick }: SendButtonProps) {
 	return (
-		<button className="cmt-send" type="button" disabled={disabled} onClick={onClick}>
+		<button className="tlui-cmt-send" type="button" disabled={disabled} onClick={onClick}>
 			{label}
 		</button>
 	)