Obsidian Stats logoObsidian Stats

Copy Embed Code

by dustinho
5
4
3
2
1
Score: 35/100
Install Code

Description

This plugin has not been manually reviewed by Obsidian staff. Adds a 'Copy Embed Code' option to right-click context menu for images. Works in Live Preview and Reading Mode, including nested embeds.

Reviews

No reviews yet.

Stats

stars
downloads
0
forks
1
days
NaN
days
NaN
days
0
total PRs
0
open PRs
0
closed PRs
0
merged PRs
0
total issues
0
open issues
0
closed issues
0
commits

Latest Version

Invalid date

Changelog

See all version on GitHub

README file from

Github

Copy Embed Code

An Obsidian plugin that adds a "Copy Embed Code" option to the right-click context menu for images.

Features

  • Works everywhere: Live Preview, Reading Mode, and nested embeds (transclusions)
  • Local images: Copies wikilink format ![[filename.png]]
  • External images: Copies markdown format ![](https://raw.githubusercontent.com/dustinho/obsidian-copy-embed-code/HEAD/url)

The Problem

Obsidian's standard editor-menu API relies on cursor position, but clicking an image doesn't always move the cursor—especially when the image is inside an embed (transclusion), or nested multiple levels deep.

How It Works

Event Flow

  1. Right-click captured - A global contextmenu listener (capture phase) detects the click
  2. Image detection - Walks up the DOM tree from the click target to find any <img> element
  3. Menu injection - Adds "Copy Embed Code" via Obsidian's Menu API or DOM injection
  4. Copy action - Generates appropriate embed syntax and copies to clipboard

Handling Nested Embeds

The plugin uses DOM-based detection rather than cursor position:

Document
  └── contextmenu listener (capture phase)
        └── Walks up DOM tree from evt.target
              └── Finds <img> regardless of nesting depth

This means an image 5 levels deep (blockquote → embed → callout → embed → image) works identically to a top-level image.

Dual Injection Strategy

Context Method
Edit mode Hooks into Obsidian's editor-menu event
Reading mode / nested embeds Injects directly into .menu DOM element

Installation

Manual Installation

  1. Download main.js and manifest.json from the releases
  2. Create folder: <vault>/.obsidian/plugins/copy-embed-url/
  3. Copy files into the folder
  4. Enable the plugin in Obsidian settings

From Source

npm install
npm run build

Usage

  1. Right-click any image in Obsidian
  2. Click "Copy Embed Code"
  3. Paste the embed code wherever needed

License

MIT

Sponsors