@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.1

package/src/legacy/tool-ui/src/MenuView.css

@@ -0,0 +1,659 @@
+.ProseMirrorToolbar {
+  @apply sticky top-0 z-[3] flex flex-col rounded-t-lg border-b bg-white transition contain-layout contain-style; /* Performance: using contain limits layout recalc scope */
+}
+
+.CIG[data-type$='RichTextBody'] {
+  --CIG-padding: 0;
+}
+
+.ProseMirrorToolbar {
+  --ProseMirrorToolbar-rightControls: 3.75rem;
+
+  &:has(+ .ProseMirror:focus) {
+    @apply border-primary-600;
+  }
+
+  &:has(.rte2-toolbar-find) {
+    --ProseMirrorToolbar-rightControls: 5.75rem;
+  }
+
+  > ul {
+    --ProseMirror-toolbar-h: calc(theme(spacing.4) + theme(lineHeight.6));
+
+    @apply relative inline-flex h-[var(--ProseMirror-toolbar-h)] w-full flex-wrap items-center gap-y-3 overflow-clip py-2 pr-[calc(var(--ProseMirrorToolbar-rightControls)+var(--ProseMirror-wordCount)+var(--iconSize-xs))] ps-3;
+
+    .rte2-toolbar-submenu-2,
+    .rte2-toolbar-separator,
+    .ProseMirrorToolbar-action
+      > a:where(
+        [data-icon],
+        .rte2-toolbar-noicon:not([class=' rte2-toolbar-noicon'])
+      ) {
+      @apply me-1;
+    }
+  }
+
+  /* Temp placeholder button */
+  .overflow-placeholder {
+    @apply w-[calc(theme(spacing.1)+theme(lineHeight.6))];
+  }
+
+  .rte2-toolbar-separator {
+    @apply h-6 w-0.5 bg-gray-100 last:hidden more-contrast:bg-gray-400;
+  }
+
+  /* SUBMENUS */
+  .rte2-toolbar-submenu-2 {
+    &:not([data-rte-toolbar-submenu='Format']) > button {
+      @apply btu-button-text-hidden;
+    }
+
+    &[data-rte-toolbar-submenu] > button {
+      @apply btu-button btu-button-fill-none btu-button-gray btu-button-xs gap-1 p-1 after:btu-icon after:btu-icon-chevron-down after:transition;
+    }
+
+    &.disabled > button {
+      @apply btu-button-disabled;
+    }
+
+    &.is-open > button {
+      @apply btu-button-pressed after:-rotate-180;
+    }
+
+    &.rte-overflow-btn {
+      @apply h-7;
+    }
+
+    &.rte-overflow-btn > button {
+      @apply z-[2] bg-transparent after:content-none hover:bg-gray-500/10;
+
+      &.is-active {
+        @apply bg-primary-500/10;
+      }
+    }
+
+    /* Make overflowed items inaccessible */
+    &.rte-overflow-btn
+      ~ li:not(
+        [data-rte-style='rte2-toolbar-fullscreen'],
+        [data-rte-style='rte2-toolbar-find'],
+        [data-rte-style='rte2-toolbar-ai-inline']
+      ) {
+      @apply pointer-events-none;
+
+      .is-htmlMode & {
+        @apply pointer-events-auto;
+      }
+    }
+
+    &[data-rte-toolbar-submenu='Align'] button {
+      @apply w-[3.25rem] before:btu-icon before:btu-icon-align-left;
+    }
+
+    &[data-rte-toolbar-submenu='Enhancements'] button {
+      @apply w-[3.25rem] before:btu-icon before:btu-icon-image;
+    }
+  }
+
+  :where(
+      [data-rte-toolbar-submenu='Style'],
+      [data-rte-toolbar-submenu='Align'],
+      [data-rte-toolbar-submenu='Enhancements']
+    ) {
+    .rte2-toolbar-submenu-2-heading {
+      @apply hidden;
+    }
+  }
+
+  li.rte2-toolbar-submenu-horizontal {
+    @apply hidden;
+  }
+
+  .CIG-wordCount {
+    @apply absolute end-3 top-1.5 z-10 opacity-100;
+
+    /* Override inline styles from JS */
+    @apply [--ProseMirror-wordCountSpacingWithOneIcon:52px] [--ProseMirror-wordCountSpacingWithThreeIcons:120px] [--ProseMirror-wordCountSpacingWithTwoIcons:85px];
+  }
+
+  /* actions pinned to right of toolbar */
+  [data-rte-style='rte2-toolbar-find'] {
+    @apply absolute right-11 z-[2] border-r;
+  }
+
+  [data-rte-style='rte2-toolbar-ai-inline'] {
+    @apply absolute right-2 z-[2] border-r;
+  }
+
+  &[data-sidebar-icon-count='2'] [data-rte-style='rte2-toolbar-ai-inline'] {
+    @apply right-11;
+  }
+
+  &[data-sidebar-icon-count='3'] [data-rte-style='rte2-toolbar-ai-inline'] {
+    @apply right-20;
+  }
+
+  [data-rte-style='rte2-toolbar-fullscreen'] {
+    @apply absolute right-2 z-[2];
+  }
+
+  /* track changes */
+  > ul > .ProseMirrorToolbar-action > a[data-icon] {
+    &.rte2-toolbar-track-changes {
+      @apply font-semibold;
+    }
+  }
+
+  .ProseMirrorToolbar-action > a[data-icon] {
+    &.rte2-toolbar-track-changes-accept,
+    &.rte2-toolbar-track-changes-accept-all {
+      @apply before:btu-icon-circle-check-big;
+    }
+
+    &.rte2-toolbar-track-changes-reject,
+    &.rte2-toolbar-track-changes-reject-all {
+      @apply before:btu-icon-circle-x;
+    }
+  }
+}
+
+/* Track changes submenu */
+.ProseMirrorToolbar-horizontalSubmenu > ul {
+  @apply flex flex-wrap gap-2 border-t p-1;
+
+  .ProseMirrorToolbar-action {
+    @apply last:flex last:before:me-2 last:before:h-7 last:before:w-px last:before:bg-gray-200;
+  }
+
+  .ProseMirrorToolbar-action a {
+    @apply btu-button-sm;
+
+    &[data-icon='toggle_on'] {
+      @apply font-normal before:btu-icon-toggle-right;
+    }
+  }
+}
+
+.is-htmlMode .ProseMirrorToolbar {
+  ul {
+    @apply after:invisible;
+  }
+
+  .ProseMirrorToolbar-horizontalSubmenu,
+  .ProseMirrorToolbar-action,
+  .rte2-toolbar-separator,
+  .rte2-toolbar-submenu-2 {
+    @apply hidden;
+  }
+
+  [data-rte-style='rte2-toolbar-togglemode'] {
+    @apply inline-block;
+  }
+}
+
+.rte2-toolbar-submenu-2-items.overflow-items {
+  @apply py-1;
+
+  .shortcut {
+    @apply hidden text-xs text-gray-500 md:block;
+  }
+
+  .separator {
+    @apply before:block before:h-px before:w-full before:bg-gray-200;
+  }
+
+  /* submenu headings */
+  li > ul {
+    @apply px-4 pb-1 pt-[13px] text-xs text-gray-500;
+
+    > li {
+      @apply -mx-4 first:mt-[9px];
+    }
+  }
+
+  /* padding around borders */
+  .ProseMirrorToolbar-action:has(+ li:not(.ProseMirrorToolbar-action)) {
+    @apply pb-1;
+  }
+
+  li:has(ul.overflow-submenu) + li.ProseMirrorToolbar-action,
+  li.separator + li.ProseMirrorToolbar-action {
+    @apply pt-1;
+  }
+
+  /* Add a border between items with submenus */
+  li:has(> ul.overflow-submenu):not(:has(+ .separator)),
+  li:has(+ li ul) {
+    @apply border-b;
+  }
+
+  .ProseMirrorToolbar-action > a {
+    @apply rounded-none;
+
+    &.rte2-toolbar-noicon {
+      @apply before:content-none;
+    }
+  }
+
+  .ProseMirrorToolbar-action.disabled {
+    @apply pointer-events-none text-gray-300 [&_a]:text-gray-300;
+  }
+}
+
+/* overflow cover */
+.ProseMirrorToolbar > ul {
+  @apply after:btu-icon after:btu-icon-ellipsis-vertical after:absolute after:left-1 after:right-0 after:z-[1] after:flex after:h-7 after:items-center after:bg-white after:transition;
+
+  &::after {
+    transform: translateX(var(--cover-offset-x, 100%));
+  }
+}
+
+.ProseMirrorToolbar {
+  .rte2-toolbar-submenu-2.rte-overflow-btn {
+    /* In RTL, hide overflowed items since the cover is disabled */
+    ~ li:not(
+        [data-rte-style='rte2-toolbar-fullscreen'],
+        [data-rte-style='rte2-toolbar-find'],
+        [data-rte-style='rte2-toolbar-ai-inline']
+      ) {
+      @apply rtl:invisible;
+
+      .is-htmlMode & {
+        @apply rtl:visible;
+      }
+    }
+
+    /* Since overflow cover is hidden now, we have to set button icon */
+    > button {
+      @apply rtl:before:btu-icon rtl:before:btu-icon-ellipsis-vertical;
+    }
+  }
+
+  /* Hide overflow cover in RTL */
+  > ul::after {
+    @apply rtl:hidden;
+  }
+}
+
+/* Avoids unusually tall action items in dropdown menus  */
+/* workaround for BSP-17127 */
+.ProseMirrorToolbar-action br {
+  @apply hidden;
+}
+.ProseMirrorToolbar-action > a[data-icon] {
+  @apply gap-x-2 before:btu-icon;
+}
+
+.ProseMirrorToolbar > ul >,
+.ProseMirrorToolbar-horizontalSubmenu {
+  .ProseMirrorToolbar-action > a[data-icon] {
+    @apply btu-button btu-button-fill-none btu-button-gray btu-button-xs;
+
+    &:not(.rte2-toolbar-track-changes):not(
+        [class*='rte2-toolbar-track-changes-']
+      ) {
+      @apply btu-button-text-hidden;
+    }
+  }
+}
+
+/* OPEN SUBMENUS */
+button + .rte2-toolbar-submenu-2-items {
+  @apply Dropdown min-w-min [--Page-headerBottom:var(--page-header-h)];
+
+  &.is-opening:not(.is-removing) {
+    @apply Dropdown-is-open;
+  }
+
+  li.ProseMirrorToolbar-action a {
+    @apply Dropdown-item flex justify-start rounded-none;
+  }
+}
+
+/* individual menu actions */
+.ProseMirrorToolbar > ul > .ProseMirrorToolbar-action.active > a[data-icon] {
+  @apply btu-button-pressed;
+}
+
+.ProseMirrorToolbar-action.disabled > a[data-icon] {
+  @apply btu-button-disabled;
+}
+
+/* Omit pseudo elements for items with no icon so they don't shift layout. */
+.ProseMirrorToolbar-action a[data-icon=''] {
+  @apply before:content-none;
+}
+
+/* TOOLBAR ICONS */
+.ProseMirrorToolbar-action > a[data-icon] {
+  &:where(.rte2-toolbar-bold, .rte2-toolbar-italic, .rte2-toolbar-underline) {
+    @apply before:font-extrabold;
+  }
+
+  &.rte2-toolbar-track-changes-show-final {
+    @apply font-medium;
+  }
+
+  /* overriding icons that had already been set in tailwind-plugin-icon.ts */
+  &[data-icon='photo'] {
+    @apply before:btu-icon-image;
+  }
+
+  &[data-icon='magic_button'] {
+    @apply before:btu-icon-sparkle;
+  }
+
+  /* highlight AI content icon */
+  &[data-icon='wand_stars'] {
+    @apply before:btu-icon-wand-sparkles;
+  }
+
+  /* Material to Lucide icon mappings from RichTextToolbarStyle */
+  &[data-icon='format_bold'] {
+    @apply before:btu-icon-bold;
+  }
+
+  &[data-icon='format_italic'] {
+    @apply before:btu-icon-italic;
+  }
+
+  &[data-icon='format_underlined'] {
+    @apply before:btu-icon-underline;
+  }
+
+  &[data-icon='format_strikethrough'] {
+    @apply before:btu-icon-strikethrough;
+  }
+
+  &[data-icon='vertical_align_top'] {
+    @apply before:btu-icon-superscript;
+  }
+
+  &[data-icon='vertical_align_bottom'] {
+    @apply before:btu-icon-subscript;
+  }
+
+  &[data-icon='link'] {
+    @apply before:btu-icon-link-2;
+  }
+
+  &[data-icon='code'] {
+    @apply before:btu-icon-code;
+  }
+
+  &[data-icon='format_list_bulleted'] {
+    @apply before:btu-icon-list;
+  }
+
+  &[data-icon='format_list_numbered'] {
+    @apply before:btu-icon-list-ordered;
+  }
+
+  &[data-icon='format_align_left'] {
+    @apply before:btu-icon-align-left;
+  }
+
+  &[data-icon='format_align_center'] {
+    @apply before:btu-icon-align-center;
+  }
+
+  &[data-icon='format_align_right'] {
+    @apply before:btu-icon-align-right;
+  }
+
+  &[data-icon='comment'] {
+    @apply before:btu-icon-message-circle-plus;
+  }
+
+  /* Material to Lucide icon mappings from RichTextToolbarAction */
+  &[data-icon='format_clear'] {
+    @apply before:btu-icon-remove-formatting;
+  }
+
+  &[data-icon='format_indent_increase'] {
+    @apply before:btu-icon-indent-increase;
+  }
+
+  &[data-icon='format_indent_decrease'] {
+    @apply before:btu-icon-indent-decrease;
+  }
+
+  &[data-icon='keyboard'] {
+    @apply before:btu-icon-keyboard;
+  }
+
+  &[data-icon='border_all'] {
+    @apply before:btu-icon-table-2;
+  }
+
+  &[data-icon='toggle_off'] {
+    @apply before:btu-icon-toggle-left;
+  }
+
+  &[data-icon='toggle_on'] {
+    @apply before:btu-icon-toggle-right;
+  }
+
+  &[data-icon='check_circle'] {
+    @apply before:btu-icon-circle-check-big;
+  }
+
+  &[data-icon='cancel'] {
+    @apply before:btu-icon-circle-x;
+  }
+
+  &[data-icon='close'] {
+    @apply before:btu-icon-x;
+  }
+
+  &[data-icon='comments_disabled'] {
+    @apply before:btu-icon-message-circle-x;
+  }
+
+  &[data-icon='search'] {
+    @apply before:btu-icon-search;
+  }
+
+  &[data-icon='fullscreen'] {
+    @apply before:btu-icon-maximize-2;
+  }
+
+  &[data-icon='undo'] {
+    @apply before:btu-icon-undo;
+  }
+
+  &[data-icon='redo'] {
+    @apply before:btu-icon-redo;
+  }
+
+  /* Material to Lucide icon mappings from RichTextElement files */
+  &[data-icon='music_note'] {
+    @apply before:btu-icon-radio;
+  }
+
+  &[data-icon='help'] {
+    @apply before:btu-icon-circle-help;
+  }
+
+  &[data-icon='chrome_reader_mode'] {
+    @apply before:btu-icon-table-properties;
+  }
+
+  &[data-icon='textsms'] {
+    @apply before:btu-icon-message-circle-more;
+  }
+
+  &[data-icon='post_add'] {
+    @apply before:btu-icon-clipboard-plus;
+  }
+
+  &[data-icon='short_text'] {
+    @apply before:btu-icon-text;
+  }
+
+  &[data-icon='settings_ethernet'] {
+    @apply before:btu-icon-chevrons-left-right-ellipsis;
+  }
+
+  &[data-icon='format_quote'] {
+    @apply before:btu-icon-quote;
+  }
+
+  &[data-icon='playlist_play'] {
+    @apply before:btu-icon-list-video;
+  }
+
+  &[data-icon='ondemand_video'] {
+    @apply before:btu-icon-video;
+  }
+
+  &[data-icon='widgets'] {
+    @apply before:btu-icon-blocks;
+  }
+
+  &[data-icon='photo_library'] {
+    @apply before:btu-icon-images;
+  }
+
+  /* Additional Material to Lucide icon mappings */
+  &[data-icon='assignment'] {
+    @apply before:btu-icon-clipboard-check;
+  }
+
+  &[data-icon='attachment'] {
+    @apply before:btu-icon-file;
+  }
+
+  &[data-icon='photo_camera'] {
+    @apply before:btu-icon-camera;
+  }
+
+  &[data-icon='subject'] {
+    @apply before:btu-icon-letter-text;
+  }
+
+  &[data-icon='volume_up'] {
+    @apply before:btu-icon-volume-2;
+  }
+
+  &[data-icon='slideshow'] {
+    @apply before:btu-icon-film;
+  }
+
+  &[data-icon='insert_photo'] {
+    @apply before:btu-icon-file-image;
+  }
+
+  &[data-icon='live_tv'] {
+    @apply before:btu-icon-tv-minimal-play;
+  }
+
+  &[data-icon='theaters'] {
+    @apply before:btu-icon-clapperboard;
+  }
+
+  &[data-icon='picture'] {
+    @apply before:btu-icon-image-up;
+  }
+
+  &[data-icon='rate_review'] {
+    @apply before:btu-icon-square-pen;
+  }
+
+  &[data-icon='import_contacts'] {
+    @apply before:btu-icon-book;
+  }
+
+  &[data-icon='toc'] {
+    @apply before:btu-icon-notebook-tabs;
+  }
+
+  &[data-icon='notes'] {
+    @apply before:btu-icon-notebook-text;
+  }
+
+  &[data-icon='play'] {
+    @apply before:btu-icon-square-play;
+  }
+
+  &[data-icon='assessment'] {
+    @apply before:btu-icon-file-chart-pie;
+  }
+
+  &[data-icon='person'] {
+    @apply before:btu-icon-user-pen;
+  }
+
+  &[data-icon='handshake'] {
+    @apply before:btu-icon-handshake;
+  }
+
+  &[data-icon='ballot'] {
+    @apply before:btu-icon-shield-question;
+  }
+
+  &[data-icon='class'] {
+    @apply before:btu-icon-book-type;
+  }
+
+  &[data-icon='description'] {
+    @apply before:btu-icon-file-text;
+  }
+
+  &[data-icon='menu_book'] {
+    @apply before:btu-icon-book-marked;
+  }
+
+  &[data-icon='question_answer'] {
+    @apply before:btu-icon-pencil-line;
+  }
+
+  &[data-icon='school'] {
+    @apply before:btu-icon-badge-info;
+  }
+
+  &[data-icon='auto_stories'] {
+    @apply before:btu-icon-book;
+  }
+
+  &[data-icon='view_compact'] {
+    @apply before:btu-icon-layout-panel-top;
+  }
+
+  &[data-icon='grid_on'] {
+    @apply before:btu-icon-file-spreadsheet;
+  }
+
+  &[data-icon='create_new_folder'] {
+    @apply before:btu-icon-boxes;
+  }
+
+  &[data-icon='feed'] {
+    @apply before:btu-icon-scroll-text;
+  }
+
+  &[data-icon='local_offer'] {
+    @apply before:btu-icon-tag;
+  }
+
+  &[data-icon='home'] {
+    @apply before:btu-icon-house;
+  }
+
+  &[data-icon='slow_motion_video'] {
+    @apply before:btu-icon-list-video;
+  }
+}
+
+.rte2-toolbar-noicon:not([class=' rte2-toolbar-noicon']) {
+  @apply btu-button btu-button-fill-none btu-button-gray btu-button-xs;
+}
+
+[data-rte-style='com-psddev-indesign-TextStyleRangeRichTextElement'],
+[data-rte-style='com-psddev-indesign-TextStyleRangeRichTextElement'],
+[data-rte-style='com-psddev-indesign-ReturnCharacterRichTextElement'],
+[data-rte-style='com-psddev-indesign-ReturnCharacterRichTextElement'],
+[data-rte-style='com-psddev-indesign-UnicodeRichTextElement'] {
+  @apply !hidden;
+}