From 8711f4e795bdec0b6c6acc4c58fc44aa363cf69d Mon Sep 17 00:00:00 2001 From: Halim Tannous <48407395+halimt92@users.noreply.github.com> Date: Fri, 14 Jun 2024 07:26:32 +0200 Subject: [PATCH 01/10] feat: support tableImage in tables --- .../api/nodeConversions/nodeConversions.ts | 26 ++++++++-- .../TableBlockContent/TableBlockContent.ts | 48 +++++++++++++++++++ .../TableBlockContent/TableExtension.ts | 4 ++ 3 files changed, 75 insertions(+), 3 deletions(-) diff --git a/packages/core/src/api/nodeConversions/nodeConversions.ts b/packages/core/src/api/nodeConversions/nodeConversions.ts index 9d76b4e84c..589c8b5f71 100644 --- a/packages/core/src/api/nodeConversions/nodeConversions.ts +++ b/packages/core/src/api/nodeConversions/nodeConversions.ts @@ -172,13 +172,20 @@ export function tableContentToNodes< const columnNodes: Node[] = []; for (const cell of row.cells) { let pNode: Node; - if (!cell) { + if (!cell || cell.length === 0) { pNode = schema.nodes["tableParagraph"].create({}); } else if (typeof cell === "string") { pNode = schema.nodes["tableParagraph"].create({}, schema.text(cell)); } else { - const textNodes = inlineContentToNodes(cell, schema, styleSchema); - pNode = schema.nodes["tableParagraph"].create({}, textNodes); + const isImage = cell.find((c) => c.type === "tableImage"); + if (isImage) { + pNode = schema.nodes["tableImage"].create({ + src: isImage.url, + }); + } else { + const textNodes = inlineContentToNodes(cell, schema, styleSchema); + pNode = schema.nodes["tableParagraph"].create({}, textNodes); + } } const cellNode = schema.nodes["tableCell"].create({}, pNode); @@ -282,6 +289,19 @@ function contentNodeToTableContent< }; rowNode.content.forEach((cellNode) => { + if ( + cellNode.firstChild && + cellNode.firstChild.type.name === "tableImage" + ) { + row.cells.push([ + { + type: "tableImage", + url: cellNode.firstChild.attrs.src, + } as unknown as InlineContent, + ]); + return; + } + row.cells.push( contentNodeToInlineContent( cellNode.firstChild!, diff --git a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts index e47a62b2d4..cf468830b3 100644 --- a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts +++ b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts @@ -79,12 +79,60 @@ const TableParagraph = Node.create({ }, }); +const TableImage = Node.create({ + name: "tableImage", + group: "tableContent", + content: "inline*", + + addAttributes() { + return { + src: { + default: "", + }, + }; + }, + parseHTML() { + return [ + { tag: "td" }, + { + tag: "img", + getAttrs: (element) => { + if (typeof element === "string" || !element.textContent) { + return false; + } + + const parent = element.parentElement; + + if (parent === null) { + return false; + } + + if (parent.tagName === "TD") { + return {}; + } + + return false; + }, + }, + ]; + }, + + renderHTML({ HTMLAttributes }) { + return [ + "img", + mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), + 0, + ]; + }, +}); + export const Table = createBlockSpecFromStronglyTypedTiptapNode( TableBlockContent, tablePropSchema, [ TableExtension, TableParagraph, + TableImage, TableHeader.extend({ content: "tableContent", }), diff --git a/packages/core/src/blocks/TableBlockContent/TableExtension.ts b/packages/core/src/blocks/TableBlockContent/TableExtension.ts index fb0147d7ae..2a7a1737da 100644 --- a/packages/core/src/blocks/TableBlockContent/TableExtension.ts +++ b/packages/core/src/blocks/TableBlockContent/TableExtension.ts @@ -33,6 +33,10 @@ export const TableExtension = Extension.create({ // the start of a cell and the selection is empty. Backspace: () => { const selection = this.editor.state.selection; + + if (selection.$head.node().type.name === "tableImage") { + return false; + } const selectionIsEmpty = selection.empty; const selectionIsAtStartOfNode = selection.$head.parentOffset === 0; const selectionIsInTableParagraphNode = From 5f57664aa8cdee75109f28fd9b98e2a025f7047d Mon Sep 17 00:00:00 2001 From: Halim Tannous <48407395+halimt92@users.noreply.github.com> Date: Fri, 14 Jun 2024 22:27:22 +0200 Subject: [PATCH 02/10] fix: persist table column resize --- .../api/nodeConversions/nodeConversions.ts | 55 ++++++++---- .../TableBlockContent/TableBlockContent.ts | 77 ++++++++++++++--- .../TableBlockContent/TableExtension.ts | 7 +- .../TableHandles/TableHandlesPlugin.ts | 83 +++++++++++++++++++ 4 files changed, 196 insertions(+), 26 deletions(-) diff --git a/packages/core/src/api/nodeConversions/nodeConversions.ts b/packages/core/src/api/nodeConversions/nodeConversions.ts index 589c8b5f71..b4eb19ad1d 100644 --- a/packages/core/src/api/nodeConversions/nodeConversions.ts +++ b/packages/core/src/api/nodeConversions/nodeConversions.ts @@ -177,14 +177,27 @@ export function tableContentToNodes< } else if (typeof cell === "string") { pNode = schema.nodes["tableParagraph"].create({}, schema.text(cell)); } else { - const isImage = cell.find((c) => c.type === "tableImage"); + const isImage = cell.find( + (c: any) => c.type === "tableImage" + ) as unknown as { + url: string; + caption: string; + width: string; + styles: any; + }; if (isImage) { pNode = schema.nodes["tableImage"].create({ src: isImage.url, + caption: isImage.caption, + width: isImage.width, + backgroundColor: isImage.styles?.backgroundColor, }); } else { const textNodes = inlineContentToNodes(cell, schema, styleSchema); - pNode = schema.nodes["tableParagraph"].create({}, textNodes); + pNode = schema.nodes["tableParagraph"].create( + (cell[0] as any) ?? {}, + textNodes + ); } } @@ -194,6 +207,7 @@ export function tableContentToNodes< const rowNode = schema.nodes["tableRow"].create({}, columnNodes); rowNodes.push(rowNode); } + return rowNodes; } @@ -289,26 +303,39 @@ function contentNodeToTableContent< }; rowNode.content.forEach((cellNode) => { - if ( - cellNode.firstChild && - cellNode.firstChild.type.name === "tableImage" - ) { + const firstChild = cellNode.firstChild; + if (firstChild && firstChild.type.name === "tableImage") { row.cells.push([ { type: "tableImage", - url: cellNode.firstChild.attrs.src, + url: firstChild.attrs.src, + caption: firstChild.attrs.caption, + width: firstChild.attrs.width, + styles: { + backgroundColor: firstChild.attrs.backgroundColor, + }, } as unknown as InlineContent, ]); return; } - row.cells.push( - contentNodeToInlineContent( - cellNode.firstChild!, - inlineContentSchema, - styleSchema - ) - ); + const cells = contentNodeToInlineContent( + cellNode.firstChild!, + inlineContentSchema, + styleSchema + ).map((c) => ({ + ...c, + width: firstChild!.attrs.width ?? undefined, + })) as any; + if (cells.length === 0) { + cells.push({ + type: "text", + text: "", + styles: {}, + width: firstChild!.attrs.width ?? undefined, + }); + } + row.cells.push(cells); }); ret.rows.push(row); diff --git a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts index cf468830b3..3b9d8b228e 100644 --- a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts +++ b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts @@ -1,4 +1,4 @@ -import { mergeAttributes, Node } from "@tiptap/core"; +import { Node } from "@tiptap/core"; import { TableCell } from "@tiptap/extension-table-cell"; import { TableHeader } from "@tiptap/extension-table-header"; import { TableRow } from "@tiptap/extension-table-row"; @@ -44,6 +44,13 @@ const TableParagraph = Node.create({ group: "tableContent", content: "inline*", + addAttributes() { + return { + width: { + default: "100px", + }, + }; + }, parseHTML() { return [ { tag: "td" }, @@ -71,11 +78,15 @@ const TableParagraph = Node.create({ }, renderHTML({ HTMLAttributes }) { - return [ - "p", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), - 0, - ]; + const p = document.createElement("p"); + + if (HTMLAttributes.width) { + p.style.width = HTMLAttributes.width; + } + return { + dom: p, + contentDOM: p, + }; }, }); @@ -89,6 +100,15 @@ const TableImage = Node.create({ src: { default: "", }, + width: { + default: "100px", + }, + caption: { + default: "", + }, + backgroundColor: { + default: "default", + }, }; }, parseHTML() { @@ -118,11 +138,46 @@ const TableImage = Node.create({ }, renderHTML({ HTMLAttributes }) { - return [ - "img", - mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), - 0, - ]; + const div = document.createElement("div"); + div.className = "table-image-container"; + const img = document.createElement("img"); + img.src = HTMLAttributes.src; + + const imgStyleProps = { + padding: "8px", + borderRadius: "4px", + }; + const divStyleProps = { + maxWidth: "300px", + backgroundColor: HTMLAttributes.backgroundColor, + display: "flex", + justifyContent: "center", + alignItems: "center", + verticalAlign: "middle", + flexDirection: "column", + }; + Object.entries(imgStyleProps).forEach(([key, value]) => { + img.style[key as any] = value; + }); + Object.entries(divStyleProps).forEach(([key, value]) => { + div.style[key as any] = value; + }); + + if (HTMLAttributes.width) { + div.style.width = HTMLAttributes.width; + } + div.appendChild(img); + + if (HTMLAttributes.caption) { + const p = document.createElement("p"); + p.innerText = HTMLAttributes.caption; + div.appendChild(p); + } + + return { + dom: div, + contentDOM: img, + }; }, }); diff --git a/packages/core/src/blocks/TableBlockContent/TableExtension.ts b/packages/core/src/blocks/TableBlockContent/TableExtension.ts index 2a7a1737da..a36a5d89af 100644 --- a/packages/core/src/blocks/TableBlockContent/TableExtension.ts +++ b/packages/core/src/blocks/TableBlockContent/TableExtension.ts @@ -26,7 +26,12 @@ export const TableExtension = Extension.create({ return true; } - + if ( + this.editor.state.selection.empty && + this.editor.state.selection.$head.parent.type.name === "tableImage" + ) { + return true; + } return false; }, // Ensures that backspace won't delete the table if the text cursor is at diff --git a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts index 57f1533773..4f7e4ffb86 100644 --- a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts +++ b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts @@ -88,6 +88,7 @@ export class TableHandlesView< > implements PluginView { public state?: TableHandlesState; + public resizingTable?: HTMLElement; public emitUpdate: () => void; public tableId: string | undefined; @@ -115,6 +116,8 @@ export class TableHandlesView< }; pmView.dom.addEventListener("mousemove", this.mouseMoveHandler); + pmView.dom.addEventListener("mouseup", this.mouseUpHandler); + pmView.dom.addEventListener("mousedown", this.mouseDownHandler); document.addEventListener("dragover", this.dragOverHandler); document.addEventListener("drop", this.dropHandler); @@ -358,8 +361,88 @@ export class TableHandlesView< } }; + mouseDownHandler = (event: MouseEvent) => { + if (this.state === undefined) { + return; + } + + if (this.state.block.type !== "table") { + return; + } + + this.resizingTable = (event.target as any)?.closest("table") || undefined; + return; + }; + + mouseUpHandler = (event: MouseEvent) => { + if (this.state === undefined) { + return; + } + + event.preventDefault(); + if (this.state.block.type !== "table" || !this.resizingTable) { + return; + } + const rows = this.state.block.content.rows; + + const cols = this.resizingTable.querySelectorAll("col") ?? []; + const colWidth = Array.from(cols).map((col: any) => col.style.width); + let columnWidthChanged = false; + + const newRows = rows.map((row) => { + return { + cells: row.cells.map((cell, index) => { + if (cell.length === 0) { + if (!colWidth[index]) { + return []; + } + columnWidthChanged = true; + return [ + { + type: "text", + text: "", + width: colWidth[index], + styles: {}, + }, + ]; + } + return cell.map((c: any) => { + if (!colWidth[index]) { + return c; + } + if (c.width !== colWidth[index]) { + columnWidthChanged = true; + } + return { + ...c, + width: colWidth[index], + }; + }); + }), + }; + }); + + if (!columnWidthChanged) { + return; + } + const savedState = this.state; + setTimeout(() => { + savedState.block.content.rows = newRows; + + this.editor.updateBlock(savedState.block, { + type: "table", + content: { + type: "tableContent", + rows: newRows, + }, + }); + }, 0); + }; + destroy() { this.pmView.dom.removeEventListener("mousemove", this.mouseMoveHandler); + this.pmView.dom.removeEventListener("mousedown", this.mouseDownHandler); + this.pmView.dom.removeEventListener("mouseup", this.mouseUpHandler); document.removeEventListener("dragover", this.dragOverHandler); document.removeEventListener("drop", this.dropHandler); From a0c3b5aa5b4433363b92416576cf381f4cb60222 Mon Sep 17 00:00:00 2001 From: Halim Tannous <48407395+halimt92@users.noreply.github.com> Date: Fri, 14 Jun 2024 22:51:38 +0200 Subject: [PATCH 03/10] chore: reduce css in image rendering --- .../TableBlockContent/TableBlockContent.ts | 25 +++---------------- 1 file changed, 3 insertions(+), 22 deletions(-) diff --git a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts index 3b9d8b228e..c331595e01 100644 --- a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts +++ b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts @@ -101,7 +101,7 @@ const TableImage = Node.create({ default: "", }, width: { - default: "100px", + default: "", }, caption: { default: "", @@ -141,28 +141,9 @@ const TableImage = Node.create({ const div = document.createElement("div"); div.className = "table-image-container"; const img = document.createElement("img"); + img.className = "table-image"; img.src = HTMLAttributes.src; - - const imgStyleProps = { - padding: "8px", - borderRadius: "4px", - }; - const divStyleProps = { - maxWidth: "300px", - backgroundColor: HTMLAttributes.backgroundColor, - display: "flex", - justifyContent: "center", - alignItems: "center", - verticalAlign: "middle", - flexDirection: "column", - }; - Object.entries(imgStyleProps).forEach(([key, value]) => { - img.style[key as any] = value; - }); - Object.entries(divStyleProps).forEach(([key, value]) => { - div.style[key as any] = value; - }); - + div.style.backgroundColor = HTMLAttributes.backgroundColor; if (HTMLAttributes.width) { div.style.width = HTMLAttributes.width; } From 071941c7232030a0986beb09ff3bba4be8e6350d Mon Sep 17 00:00:00 2001 From: Halim Tannous <48407395+halimt92@users.noreply.github.com> Date: Sun, 16 Jun 2024 00:01:04 +0200 Subject: [PATCH 04/10] chore: minimize persited values in nodes --- .../api/nodeConversions/nodeConversions.ts | 40 +++++++++++++------ .../TableBlockContent/TableBlockContent.ts | 10 +++-- 2 files changed, 33 insertions(+), 17 deletions(-) diff --git a/packages/core/src/api/nodeConversions/nodeConversions.ts b/packages/core/src/api/nodeConversions/nodeConversions.ts index b4eb19ad1d..ecfaa1a578 100644 --- a/packages/core/src/api/nodeConversions/nodeConversions.ts +++ b/packages/core/src/api/nodeConversions/nodeConversions.ts @@ -304,18 +304,28 @@ function contentNodeToTableContent< rowNode.content.forEach((cellNode) => { const firstChild = cellNode.firstChild; + if (firstChild && firstChild.type.name === "tableImage") { - row.cells.push([ - { - type: "tableImage", - url: firstChild.attrs.src, - caption: firstChild.attrs.caption, - width: firstChild.attrs.width, - styles: { - backgroundColor: firstChild.attrs.backgroundColor, - }, - } as unknown as InlineContent, - ]); + const styles: Record = { + ...(firstChild.attrs.backgroundColor && + firstChild.attrs.backgroundColor !== "default" + ? { backgroundColor: firstChild.attrs.backgroundColor } + : {}), + }; + const addStyles = Object.keys(styles).length > 0; + const imageCell = { + type: "tableImage", + url: firstChild.attrs.src, + ...(firstChild.attrs.caption + ? { caption: firstChild.attrs.caption } + : {}), + ...(firstChild.attrs.width && firstChild.attrs.width !== "default" + ? { width: firstChild.attrs.width } + : {}), + ...(addStyles ? { styles } : {}), + } as unknown as InlineContent; + + row.cells.push([imageCell]); return; } @@ -325,14 +335,18 @@ function contentNodeToTableContent< styleSchema ).map((c) => ({ ...c, - width: firstChild!.attrs.width ?? undefined, + ...(firstChild!.attrs.width && firstChild!.attrs.width !== "default" + ? { width: firstChild!.attrs.width } + : {}), })) as any; if (cells.length === 0) { cells.push({ type: "text", text: "", styles: {}, - width: firstChild!.attrs.width ?? undefined, + ...(firstChild!.attrs.width && firstChild!.attrs.width !== "default" + ? { width: firstChild!.attrs.width } + : {}), }); } row.cells.push(cells); diff --git a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts index c331595e01..96023e7988 100644 --- a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts +++ b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts @@ -47,7 +47,7 @@ const TableParagraph = Node.create({ addAttributes() { return { width: { - default: "100px", + default: "default", }, }; }, @@ -80,8 +80,10 @@ const TableParagraph = Node.create({ renderHTML({ HTMLAttributes }) { const p = document.createElement("p"); - if (HTMLAttributes.width) { + if (HTMLAttributes.width && HTMLAttributes.width !== "default") { p.style.width = HTMLAttributes.width; + } else { + p.style.width = "100px"; } return { dom: p, @@ -101,7 +103,7 @@ const TableImage = Node.create({ default: "", }, width: { - default: "", + default: "default", }, caption: { default: "", @@ -144,7 +146,7 @@ const TableImage = Node.create({ img.className = "table-image"; img.src = HTMLAttributes.src; div.style.backgroundColor = HTMLAttributes.backgroundColor; - if (HTMLAttributes.width) { + if (HTMLAttributes.width && HTMLAttributes.width !== "default") { div.style.width = HTMLAttributes.width; } div.appendChild(img); From a39a7819466b83f247d45b3b3edfddde7e2141de Mon Sep 17 00:00:00 2001 From: Halim Tannous <48407395+halimt92@users.noreply.github.com> Date: Sun, 16 Jun 2024 07:39:54 +0200 Subject: [PATCH 05/10] feat: autofocus on image cells on one click --- .../TableBlockContent/TableBlockContent.ts | 4 +++ .../TableHandles/TableHandlesPlugin.ts | 30 +++++++++++++++++++ 2 files changed, 34 insertions(+) diff --git a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts index 96023e7988..b5bdda84d9 100644 --- a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts +++ b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts @@ -145,6 +145,10 @@ const TableImage = Node.create({ const img = document.createElement("img"); img.className = "table-image"; img.src = HTMLAttributes.src; + img.contentEditable = "false"; + img.draggable = false; + div.contentEditable = "false"; + div.draggable = false; div.style.backgroundColor = HTMLAttributes.backgroundColor; if (HTMLAttributes.width && HTMLAttributes.width !== "default") { div.style.width = HTMLAttributes.width; diff --git a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts index 4f7e4ffb86..16ad430c96 100644 --- a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts +++ b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts @@ -12,6 +12,7 @@ import { import { checkBlockIsDefaultType } from "../../blocks/defaultBlockTypeGuards"; import { EventEmitter } from "../../util/EventEmitter"; import { getDraggableBlockFromElement } from "../SideMenu/SideMenuPlugin"; +import { CellSelection, cellAround } from "prosemirror-tables"; let dragImageElement: HTMLElement | undefined; @@ -118,6 +119,7 @@ export class TableHandlesView< pmView.dom.addEventListener("mousemove", this.mouseMoveHandler); pmView.dom.addEventListener("mouseup", this.mouseUpHandler); pmView.dom.addEventListener("mousedown", this.mouseDownHandler); + pmView.dom.addEventListener("click", this.mouseClickHandler); document.addEventListener("dragover", this.dragOverHandler); document.addEventListener("drop", this.dropHandler); @@ -374,6 +376,33 @@ export class TableHandlesView< return; }; + mouseClickHandler = (event: MouseEvent) => { + if (this.state === undefined) { + return; + } + + if (this.state.block.type !== "table") { + return; + } + + if ((event.target as HTMLElement).closest(".table-image-container")) { + const a = this.editor._tiptapEditor.view.posAtCoords({ + left: event.clientX, + top: event.clientY, + })!; + const cell = cellAround( + this.editor._tiptapEditor.view.state.doc.resolve(a.pos) + )!; + + this.editor._tiptapEditor.view.dispatch( + this.editor._tiptapEditor.view.state.tr.setSelection( + new CellSelection(cell) + ) + ); + } + return; + }; + mouseUpHandler = (event: MouseEvent) => { if (this.state === undefined) { return; @@ -443,6 +472,7 @@ export class TableHandlesView< this.pmView.dom.removeEventListener("mousemove", this.mouseMoveHandler); this.pmView.dom.removeEventListener("mousedown", this.mouseDownHandler); this.pmView.dom.removeEventListener("mouseup", this.mouseUpHandler); + this.pmView.dom.addEventListener("click", this.mouseClickHandler); document.removeEventListener("dragover", this.dragOverHandler); document.removeEventListener("drop", this.dropHandler); From d2bb38cab595c7c1e880325acb8b31ed3d327ce5 Mon Sep 17 00:00:00 2001 From: Halim Tannous <48407395+halimt92@users.noreply.github.com> Date: Sun, 16 Jun 2024 18:19:50 +0200 Subject: [PATCH 06/10] fix: set min width on paragraph instead of width --- .../core/src/blocks/TableBlockContent/TableBlockContent.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts index b5bdda84d9..25ae72cd6e 100644 --- a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts +++ b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts @@ -79,11 +79,10 @@ const TableParagraph = Node.create({ renderHTML({ HTMLAttributes }) { const p = document.createElement("p"); + p.style.setProperty("min-width", "100px", "important"); if (HTMLAttributes.width && HTMLAttributes.width !== "default") { p.style.width = HTMLAttributes.width; - } else { - p.style.width = "100px"; } return { dom: p, From 3a7a09ae58f80b4c80268097c1f2fb7d11d91f1b Mon Sep 17 00:00:00 2001 From: Halim Tannous <48407395+halimt92@users.noreply.github.com> Date: Mon, 17 Jun 2024 10:55:08 +0200 Subject: [PATCH 07/10] chore: rename lazy variable --- .../core/src/extensions/TableHandles/TableHandlesPlugin.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts index 16ad430c96..af3a4e7703 100644 --- a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts +++ b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts @@ -386,12 +386,12 @@ export class TableHandlesView< } if ((event.target as HTMLElement).closest(".table-image-container")) { - const a = this.editor._tiptapEditor.view.posAtCoords({ + const image = this.editor._tiptapEditor.view.posAtCoords({ left: event.clientX, top: event.clientY, })!; const cell = cellAround( - this.editor._tiptapEditor.view.state.doc.resolve(a.pos) + this.editor._tiptapEditor.view.state.doc.resolve(image.pos) )!; this.editor._tiptapEditor.view.dispatch( From 99eef6ecc03c3139684c26d84dbeffa0a5be698e Mon Sep 17 00:00:00 2001 From: Halim Tannous <48407395+halimt92@users.noreply.github.com> Date: Tue, 18 Jun 2024 07:55:24 +0200 Subject: [PATCH 08/10] fix: resolve image url in table --- .../api/nodeConversions/nodeConversions.ts | 5 ---- .../TableBlockContent/TableBlockContent.ts | 27 ++++++------------- 2 files changed, 8 insertions(+), 24 deletions(-) diff --git a/packages/core/src/api/nodeConversions/nodeConversions.ts b/packages/core/src/api/nodeConversions/nodeConversions.ts index ecfaa1a578..43b7cf123a 100644 --- a/packages/core/src/api/nodeConversions/nodeConversions.ts +++ b/packages/core/src/api/nodeConversions/nodeConversions.ts @@ -181,14 +181,12 @@ export function tableContentToNodes< (c: any) => c.type === "tableImage" ) as unknown as { url: string; - caption: string; width: string; styles: any; }; if (isImage) { pNode = schema.nodes["tableImage"].create({ src: isImage.url, - caption: isImage.caption, width: isImage.width, backgroundColor: isImage.styles?.backgroundColor, }); @@ -316,9 +314,6 @@ function contentNodeToTableContent< const imageCell = { type: "tableImage", url: firstChild.attrs.src, - ...(firstChild.attrs.caption - ? { caption: firstChild.attrs.caption } - : {}), ...(firstChild.attrs.width && firstChild.attrs.width !== "default" ? { width: firstChild.attrs.width } : {}), diff --git a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts index 25ae72cd6e..d641f5251b 100644 --- a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts +++ b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts @@ -104,9 +104,6 @@ const TableImage = Node.create({ width: { default: "default", }, - caption: { - default: "", - }, backgroundColor: { default: "default", }, @@ -139,30 +136,22 @@ const TableImage = Node.create({ }, renderHTML({ HTMLAttributes }) { - const div = document.createElement("div"); - div.className = "table-image-container"; + const editor = this.options.editor; const img = document.createElement("img"); img.className = "table-image"; - img.src = HTMLAttributes.src; + editor.resolveFileUrl(HTMLAttributes.src).then((downloadUrl: string) => { + img.src = downloadUrl; + }); + img.contentEditable = "false"; img.draggable = false; - div.contentEditable = "false"; - div.draggable = false; - div.style.backgroundColor = HTMLAttributes.backgroundColor; + img.style.backgroundColor = HTMLAttributes.backgroundColor; if (HTMLAttributes.width && HTMLAttributes.width !== "default") { - div.style.width = HTMLAttributes.width; - } - div.appendChild(img); - - if (HTMLAttributes.caption) { - const p = document.createElement("p"); - p.innerText = HTMLAttributes.caption; - div.appendChild(p); + img.style.width = HTMLAttributes.width; } return { - dom: div, - contentDOM: img, + dom: img, }; }, }); From 78452ebb14412db2c494ac6c549bea7ffc166946 Mon Sep 17 00:00:00 2001 From: Halim Tannous <48407395+halimt92@users.noreply.github.com> Date: Tue, 18 Jun 2024 08:51:56 +0200 Subject: [PATCH 09/10] fix: issue when selecting table image while scanning for legacy container --- .../core/src/extensions/TableHandles/TableHandlesPlugin.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts index af3a4e7703..3a97c62b20 100644 --- a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts +++ b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts @@ -384,8 +384,7 @@ export class TableHandlesView< if (this.state.block.type !== "table") { return; } - - if ((event.target as HTMLElement).closest(".table-image-container")) { + if ((event.target as any).className === "table-image") { const image = this.editor._tiptapEditor.view.posAtCoords({ left: event.clientX, top: event.clientY, From 9239c859f6f583bdbd6edccf5f11badc20437099 Mon Sep 17 00:00:00 2001 From: Halim Tannous <48407395+halimt92@users.noreply.github.com> Date: Tue, 18 Jun 2024 11:29:03 +0200 Subject: [PATCH 10/10] fix: media translation in fr --- packages/core/src/i18n/locales/fr.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/i18n/locales/fr.ts b/packages/core/src/i18n/locales/fr.ts index c4345c6631..ac0f710016 100644 --- a/packages/core/src/i18n/locales/fr.ts +++ b/packages/core/src/i18n/locales/fr.ts @@ -69,7 +69,7 @@ export const fr: Dictionary = { "média", "url", ], - group: "Médias", + group: "Média", }, video: { title: "Vidéo",