correção bugs tableCellBallon

skaduhs5232 · Jun 12, 2024 · 8b639f4 · 8b639f4
1 parent 10773ca
commit 8b639f4
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 19 deletions.
diff --git a/src/extensions/table-cell/src/table-cell.ts b/src/extensions/table-cell/src/table-cell.ts
@@ -1,5 +1,5 @@
 import { objParaCss } from '@extensions/table'
-import { mergeAttributes, Node } from '@tiptap/core'
+import { mergeAttributes, Node, NodePos } from '@tiptap/core'
 import { type DOMOutputSpec, type ResolvedPos } from '@tiptap/pm/model'
 
 export interface TableCellOptions {
@@ -101,7 +101,7 @@ export const TableCell = Node.create<TableCellOptions>({
     return {
       setCellAttributes:
         (resPos: ResolvedPos, attributes: { [key: string]: any }) =>
-        ({ dispatch, tr }) => {
+        ({ editor, dispatch, tr, state }) => {
           const { nodeAfter, pos } = resPos
 
           const attrs = {

diff --git a/src/extensions/table/TableCellBalloon.ts b/src/extensions/table/TableCellBalloon.ts
@@ -140,7 +140,6 @@ export class ItensModalCell {
     this.cellBorderColorPickr = null
     this.cellBackgroundColorPickr = null
 
-    // Adicionar evento de mudança para o seletor de estilos de borda
     this.cellBorderStyles.addEventListener('change', this.handleBorderStyleChange.bind(this))
   }
 
@@ -185,7 +184,7 @@ export class ItensModalCell {
       this.cellBorderWidth.value = width
       this.cellBorderStyles.value = style
       this.cellBorderColorPickr?.setColor(color)
-      this.handleBorderStyleChange() // Atualizar estado dos inputs
+      this.handleBorderStyleChange()
     } else {
       this.cellBorderStyles.querySelectorAll('option').forEach(option => {
         if (option.value == 'none') {
@@ -277,8 +276,8 @@ export class ItensModalCell {
       this.aplicarEstiloBorda(rgbaColor)
     })
 
-    this.cellBackgroundColorPickr.on('save', (color: any) => {
-      const rgbaColor = color.toRGBA().toString()
+    this.cellBackgroundColorPickr.on('save', (corFundo: any) => {
+      const rgbaColor = corFundo.toRGBA().toString()
       this.cellBackgroundColorPickr?.hide()
       this.aplicarEstiloCelulas(rgbaColor)
     })
@@ -293,6 +292,9 @@ export class ItensModalCell {
     bloco6.className = 'ex-bloco6'
     bloco6.append(this.cellHeight, (document.createElement('span').textContent = '×'), this.cellWidth)
 
+    this.cellWidth.addEventListener('change', () => this.aplicarDimensoesTabela())
+    this.cellHeight.addEventListener('change', () => this.aplicarDimensoesTabela())
+
     const bloco3 = document.createElement('div')
     bloco3.className = 'ex-bloco3'
     bloco3.appendChild(dimensoesLabel)
@@ -346,10 +348,10 @@ export class ItensModalCell {
     iconCancela.className = 'ex-icone-cancelamento'
 
     const botaoConfirma = createButton(this.editor, 'Salvar', () => {
-      /* const borderColor = this.cellBorderColorPickr?.getColor()?.toRGBA()?.toString() ?? ''
+      const borderColor = this.cellBorderColorPickr?.getColor()?.toRGBA()?.toString() ?? ''
       const backgroundColor = this.cellBackgroundColorPickr?.getColor()?.toRGBA()?.toString() ?? ''
       this.aplicarEstiloBorda(borderColor)
-      this.aplicarEstiloCelulas(backgroundColor) */
+      this.aplicarEstiloCelulas(backgroundColor)
       this.aplicarDimensoesTabela()
       this.balloon.off()
     })
@@ -384,14 +386,16 @@ export class ItensModalCell {
       this.editor.commands.setCellAttributes(this.selectedCell, {
         border: `${width}px ${selectedValue} ${color}`
       })
+      this.selectedCell = this.editor.view.state.doc.resolve(this.selectedCell.pos)
     }
   }
 
-  private aplicarEstiloCelulas(color: string) {
-    if (color) {
+  private aplicarEstiloCelulas(corFundo: string) {
+    if (corFundo) {
       this.editor.commands.setCellAttributes(this.selectedCell, {
-        background: color
+        background: corFundo
       })
+      this.selectedCell = this.editor.view.state.doc.resolve(this.selectedCell.pos)
     }
   }
 
@@ -404,6 +408,7 @@ export class ItensModalCell {
         height: `${height}px`,
         width: `${width}px`
       })
+      this.selectedCell = this.editor.view.state.doc.resolve(this.selectedCell.pos)
     }
   }
 }

diff --git a/src/public/style.css b/src/public/style.css
@@ -705,22 +705,24 @@
 
 .ex-icone-confirmacao::after {
   content: '\2714';
-    font-family: Arial, sans-serif;
-    color: green;
-    font-size: 28px;
-    right: 72px;
-    position: relative;
-    top: 3px;
+  font-family: Arial, sans-serif;
+  color: green;
+  font-size: 28px;
+  right: 64px;
+  position: relative;
+  top: 4px;
 }
 
+
+
 .ex-icone-cancelamento::after {
   content: '\2716'; 
   font-family: Arial, sans-serif; 
   color: red;
   font-size: 24px;
-    right: 91px;
+    right: 79px;
     position: relative;
-    top: 3px;
+    top: 4px;
 }
 
 .ex-indicator {