From ea1237a20d144324f3f9d642d26a4b50666531bc Mon Sep 17 00:00:00 2001
From: Johannes Wilm <mail@johanneswilm.org>
Date: Thu, 5 Feb 2026 17:20:24 +0100
Subject: [PATCH 1/3] Make link in viewing mode non-editable (incl. tests)

---
 .../src/components/toolbar/LinkInput.test.js  | 227 ++++++++++++++++++
 .../src/components/toolbar/LinkInput.vue      |  20 +-
 2 files changed, 245 insertions(+), 2 deletions(-)

diff --git a/packages/super-editor/src/components/toolbar/LinkInput.test.js b/packages/super-editor/src/components/toolbar/LinkInput.test.js
index 4fc3718053..cdac74ecd4 100644
--- a/packages/super-editor/src/components/toolbar/LinkInput.test.js
+++ b/packages/super-editor/src/components/toolbar/LinkInput.test.js
@@ -555,4 +555,231 @@ describe('LinkInput - getLinkHrefAtSelection type safety and boundary checking',
       expect(wrapper.vm.rawUrl).toBe('');
     });
   });
+
+  describe('Viewing mode behavior', () => {
+    it('should detect viewing mode correctly', async () => {
+      const mockEditor = createMockEditor();
+      mockEditor.options = { documentMode: 'viewing' };
+
+      const wrapper = mount(LinkInput, {
+        props: {
+          editor: mockEditor,
+          closePopover: mockClosePopover,
+        },
+      });
+
+      await nextTick();
+
+      expect(wrapper.vm.isViewingMode).toBe(true);
+    });
+
+    it('should detect non-viewing mode correctly', async () => {
+      const mockEditor = createMockEditor();
+      mockEditor.options = { documentMode: 'editing' };
+
+      const wrapper = mount(LinkInput, {
+        props: {
+          editor: mockEditor,
+          closePopover: mockClosePopover,
+        },
+      });
+
+      await nextTick();
+
+      expect(wrapper.vm.isViewingMode).toBe(false);
+    });
+
+    it('should show "Link details" title in viewing mode', async () => {
+      const mockEditor = createMockEditor();
+      mockEditor.options = { documentMode: 'viewing' };
+      const linkMarkType = { name: 'link' };
+      mockEditor.state.selection.$from.nodeAfter = {
+        marks: [{ type: linkMarkType, attrs: { href: 'https://example.com' } }],
+      };
+
+      const wrapper = mount(LinkInput, {
+        props: {
+          editor: mockEditor,
+          closePopover: mockClosePopover,
+          showInput: true,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      const titles = wrapper.findAll('.link-title');
+      expect(titles.length).toBeGreaterThan(0);
+      expect(titles[0].text()).toBe('Link details');
+    });
+
+    it('should show "Edit link" title in editing mode when link exists', async () => {
+      const mockEditor = createMockEditor();
+      mockEditor.options = { documentMode: 'editing' };
+      const linkMark = mockEditor.state.schema.marks.link;
+      mockEditor.state.selection.$from.nodeAfter = {
+        marks: [{ type: linkMark, attrs: { href: 'https://example.com' } }],
+      };
+
+      const wrapper = mount(LinkInput, {
+        props: {
+          editor: mockEditor,
+          closePopover: mockClosePopover,
+          showInput: true,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      const titles = wrapper.findAll('.link-title');
+      expect(titles.length).toBeGreaterThan(0);
+      expect(titles[0].text()).toBe('Edit link');
+    });
+
+    it('should make text input readonly in viewing mode', async () => {
+      const mockEditor = createMockEditor();
+      mockEditor.options = { documentMode: 'viewing' };
+
+      const wrapper = mount(LinkInput, {
+        props: {
+          editor: mockEditor,
+          closePopover: mockClosePopover,
+          showInput: true,
+        },
+      });
+
+      await nextTick();
+
+      const textInput = wrapper.find('input[name="text"]');
+      expect(textInput.exists()).toBe(true);
+      expect(textInput.attributes('readonly')).toBe('');
+    });
+
+    it('should make URL input readonly in viewing mode', async () => {
+      const mockEditor = createMockEditor();
+      mockEditor.options = { documentMode: 'viewing' };
+
+      const wrapper = mount(LinkInput, {
+        props: {
+          editor: mockEditor,
+          closePopover: mockClosePopover,
+          showInput: true,
+        },
+      });
+
+      await nextTick();
+
+      const urlInput = wrapper.find('input[name="link"]');
+      expect(urlInput.exists()).toBe(true);
+      expect(urlInput.attributes('readonly')).toBe('');
+    });
+
+    it('should not make inputs readonly in editing mode', async () => {
+      const mockEditor = createMockEditor();
+      mockEditor.options = { documentMode: 'editing' };
+
+      const wrapper = mount(LinkInput, {
+        props: {
+          editor: mockEditor,
+          closePopover: mockClosePopover,
+          showInput: true,
+        },
+      });
+
+      await nextTick();
+
+      const textInput = wrapper.find('input[name="text"]');
+      const urlInput = wrapper.find('input[name="link"]');
+      expect(textInput.exists()).toBe(true);
+      expect(urlInput.exists()).toBe(true);
+      expect(textInput.attributes('readonly')).toBeUndefined();
+      expect(urlInput.attributes('readonly')).toBeUndefined();
+    });
+
+    it('should hide Apply and Remove buttons in viewing mode', async () => {
+      const mockEditor = createMockEditor();
+      mockEditor.options = { documentMode: 'viewing' };
+      const linkMarkType = { name: 'link' };
+      mockEditor.state.selection.$from.nodeAfter = {
+        marks: [{ type: linkMarkType, attrs: { href: 'https://example.com' } }],
+      };
+
+      const wrapper = mount(LinkInput, {
+        props: {
+          editor: mockEditor,
+          closePopover: mockClosePopover,
+          showInput: true,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      expect(wrapper.find('.link-buttons').exists()).toBe(false);
+    });
+
+    it('should show Apply button in editing mode', async () => {
+      const mockEditor = createMockEditor();
+      mockEditor.options = { documentMode: 'editing' };
+
+      const wrapper = mount(LinkInput, {
+        props: {
+          editor: mockEditor,
+          closePopover: mockClosePopover,
+          showInput: true,
+        },
+      });
+
+      await nextTick();
+
+      expect(wrapper.find('.submit-btn').exists()).toBe(true);
+    });
+
+    it('should show Remove button in editing mode when editing existing link', async () => {
+      const mockEditor = createMockEditor();
+      mockEditor.options = { documentMode: 'editing' };
+      const linkMark = mockEditor.state.schema.marks.link;
+      mockEditor.state.selection.$from.nodeAfter = {
+        marks: [{ type: linkMark, attrs: { href: 'https://example.com' } }],
+      };
+
+      const wrapper = mount(LinkInput, {
+        props: {
+          editor: mockEditor,
+          closePopover: mockClosePopover,
+          showInput: true,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      expect(wrapper.find('.remove-btn').exists()).toBe(true);
+    });
+
+    it('should keep open link button functional in viewing mode', async () => {
+      const mockEditor = createMockEditor();
+      mockEditor.options = { documentMode: 'viewing' };
+      const linkMark = mockEditor.state.schema.marks.link;
+      mockEditor.state.selection.$from.nodeAfter = {
+        marks: [{ type: linkMark, attrs: { href: 'https://example.com' } }],
+      };
+
+      const wrapper = mount(LinkInput, {
+        props: {
+          editor: mockEditor,
+          closePopover: mockClosePopover,
+          showInput: true,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      const openLinkBtn = wrapper.find('.open-link-icon');
+      expect(openLinkBtn.exists()).toBe(true);
+      expect(openLinkBtn.classes()).not.toContain('disabled');
+    });
+  });
 });
diff --git a/packages/super-editor/src/components/toolbar/LinkInput.vue b/packages/super-editor/src/components/toolbar/LinkInput.vue
index 9f10b16143..86a2ac9eca 100644
--- a/packages/super-editor/src/components/toolbar/LinkInput.vue
+++ b/packages/super-editor/src/components/toolbar/LinkInput.vue
@@ -138,6 +138,8 @@ const isEditing = computed(() => !isAnchor.value && !!getLinkHrefAtSelection());
 
 const isDisabled = computed(() => !validUrl.value);
 
+const isViewingMode = computed(() => props.editor?.options?.documentMode === 'viewing');
+
 const openLink = () => {
   window.open(url.value, '_blank');
 };
@@ -209,6 +211,7 @@ const handleRemove = () => {
 <template>
   <div class="link-input-ctn" :class="{ 'high-contrast': isHighContrastMode }">
     <div class="link-title" v-if="isAnchor">Page anchor</div>
+    <div class="link-title" v-else-if="isViewingMode">Link details</div>
     <div class="link-title" v-else-if="isEditing">Edit link</div>
     <div class="link-title" v-else>Add link</div>
 
@@ -216,7 +219,7 @@ const handleRemove = () => {
       <!-- Text input -->
       <div class="input-row text-input-row">
         <div class="input-icon text-input-icon">T</div>
-        <input type="text" name="text" placeholder="Text" v-model="text" @keydown.enter.stop.prevent="handleSubmit" />
+        <input type="text" name="text" placeholder="Text" v-model="text" :readonly="isViewingMode" @keydown.enter.stop.prevent="handleSubmit" />
       </div>
 
       <!-- URL input -->
@@ -228,6 +231,7 @@ const handleRemove = () => {
           placeholder="Type or paste a link"
           :class="{ error: urlError }"
           v-model="rawUrl"
+          :readonly="isViewingMode"
           @keydown.enter.stop.prevent="handleSubmit"
           @keydown="urlError = false"
         />
@@ -240,7 +244,7 @@ const handleRemove = () => {
           data-item="btn-link-open"
         ></div>
       </div>
-      <div class="input-row link-buttons">
+      <div class="input-row link-buttons" v-if="!isViewingMode">
         <button class="remove-btn" @click="handleRemove" v-if="isEditing" data-item="btn-link-remove">
           <div class="remove-btn__icon" v-html="toolbarIcons.removeLink"></div>
           Remove
@@ -307,6 +311,18 @@ const handleRemove = () => {
         outline: none;
         border: 1px solid #1355ff;
       }
+
+      &[readonly] {
+        background-color: #f5f5f5;
+        cursor: default;
+        color: #888;
+        border-color: #e0e0e0;
+
+        &:active,
+        &:focus {
+          border-color: #e0e0e0;
+        }
+      }
     }
   }
 

From ea75ba112cc85a3dd1d6a9b3fdbbb02877f8d373 Mon Sep 17 00:00:00 2001
From: Johannes Wilm <mail@johanneswilm.org>
Date: Thu, 5 Feb 2026 17:39:24 +0100
Subject: [PATCH 2/3] fix: prevent submit handling in link dialog when in view
 mode

---
 .../src/components/toolbar/LinkInput.test.js  | 27 +++++++++++++++++++
 .../src/components/toolbar/LinkInput.vue      |  7 +++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/super-editor/src/components/toolbar/LinkInput.test.js b/packages/super-editor/src/components/toolbar/LinkInput.test.js
index cdac74ecd4..a9e5202878 100644
--- a/packages/super-editor/src/components/toolbar/LinkInput.test.js
+++ b/packages/super-editor/src/components/toolbar/LinkInput.test.js
@@ -781,5 +781,32 @@ describe('LinkInput - getLinkHrefAtSelection type safety and boundary checking',
       expect(openLinkBtn.exists()).toBe(true);
       expect(openLinkBtn.classes()).not.toContain('disabled');
     });
+
+    it('should not call handleSubmit in viewing mode', async () => {
+      const mockEditor = createMockEditor();
+      mockEditor.options = { documentMode: 'viewing' };
+      const linkMark = mockEditor.state.schema.marks.link;
+      mockEditor.state.selection.$from.nodeAfter = {
+        marks: [{ type: linkMark, attrs: { href: 'https://example.com' } }],
+      };
+
+      const wrapper = mount(LinkInput, {
+        props: {
+          editor: mockEditor,
+          closePopover: mockClosePopover,
+          showInput: true,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      wrapper.vm.handleSubmit();
+
+      // Verify that link modification commands were not called
+      expect(mockEditor.commands.toggleLink).not.toHaveBeenCalled();
+      expect(mockEditor.commands.unsetLink).not.toHaveBeenCalled();
+      expect(mockClosePopover).not.toHaveBeenCalled();
+    });
   });
 });
diff --git a/packages/super-editor/src/components/toolbar/LinkInput.vue b/packages/super-editor/src/components/toolbar/LinkInput.vue
index 86a2ac9eca..9be0274a5f 100644
--- a/packages/super-editor/src/components/toolbar/LinkInput.vue
+++ b/packages/super-editor/src/components/toolbar/LinkInput.vue
@@ -174,6 +174,9 @@ const handleSubmit = () => {
   const editor = props.editor;
   if (!editor) return;
 
+  // Prevent form submission in viewing mode
+  if (isViewingMode.value) return;
+
   // If the URL is cleared, simply remove the link.
   if (!rawUrl.value) {
     if (editor.commands?.unsetLink) editor.commands.unsetLink();
@@ -219,7 +222,7 @@ const handleRemove = () => {
       <!-- Text input -->
       <div class="input-row text-input-row">
         <div class="input-icon text-input-icon">T</div>
-        <input type="text" name="text" placeholder="Text" v-model="text" :readonly="isViewingMode" @keydown.enter.stop.prevent="handleSubmit" />
+        <input type="text" name="text" placeholder="Text" v-model="text" :readonly="isViewingMode" @keydown.enter.stop.prevent="!isViewingMode && handleSubmit" />
       </div>
 
       <!-- URL input -->
@@ -232,7 +235,7 @@ const handleRemove = () => {
           :class="{ error: urlError }"
           v-model="rawUrl"
           :readonly="isViewingMode"
-          @keydown.enter.stop.prevent="handleSubmit"
+          @keydown.enter.stop.prevent="!isViewingMode && handleSubmit"
           @keydown="urlError = false"
         />
 

From e0be9cb0a6f2ba7ee5ae946d2f6bcf6fc4ed2cec Mon Sep 17 00:00:00 2001
From: Johannes Wilm <mail@johanneswilm.org>
Date: Fri, 6 Feb 2026 06:13:02 +0100
Subject: [PATCH 3/3] fix: handle submit in editing mode

---
 .../src/components/toolbar/LinkInput.test.js  | 34 +++++++++++++++++--
 .../src/components/toolbar/LinkInput.vue      |  8 ++---
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/packages/super-editor/src/components/toolbar/LinkInput.test.js b/packages/super-editor/src/components/toolbar/LinkInput.test.js
index a9e5202878..afcdb35445 100644
--- a/packages/super-editor/src/components/toolbar/LinkInput.test.js
+++ b/packages/super-editor/src/components/toolbar/LinkInput.test.js
@@ -68,7 +68,11 @@ describe('LinkInput - getLinkHrefAtSelection type safety and boundary checking',
             }),
           },
           doc: {
-            resolve: vi.fn(),
+            resolve: vi.fn(() => ({
+              parent: { inlineContent: true },
+              min: vi.fn(function (other) { return this; }),
+              max: vi.fn(function (other) { return this; }),
+            })),
           },
         },
         dispatch: vi.fn(),
@@ -782,7 +786,33 @@ describe('LinkInput - getLinkHrefAtSelection type safety and boundary checking',
       expect(openLinkBtn.classes()).not.toContain('disabled');
     });
 
-    it('should not call handleSubmit in viewing mode', async () => {
+    it('should handle submit in editing mode', async () => {
+      const mockEditor = createMockEditor();
+      mockEditor.options = { documentMode: 'editing' };
+      const linkMark = mockEditor.state.schema.marks.link;
+      mockEditor.state.selection.$from.nodeAfter = {
+        marks: [{ type: linkMark, attrs: { href: 'https://example.com' } }],
+      };
+
+      const wrapper = mount(LinkInput, {
+        props: {
+          editor: mockEditor,
+          closePopover: mockClosePopover,
+          showInput: true,
+        },
+      });
+
+      await nextTick();
+      await nextTick();
+
+      wrapper.vm.handleSubmit();
+
+      // Verify that link modification commands were called
+      expect(mockEditor.commands.toggleLink).toHaveBeenCalled();
+      expect(mockClosePopover).toHaveBeenCalled();
+    });
+
+    it('should not handle submit in viewing mode', async () => {
       const mockEditor = createMockEditor();
       mockEditor.options = { documentMode: 'viewing' };
       const linkMark = mockEditor.state.schema.marks.link;
diff --git a/packages/super-editor/src/components/toolbar/LinkInput.vue b/packages/super-editor/src/components/toolbar/LinkInput.vue
index 9be0274a5f..b7e020259d 100644
--- a/packages/super-editor/src/components/toolbar/LinkInput.vue
+++ b/packages/super-editor/src/components/toolbar/LinkInput.vue
@@ -171,12 +171,12 @@ onMounted(() => {
 
 // --- Link logic moved here ---
 const handleSubmit = () => {
-  const editor = props.editor;
-  if (!editor) return;
-
   // Prevent form submission in viewing mode
   if (isViewingMode.value) return;
 
+  const editor = props.editor;
+  if (!editor) return;
+
   // If the URL is cleared, simply remove the link.
   if (!rawUrl.value) {
     if (editor.commands?.unsetLink) editor.commands.unsetLink();
@@ -235,7 +235,7 @@ const handleRemove = () => {
           :class="{ error: urlError }"
           v-model="rawUrl"
           :readonly="isViewingMode"
-          @keydown.enter.stop.prevent="!isViewingMode && handleSubmit"
+          @keydown.enter.stop.prevent="handleSubmit"
           @keydown="urlError = false"
         />