adtec-core-package 3.0.0 → 3.0.1

package/src/components/editor-main/src/assets/styles/editor.less

@@ -0,0 +1,917 @@
+@import '../../assets/styles/_mixins.less';
+
+.umo-editor-content {
+  accent-color: var(--umo-primary-color);
+
+  &.show-line-number {
+    .umo-editor {
+      >*:not([data-line-number='false'], div) {
+        position: relative;
+
+        &::before {
+          position: absolute;
+          content: counter(title) '.';
+          counter-increment: title;
+          right: 100%;
+          margin-right: 20px;
+          color: var(--umo-content-line-number-color);
+          font-family: var(--umo-font-family);
+          font-size: 14px;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  &.format-painter {
+    cursor: url('../../assets/images/format-painter.svg'), text;
+  }
+
+  &:not(.show-bookmark) {
+    .umo-editor-bookmark {
+      display: none;
+    }
+  }
+
+  .umo-editor {
+    outline: none;
+    counter-reset: title;
+    color: var(--umo-content-text-color);
+    width: 100%;
+    padding: 0 var(--umo-page-margin-right) 0 var(--umo-page-margin-left);
+    box-sizing: border-box;
+    overflow-wrap: anywhere;
+    word-wrap: break-word;
+    white-space: break-spaces;
+    -webkit-font-variant-ligatures: none;
+    font-variant-ligatures: none;
+    font-feature-settings: 'liga' 0;
+    min-height: calc(var(--umo-page-height) - var(--umo-page-margin-top) - var(--umo-page-margin-bottom));
+    float: left;
+    font-family: var(--umo-font-family);
+    font-size: var(--umo-font-size);
+    font-display: swap;
+
+    >h1[data-placeholder],
+    h2[data-placeholder],
+    h3[data-placeholder],
+    h4[data-placeholder],
+    h5[data-placeholder],
+    h6[data-placeholder],
+    >h1+p[data-placeholder],
+    h2+p[data-placeholder],
+    h3+p[data-placeholder],
+    h4+p[data-placeholder],
+    h5+p[data-placeholder],
+    h6+p[data-placeholder] {
+
+      .tiptap-invisible-character,
+      .ProseMirror-separator,
+      .ProseMirror-trailingBreak {
+        display: none !important;
+      }
+
+      &::after {
+        color: var(--umo-content-placeholder-color);
+        content: attr(data-placeholder);
+        pointer-events: none;
+      }
+    }
+
+    >* {
+      position: relative;
+      z-index: 1;
+
+      +*:not(.umo-floating-node) {
+        margin-top: var(--umo-content-node-bottom);
+      }
+
+      &.umo-node-focused,
+      &.ProseMirror-selectednoderange {
+        @media screen {
+
+          &:not(.is-editor-empty,
+            hr,
+            table,
+            .tableWrapper,
+            .umo-page-break,
+            .umo-code-block,
+            .umo-node-footnotes,
+            .umo-node-details,
+            .umo-node-column-container,
+            .umo-node-column,
+            .umo-floating-node):before {
+            content: '';
+            display: block;
+            position: absolute;
+            left: -8px;
+            top: -5px;
+            right: -8px;
+            bottom: -5px;
+            border-radius: var(--umo-radius);
+            background: var(--umo-content-node-selected-background);
+            pointer-events: none;
+            z-index: -1;
+          }
+
+          &.umo-floating-node {
+            outline: solid 1px var(--umo-primary-color);
+            transform: translateY(calc(var(--umo-content-node-bottom) / 2 - 1px));
+
+            &>* {
+              transform: translateY(calc(-1 * (var(--umo-content-node-bottom) / 2 - 1px)));
+            }
+          }
+        }
+
+        &.umo-page-divider {
+          border-radius: var(--umo-radius);
+          background: var(--umo-content-node-selected-background);
+          margin-left: -8px;
+          margin-right: -8px;
+          padding-left: 8px;
+          padding-right: 8px;
+        }
+
+        &.umo-page-break {
+          background-color: var(--umo-primary-color);
+          color: var(--umo-primary-color);
+
+          &::after {
+            border-color: var(--umo-primary-color);
+          }
+        }
+
+        .umo-select-outline {
+          outline: solid 1px var(--umo-primary-color);
+        }
+      }
+    }
+  }
+
+  &.is-empty .is-editor-empty:not(.umo-node-view,
+    .tableWrapper,
+    .umo-column-block,
+    ul,
+    ol) {
+    &::after {
+      display: inline-block;
+      vertical-align: text-top;
+      line-height: 1;
+    }
+
+    &:first-child {
+      >*:not(table) {
+        display: none;
+      }
+
+      &::after {
+        color: var(--umo-content-placeholder-color);
+        content: attr(data-placeholder);
+        pointer-events: none;
+      }
+    }
+  }
+
+  @media screen {
+    &:not(.is-readonly) .umo-selection {
+      background-color: var(--umo-text-selection-background);
+    }
+
+    &.show-model .umo-selection {
+      background-color: var(--umo-text-selection-background);
+    }
+
+    ::selection {
+      background-color: var(--umo-text-selection-background);
+    }
+  }
+
+  a {
+    color: var(--umo-primary-color);
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+      text-decoration: underline;
+    }
+  }
+
+  code {
+    color: var(--umo-content-code-color);
+    background-color: var(--umo-content-code-background);
+    font-family: var(--umo-content-code-family);
+    border-radius: 3px;
+    padding: 0.1em 0.4em;
+    margin-left: 0.25em;
+    margin-right: 0.25em;
+  }
+
+  ul,
+  ol {
+    list-style-type: none;
+
+    li {
+      word-break: break-all;
+      list-style-type: none;
+      padding: 0.25em 0;
+
+      >p:before {
+        counter-increment: section;
+        display: inline;
+        margin-right: 0.5em;
+      }
+
+      ol,
+      ul {
+        margin-top: 0.25em;
+        padding-left: 1.6em;
+      }
+    }
+  }
+
+  ol {
+    counter-reset: section calc(attr(data-start number, 1) - 1);
+
+    &[data-type='decimal'] li>p:before {
+      content: counters(section, '.') '. ';
+    }
+
+    &[data-type='decimal-leading-zero'] li>p:before {
+      content: counters(section, '.', decimal-leading-zero) '.';
+    }
+
+    &[data-type='lower-roman'] li>p:before {
+      content: counters(section, '.', lower-roman) '.';
+    }
+
+    &[data-type='upper-roman'] li>p:before {
+      content: counters(section, '.', upper-roman) '.';
+    }
+
+    &[data-type='lower-latin'] li>p:before {
+      content: counters(section, '.', lower-latin) '.';
+    }
+
+    &[data-type='upper-latin'] li>p:before {
+      content: counters(section, '.', upper-latin) '.';
+    }
+
+    &[data-type='trad-chinese-informal'] li>p:before {
+      content: counters(section, '.', trad-chinese-informal) '.';
+    }
+
+    &[data-type='simp-chinese-formal'] li>p:before {
+      content: counters(section, '.', simp-chinese-formal) '.';
+    }
+  }
+
+  ul {
+    &[data-type='disc'] li>p:before {
+      content: '•';
+    }
+
+    &[data-type='circle'] li>p:before {
+      content: '◦';
+    }
+
+    &[data-type='square'] li>p:before {
+      content: '▪';
+    }
+  }
+
+  blockquote {
+    border-left: 3px solid var(--umo-primary-color);
+    padding: 0.5em 1em;
+    color: #777;
+    background-color: rgba(0, 0, 0, 0.03);
+    margin: 0;
+  }
+
+  table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+    page-break-inside: auto;
+    margin-left: auto;
+    margin-right: auto;
+
+    tr {
+      page-break-inside: avoid;
+      page-break-after: auto;
+    }
+
+    // thead {
+    //   display: table-header-group;
+    // }
+    td,
+    th {
+      min-width: 1em;
+      border: 1px solid var(--umo-content-table-border-color);
+      padding: 3px 5px;
+      vertical-align: middle;
+      box-sizing: border-box;
+      position: relative;
+
+      >* {
+        margin-bottom: 0;
+      }
+
+      &[align='left-top'] {
+        vertical-align: top;
+        text-align: left;
+      }
+
+      &[align='center-top'] {
+        vertical-align: top;
+        text-align: center;
+      }
+
+      &[align='right-top'] {
+        vertical-align: middle;
+        text-align: right;
+      }
+
+      &[align='justify-top'] {
+        vertical-align: middle;
+        text-align: justify;
+      }
+
+      &[align='left-middle'] {
+        vertical-align: middle;
+        text-align: left;
+      }
+
+      &[align='center-middle'] {
+        vertical-align: middle;
+        text-align: center;
+      }
+
+      &[align='right-middle'] {
+        vertical-align: middle;
+        text-align: right;
+      }
+
+      &[align='justify-middle'] {
+        vertical-align: middle;
+        text-align: justify;
+      }
+
+      &[align='left-bottom'] {
+        vertical-align: bottom;
+        text-align: left;
+      }
+
+      &[align='center-bottom'] {
+        vertical-align: middle;
+        text-align: center;
+      }
+
+      &[align='right-bottom'] {
+        vertical-align: bottom;
+        text-align: right;
+      }
+
+      &[align='justify-bottom'] {
+        vertical-align: bottom;
+        text-align: justify;
+      }
+    }
+
+    th {
+      font-weight: bold;
+      text-align: left;
+      background-color: var(--umo-content-table-thead-background);
+    }
+
+    .selectedCell:after {
+      z-index: 2;
+      position: absolute;
+      content: '';
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background: var(--umo-content-table-selected-background);
+      pointer-events: none;
+    }
+
+    .column-resize-handle {
+      position: absolute;
+      right: -1px;
+      top: 0;
+      bottom: -1px;
+      width: 3px;
+      background-color: var(--umo-primary-color);
+      pointer-events: none;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  .tableWrapper {
+    max-width: 100%;
+    overflow-x: auto;
+    .umo-scrollbar();
+  }
+
+  .resize-cursor {
+    cursor: col-resize;
+  }
+
+  .umo-task-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      display: flex;
+      margin: 0;
+      padding: 0;
+
+      &[data-checked='true'] {
+        p {
+          opacity: 0.5;
+          text-decoration: line-through;
+          margin: 0;
+
+          &:has([style]) {
+            text-decoration: inherit;
+          }
+
+          * {
+            text-decoration: line-through;
+          }
+        }
+
+        input[type='checkbox'] {
+          background-color: var(--umo-primary-color);
+          border: none;
+
+          &::after {
+            content: '';
+            width: 16px;
+            height: 16px;
+            background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMyA4TDYgMTFMMTMgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+') 0 1px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+
+      >label {
+        flex: 0 0 auto;
+        margin-right: 10px;
+        user-select: none;
+      }
+
+      >div {
+        flex: 1 1 auto;
+
+        p {
+          margin: 0;
+          padding: 0;
+        }
+      }
+    }
+
+    input[type='checkbox'] {
+      appearance: none;
+      cursor: pointer;
+      width: 16px;
+      height: 16px;
+      padding: 0.1em 0.4em;
+      opacity: 0.6;
+      border: 1px solid #999;
+      border-radius: 2px;
+      background-color: white;
+      position: relative;
+      color: #fff;
+      margin: 0.3em 0 0 0;
+
+      &:hover {
+        border-color: var(--umo-primary-color);
+      }
+    }
+  }
+
+  .umo-search-result {
+    background-color: var(--umo-content-search-result-background);
+
+    &-current {
+      background: var(--umo-content-search-result-current-background);
+    }
+  }
+
+  .umo-page-divider {
+    .umo-page-divider();
+  }
+
+  .umo-page-break {
+    display: block;
+    width: 100%;
+    height: 1px;
+    background: var(--umo-content-node-border);
+    break-before: page;
+    margin-top: 30px !important;
+    margin-bottom: 30px !important;
+    position: relative;
+
+    &::after {
+      content: attr(data-content);
+      font-size: 10px;
+      border: solid 1px var(--umo-content-node-border);
+      padding: 1px 8px;
+      border-radius: 2px;
+      background-color: #fff;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
+    @media print {
+      height: 0;
+      margin-top: 0;
+      margin-bottom: 0;
+      page-break-before: always;
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .umo-editor-bookmark {
+    color: hsl(0, 1%, 68%);
+
+    &::before {
+      content: '[';
+    }
+
+    &::after {
+      content: ']';
+    }
+
+    @media print {
+      display: none;
+    }
+  }
+
+  .umo-node-view {
+    display: flex;
+    position: relative;
+    max-height: 100%;
+    scroll-margin-top: 20px;
+    scroll-margin-bottom: 20px;
+
+    .umo-node-container {
+      max-height: 100%;
+    }
+
+    .umo-hover-shadow:hover {
+      box-shadow: var(--umo-shadow);
+    }
+  }
+
+  // 插件样式
+  .ProseMirror-gapcursor {
+    height: 24px;
+    display: flex;
+
+    &:after {
+      width: 16px;
+      height: 2px;
+      margin-top: 18px;
+      background-color: var(--umo-primary-color);
+    }
+  }
+
+  .umo-node-details {
+    display: flex;
+    gap: 6px;
+    border: 1px solid var(--umo-content-node-border);
+    border-radius: var(--umo-radius);
+    padding: 10px;
+    box-sizing: border-box;
+
+    &.umo-node-focused {
+      border-color: var(--umo-primary-color);
+    }
+
+    &-summary {
+      width: calc(100% - 15px);
+      font-weight: 600;
+      font-size: 14px;
+    }
+
+    &-content {
+      width: calc(100% - 15px);
+    }
+
+    >button {
+      align-items: center;
+      background: transparent;
+      border-radius: 4px;
+      display: flex;
+      font-size: 12px;
+      height: 24px;
+      width: 24px;
+      justify-content: center;
+      padding: 0;
+      appearance: none;
+      border: none;
+      color: #999;
+
+      &:hover {
+        color: var(--umo-primary-color);
+      }
+
+      &::before {
+        content: '\25B6';
+      }
+    }
+
+    &.is-open>button::before {
+      transform: rotate(90deg);
+    }
+
+    >div {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5em;
+      width: 100%;
+    }
+  }
+
+  .tiptap-invisible-character {
+    text-indent: 0;
+
+    &--break::before {
+      content: '↓';
+      color: var(--umo-content-invisible-break-color);
+    }
+
+    &--paragraph::before {
+      content: '↵';
+      color: var(--umo-content-invisible-break-color);
+    }
+
+    @media print {
+      display: none;
+    }
+  }
+
+  .tiptap-mathematics {
+    &-render {
+      overflow: hidden;
+
+      &[data-type='inline-math'] {
+        padding: 0 0.25em;
+      }
+
+      &[data-type='block-math'] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .block-math-inner {
+          padding: 0.5em;
+        }
+      }
+    }
+
+    &-render--editable[data-type='inline-math'] {
+      border-radius: 0.2em;
+      cursor: pointer;
+
+      &:hover {
+        outline: solid 1px var(--umo-primary-color) !important;
+      }
+    }
+
+    &.inline-math-error,
+    &.block-math-error {
+      color: var(--umo-error-color);
+      border: 1px solid var(--umo-error-color);
+      padding: 0.5em;
+      border-radius: 0.25em;
+    }
+  }
+
+  .umo-node-column {
+    position: relative;
+    border-radius: 5px;
+    min-width: 50px;
+    padding: 12px;
+    background-color: transparent;
+    transition: background-color 0.2s ease;
+    flex-grow: 1;
+
+    &.umo-node-focused {
+      background-color: var(--umo-content-table-selected-background) !important;
+    }
+
+    &-resize-cursor {
+      cursor: col-resize;
+    }
+
+    &-container {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      gap: 12px;
+      max-width: 100%;
+      box-sizing: border-box;
+      position: relative;
+      z-index: 10;
+
+      &:hover {
+        .umo-node-column {
+          background-color: var(--umo-content-node-selected-background);
+        }
+      }
+    }
+
+    > :not(div.grid-resize-handle):nth-child(1),
+    >div.grid-resize-handle+ :nth-child(2) {
+      margin-top: 0;
+    }
+
+    > :nth-last-child(1) {
+      margin-bottom: 0;
+    }
+
+    .grid-resize-handle {
+      position: absolute;
+      right: -7px;
+      top: -10px;
+      bottom: 0;
+      width: 2px;
+      z-index: 1;
+      background-color: var(--umo-primary-color);
+      cursor: col-resize;
+
+      &-circle-btn {
+        position: relative;
+        top: -5px;
+        left: -8px;
+        width: 14px;
+        height: 14px;
+        background-color: var(--umo-primary-color);
+        border: 2px solid var(--umo-page-background);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: auto;
+        cursor: pointer;
+        transition: transform 0.1s ease-in-out;
+
+        &:hover {
+          transform: scale(1.35);
+        }
+      }
+
+      &-icon {
+        position: relative;
+        width: 8px;
+        height: 8px;
+
+        &::before,
+        &::after {
+          content: '';
+          position: absolute;
+          background-color: var(--umo-page-background);
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+
+        &::before {
+          width: 8px;
+          height: 2px;
+        }
+
+        &::after {
+          width: 2px;
+          height: 8px;
+        }
+      }
+    }
+  }
+
+  .umo-node-footnotes {
+    margin-top: 100px !important;
+    padding: 15px 0 15px 1.5em;
+    position: relative;
+    z-index: 0;
+
+    li {
+      &::before {
+        content: counter(list-item) + '.';
+        position: absolute;
+        left: 0;
+        width: 2em;
+        text-align: left;
+      }
+    }
+
+    &:has(li) {
+      border-top: 1px solid black;
+    }
+  }
+
+  .umo-node-footnote-ref {
+    position: relative;
+
+    &::before {
+      content: attr(caption);
+      position: absolute;
+      width: max-content;
+      max-width: 360px;
+      z-index: 10;
+      left: 0;
+      top: 1.5em;
+      font-size: 12px;
+      color: var(--umo-text-color);
+      background-color: var(--umo-color-white);
+      padding: 10px 12px;
+      border: solid 1px var(--umo-border-color);
+      box-shadow: var(--umo-shadow);
+      border-radius: 3px;
+      display: none;
+    }
+
+    &[caption='']::before {
+      display: none !important;
+    }
+
+    &:hover {
+      opacity: 1;
+
+      &::before {
+        display: block;
+      }
+    }
+  }
+
+  h1 {
+    font-size: 2.5em;
+  }
+
+  h2 {
+    font-size: 2em;
+  }
+
+  h3 {
+    font-size: 1.5em;
+  }
+
+  h4 {
+    font-size: 1.25em;
+  }
+
+  h5 {
+    font-size: 1em;
+  }
+
+  h6 {
+    font-size: 0.85em;
+  }
+}
+
+:-webkit-any(article, aside, nav, section) {
+  .umo-editor {
+    h1 {
+      font-size: 2.5em;
+    }
+
+    h2 {
+      font-size: 2em;
+    }
+
+    h3 {
+      font-size: 1.5em;
+    }
+
+    h4 {
+      font-size: 1.25em;
+    }
+
+    h5 {
+      font-size: 1em;
+    }
+
+    h6 {
+      font-size: 0.85em;
+    }
+  }
+}