drop/vuex

package.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",
@@ -142,7 +141,7 @@
     "raw-loader": "^4.0.2",
     "rollup-plugin-webpack-stats": "^1.2.4-beta.6",
     "typescript": "^5.7.3",
-    "vite": "^5.4.14",
+    "vite": "^6.2.0",
     "vite-plugin-commonjs": "^0.10.4",
     "vitest": "^3.0.7",
     "vue-demi": "^0.14.10",

src/components/Editor/EditorOutline.vue

@@ -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/TableOfContents.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/Wrapper.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 @@
 	}),
 
 	computed: {
-		...mapState({
-			viewWidth: (state) => state.text.viewWidth,
-		}),
 		showOutline() {
 			return this.isAbleToShowOutline
 				? this.outline.visible

src/components/Menu/ActionList.vue

@@ -38,7 +38,6 @@
 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 @@
 		ActionListItem,
 	},
 	extends: BaseActionEntry,
-	mixins: [useStore, useOutlineStateMixin, useMenuIDMixin],
+	mixins: [useOutlineStateMixin, useMenuIDMixin],
 	props: {
 		forceEnabled: {
 			type: Boolean,

src/components/Menu/BaseActionEntry.js

@@ -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/editor.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/files.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/helpers/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)
 		})
 	},

src/main.js

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import store from './store/index.js'
 // eslint-disable-next-line import/no-unresolved, n/no-missing-import
 import 'vite/modulepreload-polyfill'
 
@@ -18,7 +17,6 @@ if (document.getElementById('app-content')) {
 		const DirectEditing = imports[1].default
 		const vm = new Vue({
 			render: h => h(DirectEditing),
-			store,
 		})
 		vm.$mount(document.getElementById('app-content'))
 	})

src/nodes/Heading.js

@@ -4,10 +4,7 @@
  */
 
 import TipTapHeading from '@tiptap/extension-heading'
-import headingAnchor, { headingAnchorPluginKey } from '../plugins/headingAnchor.js'
-import store from '../store/index.js'
-
-const setHeadings = (val) => store.dispatch('text/setHeadings', val)
+import headingAnchor from '../plugins/headingAnchor.js'
 
 const Heading = TipTapHeading.extend({
 
@@ -18,13 +15,6 @@ const Heading = TipTapHeading.extend({
 		}), {})
 	},
 
-	// sync heading data structure to the vuex store
-	onUpdate({ editor }) {
-		const headings = headingAnchorPluginKey
-			.getState(editor.state)?.headings ?? []
-		setHeadings(headings)
-	},
-
 	addProseMirrorPlugins() {
 		return [headingAnchor()]
 	},

src/nodes/ImageView.vue

@@ -114,11 +114,9 @@
 
 <script>
 import ClickOutside from 'vue-click-outside'
-import { mapGetters } from 'vuex'
 import { NcButton } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import ShowImageModal from '../components/ImageView/ShowImageModal.vue'
-import store from '../mixins/store.js'
 import { useAttachmentResolver } from '../components/Editor.provider.js'
 import { emit } from '@nextcloud/event-bus'
 import { NodeViewWrapper } from '@tiptap/vue-2'
@@ -147,7 +145,6 @@ export default {
 		ClickOutside,
 	},
 	mixins: [
-		store,
 		useAttachmentResolver,
 	],
 	props: ['editor', 'node', 'extension', 'updateAttributes', 'deleteNode'], // eslint-disable-line
@@ -168,9 +165,6 @@ export default {
 		}
 	},
 	computed: {
-		...mapGetters({
-			imageAttachments: 'text/imageAttachments',
-		}),
 		attachmentType() {
 			if (this.attachment) {
 				return this.attachment.isImage ? 'image' : 'media'

src/plugins/extractHeadings.js

@@ -9,9 +9,10 @@ import { slugify } from './slug.js'
  * Extract heading data structure from doc
  *
  * @param {Document} doc - the prosemirror doc
+ * @param {Array} oldVal - the previous headings
  * @return {Array} headings found in the doc
  */
-export default function extractHeadings(doc) {
+export default function extractHeadings(doc, oldVal = []) {
 	const counter = new Map()
 	const headings = []
 
@@ -28,20 +29,24 @@ export default function extractHeadings(doc) {
 		return 'h-' + id
 	}
 
-	doc.descendants((node, offset) => {
+	doc.descendants((node, offset, _parent, index) => {
 		if (node.type.name !== 'heading') {
 			return
 		}
 		const text = node.textContent
 		// ignore empty headings
 		if (!text) return
 		const id = getId(text)
-		headings.push(Object.freeze({
+		const old = oldVal.at(index)
+		const prev = old?.id === id ? { previous: old.level } : {}
+		const heading = Object.freeze({
 			level: node.attrs.level,
 			text,
 			id,
 			offset,
-		}))
+			...prev,
+		})
+		headings.push(heading)
 	})
 
 	return headings

src/public.js

@@ -15,7 +15,6 @@ import {
 import { logger } from './helpers/logger.js'
 import { openMimetypes } from './helpers/mime.js'
 import { documentReady } from './helpers/index.js'
-import store from './store/index.js'
 import { emit, subscribe } from '@nextcloud/event-bus'
 import RichWorkspace from './views/RichWorkspace.vue'
 
@@ -82,7 +81,6 @@ const filesWorkspacePlugin = {
 					path: fileList.getCurrentDirectory(),
 					hasRichWorkspace: true,
 				},
-				store,
 			}).$mount(this.el)
 			subscribe('files:navigation:changed', () => {
 				// Expose if the default file list is active to the component
@@ -126,7 +124,6 @@ const loadEditor = ({ sharingToken, mimetype, fileId, $el }) => {
 						fileId,
 					},
 				}),
-				store,
 			})
 				.$mount($el)