feat:optimize add content block

src/components/dialog/Dialog.ts

@@ -10,6 +10,7 @@ export interface IDialogData {
   placeholder?: string;
   width?: number;
   height?: number;
+  required?: boolean;
 }
 
 export interface IDialogConfirm {
@@ -84,6 +85,9 @@ export class Dialog {
         const optionName = document.createElement('span')
         optionName.append(document.createTextNode(option.label))
         optionItemContainer.append(optionName)
+        if (option.required) {
+          optionName.classList.add('dialog-option__item--require')
+        }
       }
       // 选项输入框
       let optionInput: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement

src/components/dialog/dialog.css

@@ -61,6 +61,7 @@
   margin-right: 12px;
   font-size: 14px;
   color: #3d4757;
+  position: relative;
 }
 
 .dialog-option__item input,
@@ -84,6 +85,14 @@
   border-color: #4991f2;
 }
 
+.dialog-option__item--require::before {
+  content: "*";
+  color: #f56c6c;
+  margin-right: 4px;
+  position: absolute;
+  left: -8px;
+}
+
 .dialog-menu {
   display: flex;
   align-items: center;

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

@@ -3,5 +3,6 @@
   z-index: 0;
   overflow: hidden;
   border-radius: 8px;
+  background-color: #ffffff;
   border: 1px solid rgb(235 236 240);
 }

src/editor/core/command/CommandAdapt.ts

@@ -430,7 +430,9 @@ export class CommandAdapt {
       trList
     }
     // 格式化element
-    formatElementList([element])
+    formatElementList([element], {
+      editorOptions: this.options
+    })
     const curIndex = startIndex + 1
     if (startIndex === endIndex) {
       elementList.splice(curIndex, 0, element)

src/editor/utils/element.ts

@@ -9,10 +9,10 @@ import { ControlComponent, ControlType } from '../dataset/enum/Control'
 
 interface IFormatElementListOption {
   isHandleFirstElement?: boolean;
-  editorOptions?: Required<IEditorOption>;
+  editorOptions: Required<IEditorOption>;
 }
 
-export function formatElementList(elementList: IElement[], options: IFormatElementListOption = {}) {
+export function formatElementList(elementList: IElement[], options: IFormatElementListOption) {
   const { isHandleFirstElement, editorOptions } = <IFormatElementListOption>{
     isHandleFirstElement: true,
     ...options
@@ -237,9 +237,16 @@ export function formatElementList(elementList: IElement[], options: IFormatEleme
     if (el.value === '\n') {
       el.value = ZERO
     }
-    if (el.type === ElementType.IMAGE || el.type === ElementType.BLOCK) {
+    if (el.type === ElementType.IMAGE) {
       el.id = getUUID()
     }
+    if (el.type === ElementType.BLOCK) {
+      el.id = getUUID()
+      if (!el.width) {
+        const { editorOptions: { width, margins } } = options
+        el.width = width - margins[1] - margins[3]
+      }
+    }
     if (el.type === ElementType.LATEX) {
       const { svg, width, height } = LaTexParticle.convertLaTextToSVG(el.value)
       el.width = el.width || width

src/main.ts

@@ -273,11 +273,13 @@ window.onload = function () {
         type: 'text',
         label: '文本',
         name: 'name',
+        required: true,
         placeholder: '请输入文本'
       }, {
         type: 'text',
         label: '链接',
         name: 'url',
+        required: true,
         placeholder: '请输入链接'
       }],
       onConfirm: (payload) => {
@@ -340,16 +342,19 @@ window.onload = function () {
           type: 'text',
           label: '内容',
           name: 'data',
+          required: true,
           placeholder: '请输入内容'
         }, {
           type: 'color',
           label: '颜色',
           name: 'color',
+          required: true,
           value: '#AEB5C0'
         }, {
           type: 'number',
           label: '字体大小',
           name: 'size',
+          required: true,
           value: '120'
         }],
         onConfirm: (payload) => {
@@ -435,6 +440,7 @@ window.onload = function () {
             type: 'text',
             label: '占位符',
             name: 'placeholder',
+            required: true,
             placeholder: '请输入占位符'
           }, {
             type: 'text',
@@ -469,6 +475,7 @@ window.onload = function () {
             type: 'text',
             label: '占位符',
             name: 'placeholder',
+            required: true,
             placeholder: '请输入占位符'
           }, {
             type: 'text',
@@ -479,6 +486,7 @@ window.onload = function () {
             type: 'textarea',
             label: '值集',
             name: 'valueSets',
+            required: true,
             height: 100,
             placeholder: `请输入值集JSON，例：\n[{\n"value":"有",\n"code":"98175"\n}]`
           }],
@@ -514,6 +522,7 @@ window.onload = function () {
             type: 'textarea',
             label: '值集',
             name: 'valueSets',
+            required: true,
             height: 100,
             placeholder: `请输入值集JSON，例：\n[{\n"value":"有",\n"code":"98175"\n}]`
           }],
@@ -622,6 +631,7 @@ window.onload = function () {
         label: '类型',
         name: 'type',
         value: 'iframe',
+        required: true,
         options: [{
           label: '网址',
           value: 'iframe'
@@ -633,17 +643,19 @@ window.onload = function () {
         type: 'number',
         label: '宽度',
         name: 'width',
-        placeholder: '请输入宽度'
+        placeholder: '请输入宽度（默认页面内宽度）'
       }, {
         type: 'number',
-        label: '宽度',
+        label: '高度',
         name: 'height',
-        placeholder: '请输入宽度'
+        required: true,
+        placeholder: '请输入高度'
       }, {
         type: 'textarea',
         label: '地址',
         height: 100,
         name: 'value',
+        required: true,
         placeholder: '请输入地址'
       }],
       onConfirm: (payload) => {
@@ -652,7 +664,6 @@ window.onload = function () {
         const value = payload.find(p => p.name === 'value')?.value
         if (!value) return
         const width = payload.find(p => p.name === 'width')?.value
-        if (!width) return
         const height = payload.find(p => p.name === 'height')?.value
         if (!height) return
         const block: IBlock = {
@@ -667,13 +678,16 @@ window.onload = function () {
             src: value
           }
         }
-        instance.command.executeInsertElementList([{
+        const blockElement: IElement = {
           type: ElementType.BLOCK,
           value: '',
-          width: Number(width),
           height: Number(height),
           block
-        }])
+        }
+        if (width) {
+          blockElement.width = Number(width)
+        }
+        instance.command.executeInsertElementList([blockElement])
       }
     })
   }
@@ -798,24 +812,28 @@ window.onload = function () {
         type: 'text',
         label: '上边距',
         name: 'top',
+        required: true,
         value: `${topMargin}`,
         placeholder: '请输入上边距'
       }, {
         type: 'text',
         label: '下边距',
         name: 'bottom',
+        required: true,
         value: `${bottomMargin}`,
         placeholder: '请输入下边距'
       }, {
         type: 'text',
         label: '左边距',
         name: 'left',
+        required: true,
         value: `${leftMargin}`,
         placeholder: '请输入左边距'
       }, {
         type: 'text',
         label: '右边距',
         name: 'right',
+        required: true,
         value: `${rightMargin}`,
         placeholder: '请输入右边距'
       }],