@byline/richtext-lexical 6.10.1 → 6.11.0

package/dist/field/ui/text-area.css

@@ -1,31 +1,35 @@
-.TextArea__wrapper {
-  flex-direction: column;
-  margin-bottom: 10px;
-  display: flex;
-}
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities, byline-components.primitives;
 
-.TextArea__label {
-  color: #666;
-  flex: 1;
-  margin-bottom: 4px;
-  display: flex;
-}
+@layer byline-components.cms {
+  .TextArea__wrapper {
+    flex-direction: column;
+    margin-bottom: 10px;
+    display: flex;
+  }
 
-.TextArea__input {
-  border: 1px solid #999;
-  border-radius: 1px;
-  min-width: 0;
-  padding: 7px 10px;
-  font-size: 16px;
-}
+  .TextArea__label {
+    color: #666;
+    flex: 1;
+    margin-bottom: 4px;
+    display: flex;
+  }
 
-:is(.dark, [data-theme="dark"]) .TextArea__label {
-  color: #ccc;
-}
+  .TextArea__input {
+    border: 1px solid #999;
+    border-radius: 1px;
+    min-width: 0;
+    padding: 7px 10px;
+    font-size: 16px;
+  }
+
+  :is(.dark, [data-theme="dark"]) .TextArea__label {
+    color: #ccc;
+  }
 
-:is(.dark, [data-theme="dark"]) .TextArea__input {
-  color: #eee;
-  background-color: #1c1c1c;
-  border: 1px solid #666;
+  :is(.dark, [data-theme="dark"]) .TextArea__input {
+    color: #eee;
+    background-color: #1c1c1c;
+    border: 1px solid #666;
+  }
 }
 

package/dist/richtext-field_module.css

@@ -1,21 +1,25 @@
-:is(.wrapper-Kp9TyN, .byline-field-richtext) {
-  flex: 1;
-  min-width: 0;
-  height: 100%;
-  display: flex;
-}
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities, byline-components.primitives;
 
-:is(.label-row-GTig6y, .byline-field-richtext-label) {
-  align-items: center;
-  margin-bottom: .25rem;
-  display: flex;
-}
+@layer byline-components.cms {
+  :is(.wrapper-Kp9TyN, .byline-field-richtext) {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    display: flex;
+  }
+
+  :is(.label-row-GTig6y, .byline-field-richtext-label) {
+    align-items: center;
+    margin-bottom: .25rem;
+    display: flex;
+  }
 
-:is(.body-dyCs_k, .byline-field-richtext-body) {
-  flex-direction: column;
-  flex: 1;
-  gap: .25rem;
-  min-width: 0;
-  display: flex;
+  :is(.body-dyCs_k, .byline-field-richtext-body) {
+    flex-direction: column;
+    flex: 1;
+    gap: .25rem;
+    min-width: 0;
+    display: flex;
+  }
 }
 

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "6.10.1",
+  "version": "6.11.0",
   "engines": {
     "node": ">=22.22.2"
   },
@@ -62,11 +62,11 @@
     }
   },
   "dependencies": {
-    "@byline/admin": "6.10.1",
-    "@byline/client": "6.10.1",
-    "@byline/core": "6.10.1",
-    "@byline/i18n": "6.10.1",
-    "@byline/ui": "6.10.1",
+    "@byline/admin": "6.11.0",
+    "@byline/client": "6.11.0",
+    "@byline/core": "6.11.0",
+    "@byline/i18n": "6.11.0",
+    "@byline/ui": "6.11.0",
     "@lexical/code": "0.52.0",
     "@lexical/code-prism": "0.52.0",
     "@lexical/extension": "0.52.0",

package/src/field/content-editable.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -6,24 +18,26 @@
  *
  *
  */
-.ContentEditable__root {
-  border: 0;
-  font-size: 1.1rem;
-  line-height: 1.5;
-  display: block;
-  position: relative;
-  tab-size: 1;
-  outline: 0;
-  padding: 8px 2px;
-}
+@layer byline-components.cms {
+  .ContentEditable__root {
+    border: 0;
+    font-size: 1.1rem;
+    line-height: 1.5;
+    display: block;
+    position: relative;
+    tab-size: 1;
+    outline: 0;
+    padding: 8px 2px;
+  }
 
-.ContentEditable__with_draggable_blocks {
-  padding: 8px 2px 40px 22px;
-}
+  .ContentEditable__with_draggable_blocks {
+    padding: 8px 2px 40px 22px;
+  }
 
-@media (max-width: 1025px) {
-  .ContentEditable__root {
-    padding-left: 2px;
-    padding-right: 2px;
+  @media (max-width: 1025px) {
+    .ContentEditable__root {
+      padding-left: 2px;
+      padding-right: 2px;
+    }
   }
 }

package/src/field/editor-component.css

@@ -1,52 +1,68 @@
-.lexicalRichTextEditor {
-  display: flex;
-  isolation: isolate;
-  width: 100%;
-  /* Flex container — keep it from being widened by its content (a wide
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+
+@layer byline-components.primitives, byline-components.cms;
+
+@layer byline-components.cms {
+  .lexicalRichTextEditor {
+    display: flex;
+    isolation: isolate;
+    width: 100%;
+    /* Flex container — keep it from being widened by its content (a wide
    * white-space:pre code block) past its allotted column width. */
-  min-width: 0;
-}
+    min-width: 0;
+  }
 
-.lexicalRichTextEditor--read-only {
-  .editor-shell::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--canvas-50);
-    opacity: 0.5;
-    z-index: 9;
+  .lexicalRichTextEditor--read-only {
+    .editor-shell::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: var(--canvas-50);
+      opacity: 0.5;
+      z-index: 9;
+    }
   }
-}
 
-.lexicalRichTextEditor__wrap {
-  width: 100%;
-  position: relative;
-  /* Flex item of .lexicalRichTextEditor — default min-width:auto would let
+  .lexicalRichTextEditor__wrap {
+    width: 100%;
+    position: relative;
+    /* Flex item of .lexicalRichTextEditor — default min-width:auto would let
    * the code block's intrinsic width grow this past 100%. */
-  min-width: 0;
-}
-
-.lexicalRichTextEditor.error {
-  .editor-shell::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: var(--red-700);
-    opacity: 1;
-    z-index: -1;
+    min-width: 0;
   }
-}
 
-.dark {
   .lexicalRichTextEditor.error {
     .editor-shell::after {
-      background: var(--red-700-dark);
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: var(--red-700);
+      opacity: 1;
+      z-index: -1;
+    }
+  }
+
+  .dark {
+    .lexicalRichTextEditor.error {
+      .editor-shell::after {
+        background: var(--red-700-dark);
+      }
     }
   }
 }