collabmd 0.1.54 → 0.1.55

package/src/client/bootstrap/canvas-markdown-preview.js

@@ -0,0 +1,87 @@
+import { resolveVaultRelativePath } from '../../domain/vault-paths.js';
+import { resolveWikiTargetPath } from '../../domain/wiki-link-resolver.js';
+import { PreviewRenderer } from '../application/preview-renderer.js';
+import { canvasFilePath } from '../domain/canvas-view.js';
+import { BasesPreviewController } from '../presentation/bases-preview-controller.js';
+import { DrawioEmbedController } from '../presentation/drawio-embed-controller.js';
+import { ExcalidrawEmbedController } from '../presentation/excalidraw-embed-controller.js';
+import { VideoEmbedController } from '../presentation/video-embed-controller.js';
+
+export function createCanvasMarkdownPreview({
+  container, markdownText, sourceFilePath, subpath = '',
+  getFileList, getLocalUser, getTheme, onOpenFile, vaultApiClient,
+}) {
+  const previewElement = document.createElement('div');
+  previewElement.className = 'preview-content canvas-markdown-preview';
+  container.append(previewElement);
+  const options = {
+    getActiveFilePath: () => sourceFilePath,
+    getLocalUser, getTheme, onOpenFile,
+    previewContainer: container.closest('.canvas-card-content'), previewElement, vaultApiClient,
+  };
+  const embeds = [
+    new VideoEmbedController(options), new BasesPreviewController(options),
+    new DrawioEmbedController(options), new ExcalidrawEmbedController(options),
+  ];
+  const syncLayout = () => embeds.forEach((embed) => embed.syncLayout?.());
+  const renderer = new PreviewRenderer({
+    ...options,
+    getContent: () => markdownText,
+    getFileList,
+    getSourceFilePath: () => sourceFilePath,
+    getSubpath: () => subpath,
+    getWikiLinkAutoCreate: () => false,
+    loadFileSource: async (path) => String((await vaultApiClient.readFile(path)).content ?? ''),
+    plantUmlRenderClient: vaultApiClient,
+    onBeforeRenderCommit: () => embeds.forEach((embed) => embed.detachForCommit?.()),
+    onAfterRenderCommit: (_element, stats) => {
+      embeds.forEach((embed) => embed.reconcileEmbeds(previewElement, stats));
+      previewElement.querySelectorAll('[data-task-checkbox]').forEach((input) => { input.disabled = true; });
+    },
+    onPreviewLayoutChange: syncLayout,
+  });
+  const resizeObserver = new ResizeObserver(syncLayout);
+  resizeObserver.observe(previewElement);
+
+  const onClick = (event) => {
+    const link = event.target.closest('a[href]');
+    if (!link) return;
+    const href = link.getAttribute('href') || '';
+    const wikiTarget = link.dataset.wikiTarget;
+    if (wikiTarget) {
+      event.preventDefault();
+      const [target, anchor] = wikiTarget.split('#');
+      const path = resolveWikiTargetPath(target, getFileList());
+      if (path) onOpenFile(path, anchor ? `#${anchor}` : '');
+    } else if (href.startsWith('#')) {
+      event.preventDefault();
+      let anchor;
+      try { anchor = decodeURIComponent(href.slice(1)); } catch { return; }
+      const heading = [...previewElement.querySelectorAll('[id]')].find((entry) => entry.id === anchor);
+      if (heading) heading.scrollIntoView({ block: 'nearest' });
+      else if (!anchor || anchor === 'top') options.previewContainer.scrollTo({ top: 0 });
+      else onOpenFile(sourceFilePath, href);
+    } else if (!/^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(href)) {
+      event.preventDefault();
+      const [target, anchor] = href.split('#');
+      let path;
+      try { path = canvasFilePath(resolveVaultRelativePath(sourceFilePath, decodeURIComponent(target))); } catch { return; }
+      if (path) onOpenFile(path, anchor ? `#${anchor}` : '');
+    }
+  };
+  previewElement.addEventListener('click', onClick);
+  renderer.queueRender();
+  return {
+    applyTheme(theme) {
+      renderer.applyTheme(theme);
+      embeds.forEach((embed) => embed.updateTheme?.(theme));
+    },
+    destroy() {
+      resizeObserver.disconnect();
+      previewElement.removeEventListener('click', onClick);
+      renderer.destroy();
+      embeds.forEach((embed) => embed.destroy());
+      previewElement.remove();
+    },
+  };
+}

package/src/client/bootstrap/collabmd-app-shell.js

@@ -53,6 +53,7 @@ import { FileExplorerController } from '../presentation/file-explorer-controller
 import { FileHistoryViewController } from '../presentation/file-history-view-controller.js';
 import { BasesPreviewController } from '../presentation/bases-preview-controller.js';
 import { DrawioEmbedController } from '../presentation/drawio-embed-controller.js';
+import { CanvasEmbedController } from '../presentation/canvas-embed-controller.js';
 import { ExcalidrawEmbedController } from '../presentation/excalidraw-embed-controller.js';
 import { GitDiffViewController } from '../presentation/git-diff-view-controller.js';
 import { GitPanelController } from '../presentation/git-panel-controller.js';
@@ -122,14 +123,7 @@ export class CollabMdAppShell {
       navigateToGitFilePreview,
       navigateToGitHistory,
     };
-    this.preferences = new BrowserPreferencesPort({
-      fileTreeShowExtensionsKey: 'collabmd-file-tree-show-extensions',
-      lineWrappingKey: 'collabmd-editor-line-wrap',
-      recentFilesKey: 'collabmd-recent-files',
-      vimModeKey: 'collabmd-editor-vim-mode',
-      sidebarVisibleKey: 'collabmd-sidebar-visible',
-      userNameKey: 'collabmd-user-name',
-    });
+    this.preferences = new BrowserPreferencesPort();
     this.notifications = new BrowserNotificationPort();
     this.gitApiClient = gitApiClient;
     this.vaultApiClient = vaultApiClient;
@@ -137,10 +131,7 @@ export class CollabMdAppShell {
     this._hasPromptedForDisplayName = false;
     this._basePreviewRenderTimer = null;
     this._backlinkRefreshTimer = null;
-    this._pendingPreviewLayoutSync = false;
-    this._previewHydrationPaused = false;
     this._previewLayoutResizeObserver = null;
-    this._previewLayoutSyncTimer = null;
     this._reloadPromptShown = false;
     this._staticPreviewDocument = null;
     this.pendingGitResetPath = null;
@@ -277,10 +268,11 @@ export class CollabMdAppShell {
       vaultSwitcher: {
         activeVaultId: getActiveVaultId(this.runtimeConfig),
         vaults: this.runtimeConfig.vaults ?? [],
-        onVaultSelect: (vaultId) => {
+        onVaultSelect: async (vaultId) => {
           if (!vaultId || vaultId === getActiveVaultId(this.runtimeConfig)) {
             return;
           }
+          if (!await this.workspaceRouteController.prepareActiveEmbedDisconnect()) return;
           setActiveVaultId(vaultId);
           const url = new URL(window.location.href);
           url.searchParams.set('vault', vaultId);
@@ -430,6 +422,16 @@ export class CollabMdAppShell {
       }),
       panelElement: this.elements.backlinksPanel,
     });
+    this.canvasEmbed = new CanvasEmbedController({
+      getLocalUser: () => this.lobby.getLocalUser(),
+      getTheme: () => this.themeController.getTheme(),
+      onAwarenessChange: (users) => this.updateFileAwareness(users),
+      onConnectionChange: (state) => this.handleConnectionChange(state),
+      onOpenFile: (filePath, options) => {
+        if (this.fileExplorer.flatFiles.includes(filePath)) this.navigation.navigateToFile(filePath, options);
+      },
+      toastController: this.toastController,
+    });
     this.excalidrawEmbed = new ExcalidrawEmbedController({
       getLocalUser: () => this.lobby.getLocalUser(),
       getTheme: () => this.themeController.getTheme(),
@@ -500,6 +502,7 @@ export class CollabMdAppShell {
     this.workspacePreviewController = new WorkspacePreviewController({
       backlinksPanel: this.backlinksPanel,
       basesPreview: this.basesPreview,
+      canvasEmbed: this.canvasEmbed,
       drawioEmbed: this.drawioEmbed,
       elements: this.elements,
       excalidrawEmbed: this.excalidrawEmbed,
@@ -517,7 +520,6 @@ export class CollabMdAppShell {
       outlineController: this.outlineController,
       pdfPreview: this.pdfPreview,
       previewRenderer: this.previewRenderer,
-      schedulePreviewLayoutSync: (options) => this.schedulePreviewLayoutSync(options),
       scrollSyncController: this.scrollSyncController,
       videoEmbed: this.videoEmbed,
     });
@@ -575,6 +577,7 @@ export class CollabMdAppShell {
       attachEditorScroller: (scroller) => this.scrollSyncController.attachEditorScroller(scroller),
       beginDocumentLoad: () => this.previewRenderer.beginDocumentLoad(),
       cleanupAfterSessionDestroy: () => {
+        this.canvasEmbed.unmount();
         this.scrollSyncController.setLargeDocumentMode(false);
         this.scrollSyncController.invalidatePreviewBlocks();
         this.outlineController.cleanup();
@@ -606,6 +609,7 @@ export class CollabMdAppShell {
       getStoredUserName: () => this.getStoredUserName(),
       getTheme: () => this.themeController.getTheme(),
       isBaseFile: (filePath) => this.isBaseFile(filePath),
+      isCanvasFile: (filePath) => this.isCanvasFile(filePath),
       isDrawioFile: (filePath) => this.isDrawioFile(filePath),
       isExcalidrawFile: (filePath) => this.isExcalidrawFile(filePath),
       isImageFile: (filePath) => this.isImageFile(filePath),
@@ -673,6 +677,7 @@ export class CollabMdAppShell {
       onCommentsChange: (threads) => this.handleCommentThreadsChange(threads),
       onFileAwarenessChange: (users) => this.updateFileAwareness(users),
       onFileOpenError: ({ code } = {}) => {
+        this.currentFilePath = null;
         const notFound = code === 'not-found';
         this.showEditorLoadError(notFound ? 'File not found' : 'Failed to load file');
         this.syncWrapToggle();
@@ -693,6 +698,7 @@ export class CollabMdAppShell {
       },
       onRenderDrawioPreview: (filePath) => this.workspacePreviewController.renderDrawioFilePreview(filePath),
       onRenderBasePreview: (filePath) => this.renderBaseFilePreview(filePath),
+      onRenderCanvasPreview: (filePath) => this.workspacePreviewController.renderCanvasFilePreview(filePath),
       onRenderExcalidrawPreview: (filePath) => this.workspacePreviewController.renderExcalidrawFilePreview(filePath),
       onRenderHtmlPreview: (options) => this.workspacePreviewController.renderHtmlFilePreview(options),
       onRenderImagePreview: (filePath) => this.workspacePreviewController.renderImageFilePreview(filePath),
@@ -725,6 +731,7 @@ export class CollabMdAppShell {
     });
     this.workspaceRouteController = new WorkspaceRouteController({
       backlinksPanel: this.backlinksPanel,
+      canvasEmbed: this.canvasEmbed,
       clearInitialFileBootstrap: () => this.clearInitialFileBootstrap(),
       clearStaticPreviewDocument: () => this.clearStaticPreviewDocument(),
       closeSidebarOnMobile: () => this.closeSidebarOnMobile(),
@@ -776,6 +783,14 @@ export class CollabMdAppShell {
 
   }
 
+  get currentFilePath() { return this._currentFilePath; }
+  set currentFilePath(value) {
+    this._currentFilePath = value;
+    document.title = value
+      ? `${this.getDisplayName(value)} — CollabMD`
+      : 'CollabMD — Collaborative Markdown Vault';
+  }
+
   get session() { return this._session; }
   set session(value) {
     this._session = value;

package/src/client/canvas-editor.js

@@ -0,0 +1,143 @@
+import {
+  CANVAS_NODES_KEY,
+  addCanvasNode, addCanvasEdge, updateCanvasNode, updateCanvasEdge,
+  deleteCanvasNodes, deleteCanvasEdges, reorderCanvasNode, resolveCanvasExternalConflict,
+} from '../domain/canvas-room-codec.js';
+import { createRandomUser } from './domain/room.js';
+import { createCanvasMarkdownPreview } from './bootstrap/canvas-markdown-preview.js';
+import { canvasFilePath } from './domain/canvas-view.js';
+import { getActiveVaultId, getClientRuntimeConfig, resolveApiUrl, resolveWsBaseUrl } from './domain/runtime-paths.js';
+import { ensureClientAuthenticated } from './infrastructure/auth-client.js';
+import { CanvasRoomClient } from './infrastructure/canvas-room-client.js';
+import { createCanvasTextEditor } from './infrastructure/canvas-text-editor.js';
+import { vaultApiClient } from './infrastructure/vault-api-client.js';
+import { CanvasEditorView } from './presentation/canvas-editor-view.js';
+import { flattenTree } from './presentation/file-tree-state.js';
+import { ImageLightboxController } from './presentation/image-lightbox-controller.js';
+import './styles/base.css';
+import './styles/surfaces/embedded-editor-base.css';
+import './styles/primitives/controls.css';
+import './styles/components/actions.css';
+import './styles/surfaces/canvas-editor.css';
+
+const params = new URLSearchParams(window.location.search);
+const filePath = canvasFilePath(params.get('file'));
+const root = document.getElementById('root');
+const post = (type, data = {}) => window.parent.postMessage({ type, filePath, ...data }, window.location.origin);
+let client;
+let view;
+
+function updateTheme(theme) {
+  document.body.dataset.theme = theme === 'light' ? 'light' : 'dark';
+  document.documentElement.dataset.theme = document.body.dataset.theme;
+  document.documentElement.style.colorScheme = theme === 'light' ? 'light' : 'dark';
+  view?.applyTheme(document.body.dataset.theme);
+}
+
+async function initialize() {
+  updateTheme(params.get('theme'));
+  await ensureClientAuthenticated();
+  if (!filePath || !/\.canvas$/i.test(filePath)) throw new Error('Choose a valid Canvas file from the Vault.');
+  const config = getClientRuntimeConfig();
+  const vaultId = params.get('vaultId') || getActiveVaultId(config);
+  if (vaultId) {
+    const vault = config.vaults?.find((entry) => entry.id === vaultId);
+    if (!vault) throw new Error('Vault unavailable');
+    // Keep this iframe's transport pinned to its Vault while the host switches tabs.
+    config.vaults = [vault];
+    config.activeVault = vaultId;
+  }
+  window.__COLLABMD_CONFIG__ = config;
+  const readFile = (path) => vaultApiClient.readFile(path, config);
+  let fileList = [];
+  const readTree = async () => {
+    const result = await vaultApiClient.readTree(config);
+    fileList = flattenTree(result.tree ?? []).files;
+    return result;
+  };
+  await readTree();
+  const onOpenFile = (path, subpath) => post('canvas-open-file', { filePath: path, subpath });
+  const user = createRandomUser(params.get('userName') || localStorage.getItem('collabmd-user-name'));
+  for (const [key, parameter] of [['color', 'userColor'], ['colorLight', 'userColorLight'], ['peerId', 'userPeerId']]) {
+    if (params.get(parameter)) user[key] = params.get(parameter);
+  }
+  client = new CanvasRoomClient({
+    filePath, user, readFile, wsBaseUrl: resolveWsBaseUrl(config),
+    onChange: (state) => view?.update(state),
+    onAwareness: (users) => { view?.renderPresence(users); post('canvas-awareness', { users }); },
+    onConnection: (state) => post('canvas-connection', { state }),
+  });
+  const action = (operation) => client.mutate(operation);
+  const actions = {
+    addNode: (node) => {
+      const id = crypto.randomUUID();
+      return action((doc) => {
+        addCanvasNode(doc, { ...node, id });
+        if (node.type === 'group') reorderCanvasNode(doc, id, 'back');
+      }) ? id : null;
+    },
+    addEdge: (edge) => action((doc) => addCanvasEdge(doc, { ...edge, id: crypto.randomUUID() })),
+    updateNode: (id, patch) => action((doc) => updateCanvasNode(doc, id, patch)),
+    updateEdge: (id, patch) => action((doc) => updateCanvasEdge(doc, id, patch)),
+    updateNodes: (patches, separateUndo = true) => client.mutate((doc) => {
+      patches.forEach(({ id, patch }) => updateCanvasNode(doc, id, patch));
+    }, { separateUndo }),
+    deleteNodes: (ids) => action((doc) => deleteCanvasNodes(doc, ids)),
+    deleteEdges: (ids) => action((doc) => deleteCanvasEdges(doc, ids)),
+    reorderNode: (id, direction) => action((doc) => reorderCanvasNode(doc, id, direction)),
+    presence: (field, value) => client.setPresence(field, value),
+    undo: () => client.undo(), redo: () => client.redo(),
+    stopUndoCapture: () => client.undoManager.stopCapturing(),
+    resolveConflict: (choice) => {
+      if (!client.provider?.synced) return;
+      view.closeTextEditor();
+      client.doc.transact(() => resolveCanvasExternalConflict(client.doc, choice), client.localOrigin);
+      client.undoManager.clear();
+    },
+  };
+  view = new CanvasEditorView({
+    root, actions, readFile, readTree, vaultId: vaultId || '',
+    createMarkdownPreview: (container, markdownText, sourceFilePath = filePath, subpath) => createCanvasMarkdownPreview({
+      container, markdownText, sourceFilePath, subpath,
+      getFileList: () => fileList,
+      getLocalUser: () => client.awareness.getLocalState()?.user ?? user,
+      getTheme: () => document.body.dataset.theme,
+      onOpenFile, vaultApiClient,
+    }),
+    getText: (id) => client.doc.getMap(CANVAS_NODES_KEY).get(id)?.get('text'),
+    attachmentUrl: (path) => resolveApiUrl(`/attachment?path=${encodeURIComponent(path)}`, config),
+    onOpenFile,
+    createTextEditor: (id, parent, onClose) => {
+      const text = client.doc.getMap(CANVAS_NODES_KEY).get(id)?.get('text');
+      if (!text || !client.canEdit) return null;
+      return createCanvasTextEditor({ parent, text, onClose, awareness: client.awareness, undoManager: client.undoManager });
+    },
+  });
+  const imageLightbox = new ImageLightboxController({ previewElement: root });
+  ['stack-item-added', 'stack-item-popped', 'stack-cleared'].forEach((event) => client.undoManager.on(event, () => client.publish()));
+  window.addEventListener('message', async (event) => {
+    if (event.origin !== window.location.origin || event.source !== window.parent) return;
+    const message = event.data;
+    if (!message || typeof message !== 'object') return;
+    if (message.type === 'canvas-theme') updateTheme(message.theme);
+    if (message.type === 'canvas-user' && message.user) client.setUser(message.user);
+    if (message.type === 'canvas-prepare-disconnect' && message.filePath === filePath && typeof message.requestId === 'string') {
+      view.closeTextEditor();
+      const ready = await client.prepareDisconnect();
+      post(ready ? 'canvas-disconnect-ready' : 'canvas-disconnect-blocked', { requestId: message.requestId });
+    }
+  });
+  window.addEventListener('beforeunload', (event) => {
+    if (!client.hasPendingWrites) return;
+    event.preventDefault();
+    event.returnValue = '';
+  });
+  window.addEventListener('pagehide', () => { imageLightbox.destroy(); view.destroy(); client.destroy(); });
+  post('canvas-ready');
+  await client.connect();
+}
+
+initialize().catch(() => {
+  root.textContent = 'Unable to open this canvas. The file has not been changed.';
+  root.setAttribute('role', 'alert');
+});

package/src/client/domain/canvas-view.js

@@ -0,0 +1,50 @@
+export function canvasColor(value) {
+  if (/^[1-6]$/.test(value)) return `var(--canvas-color-${value})`;
+  return /^#[\da-f]{6}$/i.test(value) ? value : 'var(--color-border)';
+}
+
+export function canvasFilePath(value) {
+  const path = String(value ?? '').replace(/\\/g, '/');
+  if (!path || path.length > 4096 || /^[/]|[\0?#]|^[a-z][a-z\d+.-]*:/i.test(path)
+    || path.split('/').some((part) => !part || part.startsWith('.'))) return null;
+  return path;
+}
+
+export function canvasLinkUrl(value) {
+  try {
+    const url = new URL(value);
+    return ['https:', 'http:', 'mailto:'].includes(url.protocol) ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+
+function connectionPoint(node, side) {
+  const center = { x: node.x + node.width / 2, y: node.y + node.height / 2 };
+  const directions = { top: [0, -1], right: [1, 0], bottom: [0, 1], left: [-1, 0] };
+  const [dx, dy] = directions[side];
+  return { x: center.x + dx * node.width / 2, y: center.y + dy * node.height / 2, dx, dy };
+}
+
+export function canvasSideAtPoint(node, point) {
+  return [
+    ['left', Math.abs(point.x - node.x)], ['right', Math.abs(point.x - node.x - node.width)],
+    ['top', Math.abs(point.y - node.y)], ['bottom', Math.abs(point.y - node.y - node.height)],
+  ].sort((a, b) => a[1] - b[1])[0][0];
+}
+
+export function canvasEdgeGeometry(edge, nodes) {
+  const from = nodes.get(edge.fromNode);
+  const to = nodes.get(edge.toNode);
+  if (!from || !to) return null;
+  const dx = to.x + to.width / 2 - from.x - from.width / 2;
+  const dy = to.y + to.height / 2 - from.y - from.height / 2;
+  const horizontal = Math.abs(dx) >= Math.abs(dy);
+  const start = connectionPoint(from, edge.fromSide || (horizontal ? (dx >= 0 ? 'right' : 'left') : (dy >= 0 ? 'bottom' : 'top')));
+  const end = connectionPoint(to, edge.toSide || (horizontal ? (dx >= 0 ? 'left' : 'right') : (dy >= 0 ? 'top' : 'bottom')));
+  const distance = Math.max(40, Math.hypot(end.x - start.x, end.y - start.y) / 3);
+  return {
+    path: `M ${start.x} ${start.y} C ${start.x + start.dx * distance} ${start.y + start.dy * distance}, ${end.x + end.dx * distance} ${end.y + end.dy * distance}, ${end.x} ${end.y}`,
+    x: (start.x + end.x) / 2, y: (start.y + end.y) / 2,
+  };
+}

package/src/client/domain/excalidraw-scene.js

@@ -1,54 +1,9 @@
-export function normalizeDocumentMode(mode) {
-  return mode === 'preview' ? 'preview' : 'edit';
-}
-
-export function createEmptyScene() {
-  return {
-    type: 'excalidraw',
-    version: 2,
-    source: 'collabmd',
-    elements: [],
-    appState: {
-      gridSize: null,
-      viewBackgroundColor: '#ffffff',
-    },
-    files: {},
-  };
-}
-
-export function normalizeScene(raw) {
-  if (!raw || typeof raw !== 'object') {
-    return createEmptyScene();
-  }
+import { normalizeScene } from '../../domain/excalidraw-scene.js';
 
-  return {
-    type: 'excalidraw',
-    version: 2,
-    source: 'collabmd',
-    elements: Array.isArray(raw.elements) ? raw.elements : [],
-    appState: {
-      gridSize: raw.appState?.gridSize ?? null,
-      viewBackgroundColor: raw.appState?.viewBackgroundColor ?? '#ffffff',
-    },
-    files: raw.files && typeof raw.files === 'object' ? raw.files : {},
-  };
-}
+export { createEmptyScene, normalizeScene, parseSceneJson, tryParseSceneJson } from '../../domain/excalidraw-scene.js';
 
-export function parseSceneJson(rawJson) {
-  const parsed = tryParseSceneJson(rawJson);
-  return parsed || createEmptyScene();
-}
-
-export function tryParseSceneJson(rawJson) {
-  if (!rawJson) {
-    return null;
-  }
-
-  try {
-    return normalizeScene(JSON.parse(rawJson));
-  } catch {
-    return null;
-  }
+export function normalizeDocumentMode(mode) {
+  return mode === 'preview' ? 'preview' : 'edit';
 }
 
 export function sceneToInitialData(parsedScene, { theme = 'dark' } = {}) {

package/src/client/domain/highlight-runtime.js

@@ -44,10 +44,6 @@ const HIGHLIGHT_CACHE_LIMIT = 200;
 const HIGHLIGHT_CACHE_MAX_SOURCE_CHARS = 20000;
 const highlightCache = new Map();
 
-export function getHighlightCacheSize() {
-  return highlightCache.size;
-}
-
 export function highlightFence(source, language, { ignoreIllegals = false } = {}) {
   const text = String(source);
   const cacheable = text.length <= HIGHLIGHT_CACHE_MAX_SOURCE_CHARS;

package/src/client/domain/markdown-formatting.js

@@ -8,9 +8,7 @@ const INLINE_PLACEHOLDERS = Object.freeze({
 const LINK_LABEL_PLACEHOLDER = 'link text';
 const LINK_URL_PLACEHOLDER = 'https://';
 const IMAGE_ALT_PLACEHOLDER = 'alt text';
-const IMAGE_URL_PLACEHOLDER = 'https://';
 const VIDEO_LABEL_PLACEHOLDER = 'Video';
-const VIDEO_URL_PLACEHOLDER = 'https://';
 const CODE_BLOCK_PLACEHOLDER = 'code';
 const TABLE_HEADERS = Object.freeze(['Column 1', 'Column 2']);
 const TABLE_CELL_PLACEHOLDER = 'Value';
@@ -98,99 +96,19 @@ function looksLikeUrl(value) {
   return /^https?:\/\//i.test(value.trim());
 }
 
-function formatLink(text, range) {
+function formatLink(text, range, prefix, labelPlaceholder) {
   const selected = text.slice(range.from, range.to);
-  if (selected.length > 0 && looksLikeUrl(selected)) {
-    return {
-      anchor: range.from + 1,
-      from: range.from,
-      head: range.from + 1 + LINK_LABEL_PLACEHOLDER.length,
-      insert: `[${LINK_LABEL_PLACEHOLDER}](${selected})`,
-      to: range.to,
-    };
-  }
-
-  if (selected.length > 0) {
-    const prefix = `[${selected}](`;
-    return {
-      anchor: range.from + prefix.length,
-      from: range.from,
-      head: range.from + prefix.length + LINK_URL_PLACEHOLDER.length,
-      insert: `${prefix}${LINK_URL_PLACEHOLDER})`,
-      to: range.to,
-    };
-  }
-
-  return {
-    anchor: range.from + 1,
-    from: range.from,
-    head: range.from + 1 + LINK_LABEL_PLACEHOLDER.length,
-    insert: `[${LINK_LABEL_PLACEHOLDER}](${LINK_URL_PLACEHOLDER})`,
-    to: range.to,
-  };
-}
-
-function formatImage(text, range) {
-  const selected = text.slice(range.from, range.to);
-  if (selected.length > 0 && looksLikeUrl(selected)) {
-    return {
-      anchor: range.from + 2,
-      from: range.from,
-      head: range.from + 2 + IMAGE_ALT_PLACEHOLDER.length,
-      insert: `![${IMAGE_ALT_PLACEHOLDER}](${selected})`,
-      to: range.to,
-    };
-  }
-
-  if (selected.length > 0) {
-    const prefix = `![${selected}](`;
-    return {
-      anchor: range.from + prefix.length,
-      from: range.from,
-      head: range.from + prefix.length + IMAGE_URL_PLACEHOLDER.length,
-      insert: `${prefix}${IMAGE_URL_PLACEHOLDER})`,
-      to: range.to,
-    };
-  }
+  const selectedIsUrl = looksLikeUrl(selected);
+  const selectUrl = selected.length > 0 && !selectedIsUrl;
+  const label = selectUrl ? selected : labelPlaceholder;
+  const url = selectedIsUrl ? selected : LINK_URL_PLACEHOLDER;
+  const anchor = range.from + prefix.length + (selectUrl ? label.length + 2 : 0);
 
   return {
-    anchor: range.from + 2,
-    from: range.from,
-    head: range.from + 2 + IMAGE_ALT_PLACEHOLDER.length,
-    insert: `![${IMAGE_ALT_PLACEHOLDER}](${IMAGE_URL_PLACEHOLDER})`,
-    to: range.to,
-  };
-}
-
-function formatVideo(text, range) {
-  const selected = text.slice(range.from, range.to);
-
-  if (selected.length > 0 && looksLikeUrl(selected)) {
-    return {
-      anchor: range.from + 2,
-      from: range.from,
-      head: range.from + 2 + VIDEO_LABEL_PLACEHOLDER.length,
-      insert: `![${VIDEO_LABEL_PLACEHOLDER}](${selected})`,
-      to: range.to,
-    };
-  }
-
-  if (selected.length > 0) {
-    const prefix = `![${selected}](`;
-    return {
-      anchor: range.from + prefix.length,
-      from: range.from,
-      head: range.from + prefix.length + VIDEO_URL_PLACEHOLDER.length,
-      insert: `${prefix}${VIDEO_URL_PLACEHOLDER})`,
-      to: range.to,
-    };
-  }
-
-  return {
-    anchor: range.from + 2,
+    anchor,
     from: range.from,
-    head: range.from + 2 + VIDEO_LABEL_PLACEHOLDER.length,
-    insert: `![${VIDEO_LABEL_PLACEHOLDER}](${VIDEO_URL_PLACEHOLDER})`,
+    head: anchor + (selectUrl ? url.length : label.length),
+    insert: `${prefix}${label}](${url})`,
     to: range.to,
   };
 }
@@ -450,13 +368,13 @@ export function createMarkdownToolbarEdit(documentText, selectionRange, action)
       edit = wrapInline(text, range, '`', INLINE_PLACEHOLDERS.code);
       break;
     case 'link':
-      edit = formatLink(text, range);
+      edit = formatLink(text, range, '[', LINK_LABEL_PLACEHOLDER);
       break;
     case 'image':
-      edit = formatImage(text, range);
+      edit = formatLink(text, range, '![', IMAGE_ALT_PLACEHOLDER);
       break;
     case 'video':
-      edit = formatVideo(text, range);
+      edit = formatLink(text, range, '![', VIDEO_LABEL_PLACEHOLDER);
       break;
     case 'paragraph':
       edit = formatParagraph(text, range);