markdown-text-editor 0.1.0 → 0.1.1

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.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",
+  "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"
+  },
+  "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"
+  }
+}

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,66 @@
-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, 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

@@ -1,42 +1,50 @@
-// #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';
+
+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 = {
+            ul: ULTool,
+            ol: OLTool,
+            checklist: CheckListTool,
+            bold: BoldTool,
+            italic: ItalicTool,
+            strikethrough: StrikethroughTool
+        };
+
+        // 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/BoldTool.js

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

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

@@ -1,18 +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
-    }
-}
-
-
+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,17 +1,17 @@
-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" 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>
+        `);
+    }
+}
+
 export default ItalicTool;

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

@@ -1,20 +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
-    }
-}
-
-
+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;