From 9922d584df3fca76960a1a603a169c2c597a0bce Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Tue, 10 Dec 2024 20:28:38 -0500 Subject: [PATCH 1/2] remove link insertion placeholder (#240) * remove link insertion placeholder * prettier * remove link insertion placeholder --- .changeset/wise-forks-cough.md | 5 +++ src/exports/extensions/selection.ts | 54 ++--------------------------- src/exports/styles/editor.js | 22 ------------ src/exports/styles/rhino-editor.css | 22 ------------ src/exports/styles/trix.css | 22 ------------ 5 files changed, 8 insertions(+), 117 deletions(-) create mode 100644 .changeset/wise-forks-cough.md diff --git a/.changeset/wise-forks-cough.md b/.changeset/wise-forks-cough.md new file mode 100644 index 00000000..535bf869 --- /dev/null +++ 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 index c5f7ae15..5c56b913 100644 --- 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 index cfa9cdc9..339b913b 100644 --- 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 index e21a840e..d95f1f1a 100644 --- 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 index 85c361e8..ad83e73e 100644 --- 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; } From 45ffbce540086f44e32f38af01f8de69ffe6e574 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 10 Dec 2024 21:22:15 -0500 Subject: [PATCH 2/2] Version Packages (#241) Co-authored-by: github-actions[bot] --- .changeset/wise-forks-cough.md | 5 ----- CHANGELOG.md | 6 ++++++ package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/wise-forks-cough.md diff --git a/.changeset/wise-forks-cough.md b/.changeset/wise-forks-cough.md deleted file mode 100644 index 535bf869..00000000 --- a/.changeset/wise-forks-cough.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"rhino-editor": patch ---- - -Fix: Remove the cursor placeholder for inserting links due to regressions in mobile browsers. diff --git a/CHANGELOG.md b/CHANGELOG.md index 115f9bc1..da36f4a6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 0.14.3 + +### Patch Changes + +- [#240](https://github.com/KonnorRogers/rhino-editor/pull/240) [`9922d58`](https://github.com/KonnorRogers/rhino-editor/commit/9922d584df3fca76960a1a603a169c2c597a0bce) Thanks [@KonnorRogers](https://github.com/KonnorRogers)! - Fix: Remove the cursor placeholder for inserting links due to regressions in mobile browsers. + ## 0.14.2 ### Patch Changes diff --git a/package.json b/package.json index d3ce5142..9a065c89 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rhino-editor", - "version": "0.14.2", + "version": "0.14.3", "description": "A custom element wrapped rich text editor", "type": "module", "main": "exports/index.js",