feat: add image support

example/src/Examples/Basic.tsx

@@ -10,6 +10,7 @@ import {
 import {
   ColorBridge,
   HighlightBridge,
+  ImageBridge,
   LinkBridge,
   RichText,
   TaskListBridge,
@@ -34,9 +35,11 @@ const exampleStyles = StyleSheet.create({
 
 export const Basic = ({}: NativeStackScreenProps<any, any, any>) => {
   const editor = useEditor({
+    initialContent: `<p>This is a basic example of implementing images. Drag to re-order.</p><img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />`,
     plugins: [
       TenTapStartKit,
       UnderlineBridge,
+      ImageBridge,
       TaskListBridge,
       LinkBridge,
       ColorBridge,

package.json

@@ -178,6 +178,7 @@
   "dependencies": {
     "@tiptap/extension-color": "^2.1.16",
     "@tiptap/extension-highlight": "^2.1.16",
+    "@tiptap/extension-image": "^2.2.1",
     "@tiptap/extension-link": "^2.1.16",
     "@tiptap/extension-task-item": "^2.1.16",
     "@tiptap/extension-task-list": "^2.1.16",

src/Editor/Tiptap.tsx

@@ -16,12 +16,14 @@ import { LinkBridge } from './plugins/link';
 import { ColorBridge } from './plugins/color';
 import { HighlightBridge } from './plugins/highlight';
 import { CoreBridge } from './plugins/core';
+import { ImageBridge } from './plugins/image';
 // import { blueBackgroundPlugin } from './plugins/HighlightSelection';
 
 const tenTapExtensions = [
   // blueBackgroundPlugin,
   TenTapStartKit,
   UnderlineBridge,
+  ImageBridge,
   TaskListBridge,
   LinkBridge,
   ColorBridge,

src/Editor/plugins/image.ts

@@ -0,0 +1,59 @@
+import Image from '@tiptap/extension-image';
+import TenTapBridge from './base';
+
+type ImageEditorState = {};
+
+type ImageEditorInstance = {
+  setImage: (src: string) => void;
+};
+
+declare module '../../types/EditorState' {
+  interface EditorState extends ImageEditorState {}
+  interface EditorInstance extends ImageEditorInstance {}
+}
+
+export enum ImageEditorActionType {
+  SetImage = 'set-image',
+}
+
+type ImageMessage = {
+  type: ImageEditorActionType.SetImage;
+  payload: string;
+};
+
+export const ImageBridge = new TenTapBridge<
+  ImageEditorState,
+  ImageEditorInstance,
+  ImageMessage
+>({
+  tiptapExtension: Image,
+  onBridgeMessage: (editor, message) => {
+    if (message.type === ImageEditorActionType.SetImage) {
+      editor.chain().focus().setImage({ src: message.payload }).run();
+    }
+
+    return false;
+  },
+  extendEditorInstance: (sendBridgeMessage) => {
+    return {
+      setImage: (src: string) =>
+        sendBridgeMessage({
+          type: ImageEditorActionType.SetImage,
+          payload: src,
+        }),
+    };
+  },
+  extendEditorState: () => {
+    return {};
+  },
+  extendCSS: `
+  img {
+    height: auto;
+    max-width: 100%;
+  }
+
+  img &.ProseMirror-selectednode {
+    outline: 3px solid #68cef8;
+  }
+  `,
+});

src/index.tsx

@@ -8,5 +8,6 @@ export * from './Editor/plugins/link';
 export * from './Editor/plugins/color';
 export * from './Editor/plugins/highlight';
 export * from './Editor/plugins/core';
+export * from './Editor/plugins/image';
 export * from './types';
 export * from './utils';

yarn.lock

@@ -3668,6 +3668,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tiptap/extension-image@npm:^2.2.1":
+  version: 2.2.1
+  resolution: "@tiptap/extension-image@npm:2.2.1"
+  peerDependencies:
+    "@tiptap/core": ^2.0.0
+  checksum: 9c8b6693298807145c6188fe66580ccefeccb69510963e5e430698647d603e2db3268473ef73414d9e06d3d0645a479494d7c46166d8e8d87ec542cba5352b21
+  languageName: node
+  linkType: hard
+
 "@tiptap/extension-italic@npm:^2.1.16":
   version: 2.1.16
   resolution: "@tiptap/extension-italic@npm:2.1.16"
@@ -13573,6 +13582,7 @@ __metadata:
     "@release-it/conventional-changelog": ^5.0.0
     "@tiptap/extension-color": ^2.1.16
     "@tiptap/extension-highlight": ^2.1.16
+    "@tiptap/extension-image": ^2.2.1
     "@tiptap/extension-link": ^2.1.16
     "@tiptap/extension-task-item": ^2.1.16
     "@tiptap/extension-task-list": ^2.1.16