markdown-text-editor 0.1.0 → 0.1.1

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

@@ -1,98 +1,110 @@
-// #components/Toolbar/tools/PreviewToggleTool.js
-import MakeTool from '../MakeTool.js';
-
-class PreviewTool extends MakeTool {
-    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');
-        editorDiv.parentNode.classList.toggle('z-[999]');
-    
-        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',
-            'rtl:md:divide-x-reverse',
-            'md:divide-stone-300',
-            'dark:md:divide-stone-700'
-        );
-
-        editorDiv.querySelector(".textarea-wrapper").classList.remove(
-            'h-[90lvh]',
-            'hidden',
-            'md:block'
-        );
-        this.editor.render(); // Re-render content in the preview
-
-        editorDiv.querySelector(".textarea-wrapper").querySelector("textarea").classList.remove("!h-[90lvh]");
-        
-        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');
-        editorDiv.parentNode.classList.toggle('z-[999]');
-
-        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',
-            'rtl:md:divide-x-reverse',
-            'md:divide-stone-300',
-            'dark:md:divide-stone-700'
-        );
-
-        editorDiv.querySelector(".textarea-wrapper").classList.add(
-            'h-[90lvh]',
-            'hidden',
-            'md:block'
-        );
-        editorDiv.querySelector(".textarea-wrapper").querySelector("textarea").classList.add("!h-[90lvh]");
-
-        document.querySelector("body").classList.add('overflow-hidden');
-    }
-}
-
-export default PreviewTool;
+// #components/Toolbar/tools/PreviewToggleTool.js
+import MakeTool from '../MakeTool.js';
+
+class PreviewTool extends MakeTool {
+    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');
+        editorDiv.parentNode.classList.toggle('z-[999]');
+    
+        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',
+            'rtl:md:divide-x-reverse',
+            'md:divide-stone-300',
+            'dark:md:divide-stone-700'
+        );
+
+        editorDiv.querySelector(".textarea-wrapper").classList.remove(
+            'h-[90lvh]',
+            'hidden',
+            'md:block'
+        );
+        this.editor.render(); // Re-render content in the preview
+
+        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)
+    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');
+        editorDiv.parentNode.classList.toggle('z-[999]');
+
+        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',
+            'rtl:md:divide-x-reverse',
+            'md:divide-stone-300',
+            'dark:md:divide-stone-700'
+        );
+
+        editorDiv.querySelector(".textarea-wrapper").classList.add(
+            'h-[90lvh]',
+            'hidden',
+            'md:block'
+        );
+        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');
+            }
+        });
+    }
+}
+
+export default PreviewTool;

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

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

@@ -1,18 +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="18" 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
-    }
-}
-
-
+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

@@ -1,142 +1,169 @@
-// #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(
-            "focus:outline-0",
-            "border-0",
-            "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;
-    }
-}
-
+// #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(
+            "focus:outline-0",
+            "border-0",
+            "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);
+
+        // 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;
+    }
+}
+
 export default MarkdownEditor;

package/src/plugins/markdown/preview.js

@@ -1,17 +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-[90lvh] max-w-max';
-        this.previewContainer.appendChild(this.previewContent);
-        container.appendChild(this.previewContainer);
-    }
-
-    getPreviewContent() {
-        return this.previewContent;
-    }
-}
-
+// 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-[90lvh] 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

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

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

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