From d4c9a1af47ef24bdeb9810fa7dd4ceb2081df16b Mon Sep 17 00:00:00 2001 From: Old-Second Date: Thu, 4 Jul 2024 03:11:30 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E5=88=A0=E9=99=A4=E5=88=97=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/sass/previewer.scss | 25 +++++++++++++++ src/utils/tableContentHandler.js | 52 ++++++++++++++++++++++++++++++++ 2 files changed, 77 insertions(+) diff --git a/src/sass/previewer.scss b/src/sass/previewer.scss index 82c930d3..39e1aff1 100644 --- a/src/sass/previewer.scss +++ b/src/sass/previewer.scss @@ -116,6 +116,31 @@ color: #FFF; } } + &-delete-container { + position: absolute; + height: 100%; + width: 100%; + padding: 0; + margin: 0; + } + &__delete { + pointer-events: auto; + position: absolute; + color: #FFF; + width: 40px; + height: 18px; + font-size: 12px; + line-height: 12px; + border: 1px solid #FF4D4F; + border-radius: 5px; + background-color: #FF4D4F; + cursor: pointer; + transition: all 0.3s; + &:hover { + background-color: #FF7875; + color: #FFF; + } + } } @keyframes changeBgColor { 0% { background-color: #ffffcc88; } diff --git a/src/utils/tableContentHandler.js b/src/utils/tableContentHandler.js index a5be1b38..3f483609 100644 --- a/src/utils/tableContentHandler.js +++ b/src/utils/tableContentHandler.js @@ -14,6 +14,7 @@ * limitations under the License. */ import { getTableRule, getCodeBlockRule } from '@/utils/regexp'; + /** * 用于在表格上出现编辑区，并提供拖拽行列的功能 */ @@ -166,6 +167,7 @@ export default class TableHandler { return; } this.$setSymbolOffset(); + this.$setDeleteButtonPosition(); } $remove() { @@ -307,6 +309,7 @@ export default class TableHandler { return; } this.$drawSymbol(); + this.$drawDelete(); } /** @@ -471,6 +474,55 @@ export default class TableHandler { this.$setSelection(this.tableEditor.info.tableIndex, 'table'); } + /** + * 添加删除按钮 + */ + $drawDelete() { + const types = ['top', 'bottom']; + const buttons = types.map((type) => [type]); + const container = document.createElement('div'); + container.className = 'cherry-previewer-table-hover-handler-delete-container'; + buttons.forEach(([type]) => { + const button = document.createElement('button'); + button.setAttribute('data-type', type); + button.className = 'cherry-previewer-table-hover-handler__delete'; + button.innerHTML = '删除'; + button.title = '删除当前列'; + button.addEventListener('click', (e) => { + // this.$deleteCurrentColumn(); + }); + container.appendChild(button); + }); + this.tableEditor.editorDom.deleteContainer = container; + this.container.appendChild(this.tableEditor.editorDom.deleteContainer); + this.$setDeleteButtonPosition(); + } + + /** + * 设置删除按钮的位置 + */ + $setDeleteButtonPosition() { + const container = this.tableEditor.editorDom.deleteContainer; + const { tableNode, tdNode } = this.tableEditor.info; + const tableInfo = this.$getPosition(tableNode); + const tdInfo = this.$getPosition(tdNode); + // 设置容器宽高 + this.setStyle(this.container, 'width', `${tableInfo.width}px`); + this.setStyle(this.container, 'height', `${tableInfo.height}px`); + this.setStyle(this.container, 'top', `${tableInfo.top}px`); + this.setStyle(this.container, 'left', `${tableInfo.left}px`); + + // 设置删除按钮位置 + container.childNodes.forEach((node) => { + const { type } = node.dataset; + const offset = { + outer: 20, + }; + this.setStyle(node, `${type}`, `-${offset.outer}px`); + this.setStyle(node, 'left', `${tdInfo.left - tableInfo.left + tdInfo.width / 2 - node.offsetWidth / 2}px`); + }); + } + /** * 拖拽 */ From 546b2c45682db4bbaedd144d2b842f5313bddc9a Mon Sep 17 00:00:00 2001 From: Old-Second Date: Sun, 14 Jul 2024 05:26:25 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E5=88=A0=E9=99=A4=E5=BD=93=E5=89=8D=E5=88=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/sass/previewer.scss | 2 +- src/utils/tableContentHandler.js | 21 ++++++++++++++++++++- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/src/sass/previewer.scss b/src/sass/previewer.scss index 39e1aff1..5ba9b5dc 100644 --- a/src/sass/previewer.scss +++ b/src/sass/previewer.scss @@ -92,7 +92,7 @@ pointer-events: none; z-index: 999; &-container { - position: relative; + position: absolute; height: 100%; padding: 0; margin: 0; diff --git a/src/utils/tableContentHandler.js b/src/utils/tableContentHandler.js index 3f483609..f857ac17 100644 --- a/src/utils/tableContentHandler.js +++ b/src/utils/tableContentHandler.js @@ -489,7 +489,7 @@ export default class TableHandler { button.innerHTML = '删除'; button.title = '删除当前列'; button.addEventListener('click', (e) => { - // this.$deleteCurrentColumn(); + this.$deleteCurrentColumn(); }); container.appendChild(button); }); @@ -523,6 +523,25 @@ export default class TableHandler { }); } + /** + * 删除当前列 + */ + $deleteCurrentColumn() { + const { tableIndex, tdIndex } = this.tableEditor.info; + this.$setSelection(tableIndex, 'table'); + const selection = this.codeMirror.getSelection(); + const table = selection.split('\n'); + const rows = table.map((row) => row.split('|').slice(1, -1)); + rows.forEach((row) => { + if (tdIndex >= 0 && tdIndex < row.length) { + row.splice(tdIndex, 1); + } + }); + const newTable = rows.map((row) => (row.length === 0 ? '' : `|${row.join('|')}|`)); + const newText = newTable.join('\n'); + this.codeMirror.replaceSelection(newText); + } + /** * 拖拽 */ From 925cdc0eb334c43b9b2e785b29509408d98913c6 Mon Sep 17 00:00:00 2001 From: Old-Second Date: Sun, 14 Jul 2024 06:18:23 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0hover=E5=88=A0=E9=99=A4=E6=8C=89=E9=92=AE=E6=A0=87?= =?UTF-8?q?=E7=BA=A2=E5=BD=93=E5=89=8D=E5=88=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/tableContentHandler.js | 46 +++++++++++++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/src/utils/tableContentHandler.js b/src/utils/tableContentHandler.js index f857ac17..57e75044 100644 --- a/src/utils/tableContentHandler.js +++ b/src/utils/tableContentHandler.js @@ -474,10 +474,48 @@ export default class TableHandler { this.$setSelection(this.tableEditor.info.tableIndex, 'table'); } + /** + * 高亮当前列 + * @param {number} tdIndex 当前列的索引 + */ + $highlightColumn(tdIndex) { + const { tableNode } = this.tableEditor.info; + const { rows } = tableNode; + rows[0].cells[tdIndex].style.borderTop = '1px solid red'; + rows[rows.length - 1].cells[tdIndex].style.borderBottom = '1px solid red'; + for (let i = 0; i < rows.length; i++) { + const { cells } = rows[i]; + if (cells[tdIndex]) { + if (tdIndex === 0) cells[tdIndex].style.borderLeft = '1px solid red'; + else cells[tdIndex - 1].style.borderRight = '1px solid red'; + cells[tdIndex].style.borderRight = '1px solid red'; + } + } + } + + /** + * 取消高亮当前列 + * @param {number} tdIndex 当前列的索引 + */ + $cancelHighlightColumn(tdIndex) { + const { tableNode } = this.tableEditor.info; + if (tableNode) { + const { rows } = tableNode; + for (let i = 0; i < rows.length; i++) { + const { cells } = rows[i]; + if (cells[tdIndex]) { + if (tdIndex !== 0) cells[tdIndex - 1].style.border = ''; + cells[tdIndex].style.border = ''; // 恢复原始边框 + } + } + } + } + /** * 添加删除按钮 */ $drawDelete() { + const { tdIndex } = this.tableEditor.info; const types = ['top', 'bottom']; const buttons = types.map((type) => [type]); const container = document.createElement('div'); @@ -488,9 +526,15 @@ export default class TableHandler { button.className = 'cherry-previewer-table-hover-handler__delete'; button.innerHTML = '删除'; button.title = '删除当前列'; - button.addEventListener('click', (e) => { + button.addEventListener('click', () => { this.$deleteCurrentColumn(); }); + button.addEventListener('mouseover', () => { + this.$highlightColumn(tdIndex); + }); + button.addEventListener('mouseout', () => { + this.$cancelHighlightColumn(tdIndex); + }); container.appendChild(button); }); this.tableEditor.editorDom.deleteContainer = container;