From c9a7d2d76df381eb0bdd4f29dbcdf8dcb23f0bdc Mon Sep 17 00:00:00 2001 From: "marcelino.braga" Date: Tue, 11 Jun 2024 14:30:04 -0300 Subject: [PATCH] =?UTF-8?q?refact:=20melhorias=20de=20c=C3=B3digo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.json | 2 +- src/extensions/image/image.ts | 2 +- src/extensions/table/TableCellBalloon.ts | 39 +++++++++++++++++++++--- src/public/style.css | 18 +++++++++++ 4 files changed, 54 insertions(+), 7 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index e541f0a..9f23b01 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -26,7 +26,7 @@ "semi": false } ], - "no-console": "warn", + "no-console": "off", "camelcase": "warn", "@typescript-eslint/interface-name-prefix": "off", "@typescript-eslint/explicit-function-return-type": "off", diff --git a/src/extensions/image/image.ts b/src/extensions/image/image.ts index 5abb8e8..f7754f1 100644 --- a/src/extensions/image/image.ts +++ b/src/extensions/image/image.ts @@ -237,7 +237,7 @@ export const Image = Node.create({ key: new PluginKey('eventHandler'), props: { handleDOMEvents: { - drop: (view, event) => { + drop: (_view, event) => { const hasFiles = event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length if (hasFiles) { diff --git a/src/extensions/table/TableCellBalloon.ts b/src/extensions/table/TableCellBalloon.ts index 2e09f5e..10c87f7 100644 --- a/src/extensions/table/TableCellBalloon.ts +++ b/src/extensions/table/TableCellBalloon.ts @@ -16,7 +16,7 @@ export class TableCellBalloon { this.balloon = new Balloon(editor, { position: 'float' }) - this.itenModal = new ItensModalCell(editor) + this.itenModal = new ItensModalCell(editor, this) this.balloon.setPanelContent(this.itenModal.render()) editor.view.dom!.parentElement!.appendChild(this.balloon.getBalloon()) } @@ -61,17 +61,18 @@ export class ItensModalCell { private cellHeight: HTMLInputElement private cellWidth: HTMLInputElement selectedCell!: ResolvedPos + balloon: TableCellBalloon - constructor(editor: Editor) { + constructor(editor: Editor, balloon: TableCellBalloon) { this.editor = editor this.cellBorderStyles = document.createElement('select') this.cellBorderStyles.style.width = '80px' this.cellBorderStyles.className = 'ex-selectInput' - + this.balloon = balloon const borderStyles = { 'sem borda': 'none', // eslint-disable-next-line prettier/prettier - sólida: 'solid', + 'sólida': 'solid', pontilhada: 'dotted', tracejada: 'dashed', dupla: 'double', @@ -81,9 +82,12 @@ export class ItensModalCell { 'alto relevo': 'outset' } - Object.entries(borderStyles).forEach(([name, value]) => { + Object.entries(borderStyles).forEach(([name, value], index) => { const option = document.createElement('option') option.value = value + if (index === 0) { + option.setAttribute('selected', 'selected') + } option.textContent = name this.cellBorderStyles.appendChild(option) }) @@ -123,15 +127,35 @@ export class ItensModalCell { updateBorderValue(attr: Attrs) { if (attr?.border) { const [width, style, color] = attr.border.split(' ') + this.cellBorderStyles.querySelectorAll('option').forEach(option => { + if (option.value == style) { + option.setAttribute('selected', 'selected') + } else { + option.removeAttribute('selected') + } + }) this.cellBorderWidth.value = width this.cellBorderStyles.value = style this.cellBorderColor.value = color + } else { + this.cellBorderStyles.querySelectorAll('option').forEach(option => { + if (option.value == 'none') { + option.setAttribute('selected', 'selected') + } else { + option.removeAttribute('selected') + } + }) + this.cellBorderWidth.value = '' + this.cellBorderStyles.value = 'none' + this.cellBorderColor.value = '' } } updateBackGroundValue(attr: Attrs) { if (attr?.background) { this.cellBackgroundColor.value = attr.background + } else { + this.cellBackgroundColor.value = '' } } @@ -140,6 +164,9 @@ export class ItensModalCell { const style = attr.style this.cellHeight.value = style?.height?.replace('px', '') this.cellWidth.value = style?.width?.replace('px', '') + } else { + this.cellHeight.value = '' + this.cellWidth.value = '' } } @@ -282,6 +309,7 @@ export class ItensModalCell { const botaoConfirma = createButton(this.editor, 'Salvar', () => { this.aplicarEstiloBorda() this.aplicarDimensoesTabela() + this.balloon.off() }) botaoConfirma.className = 'ex-botaoSalvar' botaoConfirma.appendChild(iconConfirma) @@ -294,6 +322,7 @@ export class ItensModalCell { background: '', border: '' }) + this.balloon.off() }) botaoCancela.className = 'ex-botaoCancela' botaoCancela.appendChild(iconCancela) diff --git a/src/public/style.css b/src/public/style.css index 80d5a9c..404df5f 100644 --- a/src/public/style.css +++ b/src/public/style.css @@ -9,6 +9,14 @@ --color-cancel: #db3700; --color-base-text: #333; --color-focused-background: rgba(158,201,250,.3); + --ex-font-size-base: 13px; + --ex-line-height-base: 1.84615; + --ex-font-face: Helvetica,Arial,Tahoma,Verdana,Sans-Serif; + --ex-font-size-tiny: 0.7em; + --ex-font-size-small: 0.75em; + --ex-font-size-normal: 1em; + --ex-font-size-big: 1.4em; + --ex-font-size-large: 1.8em; } .ProseMirror { @@ -34,6 +42,16 @@ border: 1px hsl(0, 0%, 82.7%) solid; } +.ex-reset-all { + border-collapse: collapse; + color: var(--color-base-text); + cursor: auto; + float: none; + font: normal normal normal var(--ex-font-size-base)/var(--ex-line-height-base) var(--ex-font-face); + text-align: left; + white-space: nowrap; +} + .tiptap { font-family: sans-serif, Arial, Verdana, "Trebuchet MS"; color: #333 !important;