@opentiny/fluent-editor 4.0.0-alpha.7 → 4.0.0-alpha.8

package/src/assets/ai.scss

@@ -0,0 +1,451 @@
+.ql-ai-icon-box {
+  position: relative;
+
+  &:hover {
+    .ql-ai-icon-bubble {
+      display: block;
+    }
+  }
+
+  .ql-ai-icon-bubble {
+    display: none;
+    width: 216px;
+    height: 52px;
+    border-radius: 12px;
+    position: absolute;
+    top: 28px;
+    left: -26px;
+    z-index: 1000;
+  }
+
+  .ql-ai-icon-bubble-box {
+    margin-top: 8px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 44px;
+
+    .ql-ai-icon-bubble-text {
+      z-index: 1000;
+      font-size: 14px;
+      line-height: 21px;
+      color: #191919;
+    }
+
+    svg {
+      position: absolute;
+    }
+
+    .bubble-arrow-icon {
+      z-index: 1000;
+      left: 16px;
+      top: -8px;
+      width: 28px;
+      height: 9px;
+    }
+
+    .bubble-rect-icon {
+      top: 0;
+      width: 216px;
+      height: 44px;
+      z-index: 999;
+    }
+  }
+}
+
+.ql-ai-dialog {
+  position: absolute;
+  left: 15px;
+}
+
+.ql-toolbar .ql-ai .ql-ai-icon-box > .ql-ai-trigger-icon:hover {
+  path {
+    fill: #5e7ce0;
+  }
+
+  .ql-ai-icon-linear {
+    display: none;
+  }
+}
+
+.ql-ai-wrapper {
+  position: relative;
+  width: 100%;
+  z-index: 1000;
+}
+
+.ql-ai-tip {
+  flex-shrink: 0;
+}
+
+.ql-ai-input {
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  background: white;
+  border: 1px solid #c2c2c2;
+  border-radius: 24px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
+}
+
+.ql-ai-input-pre-icon {
+  margin-right: 8px;
+  height: 28px;
+
+  svg {
+    height: 28px;
+    width: 28px;
+  }
+
+  &.ql-ai-think-icon {
+    svg {
+      animation: rotate 2s linear infinite;
+    }
+  }
+}
+
+.ql-ai-think-text {
+  flex: 1;
+  color: #191919;
+  font-size: 16px;
+  letter-spacing: 0px;
+}
+
+.ql-ai-think-btn {
+  width: 96px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  padding: 4px 16px 4px 4px;
+  background-color: rgba(20, 118, 255, 0.06);
+  color: rgba(20, 118, 255, 1);
+  cursor: pointer;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  span {
+    font-size: 12px;
+    margin-left: 8px;
+    white-space: nowrap;
+  }
+}
+
+.ql-ai-input input {
+  flex: 1;
+  padding: 8px 8px 8px 0;
+  margin-right: 16px;
+  border: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.ql-ai-input-right {
+  display: flex;
+  align-items: center;
+  height: 28px;
+
+  .ql-ai-input-right-send {
+    margin-right: 8px;
+  }
+
+  .ql-ai-input-right-close {
+    height: 100%;
+  }
+
+  svg {
+    cursor: pointer;
+    width: 28px;
+    height: 28px;
+  }
+}
+
+.ql-ai-result {
+  margin-bottom: 12px;
+  padding: 16px 24px 8px;
+  background: white;
+  border-radius: 24px;
+  box-shadow: 0 2px 28px 0px rgba(0, 0, 0, 0.1);
+  color: #191919;
+  font-size: 16px;
+  line-height: 26px;
+
+  &-header {
+    font-weight: 500;
+    margin-bottom: 8px;
+  }
+
+  &-content {
+    font-weight: 400;
+    overflow-y: auto;
+    max-height: 222px;
+    margin-bottom: 8px;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 56.74px;
+      padding: 4px 0;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 2px;
+      background-color: #dbdbdb;
+    }
+  }
+
+  &-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 24px;
+
+    .ql-ai-result-footer-right {
+      height: 100%;
+    }
+
+    svg {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+    }
+  }
+
+  &-footer-text {
+    color: #adadad;
+    font-size: 14px;
+    line-height: 24px;
+  }
+}
+
+.ql-ai-dropdown-button {
+  padding: 4px 8px;
+  background: #f0f0f0;
+  border: 1px solid #ddd;
+  cursor: pointer;
+}
+
+.ql-ai-actions {
+  position: absolute;
+  top: calc(100% + 10px);
+  left: 0;
+  padding: 8px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 28px 0px rgba(0, 0, 0, 0.1);
+  z-index: 1001;
+  width: 200px;
+}
+
+.ql-ai-action-item {
+  padding: 8px 24px 8px 12px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    background: #f5f5f5;
+  }
+
+  &.hidden {
+    display: none;
+  }
+
+  svg {
+    margin-right: 8px;
+    width: 20px;
+    height: 20px;
+  }
+
+  .ql-ai-result-menu-text {
+    color: #191919;
+    font-size: 14px;
+  }
+}
+
+.ql-ai-send {
+  margin-left: 8px;
+  padding: 2px 8px;
+  background: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  &:hover {
+    background: #40a9ff;
+  }
+}
+
+.ql-ai-alert {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.16);
+  color: #191919;
+  padding: 12px 16px;
+  font-size: 14px;
+  border-radius: 8px;
+  min-height: 45px;
+  z-index: 9999;
+  animation: fadeIn 0.3s;
+}
+
+// 操作菜单
+.ql-ai-menu-container {
+  position: relative;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  display: flex;
+  gap: 16px;
+
+  &:has(.editor) {
+    .ql-ai-main-menu > .ql-ai-menu-item:first-child {
+      background: #f5f5f5;
+
+      & > svg:nth-of-type(2) {
+        display: inline-block;
+      }
+    }
+  }
+  &:has(.tone) {
+    .ql-ai-main-menu > .ql-ai-menu-item:nth-of-type(2) {
+      background: #f5f5f5;
+
+      & > svg:nth-of-type(2) {
+        display: inline-block;
+      }
+    }
+  }
+  &:has(.adjust) {
+    .ql-ai-main-menu > .ql-ai-menu-item:nth-of-type(3) {
+      background: #f5f5f5;
+
+      & > svg:nth-of-type(2) {
+        display: inline-block;
+      }
+    }
+  }
+}
+
+.ql-ai-main-menu {
+  height: 132px;
+
+  .ql-ai-menu-item > svg:nth-of-type(2) {
+    height: 8px;
+    width: 8px;
+    display: none;
+  }
+}
+
+.ql-ai-main-menu,
+.ql-ai-sub-menu {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 28px 0px rgba(0, 0, 0, 0.1);
+  padding: 8px;
+  z-index: 1001;
+}
+
+.ql-ai-sub-menu {
+  display: none;
+
+  .ql-ai-menu-item:hover {
+    background: #f5f5f5;
+  }
+}
+
+.ql-ai-sub-menu {
+  &.tone {
+    margin-top: 40px;
+  }
+
+  &.adjust {
+    margin-top: 86px;
+  }
+}
+
+.ql-ai-menu-item {
+  padding: 8px 24px 8px 12px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  white-space: nowrap;
+  min-width: 200px;
+  border-radius: 8px;
+
+  &:not(:first-child) {
+    margin-top: 4px;
+  }
+
+  svg:first-child {
+    margin-right: 8px;
+    width: 20px;
+    height: 20px;
+  }
+
+  span {
+    flex: 1;
+    color: #191919;
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+
+.ql-ai-selection-bubble {
+  position: fixed;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 90px;
+  height: 32px;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
+  cursor: pointer;
+  z-index: 1000;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  span {
+    margin-left: 4px;
+    font-size: 14px;
+    height: 21px;
+    line-height: 21px;
+    color: #191919;
+  }
+
+  // 添加小三角
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 4px solid white;
+  }
+
+  &:hover::after {
+    border-top-color: #f5f5f5;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/src/assets/common/config.scss

@@ -0,0 +1,4 @@
+$defaultFontSize: 14px;
+$namespace: fe;
+$fullscreenZIndex-normal: 50;
+$fullscreenZIndex-full: 51;

package/src/assets/common.scss

@@ -0,0 +1,132 @@
+@use './common/config.scss' as *;
+
+@mixin ellipsis($width) {
+  width: $width;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin arrowIcon {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  height: 0;
+  width: 0;
+  margin-top: -2.5px;
+  border: 2.5px solid transparent;
+  border-top: 3px solid #252b3a;
+}
+
+@mixin toolbarPicker($content, $width: 40px) {
+  width: $width;
+
+  .ql-picker-label::before {
+    @include ellipsis($width);
+  }
+
+  &.ql-expanded .ql-picker-label {
+    color: inherit;
+  }
+
+  &:hover {
+    color: #5e7ce0;
+
+    i.icon {
+      border-top-color: #5e7ce0;
+    }
+  }
+
+  .ql-picker-label {
+    outline: none;
+    border: 0;
+
+    .ql-stroke {
+      display: none;
+    }
+
+    i.icon {
+      @include arrowIcon;
+    }
+
+    &.ql-active,
+    &:hover {
+      i.icon {
+        border-top-color: #5e7ce0;
+      }
+    }
+  }
+
+  .ql-picker-options {
+    color: #8a8e99;
+  }
+}
+
+@mixin fontSizeList {
+  /* Set Dropdown font-size */
+  .ql-size {
+    @include toolbarPicker('', 98px);
+  }
+
+  .ql-size span.ql-picker-options {
+    width: 70px;
+
+    span::before {
+      font-size: 14px;
+    }
+  }
+}
+
+@mixin lineHeightList {
+  .ql-line-height {
+    @include toolbarPicker('', 72px);
+  }
+
+  .ql-line-height span.ql-picker-options {
+    width: 98px;
+
+    span::before {
+      font-size: 14px;
+    }
+  }
+}
+
+@mixin fontFamilyList {
+  /* Set dropdown font-families */
+  .ql-font {
+    @include toolbarPicker('', 98px);
+  }
+}
+
+@mixin mentionLink {
+  .ql-mention-link {
+    cursor: pointer;
+    color: #5e7ce0;
+    margin: 0 0.3em;
+    text-decoration: underline;
+  }
+}
+
+// SVG图标
+@mixin toolbarSvgColor {
+  svg:not(.ql-ai-icon),
+  polygon,
+  svg:not(.ql-ai-icon) path {
+    @content;
+  }
+}
+
+// 字体图标
+@mixin toolbarFontIconColor {
+  i {
+    @content;
+  }
+}
+
+@function getCssVar($name) {
+  @return var(--#{$namespace}-#{$name});
+}
+
+@mixin setCssVar($name, $value) {
+  --#{$namespace}-#{$name}: #{$value};
+}

package/src/assets/counter.scss

@@ -0,0 +1,16 @@
+// 模块：字数统计 counter
+@mixin counter {
+  .ql-counter {
+    // position: absolute;
+    width: 100%;
+    bottom: 0;
+    white-space: nowrap;
+    border-top: 1px solid #ddd;
+    line-height: 20px;
+    font-size: 12px;
+    font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
+    text-align: right;
+    padding-right: 5px;
+    color: #8a8e99;
+  }
+}

package/src/assets/custom-image.scss

@@ -0,0 +1,19 @@
+/* 图片预览 */
+@mixin imagePreview {
+  .image-preview__overlay {
+    position: absolute;
+    z-index: 10;
+
+    .icon-maxmize {
+      font-size: 18px;
+      padding: 8px 4px 3px;
+      background-color: #8a8e99;
+      color: #ffffff;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .icon-maxmize:before {
+      content: url('data:image/svg+xml;utf8,<svg t="1642681601748" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2834" width="20" height="20"><path d="M460.8 940.8h-320l262.4-262.4c12.8-12.8 12.8-38.4 0-51.2-12.8-19.2-38.4-19.2-57.6 0l-262.4 262.4v-345.6c0-19.2-19.2-38.4-38.4-38.4s-38.4 19.2-38.4 38.4v364.8c0 51.2 38.4 115.2 96 115.2h358.4c19.2 0 38.4-19.2 38.4-38.4 0-25.6-19.2-44.8-38.4-44.8zM940.8 6.4h-377.6c-19.2 0-38.4 19.2-38.4 38.4s19.2 38.4 38.4 38.4h320l-268.8 262.4c-12.8 12.8-12.8 38.4 0 57.6 19.2 12.8 44.8 12.8 57.6 0l262.4-262.4v320c0 19.2 19.2 38.4 38.4 38.4s38.4-19.2 38.4-38.4v-352c6.4-64-25.6-102.4-70.4-102.4z" p-id="2835"></path></svg>');
+    }
+  }
+}