Skip to content

fix: enable link search in feature image caption and center caption text#28730

Open
Dikshant0Git wants to merge 5 commits into
TryGhost:mainfrom
Dikshant0Git:fix/feature-image-caption-search-links
Open

fix: enable link search in feature image caption and center caption text#28730
Dikshant0Git wants to merge 5 commits into
TryGhost:mainfrom
Dikshant0Git:fix/feature-image-caption-search-links

Conversation

@Dikshant0Git

Copy link
Copy Markdown

Context
#28359

Problem

The feature image caption editor in Ghost Admin runs as an isolated instance separate from the main editor canvas. This isolation introduced two specific UI/UX issues:

  • Missing Search Dropdown: The component did not pass down the global configuration context. Because cardConfig.searchLinks was missing, the editor was forced to drop back to a basic text input fallback that lacked autocomplete capabilities and collapsed heavily under short character selections.
  • Layout Mismatch: The feature image caption was left-aligned by default, breaking visual consistency with standard body-level image card captions which are center-aligned.

Fix

  • ghost/admin/app/components/koenig-lexical-editor-input.js: Injects Ember's search, settings, and store services directly into the component. It implements a robust, cached, and filtered asynchronous searchLinks method within the React wrapper and threads it directly into the caption editor as a structured cardConfig prop. This restores the full autocomplete suggestion list when users format links.
  • ghost/admin/app/styles/layouts/editor.css: Adds a clean CSS rule targeting .gh-editor-feature-image-caption specifying text-align: center to ensure uniform layout alignment.
  • No Parent Bloat: The layout configuration and logic are entirely contained within the specific component that initializes the feature image caption composer, avoiding the need to alter high-level handlebars templates or pollute parent prop chains.

Tests

Added local unit and static validation tests covering the new behavior (test_search_links.js):

  • Verified correct default posts resolution and caching logic when the search term is empty.
  • Verified proper handling of task cancellations and error propagation within the searchLinks context layer.

Scope

The underlying layout collapse symptom—where the fallback input box shrinks tightly around a small text range when a configuration is absent—is caused by the basic input field layout inside the engine package and is handled directly in the Koenig repository workspace.

This PR fixes the root problem inside Ghost Admin by ensuring the correct configuration context is always provided to the composer.

However, the visual symptom of that bug—where the fallback input box shrank so tightly around small text selections that it became unusable—lives inside the core editor package. To address this comprehensively, a companion PR has been submitted to the Koenig repository:

  • Ghost PR (This one): Restores the missing cardConfig context so the advanced link autocomplete toolbar works seamlessly.
  • Koenig PR (Cross-referenced): Adds a defensive min-w-[240px] rule to LinkInput.jsx to ensure that even if a fallback input is triggered anywhere else in the ecosystem, the UI remains resilient and usable.

By decoupling these fixes, we ensure immediate feature availability in Ghost Admin while contributing a permanent UI safety layer to the shared Koenig codebase.

fix-snippet.md

@coderabbitai

coderabbitai Bot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 32da3401-4b9b-4041-a64a-4abd55961f14

📥 Commits

Reviewing files that changed from the base of the PR and between 57ddca1 and d010da9.

📒 Files selected for processing (1)
  • ghost/admin/app/components/koenig-lexical-editor-input.js
💤 Files with no reviewable changes (1)
  • ghost/admin/app/components/koenig-lexical-editor-input.js

Walkthrough

KoenigLexicalEditorInput is extended with three injected Ember services (search, settings, store) and a defaultLinks cache. An async searchLinks(term) function is added: when called without a term it fetches the latest 5 published posts via store.query, decorates them with decoratePostSearchResult, and caches the result; when a term is supplied it calls search.searchTask.perform, suppresses task cancellation errors via didCancel, filters results to published Posts/Pages, removes /404/ Staff URLs, and decorates the matching items. The function is bundled into cardConfig and passed as a prop to KoenigComposer. Separately, the editor CSS adds appearance: none to the feature image caption/alt-text rule and introduces a dedicated text-align: center rule for .gh-editor-feature-image-caption.

Possibly related issues

  • #28359: The CSS modifications add text-align: center to .gh-editor-feature-image-caption, which addresses feature image caption alignment issues.
🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Linked Issues check ⚠️ Warning The linked issue #39 about image upload markdown syntax is unrelated to the PR's actual changes, which focus on link search functionality and caption alignment. Remove the incorrect linked issue #39 or provide the correct linked issue (#28359) that matches the PR's objectives of fixing link search and caption layout.
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main changes: enabling link search in the feature image caption editor and centering caption text alignment.
Description check ✅ Passed The description thoroughly explains the context, problems, fixes, tests, and scope of the PR, clearly relating to the implemented code changes.
Out of Scope Changes check ✅ Passed All changes are within scope: service injections and searchLinks implementation for caption editor, CSS styling for alignment, and removal of unused session service.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
ghost/admin/app/components/koenig-lexical-editor-input.js (1)

71-74: ⚡ Quick win

Remove unused session service injection.

@service session is injected but never used in this component. The other injected services (search, settings, store) are all used in searchLinks, but session has no references.

♻️ Proposed fix
 `@service` search;
-@service session;
 `@service` settings;
 `@service` store;
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ghost/admin/app/components/koenig-lexical-editor-input.js` around lines 71 -
74, The `@service session` injection in the koenig-lexical-editor-input
component is never referenced or used anywhere in the component code, unlike the
`search`, `settings`, and `store` services which are all utilized. Remove the
`@service session` line from the service injections to clean up the unused
dependency and improve code clarity.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@ghost/admin/app/components/koenig-lexical-editor-input.js`:
- Around line 134-140: In the catch block where the task cancellation is checked
using didCancel(error), the function currently returns undefined when a
cancellation error occurs. Change the bare return statement to return an empty
array instead, so that the function consistently returns an array type
regardless of whether it completes successfully or is cancelled.

---

Nitpick comments:
In `@ghost/admin/app/components/koenig-lexical-editor-input.js`:
- Around line 71-74: The `@service session` injection in the
koenig-lexical-editor-input component is never referenced or used anywhere in
the component code, unlike the `search`, `settings`, and `store` services which
are all utilized. Remove the `@service session` line from the service injections
to clean up the unused dependency and improve code clarity.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 3daab821-e4b9-4973-a36d-146e2975c142

📥 Commits

Reviewing files that changed from the base of the PR and between 06c514b and 8e26c28.

📒 Files selected for processing (2)
  • ghost/admin/app/components/koenig-lexical-editor-input.js
  • ghost/admin/app/styles/layouts/editor.css

Comment thread ghost/admin/app/components/koenig-lexical-editor-input.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant