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

package/src/ui/comment-mention.ts

@@ -26,7 +26,7 @@ export interface CommentMentionOptions {
 }
 
 /**
- * The comment @-mention node — TipTap's `Mention` configured to render as a `.cmt-mention` pill.
+ * The comment @-mention node — TipTap's `Mention` configured to render as a `.tlui-cmt-mention` pill.
  *
  * A factory rather than a shared constant because it's configured differently per context: the
  * read-only render paths pass `resolveName` (so the stored `{ id }` node always shows the member's
@@ -35,7 +35,7 @@ export interface CommentMentionOptions {
  */
 export function commentMention({ resolveName, suggestion }: CommentMentionOptions = {}) {
 	return Mention.configure({
-		HTMLAttributes: { class: 'cmt-mention' },
+		HTMLAttributes: { class: 'tlui-cmt-mention' },
 		renderText: ({ node }) => `@${mentionName(node.attrs as MentionNodeAttrs, resolveName)}`,
 		renderHTML: ({ node, options }) => [
 			'span',

package/src/ui/comment-pin.tsx

@@ -14,7 +14,11 @@ export interface CommentPinProps {
  * presentational — it reflects open/resolved state via CSS; wrap it to make it clickable.
  * @public @react */
 export function CommentPin({ children, resolved, open }: CommentPinProps) {
-	const className = ['cmt-pin', resolved && 'cmt-pin--resolved', open && 'cmt-pin--open']
+	const className = [
+		'tlui-cmt-pin',
+		resolved && 'tlui-cmt-pin--resolved',
+		open && 'tlui-cmt-pin--open',
+	]
 		.filter(Boolean)
 		.join(' ')
 	return <div className={className}>{resolved ? '✓' : children}</div>

package/src/ui/comment-text.tsx

@@ -8,5 +8,5 @@ export interface CommentTextProps {
 
 /** A comment's body, rendered as markdown (bold, italic, code, links, lists). @public @react */
 export function CommentText({ text }: CommentTextProps) {
-	return <div className="cmt-text">{renderMarkdown(text)}</div>
+	return <div className="tlui-cmt-text">{renderMarkdown(text)}</div>
 }

package/src/ui/comment-thread.tsx

@@ -33,17 +33,19 @@ export function CommentThread({
 	renderComment,
 }: CommentThreadProps) {
 	return (
-		<div className="cmt-thread">
+		<div className="tlui-cmt-thread">
 			{(header !== undefined || headerActions !== undefined) && (
-				<div className="cmt-thread__header">
-					<span className="cmt-thread__title">{header}</span>
+				<div className="tlui-cmt-thread__header">
+					<span className="tlui-cmt-thread__title">{header}</span>
 					{headerActions !== undefined && (
-						<div className="cmt-thread__actions">{headerActions}</div>
+						<div className="tlui-cmt-thread__actions">{headerActions}</div>
 					)}
 				</div>
 			)}
-			{resolvedBanner !== undefined && <div className="cmt-thread__resolved">{resolvedBanner}</div>}
-			<div className="cmt-thread__list">
+			{resolvedBanner !== undefined && (
+				<div className="tlui-cmt-thread__resolved">{resolvedBanner}</div>
+			)}
+			<div className="tlui-cmt-thread__list">
 				{comments.map((comment, i) => (
 					<div key={i}>
 						{renderComment ? renderComment(comment, i) : <CommentCard {...comment} />}

package/src/ui/comments-list.tsx

@@ -52,17 +52,17 @@ export function CommentsList({
 	renderItem,
 }: CommentsListProps) {
 	return (
-		<div className="cmt-list">
+		<div className="tlui-cmt-list">
 			{(header !== undefined || headerAction) && (
-				<div className="cmt-list__header">
-					{header !== undefined && <span className="cmt-list__header-title">{header}</span>}
+				<div className="tlui-cmt-list__header">
+					{header !== undefined && <span className="tlui-cmt-list__header-title">{header}</span>}
 					{headerAction}
 				</div>
 			)}
 			{items.length === 0 ? (
-				<div className="cmt-list__empty">{empty}</div>
+				<div className="tlui-cmt-list__empty">{empty}</div>
 			) : (
-				<div className="cmt-list__items">
+				<div className="tlui-cmt-list__items">
 					{items.map((item) =>
 						renderItem ? (
 							renderItem(item)
@@ -99,27 +99,31 @@ function CommentListItem({
 	return (
 		<button
 			type="button"
-			className={selected ? 'cmt-list__item cmt-list__item--selected' : 'cmt-list__item'}
+			className={
+				selected ? 'tlui-cmt-list__item tlui-cmt-list__item--selected' : 'tlui-cmt-list__item'
+			}
 			data-resolved={resolved || undefined}
 			onClick={handleClick}
 		>
 			<Avatar name={author} />
-			<div className="cmt-list__item-body">
+			<div className="tlui-cmt-list__item-body">
 				<Byline author={author} date={date} />
-				<div className="cmt-list__item-preview">{preview}</div>
+				<div className="tlui-cmt-list__item-preview">{preview}</div>
 				{(resolved || page !== undefined) && (
-					<div className="cmt-list__item-meta">
+					<div className="tlui-cmt-list__item-meta">
 						{resolved && (
-							<span className="cmt-list__item-resolved">
+							<span className="tlui-cmt-list__item-resolved">
 								<CheckIcon />
 								{resolvedLabel}
 							</span>
 						)}
-						{page !== undefined && <span className="cmt-list__item-page">{page}</span>}
+						{page !== undefined && <span className="tlui-cmt-list__item-page">{page}</span>}
 					</div>
 				)}
 			</div>
-			{count !== undefined && count > 1 && <span className="cmt-list__item-count">{count}</span>}
+			{count !== undefined && count > 1 && (
+				<span className="tlui-cmt-list__item-count">{count}</span>
+			)}
 		</button>
 	)
 }