From 1c7574e594292aec789cc0a800e631dea122ff77 Mon Sep 17 00:00:00 2001
From: Leah <8845940+ForsakenHarmony@users.noreply.github.com>
Date: Wed, 20 Mar 2024 02:45:32 +0100
Subject: [PATCH] `table-input` - Improve wrapping behavior (#7259)

Co-authored-by: Federico Brigante <me@fregante.com>
---
 .../features/collapsible-content-button.tsx   | 45 +++++++------------
 source/features/table-input.tsx               | 17 ++++---
 source/github-helpers/index.ts                |  7 +++
 3 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/source/features/collapsible-content-button.tsx b/source/features/collapsible-content-button.tsx
index 5f3548e5e7b..feb27c4ca77 100644
--- a/source/features/collapsible-content-button.tsx
+++ b/source/features/collapsible-content-button.tsx
@@ -3,12 +3,12 @@ import FoldDownIcon from 'octicons-plain-react/FoldDown';
 import * as pageDetect from 'github-url-detection';
 import {insertTextIntoField} from 'text-field-edit';
 import delegate, {DelegateEvent} from 'delegate-it';
-import {elementExists} from 'select-dom';
 
 import features from '../feature-manager.js';
 import smartBlockWrap from '../helpers/smart-block-wrap.js';
 import observe from '../helpers/selector-observer.js';
 import {isHasSelectorSupported} from '../helpers/select-has.js';
+import {triggerActionBarOverflow} from '../github-helpers/index.js';
 
 function addContentToDetails({delegateTarget}: DelegateEvent<MouseEvent, HTMLButtonElement>): void {
 	/* There's only one rich-text editor even when multiple fields are visible; the class targets it #5303 */
@@ -36,29 +36,18 @@ function addContentToDetails({delegateTarget}: DelegateEvent<MouseEvent, HTMLBut
 	);
 }
 
-function addButtons(referenceButton: HTMLElement): void {
-	const classes
-	= elementExists('md-ref', referenceButton)
-		? [
-			'toolbar-item',
-			'btn-octicon',
-			'p-2',
-			'p-md-1',
-			'tooltipped',
-			'tooltipped-sw',
-			'rgh-collapsible-content-btn',
-		]
-		: [
-			'Button',
-			'Button--iconOnly',
-			'Button--invisible',
-			'Button--medium',
-			'tooltipped',
-			'tooltipped-sw',
-			'rgh-collapsible-content-btn',
-		];
-
-	referenceButton.after(
+function append(container: HTMLElement): void {
+	const classes = [
+		'Button',
+		'Button--iconOnly',
+		'Button--invisible',
+		'Button--medium',
+		'tooltipped',
+		'tooltipped-sw',
+		'rgh-collapsible-content-btn',
+	];
+
+	container.append(
 		<button
 			type="button"
 			className={classes.join(' ')}
@@ -68,13 +57,13 @@ function addButtons(referenceButton: HTMLElement): void {
 			<FoldDownIcon/>
 		</button>,
 	);
+
+	triggerActionBarOverflow(container);
 }
 
 function init(signal: AbortSignal): void {
-	observe([
-		'md-ref', // TODO: Drop in June 2024
-		'.ActionBar-item:has([data-md-button=\'ref\'])',
-	], addButtons, {signal});
+	observe(
+		'[data-target="action-bar.itemContainer"]', append, {signal});
 	delegate('.rgh-collapsible-content-btn', 'click', addContentToDetails, {signal});
 }
 
diff --git a/source/features/table-input.tsx b/source/features/table-input.tsx
index 2e145c7fcf3..cfde0522e37 100644
--- a/source/features/table-input.tsx
+++ b/source/features/table-input.tsx
@@ -9,6 +9,7 @@ import features from '../feature-manager.js';
 import smartBlockWrap from '../helpers/smart-block-wrap.js';
 import observe from '../helpers/selector-observer.js';
 import {isHasSelectorSupported} from '../helpers/select-has.js';
+import {triggerActionBarOverflow} from '../github-helpers/index.js';
 
 function addTable({delegateTarget: square}: DelegateEvent<MouseEvent, HTMLButtonElement>): void {
 	/* There's only one rich-text editor even when multiple fields are visible; the class targets it #5303 */
@@ -32,7 +33,7 @@ function addTable({delegateTarget: square}: DelegateEvent<MouseEvent, HTMLButton
 	field.selectionEnd = field.value.indexOf('<td>', cursorPosition) + '<td>'.length;
 }
 
-function add(anchor: HTMLElement): void {
+function append(container: HTMLElement): void {
 	const wrapperClasses = [
 		'details-reset',
 		'details-overlay',
@@ -40,7 +41,7 @@ function add(anchor: HTMLElement): void {
 		'select-menu',
 		'select-menu-modal-right',
 		'hx_rsm',
-		'float-left',
+		'ActionBar-item',
 	];
 
 	const buttonClasses = [
@@ -50,8 +51,11 @@ function add(anchor: HTMLElement): void {
 		'Button--medium',
 	];
 
-	anchor.after(
-		<details className={wrapperClasses.join(' ')}>
+	container.append(
+		<details
+			className={wrapperClasses.join(' ')}
+			data-targets="action-bar.items" // Enables automatic hiding when it doesn't fit
+		>
 			<summary
 				className={buttonClasses.join(' ')}
 				role="button"
@@ -68,7 +72,6 @@ function add(anchor: HTMLElement): void {
 			<details-menu
 				className="select-menu-modal position-absolute left-0 hx_rsm-modal rgh-table-input"
 				role="menu"
-				data-targets="action-bar.items" // Enables automatic hiding when it doesn't fit
 			>
 				{Array.from({length: 25}).map((_, index) => (
 					<button
@@ -84,10 +87,12 @@ function add(anchor: HTMLElement): void {
 			</details-menu>
 		</details>,
 	);
+
+	triggerActionBarOverflow(container);
 }
 
 function init(signal: AbortSignal): void {
-	observe('.ActionBar-item:has([data-md-button=\'ref\'])', add, {signal});
+	observe('[data-target="action-bar.itemContainer"]', append, {signal});
 	delegate('.rgh-tic', 'click', addTable, {signal});
 }
 
diff --git a/source/github-helpers/index.ts b/source/github-helpers/index.ts
index 0df3c08e46e..bb6c9b9d2d0 100644
--- a/source/github-helpers/index.ts
+++ b/source/github-helpers/index.ts
@@ -155,3 +155,10 @@ export function addAfterBranchSelector(branchSelectorParent: HTMLDetailsElement,
 export function triggerRepoNavOverflow(): void {
 	window.dispatchEvent(new Event('resize'));
 }
+
+export function triggerActionBarOverflow(child: Element): void {
+	const parent = child.closest('action-bar')!;
+	const placeholder = document.createElement('div');
+	parent.replaceWith(placeholder);
+	placeholder.replaceWith(parent);
+}