Feature - implement huxInlineEditor pattern#43
Open
Copilot wants to merge 20 commits into
Open
Conversation
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/1e90af84-83de-4e91-acf0-4a2cb3846f0e Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Contributor
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
hyperux | e18448d | Commit Preview URL Branch Preview URL |
May 23 2026, 06:18 PM |
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/1e90af84-83de-4e91-acf0-4a2cb3846f0e Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Add inline editor pattern/component
Feature - Add behavior-first Inline Editor pattern
May 21, 2026
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/cc489f25-c85c-4922-a027-eda388dcd11b Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/cc489f25-c85c-4922-a027-eda388dcd11b Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/cc489f25-c85c-4922-a027-eda388dcd11b Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new “Inline Editor” pattern to HyperUX, including a demo, docs, and an Alpine registration script that supports the inputValue state (with backward-compatible value fallback).
Changes:
- Introduces
huxInlineEditorAlpine data component registration (state, commit/revert, focus trapping, events). - Adds an Inline Editor demo component wired to the new registration and copy-to-clipboard integration.
- Adds a full pattern documentation page for Inline Editor using the repo’s behavior-first documentation structure.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/content/patterns/inline-editor.mdx | New Inline Editor pattern documentation page (API, options, usage, behavior, a11y). |
| src/components/PatternRegistration.astro | Registers new huxInlineEditor Alpine data component and emits commit/revert events. |
| src/components/demos/InlineEditor.astro | New demo showcasing read/edit swap, focus trap, and keyboard commit/revert behavior. |
Comments suppressed due to low confidence (1)
src/content/patterns/inline-editor.mdx:141
- This error-handling description is stricter than the implementation: the component only logs the missing x-ref error after it fails to resolve any input/textarea (it falls back to querying
input, textareainside the focus-trap root). Missing the configuredx-refalone won’t necessarily log. Please update the wording to match the actual logging condition.
- If the configured input ref is missing when edit mode starts, the component logs:
`[huxInlineEditor] Missing x-ref target for inlineEditorInput.` by default. If you override
`inputTemplateRef`, the logged value uses that configured ref name.
- Missing optional listeners do not affect commit/revert behavior.
Owner
|
@copilot Address the feedback – it is an issue. I'm unsure on the best approach, I previously mentioned that we could use |
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/e2d8942d-06d9-440c-a267-d53800bc6dc3 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/e2d8942d-06d9-440c-a267-d53800bc6dc3 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/e2d8942d-06d9-440c-a267-d53800bc6dc3 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/e2d8942d-06d9-440c-a267-d53800bc6dc3 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/e2d8942d-06d9-440c-a267-d53800bc6dc3 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/e2d8942d-06d9-440c-a267-d53800bc6dc3 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/e2d8942d-06d9-440c-a267-d53800bc6dc3 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/e2d8942d-06d9-440c-a267-d53800bc6dc3 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Contributor
Author
Implemented in Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Owner
|
@copilot Address the PR feedback. |
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/d80cd82a-513d-4e63-9f66-588d69842d0e Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Contributor
Author
Done in Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
markmead
changed the title
huxInlineEditor pattern
Clean up InlineEditor component markup: wrap the paragraph text for readability, consolidate x-cloak/x-show onto single lines and remove x-transition.opacity attributes. Adjust the input classes to use explicit border and updated padding (removed fixed height h-10, added border, px-4 and py-2) for improved sizing and visual consistency.
markmead
approved these changes
May 23, 2026
Reformat the inline editor container element so each Alpine attribute is on its own line (x-show, x-cloak, x-transition, x-ref, x-on:keydown). This improves readability and aligns the markup with the project's preferred element formatting.
Replace the single inline editor demo with a multi-field "Edit profile" section. Swap the root div for a section and add a header and badge, then introduce a responsive grid of inline editor cards (Display name, Headline, Location, Website, Username, Pronouns). Each card uses x-data="huxInlineEditor(...)" and includes view/edit states, inputs, and Save/Cancel controls; keyboard/focus trapping and ARIA attributes are preserved. Remove the previous single-editor tip paragraph and adjust spacing and styling for the new layout.
Comment on lines
+591
to
+592
| targetElement.focus() | ||
| this.selectInputText(targetElement) |
Comment on lines
+68
to
+73
| aria-describedby="profile-inline-editor-help" | ||
| class="min-w-0 flex-1 rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none" | ||
| x-on:focus="handleInputFocus($event)" | ||
| x-on:keydown="handleInputKeydown($event)" | ||
| /> | ||
|
|
Owner
There was a problem hiding this comment.
Remove it – I don't think it's needed.
Comment on lines
+90
to
+97
| <input | ||
| x-ref="inlineEditorInput" | ||
| x-model="draftValue" | ||
| type="text" | ||
| x-init="registerInput($el)" | ||
| aria-describedby="profile-name-inline-editor-help" | ||
| x-on:focus="handleInputFocus($event)" | ||
| x-on:keydown="handleInputKeydown($event)" |
Owner
|
@copilot Address the feedback. |
Agent-Logs-Url: https://github.com/markmead/hyperux/sessions/afe5fec7-83a4-4b54-bb88-c68ccfa52a15 Co-authored-by: markmead <50486078+markmead@users.noreply.github.com>
Contributor
Author
Done in Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new Alpine.js pattern for inline editing, providing both implementation and documentation. The main change is the addition of a reusable
huxInlineEditorAlpine data object, which manages toggling between read and edit modes, keyboard shortcuts, focus management, and event dispatching for commit/revert actions. Comprehensive documentation is also included to guide usage, configuration, and accessibility.Inline editor implementation:
huxInlineEditorAlpine data object inPatternRegistration.astro, supporting edit mode toggling, input management, keyboard shortcuts (Enter/Escape), focus trapping, and robust focus restoration after editing.Documentation:
inline-editor.mdxdescribing the API, usage patterns, options, behavior contract, error handling, and accessibility guidance for thehuxInlineEditorpattern.