From 2313887594125009c3cf15611b55e3c48e056196 Mon Sep 17 00:00:00 2001
From: valentine195 <38669521+valentine195@users.noreply.github.com>
Date: Fri, 30 Apr 2021 11:42:00 -0400
Subject: [PATCH] 3.3.3
- Fixed issue where admonition titles were being stripped of spaces around markdown rendered elements (closes #22)
- Fixed errors and formatting issues related to rendering an admonition without a title
---
README.md | 28 +++++----
manifest.json | 2 +-
package.json | 2 +-
src/main.css | 44 +++++++------
src/main.ts | 26 ++++----
src/settings.ts | 4 +-
src/util.ts | 161 +++++++++++++++++++++++++++++++-----------------
versions.json | 2 +-
8 files changed, 160 insertions(+), 109 deletions(-)
diff --git a/README.md b/README.md
index 5af16b5..5e575b9 100644
--- a/README.md
+++ b/README.md
@@ -125,11 +125,6 @@ Every admonition receives the following CSS classes:
--admonition-details-icon: url("data:image/svg+xml;charset=utf-8,");
}
-.use-csv-marker > svg {
- color: yellow;
- margin-right: 8px;
-}
-
.admonition {
margin: 1.5625em 0;
padding: 0;
@@ -148,7 +143,8 @@ Every admonition receives the following CSS classes:
font-weight: 700;
background-color: rgba(var(--admonition-color), 0.1);
}
-.admonition-title > * {
+
+.admonition-title-content {
display: flex;
justify-content: flex-start;
margin-top: 0 !important;
@@ -164,12 +160,17 @@ Every admonition receives the following CSS classes:
min-width: 1em;
}
+.admonition-title-markdown {
+ display: block;
+}
+
.admonition-title.no-title {
display: none;
}
.admonition > .admonition-title.no-title + .admonition-content {
- margin: 1rem 0;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
}
.admonition-content {
@@ -198,6 +199,7 @@ details.admonition:not([open]) {
padding-bottom: 0;
box-shadow: none;
}
+
details.admonition > summary {
outline: none;
list-style: none;
@@ -207,6 +209,7 @@ details.admonition > summary {
border-top-right-radius: 0.1rem;
cursor: pointer;
}
+
details.admonition > summary::-webkit-details-marker {
display: none;
}
@@ -259,11 +262,12 @@ An icon without a title will have this CSS:
## 3.3.0
-- Added commands to open and collapse all admonitions in active note
-- Admonition icons now respect the font size of the admonition title
-- Collapse handle now centers inside the title element
-- CSS changes
--
+- Added commands to open and collapse all admonitions in active note
+- Admonition icons now respect the font size of the admonition title
+- Collapse handle now centers inside the title element
+- CSS changes
+-
+
## 3.2.0
- Added a setting to turn on default Obsidian syntax highlighting to admonition code block types
diff --git a/manifest.json b/manifest.json
index 178235f..1ab7f76 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
{
"id": "obsidian-admonition",
"name": "Admonition",
- "version": "3.3.2",
+ "version": "3.3.3",
"minAppVersion": "0.11.0",
"description": "Admonition block-styled content for Obsidian.md",
"author": "Jeremy Valentine",
diff --git a/package.json b/package.json
index dde7595..b9bdf4a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "obsidian-admonition",
- "version": "3.3.2",
+ "version": "3.3.3",
"description": "Admonition block-styled content for Obsidian.md",
"main": "main.js",
"scripts": {
diff --git a/src/main.css b/src/main.css
index 191f84a..9e4d369 100644
--- a/src/main.css
+++ b/src/main.css
@@ -3,16 +3,6 @@
--admonition-details-icon: url("data:image/svg+xml;charset=utf-8,");
}
-.use-csv-marker>svg {
- color: yellow;
- margin-right: 8px;
-}
-
-.setting-item>.admonition {
- width: 50%;
- margin: 0;
-}
-
.admonition {
margin: 1.5625em 0;
padding: 0;
@@ -32,7 +22,7 @@
background-color: rgba(var(--admonition-color), 0.1);
}
-.admonition-title>* {
+.admonition-title-content {
display: flex;
justify-content: flex-start;
margin-top: 0 !important;
@@ -48,12 +38,17 @@
min-width: 1em;
}
+.admonition-title-markdown {
+ display: block;
+}
+
.admonition-title.no-title {
display: none;
}
-.admonition>.admonition-title.no-title+.admonition-content {
- margin: 1rem 0;
+.admonition > .admonition-title.no-title + .admonition-content {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
}
.admonition-content {
@@ -65,7 +60,7 @@ details.admonition:not([open]) {
box-shadow: none;
}
-details.admonition>summary {
+details.admonition > summary {
outline: none;
list-style: none;
display: block;
@@ -75,11 +70,11 @@ details.admonition>summary {
cursor: pointer;
}
-details.admonition>summary::-webkit-details-marker {
+details.admonition > summary::-webkit-details-marker {
display: none;
}
-details.admonition>summary>.collapser {
+details.admonition > summary > .collapser {
position: absolute;
top: 50%;
right: 8px;
@@ -87,7 +82,7 @@ details.admonition>summary>.collapser {
content: "";
}
-details.admonition>summary>.collapser>.handle {
+details.admonition > summary > .collapser > .handle {
transform: rotate(0deg);
transition: transform 0.25s;
background-color: currentColor;
@@ -101,11 +96,20 @@ details.admonition>summary>.collapser>.handle {
height: 20px;
}
-details.admonition[open]>summary>.collapser>.handle {
+details.admonition[open] > summary > .collapser > .handle {
transform: rotate(90deg);
}
-/** Invalid Setting */
+/** Settings */
+.use-csv-marker > svg {
+ color: yellow;
+ margin-right: 8px;
+}
+
+.setting-item > .admonition {
+ width: 50%;
+ margin: 0;
+}
.unset-align-items {
align-items: unset;
@@ -134,4 +138,4 @@ input.is-invalid {
.admonition li.task-list-item.is-checked p {
text-decoration: line-through;
-}
\ No newline at end of file
+}
diff --git a/src/main.ts b/src/main.ts
index 0dd0116..676a1a1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,7 +7,7 @@ import {
Plugin
} from "obsidian";
import { Admonition, ObsidianAdmonitionPlugin } from "../@types/types";
-import { getAdmonitionElement } from './util';
+import { getAdmonitionElement } from "./util";
import * as CodeMirror from "./codemirror";
@@ -250,7 +250,7 @@ export default class ObsidianAdmonition
cm.setOption("mode", cm.getOption("mode"))
);
}
- postprocessor(
+ async postprocessor(
type: string,
src: string,
el: HTMLElement,
@@ -267,11 +267,12 @@ export default class ObsidianAdmonition
src.match(/^\b(title|collapse)\b:([\s\S]*?)$/gm) || [];
let params = Object.fromEntries(
- matchedParameters.map((p) =>
- {
- let [, param, rest] = p.match(/^\b(title|collapse)\b:([\s\S]*?)$/)
- return [ param.trim(), rest.trim()]}
- )
+ matchedParameters.map((p) => {
+ let [, param, rest] = p.match(
+ /^\b(title|collapse)\b:([\s\S]*?)$/
+ );
+ return [param.trim(), rest.trim()];
+ })
);
let {
@@ -283,12 +284,9 @@ export default class ObsidianAdmonition
* Get the content. Content should be everything that is not the title or collapse parameters.
* Remove any "content: " fields (legacy from < v0.2.0)
*/
- let content = src.replace(
- /^\b(title|collapse)\b:([\s\S]*?)$/gm,
- ""
- );
- content = content.replace(/^\bcontent\b:\s?/gm, "");
-
+ let content = src
+ .replace(/^\b(title|collapse)\b:([\s\S]*?)$/gm, "")
+ .replace(/^\bcontent\b:\s?/gm, "");
/**
* If the admonition should collapse, but something other than open or closed was provided, set to closed.
*/
@@ -319,7 +317,7 @@ export default class ObsidianAdmonition
* Collapsible -> Title
Content
* Regular ->
*/
- let admonitionElement = getAdmonitionElement(
+ let admonitionElement = await getAdmonitionElement(
type,
title,
this.admonitions[type].icon,
diff --git a/src/settings.ts b/src/settings.ts
index 1575cf7..c8ef3d0 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -90,7 +90,7 @@ export default class AdmonitionSetting extends PluginSettingTab {
let setting = new Setting(containerEl);
- let admonitionElement = getAdmonitionElement(
+ let admonitionElement = await getAdmonitionElement(
admonition.type,
admonition.type[0].toUpperCase() + admonition.type.slice(1).toLowerCase(),
admonition.icon,
@@ -153,7 +153,7 @@ class SettingsModal extends Modal {
const settingDiv = contentEl.createDiv();
- let admonitionPreview = getAdmonitionElement(
+ let admonitionPreview = await getAdmonitionElement(
this.type,
this.type.length
? this.type[0].toUpperCase() + this.type.slice(1).toLowerCase()
diff --git a/src/util.ts b/src/util.ts
index 6b00587..9f830bc 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,63 +1,108 @@
import {
- findIconDefinition,
- icon,
- IconName,
+ findIconDefinition,
+ icon,
+ IconName
} from "@fortawesome/fontawesome-svg-core";
import { MarkdownRenderer } from "obsidian";
-export function getAdmonitionElement(
- type: string,
- title: string,
- iconName: string,
- color: string,
- collapse?: string
-): HTMLElement {
- let admonition,
- titleEl,
- attrs: { style: string; open?: string } = {
- style: `--admonition-color: ${color};`,
- };
- if (collapse) {
- if (collapse === "open") {
- attrs.open = "open";
- }
- admonition = createEl("details", {
- cls: `admonition admonition-${type}`,
- attr: attrs,
- });
- titleEl = admonition.createEl("summary", {
- cls: `admonition-title ${!title.trim().length ? "no-title" : ""}`,
- });
- } else {
- admonition = createDiv({
- cls: `admonition admonition-${type}`,
- attr: attrs,
- });
- titleEl = admonition.createDiv({
- cls: `admonition-title ${!title.trim().length ? "no-title" : ""}`,
- });
- }
-
- let titleContentEl = createDiv("title-content");
- MarkdownRenderer.renderMarkdown(title, titleContentEl, "", null);
-
- const iconEl = createDiv("admonition-title-icon");
- if (iconName) {
- iconEl.appendChild(
- icon(
- findIconDefinition({
- iconName: iconName as IconName,
- prefix: "fas",
- })
- ).node[0]
- );
- }
- titleContentEl.children[0].addClass("admonition-title-content");
- titleContentEl.children[0].prepend(iconEl);
- titleEl.appendChild(titleContentEl.children[0]);
-
- if (collapse) {
- titleEl.createDiv("collapser").createDiv("handle");
- }
- return admonition;
+export async function getAdmonitionElement(
+ type: string,
+ title: string,
+ iconName: string,
+ color: string,
+ collapse?: string
+): Promise {
+ return new Promise(async (resolve) => {
+ let admonition,
+ titleEl,
+ attrs: { style: string; open?: string } = {
+ style: `--admonition-color: ${color};`
+ };
+ if (collapse) {
+ if (collapse === "open") {
+ attrs.open = "open";
+ }
+ admonition = createEl("details", {
+ cls: `admonition admonition-${type}`,
+ attr: attrs
+ });
+ titleEl = admonition.createEl("summary", {
+ cls: `admonition-title ${
+ !title.trim().length ? "no-title" : ""
+ }`
+ });
+ } else {
+ admonition = createDiv({
+ cls: `admonition admonition-${type}`,
+ attr: attrs
+ });
+ titleEl = admonition.createDiv({
+ cls: `admonition-title ${
+ !title.trim().length ? "no-title" : ""
+ }`
+ });
+ }
+
+ if (title && title.length) {
+ /**
+ * Title structure
+ * .admonition-title
+ * .admonition-title-content - Rendered Markdown top-level element (e.g. H1/2/3 etc, p)
+ * div.admonition-title-icon
+ * svg
+ * div.admonition-title-markdown - Container of rendered markdown
+ * ...rendered markdown children...
+ */
+
+ //get markdown
+ const markdownHolder = createDiv();
+ await MarkdownRenderer.renderMarkdown(
+ title,
+ markdownHolder,
+ "",
+ null
+ );
+
+ //admonition-title-content is first child of rendered markdown
+ const admonitionTitleContent = markdownHolder.children[0];
+
+ //get children of markdown element, then remove them
+ const markdownElements = Array.from(
+ admonitionTitleContent?.childNodes || []
+ );
+ admonitionTitleContent.innerHTML = "";
+ admonitionTitleContent.addClass("admonition-title-content");
+
+ //build icon element
+ const iconEl = admonitionTitleContent.createDiv(
+ "admonition-title-icon"
+ );
+ if (iconName) {
+ iconEl.appendChild(
+ icon(
+ findIconDefinition({
+ iconName: iconName as IconName,
+ prefix: "fas"
+ })
+ ).node[0]
+ );
+ }
+
+ //add markdown children back
+ const admonitionTitleMarkdown = admonitionTitleContent.createDiv(
+ "admonition-title-markdown"
+ );
+ for (let i = 0; i < markdownElements.length; i++) {
+ admonitionTitleMarkdown.appendChild(markdownElements[i]);
+ }
+ titleEl.appendChild(admonitionTitleContent || createDiv());
+ }
+
+ //add them to title element
+
+ if (collapse) {
+ titleEl.createDiv("collapser").createDiv("handle");
+ }
+ resolve(admonition);
+ });
}
diff --git a/versions.json b/versions.json
index c17031e..6b8c573 100644
--- a/versions.json
+++ b/versions.json
@@ -4,5 +4,5 @@
"2.0.1": "0.11.0",
"3.1.2": "0.11.0",
"3.2.2": "0.11.0",
- "3.3.2": "0.11.0"
+ "3.3.3": "0.11.0"
}
\ No newline at end of file