markdown-text-editor 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-text-editor",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "A simple JavaScript Markdown editor plugin with real-time preview, and easy integration.",
   "main": "./dist/markdown-text-editor.js",
   "browser": "dist/markdown-text-editor.js",
@@ -27,8 +27,10 @@
     "markdown",
     "mde",
     "markdown js library",
+    "markdown js plugin",
     "editor",
     "markdown editor",
+    "Simple Markdown editor js plugin",
     "text editor",
     "markdown preview",
     "markdown syntax",
@@ -36,10 +38,17 @@
     "rich text editor",
     "wysiwyg",
     "markdown formatting",
+    "tailwindcss",
     "code editor",
     "editor plugin",
     "text formatting",
-    "markdown-text-editor"
+    "markdown-text-editor",
+    "Tailwind css markdown editor",
+    "Tailwind css markdown",
+    "WYSIWYG-style markdown editor",
+    "Simple Markdown",
+    "Responsive markdown js editor",
+    "RTL Support markdown editor"
   ],
   "author": "Nezanuha",
   "license": "MIT",
@@ -48,15 +57,14 @@
     "url": "https://github.com/nezanuha/markdown-text-editor/issues"
   },
   "dependencies": {
-    "@tailwindcss/typography": "~0.5.15",
-    "marked": "~15.0.4",
-    "tailwindcss": "~3.4.13"
+    "marked": "~15.0.7"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
-    "autoprefixer": "^10.4.20",
-    "babel-loader": "^9.2.1",
+    "@tailwindcss/postcss": "^4.0.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "babel-loader": "^10.0.0",
     "css-loader": "^7.1.2",
     "cssnano": "^7.0.6",
     "html-webpack-plugin": "^5.6.3",
@@ -65,6 +73,7 @@
     "postcss-loader": "^8.1.1",
     "rimraf": "^6.0.1",
     "style-loader": "^4.0.0",
+    "tailwindcss": "^4.0.9",
     "terser-webpack-plugin": "^5.3.11",
     "webpack": "^5.95.0",
     "webpack-cli": "^6.0.1",

package/src/plugins/markdown/Toolbar/MakeTool.js

@@ -13,7 +13,7 @@ class MakeTool {
         button.innerHTML = iconHtml;  // Pass icon HTML from child classes
         button.type = 'button';
         button.title = this.title;
-        button.className = `markdown-btn ${buttonClass}${buttonClass == 'preview-btn' ? ' sticky right-0 bg-stone-100 dark:bg-stone-900 ' : ' ' }p-2 hover:bg-stone-200 dark:hover:bg-stone-600 rounded duration-300 text-stone-900 dark:text-stone-100`;
+        button.className = `markdown-btn ${buttonClass}${buttonClass == 'preview-btn' ? ' sticky right-0 bg-stone-100 dark:bg-stone-900 ' : ' ' }p-2 hover:bg-stone-200 dark:hover:bg-stone-600 rounded-sm duration-300 text-stone-900 dark:text-stone-100`;
         button.addEventListener('click', () => this.applySyntax());  // Default to 'both', can change in child
         return button;
     }

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

@@ -34,7 +34,7 @@ class PreviewTool extends MakeTool {
         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]');
+        editorDiv.parentNode.classList.toggle('z-999');
     
         previewWrapper.classList.toggle('hidden');
 
@@ -43,7 +43,7 @@ class PreviewTool extends MakeTool {
             'md:grid',
             'md:grid-cols-2',
             'md:divide-x',
-            'rtl:md:divide-x-reverse',
+            'md:rtl:divide-x-reverse',
             'md:divide-stone-300',
             'dark:md:divide-stone-700'
         );
@@ -55,7 +55,7 @@ class PreviewTool extends MakeTool {
         );
         this.editor.render(); // Re-render content in the preview
 
-        editorDiv.querySelector(".textarea-wrapper").querySelector("textarea").classList.remove("!h-[90lvh]");
+        editorDiv.querySelector(".textarea-wrapper").querySelector("textarea").classList.remove("h-[90lvh]!");
         
         document.querySelector("body").classList.remove('overflow-hidden');
 
@@ -75,7 +75,7 @@ class PreviewTool extends MakeTool {
         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]');
+        editorDiv.parentNode.classList.toggle('z-999');
 
         previewWrapper.classList.toggle('hidden');
         // Remove grid layout and divide classes from the editor div
@@ -83,7 +83,7 @@ class PreviewTool extends MakeTool {
             'md:grid',
             'md:grid-cols-2',
             'md:divide-x',
-            'rtl:md:divide-x-reverse',
+            'md:rtl:divide-x-reverse',
             'md:divide-stone-300',
             'dark:md:divide-stone-700'
         );
@@ -93,7 +93,7 @@ class PreviewTool extends MakeTool {
             'hidden',
             'md:block'
         );
-        editorDiv.querySelector(".textarea-wrapper").querySelector("textarea").classList.add("!h-[90lvh]");
+        editorDiv.querySelector(".textarea-wrapper").querySelector("textarea").classList.add("h-[90lvh]!");
 
         document.querySelector("body").classList.add('overflow-hidden');
 

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-[90lvh] 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-full';
         this.previewContainer.appendChild(this.previewContent);
         container.appendChild(this.previewContainer);
     }

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

@@ -1,3 +1,21 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@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);
+  }
+}