feat: control default style #340

docs/en/guide/schema.md

@@ -101,6 +101,13 @@ interface IElement {
       code?: string;
       disabled?: boolean;
     };
+    font?: string;
+    size?: number;
+    bold?: boolean;
+    color?: string;
+    highlight?: string;
+    italic?: boolean;
+    strikeout?: boolean;
   };
   controlComponent?: {
     PREFIX = 'prefix',

docs/guide/schema.md

@@ -101,6 +101,13 @@ interface IElement {
       code?: string;
       disabled?: boolean;
     };
+    font?: string;
+    size?: number;
+    bold?: boolean;
+    color?: string;
+    highlight?: string;
+    italic?: boolean;
+    strikeout?: boolean;
   };
   controlComponent?: {
     PREFIX = 'prefix',

src/editor/core/draw/control/select/SelectControl.ts

@@ -2,7 +2,10 @@ import {
   EDITOR_COMPONENT,
   EDITOR_PREFIX
 } from '../../../../dataset/constant/Editor'
-import { EDITOR_ELEMENT_STYLE_ATTR } from '../../../../dataset/constant/Element'
+import {
+  CONTROL_STYLE_ATTR,
+  EDITOR_ELEMENT_STYLE_ATTR
+} from '../../../../dataset/constant/Element'
 import { ControlComponent } from '../../../../dataset/enum/Control'
 import { EditorComponent } from '../../../../dataset/enum/Editor'
 import { ElementType } from '../../../../dataset/enum/Element'
@@ -211,11 +214,12 @@ export class SelectControl implements IControlInstance {
     const valueSet = valueSets.find(v => v.code === code)
     if (!valueSet) return
     const elementList = context.elementList || this.control.getElementList()
-    // 样式赋值元素-默认值的第一个字符样式
+    const range = context.range || this.control.getRange()
-    const styleElement = pickObject(
+    // 样式赋值元素-默认值的第一个字符样式，否则取默认样式
-      this.getValue(context)[0],
+    const valueElement = this.getValue(context)[0]
-      EDITOR_ELEMENT_STYLE_ATTR
+    const styleElement = valueElement
-    )
+      ? pickObject(valueElement, EDITOR_ELEMENT_STYLE_ATTR)
+      : pickObject(elementList[range.startIndex], CONTROL_STYLE_ATTR)
     // 清空选项
     const prefixIndex = this.clearSelect(context)
     if (!~prefixIndex) return

src/editor/core/draw/control/text/TextControl.ts

@@ -1,4 +1,7 @@
-import { TEXTLIKE_ELEMENT_TYPE } from '../../../../dataset/constant/Element'
+import {
+  CONTROL_STYLE_ATTR,
+  TEXTLIKE_ELEMENT_TYPE
+} from '../../../../dataset/constant/Element'
 import { ControlComponent } from '../../../../dataset/enum/Control'
 import { KeyMap } from '../../../../dataset/enum/KeyMap'
 import {
@@ -90,7 +93,11 @@ export class TextControl implements IControlInstance {
       (startElement.type &&
         !TEXTLIKE_ELEMENT_TYPE.includes(startElement.type)) ||
       startElement.controlComponent === ControlComponent.PREFIX
-        ? pickObject(startElement, ['control', 'controlId'])
+        ? pickObject(startElement, [
+            'control',
+            'controlId',
+            ...CONTROL_STYLE_ATTR
+          ])
         : omitObject(startElement, ['type'])
     // 插入起始位置
     const start = range.startIndex + 1

src/editor/dataset/constant/Element.ts

@@ -1,6 +1,7 @@
 import { ElementType } from '../enum/Element'
 import { IElement } from '../../interface/Element'
 import { ITd } from '../../interface/table/Td'
+import { IControlStyle } from '../../interface/Control'
 
 export const EDITOR_ELEMENT_STYLE_ATTR: Array<keyof IElement> = [
   'bold',
@@ -99,6 +100,16 @@ export const CONTROL_CONTEXT_ATTR: Array<keyof IElement> = [
   'controlComponent'
 ]
 
+export const CONTROL_STYLE_ATTR: Array<keyof IControlStyle> = [
+  'font',
+  'size',
+  'bold',
+  'color',
+  'highlight',
+  'italic',
+  'strikeout'
+]
+
 export const EDITOR_ELEMENT_CONTEXT_ATTR: Array<keyof IElement> = [
   ...TABLE_CONTEXT_ATTR,
   ...TITLE_CONTEXT_ATTR,

src/editor/interface/Control.ts

@@ -52,10 +52,21 @@ export interface IControlBasic {
   indentation?: ControlIndentation
 }
 
+export interface IControlStyle {
+  font?: string
+  size?: number
+  bold?: boolean
+  color?: string
+  highlight?: string
+  italic?: boolean
+  strikeout?: boolean
+}
+
 export type IControl = IControlBasic &
   IControlRule &
   Partial<IControlSelect> &
-  Partial<IControlCheckbox>
+  Partial<IControlCheckbox> &
+  Partial<IControlStyle>
 
 export interface IControlOption {
   placeholderColor?: string

src/editor/utils/element.ts

@@ -4,6 +4,7 @@ import {
   deepCloneOmitKeys,
   getUUID,
   isArrayEqual,
+  pickObject,
   splitText
 } from '.'
 import {
@@ -19,6 +20,7 @@ import {
 import { LaTexParticle } from '../core/draw/particle/latex/LaTexParticle'
 import { NON_BREAKING_SPACE, ZERO } from '../dataset/constant/Common'
 import {
+  CONTROL_STYLE_ATTR,
   EDITOR_ELEMENT_CONTEXT_ATTR,
   EDITOR_ELEMENT_ZIP_ATTR,
   INLINE_NODE_NAME,
@@ -40,6 +42,7 @@ import {
 import { ControlComponent, ControlType } from '../dataset/enum/Control'
 import { UlStyle } from '../dataset/enum/List'
 import { DeepRequired } from '../interface/Common'
+import { IControlSelect } from '../interface/Control'
 import { IRowElement } from '../interface/Row'
 import { ITd } from '../interface/table/Td'
 import { ITr } from '../interface/table/Tr'
@@ -224,22 +227,29 @@ export function formatElementList(
       const controlId = getUUID()
       // 移除父节点
       elementList.splice(i, 1)
+      // 控件设置的默认样式（以前缀为基准）
+      const controlDefaultStyle = pickObject(
+        <IElement>(<unknown>el.control),
+        CONTROL_STYLE_ATTR
+      )
       // 前后缀个性化设置
-      const thePrePostfixArgs: Pick<IElement, 'color'> = {}
+      const thePrePostfixArg: Omit<IElement, 'value'> = {
-      if (editorOptions && editorOptions.control) {
+        ...controlDefaultStyle
-        thePrePostfixArgs.color = editorOptions.control.bracketColor
+      }
+      if (!thePrePostfixArg.color) {
+        thePrePostfixArg.color = editorOptions.control.bracketColor
       }
       // 前缀
       const prefixStrList = splitText(prefix || controlOption.prefix)
       for (let p = 0; p < prefixStrList.length; p++) {
         const value = prefixStrList[p]
         elementList.splice(i, 0, {
+          ...thePrePostfixArg,
           controlId,
           value,
           type: el.type,
           control: el.control,
-          controlComponent: ControlComponent.PREFIX,
+          controlComponent: ControlComponent.PREFIX
-          ...thePrePostfixArgs
         })
         i++
       }
@@ -283,6 +293,7 @@ export function formatElementList(
                 const value = valueStrList[e]
                 const isLastLetter = e === valueStrList.length - 1
                 elementList.splice(i, 0, {
+                  ...controlDefaultStyle,
                   ...valueStyleList[valueStyleIndex],
                   controlId,
                   value: value === '\n' ? ZERO : value,
@@ -316,6 +327,7 @@ export function formatElementList(
             const element = valueList[v]
             const value = element.value
             elementList.splice(i, 0, {
+              ...controlDefaultStyle,
               ...element,
               controlId,
               value: value === '\n' ? ZERO : value,
@@ -328,20 +340,22 @@ export function formatElementList(
         }
       } else if (placeholder) {
         // placeholder
-        const thePlaceholderArgs: Pick<IElement, 'color'> = {}
+        const thePlaceholderArgs: Omit<IElement, 'value'> = {
-        if (editorOptions && editorOptions.control) {
+          ...controlDefaultStyle
+        }
+        if (editorOptions?.control?.placeholderColor) {
           thePlaceholderArgs.color = editorOptions.control.placeholderColor
         }
         const placeholderStrList = splitText(placeholder)
         for (let p = 0; p < placeholderStrList.length; p++) {
           const value = placeholderStrList[p]
           elementList.splice(i, 0, {
+            ...thePlaceholderArgs,
             controlId,
             value: value === '\n' ? ZERO : value,
             type: el.type,
             control: el.control,
-            controlComponent: ControlComponent.PLACEHOLDER,
+            controlComponent: ControlComponent.PLACEHOLDER
-            ...thePlaceholderArgs
           })
           i++
         }
@@ -351,12 +365,12 @@ export function formatElementList(
       for (let p = 0; p < postfixStrList.length; p++) {
         const value = postfixStrList[p]
         elementList.splice(i, 0, {
+          ...thePrePostfixArg,
           controlId,
           value,
           type: el.type,
           control: el.control,
-          controlComponent: ControlComponent.POSTFIX,
+          controlComponent: ControlComponent.POSTFIX
-          ...thePrePostfixArgs
         })
         i++
       }
@@ -589,7 +603,14 @@ export function zipElementList(payload: IElement[]): IElement[] {
       // 控件处理
       const controlId = element.controlId
       if (controlId) {
-        const control = element.control!
+        // 以前缀为基准更新控件默认样式
+        const controlDefaultStyle = <IControlSelect>(
+          (<unknown>pickObject(element, CONTROL_STYLE_ATTR))
+        )
+        const control = {
+          ...element.control!,
+          ...controlDefaultStyle
+        }
         const controlElement: IElement = {
           type: ElementType.CONTROL,
           value: '',