markdown-text-editor 0.1.0 → 0.1.2

package/package.json

@@ -1,67 +1,72 @@
-{
-  "name": "markdown-text-editor",
-  "version": "0.1.0",
-  "description": "A powerful, easy-to-use Markdown editor with a real-time preview, syntax highlighting. Ideal for developers, writers, and content creators who need a seamless, interactive writing experience with full Markdown support.",
-  "main": "./dist/markdown-text-editor.js",
-  "browser": "dist/markdown-text-editor.js",
-  "style": "./dist/markdown-text-editor.css",
-  "files": [
-    "dist/**/*",
-    "src/**/*"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/nezanuha/markdown-text-editor"
-  },
-  "scripts": {
-    "clean": "rimraf dist",
-    "build": "npm run clean && webpack --mode=production",
-    "prepublishOnly": "npm run build",
-    "dev": "webpack serve --mode=development"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "keywords": [
-    "markdown-text-editor",
-    "markdown",
-    "mde",
-    "markdown editor",
-    "text-editor",
-    "editor",
-    "live preview",
-    "syntax highlighting",
-    "library",
-    "content creation",
-    "plugin",
-    "open source"
-  ],
-  "author": "Nezanuha",
-  "license": "MIT",
-  "homepage": "https://github.com/nezanuha/markdown-text-editor",
-  "bugs": {
-    "url": "https://github.com/nezanuha/markdown-text-editor/issues"
-  },
-  "dependencies": {
-    "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",
-    "html-webpack-plugin": "^5.6.3",
-    "mini-css-extract-plugin": "^2.9.1",
-    "postcss": "^8.4.47",
-    "postcss-loader": "^8.1.1",
-    "rimraf": "^6.0.1",
-    "style-loader": "^4.0.0",
-    "terser-webpack-plugin": "^5.3.11",
-    "webpack": "^5.95.0",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.0"
-  }
-}
+{
+  "name": "markdown-text-editor",
+  "version": "0.1.2",
+  "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",
+  "style": "./dist/markdown-text-editor.css",
+  "files": [
+    "dist/**/*",
+    "src/**/*"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nezanuha/markdown-text-editor.git"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "npm run clean && webpack --mode=production",
+    "prepublishOnly": "npm run build",
+    "dev": "webpack serve --mode=development"
+  },
+  "publishConfig": {
+    "provenance": true,
+    "access": "public"
+  },
+  "keywords": [
+    "markdown",
+    "mde",
+    "markdown js library",
+    "editor",
+    "markdown editor",
+    "text editor",
+    "markdown preview",
+    "markdown syntax",
+    "markdown plugin",
+    "rich text editor",
+    "wysiwyg",
+    "markdown formatting",
+    "code editor",
+    "editor plugin",
+    "text formatting",
+    "markdown-text-editor"
+  ],
+  "author": "Nezanuha",
+  "license": "MIT",
+  "homepage": "https://github.com/nezanuha/markdown-text-editor",
+  "bugs": {
+    "url": "https://github.com/nezanuha/markdown-text-editor/issues"
+  },
+  "dependencies": {
+    "marked": "~15.0.4",
+    "tailwindcss": "~3.4.13",
+    "@tailwindcss/typography": "~0.5.15"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
+    "autoprefixer": "^10.4.20",
+    "babel-loader": "^9.2.1",
+    "css-loader": "^7.1.2",
+    "html-webpack-plugin": "^5.6.3",
+    "mini-css-extract-plugin": "^2.9.1",
+    "postcss": "^8.4.47",
+    "postcss-loader": "^8.1.1",
+    "rimraf": "^6.0.1",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.11",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0"
+  }
+}

package/src/plugins/index.js

@@ -1,2 +1,2 @@
-// main.js
-export { default as MarkdownEditor } from './markdown/editor';
+// main.js
+export { default as MarkdownEditor } from './markdown/editor';

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

@@ -1,63 +1,22 @@
-class MakeTool {
-    constructor(editor, syntax, defaultText) {
-        this.editor = editor;
-        this.syntax = syntax; // Markdown syntax (e.g., ** for bold, * for italic)
-        this.defaultText = defaultText; // Default text if nothing is selected
-        this.button = this.createButton();
-    }
-
-    // Create a button element (can be overridden in child classes)
-    createButton(iconHtml) {
-        const button = document.createElement('button');
-        button.innerHTML = iconHtml;  // Pass icon HTML from child classes
-        button.type = 'button';
-        button.className = 'markdown-btn p-2 hover:bg-stone-200 dark:hover:bg-stone-600 rounded duration-300';
-        button.addEventListener('click', () => this.applySyntax('both'));  // 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;
+class MakeTool {
+    constructor(editor, title) {
+        this.editor = editor;
+        this.defaultText = `${title} text`; // Default text if nothing is selected
+        this.button = this.createButton();
+        this.title = title
+    }
+
+    // Create a button element (can be overridden in child classes)
+    createButton(iconHtml) {
+        const button = document.createElement('button');
+        const buttonClass = this.title ? `${this.title.replace(/ /g, '-')}-btn`.toLowerCase() : '';
+        button.innerHTML = iconHtml;  // Pass icon HTML from child classes
+        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());  // Default to 'both', can change in child
+        return button;
+    }
+}
+
+export default MakeTool;

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

@@ -1,42 +1,56 @@
-// #markdown\Toolbar\index.js
-import BoldTool from './tools/BoldTool.js';
-import ItalicTool from './tools/ItalicTool.js';
-import StrikethroughTool from './tools/StrikethroughTool.js';
-import ULTool from './tools/ULTool.js';
-import OLTool from './tools/OLTool.js';
-import PreviewTool from './tools/PreviewTool.js'
-import CheckListTool from './tools/CheckListTool.js';
-
-class Toolbar {
-    constructor(editor, options) {
-        this.editor = editor;
-        this.options = options;
-        this.toolbar = document.createElement('div');
-        this.toolbar.className = 'toolbar flex space-x-1.5 p-1.5 bg-stone-100 dark:bg-stone-900 dark:text-stone-200 border-b border-stone-200 dark:border-stone-700';
-        this.init();
-    }
-
-    init() {
-        const toolMapping = {
-            ul: ULTool,
-            ol: OLTool,
-            checklist: CheckListTool,
-            bold: BoldTool,
-            italic: ItalicTool,
-            strikethrough: StrikethroughTool,
-            preview: PreviewTool
-        };
-
-        this.options.forEach(tool => {
-            const ToolClass = toolMapping[tool];
-            if (ToolClass) {
-                const toolInstance = new ToolClass(this.editor);
-                this.toolbar.appendChild(toolInstance.button);
-            }
-        });
-
-        this.editor.editorContainer.insertBefore(this.toolbar, this.editor.markdownEditorDiv);
-    }
-}
-
-export default Toolbar;
+// #markdown\Toolbar\index.js
+import BoldTool from './tools/BoldTool.js';
+import ItalicTool from './tools/ItalicTool.js';
+import StrikethroughTool from './tools/StrikethroughTool.js';
+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) {
+        this.editor = editor;
+        this.options = options;
+        this.toolbar = document.createElement('div');
+        this.toolbar.className = 'toolbar flex space-x-1.5 p-1.5 bg-stone-100 dark:bg-stone-900 dark:text-stone-200 border-b border-stone-200 dark:border-stone-700 overflow-x-auto';
+        this.init();
+    }
+
+    init() {
+        const toolMapping = {
+            heading: HeadingTool,
+            ul: ULTool,
+            ol: OLTool,
+            checklist: CheckListTool,
+            bold: BoldTool,
+            italic: ItalicTool,
+            strikethrough: StrikethroughTool,
+            blockquote: BlockQuoteTool,
+            link: LinkTool
+        };
+
+        // Append all tools except preview
+        this.options.forEach(tool => {
+            if (tool !== 'preview') {
+                const ToolClass = toolMapping[tool];
+                if (ToolClass) {
+                    const toolInstance = new ToolClass(this.editor);
+                    this.toolbar.appendChild(toolInstance.button); // Directly append to toolbar
+                }
+            }
+        });
+
+        // Append preview button at the end
+        if (this.options.includes('preview')) {
+            const previewToolInstance = new PreviewTool(this.editor);
+            this.toolbar.appendChild(previewToolInstance.button); // Directly append to toolbar at the end
+        }
+
+        this.editor.editorContainer.insertBefore(this.toolbar, this.editor.markdownEditorDiv);
+    }
+}
+
+export default Toolbar;

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

@@ -1,15 +1,33 @@
-import MakeTool from '../MakeTool.js';
-
-class BoldTool extends MakeTool {
-    constructor(editor) {
-        // Call the parent constructor with the markdown syntax for bold (**)
-        super(editor, '**', 'bold text');
-        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>
-        `);
-    }
-}
-
-export default BoldTool;
+import MakeTool from '../MakeTool.js';
+
+class BoldTool extends MakeTool {
+    constructor(editor) {
+        super(editor, 'Bold');
+        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="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;

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

@@ -1,18 +1,31 @@
-import MakeTool from '../MakeTool.js';
-
-class CheckListTool extends MakeTool {
-    constructor(editor) {
-        super(editor, '- [x]', '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>
-        `);
-    }
-    
-    // You can change how the syntax is applied for this specific tool:
-    applySyntax() {
-        super.applySyntax('start');  // Only apply strikethrough at the start
-    }
-}
-
-
+import MakeTool from '../MakeTool.js';
+
+class CheckListTool extends MakeTool {
+    constructor(editor) {
+        super(editor, 'Check list');
+        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="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>
+        `);
+    }
+    
+    applySyntax() {
+        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);
+    }
+}
+
+
 export default CheckListTool;

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

@@ -1,17 +1,31 @@
-import MakeTool from '../MakeTool.js';
-
-class ItalicTool extends MakeTool {
-    constructor(editor) {
-        // Call the parent constructor with the markdown syntax for italic (*)
-        super(editor, '*', 'italic text');
-        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>
-        `);
-    }
-}
-
+import MakeTool from '../MakeTool.js';
+
+class ItalicTool extends MakeTool {
+    constructor(editor) {
+        // Call the parent constructor with the markdown syntax for italic (*)
+        super(editor, 'Italic');
+        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="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;