diff --git a/src/editor/toolbar/Toolbar.ts b/src/editor/toolbar/Toolbar.ts index 84b0386..b03566f 100644 --- a/src/editor/toolbar/Toolbar.ts +++ b/src/editor/toolbar/Toolbar.ts @@ -1,4 +1,5 @@ import { Button, type ButtonConfig } from '@editor/ui' +import { Tooltip } from '@editor/ui/Tooltip' import type ExitusEditor from '@src/ExitusEditor' import { type Tool } from './Tool' @@ -63,12 +64,18 @@ export class Toolbar { dropdown.setButton(button) this.tools.push(dropdown) this.toolbarItemsDiv?.append(dropdown.render()) + if (config.tooltip !== undefined) { + new Tooltip(button.button, config.tooltip) + } } else { const button = new Button(this.editor, config) button.setParentToolbar(this) this.tools.push(button) button.bind('click', config.click) this.toolbarItemsDiv?.append(button.render()) + if (config.tooltip !== undefined) { + new Tooltip(button.button, config.tooltip) + } } }) } diff --git a/src/editor/ui/Balloon.ts b/src/editor/ui/Balloon.ts index 8c7ae45..feced34 100644 --- a/src/editor/ui/Balloon.ts +++ b/src/editor/ui/Balloon.ts @@ -84,7 +84,7 @@ export class Balloon { requestAnimationFrame(() => { this.ballonMenu.classList.add(`balloon-menu-${this.options.position}-center`) - this.fixBalloonOverFlows(x) + this.fixBalloonOverflows(x) }) } @@ -102,11 +102,11 @@ export class Balloon { return } - this.fixBalloonOverFlows(spanRect.x) + this.fixBalloonOverflows(spanRect.x) }) } - fixBalloonOverFlows(balloonX: number) { + fixBalloonOverflows(balloonX: number) { const { width } = this.ballonMenu.getBoundingClientRect() const { left, right } = this.editor.view.dom.getBoundingClientRect() const isOverflowLeft = overFlowLeft(balloonX, left, width) diff --git a/src/editor/ui/Button.ts b/src/editor/ui/Button.ts index 51656d2..7cf8438 100644 --- a/src/editor/ui/Button.ts +++ b/src/editor/ui/Button.ts @@ -52,7 +52,6 @@ export class Button implements Tool { const button = createHTMLElement('button', { class: ['ex-toolbar-button', ...(this.config.classList as string[])].join(' '), id: `${Math.floor(Math.random() * 100) + 1}`, - title: this.config.title as string, ...this.config.attributes }) diff --git a/src/editor/ui/Tooltip.ts b/src/editor/ui/Tooltip.ts new file mode 100644 index 0000000..311d149 --- /dev/null +++ b/src/editor/ui/Tooltip.ts @@ -0,0 +1,27 @@ +export class Tooltip { + tooltipBalloon: HTMLElement + constructor(parent: HTMLElement, text: string) { + this.tooltipBalloon = document.createElement('div') + this.tooltipBalloon.className = 'ex-tooltip-balloon ex-reset-all ex-hidden' + const tooltipText = document.createElement('span') + tooltipText.className = 'ex-tooltip-text' + tooltipText.innerHTML = text + this.tooltipBalloon.appendChild(tooltipText) + parent.appendChild(this.tooltipBalloon) + parent.addEventListener('mouseenter', () => { + const cancel = setTimeout(() => this.show(), 500) + parent.addEventListener('mouseleave', () => { + clearTimeout(cancel) + this.hide() + }) + }) + } + + show() { + this.tooltipBalloon.classList.remove('ex-hidden') + } + + hide() { + this.tooltipBalloon.classList.add('ex-hidden') + } +} diff --git a/src/extensions/blockquote/blockquote.ts b/src/extensions/blockquote/blockquote.ts index 6368253..b36d127 100644 --- a/src/extensions/blockquote/blockquote.ts +++ b/src/extensions/blockquote/blockquote.ts @@ -17,7 +17,8 @@ export const Blockquote = BlockquoteBase.extend({ toolbarButtonConfig: { icon: quote, click: toggleBlockQuote, - checkActive: this.name + checkActive: this.name, + tooltip: 'Bloco de citação' } } } diff --git a/src/extensions/bold/bold.ts b/src/extensions/bold/bold.ts index 06bbe78..2fade18 100644 --- a/src/extensions/bold/bold.ts +++ b/src/extensions/bold/bold.ts @@ -17,7 +17,8 @@ export const Bold = BoldBase.extend({ toolbarButtonConfig: { icon: bold, click: toggleBold, - checkActive: this.name + checkActive: this.name, + tooltip: 'Negrito (Ctrl + B)' } } } diff --git a/src/extensions/history/history.ts b/src/extensions/history/history.ts index ba4226a..5f79fbe 100644 --- a/src/extensions/history/history.ts +++ b/src/extensions/history/history.ts @@ -28,12 +28,14 @@ export const History = HistoryBase.extend({ { icon: quote, click: goBack, - checkActive: this.name + checkActive: this.name, + tooltip: 'Desfazer (Ctrl + Z))' }, { icon: quote2, click: goFoward, - checkActive: this.name + checkActive: this.name, + tooltip: 'Refazer (Ctrl + Y))' } ] } diff --git a/src/extensions/image/image.ts b/src/extensions/image/image.ts index 690eb7a..0d59b1e 100644 --- a/src/extensions/image/image.ts +++ b/src/extensions/image/image.ts @@ -109,7 +109,8 @@ export const Image = Node.create({ toolbarButtonConfig: { icon: imageAdd, click: addImage, - checkActive: this.name + checkActive: this.name, + tooltip: 'Carregar imagem' } } }, diff --git a/src/extensions/indent/indent.ts b/src/extensions/indent/indent.ts index 51ede7e..889188c 100644 --- a/src/extensions/indent/indent.ts +++ b/src/extensions/indent/indent.ts @@ -108,12 +108,14 @@ export const Indent = Extension.create({ { icon: tiraEspaço, click: delTab, - checkActive: this.name + checkActive: this.name, + tooltip: 'Diminuir recuo)' }, { icon: botaEspaco, click: setTab, - checkActive: this.name + checkActive: this.name, + tooltip: 'Aumentar recuo' } ] } diff --git a/src/extensions/italic/Italic.ts b/src/extensions/italic/Italic.ts index 2fabd7c..17fab25 100644 --- a/src/extensions/italic/Italic.ts +++ b/src/extensions/italic/Italic.ts @@ -13,7 +13,8 @@ export const Italic = ItalicBase.extend({ toolbarButtonConfig: { icon: italic, click: toggleItalic, - checkActive: this.name + checkActive: this.name, + tooltip: 'Itálico (Ctrl + i)' } } } diff --git a/src/extensions/katex/katex.ts b/src/extensions/katex/katex.ts index 43234aa..317e261 100644 --- a/src/extensions/katex/katex.ts +++ b/src/extensions/katex/katex.ts @@ -89,7 +89,8 @@ export const Katex = Node.create({ toolbarButtonConfig: { icon: formula, click: click, - checkActive: this.name + checkActive: this.name, + tooltip: 'Fórmulas Latex' } } }, diff --git a/src/extensions/katex/katexBalloon.ts b/src/extensions/katex/katexBalloon.ts index 00085f6..c1e779e 100644 --- a/src/extensions/katex/katexBalloon.ts +++ b/src/extensions/katex/katexBalloon.ts @@ -1,5 +1,5 @@ import { Balloon, type BalloonOptions, Button } from '@editor/ui' -import { createHTMLElement } from '@editor/utils' +import { createHTMLElement, getNodeBoundingClientRect } from '@editor/utils' import check from '@icons/check-line.svg' import close from '@icons/close-line.svg' import type ExitusEditor from '@src/ExitusEditor' @@ -86,4 +86,16 @@ export class KatexBalloon { hide() { this.balloon.hide() } + + updatePosition(pos: number) { + try { + //const resPos = selectionCell(this.editor.view.state) + const { top, height, left, width } = getNodeBoundingClientRect(this.editor, pos) + const main = this.editor.view.dom.getBoundingClientRect() + this.balloon.setPosition(left - main.left + width / 2, top - main.y + height) + //this.balloon.show() + } catch (error) { + console.error(error) + } + } } diff --git a/src/extensions/katex/katexView.ts b/src/extensions/katex/katexView.ts index fe28481..9700a81 100644 --- a/src/extensions/katex/katexView.ts +++ b/src/extensions/katex/katexView.ts @@ -67,7 +67,7 @@ export class KatexView implements NodeView { }, confirmBalloon.bind(this), cancelBalloon.bind(this), - 'bottom' + 'float' ) this.renderedLatex = document.createElement('span') @@ -87,8 +87,9 @@ export class KatexView implements NodeView { }) const balloon = this.balloon.getBalloon() + this.editor.view.dom!.parentElement!.appendChild(balloon) - this.dom.append(balloon, this.renderedLatex) + this.dom.append(this.renderedLatex) if (this.isEditing()) { this.selected() @@ -121,14 +122,16 @@ export class KatexView implements NodeView { this.editing = true this.balloon.input.setSelectionRange(0, 0) this.balloon.input.focus() - window.addEventListener('click', this.bindDeselected) - this.balloon.show() + if (typeof this.getPos === 'function') { + this.balloon.updatePosition(this.getPos()) + window.addEventListener('click', this.bindDeselected) + } } deselected(event: Event) { const target = event.target as HTMLElement - if (target.closest('.math-tex') === null) { + if (target.closest('.balloon-menu') === null && target.closest('.math-tex') === null) { this.cancelEditting() } } @@ -187,10 +190,6 @@ export class KatexView implements NodeView { } stopEvent(event: Event) { - if (event.target != undefined && (event.target as HTMLElement).classList.contains('latex-confirm')) { - return false - } - if (event.type === 'dragstart' && this.isEditing()) { event.preventDefault() } diff --git a/src/extensions/listitem/listItem.ts b/src/extensions/listitem/listItem.ts index 442e390..8ec307f 100644 --- a/src/extensions/listitem/listItem.ts +++ b/src/extensions/listitem/listItem.ts @@ -73,7 +73,8 @@ export const ListItem = ListitemBase.extend({ return { toolbarButtonConfig: { icon: listIcon + arrowDropDown, - dropdown: listItemDropDown + dropdown: listItemDropDown, + tooltip: 'Listas' } } } diff --git a/src/extensions/mathtype/mathtype.ts b/src/extensions/mathtype/mathtype.ts index 2a10ec5..74cc5b5 100644 --- a/src/extensions/mathtype/mathtype.ts +++ b/src/extensions/mathtype/mathtype.ts @@ -106,13 +106,15 @@ export const MathType = Node.create({ icon: mathIcon, click: ({ editor }: ButtonEventProps) => { editor.commands.openMathEditor() - } + }, + tooltip: 'Fórmulas Matemáticas - MathType' }, { icon: chemIcon, click: ({ editor }: ButtonEventProps) => { editor.commands.openChemEditor() - } + }, + tooltip: 'Fórmulas Quimicas - ChemType' } ] } diff --git a/src/extensions/strike/strike.ts b/src/extensions/strike/strike.ts index d40d081..50dbe11 100644 --- a/src/extensions/strike/strike.ts +++ b/src/extensions/strike/strike.ts @@ -13,7 +13,8 @@ export const Strike = StrikeBase.extend({ toolbarButtonConfig: { icon: strike, click: toggleStrike, - checkActive: this.name + checkActive: this.name, + tooltip: 'Taxado (Ctrl + Shift + S)' } } } diff --git a/src/extensions/subscript/subscript.ts b/src/extensions/subscript/subscript.ts index 59df891..8ded05b 100644 --- a/src/extensions/subscript/subscript.ts +++ b/src/extensions/subscript/subscript.ts @@ -13,7 +13,8 @@ export const Subscript = SubscriptBase.extend({ toolbarButtonConfig: { icon: subscript, click: togglesubscript, - checkActive: this.name + checkActive: this.name, + tooltip: 'Subscrito (Ctrl + ,)' } } } diff --git a/src/extensions/superscript/superscript.ts b/src/extensions/superscript/superscript.ts index 93d4494..84e04c0 100644 --- a/src/extensions/superscript/superscript.ts +++ b/src/extensions/superscript/superscript.ts @@ -12,7 +12,8 @@ export const Superscript = SuperscriptBase.extend({ toolbarButtonConfig: { icon: superscript, click: togglesuperscript, - checkActive: this.name + checkActive: this.name, + tooltip: 'Sobrescrito (Ctrl + .)' } } } diff --git a/src/extensions/table/TableCellBalloon.ts b/src/extensions/table/TableCellBalloon.ts index eeed448..465d65b 100644 --- a/src/extensions/table/TableCellBalloon.ts +++ b/src/extensions/table/TableCellBalloon.ts @@ -80,7 +80,6 @@ export class TableCellBalloon { const main = this.editor.view.dom.getBoundingClientRect() this.updateSyleDefaults(resPos) this.balloon.setPosition(left - main.left + width / 2, top - main.y + height) - this.balloon.show() } catch (error) { console.error(error) } @@ -221,8 +220,9 @@ export class ItensModalCell { public render() { const dropdownContent = document.createElement('div') - dropdownContent.className = 'ex-dropdownList-content' dropdownContent.contentEditable = 'false' + dropdownContent.className = 'ex-p-lg' + dropdownContent.style.width = '320px' const propriedadesLabel = document.createElement('strong') propriedadesLabel.textContent = 'Propriedades da Celula' diff --git a/src/extensions/table/table.ts b/src/extensions/table/table.ts index 7ddb246..6bec914 100644 --- a/src/extensions/table/table.ts +++ b/src/extensions/table/table.ts @@ -149,7 +149,8 @@ export const TableCustom = Table.extend({ toolbarButtonConfig: [ { icon: table + arrowDropDown, - dropdown: tableDropDown + dropdown: tableDropDown, + tooltip: 'Tabela' } ] } diff --git a/src/extensions/textAlign/textAlign.ts b/src/extensions/textAlign/textAlign.ts index dc89f2c..7d6c0b5 100644 --- a/src/extensions/textAlign/textAlign.ts +++ b/src/extensions/textAlign/textAlign.ts @@ -63,7 +63,8 @@ export const TextAlign = TextAlignBase.extend({ return { toolbarButtonConfig: { icon: alignLeftIcon + arrowDropDown, - dropdown: textAlignDropDown + dropdown: textAlignDropDown, + tooltip: 'Alinhamento de texto' } } } diff --git a/src/extensions/underline/underline.ts b/src/extensions/underline/underline.ts index 2536463..acbee98 100644 --- a/src/extensions/underline/underline.ts +++ b/src/extensions/underline/underline.ts @@ -17,7 +17,8 @@ export const Underline = UnderlineBase.extend({ toolbarButtonConfig: { icon: underline, click: toggleUnderline, - checkActive: this.name + checkActive: this.name, + tooltip: 'Sublinhado (Ctrl + U)' } } } diff --git a/src/public/index.html b/src/public/index.html index 8bad604..3f85754 100644 --- a/src/public/index.html +++ b/src/public/index.html @@ -52,7 +52,7 @@