markdown-text-editor 0.0.24-beta.3 → 0.1.0

package/src/plugins/markdown/editor.js

@@ -1,142 +1,142 @@
-// #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);
+        this.render();
+    }
+
+    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);
+}

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

@@ -1,40 +0,0 @@
-// #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.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());
-        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;