markdown-text-editor 0.0.25-beta.3 → 0.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "markdown-text-editor",
-  "version": "0.0.25-beta.3",
-  "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.",
+  "version": "0.1.1",
+  "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",
@@ -11,7 +11,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/nezanuha/markdown-text-editor"
+    "url": "git+https://github.com/nezanuha/markdown-text-editor.git"
   },
   "scripts": {
     "clean": "rimraf dist",
@@ -20,19 +20,26 @@
     "dev": "webpack serve --mode=development"
   },
   "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
+    "provenance": true,
+    "access": "public"
   },
   "keywords": [
-    "markdown-text-editor",
     "markdown",
-    "text-editor",
+    "mde",
+    "markdown js library",
     "editor",
-    "live preview",
-    "syntax highlighting",
-    "developer tools",
-    "content creation",
-    "plugin",
-    "open source"
+    "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",
@@ -41,8 +48,8 @@
     "url": "https://github.com/nezanuha/markdown-text-editor/issues"
   },
   "dependencies": {
-    "marked": "^15.0.4",
-    "tailwindcss": "^3.4.13"
+    "marked": "~15.0.4",
+    "tailwindcss": "~3.4.13"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

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

@@ -0,0 +1,66 @@
+class MakeTool {
+    constructor(editor, syntax, 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
+    }
+
+    // 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('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;

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

@@ -2,33 +2,47 @@
 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.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 = {
+            ul: ULTool,
+            ol: OLTool,
+            checklist: CheckListTool,
             bold: BoldTool,
             italic: ItalicTool,
-            strikethrough: StrikethroughTool,
-            preview: PreviewTool
+            strikethrough: StrikethroughTool
         };
 
+        // Append all tools except preview
         this.options.forEach(tool => {
-            const ToolClass = toolMapping[tool];
-            if (ToolClass) {
-                const toolInstance = new ToolClass(this.editor);
-                this.toolbar.appendChild(toolInstance.button);
+            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);
     }
 }

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

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

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

@@ -0,0 +1,18 @@
+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
+    }
+}
+
+
+export default CheckListTool;

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

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

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

@@ -0,0 +1,20 @@
+import MakeTool from '../MakeTool.js';
+
+class OLTool extends MakeTool {
+    constructor(editor) {
+        super(editor, '1.', '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>
+        `);
+    }
+    
+    // You can change how the syntax is applied for this specific tool:
+    applySyntax() {
+        super.applySyntax('start');  // Only apply strikethrough at the start
+    }
+}
+
+
+export default OLTool;

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

@@ -1,7 +1,7 @@
 // #components/Toolbar/tools/PreviewToggleTool.js
-import MarkdownTool from './MarkdownTool.js';
+import MakeTool from '../MakeTool.js';
 
-class PreviewTool extends MarkdownTool {
+class PreviewTool extends MakeTool {
     constructor(editor) {
         // No markdown syntax for preview toggle, so we call the parent constructor with empty values
         super(editor, '', 'Preview');
@@ -60,6 +60,12 @@ class PreviewTool extends MarkdownTool {
         editorDiv.querySelector(".textarea-wrapper").querySelector("textarea").classList.remove("!h-[90lvh]");
         
         document.querySelector("body").classList.remove('overflow-hidden');
+
+        document.querySelectorAll('.markdown-btn').forEach(button => {
+            if (!button.classList.contains('preview-btn')) {
+                button.classList.remove('pointer-events-none', 'md:pointer-events-auto', 'opacity-25', 'md:opacity-100');
+            }
+        });
     }
 
     // Method to show the preview (enable it)
@@ -92,6 +98,12 @@ class PreviewTool extends MarkdownTool {
         editorDiv.querySelector(".textarea-wrapper").querySelector("textarea").classList.add("!h-[90lvh]");
 
         document.querySelector("body").classList.add('overflow-hidden');
+
+        document.querySelectorAll('.markdown-btn').forEach(button => {
+            if (!button.classList.contains('preview-btn')) {
+                button.classList.add('pointer-events-none', 'md:pointer-events-auto', 'opacity-25', 'md:opacity-100');
+            }
+        });
     }
 }
 

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

@@ -1,9 +1,9 @@
-import MarkdownTool from './MarkdownTool.js';
+import MakeTool from '../MakeTool.js';
 
-class StrikethroughTool extends MarkdownTool {
+class StrikethroughTool extends MakeTool {
     constructor(editor) {
         // Call the parent constructor with the markdown syntax for strikethrough (~~)
-        super(editor, '~~', 'strikethrough text');
+        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"/>

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

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

package/src/plugins/markdown/editor.js

@@ -130,9 +130,36 @@ class MarkdownEditor {
         this.usertextarea.value = `${value.substring(0, selectionStart)}${text}${value.substring(selectionEnd)}`;
         this.usertextarea.focus();
         this.usertextarea.setSelectionRange(selectionStart, selectionStart + text.length);
+
+        // Scroll the textarea to the inserted text
+        this.scrollToView();
+
         this.render();
     }
 
+    scrollToView() {
+        const textarea = this.usertextarea;
+    
+        // Calculate the position of the inserted text
+        const selectionStart = textarea.selectionStart;
+    
+        // Get the line height (height of each row of text)
+        const lineHeight = parseInt(window.getComputedStyle(textarea).lineHeight);
+        
+        // Get how many rows fit into the visible area of the textarea
+        const rowsInView = Math.floor(textarea.clientHeight / lineHeight);
+    
+        // Calculate the current line number of the selectionStart
+        const currentLine = Math.floor(selectionStart / textarea.cols);
+    
+        // Scroll to the line number that places the inserted text in the center
+        const targetScrollTop = (currentLine - Math.floor(rowsInView / 2)) * lineHeight;
+    
+        // Adjust scrollTop to center the cursor's line in the view
+        textarea.scrollTop = targetScrollTop;
+    }
+    
+
     render() {
         const html = marked(this.usertextarea.value);
         this.previewContent.innerHTML = html;

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

@@ -1,40 +0,0 @@
-// #components\Toolbar\tools\MarkdownTool.js
-class MarkdownTool {
-    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());
-        return button;
-    }
-
-    // Toggle markdown syntax at the current cursor position
-    applySyntax() {
-        const textarea = this.editor.usertextarea;
-        const { selectionStart, selectionEnd } = textarea;
-        const selectedText = textarea.value.substring(selectionStart, selectionEnd);
-
-        const syntaxLength = this.syntax.length;
-
-        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 {
-            // If no text is selected or it's not wrapped, add the markdown syntax
-            const newText = `${this.syntax}${selectedText || this.defaultText}${this.syntax}`;
-            this.editor.insertText(newText);
-        }
-    }
-}
-
-export default MarkdownTool;