Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: text color detection bug fixed #1565

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

0x23d11
Copy link
Contributor

@0x23d11 0x23d11 commented Mar 8, 2025

Description

When selecting text elements in the editor (particularly headings), the properties panel was displaying text color as #000000 (black) even when the actual text had a different color (like red). This created a disconnect between what users saw in the editor and what was shown in the color properties panel.

My Approach:

Modified the ColorInput component to better handle text elements (p, h1-h6, span, div) by prioritizing the computed color values directly from the DOM, ensuring that both inherited and applied colors are displayed correctly.

Refined the isColorEmpty utility function to more accurately determine when a color is truly empty, preventing valid color values (such as black) from being incorrectly treated as empty.

Related Issues

closes #1528

Type of Change

  • Bug fix
  • New feature
  • Documentation update
  • Release
  • Other (please describe):

Screenshots (if applicable)

https://drive.google.com/file/d/1e8t2h5EoVcqeLmFiZyMKZ_ft6KkSCEBH/view?usp=drive_link

Additional Notes

const color = Color.from(colorValue);

// Only consider it empty if it has zero alpha or exactly equals transparent
// Don't consider black (#000000) or other valid colors as empty
Copy link
Contributor

Choose a reason for hiding this comment

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

We actually don't consider black empty color. You might be seeing #00000000 which is transparent black. The issue seen is actually that there is no set color on the text color instead of it accidentally seeing black as empty. For example, if you set actual black #000000, it'll show up
Screenshot 2025-03-08 at 5 17 24 PM

...selectedEl.styles?.defined,
};
// Debug log to check what styles are coming from the DOM
console.log('Selected element:', selectedEl.tagName);
Copy link
Contributor

Choose a reason for hiding this comment

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

We shouldn't ship logs in production

@@ -1,7 +1,7 @@
# Only add these if you have valid keys. Otherwise, comment them out.
VITE_SUPABASE_API_URL=
VITE_SUPABASE_ANON_KEY=
VITE_MIXPANEL_TOKEN=
# VITE_MIXPANEL_TOKEN=
Copy link
Contributor

Choose a reason for hiding this comment

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

I would not comment out the example here

@0x23d11 0x23d11 marked this pull request as draft March 11, 2025 17:55
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.

[bug] Style panel doesn't recognize text color
2 participants