Lock Callouts edit mode

Hi everyone,

I’m working with a multi-column layout in Obsidian that uses callouts (not the Tasks plugin, since it doesn’t support multi-column setups). In one column, I display tasks, and everything works fine except for one issue with the callouts themselves.

Whenever I accidentally click anywhere inside the callout (especially near a checkbox), it enters edit mode, even though I don’t want to edit it. While this behavior is expected, it gets annoying over time, especially when I just misclick.

I managed to lock all interactions within the callout using CSS (pointer-events: none), which prevents unwanted edits. However, this also blocks specific interactions, such as the calendar date picker icon used in tasks. While other links and checkboxes remain clickable, the calendar icon gets locked as well.
Here is what I’ve tried so far

/* Désactiver les clics partout dans le callout */
.is-live-preview .cm-embed-block.cm-callout {
    pointer-events: none !important; /* Désactive les clics globalement */
}

/* Réactiver les clics sur les liens */
.is-live-preview .cm-embed-block.cm-callout a {
    pointer-events: auto !important;
    cursor: pointer;
}

/* Réactiver les clics sur les checkboxes */
.is-live-preview .cm-embed-block.cm-callout input[type="checkbox"] {
    pointer-events: auto !important;
    cursor: pointer;
}

/* Réactiver les clics sur l'icône de crayon ou boutons spécifiques */
.is-live-preview .cm-embed-block.cm-callout .cg-note-toolbar-callout {
    pointer-events: auto !important;
    cursor: pointer;
}

/* Réactiver les clics sur le calendrier Flatpickr */
.is-live-preview .cm-embed-block.cm-callout .flatpickr-calendar,
.is-live-preview .cm-embed-block.cm-callout .flatpickr-calendar * {
    pointer-events: auto !important; /* Déverrouille le calendrier */
    cursor: pointer;
}

/* Boutons de navigation du calendrier (précédent et suivant) */
.is-live-preview .cm-embed-block.cm-callout .flatpickr-prev-month,
.is-live-preview .cm-embed-block.cm-callout .flatpickr-next-month {
    pointer-events: auto !important;
    cursor: pointer;
}

/* Sélection du mois et de l'année dans le calendrier */
.is-live-preview .cm-embed-block.cm-callout .flatpickr-monthDropdown-months,
.is-live-preview .cm-embed-block.cm-callout .numInput.cur-year {
    pointer-events: auto !important;
    cursor: pointer;
}

/* Jours cliquables dans le calendrier */
.is-live-preview .cm-embed-block.cm-callout .flatpickr-day {
    pointer-events: auto !important;
    cursor: pointer;
}

/* Boutons spécifiques comme "Today" et "Clear" */
.is-live-preview .cm-embed-block.cm-callout .flatpickr-button {
    pointer-events: auto !important;
    cursor: pointer;
}

Does anyone know a way to completely lock a callout to prevent it from entering edit mode (like only editable with edit mode or by clicking on the up right <> icon only) while keeping all interactive elements (e.g., links, checkboxes, calendar icons) functional?

Thanks in advance for your help! :blush:

1 Like

I wish… same with links and html. They desperately need the same edit button that code blocks have or at least a key combination that prevents them from expanding the hidden markdown. I’m so tired of trying to click an internal link or on something in a call out and instead of following the link or interacting with the thing in the callout it just expands the markdown.

edit callouts even already have the little edit block button so it makes absolutely no sense that just clicking on them also forces them to expand the markdown. That qualifies as a bug to me