@dxos/react-ui-editor 0.4.8-main.8cb190e → 0.4.8-main.932d824

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-editor",
-  "version": "0.4.8-main.8cb190e",
+  "version": "0.4.8-main.932d824",
   "description": "Document editing experience within a DXOS shell.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,21 +36,22 @@
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
+    "react-dropzone": "^14.2.3",
     "style-mod": "^4.1.0",
-    "@dxos/async": "0.4.8-main.8cb190e",
-    "@dxos/automerge": "0.4.8-main.8cb190e",
-    "@dxos/debug": "0.4.8-main.8cb190e",
-    "@dxos/context": "0.4.8-main.8cb190e",
-    "@dxos/display-name": "0.4.8-main.8cb190e",
-    "@dxos/echo-schema": "0.4.8-main.8cb190e",
-    "@dxos/log": "0.4.8-main.8cb190e",
-    "@dxos/invariant": "0.4.8-main.8cb190e",
-    "@dxos/protocols": "0.4.8-main.8cb190e",
-    "@dxos/react-async": "0.4.8-main.8cb190e",
-    "@dxos/react-ui": "0.4.8-main.8cb190e",
-    "@dxos/react-ui-theme": "0.4.8-main.8cb190e",
-    "@dxos/util": "0.4.8-main.8cb190e",
-    "@dxos/text-model": "0.4.8-main.8cb190e"
+    "@dxos/async": "0.4.8-main.932d824",
+    "@dxos/context": "0.4.8-main.932d824",
+    "@dxos/automerge": "0.4.8-main.932d824",
+    "@dxos/echo-schema": "0.4.8-main.932d824",
+    "@dxos/display-name": "0.4.8-main.932d824",
+    "@dxos/invariant": "0.4.8-main.932d824",
+    "@dxos/debug": "0.4.8-main.932d824",
+    "@dxos/protocols": "0.4.8-main.932d824",
+    "@dxos/log": "0.4.8-main.932d824",
+    "@dxos/react-async": "0.4.8-main.932d824",
+    "@dxos/react-ui": "0.4.8-main.932d824",
+    "@dxos/react-ui-theme": "0.4.8-main.932d824",
+    "@dxos/text-model": "0.4.8-main.932d824",
+    "@dxos/util": "0.4.8-main.932d824"
   },
   "devDependencies": {
     "@automerge/automerge-repo-network-broadcastchannel": "^1.1.1",
@@ -77,20 +78,20 @@
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^1.3.1",
-    "@dxos/echo-signals": "0.4.8-main.8cb190e",
-    "@dxos/config": "0.4.8-main.8cb190e",
-    "@dxos/echo-typegen": "0.4.8-main.8cb190e",
-    "@dxos/keyboard": "0.4.8-main.8cb190e",
-    "@dxos/random": "0.4.8-main.8cb190e",
-    "@dxos/react-ui": "0.4.8-main.8cb190e",
-    "@dxos/storybook-utils": "0.4.8-main.8cb190e",
-    "@dxos/react-client": "0.4.8-main.8cb190e"
+    "@dxos/config": "0.4.8-main.932d824",
+    "@dxos/echo-signals": "0.4.8-main.932d824",
+    "@dxos/echo-typegen": "0.4.8-main.932d824",
+    "@dxos/keyboard": "0.4.8-main.932d824",
+    "@dxos/random": "0.4.8-main.932d824",
+    "@dxos/react-ui": "0.4.8-main.932d824",
+    "@dxos/storybook-utils": "0.4.8-main.932d824",
+    "@dxos/react-client": "0.4.8-main.932d824"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@dxos/react-client": "0.4.8-main.8cb190e"
+    "@dxos/react-client": "0.4.8-main.932d824"
   },
   "publishConfig": {
     "access": "public"

package/src/components/TextEditor/TextEditor.stories.tsx

@@ -20,6 +20,7 @@ import { withTheme } from '@dxos/storybook-utils';
 
 import { TextEditor, type TextEditorProps } from './TextEditor';
 import {
+  EditorModes,
   annotations,
   autocomplete,
   blast,
@@ -37,14 +38,15 @@ import {
   linkTooltip,
   listener,
   mention,
-  useComments,
+  state,
   table,
   typewriter,
-  EditorModes,
+  useComments,
   type CommandAction,
   type CommandOptions,
   type Comment,
   type CommentsOptions,
+  type SelectionState,
 } from '../../extensions';
 import { useDocAccessor } from '../../hooks';
 import translations from '../../translations';
@@ -241,7 +243,7 @@ type StoryProps = {
 } & Pick<TextEditorProps, 'extensions'>;
 
 const Story = ({
-  id = 'test',
+  id = 'editor-' + PublicKey.random().toHex().slice(0, 8),
   text,
   comments,
   extensions: _extensions = [],
@@ -325,8 +327,18 @@ export const Empty = {
   render: () => <Story />,
 };
 
+const global = new Map<string, SelectionState>();
+
 export const Scrolling = {
-  render: () => <Story text={str('# Large Document', '', large)} />,
+  render: () => (
+    <Story
+      text={str('# Large Document', '', large)}
+      extensions={state({
+        setState: (id, state) => global.set(id, state),
+        getState: (id) => global.get(id),
+      })}
+    />
+  ),
 };
 
 export const ScrollingWithImages = {

package/src/components/TextEditor/TextEditor.tsx

@@ -18,7 +18,7 @@ import React, {
 import { log } from '@dxos/log';
 import { isNotFalsy } from '@dxos/util';
 
-import { documentId, editorMode } from '../../extensions';
+import { documentId, editorMode, focusEvent } from '../../extensions';
 import { logChanges } from '../../util';
 
 export type CursorInfo = {
@@ -34,7 +34,7 @@ export type TextEditorProps = Pick<EditorStateConfig, 'doc' | 'selection' | 'ext
   id?: string;
   className?: string;
   autoFocus?: boolean;
-  scrollTo?: StateEffect<any>; // TODO(burdon): Restore scroll position: scrollTo EditorView.scrollSnapshot().
+  scrollTo?: StateEffect<unknown>;
   moveToEndOfLine?: boolean;
   debug?: boolean;
   dataTestId?: string;
@@ -56,14 +56,14 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
       extensions,
       className,
       autoFocus,
-      scrollTo = EditorView.scrollIntoView(0),
+      scrollTo = EditorView.scrollIntoView(0, { yMargin: 0 }),
       moveToEndOfLine,
       debug,
       dataTestId,
     },
     forwardedRef,
   ) => {
-    // TODO(burdon): Increments by 2!
+    // NOTE: Increments by 2 in strict mode.
     const [instanceId] = useState(() => `text-editor-${++instanceCount}`);
 
     // TODO(burdon): Make tabster optional.
@@ -104,7 +104,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
           // Focus.
           EditorView.updateListener.of((update) => {
             update.transactions.forEach((transaction) => {
-              if (transaction.isUserEvent('focus.container')) {
+              if (transaction.isUserEvent(focusEvent)) {
                 rootRef.current?.focus();
               }
             });
@@ -122,6 +122,7 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
         state,
         parent: rootRef.current!,
         scrollTo,
+
         // NOTE: Uncomment to debug/monitor all transactions.
         // https://codemirror.net/docs/ref/#view.EditorView.dispatch
         dispatchTransactions: (trs, view) => {
@@ -132,12 +133,10 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
         },
       });
 
-      setView(view);
-
-      // Position cursor at end of line.
-      if (moveToEndOfLine) {
+      // Position cursor at end of first line.
+      if (moveToEndOfLine && !(scrollTo || selection)) {
         const { to } = view.state.doc.lineAt(0);
-        view?.dispatch({ selection: { anchor: to } });
+        view.dispatch({ selection: { anchor: to } });
       }
 
       // Remove tabster attribute (rely on custom keymap).
@@ -145,6 +144,8 @@ export const TextEditor = forwardRef<EditorView | null, TextEditorProps>(
         rootRef.current?.removeAttribute('data-tabster');
       }
 
+      setView(view);
+
       return () => {
         view?.destroy();
         setView(null);

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -73,10 +73,11 @@ const Story: FC<{ content: string }> = ({ content }) => {
     <div role='none' className='fixed inset-0 flex flex-col'>
       <Toolbar.Root onAction={handleAction} state={formattingState} classNames={textBlockWidth}>
         <Toolbar.Markdown />
+        <Toolbar.Custom onUpload={async (file) => ({ url: file.name })} />
         <Toolbar.Separator />
-        <Toolbar.Extended />
+        <Toolbar.Actions />
       </Toolbar.Root>
-      <div role='textbox' ref={parentRef} className={textBlockWidth} />;
+      <div ref={parentRef} className={textBlockWidth} />
     </div>
   );
 };

package/src/components/Toolbar/Toolbar.tsx

@@ -7,6 +7,7 @@ import {
   ChatText,
   Code,
   CodeBlock,
+  Image,
   Link,
   ListBullets,
   ListChecks,
@@ -25,7 +26,8 @@ import {
   Quotes,
 } from '@phosphor-icons/react';
 import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useRef, useState } from 'react';
+import React, { type PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
 
 import {
   DensityProvider,
@@ -34,7 +36,8 @@ import {
   type ThemedClassName,
   Toolbar as NaturalToolbar,
   Tooltip,
-  type ToolbarToggleGroupItemProps,
+  type ToolbarToggleGroupItemProps as NaturalToolbarToggleGroupItemProps,
+  type ToolbarButtonProps as NaturalToolbarButtonProps,
   useTranslation,
 } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
@@ -111,9 +114,9 @@ type ButtonProps = {
   disabled?: (state: Formatting) => boolean;
 };
 
-type ToolbarButtonProps = ToolbarToggleGroupItemProps & { Icon: Icon };
+type ToolbarToggleButtonProps = NaturalToolbarToggleGroupItemProps & { Icon: Icon };
 
-const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
+const ToolbarToggleButton = ({ Icon, children, ...props }: ToolbarToggleButtonProps) => {
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
@@ -132,6 +135,27 @@ const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
   );
 };
 
+type ToolbarButtonProps = NaturalToolbarButtonProps & { Icon: Icon };
+
+const ToolbarButton = ({ Icon, children, ...props }: ToolbarButtonProps) => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <NaturalToolbar.Button variant='ghost' {...props} classNames={buttonStyles}>
+          <Icon className={iconStyles} />
+          <span className='sr-only'>{children}</span>
+        </NaturalToolbar.Button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content {...tooltipProps}>
+          {children}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
 const ToolbarSeparator = () => <div role='separator' className='grow' />;
 
 const MarkdownHeading = () => {
@@ -227,7 +251,7 @@ const MarkdownStyles = () => {
       value={markdownStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)}
     >
       {markdownStyles.map(({ type, getState, Icon }) => (
-        <ToolbarButton
+        <ToolbarToggleButton
           key={type}
           value={type}
           Icon={Icon}
@@ -235,7 +259,7 @@ const MarkdownStyles = () => {
           onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
         >
           {t(`${type} label`)}
-        </ToolbarButton>
+        </ToolbarToggleButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
@@ -253,14 +277,14 @@ const MarkdownLists = () => {
   return (
     <NaturalToolbar.ToggleGroup type='single' value={state?.listStyle ? `list-${state.listStyle}` : ''}>
       {markdownLists.map(({ type, getState, Icon }) => (
-        <ToolbarButton
+        <ToolbarToggleButton
           key={type}
           value={type}
           Icon={Icon}
           onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
         >
           {t(`${type} label`)}
-        </ToolbarButton>
+        </ToolbarToggleButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
@@ -292,7 +316,7 @@ const MarkdownBlocks = () => {
   return (
     <NaturalToolbar.ToggleGroup type='single' value={value?.type ?? ''}>
       {markdownBlocks.map(({ type, disabled, getState, Icon }) => (
-        <ToolbarButton
+        <ToolbarToggleButton
           key={type}
           value={type}
           Icon={Icon}
@@ -300,7 +324,7 @@ const MarkdownBlocks = () => {
           onClick={state ? () => onAction?.({ type, data: !getState(state) }) : undefined}
         >
           {t(`${type} label`)}
-        </ToolbarButton>
+        </ToolbarToggleButton>
       ))}
     </NaturalToolbar.ToggleGroup>
   );
@@ -315,38 +339,68 @@ const MarkdownStandard = () => (
   </>
 );
 
-const MarkdownExtended = () => {
+// TODO(burdon): Make extensible.
+export type MarkdownCustomOptions = {
+  onUpload?: (file: File) => Promise<{ url?: string }>;
+};
+
+const MarkdownCustom = ({ onUpload }: MarkdownCustomOptions = {}) => {
   const { onAction } = useToolbarContext('MarkdownStyles');
   const { t } = useTranslation(translationKey);
+  // https://react-dropzone.js.org/#src
+  const { acceptedFiles, getInputProps, open } = useDropzone({
+    multiple: false,
+    noDrag: true,
+    accept: {
+      'image/*': ['.jpg', '.jpeg', '.png', '.gif'],
+    },
+  });
+  useEffect(() => {
+    if (onUpload && acceptedFiles.length) {
+      setTimeout(async () => {
+        // NOTE: Clone file since react-dropzone patches in a non-standard `path` property, which confuses IPFS.
+        const f = acceptedFiles[0];
+        const file = new File([f], f.name, {
+          type: f.type,
+          lastModified: f.lastModified,
+        });
+
+        const { url } = await onUpload(file);
+        if (url) {
+          onAction?.({ type: 'image', data: url });
+        }
+      });
+    }
+  }, [acceptedFiles]);
+
   return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <NaturalToolbar.Button
-          variant='ghost'
-          data-testid='editor.toolbar.comment'
-          onClick={() => onAction?.({ type: 'comment' })}
-          classNames={buttonStyles}
-        >
-          <ChatText className={iconStyles} />
-          <span className='sr-only'>{t('comment label')}</span>
-        </NaturalToolbar.Button>
-      </Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content {...tooltipProps}>
-          {t('comment label')}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+    <>
+      <input {...getInputProps()} />
+      <ToolbarButton value='image' Icon={Image} onClick={() => open()}>
+        {t('image label')}
+      </ToolbarButton>
+    </>
+  );
+};
+
+// TODO(burdon): Make extensible.
+const MarkdownActions = () => {
+  const { onAction } = useToolbarContext('MarkdownStyles');
+  const { t } = useTranslation(translationKey);
+  return (
+    <ToolbarButton value='comment' Icon={ChatText} onClick={() => onAction?.({ type: 'comment' })}>
+      {t('comment label')}
+    </ToolbarButton>
   );
 };
 
 export const Toolbar = {
   Root: ToolbarRoot,
-  Button: ToolbarButton,
+  Button: ToolbarToggleButton,
   Separator: ToolbarSeparator,
   Markdown: MarkdownStandard,
-  Extended: MarkdownExtended,
+  Custom: MarkdownCustom,
+  Actions: MarkdownActions,
 };
 
 export { useToolbarContext };

package/src/extensions/index.ts

@@ -18,5 +18,6 @@ export * from './listener';
 export * from './markdown';
 export * from './mention';
 export * from './modes';
+export * from './state';
 export * from './types';
 export * from './typewriter';

package/src/extensions/markdown/formatting.test.ts

@@ -9,20 +9,20 @@ import { expect } from 'chai';
 import { describe, test } from '@dxos/test';
 
 import {
-  setHeading,
+  addBlockquote,
+  addCodeblock,
+  addLink,
+  addList,
   addStyle,
+  getFormatting,
   removeStyle,
-  addLink,
   removeLink,
-  addList,
   removeList,
-  addBlockquote,
   removeBlockquote,
-  addCodeblock,
   removeCodeblock,
+  setHeading,
   Inline,
   List,
-  getFormatting,
   type Formatting,
 } from './formatting';
 
@@ -204,22 +204,22 @@ describe('removeStyle', () => {
 });
 
 describe('addLink', () => {
-  testCommand('adds a link', '{}', addLink, '[]({})');
+  testCommand('adds a link', '{}', addLink(), '[]({})');
 
-  testCommand('adds a link around text', 'hello {world}', addLink, 'hello [world]({})');
+  testCommand('adds a link around text', 'hello {world}', addLink(), 'hello [world]({})');
 
-  testCommand('clears existing links', '[hello {world}](foo)', addLink, 'hello [world]({})');
+  testCommand('clears existing links', '[hello {world}](foo)', addLink(), 'hello [world]({})');
 
-  testCommand('does nothing across blocks', '{one\n\ntwo}', addLink, null);
+  testCommand('does nothing across blocks', '{one\n\ntwo}', addLink(), null);
 
-  testCommand('does nothing in code blocks', '```\n{one}\n```', addLink, null);
+  testCommand('does nothing in code blocks', '```\n{one}\n```', addLink(), null);
 
-  testCommand('patches up overlapping styles before', '*foo {bar* baz}', addLink, '*foo* [*bar* baz]({})');
+  testCommand('patches up overlapping styles before', '*foo {bar* baz}', addLink(), '*foo* [*bar* baz]({})');
 
   testCommand(
     'patches up overlapping styles after',
     'one {two ~~three} four~~',
-    addLink,
+    addLink(),
     'one [two ~~three~~]({}) ~~four~~',
   );
 });

package/src/extensions/markdown/formatting.ts

@@ -470,90 +470,94 @@ export const removeLink: StateCommand = ({ state, dispatch }) => {
 };
 
 // Add link markup around the selection
-export const addLink: StateCommand = ({ state, dispatch }) => {
-  const changes = state.changeByRange((range) => {
-    let { from, to } = range;
-    const cutStyles: SyntaxNode[] = [];
-    let okay: boolean | null = null;
-    // Check whether this range is in a position where a link makes sense
-    syntaxTree(state).iterate({
-      from,
-      to,
-      enter: (node) => {
-        if (Object.hasOwn(Textblocks, node.name)) {
-          // If the selection spans multiple textblocks or is in a
-          // code block, abort
-          okay =
-            Textblocks[node.name] !== 'codeblock' &&
-            from >= blockContentStart(node) &&
-            to <= blockContentEnd(node, state.doc);
-        } else if (Object.hasOwn(InlineMarker, node.name)) {
-          // Look for inline styles that partially overlap the range.
-          // Expand the range over them if they start directly
-          // outside, otherwise mark them for later
-          const sNode = node.node;
-          if (node.from < from && node.to <= to) {
-            if (sNode.firstChild!.to === from) {
-              from = node.from;
-            } else {
-              cutStyles.push(sNode);
-            }
-          } else if (node.from >= from && node.to > to) {
-            if (sNode.lastChild!.from === to) {
-              to = node.to;
-            } else {
-              cutStyles.push(sNode);
+export const addLink =
+  ({ url, image }: { url?: string; image?: boolean } = {}): StateCommand =>
+  ({ state, dispatch }) => {
+    const changes = state.changeByRange((range) => {
+      let { from, to } = range;
+      const cutStyles: SyntaxNode[] = [];
+      let okay: boolean | null = null;
+      // Check whether this range is in a position where a link makes sense.
+      syntaxTree(state).iterate({
+        from,
+        to,
+        enter: (node) => {
+          if (Object.hasOwn(Textblocks, node.name)) {
+            // If the selection spans multiple textblocks or is in a code block, abort.
+            okay =
+              Textblocks[node.name] !== 'codeblock' &&
+              from >= blockContentStart(node) &&
+              to <= blockContentEnd(node, state.doc);
+          } else if (Object.hasOwn(InlineMarker, node.name)) {
+            // Look for inline styles that partially overlap the range.
+            // Expand the range over them if they start directly outside, otherwise mark them for later.
+            const sNode = node.node;
+            if (node.from < from && node.to <= to) {
+              if (sNode.firstChild!.to === from) {
+                from = node.from;
+              } else {
+                cutStyles.push(sNode);
+              }
+            } else if (node.from >= from && node.to > to) {
+              if (sNode.lastChild!.from === to) {
+                to = node.to;
+              } else {
+                cutStyles.push(sNode);
+              }
             }
           }
-        }
-      },
-    });
+        },
+      });
 
-    if (okay === null) {
-      // No textblock found around selection. Check if the rest of the line is empty.
-      const line = state.doc.lineAt(from);
-      okay = to <= line.to && !/\S/.test(line.text.slice(from - line.from));
-    }
-    if (!okay) {
-      return { range };
-    }
+      if (okay === null) {
+        // No textblock found around selection. Check if the rest of the line is empty.
+        const line = state.doc.lineAt(from);
+        okay = to <= line.to && !/\S/.test(line.text.slice(from - line.from));
+      }
+      if (!okay) {
+        return { range };
+      }
 
-    const changes: ChangeSpec[] = [];
-    // Some changes must be moved to end of change array so that they are applied in the right order
-    const changesAfter: ChangeSpec[] = [];
-    // Clear existing links.
-    removeLinkInner(from, to, changesAfter, state);
-    let cursorOffset = 1;
-    // Close and reopen inline styles that partially overlap the range.
-    for (const style of cutStyles) {
-      const type = InlineMarker[style.name];
-      const mark = inlineMarkerText(type);
-      if (style.from < from) {
-        // Extends before.
-        changes.push({ from: skipSpaces(from, state.doc, -1), insert: mark });
-        changesAfter.push({ from: skipSpaces(from, state.doc, 1, to), insert: mark });
-      } else {
-        changes.push({ from: skipSpaces(to, state.doc, -1, from), insert: mark });
-        const after = skipSpaces(to, state.doc, 1);
-        if (after === to) {
-          cursorOffset += mark.length;
+      const changes: ChangeSpec[] = [];
+      // Some changes must be moved to end of change array so that they are applied in the right order
+      const changesAfter: ChangeSpec[] = [];
+      // Clear existing links.
+      removeLinkInner(from, to, changesAfter, state);
+      let cursorOffset = 1;
+      // Close and reopen inline styles that partially overlap the range.
+      for (const style of cutStyles) {
+        const type = InlineMarker[style.name];
+        const mark = inlineMarkerText(type);
+        if (style.from < from) {
+          // Extends before.
+          changes.push({ from: skipSpaces(from, state.doc, -1), insert: mark });
+          changesAfter.push({ from: skipSpaces(from, state.doc, 1, to), insert: mark });
+        } else {
+          changes.push({ from: skipSpaces(to, state.doc, -1, from), insert: mark });
+          const after = skipSpaces(to, state.doc, 1);
+          if (after === to) {
+            cursorOffset += mark.length;
+          }
+          changesAfter.push({ from: after, insert: mark });
         }
-        changesAfter.push({ from: after, insert: mark });
       }
+
+      // Add the link markup.
+      changes.push({ from, insert: image ? '![' : '[' }, { from: to, insert: `](${url ?? ''})` });
+      const changeSet = state.changes(changes.concat(changesAfter));
+      // Put the cursor between the title or parenthesis.
+      return {
+        changes: changeSet,
+        range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset - (url ? url.length + 2 : 0)),
+      };
+    });
+    if (changes.changes.empty) {
+      return false;
     }
-    // Add the link markup.
-    changes.push({ from, insert: '[' }, { from: to, insert: ']()' });
-    const changeSet = state.changes(changes.concat(changesAfter));
-    // Put the cursor between the parenthesis.
-    return { changes: changeSet, range: EditorSelection.cursor(changeSet.mapPos(to, 1) - cursorOffset) };
-  });
-  if (changes.changes.empty) {
-    return false;
-  }
 
-  dispatch(state.update(changes, { userEvent: 'format.link.add', scrollIntoView: true }));
-  return true;
-};
+    dispatch(state.update(changes, { userEvent: 'format.link.add', scrollIntoView: true }));
+    return true;
+  };
 
 //
 // Lists