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

package/src/table/utils/index.ts

@@ -0,0 +1,62 @@
+export function css(domNode, rules) {
+  if (typeof rules === 'object') {
+    for (const prop in rules) {
+      if (prop) {
+        if (Array.isArray(rules[prop])) {
+          // 兼容IE11浏览器
+          rules[prop].forEach((val) => {
+            domNode.style[prop] = val
+          })
+        }
+        else {
+          domNode.style[prop] = rules[prop]
+        }
+      }
+    }
+  }
+}
+
+/**
+ * getRelativeRect
+ * @param  targetRect  rect data for target element  {Object}
+ * @param   container  container element {Element}
+ * @return             an object with rect data {Object}
+ */
+export function getRelativeRect(targetRect, container) {
+  const containerRect = container.getBoundingClientRect()
+
+  return { // ie浏览器中getBoundingClientRect输出为left、right、top、bottom，与chrome的x、y不同
+    x: (targetRect.x || targetRect.left) - (containerRect.x || containerRect.left) - container.scrollLeft,
+    y: (targetRect.y || targetRect.top) - (containerRect.y || containerRect.top) - container.scrollTop,
+    x1: (targetRect.x || targetRect.left) - (containerRect.x || containerRect.left) - container.scrollLeft + targetRect.width,
+    y1: (targetRect.y || targetRect.top) - (containerRect.y || containerRect.top) - container.scrollTop + targetRect.height,
+    width: targetRect.width,
+    height: targetRect.height,
+  }
+}
+
+export const elementRemove = function (node) {
+  node && node.parentNode && node.parentNode.removeChild(node)
+}
+
+export const arrayFrom = function (arrayLike, mapFn?, thisArg?) {
+  if (!arrayLike) {
+    throw new TypeError(
+      'Array.from requires an array-like object - not null or undefined',
+    )
+  }
+
+  const length = arrayLike.length
+  const resArray = []
+
+  for (let i = 0; i < length; i++) {
+    if (typeof mapFn === 'function') {
+      resArray.push(mapFn.call(thisArg, arrayLike[i]))
+    }
+    else {
+      resArray.push(arrayLike[i])
+    }
+  }
+
+  return resArray
+}

package/src/table/utils/node-matchers.ts

@@ -0,0 +1,359 @@
+import Quill from 'quill'
+import { omit, splitWithBreak } from '../../config/editor.utils'
+import { cellId as tableCellId, rowId as tableRowId, TableViewWrapper } from '../formats/table'
+import { CELL_MIN_WIDTH } from '../table-config'
+
+const Delta = Quill.imports.delta
+const InlineBlot = Quill.imports.parchment.InlineBlot
+
+// rebuild delta
+export function matchTableCell(node, delta) {
+  // fix: 移除旧数据中的pt高度,避免由于高度平均分导致无法插入行
+  if (node.style.height.indexOf('pt')) {
+    node.removeAttribute('style')
+  }
+
+  const row = node.parentNode
+  let rowId = row.dataset.row
+  if (!rowId) {
+    rowId = row.dataset.row = tableRowId()
+  }
+  let cellId = node.dataset.cell
+  // fix: dataset.cell in td will be 'undefined' when insert row/column
+  if (!cellId || cellId === 'undefined') {
+    cellId = tableCellId()
+  }
+  const colspan = node.getAttribute('colspan') || 1
+  const rowspan = node.getAttribute('rowspan') || 1
+
+  // fix: empty table cells copied from other place will be removed unexpectedly
+  if (delta.length() === 0) {
+    delta = new Delta().insert('\n', {
+      'table-cell-line': { row: rowId, cell: cellId, rowspan, colspan },
+    })
+    return delta
+  }
+
+  delta = delta.reduce((newDelta, op) => {
+    if (op.insert && typeof op.insert === 'string') {
+      const lines = splitWithBreak(op.insert)
+
+      lines.forEach((text) => {
+        if (text === '\n') {
+          let attributes = {}
+          const cellAttributes = {
+            row: rowId,
+            cell: cellId,
+            rowspan,
+            colspan,
+          }
+          if (op.attributes.table) {
+            delete op.attributes.table
+          }
+          switch (true) {
+            case !!op.attributes.header:
+              attributes = Object.assign(op.attributes.header, cellAttributes)
+              break
+            case !!op.attributes.list:
+              attributes = { list: Object.assign(op.attributes.list, cellAttributes) }
+              break
+            default:
+              attributes = { 'table-cell-line': cellAttributes }
+          }
+          // fix: when td has background-color, quill can't set it to table-cell bolt
+          if (op.attributes.background && attributes['table-cell-line']) {
+            attributes['table-cell-line'].tdBgColor = op.attributes.background
+          }
+          newDelta.insert('\n', Object.assign(op.attributes, attributes))
+        }
+        else {
+          newDelta.insert(text, omit(op.attributes, ['table', 'table-cell-line', 'header', 'list']))
+        }
+      })
+    }
+    else {
+      newDelta.insert(op.insert, op.attributes)
+    }
+
+    return newDelta
+  }, new Delta())
+
+  // fix: table cell height becomes larger(because insert unnecessary <div> on both sides of cell) when init table ngModel
+  const regexp = /^[\n]+$/
+  const firstDelta = delta.ops[0]
+  if (delta.ops.length >= 3) {
+    const lastDelta = delta.ops[delta.ops.length - 1]
+    if (regexp.test(firstDelta.insert) && firstDelta.attributes['table-cell-line']) {
+      delta.ops.splice(0, 1)
+    }
+    if (regexp.test(lastDelta.insert) && lastDelta.attributes['table-cell-line']) {
+      delta.ops[delta.ops.length - 1].insert = '\n'
+    }
+  }
+  else if (delta.ops.length === 1 && regexp.test(firstDelta.insert) && firstDelta.attributes['table-cell-line']) {
+    delta.ops[0].insert = '\n'
+  }
+
+  return delta
+}
+
+// replace th tag with td tag
+export function matchTableHeader(node, delta, _scroll) {
+  const row = node.parentNode
+  const cells = Array.from(row.querySelectorAll('th'))
+  let rowId = row.dataset.row
+  if (!rowId) {
+    rowId = row.dataset.row = tableRowId()
+  }
+  const cellId = cells.indexOf(node) + 1
+  const colspan = node.getAttribute('colspan') || false
+  const rowspan = node.getAttribute('rowspan') || false
+
+  // fix: empty table cells copied from other place will be removed unexpectedly
+  if (delta.length() === 0) {
+    delta = new Delta().insert('\n', {
+      'table-cell-line': { row: rowId, cell: cellId, rowspan, colspan },
+    })
+    return delta
+  }
+
+  delta = delta.reduce((newDelta, op) => {
+    if (op.insert && typeof op.insert === 'string') {
+      const lines = splitWithBreak(op.insert)
+
+      // fix: no '\n' in the end of op.insert, push a '\n' to lines
+      if (lines[lines.length - 1] !== '\n') {
+        lines.push('\n')
+      }
+
+      lines.forEach((text) => {
+        text === '\n'
+          ? newDelta.insert('\n', { 'table-cell-line': { row: rowId, cell: cellId, rowspan, colspan } })
+          : newDelta.insert(text, op.attributes)
+      })
+    }
+    else {
+      newDelta.insert(op.insert, op.attributes)
+    }
+
+    return newDelta
+  }, new Delta())
+
+  delta = delta.reduce((newDelta, op) => {
+    if (op.insert && typeof op.insert === 'string' && op.insert.startsWith('\n')) {
+      newDelta.insert(op.insert, { 'table-cell-line': { row: rowId, cell: cellId, rowspan, colspan } })
+    }
+    else {
+      newDelta.insert(op.insert, { ...omit(op.attributes, ['table', 'table-cell-line']) })
+    }
+
+    return newDelta
+  }, new Delta())
+
+  return delta
+}
+
+// supplement colgroup and col
+export function matchTable(node, delta, scroll) {
+  const isWordTable = node.children.length === 1
+  if (!(node instanceof Element)) {
+    return
+  }
+  const getMaxColNumber = (tds) => {
+    if (isWordTable) {
+      return tds.length
+    }
+    let colsNumber = 0
+    tds.forEach((td) => {
+      colsNumber += td.colSpan
+    })
+    return Math.max(tds.length, colsNumber)
+  }
+
+  const checkMinWidth = (width) => {
+    if (Number.isNaN(width)) {
+      // 无指定值时默认为auto，待渲染后修正
+      return { 'table-col': { width: 'auto' } }
+    }
+    else if (width < CELL_MIN_WIDTH) {
+      // 当列宽度小于默认宽度时取默认宽度
+      return { 'table-col': true }
+    }
+    else {
+      // 大于默认值取实际指定值
+      return { 'table-col': { width } }
+    }
+  }
+
+  // fix: a table with an empty tr is invalid, should not be displayed
+  const rows = node.querySelectorAll('tr')
+  const topRow = rows[0]
+  const onlyEmptyTr = rows.length === 1 && !topRow.querySelector('td')
+
+  // fix: empty table will return empty delta
+  if (!topRow || onlyEmptyTr) {
+    return new Delta().insert('\n')
+  }
+
+  const colsNumber = node.querySelectorAll('col').length
+  let maxCellsNumber = 0
+  let maxCells
+  // 遍历行获取最大列数和该行的所有单元格
+  Array.prototype.slice.call(rows).forEach((row) => {
+    const tds = row.querySelectorAll('td')
+    maxCellsNumber = Math.max(getMaxColNumber(tds), maxCellsNumber)
+    maxCells = tds
+  })
+
+  // 列的累计器
+  let colCount = 0
+  delta = delta.reduce((newDelta, op) => {
+    // 当colCount与colsNumber相等时，则补充相差列
+    if (colCount === colsNumber) {
+      const fillNumber = maxCellsNumber - colCount
+      const outset = colCount
+      // index为差值列索引，通过遍历差值得到mexCells行中对应索引的单元格宽度
+      for (let i = 0; i < fillNumber; i++) {
+        const index = outset + i
+        const colWidth = Number.parseInt(
+          index < maxCells.length
+            ? maxCells[index].width
+          // maxCells[index].style && maxCells[index].style.width ? maxCells[index].style.width :
+            : maxCells[maxCells.length - 1].width,
+          10,
+        )
+        newDelta.insert('\n', checkMinWidth(colWidth))
+        colCount++
+      }
+    }
+    const attr = op.attributes || {}
+    switch (true) {
+      case !!attr['table-col']:
+      // 只有当前列数小于实际总列数才操作，所以不存在大于的情况
+        if (colCount < maxCellsNumber) {
+        // 当table-col宽度一致时会合并为单一insert，insert长度大于1，截取符合实际总列数的长度来插入
+          const insert = op.insert.slice(0, maxCellsNumber)
+          const colWidth = Number.parseInt(attr['table-col'].width, 10)
+          newDelta.insert(insert, checkMinWidth(colWidth))
+          colCount += insert.length
+        }
+        break
+      case !!attr.notFilled:
+      { // 将标记的空tr填充对应列数的单元格
+        const rowId = tableRowId()
+        for (let x = 0; x < maxCellsNumber; x++) {
+          newDelta.insert('\n', { 'table-cell-line': { row: rowId, cell: tableCellId(), rowspan: 1, colspan: 1 } })
+        }
+        break }
+      default:
+        newDelta.insert(op.insert, op.attributes)
+    }
+    return newDelta
+  }, new Delta())
+
+  const tableItem = node.closest('.quill-better-table-wrapper') || node
+  const prevBlot = tableItem.previousElementSibling && scroll.query(tableItem.previousElementSibling)
+  const nextBlot = tableItem.nextElementSibling && scroll.query(tableItem.nextElementSibling)
+  // fix: prevent two adjacent tables from sticking together
+  if (!nextBlot || nextBlot.prototype instanceof InlineBlot) {
+    delta = delta.insert('\n')
+  }
+  // fix: When there is no line break in front of the table, pressing the Enter key will cause a problem with the table.
+  if (!prevBlot || prevBlot.prototype instanceof InlineBlot) {
+    const newLine = new Delta().insert('\n')
+    delta = newLine.concat(delta)
+  }
+  if (nextBlot === TableViewWrapper) {
+    delta = delta.insert('\n')
+  }
+
+  return delta
+}
+
+export function matchTableRow(_node, delta) {
+  // fix: 处理空<tr>标签被忽略的情况
+  if (delta.ops.length === 1 && !delta.ops[0].attributes) {
+    delta = new Delta().insert('\n', { notFilled: true })
+  }
+  return delta
+}
+
+// match h tags, distinguish between headers in the table and headers outside the table
+export function matchHeader(node, delta) {
+  const newDelta = new Delta()
+  const fontSize = node.style.fontSize
+  delta.forEach((op) => {
+    newDelta.insert(
+      op.insert,
+      Object.assign(op.attributes, {
+        size: fontSize,
+      }),
+    )
+  })
+  return newDelta
+}
+
+export function matchList(node, delta) {
+  const value = node.tagName === 'UL' ? 'bullet' : 'ordered'
+  delta.forEach((op) => {
+    if (typeof op.attributes.list === 'string') {
+      delete op.attributes.list
+    }
+    else if (typeof op.attributes.list === 'object' && !op.attributes.list.value) {
+      op.attributes.list.value = value
+    }
+  })
+  return delta
+}
+
+export function matchInline(node, delta, scroll) {
+  const quill = Quill.find(scroll.domNode.parentNode)
+  const currentRange = quill.getSelection()
+  const formats = currentRange && quill.getFormat(currentRange)
+  if (
+    formats
+    && formats['table-cell-line'] // 当前光标节点在表格内，否则不操作delta
+    && node.nextElementSibling
+  ) {
+    // 插入节点是否存在下一个兄弟元素
+    const match = scroll.query(node)
+    const nodeHtml = node.nextElementSibling.innerHTML
+    const nodeText = node.nextElementSibling.textContent
+    if (
+      (match && match.prototype instanceof InlineBlot) // 判断当前节点是否为内联
+      || (node.tagName === 'P' && nodeHtml !== nodeText)
+    ) {
+      // 非内联时如果为P且下一个不为text节点
+      delta.forEach((op) => {
+        op.insert += '\n'
+      })
+    }
+  }
+  return delta
+}
+
+// 匹配 word 自带的 v:shape 标签中的图片 v:imageData
+export function matchWordShapeImage(node, delta) {
+  if (node) {
+    const imageUrl = node.attributes.src?.nodeValue
+    delta = new Delta().insert({ image: imageUrl })
+  }
+  return delta
+}
+
+export function matchMentionLink(node, delta, scroll) {
+  const name = node.dataset.mentionId
+  if (name) {
+    const quill = Quill.find(scroll.domNode.parentNode)
+    const mention = quill.getModule('mention')
+    if (mention) {
+      mention.options.search(name).then((res) => {
+        const [item] = res
+        if (item) {
+          mention.options.select(item)
+        }
+      })
+    }
+  }
+  return delta
+}