diff --git a/webapp/components/Editor/index.vue b/webapp/components/Editor/index.vue index 84649f436..590c6c4c8 100644 --- a/webapp/components/Editor/index.vue +++ b/webapp/components/Editor/index.vue @@ -169,10 +169,12 @@ import { Italic, Strike, Underline, - Link, + // Link, History, } from 'tiptap-extensions' import Mention from './nodes/Mention.js' +import Embed from './nodes/Embed.js' +import Link from './nodes/Link.js' import { mapGetters } from 'vuex' let throttleInputEvent @@ -206,6 +208,7 @@ export default { new Italic(), new Strike(), new Underline(), + new Embed(), new Link(), new Heading({ levels: [3, 4] }), new ListItem(), diff --git a/webapp/components/Editor/nodes/Embed.js b/webapp/components/Editor/nodes/Embed.js new file mode 100644 index 000000000..1db3996f4 --- /dev/null +++ b/webapp/components/Editor/nodes/Embed.js @@ -0,0 +1,59 @@ +import { Node } from 'tiptap' + +export default class Embed extends Node { + get name() { + return 'embed' + } + + get schema() { + return { + attrs: { + href: { + default: null, + }, + }, + group: 'block', + selectable: false, + parseDOM: [ + { + tag: 'a[class=embed]', + getAttrs: dom => ({ + href: dom.getAttribute('href'), + }), + }, + ], + toDOM: node => [ + 'a', + { + class: 'embed', + href: node.attrs.href, + }, + ], + } + } + + get view() { + return { + props: ['node', 'updateAttrs', 'view'], + data: () => ({ + title: 'Link Title', + description: 'Some Link Description text which talks a bit about the link.', + }), + computed: { + href: { + get() { + return this.node.attrs.href + }, + set(href) { + this.updateAttrs({ + href, + }) + }, + }, + }, + template: ` +

{{ title }}

{{ description }}

{{ href }}
+ `, + } + } +} diff --git a/webapp/components/Editor/nodes/Link.js b/webapp/components/Editor/nodes/Link.js new file mode 100644 index 000000000..05cc84bc2 --- /dev/null +++ b/webapp/components/Editor/nodes/Link.js @@ -0,0 +1,30 @@ +import { Link as TipTapLink } from 'tiptap-extensions' + +export default class Link extends TipTapLink { + get schema() { + return { + attrs: { + href: { + default: null, + }, + }, + inclusive: false, + parseDOM: [ + { + tag: 'a[href]:not(.embed)', // do not trigger on embed links + getAttrs: dom => ({ + href: dom.getAttribute('href'), + }), + }, + ], + toDOM: node => [ + 'a', + { + ...node.attrs, + rel: 'noopener noreferrer nofollow', + }, + 0, + ], + } + } +}