wip: buttons tooltips

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)
+            }
           }
         })
       }

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)

src/editor/ui/Button.ts

@@ -52,7 +52,6 @@ export class Button implements Tool {
     const button = createHTMLElement<HTMLButtonElement>('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
     })
 

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')
+  }
+}

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'
       }
     }
   }

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)'
       }
     }
   }

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))'
         }
       ]
     }

src/extensions/image/image.ts

@@ -109,7 +109,8 @@ export const Image = Node.create<ImageOptions>({
       toolbarButtonConfig: {
         icon: imageAdd,
         click: addImage,
-        checkActive: this.name
+        checkActive: this.name,
+        tooltip: 'Carregar imagem'
       }
     }
   },

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'
         }
       ]
     }

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)'
       }
     }
   }

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'
       }
     }
   },

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)
+    }
+  }
 }

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()
     }

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'
       }
     }
   }

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'
         }
       ]
     }

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)'
       }
     }
   }

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 + ,)'
       }
     }
   }

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 + .)'
       }
     }
   }

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'

src/extensions/table/table.ts

@@ -149,7 +149,8 @@ export const TableCustom = Table.extend({
       toolbarButtonConfig: [
         {
           icon: table + arrowDropDown,
-          dropdown: tableDropDown
+          dropdown: tableDropDown,
+          tooltip: 'Tabela'
         }
       ]
     }

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'
       }
     }
   }

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)'
       }
     }
   }