markdown-text-editor 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-text-editor",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "A simple JavaScript Markdown editor plugin with real-time preview, and easy integration.",
   "main": "./dist/markdown-text-editor.js",
   "browser": "dist/markdown-text-editor.js",
@@ -48,16 +48,17 @@
     "url": "https://github.com/nezanuha/markdown-text-editor/issues"
   },
   "dependencies": {
+    "@tailwindcss/typography": "~0.5.15",
     "marked": "~15.0.4",
     "tailwindcss": "~3.4.13"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
-    "@tailwindcss/typography": "^0.5.15",
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "css-loader": "^7.1.2",
+    "cssnano": "^7.0.6",
     "html-webpack-plugin": "^5.6.3",
     "mini-css-extract-plugin": "^2.9.1",
     "postcss": "^8.4.47",

package/src/plugins/markdown/Toolbar/MakeTool.js

@@ -1,7 +1,6 @@
 class MakeTool {
-    constructor(editor, syntax, title) {
+    constructor(editor, title) {
         this.editor = editor;
-        this.syntax = syntax; // Markdown syntax (e.g., ** for bold, * for italic)
         this.defaultText = `${title} text`; // Default text if nothing is selected
         this.button = this.createButton();
         this.title = title
@@ -15,52 +14,9 @@ class MakeTool {
         button.type = 'button';
         button.title = this.title;
         button.className = `markdown-btn ${buttonClass}${buttonClass == 'preview-btn' ? ' sticky right-0 bg-stone-100 dark:bg-stone-900 ' : ' ' }p-2 hover:bg-stone-200 dark:hover:bg-stone-600 rounded duration-300 text-stone-900 dark:text-stone-100`;
-        button.addEventListener('click', () => this.applySyntax('both'));  // Default to 'both', can change in child
+        button.addEventListener('click', () => this.applySyntax());  // Default to 'both', can change in child
         return button;
     }
-
-    // Toggle markdown syntax at the current cursor position
-    applySyntax(position = 'both') {
-        const textarea = this.editor.usertextarea;
-        const { selectionStart, selectionEnd } = textarea;
-        const selectedText = textarea.value.substring(selectionStart, selectionEnd);
-
-        const syntaxLength = this.syntax.length;
-
-        // Check which type of syntax to apply based on the position
-        let newText = '';
-        if(position === 'start'){
-            if (selectedText.startsWith(this.syntax)) {
-                // If text is already wrapped with the markdown syntax, remove it
-                const unformattedText = selectedText.slice(syntaxLength);
-                this.editor.insertText(unformattedText);
-            }else{
-                newText = `${this.syntax} ${selectedText || this.defaultText}`;
-                // Insert the new formatted text
-                this.editor.insertText(newText);
-            }
-        } else if (position === 'end') {
-            if (selectedText.startsWith(this.syntax)) {
-                // If text is already wrapped with the markdown syntax, remove it
-                const unformattedText = selectedText.slice(syntaxLength);
-                this.editor.insertText(unformattedText);
-            }else{
-                newText = `${selectedText || this.defaultText}${this.syntax}`;
-                // Insert the new formatted text
-                this.editor.insertText(newText);
-            }
-        } else {
-            if (selectedText.startsWith(this.syntax) && selectedText.endsWith(this.syntax)) {
-                // If text is already wrapped with the markdown syntax, remove it
-                const unformattedText = selectedText.slice(syntaxLength, -syntaxLength);
-                this.editor.insertText(unformattedText);
-            }else{
-                newText = `${this.syntax}${selectedText || this.defaultText}${this.syntax}`;
-                // Insert the new formatted text
-                this.editor.insertText(newText);
-            }
-        }
-    }
 }
 
 export default MakeTool;

package/src/plugins/markdown/Toolbar/index.js

@@ -6,6 +6,9 @@ import ULTool from './tools/ULTool.js';
 import OLTool from './tools/OLTool.js';
 import PreviewTool from './tools/PreviewTool.js'
 import CheckListTool from './tools/CheckListTool.js';
+import BlockQuoteTool from './tools/BlockQuoteTool.js';
+import LinkTool from './tools/LinkTool.js'
+import HeadingTool from './tools/HeadingTool.js';
 
 class Toolbar {
     constructor(editor, options) {
@@ -18,12 +21,15 @@ class Toolbar {
 
     init() {
         const toolMapping = {
+            heading: HeadingTool,
             ul: ULTool,
             ol: OLTool,
             checklist: CheckListTool,
             bold: BoldTool,
             italic: ItalicTool,
-            strikethrough: StrikethroughTool
+            strikethrough: StrikethroughTool,
+            blockquote: BlockQuoteTool,
+            link: LinkTool
         };
 
         // Append all tools except preview

package/src/plugins/markdown/Toolbar/tools/BlockQuoteTool.js

@@ -0,0 +1,31 @@
+import MakeTool from '../MakeTool.js';
+
+class BlockQuoteTool extends MakeTool {
+    constructor(editor) {
+        // Call the parent constructor with the markdown syntax for italic (*)
+        super(editor, 'Blockquote');
+        this.button = this.createButton(`
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M4.58341 17.3211C3.55316 16.2274 3 15 3 13.0103C3 9.51086 5.45651 6.37366 9.03059 4.82318L9.92328 6.20079C6.58804 8.00539 5.93618 10.346 5.67564 11.822C6.21263 11.5443 6.91558 11.4466 7.60471 11.5105C9.40908 11.6778 10.8312 13.159 10.8312 15C10.8312 16.933 9.26416 18.5 7.33116 18.5C6.2581 18.5 5.23196 18.0095 4.58341 17.3211ZM14.5834 17.3211C13.5532 16.2274 13 15 13 13.0103C13 9.51086 15.4565 6.37366 19.0306 4.82318L19.9233 6.20079C16.588 8.00539 15.9362 10.346 15.6756 11.822C16.2126 11.5443 16.9156 11.4466 17.6047 11.5105C19.4091 11.6778 20.8312 13.159 20.8312 15C20.8312 16.933 19.2642 18.5 17.3312 18.5C16.2581 18.5 15.232 18.0095 14.5834 17.3211Z"></path></svg>
+        `);
+    }
+
+    applySyntax() {
+        const textarea = this.editor.usertextarea;
+        const { selectionStart, selectionEnd } = textarea;
+        const selectedText = textarea.value.substring(selectionStart, selectionEnd);
+
+        const syntax = '>';
+        let newText = '';
+        if (selectedText.startsWith(syntax)) {
+            // Remove the blockquote syntax if it's already wrapped
+            newText = selectedText.slice(syntax.length);
+        } else {
+            // Apply blockquote syntax
+            newText = `${syntax}${selectedText || 'Blockquote text'}`;
+        }
+
+        this.editor.insertText(newText);
+    }
+}
+
+export default BlockQuoteTool;

package/src/plugins/markdown/Toolbar/tools/BoldTool.js

@@ -2,14 +2,32 @@ import MakeTool from '../MakeTool.js';
 
 class BoldTool extends MakeTool {
     constructor(editor) {
-        // Call the parent constructor with the markdown syntax for bold (**)
-        super(editor, '**', 'Bold');
+        super(editor, 'Bold');
         this.button = this.createButton(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"/>
-            </svg>
-        `);
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
+                <path d="M8 11H12.5C13.8807 11 15 9.88071 15 8.5C15 7.11929 13.8807 6 12.5 6H8V11ZM18 15.5C18 17.9853 15.9853 20 13.5 20H6V4H12.5C14.9853 4 17 6.01472 17 8.5C17 9.70431 16.5269 10.7981 15.7564 11.6058C17.0979 12.3847 18 13.837 18 15.5ZM8 13V18H13.5C14.8807 18 16 16.8807 16 15.5C16 14.1193 14.8807 13 13.5 13H8Z"></path>
+            </svg>    
+        `)
+    }
+
+    // Apply bold syntax (**bold**)
+    applySyntax() {
+        const textarea = this.editor.usertextarea;
+        const { selectionStart, selectionEnd } = textarea;
+        const selectedText = textarea.value.substring(selectionStart, selectionEnd);
+
+        const syntax = '**';
+        let newText = '';
+        if (selectedText.startsWith(syntax) && selectedText.endsWith(syntax)) {
+            // Remove the bold syntax if it's already wrapped
+            newText = selectedText.slice(syntax.length, -syntax.length);
+        } else {
+            // Apply bold syntax
+            newText = `${syntax}${selectedText || 'Bold text'}${syntax}`;
+        }
+
+        this.editor.insertText(newText);
     }
 }
 
-export default BoldTool;
+export default BoldTool;

package/src/plugins/markdown/Toolbar/tools/CheckListTool.js

@@ -2,15 +2,28 @@ import MakeTool from '../MakeTool.js';
 
 class CheckListTool extends MakeTool {
     constructor(editor) {
-        super(editor, '- [x]', 'Check list');
+        super(editor, 'Check list');
         this.button = this.createButton(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 17 2 2 4-4"/><path d="m3 7 2 2 4-4"/><path d="M13 6h8"/><path d="M13 12h8"/><path d="M13 18h8"/></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M8.00008 6V9H5.00008V6H8.00008ZM3.00008 4V11H10.0001V4H3.00008ZM13.0001 4H21.0001V6H13.0001V4ZM13.0001 11H21.0001V13H13.0001V11ZM13.0001 18H21.0001V20H13.0001V18ZM10.7072 16.2071L9.29297 14.7929L6.00008 18.0858L4.20718 16.2929L2.79297 17.7071L6.00008 20.9142L10.7072 16.2071Z"></path></svg>
         `);
     }
     
-    // You can change how the syntax is applied for this specific tool:
     applySyntax() {
-        super.applySyntax('start');  // Only apply strikethrough at the start
+        const textarea = this.editor.usertextarea;
+        const { selectionStart, selectionEnd } = textarea;
+        const selectedText = textarea.value.substring(selectionStart, selectionEnd);
+
+        const syntax = '- [x] ';
+        let newText = '';
+        if (selectedText.startsWith(syntax)) {
+            // Remove the checklist syntax if it's already wrapped
+            newText = selectedText.slice(syntax.length);
+        } else {
+            // Apply check list syntax
+            newText = `${syntax}${selectedText || 'Check list'}`;
+        }
+
+        this.editor.insertText(newText);
     }
 }
 

package/src/plugins/markdown/Toolbar/tools/HeadingTool.js

@@ -0,0 +1,55 @@
+import MakeTool from '../MakeTool.js';
+
+class HeadingTool extends MakeTool {
+    constructor(editor) {
+        super(editor, 'Heading');
+        this.currentHeading = 1;  // Start with Heading 1
+        this.button = this.createButton(`
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M17 11V4H19V21H17V13H7V21H5V4H7V11H17Z"></path></svg>
+        `);
+    }
+
+    // Apply heading syntax (e.g., # sample text for h1, ## sample text for h2, etc.)
+    applySyntax() {
+        const textarea = this.editor.usertextarea;
+        const { selectionStart, selectionEnd } = textarea;
+        const selectedText = textarea.value.substring(selectionStart, selectionEnd);
+
+        // Strip any existing heading symbols (i.e., # or ##) from the selected text
+        const headingRegex = /^#+\s*/; // Regex to match any # followed by space
+        let cleanText = selectedText.replace(headingRegex, '');  // Remove existing heading
+
+        let newText = '';
+
+        // If there is a heading, continue from the current level
+        if (selectedText) {
+            const currentLevel = selectedText.match(/^#+/);  // Match the number of # symbols at the start
+            if (currentLevel) {
+                let headingCount = currentLevel[0].length;
+                if (headingCount === 6) {
+                    newText = cleanText;  // Just plain text
+                } else {
+                    newText = `${'#'.repeat(headingCount + 1)} ${cleanText}`;
+                }
+            } else {
+                // If no # symbol, start from # (Heading 1)
+                newText = `# ${cleanText}`;
+            }
+        } else {
+            // If no text is selected, use default "Heading"
+            newText = `${'#'.repeat(this.currentHeading)} Heading`;
+        }
+
+        // Insert the new heading text and replace any selected text
+        this.editor.insertText(newText, true);
+
+        // Cycle heading levels after applying the heading
+        if (this.currentHeading === 6) {
+            this.currentHeading = 1;  // Reset to # for Heading 1 after reaching Heading 6
+        } else {
+            this.currentHeading++;  // Increment the heading level
+        }
+    }
+}
+
+export default HeadingTool;

package/src/plugins/markdown/Toolbar/tools/ItalicTool.js

@@ -3,15 +3,29 @@ import MakeTool from '../MakeTool.js';
 class ItalicTool extends MakeTool {
     constructor(editor) {
         // Call the parent constructor with the markdown syntax for italic (*)
-        super(editor, '*', 'Italic');
+        super(editor, 'Italic');
         this.button = this.createButton(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <line x1="19" y1="4" x2="10" y2="4"/>
-                <line x1="14" y1="20" x2="5" y2="20"/>
-                <line x1="15" y1="4" x2="9" y2="20"/>
-            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M15 20H7V18H9.92661L12.0425 6H9V4H17V6H14.0734L11.9575 18H15V20Z"></path></svg>
         `);
     }
+
+    applySyntax() {
+        const textarea = this.editor.usertextarea;
+        const { selectionStart, selectionEnd } = textarea;
+        const selectedText = textarea.value.substring(selectionStart, selectionEnd);
+
+        const syntax = '*';
+        let newText = '';
+        if (selectedText.startsWith(syntax) && selectedText.endsWith(syntax)) {
+            // Remove the italic syntax if it's already wrapped
+            newText = selectedText.slice(syntax.length, -syntax.length);
+        } else {
+            // Apply italic syntax
+            newText = `${syntax}${selectedText || 'Italic text'}${syntax}`;
+        }
+
+        this.editor.insertText(newText);
+    }
 }
 
 export default ItalicTool;

package/src/plugins/markdown/Toolbar/tools/LinkTool.js

@@ -0,0 +1,47 @@
+import MakeTool from '../MakeTool.js';
+
+class LinkTool extends MakeTool {
+    constructor(editor) {
+        super(editor, 'Link');
+        this.button = this.createButton(`
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
+                <path d="M18.3638 15.5355L16.9496 14.1213L18.3638 12.7071C20.3164 10.7545 20.3164 7.58866 18.3638 5.63604C16.4112 3.68341 13.2453 3.68341 11.2927 5.63604L9.87849 7.05025L8.46428 5.63604L9.87849 4.22182C12.6122 1.48815 17.0443 1.48815 19.778 4.22182C22.5117 6.95549 22.5117 11.3876 19.778 14.1213L18.3638 15.5355ZM15.5353 18.364L14.1211 19.7782C11.3875 22.5118 6.95531 22.5118 4.22164 19.7782C1.48797 17.0445 1.48797 12.6123 4.22164 9.87868L5.63585 8.46446L7.05007 9.87868L5.63585 11.2929C3.68323 13.2455 3.68323 16.4113 5.63585 18.364C7.58847 20.3166 10.7543 20.3166 12.7069 18.364L14.1211 16.9497L15.5353 18.364ZM14.8282 7.75736L16.2425 9.17157L9.17139 16.2426L7.75717 14.8284L14.8282 7.75736Z"></path>
+            </svg>
+        `);
+    }
+
+    // Apply link syntax [text](url)
+    applySyntax() {
+        const textarea = this.editor.usertextarea;
+        const { selectionStart, selectionEnd } = textarea;
+        const selectedText = textarea.value.substring(selectionStart, selectionEnd);
+    
+        // Check if the selected text contains a link syntax [text](url)
+        const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/;
+    
+        if (selectedText && linkRegex.test(selectedText)) {
+            // If the selected text is already a link, extract the text inside the brackets
+            const match = selectedText.match(linkRegex);
+            const linkText = match[1];  // Text inside the square brackets
+    
+            // Replace the selected text with just the text
+            textarea.setRangeText(linkText, selectionStart, selectionEnd, 'select');
+        } else {
+            // If no link syntax, prompt for the URL and apply the syntax
+            const url = prompt("Enter the URL:", "https://");
+            if (url) {
+                let newText = '';
+                if (selectedText) {
+                    newText = `[${selectedText}](${url})`; // Insert the link with selected text
+                } else {
+                    newText = `[Link text](${url})`; // Insert a placeholder text if nothing is selected
+                }
+    
+                this.editor.insertText(newText); // Insert the constructed link markdown
+            }
+        }
+    }
+    
+}
+
+export default LinkTool;

package/src/plugins/markdown/Toolbar/tools/OLTool.js

@@ -2,17 +2,28 @@ import MakeTool from '../MakeTool.js';
 
 class OLTool extends MakeTool {
     constructor(editor) {
-        super(editor, '1.', 'Ordered list');
+        super(editor, 'Ordered list');
         this.button = this.createButton(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M10 12h11"/><path d="M10 18h11"/><path d="M10 6h11"/><path d="M4 10h2"/><path d="M4 6h1v4"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/>
-            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M8 4H21V6H8V4ZM5 3V6H6V7H3V6H4V4H3V3H5ZM3 14V11.5H5V11H3V10H6V12.5H4V13H6V14H3ZM5 19.5H3V18.5H5V18H3V17H6V21H3V20H5V19.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z"></path></svg>
         `);
     }
     
-    // You can change how the syntax is applied for this specific tool:
     applySyntax() {
-        super.applySyntax('start');  // Only apply strikethrough at the start
+        const textarea = this.editor.usertextarea;
+        const { selectionStart, selectionEnd } = textarea;
+        const selectedText = textarea.value.substring(selectionStart, selectionEnd);
+
+        const syntax = '1. ';
+        let newText = '';
+        if (selectedText.startsWith(syntax)) {
+            // Remove the ordered syntax if it's already wrapped
+            newText = selectedText.slice(syntax.length);
+        } else {
+            // Apply ordered list syntax
+            newText = `${syntax}${selectedText || 'Ordered list'}`;
+        }
+
+        this.editor.insertText(newText);
     }
 }
 

package/src/plugins/markdown/Toolbar/tools/PreviewTool.js

@@ -4,11 +4,9 @@ import MakeTool from '../MakeTool.js';
 class PreviewTool extends MakeTool {
     constructor(editor) {
         // No markdown syntax for preview toggle, so we call the parent constructor with empty values
-        super(editor, '', 'Preview');
+        super(editor, 'Preview');
         this.button = this.createButton(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <rect width="18" height="18" x="3" y="3" rx="2"/><path d="M12 3v18"/>
-            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M11 5H5V19H11V5ZM13 5V19H19V5H13ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3Z"></path></svg>
         `);
     }
 

package/src/plugins/markdown/Toolbar/tools/StrikethroughTool.js

@@ -3,14 +3,29 @@ import MakeTool from '../MakeTool.js';
 class StrikethroughTool extends MakeTool {
     constructor(editor) {
         // Call the parent constructor with the markdown syntax for strikethrough (~~)
-        super(editor, '~~', 'Strikethrough');
+        super(editor, 'Strikethrough');
         this.button = this.createButton(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <path d="M16 4H9a3 3 0 0 0-2.83 4"/>
-                <path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" x2="20" y1="12" y2="12"/>
-            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M17.1538 14C17.3846 14.5161 17.5 15.0893 17.5 15.7196C17.5 17.0625 16.9762 18.1116 15.9286 18.867C14.8809 19.6223 13.4335 20 11.5862 20C9.94674 20 8.32335 19.6185 6.71592 18.8555V16.6009C8.23538 17.4783 9.7908 17.917 11.3822 17.917C13.9333 17.917 15.2128 17.1846 15.2208 15.7196C15.2208 15.0939 15.0049 14.5598 14.5731 14.1173C14.5339 14.0772 14.4939 14.0381 14.4531 14H3V12H21V14H17.1538ZM13.076 11H7.62908C7.4566 10.8433 7.29616 10.6692 7.14776 10.4778C6.71592 9.92084 6.5 9.24559 6.5 8.45207C6.5 7.21602 6.96583 6.165 7.89749 5.299C8.82916 4.43299 10.2706 4 12.2219 4C13.6934 4 15.1009 4.32808 16.4444 4.98426V7.13591C15.2448 6.44921 13.9293 6.10587 12.4978 6.10587C10.0187 6.10587 8.77917 6.88793 8.77917 8.45207C8.77917 8.87172 8.99709 9.23796 9.43293 9.55079C9.86878 9.86362 10.4066 10.1135 11.0463 10.3004C11.6665 10.4816 12.3431 10.7148 13.076 11H13.076Z"></path></svg>
         `);
     }
+
+    applySyntax() {
+        const textarea = this.editor.usertextarea;
+        const { selectionStart, selectionEnd } = textarea;
+        const selectedText = textarea.value.substring(selectionStart, selectionEnd);
+
+        const syntax = '~';
+        let newText = '';
+        if (selectedText.startsWith(syntax) && selectedText.endsWith(syntax)) {
+            // Remove the strikethrough syntax if it's already wrapped
+            newText = selectedText.slice(syntax.length, -syntax.length);
+        } else {
+            // Apply strikethrough syntax
+            newText = `${syntax}${selectedText || 'Strikethrough text'}${syntax}`;
+        }
+
+        this.editor.insertText(newText);
+    }
 }
 
 export default StrikethroughTool;

package/src/plugins/markdown/Toolbar/tools/ULTool.js

@@ -2,15 +2,28 @@ import MakeTool from '../MakeTool.js';
 
 class ULTool extends MakeTool {
     constructor(editor) {
-        super(editor, '-', 'Unordered list');
+        super(editor, 'Unordered list');
         this.button = this.createButton(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h.01"/><path d="M3 18h.01"/><path d="M3 6h.01"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M8 6h13"/></svg>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M8 4H21V6H8V4ZM4.5 6.5C3.67157 6.5 3 5.82843 3 5C3 4.17157 3.67157 3.5 4.5 3.5C5.32843 3.5 6 4.17157 6 5C6 5.82843 5.32843 6.5 4.5 6.5ZM4.5 13.5C3.67157 13.5 3 12.8284 3 12C3 11.1716 3.67157 10.5 4.5 10.5C5.32843 10.5 6 11.1716 6 12C6 12.8284 5.32843 13.5 4.5 13.5ZM4.5 20.4C3.67157 20.4 3 19.7284 3 18.9C3 18.0716 3.67157 17.4 4.5 17.4C5.32843 17.4 6 18.0716 6 18.9C6 19.7284 5.32843 20.4 4.5 20.4ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z"></path></svg>
         `);
     }
     
-    // You can change how the syntax is applied for this specific tool:
     applySyntax() {
-        super.applySyntax('start');  // Only apply strikethrough at the start
+        const textarea = this.editor.usertextarea;
+        const { selectionStart, selectionEnd } = textarea;
+        const selectedText = textarea.value.substring(selectionStart, selectionEnd);
+
+        const syntax = '- ';
+        let newText = '';
+        if (selectedText.startsWith(syntax)) {
+            // Remove the Unordered syntax if it's already wrapped
+            newText = selectedText.slice(syntax.length);
+        } else {
+            // Apply Unordered list syntax
+            newText = `${syntax}${selectedText || 'Unordered list'}`;
+        }
+
+        this.editor.insertText(newText);
     }
 }
 

package/src/plugins/markdown/editor.js

@@ -36,6 +36,7 @@ class MarkdownEditor {
 
     applyDefaultAttributes() {
         this.usertextarea.classList.add(
+            "focus:ring-0",
             "focus:outline-0",
             "border-0",
             "p-1.5",
@@ -50,7 +51,9 @@ class MarkdownEditor {
             "dark:prose-invert",
             "text-stone-700",
             "dark:text-stone-200",
-            "overflow-y-auto"
+            "overflow-y-auto",
+            "placeholder:text-stone-300",
+            "dark:placeholder:text-stone-700"
         );
         if (!this.usertextarea.hasAttribute('placeholder')) {
             this.usertextarea.placeholder = this.options.placeholder || 'Write your markdown...';