From b797ce4b15ef2d95a9474a823c7b1ab3d0fec1a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 2 Aug 2019 16:59:49 +0200
Subject: [PATCH] Follow @Tirokk's suggestions:

* Add target="_blank" (on embeds only!)
* When pasting a link, the cursor position is moved after the paste
* Can't reproduce a link slipping into the embed in front of it

@Tirokk it is an unpleasant side efffect that mentions + hastags appear
differently on Edit+View. That's because they don't get parsed from
HTML, it's a one way, they are write only. So, when viewing content,
hashtags and mentions appear as plain links. I don't think I can do
anything about it.

Regarding some links not being embedded: Only those links that have an
oembed provider in this file:
https://github.com/Human-Connection/Human-Connection/blob/f44d0f1f96f97a1001b5edcc32426b5da7ff6074/backend/src/schema/resolvers/embeds/providers.json
...will be embedded. Your example `http://backreaction.blogspot.com` and `https://de.wikipedia.org/wiki/Yin_und_Yang`
have no embed provider and won't be embedded.

We would have to add oembed providers to this list if we wanted to embed those
links, too.
---
 webapp/components/Editor/defaultExtensions.spec.js | 13 +++++++++----
 webapp/components/Editor/nodes/Embed.js            |  7 ++++---
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/webapp/components/Editor/defaultExtensions.spec.js b/webapp/components/Editor/defaultExtensions.spec.js
index 39525352a..5bf8126b0 100644
--- a/webapp/components/Editor/defaultExtensions.spec.js
+++ b/webapp/components/Editor/defaultExtensions.spec.js
@@ -74,10 +74,15 @@ describe('defaultExtensions', () => {
             type: 'paragraph',
           },
           {
-            attrs: {
-              dataEmbedUrl: 'https://www.youtube.com/watch?v=qkdXAtO40Fo',
-            },
-            type: 'embed',
+            content: [
+              {
+                attrs: {
+                  dataEmbedUrl: 'https://www.youtube.com/watch?v=qkdXAtO40Fo',
+                },
+                type: 'embed',
+              },
+            ],
+            type: 'paragraph',
           },
         ],
         type: 'doc',
diff --git a/webapp/components/Editor/nodes/Embed.js b/webapp/components/Editor/nodes/Embed.js
index c51221ab0..8c8281f94 100644
--- a/webapp/components/Editor/nodes/Embed.js
+++ b/webapp/components/Editor/nodes/Embed.js
@@ -3,7 +3,7 @@ import pasteRule from '../commands/pasteRule'
 import { compileToFunctions } from 'vue-template-compiler'
 
 const template = `
-  <a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow">
+  <a class="embed" :href="dataEmbedUrl" rel="noopener noreferrer nofollow" target="_blank">
     <div v-if="embedHtml" v-html="embedHtml" />
     <em> {{ dataEmbedUrl }} </em>
   </a>
@@ -38,8 +38,8 @@ export default class Embed extends Node {
           default: null,
         },
       },
-      group: 'block',
-      selectable: false,
+      group: 'inline',
+      inline: true,
       parseDOM: [
         {
           tag: 'a[href].embed',
@@ -53,6 +53,7 @@ export default class Embed extends Node {
         {
           href: node.attrs.dataEmbedUrl,
           class: 'embed',
+          target: '_blank',
         },
       ],
     }