feat: support inserting images

demo/src/app/plugins/index.ts

@@ -60,7 +60,7 @@ const getPlugins = (): Plugin[] => {
         ['code', 'blockquote'],
         ['ordered_list', 'bullet_list'],
         [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
-        ['link'],
+        ['link', 'image'],
         [codemirrorMenu]
       ],
       labels: {

src/plugins/menu/index.ts

@@ -11,7 +11,7 @@ const DEFAULT_TOOLBAR: Toolbar = [
   ['code', 'blockquote'],
   ['ordered_list', 'bullet_list'],
   [{ heading: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] }],
-  ['link']
+  ['link', 'image']
 ];
 
 const DEFAULT_LABELS: MenuLabels = {
@@ -22,7 +22,8 @@ const DEFAULT_LABELS: MenuLabels = {
   bullet_list: 'Bullet List',
   heading: 'Heading',
   blockquote: 'Quote',
-  link: 'Link'
+  link: 'Link',
+  image: 'Image'
 };
 
 const DEFAULT_OPTIONS: MenuOptions = {

src/plugins/menu/items/image.ts

@@ -0,0 +1,128 @@
+import { EditorView } from 'prosemirror-view';
+import { toggleMark } from 'prosemirror-commands';
+import { EditorState, NodeSelection } from 'prosemirror-state';
+
+import MenuItem from '../views/base/MenuItem';
+import { MenuItemSpec, MenuItemViewRender } from '../../types';
+
+import Popup from '../views/base/Popup';
+import FormView, { FormInputs, OnSubmitData } from '../views/base/Form';
+
+const getFormInputs = (url = '', alt = '', title = ''): FormInputs => [
+  [
+    {
+      type: 'url',
+      required: true,
+      label: 'URL',
+      name: 'url',
+      defaultValue: url
+    }
+  ],
+  [
+    {
+      type: 'text',
+      required: false,
+      label: 'Alt Text',
+      name: 'altText',
+      defaultValue: alt
+    }
+  ],
+  [
+    {
+      type: 'text',
+      required: false,
+      label: 'Title',
+      name: 'title',
+      defaultValue: title
+    }
+  ]
+];
+
+const updateImage = (view: EditorView, data: OnSubmitData) => {
+  const { dispatch, state: { schema, tr } } = view;
+
+  const attrs = {
+    src: data.url,
+    alt: data.altText ?? '',
+    title: data.title ?? ''
+  };
+
+  dispatch(tr.replaceSelectionWith(schema.nodes.image.createAndFill(attrs)));
+};
+
+const image = (view: EditorView, spec: MenuItemSpec): MenuItemViewRender => {
+  const { dom, update: updateDom } = new MenuItem(spec);
+
+  const onPopupOpen = () => {
+    const { state: { selection } } = view;
+
+    if (selection instanceof NodeSelection) {
+      const { src, alt, title } = selection.node.attrs;
+      renderForm(getFormInputs(src, alt, title));
+    } else {
+      renderForm(getFormInputs());
+    }
+
+    return true;
+  };
+
+  const onPopupClose = () => {
+    return true;
+  };
+
+  const updateActiveState = () => {
+    setActiveState();
+  };
+
+  const popupOptions = {
+    menuDOM: dom,
+    onOpen: onPopupOpen,
+    afterOpen: updateActiveState,
+    onClose: onPopupClose,
+    afterClose: updateActiveState
+  };
+
+  const { dom: popupDOM, closePopup, isPopupOpen } = new Popup(popupOptions);
+
+  const onSubmit = (data: OnSubmitData) => {
+    updateImage(view, data);
+    closePopup();
+  };
+
+  const { dom: formDom, render: renderForm } = new FormView({ inputs: getFormInputs(), onSubmit });
+
+  popupDOM.appendChild(formDom);
+  dom.appendChild(popupDOM);
+
+  const setActiveState = () => {
+    updateDom({
+      active: isPopupOpen(),
+      disabled: false
+    });
+  };
+
+  const update = (state: EditorState) => {
+    const { schema, selection } = state;
+
+    const command = toggleMark(schema.nodes.image);
+    const canExecute = command(state, null);
+
+    let isActive = false;
+
+    if (selection instanceof NodeSelection) {
+      isActive = selection.node.type.name === 'image';
+    }
+
+    updateDom({
+      active: isPopupOpen() || isActive,
+      disabled: !canExecute
+    });
+  };
+
+  return {
+    dom,
+    update
+  };
+};
+
+export default image;

src/plugins/menu/items/link.ts

@@ -10,7 +10,7 @@ import { MenuItemSpec, MenuItemViewRender } from '../../types';
 import Popup from '../views/base/Popup';
 import FormView, { FormInputs, OnSubmitData } from '../views/base/Form';
 
-const getFormInputs = (defaultValue = '', disableText = false): FormInputs => [
+const getFormInputs = (text = '', disableText = false): FormInputs => [
   [
     {
       type: 'url',
@@ -25,7 +25,7 @@ const getFormInputs = (defaultValue = '', disableText = false): FormInputs => [
       required: true,
       label: 'Text',
       name: 'text',
-      defaultValue,
+      defaultValue: text,
       disabled: disableText
     }
   ],
@@ -118,11 +118,11 @@ const link = (view: EditorView, spec: MenuItemSpec): MenuItemViewRender => {
     });
   };
 
-  const update = (editorState: EditorState) => {
-    const { schema } = editorState;
+  const update = (state: EditorState) => {
+    const { schema } = state;
     const command = toggleMark(schema.marks.link);
-    const canExecute = command(editorState, null);
-    const isActive = isMarkActive(editorState, schema.marks.link);
+    const canExecute = command(state, null);
+    const isActive = isMarkActive(state, schema.marks.link);
 
     toggleIcon(isActive);
 

src/plugins/menu/menu.ts

@@ -20,14 +20,16 @@ import DropDownView from './views/Dropdown';
 
 import getSeperator from './items/seperator';
 import link from './items/link';
+import image from './items/image';
 
 import menuItemsMeta from './meta';
 
 const DROPDOWN_ITEMS = new Map();
 DROPDOWN_ITEMS.set('heading', ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
 
 const builtInMenuItems = {
-  link
+  link,
+  image
 };
 
 export const renderMenu = (options: MenuOptions, editorView: EditorView, menuDom: HTMLElement) => {

src/plugins/menu/meta.ts

@@ -100,6 +100,12 @@ const menuItemsMeta: { [key: string]: MenuItemMeta } = {
     icon: 'link',
     type: 'mark',
     toggleIcon: 'unlink'
+  },
+  image: {
+    key: 'image',
+    i18nKey: 'image',
+    icon: 'image',
+    type: 'node'
   }
 };
 

src/plugins/types.ts

@@ -5,7 +5,7 @@ import { EditorView } from 'prosemirror-view';
 type TCR = { dom: HTMLElement, update: (state: EditorState) => void };
 
 type TBHeading = Array<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
-type TBItems = 'bold' | 'italic' | 'code' | 'blockquote' | 'ordered_list' | 'bullet_list' | 'link';
+type TBItems = 'bold' | 'italic' | 'code' | 'blockquote' | 'ordered_list' | 'bullet_list' | 'link' | 'image';
 
 export type ToolbarDropdown = { heading?: TBHeading };
 export type ToolbarBuiltInMenuItem = (editorView: EditorView, spec: MenuItemSpec) => TCR;

src/plugins/utils/icons/image.ts

@@ -0,0 +1,4 @@
+export default `
+<path d="M0 0h24v24H0z" fill="none"/>
+<path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
+`;

src/plugins/utils/icons/index.ts

@@ -8,6 +8,7 @@ import bulletList from './bullet_list';
 import quote from './quote';
 import link from './link';
 import unlink from './unlink';
+import image from './image';
 
 const DEFAULT_ICON_HEIGHT = 20;
 const DEFAULT_ICON_WIDTH = 20;
@@ -20,7 +21,8 @@ const icons = {
   bullet_list: bulletList,
   quote,
   link,
-  unlink
+  unlink,
+  image
 };
 
 // Helper function to create menu icons