From 01dbfbf01a421fe07f38ac005c2073f900c03ad8 Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Fri, 22 Nov 2024 16:50:42 -0500 Subject: [PATCH 1/6] Konnorrogers/fix direct upload success events (#231) * fix upload success events * remove console.log * prettier * prettier * add changelog entry --- .changeset/silly-forks-switch.md | 5 +++ .changeset/sweet-crews-fly.md | 5 +++ src/exports/attachment-manager.ts | 19 +++++++++++ src/exports/attachment-upload.ts | 36 +++++---------------- src/exports/elements/tip-tap-editor-base.ts | 1 - src/exports/elements/tip-tap-editor.ts | 1 - 6 files changed, 37 insertions(+), 30 deletions(-) create mode 100644 .changeset/silly-forks-switch.md create mode 100644 .changeset/sweet-crews-fly.md diff --git a/.changeset/silly-forks-switch.md b/.changeset/silly-forks-switch.md new file mode 100644 index 00000000..4c2afc22 --- /dev/null +++ b/.changeset/silly-forks-switch.md @@ -0,0 +1,5 @@ +--- +"rhino-editor": patch +--- + +Fix the hacky workaround for slow / unstable connections diff --git a/.changeset/sweet-crews-fly.md b/.changeset/sweet-crews-fly.md new file mode 100644 index 00000000..05680c15 --- /dev/null +++ b/.changeset/sweet-crews-fly.md @@ -0,0 +1,5 @@ +--- +"rhino-editor": patch +--- + +remove unnecessary console.log diff --git a/src/exports/attachment-manager.ts b/src/exports/attachment-manager.ts index 569168cb..9900f3ce 100644 --- a/src/exports/attachment-manager.ts +++ b/src/exports/attachment-manager.ts @@ -3,6 +3,11 @@ import { uuidv4 } from "../internal/uuidv4.js"; import type { EditorView } from "@tiptap/pm/view"; import { LOADING_STATES } from "./elements/attachment-editor.js"; import { toDefaultCaption } from "../internal/to-default-caption.js"; +import { + AttachmentUpload, + AttachmentUploadCompleteEvent, + AttachmentUploadSucceedEvent, +} from "./attachment-upload.js"; export interface AttachmentManagerAttributes { src: string; @@ -30,6 +35,7 @@ export interface AttachmentManagerAttributes { export class AttachmentManager implements AttachmentManagerAttributes { attributes: AttachmentManagerAttributes; editorView: EditorView; + directUpload?: AttachmentUpload; static get previewableRegex() { return /^image(\/(gif|png|jpe?g)|$)/; @@ -77,6 +83,8 @@ export class AttachmentManager implements AttachmentManagerAttributes { previewable: this.isPreviewable, }); + this.handleSuccess(); + return; } @@ -107,6 +115,7 @@ export class AttachmentManager implements AttachmentManagerAttributes { previewable: this.isPreviewable, }); image.remove(); + this.handleSuccess(); }; return; } @@ -120,6 +129,16 @@ export class AttachmentManager implements AttachmentManagerAttributes { contentType: this.contentType, previewable: this.isPreviewable, }); + this.handleSuccess(); + } + + handleSuccess() { + const upload = this.directUpload; + if (upload) { + this.setUploadProgress(100); + upload.element.dispatchEvent(new AttachmentUploadSucceedEvent(upload)); + upload.element.dispatchEvent(new AttachmentUploadCompleteEvent(upload)); + } } /** diff --git a/src/exports/attachment-upload.ts b/src/exports/attachment-upload.ts index d8dea3a2..d9f4a52b 100644 --- a/src/exports/attachment-upload.ts +++ b/src/exports/attachment-upload.ts @@ -152,34 +152,14 @@ export class AttachmentUpload implements DirectUploadDelegate { return; } - const blobUrl = this.createBlobUrl(blob.signed_id, blob.filename); - this.attachment.setAttributes({ - sgid: blob.attachable_sgid ?? "", - url: blobUrl, - }); - - // TODO: This may create problems for non-images, could use something like an `` instead. - const template = document.createElement("template"); - const obj = document.createElement("object"); - obj.toggleAttribute("hidden", true); - template.append(obj); - - obj.onload = () => { - template.remove(); - this.progress = 100; - this.setUploadProgress(); - this.element.dispatchEvent(new AttachmentUploadSucceedEvent(this)); - this.element.dispatchEvent(new AttachmentUploadCompleteEvent(this)); - }; - - obj.onerror = () => { - template.remove(); - this.handleError(); - }; - - obj.data = blobUrl; - // Needs to append to for onerror / onload to fire. - document.body.append(template); + if (blob.attachable_sgid) { + const blobUrl = this.createBlobUrl(blob.signed_id, blob.filename); + this.attachment.directUpload = this; + this.attachment.setAttributes({ + sgid: blob.attachable_sgid, + url: blobUrl, + }); + } } setUploadProgress() { diff --git a/src/exports/elements/tip-tap-editor-base.ts b/src/exports/elements/tip-tap-editor-base.ts index 03d7347f..9340d774 100644 --- a/src/exports/elements/tip-tap-editor-base.ts +++ b/src/exports/elements/tip-tap-editor-base.ts @@ -422,7 +422,6 @@ export class TipTapEditorBase extends BaseElement { return attachment === e.attachmentUpload; }); - console.log("complete"); if (index > -1) { this.pendingAttachments.splice(index, 1); } diff --git a/src/exports/elements/tip-tap-editor.ts b/src/exports/elements/tip-tap-editor.ts index 5adfd576..c5897522 100644 --- a/src/exports/elements/tip-tap-editor.ts +++ b/src/exports/elements/tip-tap-editor.ts @@ -1559,7 +1559,6 @@ export class TipTapEditor extends TipTapEditorBase { if (e.defaultPrevented) { return; } - console.log("show"); const anchoredRegion = e.currentTarget as RoleAnchoredRegion; anchoredRegion.anchor = { getBoundingClientRect: e.clientRect }; From 588abba117d2fe2257b874832c94a0a91d274362 Mon Sep 17 00:00:00 2001 From: Barry Hess Date: Fri, 22 Nov 2024 15:54:35 -0600 Subject: [PATCH 2/6] Link handling tweaks (#230) * Focus the editor when link dialog is closed. This is especially useful when the ESC key is hit. Without this, the link dialog disappears, you expect to be able to continue editing, but the editor does not have focus. Now it does! * Update addLink behavior to handle editing link without a full selection. When your cursor is within a node of linked text and the link dialog is opened, the intention is almost always to edit the link for the full node rather than insert a new link in place of the text for which the cursor is sitting. Here's how this interaction worked before: https://share.cleanshot.com/1NYHrBxP With this change, editing a link when the cursor is within a linked node will edit the link for the entire linked text rather than replacing or inserting the new link in place of or in the midst of the linked node text. Here is the change in action: https://share.cleanshot.com/gLjDmjwN * Show invalid URL message when link validity is broken. Prior to this the text field would turn red, but the "Not a valid URL" message did not appear to the user. * Create violet-queens-perform.md --------- Co-authored-by: Konnor Rogers --- .changeset/violet-queens-perform.md | 5 +++++ src/exports/elements/tip-tap-editor.ts | 21 ++++++++++++--------- 2 files changed, 17 insertions(+), 9 deletions(-) create mode 100644 .changeset/violet-queens-perform.md diff --git a/.changeset/violet-queens-perform.md b/.changeset/violet-queens-perform.md new file mode 100644 index 00000000..cf32fb0e --- /dev/null +++ b/.changeset/violet-queens-perform.md @@ -0,0 +1,5 @@ +--- +"rhino-editor": patch +--- + +Fix the UX of link insertions diff --git a/src/exports/elements/tip-tap-editor.ts b/src/exports/elements/tip-tap-editor.ts index c5897522..9b6f3d0e 100644 --- a/src/exports/elements/tip-tap-editor.ts +++ b/src/exports/elements/tip-tap-editor.ts @@ -303,6 +303,7 @@ export class TipTapEditor extends TipTapEditorBase { closeLinkDialog(): void { this.linkDialogExpanded = false; + this.editor.commands.focus(); } showLinkDialog(): void { @@ -350,24 +351,26 @@ export class TipTapEditor extends TipTapEditorBase { } catch (error) { inputElement.setCustomValidity("Not a valid URL"); this.__invalidLink__ = true; + inputElement.reportValidity(); return; } if (href) { this.closeLinkDialog(); inputElement.value = ""; - const chain = this.editor - ?.chain() - .extendMarkRange("link") - .setLink({ href }); - if (chain && this.editor?.state.selection.empty) { - chain.insertContent(href); + if (this.editor.state.selection.empty && !this.editor.getAttributes('link').href) { + const from = this.editor.state.selection.anchor; + this.editor.commands.insertContent(href); + const to = this.editor.state.selection.anchor; + this.editor.commands.setTextSelection({from, to}); } - if (chain) { - chain.run(); - } + const chain = this.editor + ?.chain() + .extendMarkRange("link") + .setLink({ href }) + .run(); } } From f45f270fbb774944c9a13caff03039ce39e20c0a Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Fri, 22 Nov 2024 16:56:06 -0500 Subject: [PATCH 3/6] fix build issues --- src/exports/elements/tip-tap-editor.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/exports/elements/tip-tap-editor.ts b/src/exports/elements/tip-tap-editor.ts index 9b6f3d0e..19a581a3 100644 --- a/src/exports/elements/tip-tap-editor.ts +++ b/src/exports/elements/tip-tap-editor.ts @@ -303,7 +303,7 @@ export class TipTapEditor extends TipTapEditorBase { closeLinkDialog(): void { this.linkDialogExpanded = false; - this.editor.commands.focus(); + this.editor?.commands.focus(); } showLinkDialog(): void { @@ -355,6 +355,8 @@ export class TipTapEditor extends TipTapEditorBase { return; } + if (!this.editor) { return } + if (href) { this.closeLinkDialog(); inputElement.value = ""; @@ -366,7 +368,7 @@ export class TipTapEditor extends TipTapEditorBase { this.editor.commands.setTextSelection({from, to}); } - const chain = this.editor + this.editor ?.chain() .extendMarkRange("link") .setLink({ href }) From e2818417dec66dab1d435b8673c8d9bdeeb0ba17 Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Fri, 22 Nov 2024 17:02:00 -0500 Subject: [PATCH 4/6] fix manager --- src/exports/attachment-manager.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/exports/attachment-manager.ts b/src/exports/attachment-manager.ts index 9900f3ce..cdebf52d 100644 --- a/src/exports/attachment-manager.ts +++ b/src/exports/attachment-manager.ts @@ -133,9 +133,10 @@ export class AttachmentManager implements AttachmentManagerAttributes { } handleSuccess() { + this.setUploadProgress(100); const upload = this.directUpload; + if (upload) { - this.setUploadProgress(100); upload.element.dispatchEvent(new AttachmentUploadSucceedEvent(upload)); upload.element.dispatchEvent(new AttachmentUploadCompleteEvent(upload)); } From bf216761140df1ee48dbdb1fefb5baf610652fa2 Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Fri, 22 Nov 2024 17:02:48 -0500 Subject: [PATCH 5/6] prettier --- src/exports/elements/tip-tap-editor.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/exports/elements/tip-tap-editor.ts b/src/exports/elements/tip-tap-editor.ts index 19a581a3..a88c85f6 100644 --- a/src/exports/elements/tip-tap-editor.ts +++ b/src/exports/elements/tip-tap-editor.ts @@ -355,24 +355,25 @@ export class TipTapEditor extends TipTapEditorBase { return; } - if (!this.editor) { return } + if (!this.editor) { + return; + } if (href) { this.closeLinkDialog(); inputElement.value = ""; - if (this.editor.state.selection.empty && !this.editor.getAttributes('link').href) { + if ( + this.editor.state.selection.empty && + !this.editor.getAttributes("link").href + ) { const from = this.editor.state.selection.anchor; this.editor.commands.insertContent(href); const to = this.editor.state.selection.anchor; - this.editor.commands.setTextSelection({from, to}); + this.editor.commands.setTextSelection({ from, to }); } - this.editor - ?.chain() - .extendMarkRange("link") - .setLink({ href }) - .run(); + this.editor?.chain().extendMarkRange("link").setLink({ href }).run(); } } From 8d0cc7320342c16e5215114a5f93b938d80a11a9 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 22 Nov 2024 17:04:15 -0500 Subject: [PATCH 6/6] Version Packages (#232) Co-authored-by: github-actions[bot] --- .changeset/silly-forks-switch.md | 5 ----- .changeset/sweet-crews-fly.md | 5 ----- .changeset/violet-queens-perform.md | 5 ----- CHANGELOG.md | 10 ++++++++++ package.json | 2 +- 5 files changed, 11 insertions(+), 16 deletions(-) delete mode 100644 .changeset/silly-forks-switch.md delete mode 100644 .changeset/sweet-crews-fly.md delete mode 100644 .changeset/violet-queens-perform.md diff --git a/.changeset/silly-forks-switch.md b/.changeset/silly-forks-switch.md deleted file mode 100644 index 4c2afc22..00000000 --- a/.changeset/silly-forks-switch.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"rhino-editor": patch ---- - -Fix the hacky workaround for slow / unstable connections diff --git a/.changeset/sweet-crews-fly.md b/.changeset/sweet-crews-fly.md deleted file mode 100644 index 05680c15..00000000 --- a/.changeset/sweet-crews-fly.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"rhino-editor": patch ---- - -remove unnecessary console.log diff --git a/.changeset/violet-queens-perform.md b/.changeset/violet-queens-perform.md deleted file mode 100644 index cf32fb0e..00000000 --- a/.changeset/violet-queens-perform.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"rhino-editor": patch ---- - -Fix the UX of link insertions diff --git a/CHANGELOG.md b/CHANGELOG.md index 26cd5ff8..391b6d83 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,15 @@ # Changelog +## 0.14.1 + +### Patch Changes + +- [#231](https://github.com/KonnorRogers/rhino-editor/pull/231) [`01dbfbf`](https://github.com/KonnorRogers/rhino-editor/commit/01dbfbf01a421fe07f38ac005c2073f900c03ad8) Thanks [@KonnorRogers](https://github.com/KonnorRogers)! - Fix the hacky workaround for slow / unstable connections + +- [#231](https://github.com/KonnorRogers/rhino-editor/pull/231) [`01dbfbf`](https://github.com/KonnorRogers/rhino-editor/commit/01dbfbf01a421fe07f38ac005c2073f900c03ad8) Thanks [@KonnorRogers](https://github.com/KonnorRogers)! - remove unnecessary console.log + +- [#230](https://github.com/KonnorRogers/rhino-editor/pull/230) [`588abba`](https://github.com/KonnorRogers/rhino-editor/commit/588abba117d2fe2257b874832c94a0a91d274362) Thanks [@bjhess](https://github.com/bjhess)! - Fix the UX of link insertions + ## 0.14.0 ### Minor Changes diff --git a/package.json b/package.json index ef1d37fa..4e458c69 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rhino-editor", - "version": "0.14.0", + "version": "0.14.1", "description": "A custom element wrapped rich text editor", "type": "module", "main": "exports/index.js",