feat: control default style #340

2 years ago · eee22363d3
parent de06f6cc9b
commit eee22363d3
7 changed files with 89 additions and 21 deletions
--- a/docs/en/guide/schema.md
+++ b/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',
--- a/docs/guide/schema.md
+++ b/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',
--- a/src/editor/core/draw/control/select/SelectControl.ts
+++ b/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 styleElement = pickObject(
-      this.getValue(context)[0],
-      EDITOR_ELEMENT_STYLE_ATTR
-    )
+    const range = context.range || this.control.getRange()
+    // 样式赋值元素-默认值的第一个字符样式，否则取默认样式
+    const valueElement = this.getValue(context)[0]
+    const styleElement = valueElement
+      ? pickObject(valueElement, EDITOR_ELEMENT_STYLE_ATTR)
+      : pickObject(elementList[range.startIndex], CONTROL_STYLE_ATTR)
    // 清空选项
    const prefixIndex = this.clearSelect(context)
    if (!~prefixIndex) return
--- a/src/editor/core/draw/control/text/TextControl.ts
+++ b/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
--- a/src/editor/dataset/constant/Element.ts
+++ b/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,
--- a/src/editor/interface/Control.ts
+++ b/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
--- a/src/editor/utils/element.ts
+++ b/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'> = {}
-      if (editorOptions && editorOptions.control) {
-        thePrePostfixArgs.color = editorOptions.control.bracketColor
+      const thePrePostfixArg: Omit<IElement, 'value'> = {
+        ...controlDefaultStyle
+      }
+      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,
-          ...thePrePostfixArgs
+          controlComponent: ControlComponent.PREFIX
        })
        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'> = {}
-        if (editorOptions && editorOptions.control) {
+        const thePlaceholderArgs: Omit<IElement, 'value'> = {
+          ...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,
-            ...thePlaceholderArgs
+            controlComponent: ControlComponent.PLACEHOLDER
          })
          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,
-          ...thePrePostfixArgs
+          controlComponent: ControlComponent.POSTFIX
        })
        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: '',