link Settings

name	Excalidraw
description	Draw content from within a note.
icon	brush
instructions	You can invoke Excalidraw in two ways: You can use the evaluation brackets `{excalidraw}` to insert an Excalidraw canvas inline in your note. This will be persisted (saved) if you leave the note and return to it. You can also use Cmd-O to invoke Quick Open, and enter "Excalidraw" to choose the plugin action. This will open an Excalidraw window in the Peek Viewer. Drawings made in Peek Viewer will be kept if you minimize the Peek Viewer window, but will be deleted when you close the Excalidraw Peek Viewer window, so it's a less permanent drawing compared to entering `{excalidraw}` Excalidraw images are currently saved in the URL of the iframe. This may cause issues if very large drawings are created. You can always export your drawing to an image within Excalidraw, which has the side benefit that the image will show in a public note. open_in_new open_in_new

The source code that is built into the build.html.json file below can be found at GitHub.

link Code

{
  appOption(app) {
    app.openSidebarEmbed(1);
  },
 
  async insertText(app) {
    await app.context.replaceSelection(`<object data="plugin://${ app.context.pluginUUID }" data-aspect-ratio="2" />`);
    return null;
  },
 
  async renderEmbed(app) {
    try {
      const attachments = await app.getNoteAttachments(app.context.pluginUUID);
      const attachment = attachments.find(attachment => attachment.name === "build.html.json");
      if (!attachment) throw new Error("build.html.json attachment not found");
      return this._getAttachmentContent(app, attachment.uuid);
    } catch (error) {
      return `<div><em>renderEmbed error:</em> message => log(message, styles.red)</div>`;
    }
  },
 
  async onEmbedCall(app, type, data) {
    if (type === "load") {
      const args = app.context.embedArgs;
      if (args.length !== 1) return null
 
      return atob(args[0]);
    } else if (type === "change") {
      const encodedData = btoa(data);
      app.context.updateEmbedArgs(encodedData);
      return true;
    }
  },
 
  async _getAttachmentContent(app, attachmentUUID) {
    const url = await app.getAttachmentURL(attachmentUUID);
 
    const proxyURL = new URL("https://plugins.amplenote.com/cors-proxy");
    proxyURL.searchParams.set("apiurl", url);
 
    const response = await fetch(proxyURL);
    return response.text();
  }
}
 

build.html.json

linkSettings

linkCode

link Settings

link Code