@brightspot/ui 3.0.1-cms-ui-migration.4 → 3.0.1

package/src/legacy/tool-ui/src/main/webapp/v4/rte/ProseMirror.less

@@ -1,759 +0,0 @@
-@import (reference) url('../Icon.less');
-@import (reference) url('../Text.less');
-@import (reference) url('../Label.less');
-
-.ProseMirror {
-  --ProseMirror-numLines: 10;
-
-  background: transparent;
-  box-sizing: border-box;
-  font-variant-ligatures: none;
-  min-height: calc(var(--ProseMirror-numLines) * var(--Text-height) + 22px);
-  padding: var(--gap-m);
-  position: relative;
-  white-space: pre-wrap;
-  width: 100%;
-  word-wrap: break-word;
-
-  .isPlaceholderContent & {
-    font-style: italic;
-    opacity: 0.5;
-  }
-
-  .is-active {
-    background-color: var(--color-dominant2);
-  }
-
-  .block {
-    display: block;
-  }
-
-  pre {
-    white-space: pre-wrap;
-  }
-
-  li {
-    position: relative;
-  }
-
-  .ProseMirror-hideselection {
-    caret-color: transparent;
-  }
-
-  .ProseMirror-collabCursor {
-    background-color: var(--color-green3);
-    border: var(--borderWidth-thin) solid var(--color-green3);
-    position: relative;
-    width: 2px;
-  }
-
-  .ProseMirror-collabCursor::after {
-    background-color: inherit;
-    color: var(--color-white);
-    content: attr(title);
-    font-size: var(--fontSize-xs);
-    left: -1px;
-    line-height: var(--fontSize-xs);
-    padding: calc(var(--gap-xs) - 1px);
-    position: absolute;
-    top: calc((var(--fontSize-xs) - 12%) * -1);
-    white-space: nowrap;
-  }
-
-  .dropZone {
-    background-color: var(--color-blue3);
-    height: 8px;
-    position: relative;
-
-    .info {
-      .Text.is-xs;
-
-      background-color: var(--color-white);
-      border: 2px solid var(--color-blue5);
-      box-shadow: var(--shadow-2);
-      color: var(--color-gray5);
-      cursor: pointer;
-      height: 32px;
-      left: 50%;
-      overflow: hidden;
-      padding: var(--gap-xs);
-      position: absolute;
-      text-overflow: ellipsis;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      white-space: nowrap;
-      width: 240px;
-      z-index: 1;
-    }
-
-    .dropZone-text {
-      display: inline-block;
-
-      &::after {
-        .Icon;
-
-        color: var(--color-black);
-        content: 'open_with';
-        left: 50%;
-        position: absolute;
-        top: 50%;
-        transform: translate(-50%, -50%);
-      }
-    }
-  }
-
-  /* Make sure li selections wrap around markers */
-
-  li.ProseMirror-selectednode {
-    outline: none;
-  }
-
-  .ProseMirror-textblock-dropdown {
-    min-width: 3em;
-  }
-
-  .ProseMirror-menu {
-    line-height: 1;
-    margin: 0 -4px;
-  }
-
-  .ProseMirror-tooltip .ProseMirror-menu {
-    white-space: pre;
-    width: fit-content;
-  }
-
-  .ProseMirror-menuitem {
-    display: inline-block;
-    margin-right: 3px;
-  }
-
-  .ProseMirror-menuseparator {
-    border-right: 1px solid #ddd;
-    margin-right: 3px;
-  }
-
-  .ProseMirror-menu-dropdown,
-  .ProseMirror-menu-dropdown-menu {
-    font-size: 90%;
-    white-space: nowrap;
-  }
-
-  .ProseMirror-menu-dropdown {
-    cursor: pointer;
-    padding-right: 15px;
-    position: relative;
-    vertical-align: 1px;
-  }
-
-  .ProseMirror-menu-dropdown-wrap {
-    display: inline-block;
-    padding: 1px 0 1px 4px;
-    position: relative;
-  }
-
-  .ProseMirror-menu-dropdown::after {
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top: 4px solid currentColor;
-    content: '';
-    opacity: 0.6;
-    position: absolute;
-    right: 4px;
-    top: calc(50% - 2px);
-  }
-
-  .ProseMirror-menu-dropdown-menu,
-  .ProseMirror-menu-submenu {
-    background: var(--color-white);
-    border: 1px solid #aaa;
-    color: #666;
-    padding: 2px;
-    position: absolute;
-  }
-
-  .ProseMirror-menu-dropdown-menu {
-    min-width: 6em;
-    z-index: 15;
-  }
-
-  .ProseMirror-menu-dropdown-item {
-    cursor: pointer;
-    padding: 2px 8px 2px 4px;
-  }
-
-  .ProseMirror-menu-dropdown-item:hover {
-    background: #f2f2f2;
-  }
-
-  .ProseMirror-menu-submenu-wrap {
-    margin-right: -4px;
-    position: relative;
-  }
-
-  .ProseMirror-menu-submenu-label::after {
-    border-bottom: 4px solid transparent;
-    border-left: 4px solid currentColor;
-    border-top: 4px solid transparent;
-    content: '';
-    opacity: 0.6;
-    position: absolute;
-    right: 4px;
-    top: calc(50% - 4px);
-  }
-
-  .ProseMirror-menu-submenu {
-    display: none;
-    left: 100%;
-    min-width: 4em;
-    top: -3px;
-  }
-
-  .ProseMirror-menu-active {
-    background: #eee;
-    border-radius: 4px;
-  }
-
-  .ProseMirror-menu-active {
-    background: #eee;
-    border-radius: 4px;
-  }
-
-  .ProseMirror-menu-disabled {
-    opacity: 0.3;
-  }
-
-  .ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu,
-  .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
-    display: block;
-  }
-
-  .ProseMirror-menubar {
-    background: var(--color-white);
-    border-bottom: 1px solid var(--color-gray4);
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-    box-sizing: border-box;
-    color: #666;
-    left: 0;
-    min-height: 1em;
-    overflow: visible;
-    padding: 1px 6px;
-    position: relative;
-    right: 0;
-    top: 0;
-    z-index: 10;
-  }
-
-  .ProseMirror-icon {
-    cursor: pointer;
-    display: inline-block;
-    line-height: 0.8;
-    padding: 2px 8px;
-    vertical-align: -2px; /* Compensate for padding */
-  }
-
-  .ProseMirror-menu-disabled.ProseMirror-icon {
-    cursor: default;
-  }
-
-  .ProseMirror-icon svg {
-    fill: currentColor;
-    height: 1em;
-  }
-
-  .ProseMirror-icon span {
-    vertical-align: text-top;
-  }
-
-  /* Add space around the hr to make clicking it easier */
-
-  .ProseMirror-example-setup-style hr {
-    border: none;
-    margin: 1em 0;
-    padding: 2px 10px;
-  }
-
-  .ProseMirror-example-setup-style hr::after {
-    background-color: var(--color-gray4);
-    content: '';
-    display: block;
-    height: 1px;
-    line-height: 2px;
-  }
-
-  sup {
-    vertical-align: super;
-  }
-
-  sub {
-    vertical-align: sub;
-  }
-
-  ul,
-  ol {
-    margin: var(--Text-height) 0 var(--Text-height) 30px;
-  }
-
-  blockquote {
-    border-left: 3px solid #eee;
-    margin-left: 0;
-    margin-right: 0;
-    padding-left: 1em;
-  }
-
-  .ProseMirror-example-setup-style img {
-    cursor: default;
-  }
-
-  .ProseMirror-prompt {
-    background: var(--color-white);
-    border: 1px solid var(--color-gray4);
-    border-radius: 3px;
-    box-shadow: -0.5px 2px 5px rgb(0 0 0 / 20%);
-    padding: 5px 10px 5px 15px;
-    position: fixed;
-    z-index: 11;
-  }
-
-  .ProseMirror-prompt h5 {
-    color: #444;
-    font-size: 100%;
-    font-weight: normal;
-    margin: 0;
-  }
-
-  .ProseMirror-prompt input[type='text'],
-  .ProseMirror-prompt textarea {
-    background: #eee;
-    border: none;
-    outline: none;
-  }
-
-  .ProseMirror-prompt input[type='text'] {
-    padding: 0 4px;
-  }
-
-  .ProseMirror-prompt-close {
-    background: transparent;
-    border: none;
-    color: #666;
-    left: 2px;
-    padding: 0;
-    position: absolute;
-    top: 1px;
-  }
-
-  .ProseMirror-prompt-close::after {
-    content: '✕';
-    font-size: 12px;
-  }
-
-  .ProseMirror-invalid {
-    background: #ffc;
-    border: 1px solid #cc7;
-    border-radius: 4px;
-    min-width: 10em;
-    padding: 5px 10px;
-    position: absolute;
-  }
-
-  .ProseMirror-prompt-buttons {
-    display: none;
-    margin-top: 5px;
-  }
-
-  #editor,
-  .editor {
-    background: var(--color-white);
-    background-clip: padding-box;
-    border: 2px solid rgb(0 0 0 / 20%);
-    border-radius: 4px;
-    color: var(--color-black);
-    margin-bottom: 23px;
-    padding: 5px 0;
-  }
-
-  b {
-    font-weight: bold;
-  }
-
-  u {
-    text-decoration: underline;
-  }
-
-  strike {
-    text-decoration: line-through;
-  }
-
-  .cms-textAlign-left {
-    text-align: left;
-  }
-
-  .cms-textAlign-center {
-    text-align: center;
-  }
-
-  .cms-textAlign-right {
-    text-align: right;
-  }
-
-  ul {
-    list-style-type: disc;
-  }
-
-  ul::before {
-    content: '';
-  }
-
-  /* stylelint-disable selector-type-no-unknown */
-  bsp-line,
-  bsp-break {
-    display: block;
-  }
-  /* stylelint-enable selector-type-no-unknown */
-
-  .ProseMirror ul::before {
-    content: '';
-  }
-
-  ul ul {
-    list-style-type: circle;
-  }
-
-  ul ul ul {
-    list-style-type: square;
-  }
-
-  ol {
-    list-style-type: decimal;
-  }
-
-  ol ol {
-    list-style-type: lower-alpha;
-  }
-
-  .rte2-style-align-center {
-    text-align: center;
-  }
-
-  .rte2-style-align-right {
-    text-align: right;
-  }
-
-  .rte2-style-bold {
-    font-weight: bold;
-  }
-
-  .rte2-style-italic {
-    font-style: italic;
-  }
-
-  .rte2-style-strikethrough {
-    text-decoration: line-through;
-  }
-
-  .rte2-style-ins-ai,
-  .rte2-style-ins-delete,
-  .rte2-style-ins-insert,
-  .rte2-style-track-delete,
-  .rte2-style-track-insert {
-    padding: 0;
-  }
-
-  .rte2-style-track-delete,
-  .rte2-style-ins-delete,
-  .rte2-style-ins-delete bsp-line,
-  .rte2-style-ins-delete > .Enhancement,
-  .rte2-style-track-delete > .Enhancement {
-    background: var(--color-red3);
-    color: var(--color-red6);
-    text-decoration: line-through;
-
-    &.is-selected {
-      filter: brightness(0.9);
-    }
-
-    & .ProsemirrorEnhancementMenu {
-      display: none;
-      pointer-events: none;
-    }
-  }
-
-  .rte2-style-ins-ai {
-    &.is-selected {
-      filter: brightness(0.9);
-    }
-  }
-
-  .rte2-style-track-insert,
-  .rte2-style-ins-insert,
-  .rte2-style-ins-insert bsp-line,
-  .rte2-style-track-insert .Enhancement,
-  .rte2-style-ins-insert .Enhancement {
-    background: var(--color-green3);
-
-    &.is-selected {
-      filter: brightness(0.9);
-    }
-  }
-
-  .rte2-style-underline {
-    text-decoration: underline;
-  }
-
-  .cms-custom {
-    display: inline;
-  }
-
-  .rte2-style-html {
-    background-color: var(--color-gray3);
-  }
-
-  &.ProseMirror-aiPreviewMode {
-    .rte2-style-ins-ai {
-      background-color: var(--color-purple3);
-    }
-  }
-
-  &.ProseMirror-aiInlinePreviewMode {
-    .rte2-style-ai-inline-highlight {
-      background-color: var(--color-blue1);
-    }
-
-    .rte2-style-ai-inline-ins {
-      background-color: var(--color-blue3);
-    }
-
-    .rte2-style-ai-inline-del {
-      text-decoration: line-through;
-    }
-  }
-
-  &.ProseMirror-previewMode {
-    .rte2-style-track-delete,
-    .rte2-style-ins-delete {
-      display: none;
-    }
-
-    .rte2-style-track-insert,
-    .rte2-style-ins-insert {
-      background-color: transparent;
-
-      .Enhancement {
-        background-color: transparent;
-      }
-    }
-  }
-
-  .rte2-style-subscript,
-  .rte2-style-superscript {
-    font-size: 14px;
-  }
-
-  .rte2-style-subscript {
-    vertical-align: sub;
-  }
-
-  .rte2-style-superscript {
-    vertical-align: super;
-  }
-
-  .rte2-style-brightspot-core-quote-QuoteRichTextElement {
-    position: relative;
-
-    .RichTextEditor-preview {
-      &::before {
-        .Icon;
-        .Icon.is-xl;
-
-        color: var(--color-gray4);
-        content: 'format_quote';
-        left: 0;
-        position: absolute;
-        top: 0;
-      }
-    }
-  }
-
-  .rte2-style-comment {
-    background: var(--color-gray2);
-
-    &.rte2-style-comment-start {
-      padding-left: var(--gap-s);
-
-      &::before {
-        .Icon;
-        .Icon.is-s;
-
-        content: 'comment';
-        margin-right: var(--gap-xs);
-      }
-    }
-
-    &.rte2-style-comment-end {
-      padding-right: var(--gap-s);
-    }
-
-    .collapsed {
-      display: none;
-    }
-  }
-
-  /* Make larger than "regular" text */
-  .rte2-style-brightspot-core-rte-heading-HeadingThree {
-    .Text.is-l;
-
-    font-weight: bold;
-  }
-
-  /* Make much larger than "regular" text */
-  .rte2-style-brightspot-core-rte-heading-HeadingTwo {
-    .Text.is-xl;
-
-    font-weight: bold;
-  }
-
-  .rte2-style-brightspot-core-carousel-CarouselRichTextElement,
-  .rte2-style-brightspot-core-image-ImageRichTextElement,
-  .rte2-style-brightspot-core-module-ModuleRichTextElement,
-  .rte2-style-brightspot-core-video-VideoRichTextElement,
-  .rte2-style-brightspot-core-playlist-PlaylistRichTextElement,
-  .rte2-style-brightspot-media-podcast-PodcastRichTextElement,
-  .rte2-style-com-psddev-cms-rte-ExternalContentRichTextElement,
-  .rte2-style-brightspot-core-quote-QuoteRichTextElement {
-    &::before {
-      .Icon;
-
-      margin-right: var(--gap-xs);
-    }
-  }
-
-  .rte2-style-brightspot-core-carousel-CarouselRichTextElement::before {
-    content: 'photo_library';
-  }
-
-  .rte2-style-brightspot-core-image-ImageRichTextElement::before {
-    content: 'photo';
-  }
-
-  .rte2-style-brightspot-core-module-ModuleRichTextElement::before {
-    content: 'view_module';
-  }
-
-  .rte2-style-brightspot-core-video-VideoRichTextElement::before {
-    content: 'ondemand_video';
-  }
-
-  .rte2-style-brightspot-core-playlist-PlaylistRichTextElement::before {
-    content: 'playlist_play';
-  }
-
-  .rte2-style-brightspot-media-podcast-PodcastRichTextElement::before {
-    content: 'music_note';
-  }
-
-  .rte2-style-brightspot-core-quote-QuoteRichTextElement::before {
-    content: 'format_quote';
-  }
-
-  .rte2-style-com-psddev-cms-rte-ExternalContentRichTextElement::before {
-    content: 'settings_ethernet';
-  }
-
-  .rte2-style-brightspot-facebook-rte-FacebookRichTextElement,
-  .rte2-style-brightspot-instagram-rte-InstagramRichTextElement,
-  .rte2-style-brightspot-twitter-rte-TweetRichTextElement {
-    padding-bottom: var(--gap-xs);
-
-    &::before {
-      .Label;
-
-      margin-right: var(--gap-xs);
-    }
-  }
-
-  .rte2-style-brightspot-facebook-rte-FacebookRichTextElement::before {
-    content: 'Facebook';
-  }
-
-  .rte2-style-brightspot-instagram-rte-InstagramRichTextElement::before {
-    content: 'Instagram';
-  }
-
-  .rte2-style-brightspot-twitter-rte-TweetRichTextElement::before {
-    content: 'Tweet';
-  }
-}
-
-.ProseMirror-gapcursor {
-  display: none;
-  pointer-events: none;
-  position: absolute;
-}
-
-.ProseMirror-gapcursor::after {
-  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
-  border-top: 1px solid var(--color-black);
-  content: '';
-  display: block;
-  height: 40px;
-  position: absolute;
-  top: 0;
-  width: 20px;
-}
-
-@keyframes ProseMirror-cursor-blink {
-  to {
-    visibility: hidden;
-  }
-}
-
-.ProseMirror-focused .ProseMirror-gapcursor {
-  display: block;
-}
-
-.CIG-row:only-child.is-unlabeled[data-field='richText'] {
-  width: 100%;
-}
-
-.ProseMirror-moveEnhancementOverlay {
-  background: rgb(var(--rgb-white) / 50%);
-  position: absolute;
-  z-index: 8;
-}
-
-.ProseMirror-moveEnhancementTarget {
-  .Icon.is-s;
-  .Text.is-s;
-
-  background: var(--color-dominant5);
-  color: var(--color-white);
-  cursor: pointer;
-  height: var(--lineHeight-m);
-  left: 0;
-  margin-top: calc(0px - var(--lineHeight-m));
-  padding: 0 var(--gap-m);
-  position: absolute;
-  right: 0;
-
-  &::before {
-    .Icon;
-
-    content: 'swap_vert';
-    margin-right: var(--gap-xs);
-    top: 0;
-  }
-
-  &.is-emptyLine,
-  &.is-cancel {
-    margin-top: 0;
-  }
-
-  &.is-last {
-    bottom: calc(0px - var(--lineHeight-m) - 1px + var(--gap-m));
-  }
-
-  &.is-cancel::before {
-    content: 'close';
-  }
-}