markdown-text-editor 0.0.17-beta.1 → 0.0.18-beta.1

package/package.json

@@ -1,61 +1,62 @@
-{
-  "name": "markdown-text-editor",
-  "version": "0.0.17-beta.1",
-  "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",
-  "files": [
-    "dist/**/*",
-    "src/**/*"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/nezanuha/markdown-text-editor"
-  },
-  "scripts": {
-    "clean": "rm -rf dist",
-    "build": "npm run clean && webpack --mode=production",
-    "prepublishOnly": "npm run build",
-    "dev": "webpack --watch --mode=development"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "keywords": [
-    "markdown-text-editor",
-    "markdown",
-    "text-editor",
-    "editor",
-    "live preview",
-    "syntax highlighting",
-    "developer tools",
-    "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",
-    "mini-css-extract-plugin": "^2.9.1",
-    "postcss": "^8.4.47",
-    "postcss-loader": "^8.1.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.1.0"
-  }
-}
+{
+  "name": "markdown-text-editor",
+  "version": "0.0.18-beta.1",
+  "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",
+  "style": "./dist/markdown-text-editor.css",
+  "files": [
+    "dist/**/*",
+    "src/**/*"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nezanuha/markdown-text-editor"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && webpack --mode=production",
+    "prepublishOnly": "npm run build",
+    "dev": "webpack --watch --mode=development"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "keywords": [
+    "markdown-text-editor",
+    "markdown",
+    "text-editor",
+    "editor",
+    "live preview",
+    "syntax highlighting",
+    "developer tools",
+    "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",
+    "mini-css-extract-plugin": "^2.9.1",
+    "postcss": "^8.4.47",
+    "postcss-loader": "^8.1.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.1.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/index.js

@@ -1,36 +1,36 @@
-// #markdown\Toolbar\index.js
-import BoldTool from './tools/BoldTool.js';
-import ItalicTool from './tools/ItalicTool.js';
-import StrikethroughTool from './tools/StrikethroughTool.js';
-import PreviewTool from './tools/PreviewTool.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 = {
-            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 PreviewTool from './tools/PreviewTool.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 = {
+            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;

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

@@ -1,15 +1,15 @@
-import MarkdownTool from './MarkdownTool.js';
-
-class BoldTool extends MarkdownTool {
-    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 MarkdownTool from './MarkdownTool.js';
+
+class BoldTool extends MarkdownTool {
+    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;

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

@@ -1,17 +1,17 @@
-import MarkdownTool from './MarkdownTool.js';
-
-class ItalicTool extends MarkdownTool {
-    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 MarkdownTool from './MarkdownTool.js';
+
+class ItalicTool extends MarkdownTool {
+    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>
+        `);
+    }
+}
+
 export default ItalicTool;

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

@@ -1,39 +1,39 @@
-// #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.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);
-        }
-    }
-}
-
+// #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.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;

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

@@ -1,92 +1,92 @@
-// #components/Toolbar/tools/PreviewToggleTool.js
-import MarkdownTool from './MarkdownTool.js';
-
-class PreviewTool extends MarkdownTool {
-    constructor(editor) {
-        // No markdown syntax for preview toggle, so we call the parent constructor with empty values
-        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>
-        `);
-    }
-
-    // Override applySyntax to handle preview toggling
-    applySyntax() {
-        const previewWrapper = this.editor.previewContent?.parentNode;
-        const editorDiv = this.editor.markdownEditorDiv;
-
-        if (!previewWrapper || !editorDiv) return;
-
-        // Toggle the preview's visibility by switching between 'block' and 'hidden' classes
-        if (this.editor.preview) {
-            this.enablePreview(previewWrapper, editorDiv);
-        } else {
-            this.disablePreview(previewWrapper, editorDiv);
-        }
-    }
-
-    // Method to hide the preview (disable it)
-    disablePreview(previewWrapper, editorDiv) {
-
-        this.editor.preview = true;
-
-        editorDiv.parentNode.classList.toggle('fixed');
-        editorDiv.parentNode.classList.toggle('top-0');
-        editorDiv.parentNode.classList.toggle('inset-x-0');
-        editorDiv.parentNode.classList.toggle('rounded-md');
-    
-        previewWrapper.classList.toggle('hidden');
-
-        // Add grid layout and divide classes to the editor div
-        editorDiv.classList.remove(
-            'md:grid',
-            'md:grid-cols-2',
-            'md:divide-x',
-            'md:divide-stone-300',
-            'dark:md:divide-stone-700'
-        );
-
-        editorDiv.querySelector(".textarea-wrapper").classList.remove(
-            'h-lvh',
-            'hidden',
-            'md:block'
-        );
-        this.editor.render(); // Re-render content in the preview
-        
-        document.querySelector("body").classList.remove('overflow-hidden');
-    }
-
-    // Method to show the preview (enable it)
-    enablePreview(previewWrapper, editorDiv) {
-
-        this.editor.preview = false;
-
-        editorDiv.parentNode.classList.toggle('fixed');
-        editorDiv.parentNode.classList.toggle('top-0');
-        editorDiv.parentNode.classList.toggle('inset-x-0');
-        editorDiv.parentNode.classList.toggle('rounded-md');
-
-        previewWrapper.classList.toggle('hidden');
-        // Remove grid layout and divide classes from the editor div
-        editorDiv.classList.add(
-            'md:grid',
-            'md:grid-cols-2',
-            'md:divide-x',
-            'md:divide-stone-300',
-            'dark:md:divide-stone-700'
-        );
-
-        editorDiv.querySelector(".textarea-wrapper").classList.add(
-            'h-lvh',
-            'hidden',
-            'md:block'
-        );
-        // editorDiv.closest(".textarea-wrapper>textarea").classList.add("h-lvh");
-
-        document.querySelector("body").classList.add('overflow-hidden');
-    }
-}
-
-export default PreviewTool;
+// #components/Toolbar/tools/PreviewToggleTool.js
+import MarkdownTool from './MarkdownTool.js';
+
+class PreviewTool extends MarkdownTool {
+    constructor(editor) {
+        // No markdown syntax for preview toggle, so we call the parent constructor with empty values
+        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>
+        `);
+    }
+
+    // Override applySyntax to handle preview toggling
+    applySyntax() {
+        const previewWrapper = this.editor.previewContent?.parentNode;
+        const editorDiv = this.editor.markdownEditorDiv;
+
+        if (!previewWrapper || !editorDiv) return;
+
+        // Toggle the preview's visibility by switching between 'block' and 'hidden' classes
+        if (this.editor.preview) {
+            this.enablePreview(previewWrapper, editorDiv);
+        } else {
+            this.disablePreview(previewWrapper, editorDiv);
+        }
+    }
+
+    // Method to hide the preview (disable it)
+    disablePreview(previewWrapper, editorDiv) {
+
+        this.editor.preview = true;
+
+        editorDiv.parentNode.classList.toggle('fixed');
+        editorDiv.parentNode.classList.toggle('top-0');
+        editorDiv.parentNode.classList.toggle('inset-x-0');
+        editorDiv.parentNode.classList.toggle('rounded-md');
+    
+        previewWrapper.classList.toggle('hidden');
+
+        // Add grid layout and divide classes to the editor div
+        editorDiv.classList.remove(
+            'md:grid',
+            'md:grid-cols-2',
+            'md:divide-x',
+            'md:divide-stone-300',
+            'dark:md:divide-stone-700'
+        );
+
+        editorDiv.querySelector(".textarea-wrapper").classList.remove(
+            'h-lvh',
+            'hidden',
+            'md:block'
+        );
+        this.editor.render(); // Re-render content in the preview
+        
+        document.querySelector("body").classList.remove('overflow-hidden');
+    }
+
+    // Method to show the preview (enable it)
+    enablePreview(previewWrapper, editorDiv) {
+
+        this.editor.preview = false;
+
+        editorDiv.parentNode.classList.toggle('fixed');
+        editorDiv.parentNode.classList.toggle('top-0');
+        editorDiv.parentNode.classList.toggle('inset-x-0');
+        editorDiv.parentNode.classList.toggle('rounded-md');
+
+        previewWrapper.classList.toggle('hidden');
+        // Remove grid layout and divide classes from the editor div
+        editorDiv.classList.add(
+            'md:grid',
+            'md:grid-cols-2',
+            'md:divide-x',
+            'md:divide-stone-300',
+            'dark:md:divide-stone-700'
+        );
+
+        editorDiv.querySelector(".textarea-wrapper").classList.add(
+            'h-lvh',
+            'hidden',
+            'md:block'
+        );
+        // editorDiv.closest(".textarea-wrapper>textarea").classList.add("h-lvh");
+
+        document.querySelector("body").classList.add('overflow-hidden');
+    }
+}
+
+export default PreviewTool;

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

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