init from https://github.com/Hufe921/canvas-editor

cypress/e2e/control/checkbox.cy.ts

@@ -0,0 +1,46 @@
+import Editor, { ControlType, ElementType } from '../../../src/editor'
+
+describe('控件-复选框', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const elementType: ElementType = <ElementType>'control'
+  const controlType: ControlType = <ControlType>'checkbox'
+
+  it('复选框', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          type: elementType,
+          value: '',
+          control: {
+            code: '98175',
+            type: controlType,
+            value: null,
+            valueSets: [
+              {
+                value: '有',
+                code: '98175'
+              },
+              {
+                value: '无',
+                code: '98176'
+              }
+            ]
+          }
+        }
+      ])
+
+      const data = editor.command.getValue().data.main[0]
+
+      expect(data.control!.code).to.be.eq('98175')
+    })
+  })
+})

cypress/e2e/control/select.cy.ts

@@ -0,0 +1,56 @@
+import Editor, { ControlType, ElementType } from '../../../src/editor'
+
+describe('控件-列举型', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = `有`
+  const elementType: ElementType = <ElementType>'control'
+  const controlType: ControlType = <ControlType>'select'
+
+  it('列举型', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          type: elementType,
+          value: '',
+          control: {
+            type: controlType,
+            value: null,
+            placeholder: '列举型',
+            valueSets: [
+              {
+                value: '有',
+                code: '98175'
+              },
+              {
+                value: '无',
+                code: '98176'
+              }
+            ]
+          }
+        }
+      ])
+
+      cy.get('@canvas').type(`{leftArrow}`)
+
+      cy.get('.ce-select-control-popup li')
+        .eq(0)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main[0]
+
+          expect(data.control!.value![0].value).to.be.eq(text)
+
+          expect(data.control!.code).to.be.eq('98175')
+        })
+    })
+  })
+})

cypress/e2e/control/text.cy.ts

@@ -0,0 +1,43 @@
+import Editor, { ControlType, ElementType } from '../../../src/editor'
+
+describe('控件-文本型', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = `canvas-editor`
+  const elementType: ElementType = <ElementType>'control'
+  const controlType: ControlType = <ControlType>'text'
+
+  it('文本型', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          type: elementType,
+          value: '',
+          control: {
+            type: controlType,
+            value: null,
+            placeholder: '文本型'
+          }
+        }
+      ])
+
+      cy.get('@canvas').type(`{leftArrow}`)
+
+      cy.get('.ce-inputarea')
+        .type(text)
+        .then(() => {
+          const data = editor.command.getValue().data.main[0]
+
+          expect(data.control!.value![0].value).to.be.eq(text)
+        })
+    })
+  })
+})

cypress/e2e/editor.cy.ts

@@ -0,0 +1,67 @@
+import Editor from '../../src/editor'
+
+describe('基础功能', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+
+  it('编辑保存', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('@canvas')
+        .type(text)
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].value).to.eq(text)
+        })
+    })
+  })
+
+  it('模式切换', () => {
+    cy.get('@canvas').click()
+
+    cy.get('.ce-cursor').should('have.css', 'display', 'block')
+
+    cy.get('.editor-mode').click().click()
+
+    cy.get('.editor-mode').contains('只读')
+
+    cy.get('@canvas').click()
+
+    cy.get('.ce-cursor').should('have.css', 'display', 'none')
+  })
+
+  it('页面缩放', () => {
+    cy.get('.page-scale-add').click()
+
+    cy.get('.page-scale-percentage').contains('110%')
+
+    cy.get('.page-scale-minus').click().click()
+
+    cy.get('.page-scale-percentage').contains('90%')
+  })
+
+  it('字数统计', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: 'canvas-editor 2022 编辑器'
+        }
+      ])
+
+      cy.get('.word-count').contains('7')
+    })
+  })
+})

cypress/e2e/menus/block.cy.ts

@@ -0,0 +1,38 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-内容块', () => {
+  const url = 'http://localhost:3000/canvas-editor/'
+
+  beforeEach(() => {
+    cy.visit(url)
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  it('内容块', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('.menu-item__block').click()
+
+      cy.get('.dialog-option__item [name="width"]').type('500')
+
+      cy.get('.dialog-option__item [name="height"]').type('300')
+
+      cy.get('.dialog-option__item [name="src"]').type(url)
+
+      cy.get('.dialog-menu button')
+        .eq(1)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].type).to.eq('block')
+
+          expect(data[0].block?.iframeBlock?.src).to.eq(url)
+        })
+    })
+  })
+})

cypress/e2e/menus/checkbox.cy.ts

@@ -0,0 +1,33 @@
+import Editor, { ElementType } from '../../../src/editor'
+
+describe('菜单-复选框', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const type: ElementType = <ElementType>'checkbox'
+
+  it('代码块', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          type,
+          value: '',
+          checkbox: {
+            value: true
+          }
+        }
+      ])
+
+      const data = editor.command.getValue().data.main[0]
+
+      expect(data.checkbox?.value).to.eq(true)
+    })
+  })
+})

cypress/e2e/menus/codeblock.cy.ts

@@ -0,0 +1,34 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-代码块', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = `console.log('canvas-editor')`
+
+  it('代码块', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('.menu-item__codeblock').click()
+
+      cy.get('.dialog-option [name="codeblock"]').type(text)
+
+      cy.get('.dialog-menu button')
+        .eq(1)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main[2]
+
+          expect(data.value).to.eq('log')
+
+          expect(data.color).to.eq('#b9a40a')
+        })
+    })
+  })
+})

cypress/e2e/menus/date.cy.ts

@@ -0,0 +1,28 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-日期选择器', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  it('LaTeX', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('.menu-item__date').click()
+
+      cy.get('.menu-item__date li')
+        .first()
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].type).to.eq('date')
+        })
+    })
+  })
+})

cypress/e2e/menus/format.cy.ts

@@ -0,0 +1,40 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-清除格式', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+  const textLength = text.length
+
+  it('清除格式', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text,
+          bold: true,
+          italic: true
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__format')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].italic).to.eq(undefined)
+
+          expect(data[0].bold).to.eq(undefined)
+        })
+    })
+  })
+})

cypress/e2e/menus/hyperlink.cy.ts

@@ -0,0 +1,39 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-超链接', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+  const url = 'https://hufe.club/canvas-editor'
+
+  it('超链接', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('.menu-item__hyperlink').click()
+
+      cy.get('.dialog-option__item [name="name"]').type(text)
+
+      cy.get('.dialog-option__item [name="url"]').type(url)
+
+      cy.get('.dialog-menu button')
+        .eq(1)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].type).to.eq('hyperlink')
+
+          expect(data[0].url).to.eq(url)
+
+          expect(data[0]?.valueList?.[0].value).to.eq(text)
+        })
+    })
+  })
+})

cypress/e2e/menus/image.cy.ts

@@ -0,0 +1,25 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-图片', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  it('图片', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('#image').attachFile('test.png')
+
+      cy.wait(200).then(() => {
+        const data = editor.command.getValue().data.main
+
+        expect(data[0].type).to.eq('image')
+      })
+    })
+  })
+})

cypress/e2e/menus/latex.cy.ts

@@ -0,0 +1,34 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-LaTeX', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+
+  it('LaTeX', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('.menu-item__latex').click()
+
+      cy.get('.dialog-option__item [name="value"]').type(text)
+
+      cy.get('.dialog-menu button')
+        .eq(1)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].type).to.eq('latex')
+
+          expect(data[0].value).to.eq(text)
+        })
+    })
+  })
+})

cypress/e2e/menus/pagebreak.cy.ts

@@ -0,0 +1,21 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-分页符', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  it('分页符', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('.menu-item__page-break').click().click()
+
+      cy.get('canvas').should('have.length', 2)
+    })
+  })
+})

cypress/e2e/menus/painter.cy.ts

@@ -0,0 +1,53 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-格式刷', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+  const textLength = text.length
+
+  it('格式刷', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text,
+          bold: true,
+          italic: true
+        }
+      ])
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__painter')
+        .click()
+        .wait(300)
+        .then(() => {
+          editor.command.executeSetRange(textLength, 2 * textLength)
+
+          editor.command.executeApplyPainterStyle()
+
+          const data = editor.command.getValue().data.main
+
+          expect(data.length).to.eq(1)
+
+          expect(data[0].italic).to.eq(true)
+
+          expect(data[0].bold).to.eq(true)
+        })
+    })
+  })
+})

cypress/e2e/menus/print.cy.ts

@@ -0,0 +1,25 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-打印', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').should('have.length', 2)
+  })
+
+  it('打印', () => {
+    cy.getEditor().then(async (editor: Editor) => {
+      const imageList2 = await editor.command.getImage()
+      expect(imageList2.length).to.eq(2)
+
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.wait(200).then(async () => {
+        const imageList1 = await editor.command.getImage()
+        expect(imageList1.length).to.eq(1)
+      })
+    })
+  })
+})

cypress/e2e/menus/row.cy.ts

@@ -0,0 +1,103 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-行处理', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+
+  it('左对齐', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      cy.get('.menu-item__left')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].rowFlex).to.eq('left')
+        })
+    })
+  })
+
+  it('居中对齐', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      cy.get('.menu-item__center')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].rowFlex).to.eq('center')
+        })
+    })
+  })
+
+  it('靠右对齐', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      cy.get('.menu-item__right')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].rowFlex).to.eq('right')
+        })
+    })
+  })
+
+  it('行间距', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      cy.get('.menu-item__row-margin').as('rowMargin').click()
+
+      cy.get('@rowMargin')
+        .find('li')
+        .eq(1)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].rowMargin).to.eq(1.25)
+        })
+    })
+  })
+})

cypress/e2e/menus/search.cy.ts

@@ -0,0 +1,112 @@
+import Editor, { ElementType } from '../../../src/editor'
+
+describe('菜单-搜索', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const searchText = 'canvas-editor'
+  const replaceText = 'replace'
+  const type: ElementType = <ElementType>'table'
+
+  it('搜索', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: searchText
+        },
+        {
+          value: '\n',
+          type,
+          trList: [
+            {
+              height: 42,
+              tdList: [
+                {
+                  colspan: 1,
+                  rowspan: 1,
+                  value: [
+                    {
+                      value: searchText
+                    }
+                  ]
+                },
+                {
+                  colspan: 1,
+                  rowspan: 1,
+                  value: []
+                }
+              ]
+            },
+            {
+              height: 42,
+              tdList: [
+                {
+                  colspan: 1,
+                  rowspan: 1,
+                  value: []
+                },
+                {
+                  colspan: 1,
+                  rowspan: 1,
+                  value: [
+                    {
+                      value: searchText
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          colgroup: [
+            {
+              width: 200
+            },
+            {
+              width: 200
+            }
+          ]
+        }
+      ])
+
+      cy.get('.menu-item__search').click()
+
+      cy.get('.menu-item__search__collapse input').eq(0).type(searchText)
+
+      // 搜索导航
+      cy.get('.menu-item__search__collapse .arrow-right').click()
+      cy.get('.menu-item__search__collapse__search .search-result').should(
+        'have.text',
+        '1/3'
+      )
+
+      cy.get('.menu-item__search__collapse__replace').as('replace')
+
+      cy.get('@replace').find('input').type(replaceText)
+
+      cy.get('@replace')
+        .find('button')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          // 普通文本
+          expect(data[0].value).to.be.eq(replaceText)
+
+          // 表格内文本
+          expect(data[1].trList![0].tdList[0].value[0].value).to.be.eq(
+            replaceText
+          )
+          expect(data[1].trList![1].tdList[1].value[0].value).to.be.eq(
+            replaceText
+          )
+        })
+    })
+  })
+})

cypress/e2e/menus/separator.cy.ts

@@ -0,0 +1,32 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-分割线', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  it('分割线', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('.menu-item__separator').click()
+
+      cy.get('.menu-item__separator li')
+        .eq(1)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].type).to.eq('separator')
+
+          expect(data[0]?.dashArray?.[0]).to.eq(1)
+
+          expect(data[0]?.dashArray?.[1]).to.eq(1)
+        })
+    })
+  })
+})

cypress/e2e/menus/table.cy.ts

@@ -0,0 +1,25 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-表格', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  it('表格', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertTable(8, 8)
+
+      const data = editor.command.getValue().data.main
+
+      expect(data[0].type).to.eq('table')
+
+      expect(data[0].trList?.length).to.eq(8)
+    })
+  })
+})

cypress/e2e/menus/text.cy.ts

@@ -0,0 +1,304 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-文本处理', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+  const textLength = text.length
+
+  it('字体', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__font').as('font').click()
+
+      cy.get('@font')
+        .find('li')
+        .eq(1)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].font).to.eq('华文宋体')
+        })
+    })
+  })
+
+  it('字号设置', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__size').as('size').click()
+
+      cy.get('@size')
+        .find('li')
+        .eq(0)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].size).to.eq(56)
+        })
+    })
+  })
+
+  it('字体增大', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__size-add')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].size).to.eq(18)
+        })
+    })
+  })
+
+  it('字体减小', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__size-minus')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].size).to.eq(14)
+        })
+    })
+  })
+
+  it('加粗', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__bold')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].bold).to.eq(true)
+        })
+    })
+  })
+
+  it('斜体', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__italic')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].italic).to.eq(true)
+        })
+    })
+  })
+
+  it('下划线', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__underline')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].underline).to.eq(true)
+        })
+    })
+  })
+
+  it('删除线', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__strikeout')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].strikeout).to.eq(true)
+        })
+    })
+  })
+
+  it('上标', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__superscript')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].type).to.eq('superscript')
+        })
+    })
+  })
+
+  it('下标', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      cy.get('.menu-item__subscript')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].type).to.eq('subscript')
+        })
+    })
+  })
+
+  it('字体颜色', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      editor.command.executeColor('red')
+
+      const data = editor.command.getValue().data.main
+
+      expect(data[0].color).to.eq('red')
+    })
+  })
+
+  it('高亮', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      editor.command.executeSetRange(0, textLength)
+
+      editor.command.executeHighlight('red')
+
+      const data = editor.command.getValue().data.main
+
+      expect(data[0].highlight).to.eq('red')
+    })
+  })
+})

cypress/e2e/menus/title.cy.ts

@@ -0,0 +1,43 @@
+import Editor, { ElementType, TitleLevel } from '../../../src/editor'
+
+describe('菜单-标题', () => {
+  const url = 'http://localhost:3000/canvas-editor/'
+
+  beforeEach(() => {
+    cy.visit(url)
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+  const elementType = <ElementType>'title'
+  const level = <TitleLevel>'first'
+
+  it('标题', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      editor.command.executeInsertElementList([
+        {
+          value: text
+        }
+      ])
+
+      cy.get('.menu-item__title').as('title').click()
+
+      cy.get('@title')
+        .find('li')
+        .eq(1)
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].type).to.eq(elementType)
+
+          expect(data[0].level).to.eq(level)
+        })
+    })
+  })
+})

cypress/e2e/menus/undoRedo.cy.ts

@@ -0,0 +1,49 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-撤销&重做', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+
+  it('撤销', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('@canvas').type(`${text}1`)
+
+      cy.get('.menu-item__undo')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].value).to.eq(text)
+        })
+    })
+  })
+
+  it('重做', () => {
+    cy.getEditor().then((editor: Editor) => {
+      editor.command.executeSelectAll()
+
+      editor.command.executeBackspace()
+
+      cy.get('@canvas').type(`${text}1`)
+
+      cy.get('.menu-item__undo').click()
+
+      cy.get('.menu-item__redo')
+        .click()
+        .then(() => {
+          const data = editor.command.getValue().data.main
+
+          expect(data[0].value).to.eq(`${text}1`)
+        })
+    })
+  })
+})

cypress/e2e/menus/watermark.cy.ts

@@ -0,0 +1,64 @@
+import Editor from '../../../src/editor'
+
+describe('菜单-水印', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/canvas-editor/')
+
+    cy.get('canvas').first().as('canvas').should('have.length', 1)
+  })
+
+  const text = 'canvas-editor'
+  const size = 80
+
+  it('添加水印', () => {
+    cy.getEditor().then((editor: Editor) => {
+      cy.get('.menu-item__watermark').click()
+
+      cy.get('.menu-item__watermark li').eq(0).click()
+
+      cy.get('.dialog-option [name="data"]').type(text)
+
+      cy.get('.dialog-option [name="size"]').as('size')
+
+      cy.get('@size').clear()
+
+      cy.get('@size').type(`${size}`)
+
+      cy.get('.dialog-menu button')
+        .eq(1)
+        .click()
+        .then(() => {
+          const payload = editor.command.getValue()
+
+          const {
+            options: { watermark }
+          } = payload
+
+          expect(watermark?.data).to.eq(text)
+
+          expect(watermark?.size).to.eq(size)
+        })
+    })
+  })
+
+  it('删除水印', () => {
+    cy.getEditor().then((editor: Editor) => {
+      cy.get('.menu-item__watermark').click()
+
+      cy.get('.menu-item__watermark li')
+        .eq(1)
+        .click()
+        .then(() => {
+          const payload = editor.command.getValue()
+
+          const {
+            options: { watermark }
+          } = payload
+
+          expect(watermark?.data).to.eq('')
+
+          expect(watermark?.size).to.eq(200)
+        })
+    })
+  })
+})

cypress/fixtures/example.json

@@ -0,0 +1,3 @@
+{
+  "name": "canvas-editor"
+}

cypress/global.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="cypress" />
+
+declare namespace Editor {
+  import('../src/editor/index')
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import Editor from '../src/editor/index'
+}
+
+declare namespace Cypress {
+  interface Chainable {
+    getEditor(): Chainable<Editor>
+  }
+}

cypress/support/commands.ts

@@ -0,0 +1,5 @@
+import 'cypress-file-upload'
+
+Cypress.Commands.add('getEditor', () => {
+  return cy.window().its('editor')
+})

cypress/support/e2e.ts

@@ -0,0 +1 @@
+import './commands'

cypress/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es2015", "dom", "esnext"],
+    "types": ["cypress", "cypress-file-upload"],
+    "isolatedModules": false,
+    "allowJs": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+  },
+  "include": [
+    "./**/*.ts"
+  ]
+}