Emojis in tags are rendered outside of the pill in editing mode

[albertoloscerritos]

Hi, great plugin. Thanks for the work.
I think there is a bug when having this plugin enabled. If I create a tag with an emoji it will be outside of the pill when in editing mode. Once I turn into reading mode it is rendered correctly. The problem goes aways if I disable the plugin.

I am using windows 11, a obsidian sandbox v1.6.2 and obsidian-iconize v 2.12.0

Thanks :)

[albertoloscerritos]

Update: Hi, I think there is another bug directly related to the one previously mentioned. I have used the following 2 snippets (both independent from each other, but they accomplish the same function. They are just different implementations) to add a header level indicator before each header. Here is how it looks like.

An here are the snippets:

.HyperMD-header:not(.cm-active) .cm-header.cm-header-1::before,
.HyperMD-header:not(.cm-active) .cm-header.cm-header-2::before,
.HyperMD-header:not(.cm-active) .cm-header.cm-header-3::before,
.HyperMD-header:not(.cm-active) .cm-header.cm-header-4::before,
.HyperMD-header:not(.cm-active) .cm-header.cm-header-5::before,
.HyperMD-header:not(.cm-active) .cm-header.cm-header-6::before,
.markdown-reading-view h1::before,
.markdown-reading-view h2::before,
.markdown-reading-view h3::before,
.markdown-reading-view h4::before,
.markdown-reading-view h5::before,
.markdown-reading-view h6::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-ui-smaller);
    vertical-align: text-bottom;
    margin-right: 0.5rem;
    color: var(--text-accent);
}

.HyperMD-header:not(.cm-active) .cm-header.cm-header-1::before,
.markdown-reading-view h1::before {
    content: 'h1';
}

.HyperMD-header:not(.cm-active) .cm-header.cm-header-2::before,
.markdown-reading-view h2::before {
    content: 'h2';
}

.HyperMD-header:not(.cm-active) .cm-header.cm-header-3::before,
.markdown-reading-view h3::before {
    content: 'h3';
}

.HyperMD-header:not(.cm-active) .cm-header.cm-header-4::before,
.markdown-reading-view h4::before {
    content: 'h4';
}

.HyperMD-header:not(.cm-active) .cm-header.cm-header-5::before,
.markdown-reading-view h5::before {
    content: 'h5';
}

.HyperMD-header:not(.cm-active) .cm-header.cm-header-6::before,
.markdown-reading-view h6::before {
    content: 'h6';
}

/* --- Editor Section --- */
.cm-header-1:not(.cm-formatting):not(.cm-inline-code)::before
{
  content: 'H1 '; 
  font-size: 12px;
  color: var(--text-faint)
}

.cm-header-2:not(.cm-formatting):not(.cm-inline-code)::before
{
  content: 'H2 '; 
  font-size: 12px;
  color: var(--text-faint)
}

.cm-header-3:not(.cm-formatting):not(.cm-inline-code)::before
{
  content: 'H3 '; 
  font-size: 12px;
  color: var(--text-faint)
}

.cm-header-4:not(.cm-formatting):not(.cm-inline-code)::before
{
  content: 'H4 '; 
  font-size: 12px;
  color: var(--text-faint)
}

.cm-header-5:not(.cm-formatting):not(.cm-inline-code)::before
{
  content: 'H5 '; 
  font-size: 12px;
  color: var(--text-faint)
}

.cm-header-6:not(.cm-formatting):not(.cm-inline-code)::before
{
  content: 'H6 '; 
  font-size: 12px;
  color: var(--text-faint)
}


/* to remove some clutters */

.cm-inline-code ~ .cm-header-2::before, 
.cm-inline-code ~ .cm-header-3::before,
.cm-inline-code ~ .cm-header-4::before,
.cm-inline-code ~ .cm-header-5::before, 
.cm-inline-code ~ .cm-header-6::before
{
  content: '' !important; 
  font-size: 12px;
  color: var(--text-faint)
}


/* --- Preview Section / Reading mode--- */
h1::before
{
  content: 'H1 '; 
  font-size: 12px;
  color: var(--text-faint)
}

h2::before
{
  content: 'H2 '; 
  font-size: 12px;
  color: var(--text-faint)
}

h3::before
{
  content: 'H3 '; 
  font-size: 12px;
  color: var(--text-faint)
}

h4::before
{
  content: 'H4 '; 
  font-size: 12px;
  color: var(--text-faint)
}

h5::before
{
  content: 'H5 '; 
  font-size: 12px;
  color: var(--text-faint)
}

h6::before
{
  content: 'H6 '; 
  font-size: 12px;
  color: var(--text-faint)
}

When iconize is enabled and an emoji is placed at the beginning of the header, the emoji appears before the header lever indicator, like this:

Just like with the bug reported in the original post, it only happens when iconize is enabled and only in editing mode. In reading mode everything is render correctly.
I am using a fresh new obsidian 1.6.1 vault with only the snippets mentioned and iconize installed.

[FlorianWoelki]

Thank you for reporting! Could you create a separate issue for the header issue?

[albertoloscerritos]

Thank you for reporting! Could you create a separate issue for the header issue?

Hi, yes of course :)