lexical: tailwind

Author: echarles

packages/lexical/package.json

@@ -96,7 +96,6 @@
     "@babel/preset-typescript": "^7.21.0",
     "@jupyterlab/builder": "^4.0.0",
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/postcss": "^4.1.11",
     "@tailwindcss/typography": "^0.5.16",
     "@types/codemirror": "^5.60.4",
     "@types/katex": "^0.14.0",
@@ -144,7 +143,7 @@
     "stylelint-config-standard": "^24.0.0",
     "stylelint-prettier": "^2.0.0",
     "svg-url-loader": "^7.1.1",
-    "tailwindcss": "^4.1.11",
+    "tailwindcss": "^3.4.17",
     "typedoc": "^0.28.2",
     "typescript": "^5.8.3",
     "url-loader": "^3.0.0",

packages/lexical/postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    '@tailwindcss/postcss': {},
+    tailwindcss: {},
     autoprefixer: {},
   },
 }

packages/lexical/src/components/Button.tsx

@@ -29,8 +29,8 @@ export const Button = ({
       disabled={disabled}
       className={joinClasses(
         'Button__root',
-        disabled && 'Button__disabled',
         small && 'Button__small',
+        disabled && 'Button__disabled',
         className,
       )}
       onClick={onClick}

packages/lexical/src/examples/index.tsx

@@ -4,6 +4,8 @@
  * MIT License
  */
 
+import "../../style/index.css";
+
 import { createRoot } from "react-dom/client";
 // import App from "./AppSimple";
 import App from "./AppNbformat";

packages/lexical/style/base.css

@@ -4,8 +4,6 @@
  * MIT License
  */
 
-@import url('lexical/index.css');
- 
 html {
   box-sizing: content-box !important;
 }

packages/lexical/style/index.css

@@ -4,5 +4,62 @@
  * MIT License
  */
 
-@import url('tailwind.css');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Import base styles */
 @import url('base.css');
+
+/* Import all lexical component styles */
+@import url('lexical/Button.css');
+@import url('lexical/CodeActionMenuPlugin.css');
+@import url('lexical/CommentEditorTheme.css');
+@import url('lexical/CommentPlugin.css');
+@import url('lexical/ContentEditable.css');
+@import url('lexical/Dialog.css');
+@import url('lexical/DraggableBlockPlugin.css');
+@import url('lexical/Editor.css');
+@import url('lexical/EquationEditor.css');
+@import url('lexical/FloatingTextFormatToolbarPlugin.css');
+@import url('lexical/ImageNode.css');
+@import url('lexical/Input.css');
+@import url('lexical/Jupyter.css');
+@import url('lexical/JupyterPlugin.css');
+@import url('lexical/KatexEquationAlterer.css');
+@import url('lexical/Modal.css');
+@import url('lexical/Placeholder.css');
+@import url('lexical/PrettierButton.css');
+@import url('lexical/Rich.css');
+@import url('lexical/TableOfContentsPlugin.css');
+@import url('lexical/Theme.css');
+@import url('lexical/ToolbarPlugin.css');
+
+/* Custom base styles */
+[contenteditable] {
+  outline: 0px solid transparent;
+}
+
+/* Custom component styles */
+@layer components {
+  /* Button styles */
+  .Button__root {
+    @apply py-2.5 px-4 border-0 bg-gray-200 rounded cursor-pointer text-sm;
+  }
+  
+  .Button__root:hover {
+    @apply bg-gray-300;
+  }
+  
+  .Button__small {
+    @apply py-1.5 px-2.5 text-xs;
+  }
+  
+  .Button__disabled {
+    @apply cursor-not-allowed;
+  }
+  
+  .Button__disabled:hover {
+    @apply bg-gray-200;
+  }
+}

packages/lexical/style/lexical/CommentEditorTheme.css

@@ -4,12 +4,6 @@
  * MIT License
  */
 
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
-
 .CommentEditorTheme__paragraph {
   margin: 0;
   position: 'relative';

packages/lexical/style/lexical/CommentPlugin.css

@@ -47,7 +47,7 @@ i.add-comment {
   height: 20px;
   width: 20px;
   vertical-align: -10px;
-  background-image: url(./images/icons/chat-left-text.svg);
+  background-image: url(./icons/chat-left-text.svg);
 }
 
 .CommentPlugin_CommentInputBox {
@@ -160,7 +160,7 @@ i.comments {
   height: 20px;
   width: 20px;
   vertical-align: -10px;
-  background-image: url(./images/icons/comments.svg);
+  background-image: url(./icons/comments.svg);
   opacity: 0.5;
   transition: opacity 0.2s linear;
 }
@@ -246,7 +246,7 @@ i.send {
   height: 20px;
   width: 20px;
   vertical-align: -10px;
-  background-image: url(./images/icons/send.svg);
+  background-image: url(./icons/send.svg);
   opacity: 0.5;
   transition: opacity 0.2s linear;
 }
@@ -433,6 +433,6 @@ i.send {
   height: 15px;
   width: 15px;
   vertical-align: -10px;
-  background-image: url(./images/icons/trash3.svg);
+  background-image: url(./icons/trash3.svg);
   transition: opacity 0.2s linear;
 }

packages/lexical/style/lexical/DraggableBlockPlugin.css

@@ -19,7 +19,7 @@
   width: 16px;
   height: 16px;
   opacity: 0.3;
-  background-image: url(./images/icons/draggable-block-menu.svg);
+  background-image: url(./icons/draggable-block-menu.svg);
 }
 
 .draggable-block-menu:active {