markdown-text-editor 0.1.5 → 0.2.0

package/src/plugins/markdown/editor.js

@@ -1,172 +0,0 @@
-// #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:ring-0",
-            "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",
-            "placeholder:text-stone-300",
-            "dark:placeholder:text-stone-700"
-        );
-        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 +0,0 @@
-// 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-full';
-        this.previewContainer.appendChild(this.previewContent);
-        container.appendChild(this.previewContainer);
-    }
-
-    getPreviewContent() {
-        return this.previewContent;
-    }
-}
-
-export default Preview;

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

@@ -1,21 +0,0 @@
-@import 'tailwindcss';
-
-@plugin '@tailwindcss/typography';
-
-/*
-  The default border color has changed to `currentColor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}

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

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