fix(fluent-editor): [fluent-editor] change theme

examples/sites/demos/pc/app/fluent-editor/basic-usage.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('fluent-editor#basic-usage')
+  await page
+    .locator('#basic-usage #editor div')
+    .filter({ hasText: 'Hello FluentEditor!' })
+    .fill('Hello FluentEditor!1234')
+  await page.locator('#basic-usage #editor div').filter({ hasText: 'Hello FluentEditor!' }).press('ControlOrMeta+a')
+  await page.locator('#basic-usage').getByLabel('bold').click()
+  await page.locator('#basic-usage #editor div').filter({ hasText: 'Hello FluentEditor!' }).click()
+  const cls = page.locator('.ql-editor strong')
+  await expect(cls.first()).toHaveCSS('font-weight', '700')
+})

examples/sites/demos/pc/app/fluent-editor/before-editor-init.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test'
+
+test('初始化前的钩子', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('fluent-editor#before-editor-init')
+  const demo = page.locator('#before-editor-init')
+  await page.locator('#before-editor-init').getByText('Hello FluentEditor!').click()
+  await page
+    .locator('#before-editor-init #editor div')
+    .filter({ hasText: 'Hello FluentEditor!' })
+    .press('ControlOrMeta+a')
+  await demo.getByLabel('good').click()
+  const cls = demo.locator('.ql-editor strong')
+  await expect(cls).toHaveCSS('color', 'rgb(92, 179, 0)')
+  await page
+    .locator('#before-editor-init #editor div')
+    .filter({ hasText: 'Hello FluentEditor!' })
+    .press('ControlOrMeta+a')
+  await demo.getByLabel('bad').click()
+  await expect(cls).toHaveCSS('color', 'rgb(242, 48, 48)')
+})

examples/sites/demos/pc/app/fluent-editor/data-switch.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('数据格式转换', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('fluent-editor#data-switch')
+  const demo = page.locator('#data-switch')
+  await page.locator('#data-switch').getByText('Hello FluentEditor!').click()
+  await page.locator('#data-switch #editor div').filter({ hasText: 'Hello FluentEditor!' }).press('ControlOrMeta+a')
+  await page.locator('#data-switch').getByLabel('clean').click()
+  const cls = demo.locator('.ql-editor p')
+  await expect(cls).not.toHaveClass('.ql-editor strong')
+})

examples/sites/demos/pc/app/fluent-editor/disabled.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('禁用状态', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('fluent-editor#disabled')
+  const demo = page.locator('#disabled')
+  const cls = demo.locator('.ql-disabled')
+  await expect(cls).toHaveId('editor')
+})

examples/sites/demos/pc/app/fluent-editor/image-upload.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test'
+
+test('图片上传', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('fluent-editor#image-upload')
+  await page.locator('#image-upload').getByLabel('image').click()
+})

examples/sites/demos/pc/app/fluent-editor/options.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('编辑器配置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('fluent-editor#options')
+  const demo = page.locator('#options')
+  const cls = demo.locator('.tiny-editor-wrapper .ql-toolbar.ql-snow .ql-formats > button')
+  await expect(cls).toHaveCount(14)
+})

packages/theme/src/fluent-editor/index.less

@@ -1,17 +1,33 @@
 @import '../custom.less';
 @import '../mixins/common.less';
+@import './vars.less';
 
 @editor-wrapper-prefix-cls: ~'@{css-prefix}editor-wrapper';
 @editor-prefix-cls: ~'@{css-prefix}editor';
 
 .@{editor-wrapper-prefix-cls} {
+  .inject-FluentEditor-vars();
+
   border: 1px solid #ddd;
   border-radius: 4px;
 
   .ql-toolbar.ql-snow {
     padding: 8px 16px 4px 16px;
     border: none;
 
+    svg {
+      font-size: 16px;
+
+      path {
+        fill: var(--tv-FluentEditor-select-icon-color);
+
+        &:hover,
+        &:focus {
+          fill: var(--tv-FluentEditor-select-icon-color-hover);
+        }
+      }
+    }
+
     .ql-formats {
       margin-right: 16px;
       margin-bottom: 4px;
@@ -46,28 +62,36 @@
       span.ql-lineheight,
       span.ql-header {
         .ql-picker-label {
-          color: #191919;
+          color: var(--tv-FluentEditor-selected-text-color);
           border: 1px solid transparent;
           border-radius: 2px;
 
           > svg {
             display: none;
           }
 
+          &:hover {
+            border-color: var(--tv-FluentEditor-select-border-color-hover);
+          }
+
           &::after {
+            display: inline-block;
             content: '';
             position: absolute;
-            width: 14px;
-            height: 14px;
+            width: 8px;
+            height: 8px;
             right: 8px;
-            top: calc(50% + 1px);
-            transform: translateY(-50%);
-            background: url(../images/chevron-down.svg) no-repeat center/100%;
+            top: calc(50% - 5px);
+            border-color: var(--tv-FluentEditor-select-box-icon-color);
+            border-style: solid;
+            border-width: 0 2px 2px 0;
+            transform: rotate(45deg);
           }
         }
 
         .ql-picker-label:hover {
-          border-color: #191919;
+          border-color: var(--tv-FluentEditor-select-border-color-hover);
+          color: var(--tv-FluentEditor-select-text-color);
         }
       }
 
@@ -104,13 +128,16 @@
         .ql-picker-options {
           padding: 3px 5px;
           border: none;
+          background-color: var(--tv-FluentEditor-select-bg-color);
+          border-radius: var(--tv-FluentEditor-select-border-radius);
+          box-shadow: var(--tv-FluentEditor-select-box-shadow);
 
           > .ql-picker-item {
-            color: #191919;
+            color: var(--tv-FluentEditor-select-text-color);
 
             &:hover {
-              background-color: rgba(25, 25, 25, 0.1);
-              color: #191919;
+              background-color: var(--tv-FluentEditor-select-bg-color-hover);
+              color: var(--tv-FluentEditor-select-active-text-color);
             }
 
             &::after {

packages/theme/src/fluent-editor/vars.less

@@ -0,0 +1,36 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+.inject-FluentEditor-vars() {
+  // 富文本图标颜色
+  --tv-FluentEditor-select-icon-color: var(--tv-color-icon);
+  // 富文本图标悬浮颜色
+  --tv-FluentEditor-select-icon-color-hover: var(--tv-color-icon-hover);
+  // 富文本下拉选项背景色
+  --tv-FluentEditor-select-bg-color: var(--tv-color-bg-2);
+  // 富文本下拉选项选中悬浮背景色
+  --tv-FluentEditor-select-bg-color-hover: var(--tv-color-bg-hover);
+  // 富文本下拉选项文字
+  --tv-FluentEditor-select-text-color: var(--tv-color-text);
+  // 富文本下拉选项文字边框
+  --tv-FluentEditor-select-border-color-hover: var(--tv-color-border-hover);
+  // 富文本下拉已选文字颜色
+  --tv-FluentEditor-selected-text-color: var(--tv-color-text-secondary);
+  // 富文本下拉选项选中文字颜色
+  --tv-FluentEditor-select-active-text-color: var(--tv-color-text-active);
+  // 富文本下拉选项面板圆角半径
+  --tv-FluentEditor-select-border-radius: var(--tv-border-radius-md);
+  // 富文本下拉选项面板阴影
+  --tv-FluentEditor-select-box-shadow: var(--tv-shadow-2-down);
+  // 富文本下拉框的图标颜色
+  --tv-FluentEditor-select-box-icon-color: var(--tv-color-icon);
+}