From 3f919f0bd505e483fee051e6cf8fe3f9e2286c19 Mon Sep 17 00:00:00 2001 From: Thiago Sampaio Date: Wed, 22 May 2024 14:37:15 -0300 Subject: [PATCH] =?UTF-8?q?cria=C3=A7=C3=A3o=20do=20ultimo=20botao=20da=20?= =?UTF-8?q?tabela?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 32 +- package.json | 8 +- src/extensions/extension-table-cell/README.md | 14 + .../extension-table-cell/src/index.ts | 5 + .../extension-table-cell/src/table-cell.ts | 116 ++++++++ src/extensions/image/imageView.ts | 24 +- src/extensions/table/TableView.ts | 5 +- src/extensions/table/itensModalCell.ts | 275 ++++++++++++++++++ src/extensions/table/itensModalTable.ts | 21 +- src/extensions/table/table.ts | 12 +- src/extensions/table/tableFocus.ts | 20 +- src/main.ts | 6 +- tsconfig.json | 3 +- vite.config.js | 3 +- 14 files changed, 493 insertions(+), 51 deletions(-) create mode 100644 src/extensions/extension-table-cell/README.md create mode 100644 src/extensions/extension-table-cell/src/index.ts create mode 100644 src/extensions/extension-table-cell/src/table-cell.ts create mode 100644 src/extensions/table/itensModalCell.ts diff --git a/package-lock.json b/package-lock.json index bc539c7..1ecddd3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,10 +27,10 @@ "@tiptap/extension-strike": "^2.2.5", "@tiptap/extension-subscript": "^2.2.5", "@tiptap/extension-superscript": "^2.2.5", - "@tiptap/extension-table": "^2.3.1", - "@tiptap/extension-table-cell": "^2.3.1", - "@tiptap/extension-table-header": "^2.3.1", - "@tiptap/extension-table-row": "^2.3.1", + "@tiptap/extension-table": "^2.4.0", + "@tiptap/extension-table-cell": "^2.4.0", + "@tiptap/extension-table-header": "^2.4.0", + "@tiptap/extension-table-row": "^2.4.0", "@tiptap/extension-text": "^2.2.5", "@tiptap/extension-text-align": "^2.2.5", "@tiptap/extension-underline": "^2.2.5", @@ -1052,9 +1052,9 @@ } }, "node_modules/@tiptap/extension-table": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-2.3.1.tgz", - "integrity": "sha512-FRhmTKi1Q9ihww+mFSkuLQzssT0tjyqu3C+CRQL1N+2pTcRoe1gh6zh/D+oYitc660bgV5oBgHV6mfOJYUB9lQ==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-2.4.0.tgz", + "integrity": "sha512-ceIUnPSqVCb+qC0XZSgApoG3dL3MRvWrGl1nIMxEqPgMsD/MP6MsYV1Lx/GmtdUlEEsV1624cGTBiRzeCuWkZA==", "funding": { "type": "github", "url": "https://github.com/sponsors/ueberdosis" @@ -1065,9 +1065,9 @@ } }, "node_modules/@tiptap/extension-table-cell": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/@tiptap/extension-table-cell/-/extension-table-cell-2.3.1.tgz", - "integrity": "sha512-xjCmpokTRyU4OcUbrXchPkZhUY5ACNyNYPwxWcXlZHG8rFbF/UJFHt22VZzMFLb33iBWgsPR9MfPtSL4+wdm4Q==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-table-cell/-/extension-table-cell-2.4.0.tgz", + "integrity": "sha512-zylResMWLvV17Z6+GEDjvvl+YpJqJhNMyJsZPZNx/72OcNCDN3p2d6RGFwhpnCpdzZDD6LGaIgWaTj9oeg53SA==", "funding": { "type": "github", "url": "https://github.com/sponsors/ueberdosis" @@ -1077,9 +1077,9 @@ } }, "node_modules/@tiptap/extension-table-header": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/@tiptap/extension-table-header/-/extension-table-header-2.3.1.tgz", - "integrity": "sha512-hAQjjPie+QDW851CsmknoPI1hkB54mur0EudHxuEMCTweMZJseiO+IggNdQT3YdlUcV/UZTJdnhtOvmpHHLQ1w==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-table-header/-/extension-table-header-2.4.0.tgz", + "integrity": "sha512-FZCOyJHSFsMTCfBh49J1DlwgpUIM5Ivpr57Za8FVvUkk8RKUIOKpNsZqxE+Wrw+2Bvy5H4X7Azb588x0NDqfOQ==", "funding": { "type": "github", "url": "https://github.com/sponsors/ueberdosis" @@ -1089,9 +1089,9 @@ } }, "node_modules/@tiptap/extension-table-row": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/@tiptap/extension-table-row/-/extension-table-row-2.3.1.tgz", - "integrity": "sha512-TYUj1XXdVGHrQOs1MiErB064Wp6vJeInViuN+fXt/u/Fc4LbQzfXbMsjqALfcfajJdGgqHBNBV25lzCrFGTJ8w==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@tiptap/extension-table-row/-/extension-table-row-2.4.0.tgz", + "integrity": "sha512-K4FDI4YzyLWZbhIZYYL15uqs6M3QsPZGTpTdkSaxcKMLholcskDSHhJmySxnrjI0+JNAtyIiqlWBfA1/9Zyhng==", "funding": { "type": "github", "url": "https://github.com/sponsors/ueberdosis" diff --git a/package.json b/package.json index 688e20c..a8d97f9 100644 --- a/package.json +++ b/package.json @@ -40,10 +40,10 @@ "@tiptap/extension-strike": "^2.2.5", "@tiptap/extension-subscript": "^2.2.5", "@tiptap/extension-superscript": "^2.2.5", - "@tiptap/extension-table": "^2.3.1", - "@tiptap/extension-table-cell": "^2.3.1", - "@tiptap/extension-table-header": "^2.3.1", - "@tiptap/extension-table-row": "^2.3.1", + "@tiptap/extension-table": "^2.4.0", + "@tiptap/extension-table-cell": "^2.4.0", + "@tiptap/extension-table-header": "^2.4.0", + "@tiptap/extension-table-row": "^2.4.0", "@tiptap/extension-text": "^2.2.5", "@tiptap/extension-text-align": "^2.2.5", "@tiptap/extension-underline": "^2.2.5", diff --git a/src/extensions/extension-table-cell/README.md b/src/extensions/extension-table-cell/README.md new file mode 100644 index 0000000..749b07a --- /dev/null +++ b/src/extensions/extension-table-cell/README.md @@ -0,0 +1,14 @@ +# @tiptap/extension-table-cell +[![Version](https://img.shields.io/npm/v/@tiptap/extension-table-cell.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-table-cell) +[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-table-cell.svg)](https://npmcharts.com/compare/tiptap?minimal=true) +[![License](https://img.shields.io/npm/l/@tiptap/extension-table-cell.svg)](https://www.npmjs.com/package/@tiptap/extension-table-cell) +[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis) + +## Introduction +Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*. + +## Official Documentation +Documentation can be found on the [Tiptap website](https://tiptap.dev). + +## License +Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md). diff --git a/src/extensions/extension-table-cell/src/index.ts b/src/extensions/extension-table-cell/src/index.ts new file mode 100644 index 0000000..0f61292 --- /dev/null +++ b/src/extensions/extension-table-cell/src/index.ts @@ -0,0 +1,5 @@ +import { TableCell } from './table-cell.js' + +export * from './table-cell.js' + +export default TableCell diff --git a/src/extensions/extension-table-cell/src/table-cell.ts b/src/extensions/extension-table-cell/src/table-cell.ts new file mode 100644 index 0000000..bc8a139 --- /dev/null +++ b/src/extensions/extension-table-cell/src/table-cell.ts @@ -0,0 +1,116 @@ +import { objParaCss } from '@extensions/table' +import { mergeAttributes, Node } from '@tiptap/core' +import { selectionCell } from '@tiptap/pm/tables' + +export interface TableCellOptions { + /** + * The HTML attributes for a table cell node. + * @default {} + * @example { class: 'foo' } + */ + HTMLAttributes: Record +} + +/** + * This extension allows you to create table cells. + * @see https://www.tiptap.dev/api/nodes/table-cell + */ + +export function cssParaObj(cssString: string): { [key: string]: string } { + const styles: { [key: string]: string } = {} + + // Remover espaços em branco desnecessários + cssString = cssString.replace(/\s*:\s*/g, ':').replace(/\s*;\s*/g, ';') + + // Dividir a string por ponto e vírgula para obter as declarações individuais + const declarations = cssString.split(';') + + // Iterar sobre as declarações e adicionar ao objeto + declarations.forEach(declaration => { + const [property, value] = declaration.split(':') + if (property && value) { + styles[property.trim()] = value.trim() + } + }) + + return styles +} + +export const TableCell = Node.create({ + name: 'tableCell', + + addOptions() { + return { + HTMLAttributes: {} + } + }, + + content: 'block+', + + addAttributes() { + return { + colspan: { + default: 1 + }, + rowspan: { + default: 1 + }, + style: { + default: {}, + parseHTML: element => { + const style = element.getAttribute('style') + return style ? cssParaObj(style) : {} + } + }, + colwidth: { + default: null, + parseHTML: element => { + const colwidth = element.getAttribute('colwidth') + return colwidth ? [parseInt(colwidth, 10)] : null + } + } + } + }, + + tableRole: 'cell', + + isolating: true, + + parseHTML() { + return [{ tag: 'td' }] + }, + + renderHTML({ HTMLAttributes }) { + //console.log(HTMLAttributes) + + HTMLAttributes = { + ...HTMLAttributes, + style: objParaCss(HTMLAttributes.style) + } + return ['td', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0] + }, + addCommands() { + return { + ...this.parent?.(), + setCellAttribute: + (attributes: { [key: string]: any }) => + ({ state, dispatch, tr }) => { + const { nodeAfter, pos } = selectionCell(state) + + const attrs = { + ...nodeAfter?.attrs, + style: { + ...nodeAfter?.attrs.style, + ...attributes + } + } + if (dispatch) { + tr.setNodeMarkup(pos, undefined, attrs) + dispatch(tr) + } + + return true + } + } + } +}) diff --git a/src/extensions/image/imageView.ts b/src/extensions/image/imageView.ts index 931ab30..0555866 100644 --- a/src/extensions/image/imageView.ts +++ b/src/extensions/image/imageView.ts @@ -45,18 +45,18 @@ function clickHandler(imageWrapper: HTMLElement) { function alinhaDireita(imageView: ImageView) { return ({ button }: ButtonEventProps) => { const { editor, node, imageWrapper } = imageView - if (!imageWrapper.classList.contains('ex-direita')) { + if (!imageWrapper.classList.contains('ex-margin-direita')) { button.parentToolbar.tools.forEach(tool => tool instanceof Button && tool.off()) button.on() - imageWrapper.classList.add('ex-direita') - imageWrapper.classList.remove('ex-meio', 'ex-esquerda') + imageWrapper.classList.add('ex-margin-direita') + imageWrapper.classList.remove('ex-margin-meio', 'ex-margin-esquerda') editor.commands.updateAttributes(node.type, { classes: imageWrapper.className }) } else { button.off() - imageWrapper.classList.remove('ex-direita') + imageWrapper.classList.remove('ex-margin-direita') } } } @@ -64,17 +64,17 @@ function alinhaDireita(imageView: ImageView) { function alinhaEsquerda(imageView: ImageView) { return ({ button }: ButtonEventProps) => { const { editor, node, imageWrapper } = imageView - if (!imageWrapper.classList.contains('ex-esquerda')) { + if (!imageWrapper.classList.contains('ex-margin-esquerda')) { button.parentToolbar.tools.forEach(tool => tool instanceof Button && tool.off()) button.on() - imageWrapper.classList.add('ex-esquerda') - imageWrapper.classList.remove('ex-meio', 'ex-direita') + imageWrapper.classList.add('ex-margin-esquerda') + imageWrapper.classList.remove('ex-margin-meio', 'ex-margin-direita') editor.commands.updateAttributes(node.type, { classes: imageWrapper.className }) } else { button.off() - imageWrapper.classList.remove('ex-esquerda') + imageWrapper.classList.remove('ex-margin-esquerda') } } } @@ -82,17 +82,17 @@ function alinhaEsquerda(imageView: ImageView) { function alinhaMeio(imageView: ImageView) { return ({ button }: ButtonEventProps) => { const { editor, node, imageWrapper } = imageView - if (!imageWrapper.classList.contains('ex-meio')) { + if (!imageWrapper.classList.contains('ex-margin-meio')) { button.parentToolbar.tools.forEach(tool => tool instanceof Button && tool.off()) button.on() - imageWrapper.classList.add('ex-meio') - imageWrapper.classList.remove('ex-esquerda', 'ex-direita') + imageWrapper.classList.add('ex-margin-meio') + imageWrapper.classList.remove('ex-margin-esquerda', 'ex-margin-direita') editor.commands.updateAttributes(node.type, { classes: imageWrapper.className }) } else { button.off() - imageWrapper.classList.remove('ex-meio') + imageWrapper.classList.remove('ex-margin-meio') } } } diff --git a/src/extensions/table/TableView.ts b/src/extensions/table/TableView.ts index 709447a..0cf158e 100644 --- a/src/extensions/table/TableView.ts +++ b/src/extensions/table/TableView.ts @@ -16,6 +16,7 @@ import type ExitusEditor from 'src/ExitusEditor' import { Button, Dropdown } from '../../editor/ui' import { Balloon } from '../../editor/ui/Balloon' +import { criaCellModal } from './itensModalCell' import { criaTabelaModal } from './itensModalTable' import { objParaCss } from './table' import TableFocus from './tableFocus' @@ -164,9 +165,7 @@ export class TableView implements NodeView { toolbarButtonConfig: { icon: starredCell + arrowDropDown, label: 'editar celula', - events: { - click: null - } + dropdown: criaCellModal() } } } diff --git a/src/extensions/table/itensModalCell.ts b/src/extensions/table/itensModalCell.ts new file mode 100644 index 0000000..8315e3b --- /dev/null +++ b/src/extensions/table/itensModalCell.ts @@ -0,0 +1,275 @@ +/* eslint-disable no-console */ +import { Button, Dropdown } from '@editor/ui' +import textDl from '@icons/image-left.svg' +import textDm from '@icons/image-middle.svg' +import textDr from '@icons/image-right.svg' +import type ExitusEditor from 'src/ExitusEditor' + +let dropdownsAbertos: Dropdown[] = [] + +function fecharDropdownsAbertos() { + dropdownsAbertos.forEach(dropdown => { + dropdown.off() + }) + dropdownsAbertos = [] +} + +function showDropdown({ event, dropdown }: any) { + event.stopPropagation() + if (dropdown.isOpen) { + dropdown.off() + dropdownsAbertos = dropdownsAbertos.filter(d => d !== dropdown) + } else { + fecharDropdownsAbertos() + dropdown.on() + dropdownsAbertos.push(dropdown) + } +} + +export function criaCellModal() { + return ({ editor }: any) => { + const dropdown = new Dropdown(editor, { + events: { + open: showDropdown + }, + classes: ['ex-dropdown-balloonModal'] + }) + + dropdown.setDropDownContent(itensModalCell(editor)) + return dropdown + } +} + +function createButton(editor: ExitusEditor, icone: string, onClick: () => void) { + const button = new Button(editor, { + icon: icone + }) + button.bind('click', onClick) + return button.render() +} + +function createInput(type: string, placeholder: string) { + const input = document.createElement('input') + input.type = type + input.contentEditable = 'true' + input.placeholder = placeholder + + return input +} + +function itensModalCell(editor: ExitusEditor) { + const dropdownContent = document.createElement('div') + dropdownContent.className = '.ex-dropdownList-content' + + const propriedadesLabel = document.createElement('label') + propriedadesLabel.textContent = 'Propriedades da Célula' + dropdownContent.appendChild(propriedadesLabel) + + const hr = document.createElement('hr') + dropdownContent.appendChild(hr) + + //bloco 1 + const selectInput = document.createElement('select') + selectInput.style.width = '80px' + + const cellStyles: { [key: string]: string } = { + 'sem borda': 'none', + sólida: 'solid', + pontilhada: 'dotted', + tracejada: 'dashed', + dupla: 'double', + ranhura: 'ridge', + crista: 'groove', + 'baixo relevo': 'inset', + 'alto relevo': 'outset' + } + + Object.entries(cellStyles).forEach(([name, value]) => { + const option = document.createElement('option') + option.value = value + option.textContent = name + selectInput.appendChild(option) + }) + + const inputBackgroundColor1 = createInput('color', 'Cor de Fundo') + inputBackgroundColor1.className = 'colorInput' + + const larguraBloco1 = createInput('text', 'Largura') + larguraBloco1.className = 'largura1' + + const bloco1 = document.createElement('div') + bloco1.className = 'bloco1' + + const bordaLabel = document.createElement('strong') + bordaLabel.className = 'labels' + bordaLabel.textContent = 'Borda' + + bloco1.append(bordaLabel, selectInput, inputBackgroundColor1, larguraBloco1) + + dropdownContent.appendChild(bloco1) + + function aplicarEstiloBorda() { + const selectedValue = selectInput.value + const cor = inputBackgroundColor1.value + const largura = larguraBloco1.value + + if (selectedValue && cor && largura) { + editor.commands.setCellAttribute({ + border: `${largura}px ${selectedValue} ${cor}` + }) + } + } + larguraBloco1.addEventListener('change', aplicarEstiloBorda) + larguraBloco1.value = '' + + //bloco2 + const corFundoLabel = document.createElement('strong') + corFundoLabel.textContent = 'Cor de Fundo' + corFundoLabel.className = 'labels' + dropdownContent.appendChild(corFundoLabel) + + const inputBackgroundColor2 = createInput('color', 'Cor de Fundo') + inputBackgroundColor2.className = 'colorInput2' + dropdownContent.appendChild(inputBackgroundColor2) + + const bloco2 = document.createElement('div') + bloco2.className = 'bloco2' + + bloco2.appendChild(corFundoLabel) + bloco2.appendChild(inputBackgroundColor2) + dropdownContent.appendChild(bloco2) + + function aplicarEstiloCelulas() { + const cor2 = inputBackgroundColor2.value + + if (cor2) { + editor.commands.setCellAttribute({ + background: cor2 + }) + } + } + + inputBackgroundColor2.addEventListener('change', aplicarEstiloCelulas) + + //bloco3 + const dimensoesLabel = document.createElement('strong') + dimensoesLabel.textContent = 'Dimensões' + + dimensoesLabel.className = 'labels' + dropdownContent.appendChild(dimensoesLabel) + + const inputAltura = createInput('text', 'Altura') + inputAltura.className = 'inputDimensoes' + dropdownContent.appendChild(inputAltura) + + const vezesSpan = document.createElement('span') + vezesSpan.textContent = '×' + dropdownContent.appendChild(vezesSpan) + + const inputLargura = createInput('text', 'Largura') + inputLargura.className = 'inputDimensoes' + dropdownContent.appendChild(inputLargura) + + const bloco6 = document.createElement('div') + bloco6.className = 'bloco6' + bloco6.append(inputAltura, vezesSpan, inputLargura) + + const bloco3 = document.createElement('div') + bloco3.className = 'bloco3' + + bloco3.appendChild(dimensoesLabel) + bloco3.appendChild(bloco6) + + dropdownContent.appendChild(bloco3) + + function aplicarDimencoesTabela() { + const altura = inputAltura.value + const largura = inputLargura.value + if (altura && largura) { + ;(editor.commands as any).setCellAttribute({ + height: `${altura}px`, + width: `${largura}px` + }) + } + } + inputLargura.addEventListener('change', aplicarDimencoesTabela) + + //bloco 4 + const alinhamentoLabel = document.createElement('strong') + alinhamentoLabel.textContent = 'Alinhamento' + alinhamentoLabel.className = 'labels' + dropdownContent.appendChild(alinhamentoLabel) + + const bloco8 = document.createElement('div') + bloco8.className = 'bloco8' + + const TableEsquerda = createButton(editor, textDl, () => { + ;(editor.commands as any).setCellAttribute({ + 'vertical-align': 'top' + }) + }) + + const TableMeio = createButton(editor, textDm, () => { + console.log('TableMeio clicado') + ;(editor.commands as any).setCellAttribute({ + 'vertical-align': 'middle' + }) + }) + + const TableDireito = createButton(editor, textDr, () => { + ;(editor.commands as any).setCellAttribute({ + 'vertical-align': 'bottom' + }) + }) + + bloco8.append(TableEsquerda, TableMeio, TableDireito) + + const bloco4 = document.createElement('div') + bloco4.className = 'bloco4' + bloco4.appendChild(alinhamentoLabel) + bloco4.appendChild(bloco8) + dropdownContent.appendChild(bloco4) + + //bloco 5 + const bloco5 = document.createElement('div') + bloco5.className = 'bloco5' + bloco5.appendChild(bloco3) + bloco5.appendChild(bloco4) + dropdownContent.appendChild(bloco5) + + //bloco7 + const botaoConfirma = createButton(editor, 'Salvar', () => { + // o que acontece quando clicar no botão + fecharDropdownsAbertos() + }) + botaoConfirma.className = 'botaoSalvar' + const iconeConfirma = document.createElement('span') + iconeConfirma.className = 'icone-confirmacao' + botaoConfirma.appendChild(iconeConfirma) + dropdownContent.appendChild(botaoConfirma) + + const botaoCancela = createButton(editor, 'Cancelar', () => { + ;(editor.commands as any).setCellAttribute({ + Direita: 'auto', + Esquerda: 'auto' + }) + ;(editor.commands as any).setCellAttribute({ + height: ``, + width: ``, + background: ``, + border: `` + }) + }) + botaoCancela.className = 'botaoCancela' + const iconeCancela = document.createElement('span') + iconeCancela.className = 'icone-cancelamento' + botaoCancela.appendChild(iconeCancela) + dropdownContent.appendChild(botaoCancela) + + const bloco7 = document.createElement('div') + bloco7.className = 'bloco7' + bloco7.append(botaoConfirma, botaoCancela) + dropdownContent.appendChild(bloco7) + + return dropdownContent +} diff --git a/src/extensions/table/itensModalTable.ts b/src/extensions/table/itensModalTable.ts index 45d80c4..e980183 100644 --- a/src/extensions/table/itensModalTable.ts +++ b/src/extensions/table/itensModalTable.ts @@ -72,7 +72,7 @@ function itensModalTable(editor: ExitusEditor) { const selectInput = document.createElement('select') selectInput.style.width = '80px' - const borderStyles: { [key: string]: string } = { + const borderStyles = { 'sem borda': 'none', sólida: 'solid', pontilhada: 'dotted', @@ -93,9 +93,11 @@ function itensModalTable(editor: ExitusEditor) { const inputBackgroundColor1 = createInput('color', 'Cor de Fundo') inputBackgroundColor1.className = 'colorInput' + inputBackgroundColor1.disabled = true const larguraBloco1 = createInput('text', 'Largura') larguraBloco1.className = 'largura1' + larguraBloco1.disabled = true const bloco1 = document.createElement('div') bloco1.className = 'bloco1' @@ -105,9 +107,20 @@ function itensModalTable(editor: ExitusEditor) { bordaLabel.textContent = 'Borda' bloco1.append(bordaLabel, selectInput, inputBackgroundColor1, larguraBloco1) - dropdownContent.appendChild(bloco1) + selectInput.addEventListener('change', () => { + if (selectInput.value) { + inputBackgroundColor1.disabled = false + } + }) + + inputBackgroundColor1.addEventListener('change', () => { + if (inputBackgroundColor1.value) { + larguraBloco1.disabled = false + } + }) + function aplicarEstiloBorda() { const selectedValue = selectInput.value const cor = inputBackgroundColor1.value @@ -121,6 +134,8 @@ function itensModalTable(editor: ExitusEditor) { } larguraBloco1.addEventListener('change', aplicarEstiloBorda) + selectInput.addEventListener('change', aplicarEstiloBorda) + inputBackgroundColor1.addEventListener('change', aplicarEstiloBorda) larguraBloco1.value = '' //bloco2 @@ -195,6 +210,8 @@ function itensModalTable(editor: ExitusEditor) { } inputLargura.addEventListener('change', aplicarDimencoesTabela) + inputAltura.addEventListener('change', aplicarDimencoesTabela) + //bloco 4 const alinhamentoLabel = document.createElement('strong') alinhamentoLabel.textContent = 'Alinhamento' diff --git a/src/extensions/table/table.ts b/src/extensions/table/table.ts index c9a4db0..89acc6f 100644 --- a/src/extensions/table/table.ts +++ b/src/extensions/table/table.ts @@ -6,6 +6,8 @@ import { createColGroup, Table } from '@tiptap/extension-table' // eslint-disable-next-line @typescript-eslint/no-unused-vars import { selectedRect } from '@tiptap/pm/tables' // eslint-disable-next-line @typescript-eslint/no-unused-vars +import { setCellAttr } from '@tiptap/pm/tables' +// eslint-disable-next-line @typescript-eslint/no-unused-vars import { findParentNodeOfType, findSelectedNodeOfType } from 'prosemirror-utils' import { Dropdown } from '../../editor/ui' @@ -254,7 +256,15 @@ export const TableCustom = Table.extend({ return true } - } + } /* , + setCellAttribute: + (attributes: { [key: string]: any }) => + ({ state, dispatch }) => { + Object.entries(attributes).forEach(([name, value]) => { + setCellAttr(name, value)(state, dispatch) + }) + return true + } */ } }, addOptions() { diff --git a/src/extensions/table/tableFocus.ts b/src/extensions/table/tableFocus.ts index 8414f44..6545476 100644 --- a/src/extensions/table/tableFocus.ts +++ b/src/extensions/table/tableFocus.ts @@ -19,13 +19,13 @@ export default class TableFocus { const element = this.tableView.tableWrapper element.style.position = 'relative' - const botaoCima = createButton(editor, setaCima, () => { + const botaoCima = this.createButton(editor, setaCima, () => { this.moveAlvoParaCima() }) this.FocarCima = element.appendChild(botaoCima) this.FocarCima.classList.add('bolinha', 'bolinha-cima') - const botaoBaixo = createButton(editor, setaBaixo, () => { + const botaoBaixo = this.createButton(editor, setaBaixo, () => { this.moveAlvoParaBaixo() }) this.FocarBaixo = element.appendChild(botaoBaixo) @@ -41,13 +41,13 @@ export default class TableFocus { const paragrafo = '

' 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() + private createButton(editor: ExitusEditor, icone: string, onClick: () => void): HTMLElement { + const button = new Button(editor, { + icon: icone, + classList: ['bolinha'] + }) + button.bind('click', onClick) + return button.render() + } } diff --git a/src/main.ts b/src/main.ts index 984d282..94a78ae 100644 --- a/src/main.ts +++ b/src/main.ts @@ -8,8 +8,11 @@ import { HardBreak } from '@tiptap/extension-hard-break' import { Heading } from '@tiptap/extension-heading' import { HorizontalRule } from '@tiptap/extension-horizontal-rule' import { OrderedList } from '@tiptap/extension-ordered-list' +// eslint-disable-next-line import-helpers/order-imports import { Paragraph } from '@tiptap/extension-paragraph' -import TableCell from '@tiptap/extension-table-cell' + +//import TableCell from '@tiptap/extension-table-cell' + import TableHeader from '@tiptap/extension-table-header' import TableRow from '@tiptap/extension-table-row' import { Text } from '@tiptap/extension-text' @@ -17,6 +20,7 @@ import { Text } from '@tiptap/extension-text' import ExitusEditor from './ExitusEditor' import { Blockquote } from './extensions/blockquote/blockquote' import { Bold } from './extensions/bold' +import TableCell from './extensions/extension-table-cell/src' import { History } from './extensions/history/history' import { Image } from './extensions/image/image' import { Indent } from './extensions/indent/indent' diff --git a/tsconfig.json b/tsconfig.json index 132f013..72a5e88 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,7 +21,8 @@ "baseUrl": ".", "paths": { "@icons/*": ["src/assets/icons/Editor/*"], - "@editor/*": ["src/editor/*"] + "@editor/*": ["src/editor/*"], + "@extensions/*": ["src/extensions/*"] }, }, "include": ["src", "declaration.d.ts"], diff --git a/vite.config.js b/vite.config.js index 30c47d3..2ad3281 100644 --- a/vite.config.js +++ b/vite.config.js @@ -11,7 +11,8 @@ export default defineConfig({ extensions: ['.ts', '.svg'], alias: [ { find: '@icons', replacement: fileURLToPath(new URL('./src/assets/icons/Editor', import.meta.url)) }, - { find: '@editor', replacement: fileURLToPath(new URL('./src/editor', import.meta.url)) } + { find: '@editor', replacement: fileURLToPath(new URL('./src/editor', import.meta.url)) }, + { find: '@extensions', replacement: fileURLToPath(new URL('./src/extensions', import.meta.url)) } ] }, build: {