diff --git a/packages/editor/core/src/styles/editor.css b/packages/editor/core/src/styles/editor.css index ab03127898..86822664b4 100644 --- a/packages/editor/core/src/styles/editor.css +++ b/packages/editor/core/src/styles/editor.css @@ -23,6 +23,8 @@ /* Custom image styles */ .ProseMirror img { transition: filter 0.1s ease-in-out; + margin-top: 0 !important; + margin-bottom: 0 !important; &:hover { cursor: pointer; @@ -139,6 +141,8 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p { .img-placeholder { position: relative; width: 35%; + margin-top: 0 !important; + margin-bottom: 0 !important; &:before { content: ""; @@ -165,7 +169,8 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p { table { border-collapse: collapse; table-layout: fixed; - margin: 0; + margin: 0.5em 0 0.5em 0; + border: 1px solid rgb(var(--color-border-200)); width: 100%; diff --git a/packages/editor/core/src/ui/plugins/upload-image.tsx b/packages/editor/core/src/ui/plugins/upload-image.tsx index 323f3834ad..738653d713 100644 --- a/packages/editor/core/src/ui/plugins/upload-image.tsx +++ b/packages/editor/core/src/ui/plugins/upload-image.tsx @@ -43,7 +43,7 @@ export const UploadImagesPlugin = (cancelUploadImage?: () => any) => cancelButton.appendChild(svgElement); placeholder.appendChild(cancelButton); - const deco = Decoration.widget(pos + 1, placeholder, { + const deco = Decoration.widget(pos, placeholder, { id, }); set = set.add(tr.doc, [deco]); @@ -131,7 +131,8 @@ export async function startImageUpload( const imageSrc = typeof src === "object" ? reader.result : src; const node = schema.nodes.image.create({ src: imageSrc }); - const transaction = view.state.tr.replaceWith(pos, pos, node).setMeta(uploadKey, { remove: { id } }); + const transaction = view.state.tr.insert(pos - 1, node).setMeta(uploadKey, { remove: { id } }); + view.dispatch(transaction); } catch (error) { console.error("Upload error: ", error); diff --git a/packages/editor/extensions/src/extensions/slash-commands.tsx b/packages/editor/extensions/src/extensions/slash-commands.tsx index 4b12494b2d..b653ab2690 100644 --- a/packages/editor/extensions/src/extensions/slash-commands.tsx +++ b/packages/editor/extensions/src/extensions/slash-commands.tsx @@ -1,6 +1,6 @@ import { useState, useEffect, useCallback, ReactNode, useRef, useLayoutEffect } from "react"; import { Editor, Range, Extension } from "@tiptap/core"; -import Suggestion from "@tiptap/suggestion"; +import Suggestion, { SuggestionOptions } from "@tiptap/suggestion"; import { ReactRenderer } from "@tiptap/react"; import tippy from "tippy.js"; import { @@ -40,7 +40,11 @@ interface CommandItemProps { icon: ReactNode; } -const Command = Extension.create({ +export type SlashCommandOptions = { + suggestion: Omit; +}; + +const Command = Extension.create({ name: "slash-command", addOptions() { return { @@ -49,6 +53,10 @@ const Command = Extension.create({ command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => { props.command({ editor, range }); }, + allow({ editor }: { editor: Editor }) { + return !editor.isActive("table"); + }, + allowSpaces: true, }, }; }, @@ -56,9 +64,6 @@ const Command = Extension.create({ return [ Suggestion({ editor: this.editor, - allow({ editor }) { - return !editor.isActive("table"); - }, ...this.options.suggestion, }), ]; @@ -175,7 +180,7 @@ const getSuggestionItems = key: "image", title: "Image", description: "Upload an image from your computer.", - searchTerms: ["photo", "picture", "media"], + searchTerms: ["img", "photo", "picture", "media"], icon: , command: ({ editor, range }: CommandProps) => { insertImageCommand(editor, uploadFile, setIsSubmitting, range);