Merge branch 'marcelinombb:main' into main

src/editor/ui/Balloon.ts

@@ -13,15 +13,15 @@ export enum BalloonPosition {
 }
 
 export interface BalloonOptions {
-  position: BalloonPosition
+  position: 'top' | 'bottom' | 'float'
 }
 
 export class Balloon {
   ballonMenu!: HTMLDivElement
   ballonPanel!: HTMLDivElement
   editor: Editor
   options: BalloonOptions = {
-    position: BalloonPosition.BOTTOM
+    position: 'bottom'
   }
   constructor(editor: Editor, options?: BalloonOptions) {
     this.editor = editor

src/editor/ui/Dropdown.ts

@@ -75,7 +75,7 @@ export class Dropdown implements Tool {
 
       const close = (event: Event) => {
         const target = event.target as HTMLElement
-        if (target.closest('.dropdown')) {
+        if (!target.closest('.ex-dropdown')) {
           this.off()
           window.removeEventListener('click', close)
         }

src/editor/utils.ts

@@ -1,6 +1,7 @@
 import { type ChainedCommands, type Editor } from '@tiptap/core'
 import { type Node } from '@tiptap/pm/model'
 import { TextSelection } from '@tiptap/pm/state'
+import { Fragment } from 'prosemirror-model'
 
 export function createHTMLElement<T = Element>(tagName: string, attributes: { [x: string]: string }, childrens?: Element[]): T {
   // Create the element
@@ -23,9 +24,42 @@ export function createHTMLElement<T = Element>(tagName: string, attributes: { [x
   return element as T
 }
 
-export function setCaretAfterNode(editor: Editor, targetNode: Node) {
-  const { state, view } = editor
-  const { doc, tr } = state
+export function insertParagraph(editor: Editor, position: number, before = false) {
+  const { view } = editor
+  const { tr, schema } = view.state
+
+  const paragraph = schema.nodes.paragraph.create()
+
+  const insertPos = before ? position : position + 1
+
+  tr.insert(insertPos, Fragment.from(paragraph))
+
+  const newPos = before ? insertPos : insertPos + 1
+
+  // Set selection to new paragraph
+  const transaction = tr.setSelection(TextSelection.create(tr.doc, newPos))
+
+  view.dispatch(transaction)
+}
+
+export function findNodePosition(editor: Editor, targetNode: Node) {
+  const { doc } = editor.view.state
+  let position = -1
+
+  doc.descendants((node, pos) => {
+    if (node === targetNode) {
+      position = pos
+      return false // Stop traversing
+    }
+    return true
+  })
+
+  return position
+}
+
+export function setSelectionAfter(editor: Editor, targetNode: Node) {
+  const { view } = editor
+  const { doc, tr } = view.state
 
   // Find the position of the target node
   let targetPos = null
@@ -41,13 +75,14 @@ export function setCaretAfterNode(editor: Editor, targetNode: Node) {
     const selection = TextSelection.create(doc, targetPos)
     const transaction = tr.setSelection(selection)
     view.dispatch(transaction)
+    view.focus()
   } else {
     console.error('Node not found in the document')
   }
 }
 
 export function getNodeFromSelection(editor: Editor): Node | null {
-  const { state } = editor
+  const { state } = editor.view
   const { from } = state.selection
   const node = state.doc.nodeAt(from)
   return node

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

@@ -1,7 +1,6 @@
 import { objParaCss } from '@extensions/table'
 import { mergeAttributes, Node } from '@tiptap/core'
-import { type DOMOutputSpec } from '@tiptap/pm/model'
-import { selectionCell } from '@tiptap/pm/tables'
+import { type DOMOutputSpec, type ResolvedPos } from '@tiptap/pm/model'
 
 export interface TableCellOptions {
   /**
@@ -37,6 +36,14 @@ export function cssParaObj(cssString: string): { [key: string]: string } {
   return styles
 }
 
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    tableCell: {
+      setCellAttributes: (resPos: ResolvedPos, attributes: { [key: string]: any }) => ReturnType
+    }
+  }
+}
+
 export const TableCell = Node.create<TableCellOptions>({
   name: 'tableCell',
 
@@ -92,11 +99,10 @@ export const TableCell = Node.create<TableCellOptions>({
   },
   addCommands() {
     return {
-      ...this.parent?.(),
-      setCellAttribute:
-        (attributes: { [key: string]: any }) =>
-        ({ state, dispatch, tr }) => {
-          const { nodeAfter, pos } = selectionCell(state)
+      setCellAttributes:
+        (resPos: ResolvedPos, attributes: { [key: string]: any }) =>
+        ({ dispatch, tr }) => {
+          const { nodeAfter, pos } = resPos
 
           const attrs = {
             ...nodeAfter?.attrs,
@@ -108,9 +114,10 @@ export const TableCell = Node.create<TableCellOptions>({
           if (dispatch) {
             tr.setNodeMarkup(pos, undefined, attrs)
             dispatch(tr)
+            return true
           }
 
-          return true
+          return false
         }
     }
   }

src/extensions/image/image.ts

@@ -244,7 +244,6 @@ export const Image = Node.create<ImageOptions>({
               .map(item => item.getAsFile())
             if (images.length !== 0) event.preventDefault()
             images.forEach(image => parseImagesToBase64(image as File, self.editor))
-            console.log(images)
           },
           handleDOMEvents: {
             drop: (view, event) => {
@@ -256,7 +255,6 @@ export const Image = Node.create<ImageOptions>({
                 if (images.length === 0) {
                   return false
                 }
-                console.log(images)
                 images.forEach(image => parseImagesToBase64(image, self.editor))
 
                 event.preventDefault()

src/extensions/image/imageView.ts

@@ -1,13 +1,13 @@
 import { Toolbar } from '@editor/toolbar'
 import { Button, type ButtonEventProps, Dropdown, type DropDownEventProps } from '@editor/ui'
-import { Balloon, BalloonPosition } from '@editor/ui/Balloon'
-import { type Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { Balloon } from '@editor/ui/Balloon'
 import arrowDropDown from '@icons/arrow-drop-down-line.svg'
 import textDl from '@icons/image-left.svg'
 import textDm from '@icons/image-middle.svg'
 import textDr from '@icons/image-right.svg'
 import imgSize from '@icons/image-size.svg'
 import { type Editor } from '@tiptap/core'
+import { type Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { type Node } from '@tiptap/pm/model'
 import { type NodeView } from '@tiptap/pm/view'
 import type ExitusEditor from 'src/ExitusEditor'
@@ -223,7 +223,6 @@ export class ImageView implements NodeView {
     this.setImageAttributes(this.image, node)
 
     const imageUrlRegex = /(https?:\/\/.*\.(?:png|jpg|jpeg|gif|bmp|webp|svg))/i
-    //console.log(imageUrlRegex.test(node.attrs.src))
 
     if (imageUrlRegex.test(node.attrs.src)) {
       this.urlToBase64()
@@ -275,7 +274,7 @@ export class ImageView implements NodeView {
     })
 
     this.balloon = new Balloon(editor, {
-      position: BalloonPosition.TOP
+      position: 'top'
     })
     this.balloon.ballonPanel.appendChild(toolbar.createToolbar())
 

src/extensions/katex/katex.ts

@@ -1,4 +1,4 @@
-import { BalloonPosition, type ButtonEventProps } from '@editor/ui'
+import { type ButtonEventProps } from '@editor/ui'
 import formula from '@icons/formula.svg'
 import { Node } from '@tiptap/core'
 // eslint-disable-next-line import-helpers/order-imports
@@ -45,7 +45,7 @@ function click({ editor, button }: ButtonEventProps) {
     },
     confirmButtonCallback,
     cancelButtonCallback,
-    BalloonPosition.FLOAT
+    'float'
   )
 
   const focus = () => {

src/extensions/katex/katexBalloon.ts

@@ -1,4 +1,4 @@
-import { Balloon, type BalloonPosition, Button } from '@editor/ui'
+import { Balloon, type BalloonOptions, Button } from '@editor/ui'
 import { createHTMLElement } from '@editor/utils'
 import check from '@icons/check-line.svg'
 import close from '@icons/close-line.svg'
@@ -18,7 +18,7 @@ export class KatexBalloon {
     latexConfig: any,
     confirmCallback: (katexBalloon: KatexBalloon) => void,
     cancelCallback: (katexBalloon: KatexBalloon) => void,
-    position: BalloonPosition
+    position: BalloonOptions['position']
   ) {
     const { display, latexFormula } = latexConfig
     this.editor = editor

src/extensions/katex/katexView.ts

@@ -1,5 +1,4 @@
-import { BalloonPosition } from '@editor/ui/Balloon'
-import { createHTMLElement } from '@editor/utils'
+import { createHTMLElement, setSelectionAfter } from '@editor/utils'
 import { type Editor } from '@tiptap/core'
 import { type Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { type NodeView } from '@tiptap/pm/view'
@@ -52,6 +51,7 @@ export class KatexView implements NodeView {
         latexFormula: input.value,
         display: checkboxDisplay.checked
       })
+      setSelectionAfter(this.editor, this.node)
     }
 
     function cancelBalloon(this: KatexView) {
@@ -66,7 +66,7 @@ export class KatexView implements NodeView {
       },
       confirmBalloon.bind(this),
       cancelBalloon.bind(this),
-      BalloonPosition.BOTTOM
+      'bottom'
     )
 
     this.renderedLatex = document.createElement('span')

src/extensions/listitem/listItem.ts

@@ -1,4 +1,4 @@
-import { Button, Dropdown } from '@editor/ui'
+import { Button, DropDownEventProps, Dropdown } from '@editor/ui'
 import arrowDropDown from '@icons/arrow-drop-down-line.svg'
 import listFullIcon from '@icons/list-check.svg'
 import listOrederedIcon from '@icons/list-ordered-2.svg'
@@ -46,7 +46,7 @@ function createDropDownContent(editor: ExitusEditor, dropdown: Dropdown) {
   return dropdownContent
 }
 
-function showDropdown({ event, dropdown }: any) {
+function showDropdown({ event, dropdown }: DropDownEventProps) {
   event.stopPropagation()
   if (dropdown.isOpen) {
     dropdown.off()
@@ -65,13 +65,6 @@ function listItemDropDown({ editor }: any) {
 
   dropdown.setDropDownContent(createDropDownContent(editor, dropdown))
 
-  window.addEventListener('click', function (event: Event) {
-    const target = event.target as HTMLElement
-    if (!target.matches('.dropdown')) {
-      dropdown.off()
-    }
-  })
-
   return dropdown
 }
 

src/extensions/mathtype/mathtype.ts

@@ -225,10 +225,5 @@ export const MathType = Node.create({
   onDestroy() {
     this.storage.currentInstances.get(this.editor.editorInstance).destroy()
     this.storage.currentInstances.delete(this.editor.editorInstance)
-  },
-  addOptions() {
-    return {
-      currentInstance: null
-    }
   }
 })

src/extensions/table/TableView.ts

@@ -10,35 +10,35 @@ import starredTable from '@icons/starred-table.svg'
 import tableColumns from '@icons/table-columns.svg'
 import tableRow from '@icons/table-lines.svg'
 import { type Editor } from '@tiptap/core'
-import { type Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { type Node as ProseMirrorNode, type ResolvedPos } from '@tiptap/pm/model'
+import { selectionCell } from '@tiptap/pm/tables'
 import { type NodeView } from '@tiptap/pm/view'
 import type ExitusEditor from 'src/ExitusEditor'
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-
 import { criaCellModal } from './itensModalCell'
 import { criaTabelaModal } from './itensModalTable'
 import { objParaCss } from './table'
 import TableFocus, { UpDownTable } from './tableFocus'
 import { criaDropCell, criaDropColuna, criaDropLinhas } from './tableToolbarItens'
 
-function clickHandler(table: TableView) {
-  table.tableWrapper.addEventListener('click', event => {
-    if (!table.balloon.isOpen()) {
-      table.balloon.show()
+function clickHandler(tableView: TableView) {
+  tableView.table.addEventListener('click', event => {
+    if (!tableView.balloon.isOpen()) {
+      tableView.balloon.show()
     }
+    tableView.updateSelectedCell()
 
     function clickOutside(event) {
       const target = event.target as HTMLElement
 
       if (target.closest('.tableWrapper') == null) {
-        table.balloon.hide()
-        table.tableWrapper.classList.remove('ex-selected')
-        window.removeEventListener('click', clickOutside)
+        tableView.balloon.hide()
+        tableView.tableWrapper.classList.remove('ex-selected')
+        document.removeEventListener('click', clickOutside)
       }
     }
 
-    window.addEventListener('click', clickOutside)
+    document.addEventListener('click', clickOutside)
   })
 }
 
@@ -109,6 +109,7 @@ export class TableView implements NodeView {
   getPos: boolean | (() => number)
   tableStyle: { [key: string]: string }
   tableWrapperStyle: { [key: string]: string }
+  selectedCell: ResolvedPos
 
   constructor(node: ProseMirrorNode, editor: Editor, getPos: boolean | (() => number)) {
     this.node = node
@@ -129,8 +130,8 @@ export class TableView implements NodeView {
     updateColumns(node, this.colgroup, this.table, this.cellMinWidth)
     this.contentDOM = this.table.appendChild(document.createElement('tbody'))
 
-    new TableFocus(this)
-    new UpDownTable(this)
+    new TableFocus(this, this.editor)
+    new UpDownTable(this, this.editor)
 
     const configStorage = {
       celumnsTable: {
@@ -151,7 +152,7 @@ export class TableView implements NodeView {
         toolbarButtonConfig: {
           icon: tableCell + arrowDropDown,
           title: 'mesclar células',
-          dropdown: criaDropCell(node.attrs.style)
+          dropdown: criaDropCell()
         }
       },
       tableStarred: {
@@ -165,7 +166,7 @@ export class TableView implements NodeView {
         toolbarButtonConfig: {
           icon: starredCell + arrowDropDown,
           title: 'editar celula',
-          dropdown: criaCellModal()
+          dropdown: criaCellModal(this)
         }
       }
     }
@@ -207,6 +208,14 @@ export class TableView implements NodeView {
     }
   }
 
+  updateSelectedCell() {
+    this.selectedCell = selectionCell(this.editor.view.state)
+  }
+
+  getSelectedCell() {
+    return this.selectedCell
+  }
+
   update(node: ProseMirrorNode) {
     if (node.type !== this.node.type) {
       return false
@@ -248,6 +257,5 @@ export class TableView implements NodeView {
 function updateTableStyle(tableView: TableView) {
   const { table, tableWrapperStyle, tableWrapper, tableStyle } = tableView
   table.setAttribute('style', objParaCss(tableStyle))
-
   tableWrapper.setAttribute('style', objParaCss(tableWrapperStyle))
 }