@byline/richtext-lexical 6.10.1 → 6.11.0

package/dist/field/extensions/inline-image/inline-image-node-component.css

@@ -1,241 +1,245 @@
-.LexicalEditor__inline-image {
-  cursor: default;
-  z-index: 1;
-  display: inline-block;
-  position: relative;
-}
-
-.LexicalEditor__inline-image img {
-  cursor: default;
-  max-width: 100%;
-}
-
-.LexicalEditor__inline-image.has-link img {
-  cursor: pointer;
-}
-
-.LexicalEditor__inline-image.has-link img.focused.draggable {
-  cursor: grab;
-}
-
-.LexicalEditor__inline-image img.focused {
-  outline: 2px solid #3c84f4;
-}
-
-.LexicalEditor__inline-image img.focused.draggable {
-  cursor: grab;
-}
-
-.LexicalEditor__inline-image img.focused.draggable:active {
-  cursor: grabbing;
-}
-
-.LexicalEditor__inline-image.position-full, .LexicalEditor__inline-image.position-default {
-  width: 100%;
-  margin: 1em 0;
-}
-
-.LexicalEditor__inline-image.position-full img, .LexicalEditor__inline-image.position-default img {
-  width: 100%;
-}
-
-.LexicalEditor__inline-image.position-left {
-  float: left;
-  width: 50%;
-  margin: .75rem 1.5rem .45rem 0;
-}
-
-.LexicalEditor__inline-image.position-right {
-  float: right;
-  width: 50%;
-  margin: .75rem .45rem .45rem 1.5rem;
-}
-
-.LexicalEditor__inline-image .image-edit-button {
-  color: #fff;
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-  background-color: #00000080;
-  border: 1px solid #ffffff4d;
-  border-radius: 5px;
-  min-width: 50px;
-  margin: 0 auto;
-  padding: 1px 4px;
-  font-size: .95rem;
-  display: block;
-  position: absolute;
-  top: 12px;
-  right: 12px;
-}
-
-.LexicalEditor__inline-image .image-edit-button:hover {
-  background-color: #3c84f480;
-}
-
-.LexicalEditor__inline-image .image-link-badge {
-  color: #fff;
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-  background-color: #00000080;
-  border: 1px solid #ffffff4d;
-  border-radius: 5px;
-  align-items: center;
-  gap: 4px;
-  max-width: calc(100% - 90px);
-  padding: 1px 6px;
-  font-size: .8rem;
-  display: flex;
-  position: absolute;
-  top: 12px;
-  left: 12px;
-}
-
-.LexicalEditor__inline-image .image-link-badge:hover {
-  background-color: #3c84f480;
-}
-
-.LexicalEditor__inline-image .image-link-badge__label {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.LexicalEditor__inline-image .InlineImageNode__caption_container {
-  color: #000;
-  background-color: #f4f4f4;
-  min-width: 100%;
-  font-size: .95rem;
-  display: block;
-  position: relative;
-  overflow: hidden;
-}
-
-.LexicalEditor__inline-image .InlineImageNode__caption_container .tree-view-output {
-  border-radius: 0;
-  margin: 0;
-}
-
-.LexicalEditor__inline-image .image-caption-button:hover {
-  background-color: #3c84f480;
-}
-
-.LexicalEditor__inline-image .image-resizer {
-  background-color: #3c84f4;
-  border: 1px solid #fff;
-  width: 7px;
-  height: 7px;
-  display: block;
-  position: absolute;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-n {
-  cursor: n-resize;
-  top: -6px;
-  left: 48%;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-ne {
-  cursor: ne-resize;
-  top: -6px;
-  right: -6px;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-e {
-  cursor: e-resize;
-  bottom: 48%;
-  right: -6px;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-se {
-  cursor: nwse-resize;
-  bottom: -2px;
-  right: -6px;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-s {
-  cursor: s-resize;
-  bottom: -2px;
-  left: 48%;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-sw {
-  cursor: sw-resize;
-  bottom: -2px;
-  left: -6px;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-w {
-  cursor: w-resize;
-  bottom: 48%;
-  left: -6px;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-nw {
-  cursor: nw-resize;
-  top: -6px;
-  left: -6px;
-}
-
-.InlineImageNode__container {
-  display: block;
-}
-
-.InlineImageNode__container.focused {
-  outline: 2px solid #3c84f4;
-}
-
-.InlineImageNode__contentEditable {
-  resize: none;
-  cursor: text;
-  caret-color: #050505;
-  -moz-tab-size: 1;
-  tab-size: 1;
-  -webkit-user-select: text;
-  user-select: text;
-  white-space: pre-wrap;
-  word-break: break-word;
-  border: 0;
-  outline: 0;
-  min-height: 20px;
-  padding: 10px;
-  font-size: 14px;
-  line-height: 1.4em;
-  display: block;
-  position: relative;
-}
-
-.InlineImageNode__contentEditable p {
-  margin-bottom: .25em;
-}
-
-.InlineImageNode__placeholder {
-  color: #888;
-  text-overflow: ellipsis;
-  top: 10px;
-  left: 10px;
-  right: unset;
-  -webkit-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  pointer-events: none;
-  font-size: 12px;
-  display: inline-block;
-  position: absolute;
-  overflow: hidden;
-}
-
-.dark .InlineImageNode__contentEditable {
-  color: #eee;
-  caret-color: auto;
-}
-
-.dark .LexicalEditor__inline-image .InlineImageNode__caption_container {
-  background-color: #222;
-}
-
-.dark .InlineImageNode__placeholder {
-  color: #888;
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities, byline-components.primitives;
+
+@layer byline-components.cms {
+  .LexicalEditor__inline-image {
+    cursor: default;
+    z-index: 1;
+    display: inline-block;
+    position: relative;
+  }
+
+  .LexicalEditor__inline-image img {
+    cursor: default;
+    max-width: 100%;
+  }
+
+  .LexicalEditor__inline-image.has-link img {
+    cursor: pointer;
+  }
+
+  .LexicalEditor__inline-image.has-link img.focused.draggable {
+    cursor: grab;
+  }
+
+  .LexicalEditor__inline-image img.focused {
+    outline: 2px solid #3c84f4;
+  }
+
+  .LexicalEditor__inline-image img.focused.draggable {
+    cursor: grab;
+  }
+
+  .LexicalEditor__inline-image img.focused.draggable:active {
+    cursor: grabbing;
+  }
+
+  .LexicalEditor__inline-image.position-full, .LexicalEditor__inline-image.position-default {
+    width: 100%;
+    margin: 1em 0;
+  }
+
+  .LexicalEditor__inline-image.position-full img, .LexicalEditor__inline-image.position-default img {
+    width: 100%;
+  }
+
+  .LexicalEditor__inline-image.position-left {
+    float: left;
+    width: 50%;
+    margin: .75rem 1.5rem .45rem 0;
+  }
+
+  .LexicalEditor__inline-image.position-right {
+    float: right;
+    width: 50%;
+    margin: .75rem .45rem .45rem 1.5rem;
+  }
+
+  .LexicalEditor__inline-image .image-edit-button {
+    color: #fff;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    background-color: #00000080;
+    border: 1px solid #ffffff4d;
+    border-radius: 5px;
+    min-width: 50px;
+    margin: 0 auto;
+    padding: 1px 4px;
+    font-size: .95rem;
+    display: block;
+    position: absolute;
+    top: 12px;
+    right: 12px;
+  }
+
+  .LexicalEditor__inline-image .image-edit-button:hover {
+    background-color: #3c84f480;
+  }
+
+  .LexicalEditor__inline-image .image-link-badge {
+    color: #fff;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    background-color: #00000080;
+    border: 1px solid #ffffff4d;
+    border-radius: 5px;
+    align-items: center;
+    gap: 4px;
+    max-width: calc(100% - 90px);
+    padding: 1px 6px;
+    font-size: .8rem;
+    display: flex;
+    position: absolute;
+    top: 12px;
+    left: 12px;
+  }
+
+  .LexicalEditor__inline-image .image-link-badge:hover {
+    background-color: #3c84f480;
+  }
+
+  .LexicalEditor__inline-image .image-link-badge__label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .LexicalEditor__inline-image .InlineImageNode__caption_container {
+    color: #000;
+    background-color: #f4f4f4;
+    min-width: 100%;
+    font-size: .95rem;
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .LexicalEditor__inline-image .InlineImageNode__caption_container .tree-view-output {
+    border-radius: 0;
+    margin: 0;
+  }
+
+  .LexicalEditor__inline-image .image-caption-button:hover {
+    background-color: #3c84f480;
+  }
+
+  .LexicalEditor__inline-image .image-resizer {
+    background-color: #3c84f4;
+    border: 1px solid #fff;
+    width: 7px;
+    height: 7px;
+    display: block;
+    position: absolute;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-n {
+    cursor: n-resize;
+    top: -6px;
+    left: 48%;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-ne {
+    cursor: ne-resize;
+    top: -6px;
+    right: -6px;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-e {
+    cursor: e-resize;
+    bottom: 48%;
+    right: -6px;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-se {
+    cursor: nwse-resize;
+    bottom: -2px;
+    right: -6px;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-s {
+    cursor: s-resize;
+    bottom: -2px;
+    left: 48%;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-sw {
+    cursor: sw-resize;
+    bottom: -2px;
+    left: -6px;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-w {
+    cursor: w-resize;
+    bottom: 48%;
+    left: -6px;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-nw {
+    cursor: nw-resize;
+    top: -6px;
+    left: -6px;
+  }
+
+  .InlineImageNode__container {
+    display: block;
+  }
+
+  .InlineImageNode__container.focused {
+    outline: 2px solid #3c84f4;
+  }
+
+  .InlineImageNode__contentEditable {
+    resize: none;
+    cursor: text;
+    caret-color: #050505;
+    -moz-tab-size: 1;
+    tab-size: 1;
+    -webkit-user-select: text;
+    user-select: text;
+    white-space: pre-wrap;
+    word-break: break-word;
+    border: 0;
+    outline: 0;
+    min-height: 20px;
+    padding: 10px;
+    font-size: 14px;
+    line-height: 1.4em;
+    display: block;
+    position: relative;
+  }
+
+  .InlineImageNode__contentEditable p {
+    margin-bottom: .25em;
+  }
+
+  .InlineImageNode__placeholder {
+    color: #888;
+    text-overflow: ellipsis;
+    top: 10px;
+    left: 10px;
+    right: unset;
+    -webkit-user-select: none;
+    user-select: none;
+    white-space: nowrap;
+    pointer-events: none;
+    font-size: 12px;
+    display: inline-block;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .dark .InlineImageNode__contentEditable {
+    color: #eee;
+    caret-color: auto;
+  }
+
+  .dark .LexicalEditor__inline-image .InlineImageNode__caption_container {
+    background-color: #222;
+  }
+
+  .dark .InlineImageNode__placeholder {
+    color: #888;
+  }
 }
 

package/dist/field/extensions/layout/insert-layout-modal.css

@@ -1,20 +1,24 @@
-.insert-layout-modal-container {
-  min-width: 340px;
-  max-width: 600px;
-}
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities, byline-components.primitives;
 
-.insert-layout-modal-select {
-  margin: 2rem 0 0;
-}
+@layer byline-components.cms {
+  .insert-layout-modal-container {
+    min-width: 340px;
+    max-width: 600px;
+  }
 
-@media screen and (min-width: 640px) {
   .insert-layout-modal-select {
-    width: 100%;
-    margin: 1rem 0 .5rem;
+    margin: 2rem 0 0;
   }
 
-  .insert-layout-modal-actions {
-    margin: 0;
+  @media screen and (min-width: 640px) {
+    .insert-layout-modal-select {
+      width: 100%;
+      margin: 1rem 0 .5rem;
+    }
+
+    .insert-layout-modal-actions {
+      margin: 0;
+    }
   }
 }