added Highlight possebility

README.md

@@ -66,6 +66,20 @@ All saved colors can be sorted via drop a catch.
 
 To delete a saved or last used color just click it with the right mouse button.
 
+### Additonal Formats
+
+For a even easier handling you can select additional options to what should be added to the color.
+
+#### Options
+
+- Add "color: {your color}"
+  - ex. `color: #ffffff`
+- Add "background-color: {your color}
+  - ex. `background-color: #ffffff`
+- Add tag: "style={your color}
+  - This option is only helpful, if you also select one of both of the other options like:
+  - ex. `style="background-color: #ff0000"`
+
 ![](assets/Color_Picker.png)
 
 ## Settings
@@ -88,10 +102,13 @@ To delete a saved or last used color just click it with the right mouse button.
 
 ## Changelog
 
+- Version: 0.3.2
+  - Aditional options for the color picker
+  - New Higlight Button in the Text Edit section and commandline
 - Version 0.3.1
   - Changeable order of the sections
   - Expandable sections
-  - Corrected the latex `\$\$` and `\$\$\$\$` buttons as they was switched
+  - Corrected the latex `\$\$` and `\$\$\$\$` buttons as they were switched
 - Version 0.3.0
   - added a Latex and Greek Letters section
 - Version 0.2.2

build/manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "obsidian-markdown-formatting-assistant-plugin",
   "name": "Markdown Formatting Assistant",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "minAppVersion": "0.10.9",
   "description": "This Plugin provides a simple Editor for Markdown, HTML and Colors and in addition a command line interface. The command line interface facilitate a faster workflow.",
   "author": "Reocin",

build/versions.json

@@ -6,5 +6,6 @@
   "0.2.1": "0.10.9",
   "0.2.2": "0.10.9",
   "0.3.0": "0.10.9",
-  "0.3.1": "0.10.9"
+  "0.3.1": "0.10.9",
+  "0.3.2": "0.10.9"
 }

manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "obsidian-markdown-formatting-assistant-plugin",
   "name": "Markdown Formatting Assistant",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "minAppVersion": "0.10.9",
   "description": "This Plugin provides a simple Editor for Markdown, HTML and Colors and in addition a command line interface. The command line interface facilitate a faster workflow.",
   "author": "Reocin",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "obsidian-markdown-formatting-assistant-plugin",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "This plugin improves the writing of MarkDown files",
   "homepage": "https://github.com/Reocin/obsidian-markdown-formatting-assistant-plugin",
   "main": "main.js",

src/SidePanelControlView.ts

@@ -387,18 +387,27 @@ export class SidePanelControlView extends ItemView {
     let button = row.createDiv({ cls: 'nav-action-button' });
     addClickEvent(button, 'bold');
     button.appendChild(svgToElement('bold'));
+    button.id = 'obsidianMarkdownFormattingAssistantPluginButtonBold';
 
     button = row.createDiv({ cls: 'nav-action-button' });
     addClickEvent(button, 'italic');
     button.appendChild(svgToElement('italic'));
+    button.id = 'obsidianMarkdownFormattingAssistantPluginButtonItalic';
 
     button = row.createDiv({ cls: 'nav-action-button' });
     addClickEvent(button, 'strikethrough');
     button.appendChild(svgToElement('strikethrough'));
+    button.id = 'obsidianMarkdownFormattingAssistantPluginButtonStrikethrough';
 
     button = row.createDiv({ cls: 'nav-action-button' });
     addClickEvent(button, 'underline');
     button.appendChild(svgToElement('underline'));
+    button.id = 'obsidianMarkdownFormattingAssistantPluginButtonUnderline';
+
+    button = row.createDiv({ cls: 'nav-action-button' });
+    addClickEvent(button, 'highlight');
+    button.appendChild(svgToElement('highlight'));
+    button.id = 'obsidianMarkdownFormattingAssistantPluginButtonHighlight';
 
     row = mainDiv.createDiv({ cls: 'nav-buttons-container' });
     button = row.createDiv({ cls: 'nav-action-button' });
@@ -448,9 +457,26 @@ export class SidePanelControlView extends ItemView {
       const leaf = this.app.workspace.activeLeaf;
       let editor = null;
       if (checkIfMarkdownSource(leaf)) {
+        const addColor =
+          // @ts-ignore
+          document.getElementById('inputColorTagCheckBox').checked;
+
+        const addBackgroundColor =
+          // @ts-ignore
+          document.getElementById('inputBackgroundColorTagCheckBox').checked;
+        const addStyle =
+          // @ts-ignore
+          document.getElementById('inputStyleTagCheckBox').checked;
+
+        let res = color;
+        if (addColor) res = `color: ${color}`;
+        if (addBackgroundColor) res = `background-color: ${color}`;
+        if (addColor && addBackgroundColor)
+          res = `color: ${color}; background-color: ${color}`;
+        if (addStyle) res = `style="${res}"`;
         // @ts-ignore
         editor = leaf.view.sourceMode.cmEditor;
-        colorFormatter(editor, color);
+        colorFormatter(editor, res);
         editor.focus();
       }
     };
@@ -618,6 +644,25 @@ export class SidePanelControlView extends ItemView {
       drawLastSavedColorIcons();
       await this.plugin.saveSettings();
     });
+    colorSaveButton.style.marginBottom = '20px';
+
+    const addCheckbox = (id: string, text: string) => {
+      const div = colorSection.createEl('div');
+      let input = div.createEl('input');
+      input.id = id;
+      input.type = 'checkbox';
+      input.name = id;
+      let label = div.createEl('label');
+      label.appendText(text);
+      label.style.fontSize = '12px';
+    };
+
+    addCheckbox('inputColorTagCheckBox', ' Add "color: {your color}"');
+    addCheckbox(
+      'inputBackgroundColorTagCheckBox',
+      ' Add "background-color: {your color}"',
+    );
+    addCheckbox('inputStyleTagCheckBox', ' Add tag: "style={your color}"');
 
     const lastSelectedColorsTitle = colorSection.createEl('p');
     lastSelectedColorsTitle.appendText('Last used colors:');

src/formatter.ts

@@ -99,6 +99,15 @@ export const formatSettings = {
     newLine: false,
     enclose: false,
   },
+  highlight: {
+    des: 'highlight',
+    icon: 'highlight',
+    symbol: '<mark></mark>',
+    shift: 6,
+    selectionInput: 6,
+    newLine: false,
+    enclose: false,
+  },
   codeBlock: {
     des: 'code_block',
     icon: 'codeBlock',
@@ -237,6 +246,7 @@ export function iconFormatter(
         'internal_link',
         'image',
         'underline',
+        'highlight',
       ].contains(item.des)
     ) {
       if (isSelection) {

src/icons.ts

@@ -49,6 +49,7 @@ export const icons: Record<string, string> = {
   menu: pathToSvg(mdiIcons.mdiMenu),
   expandArrowDown: pathToSvg(mdiIcons.mdiChevronDown),
   expandArrowUp: pathToSvg(mdiIcons.mdiChevronUp),
+  highlight: pathToSvg(mdiIcons.mdiMarker)
 };
 
 export const addIcons = (): void => {

src/main.ts

@@ -75,9 +75,9 @@ export default class MarkdownAutocompletePlugin extends Plugin {
     this.addCommand({
       id: 'open-sample-modal',
       name: 'Open Sample Modal',
-      // callback: () => {
-      // 	console.log('Simple Callback');
-      // },
+      callback: () => {
+        console.log('Simple Callback');
+      },
       checkCallback: (checking: boolean) => {
         let leaf = this.app.workspace.activeLeaf;
         if (leaf) {

versions.json

@@ -6,5 +6,6 @@
   "0.2.1": "0.10.9",
   "0.2.2": "0.10.9",
   "0.3.0": "0.10.9",
-  "0.3.1": "0.10.9"
+  "0.3.1": "0.10.9",
+  "0.3.2": "0.10.9"
 }