From eee22363d3a0de8333a6b6f8815ef178fbfc3c8d Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Sun, 14 Apr 2024 14:48:30 +0800 Subject: [PATCH] feat: control default style #340 --- docs/en/guide/schema.md | 7 +++ docs/guide/schema.md | 7 +++ .../core/draw/control/select/SelectControl.ts | 16 ++++--- .../core/draw/control/text/TextControl.ts | 11 ++++- src/editor/dataset/constant/Element.ts | 11 +++++ src/editor/interface/Control.ts | 13 +++++- src/editor/utils/element.ts | 45 ++++++++++++++----- 7 files changed, 89 insertions(+), 21 deletions(-) diff --git a/docs/en/guide/schema.md b/docs/en/guide/schema.md index af32558..0c5947e 100644 --- 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', diff --git a/docs/guide/schema.md b/docs/guide/schema.md index c533eb0..c173cf6 100644 --- 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', diff --git a/src/editor/core/draw/control/select/SelectControl.ts b/src/editor/core/draw/control/select/SelectControl.ts index c53aa72..0ea4043 100644 --- 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 diff --git a/src/editor/core/draw/control/text/TextControl.ts b/src/editor/core/draw/control/text/TextControl.ts index 7bd98b4..836fdfc 100644 --- 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 diff --git a/src/editor/dataset/constant/Element.ts b/src/editor/dataset/constant/Element.ts index 292b991..fb541e6 100644 --- 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 = [ 'bold', @@ -99,6 +100,16 @@ export const CONTROL_CONTEXT_ATTR: Array = [ 'controlComponent' ] +export const CONTROL_STYLE_ATTR: Array = [ + 'font', + 'size', + 'bold', + 'color', + 'highlight', + 'italic', + 'strikeout' +] + export const EDITOR_ELEMENT_CONTEXT_ATTR: Array = [ ...TABLE_CONTEXT_ATTR, ...TITLE_CONTEXT_ATTR, diff --git a/src/editor/interface/Control.ts b/src/editor/interface/Control.ts index 60d1e5b..21dc6c2 100644 --- 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 & - Partial + Partial & + Partial export interface IControlOption { placeholderColor?: string diff --git a/src/editor/utils/element.ts b/src/editor/utils/element.ts index 56b9397..488b053 100644 --- 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( + (el.control), + CONTROL_STYLE_ATTR + ) // 前后缀个性化设置 - const thePrePostfixArgs: Pick = {} - if (editorOptions && editorOptions.control) { - thePrePostfixArgs.color = editorOptions.control.bracketColor + const thePrePostfixArg: Omit = { + ...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 = {} - if (editorOptions && editorOptions.control) { + const thePlaceholderArgs: Omit = { + ...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 = ( + (pickObject(element, CONTROL_STYLE_ATTR)) + ) + const control = { + ...element.control!, + ...controlDefaultStyle + } const controlElement: IElement = { type: ElementType.CONTROL, value: '',