feat:content block core

src/editor/assets/css/block/block.css

@@ -0,0 +1,7 @@
+.block-item {
+  position: absolute;
+  z-index: 0;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 1px solid rgb(235 236 240);
+}

src/editor/assets/css/date/datePicker.css

@@ -5,6 +5,7 @@
   left: 0;
   right: 0;
   position: absolute;
+  z-index: 1;
   color: #606266;
   background: #ffffff;
   border-radius: 4px;

src/editor/assets/css/index.css

@@ -1,5 +1,6 @@
 @import './control/select.css';
 @import './date/datePicker.css';
+@import './block/block.css';
 
 .inputarea {
   width: 0;

src/editor/core/draw/Draw.ts

@@ -46,6 +46,7 @@ import { WorkerManager } from '../worker/WorkerManager'
 import { Previewer } from './particle/previewer/Previewer'
 import { DateParticle } from './particle/date/DateParticle'
 import { IMargin } from '../../interface/Margin'
+import { BlockParticle } from './particle/block/BlockParticle'
 
 export class Draw {
 
@@ -86,6 +87,7 @@ export class Draw {
   private superscriptParticle: SuperscriptParticle
   private subscriptParticle: SubscriptParticle
   private checkboxParticle: CheckboxParticle
+  private blockParticle: BlockParticle
   private control: Control
   private workerManager: WorkerManager
 
@@ -138,6 +140,7 @@ export class Draw {
     this.superscriptParticle = new SuperscriptParticle()
     this.subscriptParticle = new SubscriptParticle()
     this.checkboxParticle = new CheckboxParticle(this)
+    this.blockParticle = new BlockParticle(this)
     this.control = new Control(this)
 
     new ScrollObserver(this)
@@ -707,6 +710,11 @@ export class Draw {
         metrics.height = defaultSize * scale
         metrics.boundingBoxDescent = 0
         metrics.boundingBoxAscent = metrics.height
+      } else if (element.type === ElementType.BLOCK) {
+        metrics.width = element.width! * scale
+        metrics.height = element.height! * scale
+        metrics.boundingBoxDescent = metrics.height
+        metrics.boundingBoxAscent = 0
       } else {
         // 设置上下标真实字体尺寸
         const size = element.size || this.options.defaultSize
@@ -739,6 +747,7 @@ export class Draw {
       const preElement = elementList[i - 1]
       if (
         preElement?.type === ElementType.TABLE
+        || preElement?.type === ElementType.BLOCK
         || preElement?.imgDisplay === ImageDisplay.INLINE
         || element.imgDisplay === ImageDisplay.INLINE
         || curRow.width + metrics.width > innerWidth
@@ -880,6 +889,9 @@ export class Draw {
           // 如果是两端对齐，因canvas目前不支持letterSpacing需单独绘制文本
           this.textParticle.record(ctx, element, x, y + offsetY)
           this._drawRichText(ctx)
+        } else if (element.type === ElementType.BLOCK) {
+          this._drawRichText(ctx)
+          this.blockParticle.render(pageNo, element, x, y)
         } else {
           this.textParticle.record(ctx, element, x, y + offsetY)
         }

src/editor/core/draw/particle/block/BlockParticle.ts

@@ -0,0 +1,47 @@
+import { IRowElement } from '../../../../interface/Row'
+import { Draw } from '../../Draw'
+import { BaseBlock } from './modules/BaseBlock'
+
+export class BlockParticle {
+
+  private draw: Draw
+  private container: HTMLDivElement
+  private blockContainer: HTMLDivElement
+  private blockMap: Map<string, BaseBlock>
+
+  constructor(draw: Draw) {
+    this.draw = draw
+    this.container = draw.getContainer()
+    this.blockMap = new Map()
+    this.blockContainer = this._createBlockContainer()
+    this.container.append(this.blockContainer)
+  }
+
+  private _createBlockContainer(): HTMLDivElement {
+    const blockContainer = document.createElement('div')
+    blockContainer.classList.add('block-container')
+    return blockContainer
+  }
+
+  public getDraw(): Draw {
+    return this.draw
+  }
+
+  public getBlockContainer(): HTMLDivElement {
+    return this.blockContainer
+  }
+
+  public render(pageNo: number, element: IRowElement, x: number, y: number) {
+    const id = element.id!
+    const cacheBlock = this.blockMap.get(id)
+    if (cacheBlock) {
+      cacheBlock.setClientRects(pageNo, x, y)
+    } else {
+      const newBlock = new BaseBlock(this, element)
+      newBlock.render()
+      newBlock.setClientRects(pageNo, x, y)
+      this.blockMap.set(id, newBlock)
+    }
+  }
+
+}

src/editor/core/draw/particle/block/modules/BaseBlock.ts

@@ -0,0 +1,51 @@
+import { BlockType } from '../../../../../dataset/enum/Block'
+import { IRowElement } from '../../../../../interface/Row'
+import { Draw } from '../../../Draw'
+import { BlockParticle } from '../BlockParticle'
+import { IFrameBlock } from './IFrameBlock'
+
+export class BaseBlock {
+
+  private draw: Draw
+  private element: IRowElement
+  private block: IFrameBlock | null
+  private blockContainer: HTMLDivElement
+  private blockItem: HTMLDivElement
+
+  constructor(blockParticle: BlockParticle, element: IRowElement) {
+    this.draw = blockParticle.getDraw()
+    this.blockContainer = blockParticle.getBlockContainer()
+    this.element = element
+    this.block = null
+    this.blockItem = this._createBlockItem()
+    this.blockContainer.append(this.blockItem)
+  }
+
+  private _createBlockItem(): HTMLDivElement {
+    const blockItem = document.createElement('div')
+    blockItem.classList.add('block-item')
+    return blockItem
+  }
+
+  public render() {
+    const block = this.element.block!
+    if (block.type === BlockType.IFRAME) {
+      this.block = new IFrameBlock(this.element)
+      this.block.render(this.blockItem)
+    }
+  }
+
+  public setClientRects(pageNo: number, x: number, y: number) {
+    const scale = this.draw.getOptions().scale
+    const height = this.draw.getHeight()
+    const pageGap = this.draw.getPageGap()
+    const preY = pageNo * (height + pageGap)
+    // 尺寸
+    this.blockItem.style.width = `${this.element.width! * scale}px`
+    this.blockItem.style.height = `${this.element.height! * scale}px`
+    // 位置
+    this.blockItem.style.left = `${x}px`
+    this.blockItem.style.top = `${preY + y}px`
+  }
+
+}

src/editor/core/draw/particle/block/modules/IFrameBlock.ts

@@ -0,0 +1,28 @@
+import { IRowElement } from '../../../../../interface/Row'
+
+export class IFrameBlock {
+
+  private static readonly sandbox = [
+    'allow-forms',
+    'allow-scripts',
+    'allow-same-origin',
+    'allow-popups'
+  ]
+  private element: IRowElement
+
+  constructor(element: IRowElement) {
+    this.element = element
+  }
+
+  public render(blockItemContainer: HTMLDivElement) {
+    const block = this.element.block!
+    const iframe = document.createElement('iframe')
+    iframe.sandbox.add(...IFrameBlock.sandbox)
+    iframe.style.border = 'none'
+    iframe.style.width = '100%'
+    iframe.style.height = '100%'
+    iframe.src = block.iframeBlock?.src || ''
+    blockItemContainer.append(iframe)
+  }
+
+}

src/editor/dataset/constant/Element.ts

@@ -50,7 +50,8 @@ export const EDITOR_ELEMENT_ZIP_ATTR: Array<keyof IElement> = [
   'valueList',
   'control',
   'checkbox',
-  'dateFormat'
+  'dateFormat',
+  'block'
 ]
 
 export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [

src/editor/dataset/enum/Block.ts

@@ -0,0 +1,3 @@
+export enum BlockType {
+  IFRAME = 'iframe'
+}

src/editor/dataset/enum/Element.ts

@@ -11,5 +11,6 @@ export enum ElementType {
   CHECKBOX = 'checkbox',
   LATEX = 'latex',
   TAB = 'tab',
-  DATE = 'date'
+  DATE = 'date',
+  BLOCK = 'block'
 }

src/editor/index.ts

@@ -26,6 +26,7 @@ import { DeepRequired } from './interface/Common'
 import { INavigateInfo } from './core/draw/interactive/Search'
 import { Shortcut } from './core/shortcut/Shortcut'
 import { KeyMap } from './dataset/enum/KeyMap'
+import { BlockType } from './dataset/enum/Block'
 
 export default class Editor {
 
@@ -125,7 +126,8 @@ export {
   PageMode,
   ImageDisplay,
   Command,
-  KeyMap
+  KeyMap,
+  BlockType
 }
 
 // 对外类型

src/editor/interface/Block.ts

@@ -0,0 +1,10 @@
+import { BlockType } from '../dataset/enum/Block'
+
+export interface IIFrameBlock {
+  src: string;
+}
+
+export interface IBlock {
+  type: BlockType;
+  iframeBlock?: IIFrameBlock;
+}

src/editor/interface/Element.ts

@@ -1,6 +1,7 @@
 import { ControlComponent, ImageDisplay } from '../dataset/enum/Control'
 import { ElementType } from '../dataset/enum/Element'
 import { RowFlex } from '../dataset/enum/Row'
+import { IBlock } from './Block'
 import { ICheckbox } from './Checkbox'
 import { IControl } from './Control'
 import { IColgroup } from './table/Colgroup'
@@ -78,6 +79,10 @@ export interface IImageElement {
   imgDisplay?: ImageDisplay
 }
 
+export interface IBlockElement {
+  block?: IBlock;
+}
+
 export type IElement = IElementBasic
   & IElementStyle
   & ITable
@@ -89,6 +94,7 @@ export type IElement = IElementBasic
   & ILaTexElement
   & IDateElement
   & IImageElement
+  & IBlockElement
 
 export interface IElementMetrics {
   width: number;

src/editor/utils/element.ts

@@ -237,7 +237,7 @@ export function formatElementList(elementList: IElement[], options: IFormatEleme
     if (el.value === '\n') {
       el.value = ZERO
     }
-    if (el.type === ElementType.IMAGE) {
+    if (el.type === ElementType.IMAGE || el.type === ElementType.BLOCK) {
       el.id = getUUID()
     }
     if (el.type === ElementType.LATEX) {