feat: add title disabled property #680

docs/en/guide/schema.md

@@ -157,6 +157,7 @@ interface IElement {
   title?: {
     conceptId?: string;
     deletable?: boolean;
+    disabled?: boolean;
   };
   // list
   listType?: ListType;

docs/guide/schema.md

@@ -157,6 +157,7 @@ interface IElement {
   title?: {
     conceptId?: string;
     deletable?: boolean;
+    disabled?: boolean;
   };
   // 列表
   listType?: ListType;

src/editor/core/command/CommandAdapt.ts

@@ -300,15 +300,13 @@ export class CommandAdapt {
   }
 
   public applyPainterStyle() {
-    const isDisabled =
-      this.draw.isReadonly() || this.control.getIsDisabledControl()
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     this.canvasEvent.applyPainterStyle()
   }
 
   public format() {
-    const isDisabled =
-      this.draw.isReadonly() || this.control.getIsDisabledControl()
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     // 选区设置或设置换行处样式
@@ -336,8 +334,7 @@ export class CommandAdapt {
   }
 
   public font(payload: string) {
-    const isDisabled =
-      this.draw.isReadonly() || this.control.getIsDisabledControl()
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (selection?.length) {
@@ -359,8 +356,7 @@ export class CommandAdapt {
   public size(payload: number) {
     const { minSize, maxSize, defaultSize } = this.options
     if (payload < minSize || payload > maxSize) return
-    const isDisabled =
-      this.draw.isReadonly() || this.control.getIsDisabledControl()
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     // 选区设置或设置换行处样式
     let renderOption: IDrawOption = {}
@@ -396,8 +392,7 @@ export class CommandAdapt {
   }
 
   public sizeAdd() {
-    const isDisabled =
-      this.draw.isReadonly() || this.control.getIsDisabledControl()
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     const selection = this.range.getTextLikeSelectionElementList()
     // 选区设置或设置换行处样式
@@ -436,8 +431,7 @@ export class CommandAdapt {
   }
 
   public sizeMinus() {
-    const isDisabled =
-      this.draw.isReadonly() || this.control.getIsDisabledControl()
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     const selection = this.range.getTextLikeSelectionElementList()
     // 选区设置或设置换行处样式
@@ -476,8 +470,7 @@ export class CommandAdapt {
   }
 
   public bold() {
-    const isDisabled =
-      this.draw.isReadonly() || this.control.getIsDisabledControl()
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (selection?.length) {
@@ -498,8 +491,7 @@ export class CommandAdapt {
   }
 
   public italic() {
-    const isDisabled =
-      this.draw.isReadonly() || this.control.getIsDisabledControl()
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (selection?.length) {
@@ -520,8 +512,7 @@ export class CommandAdapt {
   }
 
   public underline(textDecoration?: ITextDecoration) {
-    const isDisabled =
-      this.draw.isReadonly() || this.control.getIsDisabledControl()
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (selection?.length) {
@@ -559,8 +550,7 @@ export class CommandAdapt {
   }
 
   public strikeout() {
-    const isDisabled =
-      this.draw.isReadonly() || this.control.getIsDisabledControl()
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (selection?.length) {
@@ -584,8 +574,7 @@ export class CommandAdapt {
   }
 
   public superscript() {
-    const isDisabled =
-      this.draw.isReadonly() || this.control.getIsDisabledControl()
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (!selection) return
@@ -614,8 +603,7 @@ export class CommandAdapt {
   }
 
   public subscript() {
-    const isDisabled =
-      this.draw.isReadonly() || this.control.getIsDisabledControl()
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (!selection) return
@@ -644,8 +632,7 @@ export class CommandAdapt {
   }
 
   public color(payload: string | null) {
-    const isDisabled =
-      this.draw.isReadonly() || this.control.getIsDisabledControl()
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (selection?.length) {
@@ -676,8 +663,7 @@ export class CommandAdapt {
   }
 
   public highlight(payload: string | null) {
-    const isDisabled =
-      this.draw.isReadonly() || this.control.getIsDisabledControl()
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     const selection = this.range.getSelectionElementList()
     if (selection?.length) {
@@ -1802,8 +1788,7 @@ export class CommandAdapt {
   }
 
   public image(payload: IDrawImagePayload) {
-    const isDisabled =
-      this.draw.isReadonly() || this.control.getIsDisabledControl()
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
     if (isDisabled) return
     const { startIndex, endIndex } = this.range.getRange()
     if (!~startIndex && !~endIndex) return

src/editor/core/draw/Draw.ts

@@ -317,6 +317,23 @@ export class Draw {
     }
   }
 
+  public isDisabled() {
+    const { startIndex, endIndex } = this.range.getRange()
+    const elementList = this.getElementList()
+    if (startIndex === endIndex) {
+      const startElement = elementList[startIndex]
+      const nextElement = elementList[startIndex + 1]
+      return !!(
+        (startElement?.title?.disabled && nextElement?.title?.disabled) ||
+        (startElement?.control?.disabled && nextElement?.control?.disabled)
+      )
+    }
+    const selectionElementList = elementList.slice(startIndex + 1, endIndex + 1)
+    return selectionElementList.some(
+      element => element.title?.disabled || element.control?.disabled
+    )
+  }
+
   public getOriginalWidth(): number {
     const { paperDirection, width, height } = this.options
     return paperDirection === PaperDirection.VERTICAL ? width : height

src/editor/core/draw/control/Control.ts

@@ -208,7 +208,16 @@ export class Control {
   }
 
   public getIsDisabledControl(): boolean {
-    return !!this.activeControl?.getElement().control?.disabled
+    if (!this.activeControl) return false
+    const { startIndex, endIndex } = this.range.getRange()
+    if (startIndex === endIndex) {
+      const elementList = this.getElementList()
+      const startElement = elementList[startIndex]
+      if (startElement.controlComponent === ControlComponent.POSTFIX) {
+        return false
+      }
+    }
+    return !!this.activeControl.getElement()?.control?.disabled
   }
 
   public getContainer(): HTMLDivElement {

src/editor/core/event/CanvasEvent.ts

@@ -106,6 +106,8 @@ export class CanvasEvent {
   public applyPainterStyle() {
     const painterStyle = this.draw.getPainterStyle()
     if (!painterStyle) return
+    const isDisabled = this.draw.isReadonly() || this.draw.isDisabled()
+    if (isDisabled) return
     const selection = this.range.getSelection()
     if (!selection) return
     const painterStyleKeys = Object.keys(painterStyle)

src/editor/core/event/handlers/input.ts

@@ -8,7 +8,7 @@ import { CanvasEvent } from '../CanvasEvent'
 
 export function input(data: string, host: CanvasEvent) {
   const draw = host.getDraw()
-  if (draw.isReadonly()) return
+  if (draw.isReadonly() || draw.isDisabled()) return
   const position = draw.getPosition()
   const cursorPosition = position.getCursorPosition()
   if (!data || !cursorPosition) return
@@ -34,6 +34,7 @@ export function input(data: string, host: CanvasEvent) {
     const newElement: IElement = {
       value
     }
+    if (!copyElement.title?.disabled && !copyElement.control?.disabled) {
       const nextElement = elementList[endIndex + 1]
       if (
         !copyElement.type ||
@@ -55,6 +56,7 @@ export function input(data: string, host: CanvasEvent) {
       if (isComposing) {
         newElement.underline = true
       }
+    }
     return newElement
   })
   // 控件-移除placeholder

src/editor/core/event/handlers/mouseup.ts

@@ -48,7 +48,10 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
   // 判断是否允许拖放
   if (host.isAllowDrop) {
     const draw = host.getDraw()
-    if (draw.isReadonly()) return
+    if (draw.isReadonly() || draw.isDisabled()) {
+      host.mousedown(evt)
+      return
+    }
     const position = draw.getPosition()
     const positionList = position.getPositionList()
     const positionContext = position.getPositionContext()

src/editor/core/event/handlers/paste.ts

@@ -17,8 +17,7 @@ import { IOverrideResult } from '../../override/Override'
 
 export function pasteElement(host: CanvasEvent, elementList: IElement[]) {
   const draw = host.getDraw()
-  const isReadonly = draw.isReadonly()
-  if (isReadonly) return
+  if (draw.isReadonly() || draw.isDisabled()) return
   const rangeManager = draw.getRange()
   const { startIndex } = rangeManager.getRange()
   const originalElementList = draw.getElementList()
@@ -59,8 +58,7 @@ export function pasteElement(host: CanvasEvent, elementList: IElement[]) {
 
 export function pasteHTML(host: CanvasEvent, htmlText: string) {
   const draw = host.getDraw()
-  const isReadonly = draw.isReadonly()
-  if (isReadonly) return
+  if (draw.isReadonly() || draw.isDisabled()) return
   const elementList = getElementListByHTML(htmlText, {
     innerWidth: draw.getOriginalInnerWidth()
   })
@@ -69,8 +67,7 @@ export function pasteHTML(host: CanvasEvent, htmlText: string) {
 
 export function pasteImage(host: CanvasEvent, file: File | Blob) {
   const draw = host.getDraw()
-  const isReadonly = draw.isReadonly()
-  if (isReadonly) return
+  if (draw.isReadonly() || draw.isDisabled()) return
   const rangeManager = draw.getRange()
   const { startIndex } = rangeManager.getRange()
   const elementList = draw.getElementList()
@@ -99,8 +96,7 @@ export function pasteImage(host: CanvasEvent, file: File | Blob) {
 
 export function pasteByEvent(host: CanvasEvent, evt: ClipboardEvent) {
   const draw = host.getDraw()
-  const isReadonly = draw.isReadonly()
-  if (isReadonly) return
+  if (draw.isReadonly() || draw.isDisabled()) return
   const clipboardData = evt.clipboardData
   if (!clipboardData) return
   // 自定义粘贴事件
@@ -157,8 +153,7 @@ export function pasteByEvent(host: CanvasEvent, evt: ClipboardEvent) {
 
 export async function pasteByApi(host: CanvasEvent, options?: IPasteOption) {
   const draw = host.getDraw()
-  const isReadonly = draw.isReadonly()
-  if (isReadonly) return
+  if (draw.isReadonly() || draw.isDisabled()) return
   // 自定义粘贴事件
   const { paste } = draw.getOverride()
   if (paste) {

src/editor/interface/Title.ts

@@ -14,6 +14,7 @@ export type ITitleOption = ITitleSizeOption & {}
 
 export interface ITitleRule {
   deletable?: boolean
+  disabled?: boolean
 }
 
 export type ITitle = ITitleRule & {

src/editor/utils/element.ts

@@ -4,6 +4,7 @@ import {
   deepCloneOmitKeys,
   getUUID,
   isArrayEqual,
+  omitObject,
   pickObject,
   splitText
 } from '.'
@@ -29,7 +30,8 @@ import {
   INLINE_NODE_NAME,
   TABLE_CONTEXT_ATTR,
   TABLE_TD_ZIP_ATTR,
-  TEXTLIKE_ELEMENT_TYPE
+  TEXTLIKE_ELEMENT_TYPE,
+  TITLE_CONTEXT_ATTR
 } from '../dataset/constant/Element'
 import {
   listStyleCSSMapping,
@@ -818,8 +820,12 @@ export function formatElementContext(
   anchorIndex: number,
   options?: IFormatElementContextOption
 ) {
-  const copyElement = getAnchorElement(sourceElementList, anchorIndex)
+  let copyElement = getAnchorElement(sourceElementList, anchorIndex)
   if (!copyElement) return
+  // 标题元素禁用时不复制标题属性
+  if (copyElement.title?.disabled) {
+    copyElement = omitObject(copyElement, TITLE_CONTEXT_ATTR)
+  }
   const { isBreakWhenWrap = false } = options || {}
   // 是否已经换行
   let isBreakWarped = false
@@ -839,9 +845,9 @@ export function formatElementContext(
       (!copyElement.listId && targetElement.type === ElementType.LIST)
     ) {
       const cloneAttr = [...TABLE_CONTEXT_ATTR, ...EDITOR_ROW_ATTR]
-      cloneProperty<IElement>(cloneAttr, copyElement, targetElement)
+      cloneProperty<IElement>(cloneAttr, copyElement!, targetElement)
       targetElement.valueList?.forEach(valueItem => {
-        cloneProperty<IElement>(cloneAttr, copyElement, valueItem)
+        cloneProperty<IElement>(cloneAttr, copyElement!, valueItem)
       })
       continue
     }