4.1.0

- Added copy content button setting (closes #28)

Author: valentine195

@types/types.ts

@@ -12,11 +12,21 @@ export interface INestedAdmonition {
     end: number;
     src: string;
 }
+
+export interface ISettingsData {
+    userAdmonitions: {
+        [admonitionType: string]: Admonition;
+    };
+    syntaxHighlight: boolean;
+    copyButton: boolean;
+    version: string;
+}
 export declare class ObsidianAdmonitionPlugin extends Plugin_2 {
     removeAdmonition: (admonition: Admonition) => Promise<void>;
     admonitions: { [admonitionType: string]: Admonition };
-    userAdmonitions: { [admonitionType: string]: Admonition };
-    syntaxHighlight: boolean;
+/*     userAdmonitions: { [admonitionType: string]: Admonition };
+    syntaxHighlight: boolean; */
+    data: ISettingsData;
     turnOnSyntaxHighlighting: (types?: string[]) => void;
     turnOffSyntaxHighlighting: (types?: string[]) => void;
     saveSettings: () => Promise<void>;

README.md

@@ -275,15 +275,31 @@ An icon without a title will have this CSS:
 }
 ```
 
+## Settings
+
+### Syntax Highlighting
+
+Turns on an experimental mode that uses Obsidian's markdown syntax highlighter inside admonition code blocks.
+
+### Copy Button
+
+Adds a "copy content" button to every admonition block.
+
 ## Todo
 
 -   [x] Add the ability to collapse the admonition
 -   [x] Custom admonitions
 -   [x] Settings tab to customize icon and color of all admonitions
 -   [x] Ability to render markdown inside an admonition
+-   [ ] Top-level Python Markdown-style admonitions
 
 # Version History
 
+## 4.1.0
+
+-   Added "Copy Button" setting
+    -   Turning this on adds a "copy content" button to each admonition, which copies the admonition content to the clipboard
+
 ## 4.0.0
 
 -   Nested admonitions are now possible

manifest.json

@@ -1,10 +1,10 @@
 {
-	"id": "obsidian-admonition",
-	"name": "Admonition",
-	"version": "4.0.1",
-	"minAppVersion": "0.11.0",
-	"description": "Admonition block-styled content for Obsidian.md",
-	"author": "Jeremy Valentine",
-	"authorUrl": "",
-	"isDesktopOnly": false
-}
+    "id": "obsidian-admonition",
+    "name": "Admonition",
+    "version": "4.1.0",
+    "minAppVersion": "0.11.0",
+    "description": "Admonition block-styled content for Obsidian.md",
+    "author": "Jeremy Valentine",
+    "authorUrl": "",
+    "isDesktopOnly": false
+}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "obsidian-admonition",
-    "version": "4.0.1",
+    "version": "4.1.0",
     "description": "Admonition block-styled content for Obsidian.md",
     "main": "main.js",
     "scripts": {
@@ -13,6 +13,7 @@
     "devDependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
+        "@fortawesome/free-regular-svg-icons": "^5.15.3",
         "@rollup/plugin-commonjs": "^15.1.0",
         "@rollup/plugin-node-resolve": "^9.0.0",
         "@rollup/plugin-typescript": "^6.0.0",
@@ -24,5 +25,6 @@
         "rollup-plugin-css-only": "^3.1.0",
         "tslib": "^2.0.3",
         "typescript": "^4.0.3"
-    }
-}
+    },
+    "dependencies": {}
+}

src/icons.ts

@@ -1,10 +1,11 @@
 import { fas } from "@fortawesome/free-solid-svg-icons";
+import { faCopy } from "@fortawesome/free-regular-svg-icons";
 import {
     findIconDefinition,
     icon,
     library
 } from "@fortawesome/fontawesome-svg-core";
 
-library.add(fas);
+library.add(fas, faCopy);
 
 export { icon, findIconDefinition };

src/main.css

@@ -53,6 +53,18 @@
 
 .admonition-content {
     margin: 0 0.6rem;
+    position: relative;
+}
+.admonition-content-copy {
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: var(--text-faint);
+    cursor: pointer;
+    margin: -10px -2px;
+}
+.admonition-content-copy:hover {
+    color: var(--text-normal);
 }
 
 details.admonition:not([open]) {

src/main.ts

@@ -8,8 +8,8 @@ import {
 } from "obsidian";
 import {
     Admonition,
-    INestedAdmonition,
-    ObsidianAdmonitionPlugin
+    ObsidianAdmonitionPlugin,
+    ISettingsData
 } from "../@types/types";
 import {
     getAdmonitionElement,
@@ -48,12 +48,16 @@ Object.fromEntries =
         return obj;
     };
 
-/* const compareVersions = (a: string, b: string) => {
-    return a.localeCompare(b, undefined, { numeric: true }) === 1;
-}; */
-
 import "./main.css";
 import AdmonitionSetting from "./settings";
+import { findIconDefinition, icon } from "@fortawesome/fontawesome-svg-core";
+
+const DEFAULT_APP_SETTINGS: ISettingsData = {
+    userAdmonitions: {},
+    syntaxHighlight: false,
+    copyButton: false,
+    version: ""
+};
 
 const ADMONITION_MAP: {
     [admonitionType: string]: Admonition;
@@ -104,69 +108,63 @@ const ADMONITION_MAP: {
 };
 export default class ObsidianAdmonition
     extends Plugin
-    implements ObsidianAdmonitionPlugin {
+    implements ObsidianAdmonitionPlugin
+{
     admonitions: { [admonitionType: string]: Admonition } = {};
-    userAdmonitions: { [admonitionType: string]: Admonition } = {};
-    syntaxHighlight: boolean;
+    /*     userAdmonitions: { [admonitionType: string]: Admonition } = {};
+    syntaxHighlight: boolean; */
+    data: ISettingsData;
     get types() {
         return Object.keys(this.admonitions);
     }
     async saveSettings() {
-        await this.saveData({
-            syntaxHighlight: this.syntaxHighlight || false,
-            userAdmonitions: this.userAdmonitions || {},
-            version: this.manifest.version
-        });
+        await this.saveData(this.data);
     }
-    async loadSettings() {
-        let data = Object.assign({}, await this.loadData());
 
-        if (!Object.prototype.hasOwnProperty.call(data, "syntaxHighlight")) {
-            data = {
-                userAdmonitions: data,
-                syntaxHighlight: false
-            };
-        }
+    async loadSettings() {
+        let data = Object.assign(
+            {},
+            DEFAULT_APP_SETTINGS,
+            await this.loadData()
+        );
 
-        let { userAdmonitions = {}, syntaxHighlight = false } = data || {};
-        this.userAdmonitions = userAdmonitions;
-        this.syntaxHighlight = syntaxHighlight;
+        this.data = data;
 
         this.admonitions = {
             ...ADMONITION_MAP,
-            ...this.userAdmonitions
+            ...this.data.userAdmonitions
         };
         await this.saveSettings();
     }
     async addAdmonition(admonition: Admonition): Promise<void> {
-        this.userAdmonitions = {
-            ...this.userAdmonitions,
+        this.data.userAdmonitions = {
+            ...this.data.userAdmonitions,
             [admonition.type]: admonition
         };
         this.admonitions = {
             ...ADMONITION_MAP,
-            ...this.userAdmonitions
+            ...this.data.userAdmonitions
         };
         this.registerMarkdownCodeBlockProcessor(
             `ad-${admonition.type}`,
             this.postprocessor.bind(this, admonition.type)
         );
-        if (this.syntaxHighlight) {
+        if (this.data.syntaxHighlight) {
             this.turnOnSyntaxHighlighting([admonition.type]);
         }
         await this.saveSettings();
     }
 
     async removeAdmonition(admonition: Admonition) {
-        if (this.userAdmonitions[admonition.type]) {
-            delete this.userAdmonitions[admonition.type];
+        if (this.data.userAdmonitions[admonition.type]) {
+            delete this.data.userAdmonitions[admonition.type];
         }
         this.admonitions = {
             ...ADMONITION_MAP,
-            ...this.userAdmonitions
+            ...this.data.userAdmonitions
         };
 
-        if (this.syntaxHighlight) {
+        if (this.data.syntaxHighlight) {
             this.turnOffSyntaxHighlighting([admonition.type]);
         }
 
@@ -185,7 +183,7 @@ export default class ObsidianAdmonition
                 this.postprocessor.bind(this, type)
             );
         });
-        if (this.syntaxHighlight) {
+        if (this.data.syntaxHighlight) {
             this.turnOnSyntaxHighlighting();
         }
 
@@ -196,9 +194,8 @@ export default class ObsidianAdmonition
                 let view = this.app.workspace.getActiveViewOfType(MarkdownView);
                 if (!view || !(view instanceof MarkdownView)) return;
 
-                let admonitions = view.contentEl.querySelectorAll(
-                    "details[open]"
-                );
+                let admonitions =
+                    view.contentEl.querySelectorAll("details[open]");
                 for (let i = 0; i < admonitions.length; i++) {
                     let admonition = admonitions[i];
                     admonition.removeAttribute("open");
@@ -223,9 +220,9 @@ export default class ObsidianAdmonition
         });
     }
     turnOnSyntaxHighlighting(types: string[] = Object.keys(this.admonitions)) {
-        if (!this.syntaxHighlight) return;
+        if (!this.data.syntaxHighlight) return;
         types.forEach((type) => {
-            if (this.syntaxHighlight) {
+            if (this.data.syntaxHighlight) {
                 /** Process from @deathau's syntax highlight plugin */
                 CodeMirror.defineMode(`ad-${type}`, (config, options) => {
                     return CodeMirror.getMode(config, "hypermd");
@@ -334,15 +331,32 @@ export default class ObsidianAdmonition
                 markdownRenderChild
             );
 
+            if (this.data.copyButton) {
+                let copy = admonitionContent
+                    .createDiv("admonition-content-copy")
+                    .appendChild(
+                        icon(
+                            findIconDefinition({
+                                iconName: "copy",
+                                prefix: "far"
+                            })
+                        ).node[0]
+                    );
+                copy.addEventListener("click", () => {
+                    navigator.clipboard.writeText(content).then(() => {
+                        new Notice("Admonition content copied to clipboard.");
+                    });
+                });
+            }
+
             const taskLists = admonitionContent.querySelectorAll(
                 ".contains-task-list"
             );
             const splitContent = content.split("\n");
 
             for (let i = 0; i < taskLists.length; i++) {
-                let tasks: NodeListOf<HTMLLIElement> = taskLists[
-                    i
-                ].querySelectorAll(".task-list-item");
+                let tasks: NodeListOf<HTMLLIElement> =
+                    taskLists[i].querySelectorAll(".task-list-item");
                 if (!tasks.length) continue;
                 for (let j = 0; j < tasks.length; j++) {
                     let task = tasks[j];