diff --git a/shared/editor/components/Styles.ts b/shared/editor/components/Styles.ts index 6283408e1..b8a2342df 100644 --- a/shared/editor/components/Styles.ts +++ b/shared/editor/components/Styles.ts @@ -1222,6 +1222,10 @@ table { min-width: 100px; } + td .component-embed { + padding: 4px 0; + } + .selectedCell { background: ${ props.readOnly ? "inherit" : props.theme.tableSelectedBackground diff --git a/shared/editor/embeds/Trello.tsx b/shared/editor/embeds/Trello.tsx index 9e2df38a7..541cf3d8c 100644 --- a/shared/editor/embeds/Trello.tsx +++ b/shared/editor/embeds/Trello.tsx @@ -10,7 +10,7 @@ function Trello(props: Props) { return ( diff --git a/shared/editor/extensions/PasteHandler.ts b/shared/editor/extensions/PasteHandler.ts index 9ee38409a..a4da81a1c 100644 --- a/shared/editor/extensions/PasteHandler.ts +++ b/shared/editor/extensions/PasteHandler.ts @@ -1,7 +1,6 @@ import { toggleMark } from "prosemirror-commands"; import { Slice } from "prosemirror-model"; import { Plugin } from "prosemirror-state"; -import { isInTable } from "prosemirror-tables"; import { isUrl } from "../../utils/urls"; import Extension from "../lib/Extension"; import isMarkdown from "../lib/isMarkdown"; @@ -89,7 +88,6 @@ export default class PasteHandler extends Extension { if ( embeds && this.editor.commands.embed && - !isInTable(state) && !isInCode(state) && !isInList(state) ) { diff --git a/shared/editor/lib/markdown/serializer.ts b/shared/editor/lib/markdown/serializer.ts index 64bf3aa61..635d39113 100644 --- a/shared/editor/lib/markdown/serializer.ts +++ b/shared/editor/lib/markdown/serializer.ts @@ -366,16 +366,20 @@ export class MarkdownSerializerState { row.forEach((cell, _, j) => { this.out += j === 0 ? "| " : " | "; - cell.forEach((para) => { + cell.forEach((node) => { // just padding the output so that empty cells take up the same space // as headings. // TODO: Ideally we'd calc the longest cell length and use that // to pad all the others. - if (para.textContent === "" && para.content.size === 0) { + if ( + node.textContent === "" && + node.content.size === 0 && + node.type.name === "paragraph" + ) { this.out += " "; } else { this.closed = false; - this.render(para, row, j); + this.render(node, row, j); } }); diff --git a/shared/editor/nodes/Embed.tsx b/shared/editor/nodes/Embed.tsx index 1461ef666..e63ae58b6 100644 --- a/shared/editor/nodes/Embed.tsx +++ b/shared/editor/nodes/Embed.tsx @@ -126,7 +126,9 @@ export default class Embed extends Node { } toMarkdown(state: MarkdownSerializerState, node: ProsemirrorNode) { - state.ensureNewLine(); + if (!state.inTable) { + state.ensureNewLine(); + } state.write( "[" + state.esc(node.attrs.href, false) + @@ -134,7 +136,9 @@ export default class Embed extends Node { state.esc(node.attrs.href, false) + ")" ); - state.write("\n\n"); + if (!state.inTable) { + state.write("\n\n"); + } } parseMarkdown() { diff --git a/shared/editor/nodes/TableCell.ts b/shared/editor/nodes/TableCell.ts index cd487535e..271ed3ec9 100644 --- a/shared/editor/nodes/TableCell.ts +++ b/shared/editor/nodes/TableCell.ts @@ -18,7 +18,7 @@ export default class TableCell extends Node { get schema(): NodeSpec { return { - content: "paragraph+", + content: "(paragraph | embed)+", tableRole: "cell", isolating: true, parseDOM: [{ tag: "td" }], diff --git a/shared/editor/nodes/TableHeadCell.ts b/shared/editor/nodes/TableHeadCell.ts index ae3de5b4f..56cb1a719 100644 --- a/shared/editor/nodes/TableHeadCell.ts +++ b/shared/editor/nodes/TableHeadCell.ts @@ -16,7 +16,7 @@ export default class TableHeadCell extends Node { get schema(): NodeSpec { return { - content: "paragraph+", + content: "(paragraph | embed)+", tableRole: "header_cell", isolating: true, parseDOM: [{ tag: "th" }], diff --git a/shared/editor/rules/embeds.ts b/shared/editor/rules/embeds.ts index 79ebc5b63..8ebce8b41 100644 --- a/shared/editor/rules/embeds.ts +++ b/shared/editor/rules/embeds.ts @@ -3,11 +3,7 @@ import Token from "markdown-it/lib/token"; import { EmbedDescriptor } from "../embeds"; function isParagraph(token: Token) { - return token.type === "paragraph_open"; -} - -function isInline(token: Token) { - return token.type === "inline" && token.level === 1; + return token?.type === "paragraph_open"; } function isLinkOpen(token: Token) { @@ -49,8 +45,8 @@ export default function linksToEmbeds(embeds: EmbedDescriptor[]) { let insideLink; for (let i = 0; i < tokens.length - 1; i++) { - // once we find an inline token look through it's children for links - if (isInline(tokens[i]) && isParagraph(tokens[i - 1])) { + // once we find a paragraph, look through it's children for links + if (isParagraph(tokens[i - 1])) { const tokenChildren = tokens[i].children || []; for (let j = 0; j < tokenChildren.length - 1; j++) {