From cd054bd21d4e8708b786c47c45802947efd38cf9 Mon Sep 17 00:00:00 2001 From: Andrea Alberti Date: Sun, 30 Jun 2024 13:08:56 +0200 Subject: [PATCH] New instructions --- src/main.ts | 62 +++++++++++++++++++++++++---------------------- src/types.ts | 1 - styles/styles.css | 21 ++++++++++++++++ 3 files changed, 54 insertions(+), 30 deletions(-) diff --git a/src/main.ts b/src/main.ts index 0900d69..547b626 100644 --- a/src/main.ts +++ b/src/main.ts @@ -19,7 +19,6 @@ const DEFAULT_SETTINGS: PluginsAnnotationsSettings = { plugins_annotations_uuid: 'FAA70013-38E9-4FDF-B06A-F899F6487C19', hide_placeholders: false, delete_placeholder_string_on_insertion: false, - markdown_notes: false, label_mobile: 'Annotation: ', label_desktop: 'Personal annotation: ', } @@ -500,11 +499,38 @@ class PluginsAnnotationsSettingTab extends PluginSettingTab { new Setting(containerEl).setName('Personal annotations').setHeading(); const instructions = createFragment((frag) => { - const p = frag.createEl('p'); - p.appendText('To add or edit your personal annotations for the installed plugins, go to the '); - p.appendChild(createPluginsPaneFragment()); - p.appendText(' pane and click over the ediable annotation field.'); - frag.appendChild(p); + const div = document.createElement('div'); + div.classList.add('plugin-comment-instructions'); + + const p1 = document.createElement('p'); + p1.appendText('To add or edit your personal annotations for the installed plugins, go to the '); + p1.appendChild(createPluginsPaneFragment()); + p1.appendText(' pane and click over the annotation fields to edit their content'); + div.appendChild(p1); + + const p2 = document.createElement('p2'); + p2.innerHTML = "You can enter rich text notes using Markdown and HTML. Markdown annotations will be dispalyed as Obsidian normally renders Markdown text. \ + To this purpose, your annotation needs to start with a preamble line containing one \ + of three strings:\ + \ + If you do not enter any preamble line, the default text: will be assumed."; + div.appendChild(p2); + + const p3 = document.createElement('p'); + p3.innerHTML = "You can directly link your Obsidian notes from inside your annotations by adding links such as [[My notes/Review of plugin XYZ|my plugin note]]."; + div.appendChild(p3); + + const p4 = document.createElement('p'); + p4.innerHTML = "When editing HTML and Markdown annotations, use the placeholder ${label} to display the annotation label at the chosen location." + div.appendChild(p4); + + + + frag.appendChild(div); }); // Append instructions right after the Annotations heading @@ -528,7 +554,7 @@ class PluginsAnnotationsSettingTab extends PluginSettingTab { } else { new Setting(containerEl) .setName('Annotation label:') - .setDesc('Choose the annotation label for the desktop version of Obsidian. Use HTML code if you want to format it. Enter an empty string if you want to hide the label. In HTML and Markdown annotations, use the placeholder ${label} to make the label appear at the chosen location.') + .setDesc('Choose the annotation label for the desktop version of Obsidian. Use HTML code if you want to format it. Enter an empty string if you want to hide the label.') .addText(text => { text.setPlaceholder('Annotation label'); text.setValue(this.plugin.settings.label_desktop); @@ -571,28 +597,6 @@ class PluginsAnnotationsSettingTab extends PluginSettingTab { await this.plugin.debouncedSaveAnnotations(); })); - new Setting(containerEl).setName('Input mode').setHeading(); - - new Setting(containerEl) - .setName('Markdown annotations:') - .setDesc(createFragment((frag) => { - frag.appendText('If this option is enabled, Markdown notes can be used for your personal annotations.'); - const p = frag.createEl('p'); - const warning = p.createEl('span', { - text: 'Markdown annotations will be displayed just like Obsidian displays them. However, the annotation field is not a fully-fledged Markdown editor. It is recommended to write the Markdown note in Obsidian and then copy & paste it into the annotation field. This allows you full flexibility to use rich text (bold, italics, etc.) and, most importantly, to add links to your Obsidian notes.', - }); - warning.classList.add('mod-warning'); - frag.appendChild(p); - })) - .addToggle(toggle => toggle - .setValue(this.plugin.settings.markdown_notes) - .onChange(async (value: boolean) => { - this.plugin.settings.markdown_notes = value; - await this.plugin.debouncedSaveAnnotations(); - })); - - - this.createUninstalledPluginSettings(containerEl); } } diff --git a/src/types.ts b/src/types.ts index c0d0544..bafd326 100644 --- a/src/types.ts +++ b/src/types.ts @@ -9,7 +9,6 @@ export interface PluginsAnnotationsSettings { plugins_annotations_uuid: string; hide_placeholders: boolean; delete_placeholder_string_on_insertion: boolean; - markdown_notes: boolean; label_mobile: string; label_desktop: string; } \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 7a39c8c..da1935a 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -37,4 +37,25 @@ display: block; } +/* Setting pane */ +.plugin-comment-instructions { + margin: none; + padding: none; +} + +div.plugin-comment-instructions em { + font-weight: 500; +} + +div.plugin-comment-instructions strong { + font-weight: 500; +} + +.plugin-comment-instructions > p:first-child { + margin-top: 0; +} + +.plugin-comment-instructions > p:last-child { + margin-bottom: 0; +}