markdown-text-editor 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markdown-text-editor",
-  "version": "0.1.4",
+  "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",
@@ -38,6 +38,7 @@
     "rich text editor",
     "wysiwyg",
     "markdown formatting",
+    "tailwindcss",
     "code editor",
     "editor plugin",
     "text formatting",
@@ -61,9 +62,9 @@
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
+    "@tailwindcss/postcss": "^4.0.9",
     "@tailwindcss/typography": "^0.5.15",
-    "autoprefixer": "^10.4.20",
-    "babel-loader": "^9.2.1",
+    "babel-loader": "^10.0.0",
     "css-loader": "^7.1.2",
     "cssnano": "^7.0.6",
     "html-webpack-plugin": "^5.6.3",
@@ -72,7 +73,7 @@
     "postcss-loader": "^8.1.1",
     "rimraf": "^6.0.1",
     "style-loader": "^4.0.0",
-    "tailwindcss": "^3.4.17",
+    "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/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);
+  }
+}