[fix] Image insertion position at cursor position and Updated placeholder text. (#3224)

* Fix position bug in the UploadImagesPlugin widget decoration and adjust transaction to correctly insert image node and set meta data for image removal.

* Update CSS styles in editor.css to remove margin top and bottom on images and img placeholders and adjust the margin on the table in the editor container.

* Better typescript support for images extension.

Update the `Command` extension in `slash-commands.tsx` to include a `SlashCommandOptions` type for better TS support and allow spaces in the suggestion options and modify the `image` suggestion's search terms to include "img" in addition to "photo", "picture", and "media".

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<SuggestionOptions, "editor">;
+};
+
+const Command = Extension.create<SlashCommandOptions>({
   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: <ImageIcon className="h-3.5 w-3.5" />,
         command: ({ editor, range }: CommandProps) => {
           insertImageCommand(editor, uploadFile, setIsSubmitting, range);