@crystallize/design-system 1.13.2 → 1.15.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.15.0
+
+### Minor Changes
+
+- af5e94e1: Added custom variables for rich text editor padding. This will enable easy override from the consumer.
+
+## 1.14.0
+
+### Minor Changes
+
+- 97f6c34: Clean up the visuals of the code block in rich text editor
+
 ## 1.13.2
 
 ### Patch Changes

package/dist/index.css

@@ -2145,58 +2145,66 @@ button {
 
 /* src/rich-text-editor/plugins/CodeActionMenuPlugin/index.css */
 .c-rte-code-action-menu-container {
-  height: 35.8px;
-  font-size: 10px;
-  color: rgba(0, 0, 0, 0.5);
+  height: 37px;
   position: absolute;
   display: flex;
   align-items: center;
   flex-direction: row;
   user-select: none;
+  border-radius: 0.375rem;
+  background-color: rgb(var(--c-color-gray-100-800) / 0.75);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(var(--c-color-gray-700-200) / var(--tw-text-opacity));
 }
 .c-rte-code-highlight-language {
   margin-right: 4px;
 }
 .c-rte-code-button {
+  border-radius: 0.125rem;
+  padding: 0.25rem;
   border: 1px solid transparent;
-  border-radius: 4px;
-  padding: 4px;
   background: none;
   cursor: pointer;
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  color: rgba(0, 0, 0, 0.5);
   text-transform: uppercase;
 }
 .c-rte-code-button:hover {
-  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-color: rgb(var(--c-color-gray-900-50) / 0.3);
   opacity: 0.9;
 }
 .c-rte-code-button:active {
-  background-color: rgba(223, 232, 250);
-  border: 1px solid rgba(0, 0, 0, 0.45);
+  border-color: rgb(var(--c-color-gray-900-50) / 0.5);
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-gray-50-900) / var(--tw-bg-opacity));
 }
 .c-rte-code-button__icon {
   height: 16px;
   width: 16px;
   opacity: 0.6;
   display: flex;
-  color: rgba(0, 0, 0, 0.5);
   background-size: contain;
+  color: rgb(var(--c-color-gray));
 }
 .c-rte-prettier-wrapper {
   position: relative;
 }
 .c-rte-code-error-tips {
-  padding: 5px;
-  border-radius: 4px;
-  color: #fff;
-  background: #222;
-  margin-top: 4px;
   position: absolute;
+  right: 0px;
   top: 26px;
-  right: 0;
+  margin-top: 0.5rem;
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-gray-200-700) / var(--tw-bg-opacity));
+  padding: 0.75rem;
+  --tw-text-opacity: 1;
+  color: rgb(var(--c-color-gray-900-50) / var(--tw-text-opacity));
 }
 
 /* src/rich-text-editor/plugins/DraggableBlockPlugin/index.css */
@@ -2250,11 +2258,12 @@ button {
   overflow: auto;
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
   padding-left: 1rem;
   padding-right: 0.5rem;
   vertical-align: middle;
+  padding-top: var(--c-rte-toolbar-pt, 0.25rem);
+  padding-left: var(--c-rte-toolbar-pl, 0.5rem);
+  padding-right: var(--c-rte-toolbar-pr, 0.5rem);
 }
 .c-rte-toolbar__inner {
   display: flex;
@@ -2511,23 +2520,7 @@ button {
   right: 2px;
   top: 2px;
 }
-.c-rich-text-editor .c-rte-contenteditable-root {
-  position: relative;
-  display: block;
-  border-width: 0px;
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-top: 0px !important;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  outline-width: 0px;
-  tab-size: 1;
-  padding-bottom: 8px;
-  min-height: calc(var(--c-rte-min-height) - 8px);
-}
-.c-rich-text-editor pre {
+.c-rich-text-editor [contenteditable] pre {
   line-height: 1.1;
   color: #fff;
   margin: 0;
@@ -2539,41 +2532,21 @@ button {
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
-.c-rich-text-editor pre::-webkit-scrollbar {
+.c-rich-text-editor [contenteditable] pre::-webkit-scrollbar {
   background: transparent;
   width: 10px;
 }
-.c-rich-text-editor pre::-webkit-scrollbar-thumb {
+.c-rich-text-editor [contenteditable] pre::-webkit-scrollbar-thumb {
   background: #999;
 }
-.c-rich-text-editor [role=separator] {
-  height: 1px;
-  --tw-bg-opacity: 1;
-  background-color: rgb(var(--c-color-gray-200-700) / var(--tw-bg-opacity));
-}
-.c-rich-text-editor .ltr {
-  text-align: left;
-}
-.c-rich-text-editor .rtl {
-  text-align: right;
-}
-.c-rich-text-editor button.item i {
-  opacity: 0.6;
-}
-.c-rich-text-editor button.item.dropdown-item-active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
-.c-rich-text-editor button.item.dropdown-item-active i {
-  opacity: 1;
-}
-.c-rich-text-editor hr {
+.c-rich-text-editor [contenteditable] hr {
   padding: 4px 0;
   border: 1px solid red;
   border: none;
   margin: 1em 0;
   cursor: pointer;
 }
-.c-rich-text-editor hr:after {
+.c-rich-text-editor [contenteditable] hr:after {
   content: "";
   display: block;
   height: 1px;
@@ -2582,10 +2555,24 @@ button {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
 }
-.c-rich-text-editor hr.selected {
+.c-rich-text-editor [contenteditable] hr.selected {
   outline: 2px solid rgb(60, 132, 244);
   user-select: none;
 }
+.c-rich-text-editor [role=separator] {
+  height: 1px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--c-color-gray-200-700) / var(--tw-bg-opacity));
+}
+.c-rich-text-editor .ltr {
+  text-align: left;
+}
+.c-rich-text-editor .rtl {
+  text-align: right;
+}
+.c-rich-text-editor button.item i {
+  opacity: 0.6;
+}
 .c-rich-text-editor .TableNode__contentEditable {
   min-height: 20px;
   border: 0px;
@@ -2643,6 +2630,26 @@ button {
     visibility: hidden;
   }
 }
+.c-rte-contenteditable-root {
+  position: relative;
+  display: block;
+  border-width: 0px;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-top: 0px !important;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  outline-width: 0px;
+  tab-size: 1;
+  padding-bottom: 8px;
+  min-height: calc(var(--c-rte-min-height) - 8px);
+  padding-top: var(--c-rte-content-pt, 0);
+  padding-left: var(--c-rte-content-pl, 1.5rem);
+  padding-right: var(--c-rte-content-pr, 1.5rem);
+  padding-bottom: var(--c-rte-content-pb, 8px);
+}
 
 /* src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.css */
 .c-rte-link-editor {

package/dist/index.js

@@ -4665,7 +4665,7 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
 
 // src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx
 var import_jsx_runtime86 = require("react/jsx-runtime");
-var CODE_PADDING = 8;
+var CODE_PADDING = 0;
 function CodeActionMenuContainer({ anchorElem }) {
   const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
   const [lang, setLang] = (0, import_react71.useState)("");

package/dist/index.mjs

@@ -4617,7 +4617,7 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
 
 // src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx
 import { Fragment as Fragment2, jsx as jsx86, jsxs as jsxs65 } from "react/jsx-runtime";
-var CODE_PADDING = 8;
+var CODE_PADDING = 0;
 function CodeActionMenuContainer({ anchorElem }) {
   const [editor] = useLexicalComposerContext();
   const [lang, setLang] = useState3("");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.13.2",
+  "version": "1.15.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -20,23 +20,23 @@
     }
   },
   "dependencies": {
-    "@lexical/clipboard": "0.9.0",
-    "@lexical/code": "0.9.0",
-    "@lexical/file": "0.9.0",
-    "@lexical/hashtag": "0.9.0",
-    "@lexical/html": "0.9.0",
-    "@lexical/link": "0.9.0",
-    "@lexical/list": "0.9.0",
-    "@lexical/mark": "0.9.0",
-    "@lexical/markdown": "0.9.0",
-    "@lexical/overflow": "0.9.0",
-    "@lexical/react": "0.9.0",
-    "@lexical/rich-text": "0.9.0",
-    "@lexical/selection": "0.9.0",
-    "@lexical/table": "0.9.0",
-    "@lexical/text": "0.9.0",
-    "@lexical/utils": "0.9.0",
-    "@lexical/yjs": "0.9.0",
+    "@lexical/clipboard": "0.10.0",
+    "@lexical/code": "0.10.0",
+    "@lexical/file": "0.10.0",
+    "@lexical/hashtag": "0.10.0",
+    "@lexical/html": "0.10.0",
+    "@lexical/link": "0.10.0",
+    "@lexical/list": "0.10.0",
+    "@lexical/mark": "0.10.0",
+    "@lexical/markdown": "0.10.0",
+    "@lexical/overflow": "0.10.0",
+    "@lexical/react": "0.10.0",
+    "@lexical/rich-text": "0.10.0",
+    "@lexical/selection": "0.10.0",
+    "@lexical/table": "0.10.0",
+    "@lexical/text": "0.10.0",
+    "@lexical/utils": "0.10.0",
+    "@lexical/yjs": "0.10.0",
     "@radix-ui/react-checkbox": "1.0.1",
     "@radix-ui/react-dialog": "1.0.2",
     "@radix-ui/react-dropdown-menu": "2.0.1",
@@ -46,7 +46,7 @@
     "@radix-ui/react-select": "1.1.2",
     "@radix-ui/react-slider": "^1.1.0",
     "class-variance-authority": "^0.4.0",
-    "lexical": "0.9.0",
+    "lexical": "0.10.0",
     "prettier": "2.8.4",
     "use-debounce": "8.0.4"
   },

package/src/rich-text-editor/plugins/CodeActionMenuPlugin/index.css

@@ -1,12 +1,12 @@
 .c-rte-code-action-menu-container {
-  height: 35.8px;
-  font-size: 10px;
-  color: rgba(0, 0, 0, 0.5);
+  height: 37px;
   position: absolute;
   display: flex;
   align-items: center;
   flex-direction: row;
   user-select: none;
+
+  @apply rounded-md bg-gray-100-800/75 px-3 text-xs text-gray-700-200;
 }
 
 .c-rte-code-highlight-language {
@@ -14,25 +14,21 @@
 }
 
 .c-rte-code-button {
+  @apply rounded-sm p-1;
   border: 1px solid transparent;
-  border-radius: 4px;
-  padding: 4px;
   background: none;
   cursor: pointer;
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  color: rgba(0, 0, 0, 0.5);
   text-transform: uppercase;
 
   &:hover {
-    border: 1px solid rgba(0, 0, 0, 0.3);
-    opacity: 0.9;
+    @apply border-gray-900-50/30 opacity-90;
   }
 
   &:active {
-    background-color: rgba(223, 232, 250);
-    border: 1px solid rgba(0, 0, 0, 0.45);
+    @apply border-gray-900-50/50 bg-gray-50-900;
   }
 
   &__icon {
@@ -40,8 +36,8 @@
     width: 16px;
     opacity: 0.6;
     display: flex;
-    color: rgba(0, 0, 0, 0.5);
     background-size: contain;
+    @apply text-gray;
   }
 }
 
@@ -50,12 +46,5 @@
 }
 
 .c-rte-code-error-tips {
-  padding: 5px;
-  border-radius: 4px;
-  color: #fff;
-  background: #222;
-  margin-top: 4px;
-  position: absolute;
-  top: 26px;
-  right: 0;
+  @apply absolute right-0 top-[26px] mt-2 rounded bg-gray-200-700 p-3 text-gray-900-50;
 }

package/src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx

@@ -16,7 +16,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { CopyButton } from './components/CopyButton';
 import { canBePrettier, PrettierButton } from './components/PrettierButton';
 
-const CODE_PADDING = 8;
+const CODE_PADDING = 0;
 
 interface Position {
   top: string;

package/src/rich-text-editor/plugins/ToolbarPlugin/index.css

@@ -1,5 +1,10 @@
 .c-rte-toolbar {
-  @apply flex h-12 w-full justify-between overflow-auto rounded-tl-md rounded-tr-md py-1 pl-4 pr-2 align-middle;
+  @apply flex h-12 w-full justify-between overflow-auto rounded-tl-md rounded-tr-md pl-4 pr-2 align-middle;
+
+  /* Allow for customization from the outside */
+  padding-top: var(--c-rte-toolbar-pt, 0.25rem);
+  padding-left: var(--c-rte-toolbar-pl, 0.5rem);
+  padding-right: var(--c-rte-toolbar-pr, 0.5rem);
 
   &__inner {
     @apply flex;

package/src/rich-text-editor/rich-text-editor.css

@@ -53,30 +53,47 @@
     top: 2px;
   }
 
-  .c-rte-contenteditable-root {
-    @apply relative block border-0 px-6 py-2 !pt-0 text-sm outline-0;
-    tab-size: 1;
-    padding-bottom: 8px;
-    min-height: calc(var(--c-rte-min-height) - 8px);
-  }
-
-  pre {
-    line-height: 1.1;
-    color: #fff;
-    margin: 0;
-    padding: 10px;
-    overflow: auto;
-    max-height: 180px;
-    @apply bg-purple-50-900 text-sm;
-  }
-
-  pre::-webkit-scrollbar {
-    background: transparent;
-    width: 10px;
-  }
+  [contenteditable] {
+    pre {
+      line-height: 1.1;
+      color: #fff;
+      margin: 0;
+      padding: 10px;
+      overflow: auto;
+      max-height: 180px;
+      @apply bg-purple-50-900 text-sm;
+
+      &::-webkit-scrollbar {
+        background: transparent;
+        width: 10px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #999;
+      }
+    }
 
-  pre::-webkit-scrollbar-thumb {
-    background: #999;
+    hr {
+      padding: 4px 0;
+      border: 1px solid red;
+      border: none;
+      margin: 1em 0;
+      cursor: pointer;
+
+      &:after {
+        content: '';
+        display: block;
+        height: 1px;
+        background-color: #ccc;
+        line-height: 1px;
+        @apply bg-purple-100-800;
+      }
+
+      &.selected {
+        outline: 2px solid rgb(60, 132, 244);
+        user-select: none;
+      }
+    }
   }
 
   [role='separator'] {
@@ -95,36 +112,6 @@
     opacity: 0.6;
   }
 
-  button.item.dropdown-item-active {
-    background-color: rgba(223, 232, 250, 0.3);
-  }
-
-  button.item.dropdown-item-active i {
-    opacity: 1;
-  }
-
-  hr {
-    padding: 4px 0;
-    border: 1px solid red;
-    border: none;
-    margin: 1em 0;
-    cursor: pointer;
-  }
-
-  hr:after {
-    content: '';
-    display: block;
-    height: 1px;
-    background-color: #ccc;
-    line-height: 1px;
-    @apply bg-purple-100-800;
-  }
-
-  hr.selected {
-    outline: 2px solid rgb(60, 132, 244);
-    user-select: none;
-  }
-
   .TableNode__contentEditable {
     min-height: 20px;
     border: 0px;
@@ -173,3 +160,16 @@
     }
   }
 }
+
+.c-rte-contenteditable-root {
+  @apply relative block border-0 px-6 py-2 !pt-0 text-sm outline-0;
+  tab-size: 1;
+  padding-bottom: 8px;
+  min-height: calc(var(--c-rte-min-height) - 8px);
+
+  /* Allow for customization from the outside */
+  padding-top: var(--c-rte-content-pt, 0);
+  padding-left: var(--c-rte-content-pl, 1.5rem);
+  padding-right: var(--c-rte-content-pr, 1.5rem);
+  padding-bottom: var(--c-rte-content-pb, 8px);
+}