Merge pull request #6930 from nextcloud/drop/vuex

drop/vuex

Author: juliusknorr

package-lock.json

@@ -108,7 +108,6 @@
     "vue": "^2.7.16",
     "vue-click-outside": "^1.1.0",
     "vue-material-design-icons": "^5.3.1",
-    "vuex": "^3.6.2",
     "webdav": "^5.7.1",
     "y-prosemirror": "^1.2.15",
     "y-protocols": "^1.0.6",

package.json

@@ -25,7 +25,6 @@ import { NcButton } from '@nextcloud/vue'
 import TableOfContents from './TableOfContents.vue'
 import { useOutlineStateMixin, useOutlineActions } from './Wrapper.provider.js'
 import { Close } from './../icons.js'
-import useStore from '../../mixins/store.js'
 import { useIsMobileMixin } from '../Editor.provider.js'
 
 export default {
@@ -37,7 +36,6 @@ export default {
 	},
 	mixins: [
 		useIsMobileMixin,
-		useStore,
 		useOutlineStateMixin,
 		useOutlineActions,
 	],

src/components/Editor/EditorOutline.vue

@@ -23,26 +23,28 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import { useEditorMixin } from '../Editor.provider.js'
-import useStore from '../../mixins/store.js'
+import { useEditorMixin } from '../../components/Editor.provider.js'
+import { headingAnchorPluginKey } from '../../plugins/headingAnchor.js'
 
 export default {
 	name: 'TableOfContents',
-	mixins: [useStore, useEditorMixin],
+	mixins: [useEditorMixin],
 	data: () => ({
 		initialRender: true,
+		headings: [],
 	}),
-	computed: {
-		...mapState({
-			headings: (state) => state.text.headings,
-		}),
-	},
 	mounted() {
+		if (this.$editor) {
+			this.$editor.on('update', this.updateHeadings)
+			this.updateHeadings()
+		}
 		setTimeout(() => {
 			this.initialRender = false
 		}, 1000)
 	},
+	beforeDestroy() {
+		this.$editor.off('update', this.updateHeadings)
+	},
 	methods: {
 		goto(heading) {
 			document.getElementById(heading.id).scrollIntoView()
@@ -51,6 +53,10 @@ export default {
 				window.location.hash = heading.id
 			})
 		},
+		updateHeadings() {
+			this.headings = headingAnchorPluginKey
+				.getState(this.$editor.state)?.headings ?? []
+		},
 	},
 }
 </script>

src/components/Editor/TableOfContents.vue

@@ -17,12 +17,10 @@
 <script>
 import { useIsRichEditorMixin, useIsRichWorkspaceMixin } from './../Editor.provider.js'
 import { OUTLINE_STATE, OUTLINE_ACTIONS, READ_ONLY_ACTIONS } from './Wrapper.provider.js'
-import useStore from '../../mixins/store.js'
-import { mapState } from 'vuex'
 
 export default {
 	name: 'Wrapper',
-	mixins: [useStore, useIsRichEditorMixin, useIsRichWorkspaceMixin],
+	mixins: [useIsRichEditorMixin, useIsRichWorkspaceMixin],
 	provide() {
 		const val = {}
 
@@ -72,9 +70,6 @@ export default {
 	}),
 
 	computed: {
-		...mapState({
-			viewWidth: (state) => state.text.viewWidth,
-		}),
 		showOutline() {
 			return this.isAbleToShowOutline
 				? this.outline.visible

src/components/Editor/Wrapper.vue

@@ -38,7 +38,6 @@ import { BaseActionEntry } from './BaseActionEntry.js'
 import ActionListItem from './ActionListItem.vue'
 import { getActionState, getIsActive } from './utils.js'
 import { useOutlineStateMixin } from '../Editor/Wrapper.provider.js'
-import useStore from '../../mixins/store.js'
 import { useMenuIDMixin } from './MenuBar.provider.js'
 import debounce from 'debounce'
 
@@ -50,7 +49,7 @@ export default {
 		ActionListItem,
 	},
 	extends: BaseActionEntry,
-	mixins: [useStore, useOutlineStateMixin, useMenuIDMixin],
+	mixins: [useOutlineStateMixin, useMenuIDMixin],
 	props: {
 		forceEnabled: {
 			type: Boolean,

src/components/Menu/ActionList.vue

@@ -10,7 +10,6 @@ import debounce from 'debounce'
 import { useEditorMixin, useIsMobileMixin } from '../Editor.provider.js'
 import { useOutlineActions, useOutlineStateMixin, useReadOnlyActions } from '../Editor/Wrapper.provider.js'
 import { getActionState, getKeys, getKeyshortcuts } from './utils.js'
-import useStore from '../../mixins/store.js'
 
 import './ActionEntry.scss'
 
@@ -21,7 +20,6 @@ const BaseActionEntry = {
 	mixins: [
 		useEditorMixin,
 		useIsMobileMixin,
-		useStore,
 		useOutlineActions,
 		useOutlineStateMixin,
 		useReadOnlyActions,

src/components/Menu/BaseActionEntry.js

@@ -4,7 +4,6 @@
  */
 
 import Vue from 'vue'
-import store from './store/index.js'
 import { subscribe } from '@nextcloud/event-bus'
 import { EDITOR_UPLOAD, HOOK_MENTION_SEARCH, HOOK_MENTION_INSERT, ATTACHMENT_RESOLVER } from './components/Editor.provider.js'
 import { ACTION_ATTACHMENT_PROMPT } from './components/Editor/MediaHandler.provider.js'
@@ -254,7 +253,6 @@ window.OCA.Text.createEditor = async function({
 					scopedSlots,
 				})
 		},
-		store,
 	})
 	return new TextEditorEmbed(vm, data)
 		.onCreate(onCreate)

src/editor.js

@@ -22,14 +22,12 @@ document.addEventListener('DOMContentLoaded', async () => {
 	if (workspaceAvailable && OCA && OCA?.Files?.Settings) {
 		const { default: Vue } = await import('vue')
 		const { default: FilesSettings } = await import('./views/FilesSettings.vue')
-		const { default: store } = await import('./store/index.js')
 
 		Vue.prototype.t = window.t
 		Vue.prototype.n = window.n
 		Vue.prototype.OCA = window.OCA
 		const vm = new Vue({
 			render: h => h(FilesSettings, {}),
-			store,
 		})
 		const el = vm.$mount().$el
 		OCA.Files.Settings.register(new OCA.Files.Settings.Setting('text', {

src/files.js

@@ -16,7 +16,6 @@ import axios from '@nextcloud/axios'
 import TextSvg from '@mdi/svg/svg/text.svg?raw'
 
 import { openMimetypes } from './mime.js'
-import store from '../store/index.js'
 
 const FILE_ACTION_IDENTIFIER = 'Edit with text app'
 
@@ -205,7 +204,6 @@ export const FilesWorkspaceHeader = new Header({
 					hasRichWorkspace,
 					content,
 				},
-				store,
 			}).$mount(el)
 		})
 	},