Skip to content

feat: hide editor title bar when embedded in iframe#368

Merged
hsluoyz merged 4 commits intomasterfrom
copilot/hide-editor-title-bar
Dec 22, 2025
Merged

feat: hide editor title bar when embedded in iframe#368
hsluoyz merged 4 commits intomasterfrom
copilot/hide-editor-title-bar

Conversation

Copy link
Contributor

Copilot AI commented Dec 22, 2025

The editor's top title bar (Casbin logo and "Policy Editor" text) now hides automatically when the application is embedded in an iframe, providing a cleaner embedded experience.

Changes

  • app/utils/iframeDetector.ts (new): Detects iframe context via window.self !== window.top with cross-origin error handling and SSR safety check

  • app/components/editor/index.tsx: Conditionally renders header using memoized iframe detection

// Detect once on mount, value doesn't change during session
const isIframe = useMemo(() => {
  return isInsideIframe();
}, []);

// Conditionally render header
{!isIframe && (
  <div className="...">
    <img src="..." alt="Casbin Logo" />
    <span>Policy Editor</span>
    ...
  </div>
)}

Screenshots

Normal view (title bar visible):
Normal View

Iframe view (title bar hidden):
Iframe View

Original prompt

This section details on the original issue you should resolve

<issue_title>[feature] hide the editor's top title bar when it's inside iframe</issue_title>
<issue_description></issue_description>

Comments on the Issue (you are @copilot in this section)


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@netlify
Copy link

netlify bot commented Dec 22, 2025

Deploy Preview for casbin-editor ready!

Name Link
🔨 Latest commit 5f230b8
🔍 Latest deploy log https://app.netlify.com/projects/casbin-editor/deploys/69497c37cb8ee000083ee677
😎 Deploy Preview https://deploy-preview-368--casbin-editor.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

@hsluoyz hsluoyz marked this pull request as ready for review December 22, 2025 17:04
Copilot AI and others added 3 commits December 22, 2025 17:05
Co-authored-by: hsluoyz <3787410+hsluoyz@users.noreply.github.com>
Co-authored-by: hsluoyz <3787410+hsluoyz@users.noreply.github.com>
Co-authored-by: hsluoyz <3787410+hsluoyz@users.noreply.github.com>
Copilot AI changed the title [WIP] Hide editor's top title bar in iframe Hide editor title bar when embedded in iframe Dec 22, 2025
Copilot AI requested a review from hsluoyz December 22, 2025 17:16
@hsluoyz hsluoyz changed the title Hide editor title bar when embedded in iframe feat: hide editor title bar when embedded in iframe Dec 22, 2025
@hsluoyz hsluoyz merged commit d2c409b into master Dec 22, 2025
9 of 11 checks passed
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.

[feature] hide the editor's top title bar when it's inside iframe

3 participants