@opentiny/fluent-editor 4.0.0-alpha.1 → 4.0.0-alpha.3

package/style.css

@@ -1001,558 +1001,6 @@ html.dark .toolbar-tip__tooltip {
   --fe-text-color: #141414;
   --fe-bg-color: #f5f5f5;
 }
-.ql-container .mention {
-  color: #5e7ce0;
-}
-.ql-container .completions {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  background: #ffffff;
-  border-radius: 2px;
-  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
-}
-.ql-container .completions > li {
-  margin: 0;
-  padding: 0;
-}
-.ql-container .completions > li > button {
-  box-sizing: border-box;
-  height: 2em;
-  padding: 0.25em 0.5em;
-  margin: 0;
-  display: block;
-  width: 100%;
-  text-align: left;
-  border: none;
-  background: none;
-}
-.ql-container .completions > li > button:hover {
-  background: #adb0b8;
-}
-.ql-container .completions > li > button:focus {
-  background: #adb0b8;
-  outline: none;
-}
-.ql-container .completions > li > button > .matched {
-  font-weight: bold;
-  color: #252b3a;
-}
-.ql-container .completions > li > button > * {
-  vertical-align: middle;
-}
-.ql-container .emoji_completions {
-  list-style: none;
-  margin: 0;
-  border: 1px solid #252b3a;
-  padding: 6px;
-  background: #ffffff;
-  border-radius: 3px;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-}
-.ql-container .emoji_completions li {
-  margin: 2px 0;
-  padding: 0;
-  display: inline-block;
-}
-.ql-container .emoji_completions li:not(:last-of-type) {
-  margin-right: 3px;
-}
-.ql-container .emoji_completions > li > button {
-  box-sizing: border-box;
-  padding: 3px 2px 6px;
-  margin: 0;
-  display: block;
-  width: 100%;
-  text-align: left;
-  border: none;
-  background: #f8f8f8;
-  border-radius: 3px;
-}
-.ql-container .emoji_completions > li > button:hover {
-  background: #5e7ce0;
-  color: #ffffff;
-}
-.ql-container .emoji_completions > li > button:focus {
-  background: #5e7ce0;
-  outline: none;
-  color: #ffffff;
-}
-.ql-container .emoji_completions > li > button.emoji-active {
-  background: #5e7ce0;
-  outline: none;
-  color: #ffffff;
-}
-.ql-container .emoji_completions > li > button > .matched {
-  font-weight: bold;
-}
-.ql-container .emoji_completions > li > button > * {
-  vertical-align: middle;
-}
-.ql-container .ico {
-  margin-right: 5px;
-  font-size: 18px;
-  line-height: 0;
-  vertical-align: middle;
-}
-.ql-container #emoji-palette {
-  position: fixed;
-  max-width: 231px;
-  z-index: 999;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  border-radius: 1px;
-  border: 1px solid #adb0b8;
-}
-.ql-container .bem {
-  font-size: 24px;
-  width: 20px;
-  display: inline-block;
-  text-align: center;
-  cursor: pointer;
-  margin: 2px;
-}
-.ql-container #tab-filters {
-  width: 210px;
-  margin: 0 auto;
-  margin-top: 20px;
-}
-.ql-container .emoji-tab {
-  display: inline-table;
-  text-align: center;
-  width: 30px;
-  height: 100%;
-  min-height: 30px;
-  cursor: pointer;
-}
-.ql-container #tab-toolbar {
-  display: none;
-  background-color: #f8f8f8;
-  padding: 4px 4px 0;
-  border-bottom: 1px solid #252b3a;
-}
-.ql-container #tab-toolbar ul {
-  margin: 0;
-  padding: 0;
-}
-.ql-container #tab-toolbar .active {
-  border-bottom: 2px solid #5e7ce0;
-}
-.ql-container #tab-panel {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: left;
-  max-height: 220px;
-  overflow-y: scroll;
-  padding: 5px 10px;
-  background: #ffffff;
-  cursor: auto;
-}
-.ql-container #quill-editor table {
-  width: 100%;
-  border-collapse: collapse;
-}
-.ql-container #quill-editor table td {
-  border: 1px solid #252b3a;
-  padding: 5px;
-  height: 25px;
-}
-.ql-container button.ql-table::after {
-  content: "TABLE";
-}
-.ql-container .ql-picker.ql-table .ql-picker-label::before {
-  content: "TABLE";
-}
-.ql-container button.ql-contain::after {
-  content: "WRAP";
-}
-.ql-container button.ql-table[value=append-row]::after {
-  content: "ROWS+";
-}
-.ql-container button.ql-table[value=append-col]::after {
-  content: "COLS+";
-}
-.ql-container .ql-table,
-.ql-container .ql-contain {
-  width: auto;
-  margin-right: -15px;
-}
-.ql-container .textarea-emoji-control {
-  width: 25px;
-  height: 25px;
-  right: 4px;
-  top: 10px;
-}
-.ql-container #textarea-emoji {
-  position: absolute;
-  right: 0;
-  max-width: 250px;
-  z-index: 999;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
-  border: 1px solid #252b3a;
-}
-.ql-container .ql-editor {
-  padding-right: 26px;
-}
-.ql-container .button-emoji {
-  margin-bottom: -5px;
-}
-.ql-container .ql-emojiblot {
-  display: inline-block;
-  vertical-align: text-top;
-}
-#emoji-close-div {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-.emoji .ap {
-  display: inline-flex;
-  height: 20px;
-  width: 20px;
-  background-size: 140px;
-  background-repeat: no-repeat;
-  text-indent: -999px;
-  box-sizing: border-box;
-  font-size: 20px;
-  line-height: 1;
-  overflow: hidden;
-  margin: -3px 5px 5px;
-}
-.emoji .ap-kissing_closed_eyes {
-  background-position: 0 0;
-}
-.emoji .ap-stuck_out_tongue {
-  background-position: 0 -20px;
-}
-.emoji .ap-stuck_out_tongue_winking_eye {
-  background-position: 0 -40px;
-}
-.emoji .ap-stuck_out_tongue_closed_eyes {
-  background-position: 0 -60px;
-}
-.emoji .ap-disappointed {
-  background-position: 0 -80px;
-}
-.emoji .ap-worried {
-  background-position: 0 -100px;
-}
-.emoji .ap-angry {
-  background-position: 0 -120px;
-}
-.emoji .ap-rage {
-  background-position: 0 -140px;
-}
-.emoji .ap-cry {
-  background-position: 0 -160px;
-}
-.emoji .ap-persevere {
-  background-position: 0 -180px;
-}
-.emoji .ap-triumph {
-  background-position: 0 -200px;
-}
-.emoji .ap-disappointed_relieved {
-  background-position: 0 -220px;
-}
-.emoji .ap-frowning {
-  background-position: 0 -240px;
-}
-.emoji .ap-anguished {
-  background-position: 0 -260px;
-}
-.emoji .ap-fearful {
-  background-position: 0 -280px;
-}
-.emoji .ap-weary {
-  background-position: 0 -300px;
-}
-.emoji .ap-sleepy {
-  background-position: -20px 0;
-}
-.emoji .ap-tired_face {
-  background-position: -20px -20px;
-}
-.emoji .ap-grimacing {
-  background-position: -20px -40px;
-}
-.emoji .ap-sob {
-  background-position: -20px -60px;
-}
-.emoji .ap-open_mouth {
-  background-position: -20px -80px;
-}
-.emoji .ap-hushed {
-  background-position: -20px -100px;
-}
-.emoji .ap-cold_sweat {
-  background-position: -20px -120px;
-}
-.emoji .ap-scream {
-  background-position: -20px -140px;
-}
-.emoji .ap-astonished {
-  background-position: -20px -160px;
-}
-.emoji .ap-flushed {
-  background-position: -20px -180px;
-}
-.emoji .ap-sleeping {
-  background-position: -20px -200px;
-}
-.emoji .ap-dizzy_face {
-  background-position: -20px -220px;
-}
-.emoji .ap-no_mouth {
-  background-position: -20px -240px;
-}
-.emoji .ap-mask {
-  background-position: -20px -260px;
-}
-.emoji .ap-grinning {
-  background-position: -20px -280px;
-}
-.emoji .ap-grin {
-  background-position: -20px -300px;
-}
-.emoji .ap-joy {
-  background-position: -40px 0;
-}
-.emoji .ap-smiley {
-  background-position: -40px -20px;
-}
-.emoji .ap-smile {
-  background-position: -40px -40px;
-}
-.emoji .ap-sweat_smile {
-  background-position: -40px -60px;
-}
-.emoji .ap-laughing {
-  background-position: -40px -80px;
-}
-.emoji .ap-innocent {
-  background-position: -40px -100px;
-}
-.emoji .ap-smiling_imp {
-  background-position: -40px -120px;
-}
-.emoji .ap-wink {
-  background-position: -40px -140px;
-}
-.emoji .ap-blush {
-  background-position: -40px -160px;
-}
-.emoji .ap-yum {
-  background-position: -40px -180px;
-}
-.emoji .ap-relieved {
-  background-position: -40px -200px;
-}
-.emoji .ap-heart_eyes {
-  background-position: -40px -220px;
-}
-.emoji .ap-sunglasses {
-  background-position: -40px -240px;
-}
-.emoji .ap-smirk {
-  background-position: -40px -260px;
-}
-.emoji .ap-neutral_face {
-  background-position: -40px -280px;
-}
-.emoji .ap-expressionless {
-  background-position: -40px -300px;
-}
-.emoji .ap-unamused {
-  background-position: -60px 0;
-}
-.emoji .ap-sweat {
-  background-position: -60px -20px;
-}
-.emoji .ap-pensive {
-  background-position: -60px -40px;
-}
-.emoji .ap-confused {
-  background-position: -60px -60px;
-}
-.emoji .ap-confounded {
-  background-position: -60px -80px;
-}
-.emoji .ap-kissing {
-  background-position: -60px -100px;
-}
-.emoji .ap-kissing_heart {
-  background-position: -60px -120px;
-}
-.emoji .ap-kissing_smiling_eyes {
-  background-position: -60px -140px;
-}
-.emoji .ap-slightly_smiling_face {
-  background-position: -60px -160px;
-}
-.emoji .ap-slightly_frowning_face {
-  background-position: -60px -180px;
-}
-.emoji .ap-hugging_face {
-  background-position: -60px -200px;
-}
-.emoji .ap-face_with_head_bandage {
-  background-position: -60px -220px;
-}
-.emoji .ap-thinking_face {
-  background-position: -60px -240px;
-}
-.emoji .ap-nerd_face {
-  background-position: -60px -260px;
-}
-.emoji .ap-face_with_thermometer {
-  background-position: -60px -280px;
-}
-.emoji .ap-money_mouth_face {
-  background-position: -60px -300px;
-}
-.emoji .ap-zipper_mouth_face {
-  background-position: -80px 0;
-}
-.emoji .ap-relaxed {
-  background-position: -80px -20px;
-}
-.emoji .ap-white_frowning_face {
-  background-position: -80px -40px;
-}
-.emoji .ap-scream_cat {
-  background-position: -80px -60px;
-}
-.emoji .ap-crying_cat_face {
-  background-position: -80px -80px;
-}
-.emoji .ap-pouting_cat {
-  background-position: -80px -100px;
-}
-.emoji .ap-kissing_cat {
-  background-position: -80px -120px;
-}
-.emoji .ap-smirk_cat {
-  background-position: -80px -140px;
-}
-.emoji .ap-heart_eyes_cat {
-  background-position: -80px -160px;
-}
-.emoji .ap-smiley_cat {
-  background-position: -80px -180px;
-}
-.emoji .ap-joy_cat {
-  background-position: -80px -200px;
-}
-.emoji .ap-smile_cat {
-  background-position: -80px -220px;
-}
-.emoji .ap-robot_face {
-  background-position: -80px -240px;
-}
-.emoji .ap-imp {
-  background-position: -80px -260px;
-}
-.emoji .ap-skull {
-  background-position: -80px -280px;
-}
-.emoji .ap-ghost {
-  background-position: -80px -300px;
-}
-.emoji .ap-hankey {
-  background-position: -100px 0;
-}
-.emoji .ap-fire {
-  background-position: -100px -20px;
-}
-.emoji .ap-space_invader {
-  background-position: -100px -40px;
-}
-.emoji .ap-alien {
-  background-position: -100px -60px;
-}
-.emoji .ap-eyes {
-  background-position: -100px -80px;
-}
-.emoji .ap-eye {
-  background-position: -100px -100px;
-}
-.emoji .ap-nose {
-  background-position: -100px -120px;
-}
-.emoji .ap-ear {
-  background-position: -100px -140px;
-}
-.emoji .ap-lips {
-  background-position: -100px -160px;
-}
-.emoji .ap-muscle {
-  background-position: -100px -180px;
-}
-.emoji .ap-wave {
-  background-position: -100px -200px;
-}
-.emoji .ap-clap {
-  background-position: -100px -220px;
-}
-.emoji .ap-writing_hand {
-  background-position: -100px -240px;
-}
-.emoji .ap-pray {
-  background-position: -100px -260px;
-}
-.emoji .ap-fist {
-  background-position: -100px -280px;
-}
-.emoji .ap-thumbsup {
-  background-position: -100px -300px;
-}
-.emoji .ap-point_down {
-  background-position: -120px 0;
-}
-.emoji .ap-point_up_2 {
-  background-position: -120px -20px;
-}
-.emoji .ap-middle_finger {
-  background-position: -121px -40px;
-}
-.emoji .ap-point_right {
-  background-position: -120px -60px;
-}
-.emoji .ap-point_left {
-  background-position: -120px -80px;
-}
-.emoji .ap-open_hands {
-  background-position: -120px -100px;
-}
-.emoji .ap-ok_hand {
-  background-position: -120px -120px;
-}
-.emoji .ap-raised_hand_with_fingers_splayed {
-  background-position: -120px -140px;
-}
-.emoji .ap-spock-hand {
-  background-position: -120px -160px;
-}
-.emoji .ap-v {
-  background-position: -120px -180px;
-}
-.emoji .ap-hand {
-  background-position: -120px -200px;
-}
-.emoji .ap-point_up {
-  background-position: -120px -220px;
-}
-.emoji .ap-thumbsdown {
-  background-position: -120px -240px;
-}
-.emoji .ap-facepunch {
-  background-position: -120px -260px;
-}
 .ql-container.ql-snow {
   background-color: var(--fe-editor-bg-color);
 }
@@ -1579,6 +1027,7 @@ html.dark .toolbar-tip__tooltip {
 .ql-editor ol,
 .ql-editor ul {
   margin: 0 0 10px;
+  list-style: none;
 }
 .ql-editor li {
   margin: 0 0 5px;
@@ -1853,349 +1302,6 @@ html.dark .toolbar-tip__tooltip {
 .ql-container .ql-editor li.unchecked {
   color: #252b3a;
 }
-.ap {
-  display: inline-flex;
-  height: 20px;
-  width: 20px;
-  background-size: 140px;
-  background-repeat: no-repeat;
-  text-indent: -999px;
-  box-sizing: border-box;
-  font-size: 20px;
-  line-height: 1;
-  overflow: hidden;
-  margin: -3px 5px 5px;
-}
-.ap-kissing_closed_eyes {
-  background-position: 0 0;
-}
-.ap-stuck_out_tongue {
-  background-position: 0 -20px;
-}
-.ap-stuck_out_tongue_winking_eye {
-  background-position: 0 -40px;
-}
-.ap-stuck_out_tongue_closed_eyes {
-  background-position: 0 -60px;
-}
-.ap-disappointed {
-  background-position: 0 -80px;
-}
-.ap-worried {
-  background-position: 0 -100px;
-}
-.ap-angry {
-  background-position: 0 -120px;
-}
-.ap-rage {
-  background-position: 0 -140px;
-}
-.ap-cry {
-  background-position: 0 -160px;
-}
-.ap-persevere {
-  background-position: 0 -180px;
-}
-.ap-triumph {
-  background-position: 0 -200px;
-}
-.ap-disappointed_relieved {
-  background-position: 0 -220px;
-}
-.ap-frowning {
-  background-position: 0 -240px;
-}
-.ap-anguished {
-  background-position: 0 -260px;
-}
-.ap-fearful {
-  background-position: 0 -280px;
-}
-.ap-weary {
-  background-position: 0 -300px;
-}
-.ap-sleepy {
-  background-position: -20px 0;
-}
-.ap-tired_face {
-  background-position: -20px -20px;
-}
-.ap-grimacing {
-  background-position: -20px -40px;
-}
-.ap-sob {
-  background-position: -20px -60px;
-}
-.ap-open_mouth {
-  background-position: -20px -80px;
-}
-.ap-hushed {
-  background-position: -20px -100px;
-}
-.ap-cold_sweat {
-  background-position: -20px -120px;
-}
-.ap-scream {
-  background-position: -20px -140px;
-}
-.ap-astonished {
-  background-position: -20px -160px;
-}
-.ap-flushed {
-  background-position: -20px -180px;
-}
-.ap-sleeping {
-  background-position: -20px -200px;
-}
-.ap-dizzy_face {
-  background-position: -20px -220px;
-}
-.ap-no_mouth {
-  background-position: -20px -240px;
-}
-.ap-mask {
-  background-position: -20px -260px;
-}
-.ap-grinning {
-  background-position: -20px -280px;
-}
-.ap-grin {
-  background-position: -20px -300px;
-}
-.ap-joy {
-  background-position: -40px 0;
-}
-.ap-smiley {
-  background-position: -40px -20px;
-}
-.ap-smile {
-  background-position: -40px -40px;
-}
-.ap-sweat_smile {
-  background-position: -40px -60px;
-}
-.ap-laughing {
-  background-position: -40px -80px;
-}
-.ap-innocent {
-  background-position: -40px -100px;
-}
-.ap-smiling_imp {
-  background-position: -40px -120px;
-}
-.ap-wink {
-  background-position: -40px -140px;
-}
-.ap-blush {
-  background-position: -40px -160px;
-}
-.ap-yum {
-  background-position: -40px -180px;
-}
-.ap-relieved {
-  background-position: -40px -200px;
-}
-.ap-heart_eyes {
-  background-position: -40px -220px;
-}
-.ap-sunglasses {
-  background-position: -40px -240px;
-}
-.ap-smirk {
-  background-position: -40px -260px;
-}
-.ap-neutral_face {
-  background-position: -40px -280px;
-}
-.ap-expressionless {
-  background-position: -40px -300px;
-}
-.ap-unamused {
-  background-position: -60px 0;
-}
-.ap-sweat {
-  background-position: -60px -20px;
-}
-.ap-pensive {
-  background-position: -60px -40px;
-}
-.ap-confused {
-  background-position: -60px -60px;
-}
-.ap-confounded {
-  background-position: -60px -80px;
-}
-.ap-kissing {
-  background-position: -60px -100px;
-}
-.ap-kissing_heart {
-  background-position: -60px -120px;
-}
-.ap-kissing_smiling_eyes {
-  background-position: -60px -140px;
-}
-.ap-slightly_smiling_face {
-  background-position: -60px -160px;
-}
-.ap-slightly_frowning_face {
-  background-position: -60px -180px;
-}
-.ap-hugging_face {
-  background-position: -60px -200px;
-}
-.ap-face_with_head_bandage {
-  background-position: -60px -220px;
-}
-.ap-thinking_face {
-  background-position: -60px -240px;
-}
-.ap-nerd_face {
-  background-position: -60px -260px;
-}
-.ap-face_with_thermometer {
-  background-position: -60px -280px;
-}
-.ap-money_mouth_face {
-  background-position: -60px -300px;
-}
-.ap-zipper_mouth_face {
-  background-position: -80px 0;
-}
-.ap-relaxed {
-  background-position: -80px -20px;
-}
-.ap-white_frowning_face {
-  background-position: -80px -40px;
-}
-.ap-scream_cat {
-  background-position: -80px -60px;
-}
-.ap-crying_cat_face {
-  background-position: -80px -80px;
-}
-.ap-pouting_cat {
-  background-position: -80px -100px;
-}
-.ap-kissing_cat {
-  background-position: -80px -120px;
-}
-.ap-smirk_cat {
-  background-position: -80px -140px;
-}
-.ap-heart_eyes_cat {
-  background-position: -80px -160px;
-}
-.ap-smiley_cat {
-  background-position: -80px -180px;
-}
-.ap-joy_cat {
-  background-position: -80px -200px;
-}
-.ap-smile_cat {
-  background-position: -80px -220px;
-}
-.ap-robot_face {
-  background-position: -80px -240px;
-}
-.ap-imp {
-  background-position: -80px -260px;
-}
-.ap-skull {
-  background-position: -80px -280px;
-}
-.ap-ghost {
-  background-position: -80px -300px;
-}
-.ap-hankey {
-  background-position: -100px 0;
-}
-.ap-fire {
-  background-position: -100px -20px;
-}
-.ap-space_invader {
-  background-position: -100px -40px;
-}
-.ap-alien {
-  background-position: -100px -60px;
-}
-.ap-eyes {
-  background-position: -100px -80px;
-}
-.ap-eye {
-  background-position: -100px -100px;
-}
-.ap-nose {
-  background-position: -100px -120px;
-}
-.ap-ear {
-  background-position: -100px -140px;
-}
-.ap-lips {
-  background-position: -100px -160px;
-}
-.ap-muscle {
-  background-position: -100px -180px;
-}
-.ap-wave {
-  background-position: -100px -200px;
-}
-.ap-clap {
-  background-position: -100px -220px;
-}
-.ap-writing_hand {
-  background-position: -100px -240px;
-}
-.ap-pray {
-  background-position: -100px -260px;
-}
-.ap-fist {
-  background-position: -100px -280px;
-}
-.ap-thumbsup {
-  background-position: -100px -300px;
-}
-.ap-point_down {
-  background-position: -120px 0;
-}
-.ap-point_up_2 {
-  background-position: -120px -20px;
-}
-.ap-middle_finger {
-  background-position: -121px -40px;
-}
-.ap-point_right {
-  background-position: -120px -60px;
-}
-.ap-point_left {
-  background-position: -120px -80px;
-}
-.ap-open_hands {
-  background-position: -120px -100px;
-}
-.ap-ok_hand {
-  background-position: -120px -120px;
-}
-.ap-raised_hand_with_fingers_splayed {
-  background-position: -120px -140px;
-}
-.ap-spock-hand {
-  background-position: -120px -160px;
-}
-.ap-v {
-  background-position: -120px -180px;
-}
-.ap-hand {
-  background-position: -120px -200px;
-}
-.ap-point_up {
-  background-position: -120px -220px;
-}
-.ap-thumbsdown {
-  background-position: -120px -240px;
-}
-.ap-facepunch {
-  background-position: -120px -260px;
-}
 li.checked::before,
 li.unchecked::before {
   display: inline-block;
@@ -2248,13 +1354,10 @@ li.unchecked > .ql-ui {
   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 rgba(37, 43, 58, 0.2);
-  box-shadow: 0 0 5px var(--devui-light-shadow, rgba(37, 43, 58, 0.2));
   color: #252b3a;
-  color: var(--devui-text, #252b3a);
+  color: #252b3a;
   display: flex;
   padding: 4px;
   white-space: nowrap;
@@ -2277,7 +1380,6 @@ li.unchecked > .ql-ui {
   margin: 4px 8px;
   vertical-align: bottom;
   border-left: 1px solid #adb0b8;
-  border-left: 1px solid var(--devui-line, #adb0b8);
 }
 .ql-file-bar .ql-file-download {
   line-height: 28px;
@@ -2287,7 +1389,6 @@ li.unchecked > .ql-ui {
   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;
@@ -2299,12 +1400,10 @@ li.unchecked > .ql-ui {
   display: block;
   font-size: 16px;
   color: #252b3a;
-  color: var(--devui-text, #252b3a);
   line-height: 28px;
 }
 .ql-file-bar .ql-file-download:hover {
   background-color: #aaaaaf;
-  background-color: var(--devui-list-item-active-bg, #aaaaaf);
 }
 .ql-file-bar .ql-file-download .icon-download {
   font-family: "iconfont" !important;
@@ -2324,7 +1423,6 @@ li.unchecked > .ql-ui {
   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;
@@ -2336,12 +1434,10 @@ li.unchecked > .ql-ui {
   display: block;
   font-size: 16px;
   color: #252b3a;
-  color: var(--devui-text, #252b3a);
   line-height: 28px;
 }
 .ql-file-bar .ql-file-delete:hover {
   background-color: #aaaaaf;
-  background-color: var(--devui-list-item-active-bg, #aaaaaf);
 }
 .ql-file-bar .ql-file-delete .icon-delete {
   font-family: "iconfont" !important;
@@ -2359,13 +1455,9 @@ li.unchecked > .ql-ui {
   transition: width 0.5s ease-in-out; /* 动画持续0.5秒，平滑过渡宽度变化 */
   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 rgba(37, 43, 58, 0.2);
-  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;
@@ -2377,7 +1469,6 @@ li.unchecked > .ql-ui {
   margin: 4px 8px;
   vertical-align: bottom;
   border-left: 1px solid #adb0b8;
-  border-left: 1px solid var(--devui-line, #adb0b8);
 }
 .ql-image-bar .ql-image-preview {
   line-height: 28px;
@@ -2387,7 +1478,6 @@ li.unchecked > .ql-ui {
   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;
@@ -2399,7 +1489,6 @@ li.unchecked > .ql-ui {
   display: block;
   font-size: 16px;
   color: #252b3a;
-  color: var(--devui-text, #252b3a);
   line-height: 28px;
 }
 .ql-image-bar .ql-image-preview svg {
@@ -2410,7 +1499,6 @@ li.unchecked > .ql-ui {
 }
 .ql-image-bar .ql-image-preview:hover {
   background-color: #aaaaaf;
-  background-color: var(--devui-list-item-active-bg, #aaaaaf);
 }
 .ql-image-bar .ql-image-preview .icon-preview {
   font-family: "iconfont" !important;
@@ -2430,7 +1518,6 @@ li.unchecked > .ql-ui {
   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;
@@ -2442,7 +1529,6 @@ li.unchecked > .ql-ui {
   display: block;
   font-size: 16px;
   color: #252b3a;
-  color: var(--devui-text, #252b3a);
   line-height: 28px;
 }
 .ql-image-bar .ql-image-download svg {
@@ -2453,7 +1539,6 @@ li.unchecked > .ql-ui {
 }
 .ql-image-bar .ql-image-download:hover {
   background-color: #aaaaaf;
-  background-color: var(--devui-list-item-active-bg, #aaaaaf);
 }
 .ql-image-bar .ql-image-download .icon-download {
   font-family: "iconfont" !important;
@@ -2473,7 +1558,6 @@ li.unchecked > .ql-ui {
   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;
@@ -2485,7 +1569,6 @@ li.unchecked > .ql-ui {
   display: block;
   font-size: 16px;
   color: #252b3a;
-  color: var(--devui-text, #252b3a);
   line-height: 28px;
 }
 .ql-image-bar .ql-image-copy svg {
@@ -2496,7 +1579,6 @@ li.unchecked > .ql-ui {
 }
 .ql-image-bar .ql-image-copy:hover {
   background-color: #aaaaaf;
-  background-color: var(--devui-list-item-active-bg, #aaaaaf);
 }
 .ql-image-bar .ql-image-delete {
   line-height: 28px;
@@ -2506,7 +1588,6 @@ li.unchecked > .ql-ui {
   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;
@@ -2518,7 +1599,6 @@ li.unchecked > .ql-ui {
   display: block;
   font-size: 16px;
   color: #252b3a;
-  color: var(--devui-text, #252b3a);
   line-height: 28px;
 }
 .ql-image-bar .ql-image-delete svg {
@@ -2529,7 +1609,6 @@ li.unchecked > .ql-ui {
 }
 .ql-image-bar .ql-image-delete:hover {
   background-color: #aaaaaf;
-  background-color: var(--devui-list-item-active-bg, #aaaaaf);
 }
 .ql-image-bar .ql-image-delete .icon-delete {
   font-family: "iconfont" !important;
@@ -2545,13 +1624,9 @@ li.unchecked > .ql-ui {
   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 rgba(37, 43, 58, 0.2);
-  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;
 }
@@ -2582,7 +1657,6 @@ li.unchecked > .ql-ui {
   padding: 0 6px;
   width: 200px;
   background-color: #fff;
-  background-color: var(--devui-base-bg, #fff);
 }
 #editor .ql-tooltip .ql-split {
   width: 1px;
@@ -2590,7 +1664,6 @@ li.unchecked > .ql-ui {
   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;
 }
@@ -2598,7 +1671,6 @@ li.unchecked > .ql-ui {
   display: block;
   font-size: 16px;
   color: #252b3a;
-  color: var(--devui-text, #252b3a);
   line-height: 28px;
   font-family: "iconfont" !important;
   font-size: 16px;
@@ -2613,7 +1685,6 @@ li.unchecked > .ql-ui {
   display: block;
   font-size: 16px;
   color: #252b3a;
-  color: var(--devui-text, #252b3a);
   line-height: 28px;
   font-family: "iconfont" !important;
   font-size: 16px;
@@ -2632,7 +1703,6 @@ li.unchecked > .ql-ui {
   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;
@@ -2644,7 +1714,6 @@ li.unchecked > .ql-ui {
   display: block;
   font-size: 16px;
   color: #babbc0;
-  color: var(--devui-aide-text, #babbc0);
   line-height: 28px;
 }
 #editor .ql-tooltip a:hover {
@@ -2791,6 +1860,96 @@ li.unchecked > .ql-ui {
 .ql-tooltip.math-field-tooltip .ql-math-field::part(container) {
   font-size: 24px;
 }
+.ql-ai-dialog {
+  position: absolute;
+  left: 15px;
+}
+.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;
+  background: white;
+  border: 1px solid #c2c2c2;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
+}
+.ql-ai-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ql-ai-icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+.ql-ai-input input {
+  flex: 1;
+  padding: 8px;
+  border: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+.ql-ai-result {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 0;
+  right: 0;
+  padding: 10px;
+  background: white;
+  border: 1px solid #c2c2c2;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
+  max-height: 200px;
+  overflow-y: auto;
+}
+.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;
+  background: white;
+  border: 1px solid #c2c2c2;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
+  z-index: 1001;
+  min-width: 100px;
+}
+.ql-ai-action-item {
+  padding: 8px 12px;
+  cursor: pointer;
+}
+.ql-ai-action-item:hover {
+  background: #f5f5f5;
+}
+.ql-ai-send {
+  margin-left: 8px;
+  padding: 2px 8px;
+  background: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+}
+.ql-ai-send:hover {
+  background: #40a9ff;
+}
 .ql-counter {
   width: 100%;
   bottom: 0;