criação de botoes de criar paragrafo na tabela

src/extensions/table/TableView.ts

@@ -18,6 +18,7 @@ import { Balloon } from '../../editor/ui/Balloon'
 
 import { criaTabelaModal } from './itensModalTable'
 import { objParaCss } from './table'
+import TableFocus from './tableFocus'
 import { criaDropCell, criaDropColuna, criaDropLinhas } from './tableToolbarItens'
 
 function clickHandler(table: TableView) {
@@ -128,6 +129,8 @@ export class TableView implements NodeView {
     updateColumns(node, this.colgroup, this.table, this.cellMinWidth)
     this.contentDOM = this.table.appendChild(document.createElement('tbody'))
 
+    new TableFocus(this)
+
     const configStorage = {
       celumnsTable: {
         toolbarButtonConfig: {

src/extensions/table/itensModalTable.ts

@@ -252,7 +252,16 @@ function itensModalTable(editor: ExitusEditor) {
   dropdownContent.appendChild(botaoConfirma)
 
   const botaoCancela = createButton(editor, 'Cancelar', () => {
-    // o que acontece quando clicar no botão
+    ;(editor.commands as any).setWrapperStyle({
+      Direita: 'auto',
+      Esquerda: 'auto'
+    })
+    ;(editor.commands as any).setTableStyle({
+      height: ``,
+      width: ``,
+      background: ``,
+      border: ``
+    })
   })
   botaoCancela.className = 'botaoCancela'
   const iconeCancela = document.createElement('span')

src/extensions/table/tableFocus.ts

@@ -0,0 +1,53 @@
+import { Button } from '@editor/ui'
+import setaCima from '@icons/corner-down-left-line.svg'
+import setaBaixo from '@icons/corner-down-right-line.svg'
+import type ExitusEditor from 'src/ExitusEditor'
+
+import { type TableView } from './TableView'
+
+export default class TableFocus {
+  tableView: TableView
+  FocarCima!: HTMLElement
+  FocarBaixo!: HTMLElement
+
+  constructor(tableView: TableView, editor: ExitusEditor) {
+    this.tableView = tableView
+    this.focaTabela(editor)
+  }
+
+  private focaTabela(editor: ExitusEditor) {
+    const element = this.tableView.tableWrapper
+    element.style.position = 'relative'
+
+    const botaoCima = createButton(editor, setaCima, () => {
+      this.moveAlvoParaCima()
+    })
+    this.FocarCima = element.appendChild(botaoCima)
+    this.FocarCima.classList.add('bolinha', 'bolinha-cima')
+
+    const botaoBaixo = createButton(editor, setaBaixo, () => {
+      this.moveAlvoParaBaixo()
+    })
+    this.FocarBaixo = element.appendChild(botaoBaixo)
+    this.FocarBaixo.classList.add('bolinha', 'bolinha-baixo')
+  }
+
+  private moveAlvoParaCima() {
+    const paragrafo = '<p></p>'
+    this.tableView.dom.insertAdjacentHTML('beforebegin', paragrafo)
+  }
+
+  private moveAlvoParaBaixo() {
+    const paragrafo = '<p></p>'
+    this.tableView.dom.insertAdjacentHTML('afterend', paragrafo)
+  }
+}
+
+function createButton(editor: ExitusEditor, icone: string, onClick: () => void) {
+  const button = new Button(editor, {
+    icon: icone,
+    classList: ['bolinha']
+  })
+  button.bind('click', onClick)
+  return button.render()
+}

src/public/style.css

@@ -84,6 +84,10 @@
     outline-color: #ffc83d;
   }
 
+  .tiptap-widget:hover > .bolinha{
+    display: block;
+  }
+
   .ex-selected {
     outline-color: hsl(218,81.8%,56.9%)!important;
   }
@@ -123,15 +127,23 @@
     display: none!important;
   }
 
-  .ex-toolbar-button:hover {
+  .ex-toolbar-button:not(.bolinha):hover {
     background: #f0f0f0;
-  }
+}
 
   .ex-toolbar-button svg {
     width: 20px;
     height: 20px;
   }
 
+  .bolinha svg {
+    width: 15px;
+    height: 15px;
+    color: #fff;
+    margin: -1px -1px;
+}
+
+
   .resize-cursor {
     cursor: ew-resize;
     cursor: col-resize;
@@ -495,4 +507,30 @@
   top: 135px;
   left: 65px;
   right: auto;
-}
+}
+
+
+.bolinha {
+  width: 18px;
+  height: 18px;
+  background-color: #007bff; 
+  border-radius: 50%; 
+  position: absolute; 
+  cursor: pointer; 
+  z-index: 0; 
+  display: none;
+}
+
+
+.bolinha-cima {
+  top: -12px;
+  left: 4%;
+  transform: translateX(-50%);
+}
+
+
+.bolinha-baixo {
+  bottom: -12px;
+  left: 96%;
+  transform: translateX(-50%);
+}