markdown-text-editor 0.0.21-beta.2 → 0.0.23-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-text-editor",
-  "version": "0.0.21-beta.2",
+  "version": "0.0.23-beta.3",
   "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.js",
   "browser": "dist/markdown-text-editor.js",
@@ -14,10 +14,10 @@
     "url": "https://github.com/nezanuha/markdown-text-editor"
   },
   "scripts": {
-    "clean": "rm -rf dist",
+    "clean": "rimraf dist",
     "build": "npm run clean && webpack --mode=production",
     "prepublishOnly": "npm run build",
-    "dev": "webpack --watch --mode=development"
+    "dev": "webpack serve --mode=development"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -51,13 +51,15 @@
     "autoprefixer": "^10.4.20",
     "babel-loader": "^9.2.1",
     "css-loader": "^7.1.2",
+    "html-webpack-plugin": "^5.6.3",
     "mini-css-extract-plugin": "^2.9.1",
     "postcss": "^8.4.47",
     "postcss-loader": "^8.1.1",
+    "rimraf": "^6.0.1",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.11",
     "webpack": "^5.95.0",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.1.0"
+    "webpack-dev-server": "^5.2.0"
   }
 }

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

@@ -11,6 +11,7 @@ class MarkdownTool {
     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;

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

@@ -36,6 +36,7 @@ class PreviewTool extends MarkdownTool {
         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');
 
@@ -44,16 +45,19 @@ class PreviewTool extends MarkdownTool {
             '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-lvh',
+            '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');
     }
@@ -67,6 +71,7 @@ class PreviewTool extends MarkdownTool {
         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
@@ -74,16 +79,17 @@ class PreviewTool extends MarkdownTool {
             '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-lvh',
+            'h-[90lvh]',
             'hidden',
             'md:block'
         );
-        // editorDiv.closest(".textarea-wrapper>textarea").classList.add("h-lvh");
+        editorDiv.querySelector(".textarea-wrapper").querySelector("textarea").classList.add("!h-[90lvh]");
 
         document.querySelector("body").classList.add('overflow-hidden');
     }

package/src/plugins/markdown/editor.js

@@ -36,6 +36,8 @@ class MarkdownEditor {
 
     applyDefaultAttributes() {
         this.usertextarea.classList.add(
+            "focus:outline-0",
+            "border-0",
             "p-1.5",
             "max-w-full",
             "size-full",

package/src/plugins/markdown/preview.js

@@ -4,7 +4,7 @@ class Preview {
         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.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);
     }