WIP

Author: max-nextcloud

src/components/Editor/PreviewOptions.vue

@@ -27,14 +27,18 @@
 		<NcActionCaption :name="t('text', 'Preview options')" />
 		<NcActionRadio data-text-preview-option="text-only"
 			close-after-click
+			name="preview-option"
 			value="text-only"
-			@change="$emit('change')">
+			:checked="value === 'text-only'"
+			@change="e => $emit('update:value', e.currentTarget.value)">
 			{{ t('text', 'Text only') }}
 		</NcActionRadio>
 		<NcActionRadio data-text-preview-option="link-preview"
 			close-after-click
-			:checked="true"
-			value="link-preview">
+			name="preview-option"
+			value="link-preview"
+			:checked="value === 'link-preview'"
+			@change="e => $emit('update:value', e.currentTarget.value)">
 			{{ t('text', 'Show link preview') }}
 		</NcActionRadio>
 	</NcActions>
@@ -46,6 +50,12 @@ import DotsVerticalIcon from 'vue-material-design-icons/DotsVertical.vue'
 
 export default {
 	name: 'PreviewOptions',
+	props: {
+		value: {
+			type: String,
+			required: true,
+		},
+	},
 	components: {
 		DotsVerticalIcon,
 		NcActions,

src/nodes/ParagraphView.vue

@@ -23,14 +23,16 @@
 <template>
 	<NodeViewWrapper class="vue-component" as="p">
 		<PreviewOptions v-if="editor.isEditable && href"
-			@change="convertToLink" />
+			:value.sync="value"
+			@update:value="convertToPreview" />
 		<NodeViewContent class="paragraph-content" />
 	</NodeViewWrapper>
 </template>
 
 <script>
 import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-2'
 import PreviewOptions from '../components/Editor/PreviewOptions.vue'
+import { useEditorMixin } from '../components/Editor.provider.js'
 import { getCurrentUser } from '@nextcloud/auth'
 import debounce from 'debounce'
 
@@ -46,8 +48,10 @@ export default {
 		return {
 			href: null,
 			isLoggedIn: getCurrentUser(),
+			value: 'text-only',
 		}
 	},
+	mixins: [ useEditorMixin ],
 	watch: {
 		node: {
 			handler(newNode) {
@@ -71,6 +75,14 @@ export default {
 		this.debouncedUpdateText?.cancel()
 	},
 	methods: {
+		convertToPreview(...args) {
+			console.info(...args)
+			this.$editor.chain()
+				.focus()
+				.setTextSelection(this.getPos())
+				.togglePreview({ href: this.href })
+				.run()
+		},
 		getTextReference(node) {
 			if (!node?.childCount) {
 				return null

src/nodes/Preview.js

@@ -78,22 +78,13 @@ export default Node.create({
 
 	addCommands() {
 		return {
-			setPreview: attributes => ({ commands }) => {
-				return commands.wrapIn(this.name, attributes)
+			setPreview: attrs => ({ commands }) => {
+				const attributes = { ...attrs, title: 'preview' }
+				return commands.setNode(this.name, attributes)
 			},
-			togglePreview: attributes => ({ commands, state }) => {
-				if (!isNodeActive(state, this.name)) {
-					return commands.setPreview(attributes)
-				}
-
-				if (!isNodeActive(state, this.name, attributes)) {
-					return commands.updateAttributes(this.name, attributes)
-				}
-
-				return commands.unsetPreview()
-			},
-			unsetPreview: () => ({ commands }) => {
-				return commands.lift(this.name)
+			togglePreview: attrs => ({ commands }) => {
+				const attributes = { ...attrs, title: 'preview' }
+				return commands.toggleNode(this.name, 'paragraph', attributes)
 			},
 		}
 	},

src/nodes/Preview.vue

@@ -26,7 +26,8 @@
 		contenteditable="false">
 		<NodeViewContent style="display:none" />
 		<PreviewOptions v-if="editor.isEditable"
-			@change="convertToLink" />
+			:value.sync="value"
+			@update:value="convertToParagraph" />
 		<NcReferenceList :text="node.attrs.href"
 			:limit="1" />
 	</NodeViewWrapper>
@@ -46,6 +47,21 @@ export default {
 		PreviewOptions,
 	},
 	props: nodeViewProps,
+	data() {
+		return {
+			value: 'link-preview',
+		}
+	},
+	methods: {
+		convertToParagraph(...args) {
+			console.info(...args)
+			this.$editor.chain()
+				.focus()
+				.setTextSelection(this.getPos())
+				.setNode('paragaph')
+				.run()
+		},
+	},
 }
 </script>