@brightspot/ui 3.0.1 → 5.0.1

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

@@ -0,0 +1,29 @@
+.ProseMirrorContainer {
+  border: 1px solid var(--Input-borderColor);
+  margin-bottom: var(--gap-m);
+  opacity: 1;
+  position: relative;
+  transition: all 1s var(--ease-out);
+
+  &.hide {
+    opacity: 0;
+  }
+
+  &:hover {
+    border-color: var(--Input-focusColor);
+  }
+
+  &:focus-within {
+    border-color: var(--Input-focusColor);
+  }
+
+  .CodeMirror {
+    border-width: 0;
+  }
+}
+
+&.is-htmlMode {
+  .CIG-wordCount {
+    display: none;
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/ai_inline_manager/views/AIInline.less

@@ -0,0 +1,244 @@
+@import (reference) url('../../../../Dropdown.less');
+@import (reference) url('../../../../Icon.less');
+@import (reference) url('../../../../IconButton.less');
+
+// AI Inline Container
+.ProseMirrorAIInline-container {
+  background: var(--color-white);
+  border: 1px solid var(--color-gray3);
+  border-radius: var(--borderRadius-s);
+  box-shadow: var(--shadow-s);
+  left: 0;
+  order: 5;
+  overflow: hidden;
+  padding: var(--gap-s) var(--gap-s) 0;
+  position: relative;
+  right: 0;
+  z-index: var(--zIndex-dropdown);
+
+  &.collapsed,
+  &.is-loading,
+  &.has-suggestions {
+    display: none;
+  }
+
+  // Input Container
+  &-inputContainer {
+    align-items: center;
+    display: flex;
+    gap: var(--gap-s);
+    padding-bottom: var(--gap-s);
+
+    &-input {
+      border-radius: var(--fontSize-s);
+    }
+
+    &-submitButton {
+      .Icon;
+
+      background-color: var(--color-blue7);
+      border: none;
+      border-radius: var(--borderRadius-s);
+      color: var(--color-white);
+      cursor: pointer;
+      font-size: var(--Icon-size);
+
+      &::before {
+        content: 'send';
+      }
+
+      &.is-loading {
+        background-color: var(--color-red7);
+        color: var(--color-red3);
+
+        &::before {
+          content: 'stop_circle';
+        }
+      }
+    }
+  }
+
+  // Accept/Reject Container
+  &-acceptRejectContainer {
+    .Dropdown;
+
+    &:not([hidden]) {
+      .Dropdown.is-open;
+    }
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  // Actions Menu
+  &-actions {
+    display: flex;
+    flex-direction: column;
+
+    &-accept,
+    &-rejectAll,
+    &-tryAgain {
+      border: none;
+      margin: 0;
+      padding: 0;
+
+      &-icon {
+        .Icon;
+
+        margin-right: var(--gap-xs);
+      }
+
+      > button {
+        align-items: center;
+        all: unset;
+        border-radius: var(--borderRadius-s);
+        box-sizing: border-box;
+        cursor: pointer;
+        display: flex;
+        gap: var(--gap-xs);
+        padding: var(--gap-s) var(--gap-m);
+        text-align: left;
+        width: 100%;
+
+        &:hover {
+          background-color: var(--color-gray3);
+        }
+      }
+    }
+
+    &-accept-icon::before {
+      content: 'check_circle';
+    }
+
+    &-rejectAll-icon::before {
+      content: 'cancel';
+    }
+
+    &-tryAgain-icon::before {
+      content: 'refresh';
+    }
+  }
+
+  // Suggestion Item
+  &-suggestion-item {
+    background: none;
+    border: none;
+    color: var(--color-gray9);
+    cursor: pointer;
+    font-size: var(--fontSize-s);
+    padding: var(--spacing-s) var(--spacing-m);
+    text-align: left;
+    transition: background-color var(--transition-fast);
+
+    &:hover {
+      background-color: var(--color-gray3);
+    }
+  }
+
+  // Suggestions Dropdown
+  &-suggestions {
+    &-dropdown {
+      border-top: 1px solid var(--color-gray3);
+      margin-left: calc(-1 * var(--gap-s));
+      margin-right: calc(-1 * var(--gap-s));
+      margin-top: var(--gap-s);
+      width: calc(100% + 2 * var(--gap-s));
+
+      &[hidden] {
+        display: none;
+      }
+    }
+
+    &-list {
+      display: flex;
+      flex-direction: column;
+
+      &-item {
+        padding-left: var(--gap-m);
+
+        > button {
+          all: unset;
+          background: transparent;
+          box-sizing: border-box;
+          cursor: pointer;
+          display: block;
+          text-align: left;
+          width: 100%;
+
+          &:disabled,
+          &.is-disabled {
+            cursor: default;
+            opacity: 0.5;
+          }
+        }
+
+        &.is-empty {
+          cursor: default;
+          padding: var(--gap-s) var(--gap-m);
+          pointer-events: none;
+        }
+      }
+    }
+
+    &-title {
+      color: var(--color-gray5);
+      font-size: var(--fontSize-s);
+      margin: var(--gap-m) var(--gap-m) var(--gap-s);
+    }
+  }
+}
+
+// Loading Overlay
+.ProseMirrorAIInline-loadingOverlay {
+  background-color: var(--color-white);
+  border-top: 1px solid var(--color-gray3);
+  display: none;
+  flex-direction: column;
+  order: 5;
+  padding: var(--gap-s) var(--gap-s) 0;
+
+  &.is-loading {
+    display: flex;
+  }
+
+  &-prompt {
+    color: var(--color-gray5);
+    font-size: var(--fontSize-s);
+    margin: 0 0 var(--gap-s);
+  }
+
+  &-spinner {
+    display: flex;
+    padding: var(--gap-s) 0;
+
+    &-icon {
+      .Icon;
+
+      animation: spin 1s linear infinite;
+      height: var(--Icon-size);
+      margin-top: 0;
+      width: var(--Icon-size);
+
+      &::before {
+        content: 'refresh';
+      }
+    }
+
+    &-text {
+      color: var(--color-gray5);
+      font-size: var(--fontSize-s);
+      margin: 0 var(--gap-m) 0 var(--gap-xs);
+    }
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/collab_manager/views/AvatarView.less

@@ -0,0 +1,11 @@
+.ProseMirrorAvatarWrapper {
+  position: absolute;
+  right: 0;
+  top: calc(var(--gap-l) * -2);
+
+  .ToolUserAvatar {
+    border: 1px solid var(--color-white);
+    float: left;
+    margin-left: calc(var(--gap-m) * -1);
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/collab_manager/views/CollabEditing.less

@@ -0,0 +1,18 @@
+@import (reference) url('../../../../Text.less');
+
+.CollabEditing {
+  &-message {
+    margin-top: var(--gap-s);
+
+    &-isLocked {
+      .Text.is-s;
+
+      background-color: var(--color-yellow1);
+      border-left: var(--gap-m) solid var(--color-yellow6);
+      color: var(--color-yellow6);
+      display: block;
+      padding-left: var(--gap-m);
+      width: 100%;
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/custom_keyboard/CustomKeyboard.less

@@ -0,0 +1,21 @@
+.CustomKeyboard {
+  li {
+    display: inline-block;
+
+    button {
+      margin-bottom: var(--gap-s);
+      margin-right: var(--gap-s);
+      min-height: 24px;
+      min-width: 48px;
+      text-transform: none;
+
+      &:hover {
+        box-shadow: calc(var(--gap-s) / 2) calc(var(--gap-xs) / 2)
+          calc(var(--gap-xs) / 2) var(--color-gray4);
+        position: relative;
+        transform: scale(1.5);
+        z-index: 99;
+      }
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/enhancement_manager/views/Enhancement.less

@@ -0,0 +1,67 @@
+@import (reference) url('../../../../Reset.less');
+
+.Enhancement {
+  margin: var(--Text-height) 0;
+  position: relative;
+
+  &.readOnly {
+    .Icon.is-s;
+    .Text.is-s;
+
+    background: var(--color-gray1);
+    margin: var(--Text-height) calc(0px - var(--gap-m));
+    padding: var(--gap-m);
+
+    ::selection,
+    &.ProseMirror-selectednode {
+      color: var(--color-black);
+    }
+
+    &.ProseMirror-selectednode {
+      background: var(--color-dominant2);
+    }
+  }
+
+  &-initialBody {
+    display: block;
+    font-style: italic;
+  }
+
+  &.is-locked {
+    cursor: auto;
+  }
+
+  &.block {
+    display: block;
+  }
+
+  &.inPlay {
+    opacity: 0.2;
+  }
+
+  .rte2-block-preview {
+    .rte2-style-ins-delete & {
+      margin: 0;
+    }
+
+    .rte2-style-ins-insert & {
+      margin: 0;
+    }
+
+    .rte2-style-ins-ai & {
+      margin: 0;
+    }
+  }
+
+  .rte2-style-ins-delete & {
+    background: var(--color-red3);
+  }
+
+  .rte2-style-ins-insert & {
+    background: var(--color-green3);
+  }
+
+  .rte2-style-ins-ai & {
+    background: var(--color-blue3);
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/enhancement_manager/views/PreviewView.less

@@ -0,0 +1,45 @@
+@import (reference) url('../../../../Text.less');
+
+.Enhancement {
+  &.hasPreview {
+    ::selection {
+      background: transparent;
+    }
+  }
+
+  &.readOnly.ProseMirror-selectednode.block .Enhancement-preview {
+    background: var(--color-dominant2);
+  }
+
+  &:focus {
+    background-color: transparent;
+  }
+
+  &-preview {
+    .Text.is-m;
+
+    background: var(--color-gray1);
+    margin-left: calc(var(--gap-m) * -1);
+    margin-right: calc(var(--gap-m) * -1);
+    padding: var(--gap-s) var(--gap-m);
+
+    &-label {
+      font-style: italic;
+    }
+  }
+
+  &:not(.block) .Enhancement-preview {
+    background: transparent;
+  }
+
+  .rte2-block-preview {
+    margin-top: var(--gap-m);
+
+    img {
+      display: block;
+      height: auto;
+      max-height: 30vh;
+      max-width: 100%;
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/enhancement_manager/views/ProsemirrorEnhancementMenu.less

@@ -0,0 +1,113 @@
+@import (reference) url('../../../../Icon.less');
+@import (reference) url('../../../../IconButton.less');
+@import (reference) url('../../../../Reset.less');
+
+.ProsemirrorEnhancementMenuContainer {
+  display: none;
+  max-width: 50vw;
+  position: absolute;
+  z-index: 2;
+
+  @media (@mq-l) {
+    max-width: 31vw;
+  }
+
+  &.open {
+    display: block;
+  }
+}
+
+.ProsemirrorEnhancementMenu:not(:first-child) {
+  margin-top: var(--gap-xs);
+}
+
+.ProsemirrorEnhancementMenu {
+  margin-bottom: 0;
+
+  &.open {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &-container {
+    align-items: center;
+    background: var(--color-white);
+    box-shadow: var(--shadow-3);
+    display: flex;
+    font-size: var(--fontSize-s);
+    line-height: var(--lineHeight-s);
+    margin-bottom: 0;
+    position: relative;
+    white-space: nowrap;
+
+    --Text-height: var(--lineHeight-s);
+
+    &-link,
+    &-link-goto {
+      color: var(--Input-placeholderColor);
+      cursor: pointer;
+      line-height: 28px;
+    }
+
+    &-link,
+    &-link-goto {
+      margin-right: 10px;
+      text-decoration: underline;
+    }
+
+    &-link {
+      display: none;
+      max-width: 15vw;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      @media (@mq-l) {
+        display: inline-block;
+      }
+    }
+
+    &-link-goto {
+      margin-right: 10px;
+      text-decoration: underline;
+
+      @media (@mq-l) {
+        display: none;
+      }
+    }
+
+    &-label {
+      background: var(--color-dominant1);
+      font-weight: 700;
+      height: calc(var(--Icon-size) + 2 * var(--gap-s));
+      line-height: var(--Icon-size);
+      margin-right: 5px;
+      padding: var(--gap-s) var(--gap-m);
+    }
+
+    &-button {
+      .IconButton;
+
+      &::before {
+        content: attr(data-icon);
+      }
+
+      &.remove {
+        .IconButton.is-red;
+      }
+    }
+
+    &.is-block {
+      background: transparent;
+      box-shadow: none;
+      position: absolute;
+      right: calc(var(--gap-m) - var(--gap-s));
+      top: calc(var(--gap-m) - var(--gap-s));
+      z-index: 3;
+    }
+
+    .open & {
+      visibility: visible;
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/rte/plugins/find_replace_manager/views/ProseMirrorFindReplace.less

@@ -0,0 +1,174 @@
+@import (reference) url('../../../../IconButton.less');
+@import (reference) url('../../../../Icon.less');
+@import (reference) url('../../../../Reset.less');
+
+.ProseMirrorFindReplace {
+  &-found {
+    background-color: var(--color-yellow2);
+  }
+
+  &-found {
+    &.active {
+      background-color: var(--color-yellow4);
+    }
+  }
+
+  &-findContainer {
+    background-color: var(--color-gray1);
+    display: block;
+    margin-bottom: -1px;
+    order: 5;
+    padding: var(--gap-m);
+
+    &.collapsed {
+      display: none;
+    }
+
+    &-replaceContainer,
+    &-inputContainer {
+      align-items: center;
+      display: flex;
+    }
+
+    &-input,
+    &-replace-input {
+      background-color: var(--color-white);
+      border: none;
+      border-radius: var(--gap-l);
+      flex: 1 0 48%;
+      margin-right: var(--gap-m);
+      max-width: 48%;
+      padding-left: var(--gap-m);
+
+      &:focus {
+        background-color: var(--color-white);
+      }
+    }
+
+    &-more {
+      .Icon;
+
+      cursor: pointer;
+
+      [dir='rtl'] & {
+        left: 0;
+        right: auto;
+      }
+
+      &::before {
+        content: 'keyboard_arrow_down';
+      }
+
+      &.open {
+        &::before {
+          content: 'keyboard_arrow_up';
+        }
+      }
+    }
+
+    &-pagination {
+      flex: 1 0 0;
+      font-size: var(--fontSize-s);
+
+      [dir='rtl'] & {
+        left: 10%;
+        right: auto;
+      }
+
+      &-prev,
+      &-next {
+        .Icon;
+        .Link.is-black;
+
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        padding: unset;
+
+        &.disabled {
+          cursor: auto;
+          opacity: 0.3;
+          pointer-events: none;
+        }
+      }
+
+      &-prev::before {
+        content: 'keyboard_arrow_left';
+        margin-right: var(--gap-m);
+      }
+
+      &-next::before {
+        content: 'keyboard_arrow_right';
+        margin-left: var(--gap-m);
+      }
+    }
+
+    &-replaceContainer {
+      align-items: start;
+      display: flex;
+      flex-flow: column wrap;
+      height: auto;
+      max-height: 600px;
+      overflow: hidden;
+      transition: max-height 0.8s;
+
+      > * {
+        margin-top: var(--gap-m);
+      }
+
+      &.collapsed {
+        max-height: 0;
+      }
+    }
+
+    &-options {
+      flex: 1 0 30%;
+
+      label {
+        font-weight: 500;
+        margin-right: var(--gap-m);
+        white-space: nowrap;
+      }
+
+      input[type] {
+        margin-right: var(--gap-s);
+        vertical-align: bottom;
+      }
+    }
+
+    &-actions {
+      button {
+        &:first-child {
+          background-color: var(--Link-color);
+          color: var(--color-white);
+          margin-right: var(--gap-m);
+        }
+
+        &:disabled {
+          cursor: auto;
+          opacity: 0.3;
+          pointer-events: none;
+        }
+      }
+    }
+  }
+}
+
+@media (@mq-s) {
+  .ProseMirrorFindReplace-findContainer-replaceContainer {
+    align-items: center;
+    flex-direction: row;
+  }
+
+  .ProseMirrorFindReplace-findContainer-actions {
+    text-align: right;
+    width: 100%;
+  }
+}
+
+@media (@mq-m) {
+  .ProseMirrorFindReplace-findContainer-actions {
+    text-align: left;
+    width: auto;
+  }
+}