Preview images in current draft

Action

Posted by @jsamlarose, Last update 8 months ago

A quick and simple way to preview images (markdown image links) in the current Draft.

Steps

script

// Search for markdown image links in the current draft and preview them in an HTML preview

// Get the content of the current draft
let content = draft.content;

// Regular expression to match markdown image links
let regex = /!\[.*?\]\((.*?)\)/g;

// Array to store image URLs
let imageUrls = [];

// Match markdown image links and extract image URLs
let match;
while ((match = regex.exec(content)) !== null) {
    imageUrls.push(match[1]);
}

// If there are image URLs, create an HTML preview
if (imageUrls.length > 0) {
    let html = "<html><head><style>body { background-color: #333; color: white; }</style></head><body>";
    
    
    // Add image tags to the HTML
    for (let url of imageUrls) {
        html += `<img src="${url}" style="width: 100%;"><br>`;
    }
    
    html += "</body></html>";
    
    // Create an HTMLPreview object and load the HTML content
    let preview = HTMLPreview.create();
    preview.show();

    if (preview.show(html)) {  
      // continue button was pressed  
    }  
    else {  
      // cancel button was pressed  
    }
} else {
    app.displayInfoMessage("No markdown image links found.");
}

Options

After Success Default

Notification Error

Log Level Error

Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.

After Success	Default
Notification	Error
Log Level	Error