Merge pull request #11 from marcelinombb/dev

Dev

.github/workflows/deploy.yml

@@ -8,6 +8,9 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
+env:
+  PUBLIC_PATH: auto
+
 # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
 permissions:
   contents: read
@@ -35,7 +38,7 @@ jobs:
       run: npm install
 
     - name: Build the project
-      run: npm run pages_build
+      run: npm run build
 
     - name: Setup Pages
       uses: actions/configure-pages@v4

package.json

@@ -7,7 +7,6 @@
   ],
   "main": "./dist/exituseditor.js",
   "scripts": {
-    "pages_build": "webpack --mode pages",
     "build": "webpack --mode production",
     "dev": "npx webpack-dev-server --mode development",
     "lint": "eslint . --ext .ts",
@@ -33,7 +32,6 @@
     "@tiptap/extension-strike": "^2.4.0",
     "@tiptap/extension-subscript": "^2.4.0",
     "@tiptap/extension-superscript": "^2.4.0",
-    "@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",
@@ -60,15 +58,15 @@
     "raw-loader": "^4.0.2",
     "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.4.5",
-    "webpack": "^5.92.0",
+    "typescript": "^5.5.2",
+    "webpack": "^5.92.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {
     "@simonwep/pickr": "^1.9.1",
     "@tiptap/pm": "^2.4.0",
-    "@wiris/mathtype-html-integration-devkit": "^1.17.2",
+    "@wiris/mathtype-html-integration-devkit": "^1.17.3",
     "katex": "^0.16.10"
   }
 }

src/editor/toolbar/Toolbar.ts

@@ -1,5 +1,4 @@
-import { Button, type ButtonConfig } from '@editor/ui'
-import { Tooltip } from '@editor/ui/Tooltip'
+import { Button, type ButtonConfig, type Dropdown } from '@editor/ui'
 import type ExitusEditor from '@src/ExitusEditor'
 
 import { type Tool } from './Tool'
@@ -58,7 +57,7 @@ export class Toolbar {
 
         toolbarButtonConfig.forEach((config: any) => {
           if (config?.dropdown) {
-            const dropdown = config?.dropdown({ editor: this.editor })
+            const dropdown = config?.dropdown({ editor: this.editor }) as Dropdown
             const button = new Button(this.editor, config)
             dropdown.setParentToolbar(this)
             dropdown.setButton(button)

src/editor/ui/Button.ts

@@ -23,6 +23,7 @@ export interface ButtonConfig {
   classList: string[]
   click: (obj: ButtonEventProps) => void
   checkActive: string | object
+  tooltip?: string
 }
 
 const defaultConfig: Partial<ButtonConfig> = {
@@ -111,9 +112,38 @@ export class Button implements Tool {
     }
   }
 
+  createTooltip(parent: HTMLButtonElement, tooltipText: string) {
+    const tooltip = document.createElement('div')
+    tooltip.className = 'ex-tooltip ex-tooltip-arrow ex-reset-all ex-hidden'
+    const tooltipMessage = tooltip.appendChild(document.createElement('span'))
+    tooltipMessage.className = 'ex-tooltip-text'
+    tooltipMessage.innerText = tooltipText
+    parent.appendChild(tooltip)
+    parent.addEventListener('pointerover', () => {
+      const showDelay = setTimeout(() => {
+        tooltip.classList.remove('ex-hidden')
+      }, 500)
+
+      parent.addEventListener('pointerleave', () => {
+        tooltip.classList.add('ex-hidden')
+        clearTimeout(showDelay)
+      })
+
+      parent.addEventListener('click', () => {
+        tooltip.classList.add('ex-hidden')
+        clearTimeout(showDelay)
+      })
+    })
+
+    return parent
+  }
+
   render() {
     this.editorCheckActive()
     this.button.innerHTML = (this.config?.icon as string) + (this.config?.label as string)
+    if (this.config.tooltip) {
+      this.createTooltip(this.button, this.config.tooltip)
+    }
     return this.button
   }
 

src/extensions/history/history.ts

@@ -3,22 +3,12 @@ import quote from '@icons/arrow-go-back-line.svg'
 import quote2 from '@icons/arrow-go-forward-line.svg'
 import { History as HistoryBase } from '@tiptap/extension-history'
 
-function goBack({ editor, button }: ButtonEventProps) {
+function goBack({ editor }: ButtonEventProps) {
   editor.chain().focus().undo().run()
-  if (editor.isActive('history')) {
-    button.on()
-  } else {
-    button.off()
-  }
 }
 
-function goFoward({ editor, button }: ButtonEventProps) {
+function goFoward({ editor }: ButtonEventProps) {
   editor.chain().focus().redo().run()
-  if (editor.isActive('history')) {
-    button.on()
-  } else {
-    button.off()
-  }
 }
 
 export const History = HistoryBase.extend({
@@ -29,13 +19,13 @@ export const History = HistoryBase.extend({
           icon: quote,
           click: goBack,
           checkActive: this.name,
-          tooltip: 'Desfazer (Ctrl + Z))'
+          tooltip: 'Desfazer - (Ctrl + Z)'
         },
         {
           icon: quote2,
           click: goFoward,
           checkActive: this.name,
-          tooltip: 'Refazer (Ctrl + Y))'
+          tooltip: 'Refazer - (Ctrl + Y)'
         }
       ]
     }

src/extensions/image/imageView.ts

@@ -191,28 +191,30 @@ export class ImageView implements NodeView {
         toolbarButtonConfig: {
           icon: textDr,
           click: alinhaDireita(this),
-          tooltip: 'Alinhar à direita'
+          tooltip: 'Imagem alinhada a direita'
         }
       },
       alinhaMeio: {
         toolbarButtonConfig: {
           icon: textDm,
           click: alinhaMeio(this),
           tooltip: 'Imagem centralizada'
+          click: alinhaMeio(this),
+          tooltip: 'Imagem centralizada'
         }
       },
       alinhaEsquerda: {
         toolbarButtonConfig: {
           icon: textDl,
           click: alinhaEsquerda(this),
-          tooltip: 'Alinhar à esquerda'
+          tooltip: 'Imagem alinhada a asquerda'
         }
       },
       tamanhoImg: {
         toolbarButtonConfig: {
           icon: imgSize + arrowDropDown,
           dropdown: balloonDropDown(this.originalSize),
-          tooltip: 'Redimensionar Imagem'
+          tooltip: 'Redimensionar imagem'
         }
       }
     }

src/extensions/indent/indent.ts

@@ -109,13 +109,15 @@ export const Indent = Extension.create({
           icon: tiraEspaço,
           click: delTab,
           checkActive: this.name,
-          tooltip: 'Diminuir recuo)'
+          tooltip: 'Diminuir recuo'
         },
         {
           icon: botaEspaco,
           click: setTab,
           checkActive: this.name,
           tooltip: 'Aumentar recuo'
+          checkActive: this.name,
+          tooltip: 'Aumentar recuo'
         }
       ]
     }

src/extensions/italic/Italic.ts

@@ -14,7 +14,7 @@ export const Italic = ItalicBase.extend({
         icon: italic,
         click: toggleItalic,
         checkActive: this.name,
-        tooltip: 'Itálico (Ctrl + i)'
+        tooltip: 'Itálico (Ctrl + I)'
       }
     }
   }

src/extensions/katex/katex.ts

@@ -90,7 +90,7 @@ export const Katex = Node.create({
         icon: formula,
         click: click,
         checkActive: this.name,
-        tooltip: 'Fórmulas Latex'
+        tooltip: 'Fórmula matemática - Latex'
       }
     }
   },

src/extensions/mathtype/mathtype.ts

@@ -107,14 +107,14 @@ export const MathType = Node.create({
           click: ({ editor }: ButtonEventProps) => {
             editor.commands.openMathEditor()
           },
-          tooltip: 'Fórmulas Matemáticas - MathType'
+          tooltip: 'Fórmula matemática - Mathtype'
         },
         {
           icon: chemIcon,
           click: ({ editor }: ButtonEventProps) => {
             editor.commands.openChemEditor()
           },
-          tooltip: 'Fórmulas Quimicas - ChemType'
+          tooltip: 'Fórmula química - Chemtype'
         }
       ]
     }

src/extensions/strike/strike.ts

@@ -14,7 +14,7 @@ export const Strike = StrikeBase.extend({
         icon: strike,
         click: toggleStrike,
         checkActive: this.name,
-        tooltip: 'Taxado (Ctrl + Shift + S)'
+        tooltip: 'Tachado (Ctrl + Shift + S)'
       }
     }
   }

src/extensions/table-cell/src/table-cell.ts

@@ -91,8 +91,10 @@ export const TableCell = Node.create<TableCellOptions>({
   renderHTML({ HTMLAttributes }) {
     const attributesMerged = mergeAttributes(this.options.HTMLAttributes, {
       ...HTMLAttributes,
+      colwidth: HTMLAttributes.colwidth ?? [100],
       style: objParaCss(HTMLAttributes.style)
     })
+
     const celula: DOMOutputSpec = ['td', attributesMerged, 0]
 
     return celula

src/extensions/table/TableCellBalloon.ts

@@ -1,13 +1,13 @@
 import { Balloon, Button } from '@editor/ui'
 import { getNodeBoundingClientRect } from '@editor/utils'
+import { selectionCell } from '@extensions/table/prosemirror-tables/src'
 import textDr from '@icons/align-bottom.svg'
 import textDl from '@icons/align-top.svg'
 import textDm from '@icons/align-vertically.svg'
 import Pickr from '@simonwep/pickr'
+import '@simonwep/pickr/dist/themes/nano.min.css'
 import { type Editor } from '@tiptap/core'
 import { type Attrs, type ResolvedPos } from '@tiptap/pm/model'
-import { selectionCell } from '@tiptap/pm/tables'
-import '@simonwep/pickr/dist/themes/nano.min.css'
 
 const createPickrInstance = (selector: string, onCancel: () => void): Pickr => {
   const pickr = Pickr.create({