@byline/richtext-lexical 6.10.0 → 6.11.0

package/src/field/ui/placeholder.css

@@ -1,3 +1,17 @@
+@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.
  *
@@ -7,27 +21,29 @@
  *
  */
 
-.Placeholder__root {
-  font-size: 15px;
-  color: #999;
-  overflow: hidden;
-  position: absolute;
-  text-overflow: ellipsis;
-  top: 8px;
-  left: 2px;
-  right: 0;
-  user-select: none;
-  white-space: nowrap;
-  display: inline-block;
-  pointer-events: none;
-}
+@layer byline-components.cms {
+  .Placeholder__root {
+    font-size: 15px;
+    color: #999;
+    overflow: hidden;
+    position: absolute;
+    text-overflow: ellipsis;
+    top: 8px;
+    left: 2px;
+    right: 0;
+    user-select: none;
+    white-space: nowrap;
+    display: inline-block;
+    pointer-events: none;
+  }
 
-.Placeholder__with_draggable_blocks {
-  left: 22px;
-}
+  .Placeholder__with_draggable_blocks {
+    left: 22px;
+  }
 
-@media (max-width: 1025px) {
-  .ContentEditable__root {
-    left: 2px;
+  @media (max-width: 1025px) {
+    .ContentEditable__root {
+      left: 2px;
+    }
   }
 }

package/src/field/ui/select.css

@@ -1,34 +1,50 @@
-select {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  background-color: transparent;
-  border: none;
-  padding: 0 1em 0 0;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  cursor: inherit;
-  line-height: inherit;
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
 
-  z-index: 1;
-  outline: none;
-}
+@layer byline-components.primitives, byline-components.cms;
 
-:root {
-  --select-border: #393939;
-  --select-focus: #101484;
-  --select-arrow: var(--select-border);
-}
+@layer byline-components.cms {
+  select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-color: transparent;
+    border: none;
+    padding: 0 1em 0 0;
+    margin: 0;
+    font-family: inherit;
+    font-size: inherit;
+    cursor: inherit;
+    line-height: inherit;
+
+    z-index: 1;
+    outline: none;
+  }
+
+  :root {
+    --select-border: #393939;
+    --select-focus: #101484;
+    --select-arrow: var(--select-border);
+  }
 
-.select {
-  min-width: 160px;
-  max-width: 290px;
-  border: 1px solid var(--select-border);
-  border-radius: 0.25em;
-  padding: 0.25em 0.5em;
-  font-size: 1rem;
-  cursor: pointer;
-  line-height: 1.4;
-  background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
+  .select {
+    min-width: 160px;
+    max-width: 290px;
+    border: 1px solid var(--select-border);
+    border-radius: 0.25em;
+    padding: 0.25em 0.5em;
+    font-size: 1rem;
+    cursor: pointer;
+    line-height: 1.4;
+    background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
+  }
 }

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

@@ -1,3 +1,17 @@
+@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.
  *
@@ -7,39 +21,41 @@
  *
  */
 
-.TextArea__wrapper {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 10px;
-}
-
-.TextArea__label {
-  display: flex;
-  flex: 1;
-  color: #666;
-  margin-bottom: 4px;
-}
-
-.TextArea__input {
-  border: 1px solid #999;
-  padding-top: 7px;
-  padding-bottom: 7px;
-  padding-left: 10px;
-  padding-right: 10px;
-  font-size: 16px;
-  border-radius: 1px;
-  min-width: 0;
-}
+@layer byline-components.cms {
+  .TextArea__wrapper {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+  }
 
-.dark,
-[data-theme="dark"] {
   .TextArea__label {
-    color: #ccc;
+    display: flex;
+    flex: 1;
+    color: #666;
+    margin-bottom: 4px;
   }
 
   .TextArea__input {
-    border: 1px solid #666;
-    background-color: #1c1c1c;
-    color: #eee;
+    border: 1px solid #999;
+    padding-top: 7px;
+    padding-bottom: 7px;
+    padding-left: 10px;
+    padding-right: 10px;
+    font-size: 16px;
+    border-radius: 1px;
+    min-width: 0;
+  }
+
+  .dark,
+  [data-theme="dark"] {
+    .TextArea__label {
+      color: #ccc;
+    }
+
+    .TextArea__input {
+      border: 1px solid #666;
+      background-color: #1c1c1c;
+      color: #eee;
+    }
   }
 }

package/src/lexical-editor.tsx

@@ -124,12 +124,14 @@ export function lexicalEditor(configure?: ConfigureFn): RichTextEditorComponent
       baked = configure(seed)
     }
 
+    // biome-ignore lint/correctness/noComponentHookFactories: resolved once per lexicalEditor() call at config time, not per render
     const Configured: RichTextEditorComponent = (props) => (
       <RichTextField {...props} editorConfig={baked} />
     )
     return { default: Configured as React.ComponentType<any> }
   })
 
+  // biome-ignore lint/correctness/noComponentHookFactories: lexicalEditor() runs once at config time and returns this stable component
   const ConfiguredEditor: RichTextEditorComponent = (props) => (
     <Suspense
       fallback={

package/src/richtext-field.module.css

@@ -1,3 +1,17 @@
+@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;
+
 /**
  * RichTextField — Lexical rich text editor field.
  *
@@ -7,31 +21,33 @@
  *   .byline-field-richtext-body   — vertical stack containing editor + error
  */
 
-.wrapper,
-:global(.byline-field-richtext) {
-  display: flex;
-  flex: 1 1 0%;
-  height: 100%;
-  /* Allow shrinking below content min-content so a wide (white-space:pre)
+@layer byline-components.cms {
+  .wrapper,
+  :global(.byline-field-richtext) {
+    display: flex;
+    flex: 1 1 0%;
+    height: 100%;
+    /* Allow shrinking below content min-content so a wide (white-space:pre)
    * code block inside the editor scrolls internally instead of stretching
    * this field — and the form column — across the sidebar. */
-  min-width: 0;
-}
+    min-width: 0;
+  }
 
-.label-row,
-:global(.byline-field-richtext-label) {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.25rem;
-}
+  .label-row,
+  :global(.byline-field-richtext-label) {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.25rem;
+  }
 
-.body,
-:global(.byline-field-richtext-body) {
-  display: flex;
-  flex: 1 1 0%;
-  flex-direction: column;
-  gap: 0.25rem;
-  /* Same rationale as .wrapper — keep the editor body from growing to the
+  .body,
+  :global(.byline-field-richtext-body) {
+    display: flex;
+    flex: 1 1 0%;
+    flex-direction: column;
+    gap: 0.25rem;
+    /* Same rationale as .wrapper — keep the editor body from growing to the
    * code block's intrinsic width. */
-  min-width: 0;
+    min-width: 0;
+  }
 }