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

package/src/assets/editor.scss

@@ -1,351 +0,0 @@
-@use './common/config.scss' as *;
-@use './common';
-@use './tasklist';
-
-@mixin editor {
-  .ql-container.ql-snow {
-    background-color: getCssVar(editor-bg-color);
-  }
-
-  .ql-editor {
-    padding-bottom: 33px;
-    font-size: $defaultFontSize;
-
-    &.ql-blank::before {
-      color: #8a8e99;
-    }
-
-    h1,
-    h2,
-    h3 {
-      margin-top: 20px;
-      margin-bottom: 10px;
-    }
-
-    h1 {
-      font-size: 30px;
-    }
-
-    h2 {
-      font-size: 20px;
-      font-weight: bold;
-    }
-
-    ol,
-    ul {
-      margin: 0 0 10px;
-      list-style: none;
-    }
-
-    li {
-      margin: 0 0 5px;
-    }
-
-    b,
-    strong {
-      font-weight: bold;
-    }
-
-    em {
-      font-style: italic;
-    }
-
-    s {
-      text-decoration: line-through;
-    }
-
-    u.ql-custom-strike {
-      text-decoration: line-through;
-    }
-
-    u {
-      text-decoration: underline;
-    }
-
-    a {
-      text-decoration: underline;
-      color: #5e7ce0;
-
-      img {
-        border: solid 1px #526ecc;
-      }
-    }
-
-    td ol {
-      counter-reset: list-0 0;
-    }
-
-    .ql-ui {
-      position: absolute;
-      color: #000;
-    }
-
-    li > .ql-ui {
-      bottom: 0;
-    }
-
-    // 列表
-    li::before {
-      display: inline-block;
-      margin-left: -1.5em;
-      margin-right: 0.3em;
-      text-align: right;
-      white-space: nowrap;
-      width: 1.2em;
-    }
-
-    li.bullet::before {
-      content: '\2022';
-    }
-
-    li.ordered {
-      counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
-      counter-increment: list-0;
-    }
-
-    li.ordered::before {
-      content: counter(list-0, decimal) '. ';
-    }
-
-    li.ordered.ql-indent-1 {
-      counter-increment: list-1;
-    }
-
-    li.ordered.ql-indent-1::before {
-      content: counter(list-1, lower-alpha) '. ';
-    }
-
-    li.ordered.ql-indent-1 {
-      counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
-    }
-
-    li.ordered.ql-indent-2 {
-      counter-increment: list-2;
-    }
-
-    li.ordered.ql-indent-2::before {
-      content: counter(list-2, lower-roman) '. ';
-    }
-
-    li.ordered.ql-indent-2 {
-      counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
-    }
-
-    li.ordered.ql-indent-3 {
-      counter-increment: list-3;
-    }
-
-    li.ordered.ql-indent-3::before {
-      content: counter(list-3, decimal) '. ';
-    }
-
-    li.ordered.ql-indent-3 {
-      counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
-    }
-
-    li.ordered.ql-indent-4 {
-      counter-increment: list-4;
-    }
-
-    li.ordered.ql-indent-4::before {
-      content: counter(list-4, lower-alpha) '. ';
-    }
-
-    li.ordered.ql-indent-4 {
-      counter-reset: list-5 list-6 list-7 list-8 list-9;
-    }
-
-    li.ordered.ql-indent-5 {
-      counter-increment: list-5;
-    }
-
-    li.ordered.ql-indent-5::before {
-      content: counter(list-5, lower-roman) '. ';
-    }
-
-    li.ordered.ql-indent-5 {
-      counter-reset: list-6 list-7 list-8 list-9;
-    }
-
-    li.ordered.ql-indent-6 {
-      counter-increment: list-6;
-    }
-
-    li.ordered.ql-indent-6::before {
-      content: counter(list-6, decimal) '. ';
-    }
-
-    li.ordered.ql-indent-6 {
-      counter-reset: list-7 list-8 list-9;
-    }
-
-    li.ordered.ql-indent-7 {
-      counter-increment: list-7;
-    }
-
-    li.ordered.ql-indent-7::before {
-      content: counter(list-7, lower-alpha) '. ';
-    }
-
-    li.ordered.ql-indent-7 {
-      counter-reset: list-8 list-9;
-    }
-
-    li.ordered.ql-indent-8 {
-      counter-increment: list-8;
-    }
-
-    li.ordered.ql-indent-8::before {
-      content: counter(list-8, lower-roman) '. ';
-    }
-
-    li.ordered.ql-indent-8 {
-      counter-reset: list-9;
-    }
-
-    li.ordered.ql-indent-9 {
-      counter-increment: list-9;
-    }
-
-    li.ordered.ql-indent-9::before {
-      content: counter(list-9, decimal) '. ';
-    }
-
-    li.ql-direction-rtl {
-      &::before,
-      &.checked > .ql-ui,
-      &.unchecked > .ql-ui {
-        margin-left: 0.3em;
-        margin-right: -1.5em;
-        text-align: left;
-      }
-    }
-
-    // 任务列表
-    @include tasklist.tasklist;
-
-    img {
-      max-width: 100%;
-
-      &.current-select-img::selection {
-        background-color: transparent;
-      }
-    }
-
-    .ql-file-item {
-      margin: 0 4px;
-      padding: 0 4px;
-      white-space: nowrap;
-      max-width: 90%;
-      user-select: none;
-      vertical-align: middle;
-      cursor: pointer;
-      position: relative;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: inline-block;
-      font-size: 14px;
-      height: 28px;
-
-      &.icon-file::before {
-        position: absolute;
-        left: 4px;
-        top: 2px;
-      }
-
-      span {
-        display: inline-flex;
-        align-items: center;
-        text-decoration: none;
-      }
-
-      svg {
-        margin-right: 4px;
-        fill: #5e7ce0;
-        vertical-align: text-bottom;
-      }
-    }
-
-    // 代码块
-    code,
-    .ql-code-block-container {
-      background-color: #f8f8f8;
-      border-radius: 3px;
-    }
-
-    code {
-      font-size: 85%;
-      padding: 2px 4px;
-    }
-
-    .ql-code-block-container {
-      overflow: auto;
-      padding: 9.5px;
-      margin: 0 0 10px;
-      word-break: normal;
-      word-wrap: break-word;
-      white-space: pre-wrap;
-      font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
-      font-size: 13px;
-      border-radius: 1px;
-      color: #252b3a;
-      background-color: #f8f8f8;
-      border: 1px solid #adb0b8;
-    }
-
-    // 表格
-    table {
-      margin: 0;
-
-      tr {
-        height: initial;
-      }
-    }
-
-    td {
-      border: 1px solid #adb0b8;
-      padding: 5px 10px;
-    }
-
-    // 全局链接
-    .ql-wiki-link,
-    .ql-doc-link {
-      display: inline-block;
-      margin: 0 5px;
-    }
-
-    // 代码块
-    blockquote {
-      border-left: 4px solid #adb0b8;
-      margin-bottom: 5px;
-      margin-top: 5px;
-      padding-left: 16px;
-    }
-
-    // @提醒
-    @include common.mentionLink;
-  }
-
-  // fix: 解决ol中有内联list-style-type样式，.ql-editor样式（默认是none）会将其覆盖的问题
-  .ql-editor ol li {
-    list-style-type: inherit;
-  }
-
-  .ql-container .ql-editor {
-    ol li {
-      // 确保不影响编辑器里面的样式
-      list-style-type: none;
-    }
-
-    // 暗黑模式
-    li.checked,
-    li.unchecked {
-      color: #252b3a;
-    }
-  }
-}
-
-// 编辑器正文
-@include editor;
-// 编辑器外的任务列表
-@include tasklist.tasklistOutside;

package/src/assets/fileBar.scss

@@ -1,107 +0,0 @@
-.ql-file-bar {
-  position: absolute;
-  transform: translateY(10px);
-  align-items: center;
-  background-color: #fff;
-  border: 1px solid #adb0b8;
-  box-shadow: 0 0 5px rgba(37, 43, 58, 0.2);
-  color: #252b3a;
-  color: #252b3a;
-  display: flex;
-  padding: 4px;
-  white-space: nowrap;
-
-  .ql-last-modified-date {
-    width: auto;
-    max-width: 300px;
-    word-break: break-all;
-    display: -webkit-box;
-    line-clamp: 2;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    padding: 0 8px;
-    text-decoration: none;
-  }
-
-  .ql-split {
-    width: 1px;
-    height: 16px;
-    line-height: 16px;
-    margin: 4px 8px;
-    vertical-align: bottom;
-    border-left: 1px solid #adb0b8;
-  }
-  .ql-file-download {
-    line-height: 28px;
-    margin: 0 4px;
-    padding: 0 4px;
-    min-width: 28px;
-    display: inline-block;
-    text-align: center;
-    color: #babbc0;
-    border-radius: 2px 2px;
-    text-decoration: none;
-    -webkit-transition: background-color 0.3s ease-in-out;
-    transition: background-color 0.3s ease-in-out;
-    cursor: pointer;
-    vertical-align: bottom;
-    i {
-      display: block;
-      font-size: 16px;
-      color: #252b3a;
-      line-height: 28px;
-    }
-
-    &:hover {
-      background-color: #aaaaaf;
-    }
-    .icon-download {
-      font-family: 'iconfont' !important;
-      font-size: 16px;
-      font-style: normal;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      &::before {
-        content: '\e600';
-      }
-    }
-  }
-  .ql-file-delete {
-    line-height: 28px;
-    margin: 0 4px;
-    padding: 0 4px;
-    min-width: 28px;
-    display: inline-block;
-    text-align: center;
-    color: #babbc0;
-    border-radius: 2px 2px;
-    text-decoration: none;
-    -webkit-transition: background-color 0.3s ease-in-out;
-    transition: background-color 0.3s ease-in-out;
-    cursor: pointer;
-    vertical-align: bottom;
-
-    i {
-      display: block;
-      font-size: 16px;
-      color: #252b3a;
-      line-height: 28px;
-    }
-
-    &:hover {
-      background-color: #aaaaaf;
-    }
-    .icon-delete {
-      font-family: 'iconfont' !important;
-      font-size: 16px;
-      font-style: normal;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-
-      &::before {
-        content: '\ec45';
-      }
-    }
-  }
-}

package/src/assets/font.scss

@@ -1,18 +0,0 @@
-// 字体
-.ql-formats {
-  .ql-font.ql-picker {
-    width: 108px;
-
-    .ql-picker-label[data-value],
-    .ql-picker-item[data-value] {
-      &::before {
-        content: attr(data-value);
-      }
-    }
-    .ql-picker-item[data-value] {
-      &::before {
-        font-family: var(--value);
-      }
-    }
-  }
-}

package/src/assets/fullscreen.scss

@@ -1,50 +0,0 @@
-@use './common/config.scss' as *;
-@use './common';
-
-:-webkit-full-screen {
-  background-color: white !important;
-}
-:-moz-full-screen {
-  background-color: white !important;
-}
-:-ms-fullscreen {
-  background-color: white !important;
-}
-:fullscreen {
-  background-color: white !important;
-}
-.scroll {
-  &--lock {
-    overflow: hidden !important;
-  }
-  &__wrap {
-    overflow: auto;
-    height: 100%;
-  }
-}
-.fullscreen {
-  &.ql {
-    &-toolbar,
-    &-container {
-      @include common.setCssVar(fullscreen-z-index, $fullscreenZIndex-normal);
-
-      position: fixed;
-      width: 100%;
-      left: 0;
-      background-color: common.getCssVar(editor-bg-color);
-      z-index: common.getCssVar(fullscreen-z-index);
-    }
-    &-toolbar {
-      @include common.setCssVar(fullscreen-container-z-index, $fullscreenZIndex-full);
-
-      top: 0;
-      z-index: common.getCssVar(fullscreen-container-z-index);
-    }
-    &-container {
-      @include common.setCssVar(top, 0px);
-
-      top: common.getCssVar(top);
-      height: calc(100% - common.getCssVar(top));
-    }
-  }
-}

package/src/assets/imageBar.scss

@@ -1,98 +0,0 @@
-@mixin image-icon {
-  line-height: 28px;
-  margin: 0 4px;
-  padding: 0 4px;
-  min-width: 28px;
-  display: inline-block;
-  text-align: center;
-  color: #babbc0;
-  border-radius: 2px 2px;
-  text-decoration: none;
-  -webkit-transition: background-color 0.3s ease-in-out;
-  transition: background-color 0.3s ease-in-out;
-  cursor: pointer;
-  vertical-align: bottom;
-
-  i {
-    display: block;
-    font-size: 16px;
-    color: #252b3a;
-    line-height: 28px;
-  }
-
-  svg {
-    display: block;
-    line-height: 28px;
-    margin: 6px 0;
-    margin-left: 2px;
-  }
-  &:hover {
-    background-color: #aaaaaf;
-  }
-}
-
-.ql-image-bar {
-  position: absolute;
-  transform: translateY(10px);
-  transition: width 0.5s ease-in-out; /* 动画持续0.5秒，平滑过渡宽度变化 */
-  align-items: center;
-  background-color: #fff;
-  border: 1px solid #adb0b8;
-  box-shadow: 0 0 5px rgba(37, 43, 58, 0.2);
-  color: #252b3a;
-  display: flex;
-  padding: 4px;
-  white-space: nowrap;
-
-  .ql-split {
-    width: 1px;
-    height: 16px;
-    line-height: 16px;
-    margin: 4px 8px;
-    vertical-align: bottom;
-    border-left: 1px solid #adb0b8;
-  }
-  .ql-image-preview {
-    @include image-icon;
-    .icon-preview {
-      font-family: 'iconfont' !important;
-      font-size: 16px;
-      font-style: normal;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      &::before {
-        content: '\e600';
-      }
-    }
-  }
-  .ql-image-download {
-    @include image-icon;
-    .icon-download {
-      font-family: 'iconfont' !important;
-      font-size: 16px;
-      font-style: normal;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      &::before {
-        content: '\e600';
-      }
-    }
-  }
-  .ql-image-copy {
-    @include image-icon;
-  }
-  .ql-image-delete {
-    @include image-icon;
-    .icon-delete {
-      font-family: 'iconfont' !important;
-      font-size: 16px;
-      font-style: normal;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-
-      &::before {
-        content: '\ec45';
-      }
-    }
-  }
-}

package/src/assets/lineHeight.scss

@@ -1,15 +0,0 @@
-// 文字大小
-.ql-line-height.ql-picker {
-  .ql-picker-label,
-  .ql-picker-item {
-    &::before {
-      content: 'Normal';
-    }
-  }
-  .ql-picker-label[data-value],
-  .ql-picker-item[data-value] {
-    &::before {
-      content: attr(data-value);
-    }
-  }
-}