All: Allow loading image resources in IMG html tags

README.md

@@ -274,7 +274,9 @@ The checkboxes can then be ticked in the mobile and desktop applications.
 
 ## HTML support
 
-Only the `<br>` tag is supported - it can be used to force a new line, which is convenient to insert new lines inside table cells. For security reasons, other HTML tags are not supported.
+It is generally recommended to enter the notes as Markdown as it makes the notes easier to edit. However for cases where certain features aren't supported (such as strikethrough or to highlight text), you can also use HTML code directly. For example this would be a valid note:
+
+	This is <s>strikethrough text</s> mixed with regular **Markdown**.
 
 # Donations
 

ReactNativeClient/lib/MdToHtml.js

@@ -73,31 +73,31 @@ class MdToHtml {
 		return attrs;
 	}
 
-	renderImage_(attrs, options) {
+	async loadResource(id, options) {
-		const loadResource = async (id) => {
+		// console.info('Loading resource: ' + id);
-			// console.info('Loading resource: ' + id);
 
-			// Initially set to to an empty object to make
+		// Initially set to to an empty object to make
-			// it clear that it is being loaded. Otherwise
+		// it clear that it is being loaded. Otherwise
-			// it sometimes results in multiple calls to
+		// it sometimes results in multiple calls to
-			// loadResource() for the same resource.
+		// loadResource() for the same resource.
-			this.loadedResources_[id] = {};
+		this.loadedResources_[id] = {};
 
-			const resource = await Resource.load(id);
+		const resource = await Resource.load(id);
-			//const resource = await this.modelCache_.load(Resource, id);
+		//const resource = await this.modelCache_.load(Resource, id);
 
-			if (!resource) {
+		if (!resource) {
-				// Can happen for example if an image is attached to a note, but the resource hasn't
+			// Can happen for example if an image is attached to a note, but the resource hasn't
-				// been downloaded from the sync target yet.
+			// been downloaded from the sync target yet.
-				console.warn('Cannot load resource: ' + id);
+			console.warn('Cannot load resource: ' + id);
-				return;
+			return;
-			}
-
-			this.loadedResources_[id] = resource;
-
-			if (options.onResourceLoaded) options.onResourceLoaded();
 		}
 
+		this.loadedResources_[id] = resource;
+
+		if (options.onResourceLoaded) options.onResourceLoaded();
+	}
+
+	renderImage_(attrs, options) {
 		const title = this.getAttr_(attrs, 'title');
 		const href = this.getAttr_(attrs, 'src');
 
@@ -108,7 +108,7 @@ class MdToHtml {
 		const resourceId = Resource.urlToId(href);
 		const resource = this.loadedResources_[resourceId];
 		if (!resource) {
-			loadResource(resourceId);
+			this.loadResource(resourceId, options);
 			return '';
 		}
 
@@ -125,6 +125,27 @@ class MdToHtml {
 		return '[Image: ' + htmlentities(resource.title) + ' (' + htmlentities(mime) + ')]';
 	}
 
+	renderImageHtml_(before, src, after, options) {
+		const resourceId = Resource.urlToId(src);
+		const resource = this.loadedResources_[resourceId];
+		if (!resource) {
+			this.loadResource(resourceId, options);
+			return '';
+		}
+
+		if (!resource.id) return ''; // Resource is being loaded
+
+		const mime = resource.mime ? resource.mime.toLowerCase() : '';
+		if (Resource.isSupportedImageMimeType(mime)) {
+			let newSrc = './' + Resource.filename(resource);
+			if (this.resourceBaseUrl_ !== null) newSrc = this.resourceBaseUrl_ + newSrc;
+			let output = '<img ' + before + ' data-resource-id="' + resource.id + '" src="' + newSrc + '" ' + after + '/>';
+			return output;
+		}
+
+		return '[Image: ' + htmlentities(resource.title) + ' (' + htmlentities(mime) + ')]';
+	}
+
 	renderOpenLink_(attrs, options) {
 		let href = this.getAttr_(attrs, 'href');
 		const text = this.getAttr_(attrs, 'text');
@@ -472,6 +493,12 @@ class MdToHtml {
 			}
 		}
 
+		renderedBody = renderedBody.replace(/<img(.*?)src=["'](.*?)["'](.*?)\/>/g, (v, before, src, after) => {
+			if (!Resource.isResourceUrl(src)) return '<img ' + before + ' src="' + src + '" ' + after + '/>';
+			return this.renderImageHtml_(before, src, after, options);
+		});
+
+
 		// https://necolas.github.io/normalize.css/
 		const normalizeCss = `
 			html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
@@ -561,7 +588,7 @@ class MdToHtml {
 				border-bottom: 1px solid ` + style.htmlDividerColor + `;
 			}
 			img {
-				width: auto;
+				/* width: auto; */
 				max-width: 100%;
 			}
 			.inline-code {

docs/faq/index.html

@@ -260,7 +260,7 @@
 <li>On your WebDAV service, copy all the Joplin files from the old location to the new one. Make sure to also copy the <code>.resource</code> directory as it contains your images and other attachments.</li>
 <li>Once it&#39;s done, open Joplin again and change the WebDAV URL.</li>
 <li>Synchronise to verify that everything is working.</li>
-<li>Do step 4 and 5 for all the other Joplin clients you need to sync.</li>
+<li>Do step 5 and 6 for all the other Joplin clients you need to sync.</li>
 </ol>
 <h1 id="how-can-i-easily-enter-markdown-tags-in-android-">How can I easily enter Markdown tags in Android?</h1>
 <p>You may use a special keyboard such as <a href="https://play.google.com/store/apps/details?id=kl.ime.oh&amp;hl=en">Multiling O Keyboard</a>, which has shortcuts to create Markdown tags. <a href="https://discourse.joplin.cozic.net/t/android-create-new-list-item-with-enter/585/2?u=laurent">More information in this post</a>.</p>
@@ -270,6 +270,20 @@
 <p>Short answer: no. The end to end encryption that Joplin implements is to protect the data during transmission and on the cloud service so that only you can access it.</p>
 <p>On the local device it is assumed that the data is safe due to the OS built-in security features. If additional security is needed it&#39;s always possible to put the notes on an encrypted Truecrypt drive for instance.</p>
 <p>If someone that you don&#39;t trust has access to the computer, they can put a keylogger anyway so any local encryption or PIN access would not be useful.</p>
+<h1 id="webdav-synchronisation-is-not-working">WebDAV synchronisation is not working</h1>
+<h2 id="-forbidden-error-in-strato">&quot;Forbidden&quot; error in Strato</h2>
+<p>For example:</p>
+<pre><code>MKCOL .sync/: Unknown error 2 (403): &lt;!DOCTYPE HTML PUBLIC &quot;-//IETF//DTD HTML 2.0//EN&quot;&gt;
+&lt;html&gt;&lt;head&gt;
+&lt;title&gt;403 Forbidden&lt;/title&gt;
+&lt;/head&gt;&lt;body&gt;
+&lt;h1&gt;Forbidden&lt;/h1&gt;
+&lt;p&gt;You don&#39;t have permission to access /.sync/
+on this server.&lt;/p&gt;
+&lt;/body&gt;&lt;/html&gt;
+</code></pre><p>In this case, <a href="https://github.com/laurent22/joplin/issues/309">make sure you enter the correct WebDAV URL</a>.</p>
+<h2 id="nginx-sync-not-working">Nginx sync not working</h2>
+<p>As of now, Joplin is not compatible with the Nginx WebDAV server: <a href="https://github.com/laurent22/joplin/issues/808">https://github.com/laurent22/joplin/issues/808</a></p>
 <h1 id="why-is-it-named-joplin-">Why is it named Joplin?</h1>
 <p>The name comes from the composer and pianist <a href="https://en.wikipedia.org/wiki/Scott_Joplin">Scott Joplin</a>, which I often listen to. His name is also easy to remember and type so it fell like a good choice. And, to quote a user on Hacker News, &quot;though Scott Joplin&#39;s ragtime musical style has a lot in common with some very informal music, his own approach was more educated, sophisticated, and precise. Every note was in its place for a reason, and he was known to prefer his pieces to be performed exactly as written. So you could say that compared to the people who came before him, his notes were more organized&quot;.</p>
 

docs/index.html

@@ -469,8 +469,9 @@ $$
 - [ ] Eggs
 </code></pre><p>The checkboxes can then be ticked in the mobile and desktop applications.</p>
 <h2 id="html-support">HTML support</h2>
-<p>Only the <code>&lt;br&gt;</code> tag is supported - it can be used to force a new line, which is convenient to insert new lines inside table cells. For security reasons, other HTML tags are not supported.</p>
+<p>It is generally recommended to enter the notes as Markdown as it makes the notes easier to edit. However for cases where certain features aren&#39;t supported (such as strikethrough or to highlight text), you can also use HTML code directly. For example this would be a valid note:</p>
-<h1 id="donations">Donations</h1>
+<pre><code>This is &lt;s&gt;strikethrough text&lt;/s&gt; mixed with regular **Markdown**.
+</code></pre><h1 id="donations">Donations</h1>
 <p>Donations to Joplin support the development of the project. Developing quality applications mostly takes time, but there are also some expenses, such as digital certificates to sign the applications, app store fees, hosting, etc. Most of all, your donation will make it possible to keep up the current development standard.</p>
 <p>Please see the <a href="https://joplin.cozic.net/donate/">donation page</a> for information on how to support the development of Joplin.</p>
 <h1 id="community">Community</h1>

readme/faq.md

@@ -6,13 +6,13 @@ It seems to be due to the setting `set term=ansi` in .vimrc. Removing it should
 
 When changing the WebDAV URL, make sure that the new location has the same exact content as the old location (i.e. copy all the Joplin data over to the new location). Otherwise, if there's nothing on the new location, Joplin is going to think that you have deleted all your data and will proceed to delete it locally too. So to change the WebDAV URL, please follow these steps:
 
-0. Make a backup of your Joplin data in case something goes wrong. Export to a JEX archive for example.
+1. Make a backup of your Joplin data in case something goes wrong. Export to a JEX archive for example.
-1. Synchronise one last time all your data from a Joplin client (for example, from the desktop client)
+2. Synchronise one last time all your data from a Joplin client (for example, from the desktop client)
-2. Close the Joplin client.
+3. Close the Joplin client.
-3. On your WebDAV service, copy all the Joplin files from the old location to the new one. Make sure to also copy the `.resource` directory as it contains your images and other attachments.
+4. On your WebDAV service, copy all the Joplin files from the old location to the new one. Make sure to also copy the `.resource` directory as it contains your images and other attachments.
-4. Once it's done, open Joplin again and change the WebDAV URL.
+5. Once it's done, open Joplin again and change the WebDAV URL.
-5. Synchronise to verify that everything is working.
+6. Synchronise to verify that everything is working.
-6. Do step 4 and 5 for all the other Joplin clients you need to sync.
+7. Do step 5 and 6 for all the other Joplin clients you need to sync.
 
 # How can I easily enter Markdown tags in Android?
 
@@ -30,6 +30,27 @@ On the local device it is assumed that the data is safe due to the OS built-in s
 
 If someone that you don't trust has access to the computer, they can put a keylogger anyway so any local encryption or PIN access would not be useful.
 
+# WebDAV synchronisation is not working
+
+## "Forbidden" error in Strato
+
+For example:
+
+    MKCOL .sync/: Unknown error 2 (403): <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
+    <html><head>
+    <title>403 Forbidden</title>
+    </head><body>
+    <h1>Forbidden</h1>
+    <p>You don't have permission to access /.sync/
+    on this server.</p>
+    </body></html>
+
+In this case, [make sure you enter the correct WebDAV URL](https://github.com/laurent22/joplin/issues/309).
+
+## Nginx sync not working
+
+As of now, Joplin is not compatible with the Nginx WebDAV server: https://github.com/laurent22/joplin/issues/808
+
 # Why is it named Joplin?
 
 The name comes from the composer and pianist [Scott Joplin](https://en.wikipedia.org/wiki/Scott_Joplin), which I often listen to. His name is also easy to remember and type so it fell like a good choice. And, to quote a user on Hacker News, "though Scott Joplin's ragtime musical style has a lot in common with some very informal music, his own approach was more educated, sophisticated, and precise. Every note was in its place for a reason, and he was known to prefer his pieces to be performed exactly as written. So you could say that compared to the people who came before him, his notes were more organized".