@byline/richtext-lexical 6.10.1 → 6.11.0

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

@@ -1,249 +1,265 @@
-.LexicalEditor__inline-image {
-  cursor: default;
-  display: inline-block;
-  position: relative;
-  z-index: 1;
-  /* user-select: none; */
-}
-
-.LexicalEditor__inline-image img {
-  max-width: 100%;
-  cursor: default;
-}
-
-/*
+@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 {
+  .LexicalEditor__inline-image {
+    cursor: default;
+    display: inline-block;
+    position: relative;
+    z-index: 1;
+    /* user-select: none; */
+  }
+
+  .LexicalEditor__inline-image img {
+    max-width: 100%;
+    cursor: default;
+  }
+
+  /*
  * A linked image gets the pointer cursor, which is honest because
  * cmd/ctrl-click opens the target (see the CLICK_COMMAND handler in
  * inline-image-node-component.tsx). A plain click still selects the node,
  * so the hover hint is paired with a real action rather than promising
  * navigation the editor never performs.
  */
-.LexicalEditor__inline-image.has-link img {
-  cursor: pointer;
-}
-
-/* Selection and dragging outrank the link hint. */
-.LexicalEditor__inline-image.has-link img.focused.draggable {
-  cursor: grab;
-}
-
-.LexicalEditor__inline-image img.focused {
-  outline: 2px solid rgb(60, 132, 244);
-  /* user-select: none; */
-}
-
-.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 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: 0.75rem 1.5rem 0.45rem 0;
-}
-
-.LexicalEditor__inline-image.position-right {
-  float: right;
-  width: 50%;
-  /* The illusion of a 0 right margin looks too far right, so set right to 0.45rem */
-  margin: 0.75rem 0.45rem 0.45rem 1.5rem;
-}
-
-.LexicalEditor__inline-image .image-edit-button {
-  display: block;
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  padding: 1px 4px;
-  margin: 0 auto;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 5px;
-  background-color: rgba(0, 0, 0, 0.5);
-  min-width: 50px;
-  font-size: 0.95rem;
-  color: #fff;
-  cursor: pointer;
-  user-select: none;
-}
-
-.LexicalEditor__inline-image .image-edit-button:hover {
-  background-color: rgba(60, 132, 244, 0.5);
-}
-
-.LexicalEditor__inline-image .image-link-badge {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  position: absolute;
-  top: 12px;
-  left: 12px;
-  max-width: calc(100% - 90px);
-  padding: 1px 6px;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 5px;
-  background-color: rgba(0, 0, 0, 0.5);
-  font-size: 0.8rem;
-  color: #fff;
-  cursor: pointer;
-  user-select: none;
-}
-
-.LexicalEditor__inline-image .image-link-badge:hover {
-  background-color: rgba(60, 132, 244, 0.5);
-}
-
-.LexicalEditor__inline-image .image-link-badge__label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.LexicalEditor__inline-image .InlineImageNode__caption_container {
-  display: block;
-  position: relative;
-  font-size: 0.95rem;
-  background-color: #f4f4f4;
-  min-width: 100%;
-  color: #000;
-  overflow: hidden;
-}
-
-.LexicalEditor__inline-image .InlineImageNode__caption_container .tree-view-output {
-  margin: 0;
-  border-radius: 0;
-}
-
-.LexicalEditor__inline-image .image-caption-button:hover {
-  background-color: rgba(60, 132, 244, 0.5);
-}
-
-.LexicalEditor__inline-image .image-resizer {
-  display: block;
-  width: 7px;
-  height: 7px;
-  position: absolute;
-  background-color: rgb(60, 132, 244);
-  border: 1px solid #fff;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-n {
-  top: -6px;
-  left: 48%;
-  cursor: n-resize;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-ne {
-  top: -6px;
-  right: -6px;
-  cursor: ne-resize;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-e {
-  bottom: 48%;
-  right: -6px;
-  cursor: e-resize;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-se {
-  bottom: -2px;
-  right: -6px;
-  cursor: nwse-resize;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-s {
-  bottom: -2px;
-  left: 48%;
-  cursor: s-resize;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-sw {
-  bottom: -2px;
-  left: -6px;
-  cursor: sw-resize;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-w {
-  bottom: 48%;
-  left: -6px;
-  cursor: w-resize;
-}
-
-.LexicalEditor__inline-image .image-resizer.image-resizer-nw {
-  top: -6px;
-  left: -6px;
-  cursor: nw-resize;
-}
-
-.InlineImageNode__container {
-  display: block;
-}
-
-.InlineImageNode__container.focused {
-  outline: 2px solid rgb(60, 132, 244);
-  /* user-select: none; */
-}
-
-.InlineImageNode__contentEditable {
-  min-height: 20px;
-  border: 0px;
-  resize: none;
-  cursor: text;
-  caret-color: rgb(5, 5, 5);
-  display: block;
-  position: relative;
-  tab-size: 1;
-  outline: 0px;
-  padding: 10px;
-  user-select: text;
-  font-size: 14px;
-  line-height: 1.4em;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.InlineImageNode__contentEditable p {
-  margin-bottom: 0.25em;
-}
-
-.InlineImageNode__placeholder {
-  font-size: 12px;
-  color: #888;
-  overflow: hidden;
-  position: absolute;
-  text-overflow: ellipsis;
-  top: 10px;
-  left: 10px;
-  right: unset;
-  user-select: none;
-  white-space: nowrap;
-  display: inline-block;
-  pointer-events: none;
-}
-
-.dark .InlineImageNode__contentEditable {
-  color: #eeeeee;
-  caret-color: auto;
-}
-
-.dark .LexicalEditor__inline-image .InlineImageNode__caption_container {
-  background-color: #222222;
-}
-
-.dark .InlineImageNode__placeholder {
-  color: #888;
+  .LexicalEditor__inline-image.has-link img {
+    cursor: pointer;
+  }
+
+  /* Selection and dragging outrank the link hint. */
+  .LexicalEditor__inline-image.has-link img.focused.draggable {
+    cursor: grab;
+  }
+
+  .LexicalEditor__inline-image img.focused {
+    outline: 2px solid rgb(60, 132, 244);
+    /* user-select: none; */
+  }
+
+  .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 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: 0.75rem 1.5rem 0.45rem 0;
+  }
+
+  .LexicalEditor__inline-image.position-right {
+    float: right;
+    width: 50%;
+    /* The illusion of a 0 right margin looks too far right, so set right to 0.45rem */
+    margin: 0.75rem 0.45rem 0.45rem 1.5rem;
+  }
+
+  .LexicalEditor__inline-image .image-edit-button {
+    display: block;
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    padding: 1px 4px;
+    margin: 0 auto;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 5px;
+    background-color: rgba(0, 0, 0, 0.5);
+    min-width: 50px;
+    font-size: 0.95rem;
+    color: #fff;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .LexicalEditor__inline-image .image-edit-button:hover {
+    background-color: rgba(60, 132, 244, 0.5);
+  }
+
+  .LexicalEditor__inline-image .image-link-badge {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    max-width: calc(100% - 90px);
+    padding: 1px 6px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 5px;
+    background-color: rgba(0, 0, 0, 0.5);
+    font-size: 0.8rem;
+    color: #fff;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .LexicalEditor__inline-image .image-link-badge:hover {
+    background-color: rgba(60, 132, 244, 0.5);
+  }
+
+  .LexicalEditor__inline-image .image-link-badge__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .LexicalEditor__inline-image .InlineImageNode__caption_container {
+    display: block;
+    position: relative;
+    font-size: 0.95rem;
+    background-color: #f4f4f4;
+    min-width: 100%;
+    color: #000;
+    overflow: hidden;
+  }
+
+  .LexicalEditor__inline-image .InlineImageNode__caption_container .tree-view-output {
+    margin: 0;
+    border-radius: 0;
+  }
+
+  .LexicalEditor__inline-image .image-caption-button:hover {
+    background-color: rgba(60, 132, 244, 0.5);
+  }
+
+  .LexicalEditor__inline-image .image-resizer {
+    display: block;
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    background-color: rgb(60, 132, 244);
+    border: 1px solid #fff;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-n {
+    top: -6px;
+    left: 48%;
+    cursor: n-resize;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-ne {
+    top: -6px;
+    right: -6px;
+    cursor: ne-resize;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-e {
+    bottom: 48%;
+    right: -6px;
+    cursor: e-resize;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-se {
+    bottom: -2px;
+    right: -6px;
+    cursor: nwse-resize;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-s {
+    bottom: -2px;
+    left: 48%;
+    cursor: s-resize;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-sw {
+    bottom: -2px;
+    left: -6px;
+    cursor: sw-resize;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-w {
+    bottom: 48%;
+    left: -6px;
+    cursor: w-resize;
+  }
+
+  .LexicalEditor__inline-image .image-resizer.image-resizer-nw {
+    top: -6px;
+    left: -6px;
+    cursor: nw-resize;
+  }
+
+  .InlineImageNode__container {
+    display: block;
+  }
+
+  .InlineImageNode__container.focused {
+    outline: 2px solid rgb(60, 132, 244);
+    /* user-select: none; */
+  }
+
+  .InlineImageNode__contentEditable {
+    min-height: 20px;
+    border: 0px;
+    resize: none;
+    cursor: text;
+    caret-color: rgb(5, 5, 5);
+    display: block;
+    position: relative;
+    tab-size: 1;
+    outline: 0px;
+    padding: 10px;
+    user-select: text;
+    font-size: 14px;
+    line-height: 1.4em;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .InlineImageNode__contentEditable p {
+    margin-bottom: 0.25em;
+  }
+
+  .InlineImageNode__placeholder {
+    font-size: 12px;
+    color: #888;
+    overflow: hidden;
+    position: absolute;
+    text-overflow: ellipsis;
+    top: 10px;
+    left: 10px;
+    right: unset;
+    user-select: none;
+    white-space: nowrap;
+    display: inline-block;
+    pointer-events: none;
+  }
+
+  .dark .InlineImageNode__contentEditable {
+    color: #eeeeee;
+    caret-color: auto;
+  }
+
+  .dark .LexicalEditor__inline-image .InlineImageNode__caption_container {
+    background-color: #222222;
+  }
+
+  .dark .InlineImageNode__placeholder {
+    color: #888;
+  }
 }

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

@@ -1,19 +1,35 @@
-.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;
 
-.insert-layout-modal-select {
-  margin: 2rem 0 0;
-}
+@layer byline-components.primitives, byline-components.cms;
+
+@layer byline-components.cms {
+  .insert-layout-modal-container {
+    min-width: 340px;
+    max-width: 600px;
+  }
 
-@media screen and (min-width: 640px) {
   .insert-layout-modal-select {
-    margin: 1rem 0 0.5rem;
-    width: 100%;
+    margin: 2rem 0 0;
   }
 
-  .insert-layout-modal-actions {
-    margin: 0;
+  @media screen and (min-width: 640px) {
+    .insert-layout-modal-select {
+      margin: 1rem 0 0.5rem;
+      width: 100%;
+    }
+
+    .insert-layout-modal-actions {
+      margin: 0;
+    }
   }
 }