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

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

@@ -1,248 +0,0 @@
-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

@@ -1,387 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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']