@opentiny/fluent-editor 3.20.2-alpha.0 → 3.20.2

package/src/table/modules/table-scroll-bar.ts

@@ -0,0 +1,248 @@
+import { SCROLL_BAR_PANEL_HEIGHT } from '../table-config'
+import { css } from '../utils'
+
+export default class TableScrollBar {
+  table: any
+  quill: any
+  modulesContainer: any
+  domNode: any
+  oldRootScrollTop: any
+  // @ts-ignore
+  prev: number
+  columnToolDomNode: any
+  columnCtrlPanel: any
+  leftMask: any
+  tableViewRect: any
+  tableRect: any
+  containerRect: any
+  subscriber: any
+  // @ts-ignore
+  tableMoveDistance: number
+  // @ts-ignore
+  maxBarLeft: number
+  // @ts-ignore
+  scrollBar: Element
+  // @ts-ignore
+  isTableOverflow: boolean // 表格是否溢出开关，判断开关值后只改变样式一次，不重复修改
+
+  constructor(table, quill, dom) {
+    if (!table) {
+      return
+    }
+    this.table = table
+    this.quill = quill
+    this.modulesContainer = dom
+    this.domNode = null
+    this.oldRootScrollTop = this.quill.root.scrollTop
+    this.prev = 0
+
+    const betterTableModule = this.quill.getModule('better-table')
+    const tableColumnTool = betterTableModule.columnTool
+    this.columnToolDomNode = tableColumnTool.domNode
+    this.columnCtrlPanel = tableColumnTool.columnCtrlPanel
+    this.leftMask = tableColumnTool.leftMask
+
+    this.updateScrollBar()
+
+    if (this.quill.root === this.quill.scrollingContainer) {
+      this.quill.root.addEventListener('scroll', this.handleQuillRootScroll.bind(this))
+    }
+  }
+
+  handleQuillRootScroll() {
+    if (!this.domNode) {
+      return
+    }
+    const curTableRect = this.table.getBoundingClientRect()
+    const curContainerRect = this.quill.root.parentNode.getBoundingClientRect()
+    const tableTop = curTableRect.top + SCROLL_BAR_PANEL_HEIGHT
+    const tableBottom = curTableRect.top + curTableRect.height - 1
+    const containerBottom = curContainerRect.top + curContainerRect.height
+    if (containerBottom < tableBottom && containerBottom > tableTop) { // 表格下端溢出容器下端
+      if (!this.isTableOverflow) {
+        this.isTableOverflow = true
+        css(this.domNode, {
+          display: 'block',
+          top: `${this.containerRect.height - SCROLL_BAR_PANEL_HEIGHT}px`,
+          marginTop: '0px',
+        })
+      }
+    }
+    else if (containerBottom <= tableTop) { // 表格上端溢出容器下端
+      this.isTableOverflow = false
+      this.domNode.style.display = 'none'
+    }
+    else { // 表格下端在容器内
+      this.setScrollBarToBottom()
+      css(this.domNode, { marginTop: `${this.oldRootScrollTop - this.quill.root.scrollTop}px` })
+    }
+  }
+
+  setScrollBarToBottom() {
+    if (this.isTableOverflow) {
+      this.isTableOverflow = false
+      const barPos = this.tableRect.top + this.tableRect.height - this.containerRect.top - 1
+      css(this.domNode, { display: 'block', top: `${barPos}px` })
+    }
+  }
+
+  resetTableHeight(table) {
+    if (this.domNode) {
+      // 表格的高度改变，重置初始化tableRect的高度，但不重置其他坐标值
+      this.tableRect.height = table.getBoundingClientRect().height
+      this.isTableOverflow = !this.isTableOverflow
+      this.handleQuillRootScroll()
+    }
+  }
+
+  setScrollBarMove(pos, isMouse) {
+    // 获取当前滑块左边距和鼠标两次事件节点之间的位移差，计算当前滑块位置及是否显示左右遮罩层，通过比例计算表格位移并赋值
+    const currentBarLeft = Number.parseInt(getComputedStyle(this.scrollBar).left, 10)
+    let left = isMouse ? pos - this.prev + currentBarLeft : currentBarLeft + pos
+    this.showMask(left)
+    left = this.getLimitedDistance(left)
+    const scale = this.tableViewRect.width / this.tableRect.width
+    const move = left / scale
+    const columnCtrlPanelLeft = this.tableViewRect.left - this.containerRect.left - move
+    css(this.scrollBar, { left: `${left}px` }) // 移动表格滚动条
+    css(this.columnCtrlPanel, { left: `${columnCtrlPanelLeft}px` }) // 移动顶部列宽控制条
+    this.table.parentNode.scrollLeft = move // 移动表格
+    if (isMouse) {
+      this.prev = pos
+    }
+
+    // fix: 拖动滚动条时修正选区位置
+    const tableSelection = this.quill.getModule('better-table').tableSelection
+    if (tableSelection && tableSelection.selectedTds.length) {
+      tableSelection.refreshHelpLinesPosition()
+    }
+  }
+
+  handleScrollBarMouseDown(mouseDownEvent) {
+    mouseDownEvent.preventDefault()
+
+    this.prev = mouseDownEvent.clientX
+    this.subscriber = (mouseMoveEvent: any) => {
+      mouseMoveEvent.preventDefault()
+      mouseMoveEvent.stopPropagation()
+      this.setScrollBarMove(mouseMoveEvent.clientX, true)
+    }
+    this.quill.root.parentNode.addEventListener('mousemove', this.subscriber, false)
+    document.addEventListener('mouseup', this.handleScrollBarMouseup.bind(this), false)
+  }
+
+  handleScrollBarMouseup(event) {
+    event.preventDefault()
+    this.quill.root.parentNode.removeEventListener('mousemove', this.subscriber)
+    document.removeEventListener('mouseup', this.handleScrollBarMouseup.bind(this), false)
+  }
+
+  handleWheel(event) {
+    // 按住 Shift 滚动鼠标滚轮，可以对表格进行横向滚动
+    if (event.shiftKey) {
+      const { deltaY } = event // 每次滚动鼠标滚轮移动的距离
+      this.setScrollBarMove(deltaY, false)
+    }
+  }
+
+  showMask(distance) {
+    // 根据当前滑块左边距判断是否显示左右遮罩层
+    if (distance >= Math.floor(this.maxBarLeft)) {
+      css(this.leftMask, { display: 'block' })
+    }
+    else if (distance <= 0) {
+      css(this.leftMask, { display: 'none' })
+    }
+    else {
+      css(this.leftMask, { display: 'block' })
+    }
+  }
+
+  getLimitedDistance(distance) {
+    if (distance >= Math.floor(this.maxBarLeft)) {
+      distance = this.maxBarLeft
+    }
+    else if (distance <= 0) {
+      distance = 0
+    }
+    return distance
+  }
+
+  updateScrollBar() {
+    if (!this.table?.parentNode) {
+      return
+    }
+    // 获取表格尺寸和表格容器尺寸
+    const tableRect = this.table.getBoundingClientRect()
+    const tableViewRect = this.table.parentNode.getBoundingClientRect()
+    const tableMoveDistance = tableRect.width - tableViewRect.width // 表格最大移动距离
+    this.tableRect = tableRect
+    this.tableViewRect = tableViewRect
+    this.tableMoveDistance = tableMoveDistance
+    this.oldRootScrollTop = this.quill.root.scrollTop
+
+    if (tableMoveDistance > 0) {
+      this.createScrollBar()
+    }
+    else {
+      this.destroyScrollBar()
+    }
+  }
+
+  createScrollBar() {
+    // 列控制条增加表格相应位移
+    const parent = this.quill.root.parentNode
+    const containerRect = parent.getBoundingClientRect() // 编辑器容器宽度
+    this.containerRect = containerRect
+    css(this.columnCtrlPanel, {
+      left: `${this.tableViewRect.left - containerRect.left - this.table.parentNode.scrollLeft}px`,
+    })
+
+    // 创建滚动条
+    if (this.domNode) {
+      this.domNode.remove()
+    }
+    this.domNode = document.createElement('div')
+    this.domNode.classList.add('qlbt-table-scroll-bar-panel')
+    this.scrollBar = document.createElement('div')
+    this.scrollBar.classList.add('qlbt-table-scroll-bar')
+    this.scrollBar.addEventListener('mousedown', this.handleScrollBarMouseDown.bind(this), false)
+    const scale = this.tableViewRect.width / this.tableRect.width
+    const barWidth = this.tableViewRect.width - this.tableMoveDistance * scale // 滑块宽度
+    css(this.scrollBar, { width: `${barWidth}px` })
+    this.domNode.appendChild(this.scrollBar)
+
+    // 判断当前表格是否存在位移，如存在通过比例计算滑块当前位移并赋值
+    const tableScrollLeft = this.table.parentNode.scrollLeft
+    this.maxBarLeft = this.tableMoveDistance * scale // 滑块最大移动距离
+    if (tableScrollLeft) {
+      const barLeft = tableScrollLeft * scale
+      this.showMask(barLeft)
+      css(this.scrollBar, { left: `${this.getLimitedDistance(barLeft)}px` })
+    }
+
+    // 将滚动条插入到 table control panel 中
+    const barPos = this.tableRect.top + this.tableRect.height - containerRect.top - 1
+    this.isTableOverflow = containerRect.top + containerRect.height < this.tableRect.top + this.tableRect.height
+    this.modulesContainer.appendChild(this.domNode)
+    css(this.domNode, { top: `${Math.min(containerRect.height - SCROLL_BAR_PANEL_HEIGHT, barPos)}px` })
+
+    // 绑定鼠标滚轮事件：Shift+鼠标滚轮，滚动表格横向滚动条
+    document.addEventListener('wheel', this.handleWheel.bind(this))
+  }
+
+  destroyScrollBar() {
+    css(this.leftMask, { display: 'none' })
+    this.columnCtrlPanel.removeAttribute('style')
+    this.maxBarLeft = null
+    this.destroy()
+  }
+
+  destroy() {
+    if (this.domNode) {
+      this.domNode.remove()
+    }
+    this.quill.root.removeEventListener('scroll', this.handleQuillRootScroll.bind(this))
+    document.removeEventListener('wheel', this.handleWheel.bind(this))
+  }
+}

package/src/table/modules/table-selection.ts

@@ -0,0 +1,387 @@
+import Quill from 'quill'
+import { TableCell } from '../formats/table'
+import { ERROR_LIMIT, LINE_POSITIONS, PRIMARY_COLOR } from '../table-config'
+import { css, getRelativeRect } from '../utils'
+
+export default class TableSelection {
+  table: any
+  quill: any
+  modulesContainer: any
+  parent: any
+  boundary: any
+  // @ts-ignore
+  selectedTds: any[]
+  // @ts-ignore
+  dragging: boolean
+  preSelectedTable: any
+  oldRootScrollTop: any
+  selectingHandler: any
+  tdEditHandler: any
+  tdResizeHandler: any
+  endTd: any
+  startTd: any
+  editTd: any
+  left: any
+  bottom: any
+  top: any
+  right: any
+
+  constructor(table, quill, dom) {
+    if (!table) {
+      return null
+    }
+    this.table = table
+    this.quill = quill
+    this.modulesContainer = dom
+    this.parent = this.quill.root.parentNode
+    this.boundary = {} // params for selected square
+    this.selectedTds = [] // array for selected table-cells
+    this.dragging = false
+    this.preSelectedTable = null
+    this.oldRootScrollTop = this.quill.root.scrollTop
+
+    this.selectingHandler = this.mouseDownHandler.bind(this)
+
+    this.tdEditHandler = this.setTdEditable.bind(this)
+    this.tdResizeHandler = this.resizeTd.bind(this)
+
+    this.helpLinesInitial()
+    this.isEditorHasScrollBar()
+
+    this.quill.root.parentNode.addEventListener('mousedown', this.selectingHandler, false)
+    this.quill.on('text-change', this.tdResizeHandler)
+    if (this.quill.root === this.quill.scrollingContainer) {
+      this.quill.root.addEventListener('scroll', this.handleQuillRootScroll.bind(this))
+    }
+  }
+
+  handleQuillRootScroll() {
+    LINE_POSITIONS.forEach((direction) => {
+      const selectionLine = this[direction]
+      if (selectionLine) {
+        selectionLine.style.marginTop = `${this.oldRootScrollTop - this.quill.root.scrollTop}px`
+      }
+    })
+  }
+
+  isEditorHasScrollBar() {
+    if (this.quill.root.scrollHeight > this.quill.root.clientHeight) {
+      css(this.modulesContainer, { width: 'calc(100% - 23px)' })
+    }
+    else {
+      this.modulesContainer.removeAttribute('style')
+    }
+  }
+
+  helpLinesInitial() {
+    LINE_POSITIONS.forEach((direction) => {
+      this[direction] = document.createElement('div')
+      this[direction].classList.add('qlbt-selection-line')
+      if (direction === 'left') {
+        this[direction].classList.add('qlbt-selection-line-first')
+        const ctrlPointLeft = document.createElement('div')
+        this[direction].appendChild(ctrlPointLeft)
+      }
+      if (direction === 'bottom') {
+        this[direction].classList.add('qlbt-selection-line-last')
+        const ctrlPointRight = document.createElement('div')
+        this[direction].appendChild(ctrlPointRight)
+      }
+      css(this[direction], {
+        'position': 'absolute',
+        'display': 'none',
+        'background-color': PRIMARY_COLOR,
+      })
+      this.modulesContainer.appendChild(this[direction])
+    })
+  }
+
+  mouseDownHandler(e) {
+    if (e.button !== 0) {
+      return
+    }
+    const self: any = this
+    const betterTableModule = this.quill.getModule('better-table')
+    const tableColumnTool = betterTableModule.columnTool
+    if (tableColumnTool.activeToolCell) {
+      tableColumnTool.activeToolCell.classList.remove('qlbt-tool-cell-on')
+      tableColumnTool.activeToolCell = null
+    }
+    if (e.target.closest('.quill-better-table')) {
+      if (e.shiftKey) {
+        this.endTd = e.target.closest('td[data-row]')
+        this.drawSelection(this, true)
+        // avoid select text in multiple table-cell
+        if (this.startTd !== this.endTd) {
+          this.quill.blur()
+        }
+      }
+      else {
+        this.startTd = e.target.closest('td[data-row]')
+        this.drawSelection(this, false)
+        this.dragging = true
+
+        this.parent.addEventListener('mousemove', mouseMoveHandler, false)
+        document.addEventListener('mouseup', mouseUpHandler, false)
+      }
+    }
+    else if (e.target.closest('.qlbt-selection-line')) {
+      this.parent.addEventListener('mousemove', mouseMoveHandler, false)
+      document.addEventListener('mouseup', mouseUpHandler, false)
+    }
+
+    function mouseMoveHandler(event) {
+      event.stopPropagation()
+
+      if (event.button !== 0 || !event.target.closest('.quill-better-table')) {
+        return
+      }
+      self.endTd = event.target.closest('td[data-row]')
+      if (!self.endTd) {
+        return
+      }
+      self.drawSelection(self, true)
+      // avoid select text in multiple table-cell
+      if (self.startTd !== self.endTd) {
+        self.quill.blur()
+      }
+    }
+
+    function mouseUpHandler() {
+      self.parent.removeEventListener('mousemove', mouseMoveHandler, false)
+      document.removeEventListener('mouseup', mouseUpHandler, false)
+      self.dragging = false
+    }
+  }
+
+  drawSelection(self, end) {
+    // fix: 如果滚动条拖动，startTd的位置已经改变了，需要重置startTdRect
+    self.startTdRect = getRelativeRect(self.startTd.getBoundingClientRect(), self.quill.root.parentNode)
+    let endTdRect = self.startTdRect
+    if (end) {
+      self.endTdRect = getRelativeRect(self.endTd.getBoundingClientRect(), self.quill.root.parentNode)
+      endTdRect = self.endTdRect
+    }
+    self.boundary = computeBoundaryFromRects(self.startTdRect, endTdRect)
+    self.selectedTds = self.computeSelectedTds()
+    self.repositionHelpLines()
+  }
+
+  setTdEditable(e) {
+    if (!this.editTd) {
+      return
+    }
+    this.parent.removeEventListener('keypress', this.tdEditHandler, false)
+    const dom = this.editTd.domNode
+    dom.removeEventListener('click', this.tdEditHandler, false)
+    dom.classList.add('editing-select-able')
+    dom.setAttribute('contenteditable', true)
+    if (e.type === 'keypress') {
+      if (dom.childNodes.length > 1 || dom.firstChild.innerHTML !== '<br>') {
+        const blank = dom.firstChild.cloneNode()
+        blank.innerHTML = '<br>'
+        dom.innerHTML = ''
+        dom.appendChild(blank)
+      }
+      dom.focus()
+    }
+  }
+
+  resizeTd() {
+    if (!this.editTd || (this.left && !this.left.offsetParent)) {
+      return
+    }
+    if (this.selectedTds.length > 1) {
+      this.refreshHelpLinesPosition()
+    }
+    else {
+      const dom = this.editTd.domNode
+      const domRect = getRelativeRect(dom.getBoundingClientRect(), this.quill.root.parentNode)
+      this.boundary = computeBoundaryFromRects(domRect, domRect)
+      this.repositionHelpLines()
+    }
+
+    // 判断编辑器是否有滚动条，调整遮罩宽度
+    this.isEditorHasScrollBar()
+
+    // 更新行高 更新滑块位置
+    const betterTableModule = this.quill.getModule('better-table')
+    const tableColumnTool = betterTableModule.columnTool
+    if (tableColumnTool) {
+      tableColumnTool.updateRowToolCells()
+      const tableViewRect = this.table.parentNode.getBoundingClientRect()
+      if (tableColumnTool.leftMask) {
+        css(tableColumnTool.leftMask, { height: `${tableViewRect.height + 50}px` })
+      }
+    }
+
+    const tableScrollBar = betterTableModule.tableScrollBar
+    tableScrollBar.resetTableHeight(this.table)
+  }
+
+  resetTd(e) {
+    const dom = e.target
+    dom.classList.remove('editing-select-able')
+    dom.setAttribute('contenteditable', false)
+    dom.removeAttribute('contenteditable')
+  }
+
+  correctBoundary() {
+    const tableContainer = Quill.find(this.table)
+    const tableCells = tableContainer.descendants(TableCell)
+
+    tableCells.forEach((tableCell) => {
+      const { x, y, width, height } = getRelativeRect(tableCell.domNode.getBoundingClientRect(), this.quill.root.parentNode)
+      const isCellIntersected
+        = ((x + ERROR_LIMIT >= this.boundary.x && x + ERROR_LIMIT <= this.boundary.x1)
+          || (x - ERROR_LIMIT + width >= this.boundary.x && x - ERROR_LIMIT + width <= this.boundary.x1))
+          && ((y + ERROR_LIMIT >= this.boundary.y && y + ERROR_LIMIT <= this.boundary.y1)
+            || (y - ERROR_LIMIT + height >= this.boundary.y && y - ERROR_LIMIT + height <= this.boundary.y1))
+      if (isCellIntersected) {
+        this.boundary = computeBoundaryFromRects(this.boundary, { x, y, width, height })
+      }
+    })
+  }
+
+  computeSelectedTds() {
+    const tableContainer = Quill.find(this.table)
+    const tableCells = tableContainer.descendants(TableCell)
+
+    const result = tableCells.reduce((selectedCells, tableCell) => {
+      const { x, y, width, height } = getRelativeRect(tableCell.domNode.getBoundingClientRect(), this.quill.root.parentNode)
+      const isCellIncluded
+        = x + ERROR_LIMIT >= this.boundary.x
+        && x - ERROR_LIMIT + width <= this.boundary.x1
+        && y + ERROR_LIMIT >= this.boundary.y
+        && y - ERROR_LIMIT + height <= this.boundary.y1
+
+      if (isCellIncluded) {
+        selectedCells.push(tableCell)
+      }
+
+      return selectedCells
+    }, [])
+
+    if (result.length === 1 && this.editTd !== result[0]) {
+      const resetTds = this.table.querySelectorAll('td[contenteditable=true]')
+      resetTds.forEach(td => this.resetTd({ target: td }))
+      this.editTd = result[0]
+      this.editTd.domNode.addEventListener('mousedown', this.tdEditHandler, false)
+      this.parent.addEventListener('keypress', this.tdEditHandler, false)
+    }
+
+    return result
+  }
+
+  repositionHelpLines() {
+    this.oldRootScrollTop = this.quill.root.scrollTop
+    if (!this.left) {
+      return
+    }
+
+    css(this.left, {
+      'display': 'block',
+      'left': `${this.boundary.x - 1}px`,
+      'top': `${this.boundary.y}px`,
+      'height': `${this.boundary.height + 1}px`,
+      'width': '1px',
+      'margin-top': '0px',
+    })
+
+    css(this.right, {
+      'display': 'block',
+      'left': `${this.boundary.x1}px`,
+      'top': `${this.boundary.y - 1}px`,
+      'height': `${this.boundary.height + 1}px`,
+      'width': '1px',
+      'margin-top': '0px',
+    })
+
+    css(this.top, {
+      'display': 'block',
+      'left': `${this.boundary.x - 1}px`,
+      'top': `${this.boundary.y - 1}px`,
+      'width': `${this.boundary.width + 1}px`,
+      'height': '1px',
+      'margin-top': '0px',
+    })
+
+    css(this.bottom, {
+      'display': 'block',
+      'left': `${this.boundary.x - 1}px`,
+      'top': `${this.boundary.y1}px`,
+      'width': `${this.boundary.width + 1}px`,
+      'height': '1px',
+      'margin-top': '0px',
+    })
+  }
+
+  // based on selectedTds compute positions of help lines
+  // It is useful when selectedTds are not changed
+  refreshHelpLinesPosition() {
+    const startRect = getRelativeRect(this.selectedTds[0].domNode.getBoundingClientRect(), this.quill.root.parentNode)
+    const endRect = getRelativeRect(
+      this.selectedTds[this.selectedTds.length - 1].domNode.getBoundingClientRect(),
+      this.quill.root.parentNode,
+    )
+    this.boundary = computeBoundaryFromRects(startRect, endRect)
+    this.repositionHelpLines()
+  }
+
+  destroy() {
+    const resetTds = this.table.querySelectorAll('td[contenteditable=true]')
+    resetTds.forEach(td => this.resetTd({ target: td }))
+
+    LINE_POSITIONS.forEach((direction) => {
+      if (this[direction]) {
+        this[direction].remove()
+        this[direction] = null
+      }
+    })
+
+    this.quill.root.parentNode.removeEventListener('mousedown', this.selectingHandler, false)
+
+    delete this.editTd
+
+    return null
+  }
+
+  setSelection(startRect, endRect) {
+    this.boundary = computeBoundaryFromRects(
+      getRelativeRect(startRect, this.quill.root.parentNode),
+      getRelativeRect(endRect, this.quill.root.parentNode),
+    )
+    this.correctBoundary()
+    this.selectedTds = this.computeSelectedTds()
+    this.repositionHelpLines()
+  }
+
+  clearSelection() {
+    const resetTds = this.table.querySelectorAll('td[contenteditable=true]')
+    resetTds.forEach(td => this.resetTd({ target: td }))
+    this.boundary = {}
+    this.selectedTds = []
+    LINE_POSITIONS.forEach((direction) => {
+      if (this[direction]) {
+        css(this[direction], {
+          display: 'none',
+        })
+      }
+    })
+  }
+}
+
+function computeBoundaryFromRects(startRect, endRect) {
+  const x = Math.min(startRect.x, endRect.x, startRect.x + startRect.width - 1, endRect.x + endRect.width - 1)
+
+  const x1 = Math.max(startRect.x, endRect.x, startRect.x + startRect.width - 1, endRect.x + endRect.width - 1)
+
+  const y = Math.min(startRect.y, endRect.y, startRect.y + startRect.height - 1, endRect.y + endRect.height - 1)
+
+  const y1 = Math.max(startRect.y, endRect.y, startRect.y + startRect.height - 1, endRect.y + endRect.height - 1)
+
+  const width = x1 - x
+  const height = y1 - y
+
+  return { x, x1, y, y1, width, height }
+}

package/src/table/table-config.ts

@@ -0,0 +1,42 @@
+export const TABLE_CELL_LINE_CLASS = 'qlrte__better-table-cell-line'
+export const ROW_TOOL_CLASS = 'qlrte__row-tool'
+export const ROW_TOOL_CELL_CLASS = 'qlrte__row-tool-cell'
+export const ROW_TOOL_CELL_HOLDER_CLASS = 'qlrte__row-tool-cell-holder'
+export const COL_TOOL_CLASS = 'qlrte__col-tool'
+export const COL_TOOL_CELL_CLASS = 'qlrte__col-tool-cell'
+export const COL_TOOL_CELL_HOLDER_CLASS = 'qlrte__col-tool-cell-holder'
+export const SELECT_LINE_CLASS = 'qlrte__selection-line'
+export const OPERATE_MENU_CLASS = 'qlrte__op-menu'
+export const OPERATE_MENU_ITEM_CLASS = 'qlrte__op-menu-item'
+export const OPERATE_MENU_ICON_CLASS = 'qlrte__op-menu-icon'
+export const OPERATE_MENU_ICON_PREFIX_CLASS = 'qlrte__op-menu-icon-prefix'
+export const OPERATE_MENU_TEXT_CLASS = 'qlrte__op-menu-text'
+export const OPERATE_MENU_DIVIDING_CLASS = 'qlrte__op-menu-dividing'
+export const OPERATE_MENU_SUBTITLE_CLASS = 'qlrte__op-menu-subtitle'
+export const OPERATE_MENU_COLORPICKER_CLASS = 'qlrte__op-menu-color-picker'
+export const OPERATE_MENU_COLORPICKER_ITEM_CLASS
+  = 'qlrte__op-menu-color-picker-item'
+export const COL_ATTRIBUTES = ['width']
+export const COL_DEFAULT = {
+  width: 100,
+}
+export const CELL_IDENTITY_KEYS = ['row', 'cell']
+export const CELL_ATTRIBUTES = ['rowspan', 'colspan', 'cell-bg', 'list']
+export const CELL_DEFAULT = {
+  rowspan: 1,
+  colspan: 1,
+}
+export const ERROR_LIMIT = 5
+
+export const SCROLL_BAR_PANEL_HEIGHT = 32
+export const ROW_TOOL_WIDTH = 16
+export const COL_TOOL_HEIGHT = 16
+export const CELL_MIN_WIDTH = 50
+export const CELL_MIN_HEIGHT = 29
+export const PRIMARY_COLOR = ['#5170ff', 'var(--brand-1, #5170ff)']
+
+export const MENU_ITEM_HEIGHT = 40
+export const MENU_MIN_HEIGHT = 150
+export const MENU_WIDTH = 205
+
+export const LINE_POSITIONS = ['left', 'right', 'top', 'bottom']