Feature request: allow pasting of images in documents of other languages than markdown (like asciidoc)

SjoerdV commented 2 years ago

I know this extension has 'markdown' in the name, but I got notified that the other main 'Image Pasting' extension for vscode is not being maintained anymore. See: https://github.com/mushanshitiancai/vscode-paste-image/issues/100

I would love to be able to use the regex framework of this extension to cater to 'other language' documents (lie Asciidoc) as well. Maybe it is do-able without making a great fuss.

Something like this in settings:

    "[asciidoc]": {
      "MarkdownPaste.rules": [
        {
          "regex": "^(?:https?://)?(?:(?:(?:www\\.?)?youtube\\.com(?:/(?:(?:watch\\?.*?v=([^&\\s]+).*)|))?))",
          "options": "g",
          "replace": "image::https://img.youtube.com/vi/$1/0.jpg[link=https://www.youtube.com/watch?v=$1]",
        },
        {
          "regex": "^(https?://.*)",
          "options": "ig",
          "replace": "image::$1",
        }
      ] 
    }

vezaynk commented 2 years ago

@SjoerdV

Could you elaborate on your use-case?

Right now there's nothing preventing you from using the asciidoc rules as you wrote them except that they can't co-exist with the markdown ones. Are you working on a project with both markdown and asciidoc?

I'm entirely willing to consider per-language rules if there's a need for them.

vezaynk commented 2 years ago

Notes to self for this issue.

This should be re-written:

https://github.com/telesoho/vscode-markdown-paste-image/blob/12ee7e1ff3cbaf4be8a85179b235ca4ed77aec2d/src/paster.ts#L296

Rules engine needs to be extended here:

https://github.com/telesoho/vscode-markdown-paste-image/blob/12ee7e1ff3cbaf4be8a85179b235ca4ed77aec2d/src/paster.ts#L382

SjoerdV commented 2 years ago

@SjoerdV

Could you elaborate on your use-case?

Sure, it's indeed the case that I am using Markdown and Asciidoc interchangeably in different projects (Asciidoc being the far superior, with a 'formal' language specification, but Markdown being the dominant language on the net) and I would love to use a single extension for image handling for these 'plain text' languages. Regex seems to be a great and flexible way to go in setting the actual image reference construct in the md/adoc file.

After some investigation, making this particular extension work with Asciidoc there is some language dependent stuff to consider. For instance in Asciidoc the YAML Frontmatter in each adoc file depicts the location where images should be stored through the ':imagedir:' property. So determining the image storage location is different than for Markdown files. Furthermore the Asciidoc VSCode extension (https://github.com/asciidoctor/asciidoctor-vscode/issues/255) that tries to do this hardcodes almost everything (ie. it's not as configurable as this extension and does not provide a popup to rename/re-path the pasted image). Actually it does a 'not so good'-job detecting relative paths like when :imagedir: ../../images (I couldn't get it to work btw, maybe I should report a bug in that repo).

Anyhow an 'All-in-one' approach like what the asciidoc-vscode extension tries to become is not something I really like, so that's why maybe adjusting this repo with asciidoc image handling support is a good idea.

As an alternative it might be even better to create a new repo called 'vscode-asciidoc-paste-image', sharing most of the code of this repo but make it asciidoc-specific.

I hope I gave you some food for thought.

vezaynk commented 2 years ago

We don't actually need to know where the images should be stored, as the the link can be re-written using the regex rules. I have one for my hugo blog:

{
            "regex": "(.*/static/)(.*)",
            "options": "",
            "replace": "/$2"
}

It transforms images saved under "${workspaceRoot}/static/images/${fileBasenameNoExtension}/"to /images/${fileBasenameNoExtension}/". Same thing can be done for the imagedir configuration.

I think the extension could be modified to be more rule-driven than it is right now in order to deal with different languages. I'll think about what a good schema for it would be.

SjoerdV commented 2 years ago

That's excellent and I missed that consequence of the regex setup. Sweet! So the actual storage location can still be set in the settings file, while determining what link to use in the content file can be determined through the regex. That way we can fully abstract from the frontmatter setting, or any content-based setting for images. Love to see this come to pass.

Actually doing this would probably be better suited in the orphaned repo 'vscode-paste-image', naming-wise, I mean...

SjoerdV commented 2 years ago

So if you remove the 'when' expression in the VSCode keyboard bindings you can paste in asciidoc files as well. I now use this setting in Workbooks that only use asciidoc:

    "MarkdownPaste.rules": [
      {
        "regex": "^(?:https?://)?(?:(?:(?:www\\.?)?youtube\\.com(?:/(?:(?:watch\\?.*?v=([^&\\s]+).*)|))?))",
        "options": "g",
        "replace": "image::https://img.youtube.com/vi/$1/0.jpg[link=\"https://www.youtube.com/watch?v=$1\"]"
      },
      {
        "regex": "^(https?://.*)",
        "options": "ig",
        "replace": "image::$1[linktext,300]"
      },
      {
        "regex": "(.*/media/)(.*)",
        "options": "",
        "replace": "image::$2[linktext,300]"
      }
    ]

Issue is still with mixed language Workspaces. I would love to put this extension configuration in a language container like so:

"[asciidoc]": {
}

telesoho commented 2 years ago

@SjoerdV I have add this feature in new version 0.18.0.

https://github.com/telesoho/vscode-markdown-paste-image/blob/master/README.md#config

SjoerdV commented 2 years ago

Great addition. Just a little point of feedback: Wouldn't it be better to just extend the existing 'MarkdownPaste.rules' setting? Just for the sake of non-pessimization?

telesoho commented 2 years ago

@SjoerdV I have try to enable MarkdownPaste.rules setting in pre-language configration, but I couldn't find the way to do that.

SjoerdV commented 2 years ago

@telesoho first of: great work! I have just one thing I noticed while working on an asciidoc file When pasting an image from clipboard the file dialog is presented, on ENTER this is the code that is pasted in the document:

![](image::filename.png[alttext,300])

so the parsing seems to have doubled. One time for the asciidoc lang rule and again through the default markdown rule. I do see in the entire bottom of the documentation something that may have something to do with that:

File link format When you editing a markdown, it will pasted as markdown image link format , the imagePath will be resolve to relative path of current markdown file. In other file, it just paste the image's path.

This is the actual config I'm using right now:

{
    "MarkdownPaste.lang_rules": [
      {
        "asciidoc": [
          {
            "regex": "^(?:https?://)?(?:(?:(?:www\\.?)?youtube\\.com(?:/(?:(?:watch\\?.*?v=([^&\\s]+).*)|))?))",
            "options": "g",
            "replace": "image::https://img.youtube.com/vi/$1/0.jpg[link=\"https://www.youtube.com/watch?v=$1\"]"
          },
          {
            "regex": "^(https?://.*(png|jpg|svg|jpeg)$)",
            "options": "ig",
            "replace": "image::$1[alttext,300]"
          },
          {
            "regex": "^(.*/media/)(.*)$",
            "options": "ig",
            "replace": "image::$2[alttext,300]"
          },
          {
            "regex": "^(https?://((?!.*(png|jpg|svg|jpeg).*$).)+)",
            "options": "ig",
            "replace": "link:$1[linktext]"
          }
        ]
      },
      {
        "markdownx": [
          {
            "regex": "^(?:https?://)?(?:(?:(?:www\\.?)?youtube\\.com(?:/(?:(?:watch\\?.*?v=([^&\\s]+).*)|))?))",
            "options": "g",
            "replace": "[![](https://img.youtube.com/vi/$1/0.jpg)](https://www.youtube.com/watch?v=$1)"
          },
          {
            "regex": "^(https?://.*)",
            "options": "ig",
            "replace": "[]($1)"
          }
        ]
      }
    ]
}

Thanks again!

SjoerdV commented 2 years ago

maybe the issue is with hardcoding the markdown syntax in this class without checking if there are language rules active

https://github.com/telesoho/vscode-markdown-paste-image/blob/692c131494889ecd38058cf888b57b16b7a68fea/src/paster.ts#L363

telesoho commented 2 years ago

@SjoerdV I have release new version to fix it.

SjoerdV commented 2 years ago

@telesoho Awesome! Confirmed working so I guess we can close this one.

telesoho / vscode-markdown-paste-image

Feature request: allow pasting of images in documents of other languages than markdown (like asciidoc) #56