remove link insertion placeholder (#240)

* remove link insertion placeholder * prettier * remove link insertion placeholder
KonnorRogers · Dec 11, 2024 · 9922d58 · 9922d58
1 parent fc3ea83
commit 9922d58
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 117 deletions.
diff --git a/.changeset/wise-forks-cough.md b/.changeset/wise-forks-cough.md
@@ -0,0 +1,5 @@
+---
+"rhino-editor": patch
+---
+
+Fix: Remove the cursor placeholder for inserting links due to regressions in mobile browsers.
diff --git a/src/exports/extensions/selection.ts b/src/exports/extensions/selection.ts
@@ -1,5 +1,5 @@
 import { Extension } from "@tiptap/core";
-import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
 import type { DecorationAttrs } from "@tiptap/pm/view";
 
@@ -19,11 +19,6 @@ const selectionPlugin = (options: RhinoSelectionOptions) => {
 
         set = set.remove(set.find());
 
-        // Whether selection was explicitly updated by this transaction.
-        // if (!tr.selectionSet) {
-        //   return set
-        // }
-
         const { doc, selection } = tr;
 
         let deco: Decoration | null = null;
@@ -35,62 +30,19 @@ const selectionPlugin = (options: RhinoSelectionOptions) => {
             selection.to,
             options.HTMLAttributes || {},
           );
-        } else {
-          // Show a fake cursor.
-          let widget = document.createElement("placeholder");
-          // TODO: Make this configurable.
-          widget.setAttribute("class", "rhino-insertion-placeholder");
-          widget.setAttribute("readonly", "");
-          widget.setAttribute("contenteditable", "false");
-          deco = Decoration.widget(selection.to, widget, {});
         }
 
         if (deco) {
-          set = DecorationSet.create(doc, [deco]);
+          return DecorationSet.create(doc, [deco]);
         }
 
-        return set;
+        return DecorationSet.empty;
       },
     },
     props: {
       decorations(state) {
         return this.getState(state);
       },
-      handleDOMEvents: {
-        keydown(view, event) {
-          if (event.key === "ArrowLeft") {
-            const { selection } = view.state;
-            const pos = selection.$from;
-
-            // This really bizarre piece of code is to "fix" some weird issue with Decorations and Firefox getting "stuck" on them.
-            // Basically if youre on a line like this:
-            // -> Hello
-            // And your cursor is before the H in Hello, and you hit the "LeftArrow" in Firefox, it will loop to the front. Like so:
-            // Hi
-            // |Hello -> "LeftArrow" -> Hello|
-            // ^ initial cursor position     ^ new cursor position
-            // instead of moving up to the line that says "Hi"
-            if (selection.empty && pos.parentOffset === 0) {
-              if (selection.from - 2 <= 0) {
-                // Call `event.preventDefault()` so that the cursor doesn't jump to front if we're at start of document.
-                event.preventDefault();
-                return false;
-              }
-
-              const tr = view.state.tr.setSelection(
-                TextSelection.create(
-                  view.state.doc,
-                  Math.max(selection.from - 2, 0),
-                  selection.from,
-                ),
-              );
-              view.dispatch(tr);
-              return true;
-            }
-          }
-          return false;
-        },
-      },
     },
   });
 };

diff --git a/src/exports/styles/editor.js b/src/exports/styles/editor.js
@@ -99,28 +99,6 @@ export const cursorStyles = css`
     background: var(--rhino-fake-selection-color);
   }
 
-  /** .fake-cursor-selection is for link "insertions" without selected text. */
-  :where(.rhino-editor) .rhino-insertion-placeholder {
-    display: none;
-    user-select: none;
-  }
-
-  /**
-This is used for showing a fake cursor for selections like link insertions
-*/
-  :where(.rhino-editor)[link-dialog-expanded] .rhino-insertion-placeholder {
-    margin: 0;
-    padding: 0;
-    margin-right: -1px;
-    margin-left: -2px;
-    border-left-width: 4px;
-    border-left-style: solid;
-    border-color: Highlight;
-    position: relative;
-    z-index: 1;
-    display: inline;
-  }
-
   .ProseMirror-separator {
     display: none !important;
   }

diff --git a/src/exports/styles/rhino-editor.css b/src/exports/styles/rhino-editor.css
@@ -99,28 +99,6 @@
     background: var(--rhino-fake-selection-color);
   }
 
-  /** .fake-cursor-selection is for link "insertions" without selected text. */
-  :where(.rhino-editor) .rhino-insertion-placeholder {
-    display: none;
-    user-select: none;
-  }
-
-  /**
-This is used for showing a fake cursor for selections like link insertions
-*/
-  :where(.rhino-editor)[link-dialog-expanded] .rhino-insertion-placeholder {
-    margin: 0;
-    padding: 0;
-    margin-right: -1px;
-    margin-left: -2px;
-    border-left-width: 4px;
-    border-left-style: solid;
-    border-color: Highlight;
-    position: relative;
-    z-index: 1;
-    display: inline;
-  }
-
   .ProseMirror-separator {
     display: none !important;
   }

diff --git a/src/exports/styles/trix.css b/src/exports/styles/trix.css
@@ -440,28 +440,6 @@
     background: var(--rhino-fake-selection-color);
   }
 
-  /** .fake-cursor-selection is for link "insertions" without selected text. */
-  :where(.rhino-editor) .rhino-insertion-placeholder {
-    display: none;
-    user-select: none;
-  }
-
-  /**
-This is used for showing a fake cursor for selections like link insertions
-*/
-  :where(.rhino-editor)[link-dialog-expanded] .rhino-insertion-placeholder {
-    margin: 0;
-    padding: 0;
-    margin-right: -1px;
-    margin-left: -2px;
-    border-left-width: 4px;
-    border-left-style: solid;
-    border-color: Highlight;
-    position: relative;
-    z-index: 1;
-    display: inline;
-  }
-
   .ProseMirror-separator {
     display: none !important;
   }