markdown-text-editor 0.0.6-beta.1 → 0.0.8-beta.1

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "markdown-text-editor",
-  "version": "0.0.6-beta.1",
+  "version": "0.0.8-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.min.js",
+  "main": "dist/markdown-text-editor.js",
   "repository": {
     "type": "github",
     "url": "git+https://github.com/nezanuha/markdown-text-editor.git"
@@ -18,6 +18,7 @@
     "markdown-text-editor",
     "markdown-text",
     "mde",
+    "text-editor",
     "simple mde",
     "markdown",
     "editor",
@@ -41,7 +42,10 @@
     "url": "https://github.com/nezanuha/markdown-text-editor/issues"
   },
   "files": [
-    "dist/**/*"
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
   ],
   "dependencies": {
     "marked": "^15.0.4",

package/src/plugins/index.js

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

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

@@ -0,0 +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;

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

@@ -0,0 +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>
+        `);
+    }
+}
+
+export default BoldTool;

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

@@ -0,0 +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>
+        `);
+    }
+}
+
+export default ItalicTool;

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

@@ -0,0 +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);
+        }
+    }
+}
+
+export default MarkdownTool;

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

@@ -0,0 +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;

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

@@ -0,0 +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>
+        `);
+    }
+}
+
+export default StrikethroughTool;

package/src/plugins/markdown/editor.js

@@ -0,0 +1,140 @@
+// #markdown\editor.js
+import './styles/main.css';
+import { marked } from 'marked';
+import Toolbar from './Toolbar/index.js';
+import Preview from './preview.js';
+
+marked.setOptions({
+    breaks: true
+});
+
+class markdownEditor {
+    constructor(selector, options = {}) {
+        this.usertextarea = typeof selector === 'string' ? document.querySelector(selector) : selector;
+        this.options = options;
+        this.preview = this.options.toolbar.includes('preview');
+        this.init();
+    }
+
+    init() {
+        this.createEditor();
+        if (this.options.toolbar) this.addToolbar();
+    }
+
+    createEditor() {
+        if (!this.isTextareaValid()) return;
+
+        this.applyDefaultAttributes();
+        this.buildEditorLayout();
+        this.addInputListener();
+        this.render();
+    }
+
+    isTextareaValid() {
+        return this.usertextarea.tagName === 'TEXTAREA';
+    }
+
+    applyDefaultAttributes() {
+        this.usertextarea.classList.add(
+            "p-1.5",
+            "max-w-full",
+            "size-full",
+            "bg-transparent",
+            "outline-0",
+            "appearance-none",
+            "prose",
+            "prose-sm",
+            "md:prose-base",
+            "dark:prose-invert",
+            "text-stone-700",
+            "dark:text-stone-200",
+            "overflow-y-auto"
+        );
+        if (!this.usertextarea.hasAttribute('placeholder')) {
+            this.usertextarea.placeholder = this.options.placeholder || 'Write your markdown...';
+        }
+    }
+
+    buildEditorLayout() {
+        this.editorContainer = document.createElement('div');
+        this.editorContainer.className = `
+            markdown-editor-wrapper
+            border border-stone-200
+            dark:border-stone-700
+            rounded-md
+            overflow-hidden
+        `;
+        this.usertextarea.parentNode.insertBefore(this.editorContainer, this.usertextarea);
+
+        this.markdownEditorDiv = document.createElement('div');
+        this.markdownEditorDiv.className = `editor-layout`;
+        this.editorContainer.appendChild(this.markdownEditorDiv);
+
+        this.addTextareaWrapper();
+        if (this.preview) this.addPreviewWrapper();
+    }
+
+    addTextareaWrapper() {
+        const textareaContainer = document.createElement('div');
+        textareaContainer.className = `
+            textarea-wrapper
+            p-2
+            bg-white
+            dark:bg-stone-800
+            grid
+            after:px-3.5
+            after:py-2.5
+            after:text-inherit
+            [&>textarea]:resize-none
+            [&>textarea]:[grid-area:1/1/2/2]
+            after:[grid-area:1/1/2/2]
+            after:whitespace-pre-wrap
+            after:invisible
+            after:content-[attr(data-cloned-val)_'_']
+            after:border
+        `;
+        textareaContainer.appendChild(this.usertextarea);
+        this.markdownEditorDiv.appendChild(textareaContainer);
+    }
+
+    
+
+    addPreviewWrapper() {
+        const preview = new Preview(this.markdownEditorDiv);
+        this.previewContent = preview.getPreviewContent();
+    }
+
+    addInputListener() {
+        this.usertextarea.addEventListener('input', () => this.render());
+        this.usertextarea.addEventListener('scroll', () => {
+            const textarea = this.usertextarea;
+            const previewPane = this.previewContent;
+        
+            // Calculate the proportion of the textarea that has been scrolled
+            const textareaScrollRatio = textarea.scrollTop / (textarea.scrollHeight - textarea.clientHeight);
+        
+            // Apply the same scroll ratio to the preview pane
+            previewPane.scrollTop = textareaScrollRatio * (previewPane.scrollHeight - previewPane.clientHeight);
+        });
+    }
+
+    addToolbar() {
+        new Toolbar(this, this.options.toolbar || ['bold', 'italic', 'strikethrough']);
+    }
+
+    insertText(text) {
+        const { selectionStart, selectionEnd } = this.usertextarea;
+        const value = this.usertextarea.value;
+        this.usertextarea.value = `${value.substring(0, selectionStart)}${text}${value.substring(selectionEnd)}`;
+        this.usertextarea.focus();
+        this.usertextarea.setSelectionRange(selectionStart, selectionStart + text.length);
+        this.render();
+    }
+
+    render() {
+        const html = marked(this.usertextarea.value);
+        this.previewContent.innerHTML = html;
+    }
+}
+
+export default markdownEditor;

package/src/plugins/markdown/preview.js

@@ -0,0 +1,17 @@
+// markdown\preview.js
+class Preview {
+    constructor(container) {
+        this.previewContainer = document.createElement('div');
+        this.previewContainer.className = 'preview-wrapper bg-white dark:bg-stone-800 p-2 hidden';
+        this.previewContent = document.createElement('div');
+        this.previewContent.className = 'preview-content prose prose-sm md:prose-base dark:prose-invert p-1.5 overflow-y-auto h-lvh max-w-max';
+        this.previewContainer.appendChild(this.previewContent);
+        container.appendChild(this.previewContainer);
+    }
+
+    getPreviewContent() {
+        return this.previewContent;
+    }
+}
+
+export default Preview;

package/src/plugins/markdown/styles/main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/plugins/markdown/utils/markdownUtils.js

@@ -0,0 +1,7 @@
+// utils/markdownUtils.js
+
+import { marked } from 'marked';
+
+export function renderMarkdown(content) {
+    return marked(content);
+}