@opentiny/fluent-editor 3.20.2-alpha.0 → 3.20.2

package/src/assets/fileBar.scss

@@ -0,0 +1,116 @@
+.ql-file-bar {
+  position: absolute;
+  transform: translateY(10px);
+  align-items: center;
+  background-color: #fff;
+  background-color: var(--devui-base-bg, #fff);
+  border: 1px solid #adb0b8;
+  border: 1px solid var(--devui-line, #adb0b8);
+  box-shadow: 0 0 5px rgb(37 43 58 / 20%);
+  box-shadow: 0 0 5px var(--devui-light-shadow, rgba(37, 43, 58, 0.2));
+  color: #252b3a;
+  color: var(--devui-text, #252b3a);
+  display: flex;
+  padding: 4px;
+  white-space: nowrap;
+
+  .ql-last-modified-date {
+    width: auto;
+    max-width: 300px;
+    word-break: break-all;
+    display: -webkit-box;
+    -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;
+    border-left: 1px solid var(--devui-line, #adb0b8);
+  }
+  .ql-file-download {
+    line-height: 28px;
+    margin: 0 4px;
+    padding: 0 4px;
+    min-width: 28px;
+    display: inline-block;
+    text-align: center;
+    color: #babbc0;
+    color: var(--devui-placeholder, #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;
+      color: var(--devui-text, #252b3a);
+      line-height: 28px;
+    }
+
+    &:hover {
+      background-color: #aaaaaf;
+      background-color: var(--devui-list-item-active-bg, #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;
+    color: var(--devui-placeholder, #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;
+      color: var(--devui-text, #252b3a);
+      line-height: 28px;
+    }
+
+    &:hover {
+      background-color: #aaaaaf;
+      background-color: var(--devui-list-item-active-bg, #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

@@ -0,0 +1,36 @@
+// 字体
+@import './common';
+
+.ql-formats {
+  .ql-font.ql-picker {
+    width: 108px;
+
+    $font-map: (
+      'arial': ('arial', (arial, helvetica, sans-serif)),
+      'songti': ('宋体', ('宋体', 'SimSun')),
+      'yahei': ('微软雅黑', ('微软雅黑', 'Microsoft YaHei')),
+      'kaiti': ('楷体', ('楷体', '楷体_GB2312', 'SimKai')),
+      'heiti': ('黑体', ('黑体', 'SimHei')),
+      'lishu': ('隶书', ('隶书', 'SimLi')),
+      'mono': ('andale mono', 'andale mono'),
+      'arialblack': ('arial black', ('arial black', 'avant garde')),
+      'comic': ('comic sans ms', 'comic sans ms'),
+      'impact': ('impact', ('impact', 'chicago')),
+      'times': ('times new roman', 'times new roman'),
+    );
+
+    @each $font, $font-value in $font-map {
+      span[data-value=#{$font}]::before {
+        content: nth($font-value, 1);
+        font-family: nth($font-value, 2);
+      }
+
+      span[data-value=#{$font}].ql-picker-label::before {
+        width: 60px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}

package/src/assets/fullscreen.scss

@@ -0,0 +1,21 @@
+:-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%;
+  }
+}

package/src/assets/lineHeight.scss

@@ -0,0 +1,16 @@
+// 文字大小
+@import './common';
+
+.ql-lineheight > span {
+  width: 50px;
+
+  span::before {
+    font-size: 14px;
+  }
+}
+.ql-lineheight.ql-picker {
+  span.ql-picker-label:before,
+  .ql-picker-options > span.ql-picker-item::before {
+    content: attr(data-value);
+  }
+}

package/src/assets/link.scss

@@ -0,0 +1,130 @@
+@mixin linkTooltip {
+  #editor {
+    .ql-tooltip {
+      position: absolute;
+      transform: translateY(10px);
+      background-color: #fff;
+      background-color: var(--devui-connected-overlay-bg, #fff);
+      border: 1px solid #adb0b8;
+      border: 1px solid var(--devui-line, #adb0b8);
+      box-shadow: 0 2px 8px 0 rgb(37 43 58 / 20%);
+      box-shadow: var(--devui-shadow-connected-overlay, 0 2px 8px 0) var(--devui-light-shadow, rgba(37, 43, 58, 0.2));
+      color: #252b3a;
+      color: var(--devui-text, #252b3a);
+      padding: 5px 3px;
+      white-space: nowrap;
+
+      &[data-mode='link']::before {
+        content: none;
+      }
+
+      &.ql-flip {
+        transform: translateY(-10px);
+      }
+
+      &.ql-editing {
+        input[type='text'] {
+          display: inline-block;
+        }
+
+        a.ql-remove,
+        a.ql-preview {
+          display: inline-block;
+
+          &::before {
+            content: none;
+          }
+        }
+      }
+
+      input[type='text'] {
+        display: none;
+        border: 0;
+        outline: none;
+        font-size: 13px;
+        height: 28px;
+        margin: 0;
+        padding: 0 6px;
+        width: 200px;
+        background-color: #fff;
+        background-color: var(--devui-base-bg, #fff);
+      }
+
+      .ql-split {
+        width: 1px;
+        height: 16px;
+        line-height: 16px;
+        margin: 6px 4px;
+        border-left: 1px solid #adb0b8;
+        border-left: 1px solid var(--devui-line, #adb0b8);
+        display: inline-block;
+        vertical-align: bottom;
+      }
+      .ql-preview {
+        .icon-share {
+          display: block;
+          font-size: 16px;
+          color: #252b3a;
+          color: var(--devui-text, #252b3a);
+          line-height: 28px;
+          font-family: 'iconfont' !important;
+          font-size: 16px;
+          font-style: normal;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          &::before {
+            content: '\e683';
+          }
+        }
+      }
+      .ql-remove {
+        .icon-delete {
+          display: block;
+          font-size: 16px;
+          color: #252b3a;
+          color: var(--devui-text, #252b3a);
+          line-height: 28px;
+          font-family: 'iconfont' !important;
+          font-size: 16px;
+          font-style: normal;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          &::before {
+            content: '\ec45';
+          }
+        }
+      }
+    }
+
+    .ql-tooltip a {
+      line-height: 28px;
+      margin: 0 3px;
+      padding: 0 3px;
+      min-width: 28px;
+      display: inline-block;
+      text-align: center;
+      color: #babbc0;
+      color: var(--devui-placeholder, #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: #babbc0;
+        color: var(--devui-aide-text, #babbc0);
+        line-height: 28px;
+      }
+
+      &:hover {
+        background-color: #949597;
+      }
+    }
+  }
+}
+// 编辑器正文
+@include linkTooltip;

package/src/assets/mention.scss

@@ -0,0 +1,48 @@
+@import './common';
+// @import './styles-var/private/z-index';
+
+// 模块：@提醒 mention
+@mixin mention {
+  .ql-mention-list-container {
+    .ql-mention-list {
+      position: absolute;
+      background: #ffffff;
+      opacity: 1;
+      overflow-x: hidden;
+      overflow-y: auto;
+      width: auto;
+      padding: 5px 0;
+      list-style: none;
+      border-radius: 2px;
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+      z-index: 1052;
+
+      &.ql-mention-list--hide {
+        position: static;
+        height: 0;
+        opacity: 0;
+        display: none;
+      }
+
+      & .ql-mention-item {
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        height: 36px;
+        line-height: 36px;
+        padding: 0 20px;
+        color: #252b3a;
+        font-size: 14px;
+        display: block;
+        font-weight: normal;
+
+        &.ql-mention-item--active {
+          background-color: #5e7ce0;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+  @include mentionLink;
+}

package/src/assets/screenshot.scss

@@ -0,0 +1,78 @@
+.ql-screenshot {
+  &-wrapper {
+    --ql-screenshot-color-bg: rgba(0, 0, 0, 0.5);
+    --ql-screenshot-color-confirm: #2196f3;
+    --ql-screenshot-color-cancel: #ef1749;
+
+    .ql-screenshot-cancel,
+    .ql-screenshot-confirm {
+      position: relative;
+      height: 16px;
+      width: 16px;
+      cursor: pointer;
+    }
+    .ql-screenshot-confirm {
+      background-color: var(--ql-screenshot-color-confirm);
+      &::after {
+        content: '';
+        position: absolute;
+        left: 6px;
+        top: 3px;
+        width: 5px;
+        height: 10px;
+        border: solid #fff;
+        border-width: 0 3px 3px 0;
+        transform: rotate(45deg);
+      }
+    }
+    .ql-screenshot-cancel {
+      background-color: var(--ql-screenshot-color-cancel);
+      &::after {
+        content: '';
+        position: absolute;
+        left: 7px;
+        top: 2px;
+        width: 2px;
+        height: 12px;
+        border: solid #fff;
+        border-width: 0 3px 3px 0;
+        transform: rotate(45deg);
+      }
+      &::before {
+        content: '';
+        position: absolute;
+        left: 7px;
+        top: 2px;
+        width: 2px;
+        height: 12px;
+        border: solid #fff;
+        border-width: 0 3px 3px 0;
+        transform: rotate(-45deg);
+      }
+    }
+  }
+  &-mask {
+    position: fixed;
+    inset: 0;
+    background-color: var(--ql-screenshot-color-bg);
+    z-index: 50;
+  }
+  &-cutter {
+    position: fixed;
+    border: 1px solid #fff;
+    z-index: 50;
+  }
+  &-coordinate,
+  &-done {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    font-size: 14px;
+    white-space: nowrap;
+  }
+  &-done {
+    display: flex;
+    border-top: 1px solid #333;
+    border-left: 1px solid #333;
+  }
+}

package/src/assets/size.scss

@@ -0,0 +1,13 @@
+// 文字大小
+@import './common';
+.ql-size.ql-picker {
+  width: 98px;
+  span.ql-picker-label:before,
+  .ql-picker-options > span.ql-picker-item::before {
+    content: 'Normal';
+  }
+  span.ql-picker-label[data-value]:before,
+  .ql-picker-options > span.ql-picker-item[data-value]::before {
+    content: attr(data-value);
+  }
+}

package/src/assets/style.scss

@@ -0,0 +1,39 @@
+@font-face {
+  font-family: 'iconfont'; /* Project id 3231649 */
+  src:
+    url('./iconfont/iconfont.woff2') format('woff2'),
+    url('./iconfont/iconfont.woff') format('woff'),
+    url('./iconfont/iconfont.ttf') format('truetype');
+}
+@import 'quill/dist/quill.snow';
+
+@import './common';
+@import './mention';
+@import './toolbar';
+@import './editor';
+@import './counter';
+@import './size';
+@import './font';
+@import './lineHeight';
+@import './better-table';
+@import './custom-image';
+@import './fileBar';
+@import './link';
+@import './fullscreen';
+@import './screenshot';
+
+// 模块：字数统计 counter
+@include counter;
+
+// 模块：@提醒 mention
+@include mention;
+
+// 模块：工具栏 toolbar
+@include toolbar;
+
+// @include lineHeightList;
+
+// 图片预览
+@include imagePreview;
+
+@include fontFamilyContent;

package/src/assets/tasklist.scss

@@ -0,0 +1,76 @@
+@mixin tasklist {
+  li.checked > .ql-ui,
+  li.unchecked > .ql-ui {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    line-height: 14px;
+    text-align: right;
+    margin-left: -26px;
+    margin-right: 10px;
+    border: 1px solid #adb0b8;
+    color: #adb0b8;
+    cursor: pointer;
+  }
+
+  li.checked > .ql-ui {
+    border: 1px solid #5e7ce0;
+    background: #5e7ce0
+      url('data:image/svg+xml;base64,PHN2ZyB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNoZWNrYm94LXRpY2sgIiB2ZXJzaW9uPSIxLjEiDQogICAgIHZpZXdCb3g9IjAgMCAyMCAyMCIgeD0iMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHk9IjBweCIgc3R5bGU9InBvc2l0aW9uOiBhYnNvbHV0ZTsiPg0KICA8cG9seWxpbmUgc3R5bGU9Ig0KICAgIHN0cm9rZTogI0ZGRkZGRjsNCiAgICBzdHJva2UtZGFzaGFycmF5OiA1MDsNCiAgICBzdHJva2Utd2lkdGg6IDI7DQogICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOw0KICAgIGZpbGw6IG5vbmU7DQogICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7DQoiIGNsYXNzPSJ0aWNrIHBhdGggbm8tYW5pbWF0aW9uIiBwb2ludHM9IjIuNiwxMSA2LjksMTUuMiAxNy40LDQuOCI+PC9wb2x5bGluZT4NCjwvc3ZnPg0K');
+    transition: all 0.3s ease-in-out;
+  }
+
+  li.checked > .ql-ui::before,
+  li.unchecked > .ql-ui::before {
+    content: '';
+  }
+
+  // 样式重置
+  li.checked,
+  li.unchecked {
+    display: block;
+    width: initial;
+    height: initial;
+    margin-left: initial;
+    color: initial;
+    border: initial;
+    cursor: initial;
+  }
+
+  li.checked::before,
+  li.unchecked::before {
+    content: initial;
+  }
+
+  li.checked > .ql-ui,
+  li.unchecked > .ql-ui {
+    bottom: initial;
+  }
+}
+
+@mixin tasklistOutside {
+  li.checked::before,
+  li.unchecked::before {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    text-align: right;
+    margin-left: -26px;
+    border: 1px solid #adb0b8;
+    content: '';
+    position: absolute;
+    top: 1px;
+    margin-right: 0.7em;
+  }
+
+  li.checked::before {
+    border: 1px solid #5e7ce0;
+    background: #5e7ce0
+      url('data:image/svg+xml;base64,PHN2ZyB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNoZWNrYm94LXRpY2sgIiB2ZXJzaW9uPSIxLjEiDQogICAgIHZpZXdCb3g9IjAgMCAyMCAyMCIgeD0iMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHk9IjBweCIgc3R5bGU9InBvc2l0aW9uOiBhYnNvbHV0ZTsiPg0KICA8cG9seWxpbmUgc3R5bGU9Ig0KICAgIHN0cm9rZTogI0ZGRkZGRjsNCiAgICBzdHJva2UtZGFzaGFycmF5OiA1MDsNCiAgICBzdHJva2Utd2lkdGg6IDI7DQogICAgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOw0KICAgIGZpbGw6IG5vbmU7DQogICAgc3Ryb2tlLWRhc2hvZmZzZXQ6IDA7DQoiIGNsYXNzPSJ0aWNrIHBhdGggbm8tYW5pbWF0aW9uIiBwb2ludHM9IjIuNiwxMSA2LjksMTUuMiAxNy40LDQuOCI+PC9wb2x5bGluZT4NCjwvc3ZnPg0K');
+  }
+
+  li.checked > .ql-ui,
+  li.unchecked > .ql-ui {
+    top: 0;
+  }
+}