diff --git a/src/reference.js b/src/reference.js
index 76848f01e..a1256912f 100644
--- a/src/reference.js
+++ b/src/reference.js
@@ -1,14 +1,11 @@
-import { registerCustomPickerElement, registerWidget, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Components/NcRichText.js'
-import Vue from 'vue'
-
-import TablesSmartPicker from './views/SmartPicker.vue'
+import { registerCustomPickerElement, registerWidget, NcCustomPickerRenderResult } from '@nextcloud/vue/dist/Functions/registerReference.js'
 
 __webpack_nonce__ = btoa(OC.requestToken) // eslint-disable-line
 __webpack_public_path__ = OC.linkTo('tables', 'js/') // eslint-disable-line
 
 registerWidget('tables_link', async (el, { richObjectType, richObject, accessible }) => {
-	const { default: Vue } = await import(/* webpackChunkName: "reference-table-lazy" */'vue')
-	const { default: TableReferenceWidget } = await import(/* webpackChunkName: "reference-table-lazy" */'./views/LinkReferenceWidget.vue')
+	const { default: Vue } = await import('vue')
+	const { default: TableReferenceWidget } = await import('./views/LinkReferenceWidget.vue')
 	Vue.mixin({ methods: { t, n } })
 	const Widget = Vue.extend(TableReferenceWidget)
 	new Widget({
@@ -20,9 +17,11 @@ registerWidget('tables_link', async (el, { richObjectType, richObject, accessibl
 	}).$mount(el)
 })
 
-registerWidget('tables_content', async (el, { richObjectType, richObject, accessible }) => {
+registerWidget('tables_content', async (el, { richObjectType, richObject, accessible, interactive = true }) => {
 	const { default: Vue } = await import(/* webpackChunkName: "reference-table-lazy" */'vue')
-	const { default: TableReferenceWidget } = await import(/* webpackChunkName: "reference-table-lazy" */'./views/ContentReferenceWidget.vue')
+	const { default: TableReferenceWidget } = interactive
+		? await import(/* webpackChunkName: "reference-table-lazy" */'./views/ContentReferenceWidget.vue')
+		: await import(/* webpackChunkName: "reference-table-lazy" */'./views/LinkReferenceWidget.vue')
 	Vue.mixin({ methods: { t, n } })
 	const Widget = Vue.extend(TableReferenceWidget)
 	new Widget({
@@ -32,9 +31,11 @@ registerWidget('tables_content', async (el, { richObjectType, richObject, access
 			accessible,
 		},
 	}).$mount(el)
-})
+}, () => {}, { hasInteractiveView: true })
 
-registerCustomPickerElement('tables-ref-tables', (el, { providerId, accessible }) => {
+registerCustomPickerElement('tables-ref-tables', async (el, { providerId, accessible }) => {
+	const { default: Vue } = await import('vue')
+	const { default: TablesSmartPicker } = await import('./views/SmartPicker.vue')
 	const Element = Vue.extend(TablesSmartPicker)
 	const vueElement = new Element({
 		propsData: {