markdown-text-editor 0.1.0 → 0.1.2

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

@@ -1,20 +1,31 @@
-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, 'Ordered list');
+        this.button = this.createButton(`
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M8 4H21V6H8V4ZM5 3V6H6V7H3V6H4V4H3V3H5ZM3 14V11.5H5V11H3V10H6V12.5H4V13H6V14H3ZM5 19.5H3V18.5H5V18H3V17H6V21H3V20H5V19.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z"></path></svg>
+        `);
+    }
+    
+    applySyntax() {
+        const textarea = this.editor.usertextarea;
+        const { selectionStart, selectionEnd } = textarea;
+        const selectedText = textarea.value.substring(selectionStart, selectionEnd);
+
+        const syntax = '1. ';
+        let newText = '';
+        if (selectedText.startsWith(syntax)) {
+            // Remove the ordered syntax if it's already wrapped
+            newText = selectedText.slice(syntax.length);
+        } else {
+            // Apply ordered list syntax
+            newText = `${syntax}${selectedText || 'Ordered list'}`;
+        }
+
+        this.editor.insertText(newText);
+    }
+}
+
+
 export default OLTool;

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

@@ -1,98 +1,108 @@
-// #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" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M11 5H5V19H11V5ZM13 5V19H19V5H13ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3Z"></path></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,31 @@
-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" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M17.1538 14C17.3846 14.5161 17.5 15.0893 17.5 15.7196C17.5 17.0625 16.9762 18.1116 15.9286 18.867C14.8809 19.6223 13.4335 20 11.5862 20C9.94674 20 8.32335 19.6185 6.71592 18.8555V16.6009C8.23538 17.4783 9.7908 17.917 11.3822 17.917C13.9333 17.917 15.2128 17.1846 15.2208 15.7196C15.2208 15.0939 15.0049 14.5598 14.5731 14.1173C14.5339 14.0772 14.4939 14.0381 14.4531 14H3V12H21V14H17.1538ZM13.076 11H7.62908C7.4566 10.8433 7.29616 10.6692 7.14776 10.4778C6.71592 9.92084 6.5 9.24559 6.5 8.45207C6.5 7.21602 6.96583 6.165 7.89749 5.299C8.82916 4.43299 10.2706 4 12.2219 4C13.6934 4 15.1009 4.32808 16.4444 4.98426V7.13591C15.2448 6.44921 13.9293 6.10587 12.4978 6.10587C10.0187 6.10587 8.77917 6.88793 8.77917 8.45207C8.77917 8.87172 8.99709 9.23796 9.43293 9.55079C9.86878 9.86362 10.4066 10.1135 11.0463 10.3004C11.6665 10.4816 12.3431 10.7148 13.076 11H13.076Z"></path></svg>
+        `);
+    }
+
+    applySyntax() {
+        const textarea = this.editor.usertextarea;
+        const { selectionStart, selectionEnd } = textarea;
+        const selectedText = textarea.value.substring(selectionStart, selectionEnd);
+
+        const syntax = '~';
+        let newText = '';
+        if (selectedText.startsWith(syntax) && selectedText.endsWith(syntax)) {
+            // Remove the strikethrough syntax if it's already wrapped
+            newText = selectedText.slice(syntax.length, -syntax.length);
+        } else {
+            // Apply strikethrough syntax
+            newText = `${syntax}${selectedText || 'Strikethrough text'}${syntax}`;
+        }
+
+        this.editor.insertText(newText);
+    }
+}
+
 export default StrikethroughTool;

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

@@ -1,18 +1,31 @@
-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" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M8 4H21V6H8V4ZM4.5 6.5C3.67157 6.5 3 5.82843 3 5C3 4.17157 3.67157 3.5 4.5 3.5C5.32843 3.5 6 4.17157 6 5C6 5.82843 5.32843 6.5 4.5 6.5ZM4.5 13.5C3.67157 13.5 3 12.8284 3 12C3 11.1716 3.67157 10.5 4.5 10.5C5.32843 10.5 6 11.1716 6 12C6 12.8284 5.32843 13.5 4.5 13.5ZM4.5 20.4C3.67157 20.4 3 19.7284 3 18.9C3 18.0716 3.67157 17.4 4.5 17.4C5.32843 17.4 6 18.0716 6 18.9C6 19.7284 5.32843 20.4 4.5 20.4ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z"></path></svg>
+        `);
+    }
+    
+    applySyntax() {
+        const textarea = this.editor.usertextarea;
+        const { selectionStart, selectionEnd } = textarea;
+        const selectedText = textarea.value.substring(selectionStart, selectionEnd);
+
+        const syntax = '- ';
+        let newText = '';
+        if (selectedText.startsWith(syntax)) {
+            // Remove the Unordered syntax if it's already wrapped
+            newText = selectedText.slice(syntax.length);
+        } else {
+            // Apply Unordered list syntax
+            newText = `${syntax}${selectedText || 'Unordered list'}`;
+        }
+
+        this.editor.insertText(newText);
+    }
+}
+
+
 export default ULTool;