Is there an iOS markdown editor that works with DTTG?

Although the folder might be synced to the Files app, the link to the image file is probably different from the one on the Mac: file:///User/name/Desktop versus whatever iOS does for it’s filesystem exposed through Files. The same holds for relative paths, I think: iOS does probably not expose the same hierarchy as MacOS. So using file-links for images is bound to be problematic.
The same problem will arise when you send the MD file to someone else, even if you include the image with your mail: They’ll have to make sure to put the image in the same location you did. Which might be difficult for example on a Windows machine.
MD is just not very well suited for this kind of task. The only way to make it more robust in this aspect is to use https URLs for images. Which requires you to store the images on a webserver :frowning:

2 Likes

Yes. Frustrating, isn’t it… Not the inability for other people to see the images as no-one would be interested in anything I write, but it would be quite nice if one half of Apple’s domain could work out a way of knowing where the other half’s files live.

Truth is, there isn’t a single format which works well across the Mac and iOS, let alone Linux and/or Windows— all of them are flawed in one way or other and choosing any one over the others involves more or less irritating compromises.

Agree on image issues about using iA Writer with DTTG. Hopefully DTTG and DEVONthink will improve markdown editor soon.

Wow, are you sure about this image problem? Because I’ve just spent the last week migrating from BBEdit to IA Writer (based on input from this forum, and a desire to get a more “uniform” experience between desktop and IOS.

If you’ve got it working, with indexed folders for both the markdown files and the images, so that a single markdown file shows images in DT3, DTTG and iA Writer (Mac and iOS), then please share your settings, because I can’t get it to work at all in iA Write iOS.

In particular, what format are you using for the second part of the link (i.e. the file location)?

Thanks!

1 Like

This is really too long to read unless you REALLY care about the topic.

I went back to review in order to answer @brookter. The actual situation is heavily nuanced and I have not been able to explore every use case. But I share my incomplete findings with you all in the hope that someone can assist and that I can return to my normal life for the evening.

To re-cap: For various reasons I recentlly shifted my workflows from using BBEdit as my primary markdown editor to IA Writer. Ideally, I sacaficed a little what BBEdit offers to reach parity between my Mac and my iPad. Results are mostly good.

I have moved entirely to an indexed model, where all of my files are outside of DEVONthink but are indexed in DEVONthink databases. My intention is to use DEVONthink to search/read/navigate through my notes, but use external editors to actually edit them. (Editors for markdown/pdf/rtf are always going to be better than DEVONthink, that’s not their core competancy. I like their core compentancy and hope that they stay focused there.

One final caveat: I am not a real web designer, I pretend to be one late at night, alone. You’re going to find ways to improve this and I cheerfully expect that.

One huge challenge with editing markdown is representing images. I’ve got an 80% solution working, but it’s got some issues. Here we go.

My screenshots are too big to share, so first I want to describe my test.md document and share the custom stylsheet I use.

My test document has a whole bunch of lorem ipsum to provide a place to instert the documents. You can make your own. My test image is in an “img” subdirectory alongside the markdown.

Here are the relevant parts of the stylsheet:

.s_c {
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 20%;
	height: auto;
	}
.s_l {
	float: left;
	width: 20%;
	height: auto;
	margin: 10px;
	}
.s_r {
	float: right;
	width: 20%;
	height: auto;
	margin: 10px;
	}
.m_c {
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 45%;
	height: auto;
	}
.m_l {
	float: left;
	width: 45%;
	height: auto;
	margin: 10px;
	}
.m_r {
	float: right;
	width: 45%;
	height: auto;
	margin: 10px;
	}
.lg {
	width: 100%;
	height: auto;
	margin: 10px;
	margin-left: auto;
	margin-right: auto;
	}

“s_c” is small centered, “m_l” is medium left-side, “lg” is large centered, you get it.

Okay, in this scenario we have DEVONthink on the Mac, DEVONthink To Go on the iPad, and IA Writer on both as well. At this point, I have (almost) everything working on every platform but for IA Writer on iOS where the images are not showing. (And I could swear I saw that work before I made the jump to this new workflow, but it’s not displaying any images right now. Maybe someone can help me with that. )

3 out of 4 ain’t bad.

I use spans for left and right floaters and divs for centered images. I also use both simple images and figures with captions. Everything is working on every platform but IA Writer iOS…but I think it should be possible. The problem seems to be with the referenced files. Everything is stored on iCloud and indexed in DEVONthink.

There are some weird caveats, which probably indicate bugs in the DEVONthink render-er. Let’s go into them:

  • First know that IA Writer on the Mac is generally more forgiving that DEVONthink. IA Writer will render things that DEVONthink won’t. But there are workarounds.
  • For simple images, I’ll use something like <span class="m_l">![alt-text](img/1.jpeg)</span> and you will get nothing in DEVONthink (Works okay in IA Writer). BUT, if you preceed the first such spanned image with a blank line, all the following spans and divs will render fine in DEVONthink, and show up on DTTG on iOS as well. Even if they are completely in-line with the page body.
  • Sadly the big fail here is IA Writer on iOS which doesn’t display the referenced files at all. (Again, I could swear I saw it work at some point. I’ll keep at it.)
  • A final note as I turn to my real life: my “lg” class is broken. It is supposed to show an image full-width, instead it is full-sized and left-aligned, although in a figure the caption is centered in the window. I haven’t figured that out yet, but the water heater is leaking so I need to turn to that.

Thanks everyone for the great forum and contributions, I’m sure that we can figure this stuff out.

1 Like

CSS is not really the main topic here, but so be it…

That’s of course a matter of taste, but grid is out now for some years. Might be worth thinking about a more robust and modern approach :wink:

Again, matter of taste. But why go to all the trouble of markdown at all if you then use HTML anyway (for presentation, no less)? <img alt="alt-text" class="m_l" src="img/1.jpeg"> does the same, saves one level of HTML in the final output.
Of course, this says nothing about the general problem with images in MD: They have to be always in the same place. Bear seems to solve this with a kind of package (basically a folder), iA Writer just doesn’t care (same as DT). So you have to care: Make sure that the images are in the same relative (if you use relative URLs) or absolute location (impossible to achieve across platforms).

You might want to decide on the margins you set. You have 10px all around and auto for left and right. That makes no sense. height: auto is the default, so no need to set it. One of your problems with all these floats might be that you don’t clear them (one of the reasons why float should be avoided nowadayas). But since your description is not complete, it is not possible to figure out what’s not working why here. But maybe this helps: css - Responsive Image full screen and centered - maintain aspect ratio, not exceed window - Stack Overflow

Thanks for the detailed reply — it’s interesting to see how you’ve set the CSS.

Unfortunately, as you say, the problem isn’t with the CSS, it’s with the precise format of the markdown links, specifically the part between the parentheses (). There doesn’t appear to be a single format which shows images properly on DT3, DTTG and both versions of IA Writer (and as far as I can see, any other iOS markdown editor — that is, when you open the document in that app from DTTG.

E.g. Create a document with links to test.img in a subfolder ‘media’, and create links with the following formats:

1. ![test image](file:///Users/username/folder%20name/media/test.img)
2. ![test image](media/test.img)
3. ![test image](./media/test.img)
etc

The images show as follows:

  1. DT3 — all shown correctly
  2. DTTG — only 1 and 2 shown correctly (is this a bug?)
  3. iA Writer Mac — all shown correctly
  4. iA Writer iOS opened from within DTTG — none shown at all
  5. iA Writer iOS opened directly in app — 2 and 3 show correctly. (Only on iCloud Drive)

iA Writer, when opened from DTTG:

Opened within iA Writer:

NB: To get iA Writer iOS to show any images, you have to first add the location to their library in iOS, and then open the markdown file directly inside the app. Because of the way iA Writer interacts with Dropbox on iOS, you can’t add a Dropbox folder to their Library, so method 5 doesn’t work on Dropbox — only on iCloud.

So, as far as I can tell, there is no way of viewing markdown indexed images when you open from DTTG. If I’m missing something (very possible…), I’d be grateful to be pointed in the right direction!

Thanks.

1 Like

This can of course only work in an environment providing the exact same path, starting with a Users folder at the root level. Since that doesn’t exist by default anywhere but on you own Mac, it’ll work only there. That’s neither surprising nor a “bug” but by design. iOS does not provide access to its filesystem to apps this way.
The only chance, as you found out, is a relative path to the image. That even this does not work with iAwriter opened from DTTG might be due to the fact that DTTG does not pass the path too the file but it’s content (which seems logical in this context: sharing has to work with all kinds of data, also those that are not a file). No path, no (relative) Location, end of story.

MD is a text format for (mostly) structural text. It can be bent in other directions, but there are limits to this. If representation is important, another format would probably be better, like PDF.

Or, alternatively, embedding the images as data URLs in the MD file. Which would increase their size quite a bit and make large parts illegible. But there’s always a downside…

Sure — I understand why the full path doesn’t work on iOS (it was there because we’re talking about viewing the same file on all platforms, that’s all): would be helpful if it did, but it doesn’t.

As for whether it’s an issue with what DTTG passes on (or not), it’s still useful for the implications to be listed. I’ve not seen a post anywhere which explicitly said “You can’t view markdown images if you open the file from DTTG in another markdown editor” (could be there, of course, but I’ve not seen one) — but now I’ve spent a couple of hours testing the permutations, it seems a shame not to make the info available in case someone else is wondering.

2 Likes

Thank you @chrillek for the notes. I appreciate it.

Yes, I’d been hoping that the relative links would still work in iOS as all of my files are indexed from iCloud. “Open in…” seems to be the culprit there.

When I get some time I’ll try to build a shortcut that will open the current DDTG document in IA Writer “natively”. When I get some time…

(By the way. Relative file links work in DT for navigation, but do not have the same context menu options as item links do. Unfortunate, but I’m thinking the file links are more future-proof.)

What would be useful is a 3rd party keyboard with markdown support. I did find one in the App Store:

But the reviews are terrible, probably because it’s abandonware.

We actually have that in our list of potential future enhancements. :slight_smile:

8 Likes

:heart: Ah! I was just wondering about this. A good markdown keyboard would be a fantastic addition and would make DTTG even better for me!

Oh how I wish DEVONthink could use the new Bear.app (Panda alpha editor) it’s just amazing. Only
If some how the two companies could come together :wink:

6 Likes

This is by far the best idea I read this year…

1 Like

Thank you for the pointer, @Miwagner1 . Just downloaded it, pretty impressive indeed.

Panda Bear

Indeed this looks super interesting. Thank you for the information.

But according to “the two companies come together”: With Panda there wouldn’t even be a need to “come together” as Panda works with files openly available in the iOS files system. And on cloud drives too—and of course files in a file providing app like DTTG.

But as I understand the developers this only goes for the beta phase of the editor part of Bear. There is no hint that Bear itself won’t be keeping its notes locked in its own database like the present version once the Panda editing engine is integrated in it.

You got that correctly. Panda is just an alpha/beta version of Bear’s editor. Once it’s finalised, it is going to get integrated into Bear and I doubt it will remain available as a stand-alone app any longer. There have been no hints from the Bear development team that this would be the case.

I also wish Bear would support external folders, much like Ulysses, which would then perhaps enable its use as an external editor (regardless of the fact that it stores its notes in the database, just like Ulysses again), but again, there have been no hints from the development team that they are willing to support that or that this is being worked on.

The development of Bear is going pretty slowly (Panda has been mentioned as being worked on 2+ years ago, it should have been released by the end of 2019 (!) and it’s only just now in public beta) so as much as I like and use Bear for some of the notes, I don’t think we’ll be able to use it as an editor alongside DT anytime soon.