Inline reference embeds

[Matias]

The current block references stand out as big alien chunks in any document. It’d be better if they felt as if they were part of the document, or at least to have the option to achieve that. If I have inline embeds, then a synthesis of different ideas can be put together without forcing a shape like current embeds do.

This request can be better placed in context by looking at this comment in a different thread.

[sam.baron]

+1 this request for users that create very atomic notes. This may end up as a plugin though.

[sdc]

this is possible via css right now, I think under naked embeds

[1stprinciples]

I have taken a dig at this. Check this out

[dmc]

I, also, would like to see this feature added, perhaps as a formatting toggle (current form v. minimal form).

[WayneLin]

I need this feature.
I have to link my todo item when scheduling today’s task list.
the block embedding totally destroy my list and hard to preview.

[jokysatria]

Now this feature can be achieved with Murf’s css

/* INLINE BLOCK REFS */
:root {
    --block-ref-color: yellow;
    --block-ref-link-color: transparent;
}
.markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed {
    border-top: none;
    border-bottom-color: var(--block-ref-color);
    border-bottom-style: dashed;
    padding: 0px;
    margin: 0px;
}

.markdown-preview-view span[src*="^"].internal-embed:not(.image-embed),
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div {
    display: inline;
    padding: 0px !important;
    margin: 0px !important;
}

/* Convert bullet list block refs inline (remove the bullet) */
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li,
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div {
    display: inline;
}
.markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul {
    padding: 0px !important;
    margin: 0px !important;
}

/* Hide the block ref link unless hovered */
.markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link {
    display: none;
    color: var(--block-ref-link-color);
    top: 0px;
    left: 20px;
}
/* Show the block ref link on hover */
.markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link {
    display: block;
}
.markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover {
    border-bottom-style: solid;
}

.markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section {
    min-height: 0px !important;
}
/* Remove line breaks on multi-line block refs */
.markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br {
    /*display: none;*/
}

Discord - A New Way to Chat with Friends & Communities

[akjames]

Was going to suggest exactly this. Yes, this would be great. I currently use the notes refactor plugin a lot, and the result tends to be quite ugly when I chop a larger note into smaller ones. That is especially the case when an embedded note renders at its maximum size, with the text within becoming scrollable.

To avoid this problem, I create copies of the sub-headings as separate notes instead of embedding them. I would have preferred to be able to embed them in-line as OP suggested.

[Silvestris]

Some form of this would be really great. Unfortunately, I haven’t been able to get any of the css hacks working yet.

[Klaas]

@jokysatria: I just discovered your code, and am very happy to see it works like a dream ! Many thanks.

For regular embeds, I have this:

/* lift embed on hover */
.internal-embed .markdown-embed:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transform: translate3d(0px, -3px, 0px);
}

Is there a way to integrate this into your code ?

[jokysatria]

I’m sorry, I don’t know more about CSS. I just shared someone work ._.