Maintain selections when editor blurred, and fix file uploads on race…

… conditions (#227)

* maintain link selection when focus changes

* add fake link selection

* make attachment-upload re-fetch objects

* prettier

* finishing up direct upload stuff

* prettier

* add fake cursor

* add note about fake selections

* Add note to events about stopping form submissions on pending uploads

* add chnagelog entry

* fix css

* update changelog

* fix ff tests

* fix css

* fix css

* add prettierignore

.changeset/lemon-actors-report.md

@@ -0,0 +1,5 @@
+---
+"rhino-editor": minor
+---
+
+Added a "faux selection" for link insertions to give a visual indicator of insertion / replacement points for links.

.changeset/many-poems-chew.md

@@ -0,0 +1,5 @@
+---
+"rhino-editor": patch
+---
+
+Fixed a bug around "progress" finishing prematurely

.changeset/violet-parrots-jump.md

@@ -0,0 +1,5 @@
+---
+"rhino-editor": minor
+---
+
+Add a `rhino-editor.css` which is a more minimal `trix.css` and has no styles on the editor content.

.changeset/witty-trainers-report.md

@@ -0,0 +1,5 @@
+---
+"rhino-editor": patch
+---
+
+Fixed a bug with direct upload events not dispatching under the proper name

.prettierignore

@@ -1 +1,2 @@
 src/exports/styles/trix.css
+src/exports/styles/rhino-editor.css

docs/esbuild.config.js

@@ -43,6 +43,8 @@ const esbuildOptions = {
       assets: {
         from: [path.resolve(__dirname, '../exports/styles/trix.css')],
         to: [path.resolve(__dirname, 'src/rhino-editor/exports/styles/trix.css')],
+        from: [path.resolve(__dirname, '../exports/styles/rhino-editor.css')],
+        to: [path.resolve(__dirname, 'src/rhino-editor/exports/styles/rhino-editor.css')],
       },
       verbose: false,
       watch: true,

docs/src/_documentation/references/02-events.md

@@ -51,3 +51,20 @@ document.querySelector("rhino-editor").addEventListener("rhino-direct-upload:pro
   console.log(event.attachmentUpload.progress)
 })
 ```
+
+## Waiting to submit a form until direct uploads finish
+
+Also of note, the `direct-upload` attachments will also add a `.pendingAttachmentUploads` to Rhino Editor.
+
+This can be useful for stopping form submissions until all uploads have finished.
+
+Here's an example of how you could stop form submissions:
+
+```js
+form.addEventListener("submit", (e) => {
+  if (rhinoEditor.pendingAttachmentUploads.length > 0) {
+    // There are still pending uploads, so preventDefault() to stop the submission
+    e.preventDefault()
+  }
+})
+```

docs/src/_documentation/references/07-fake-selections.md

@@ -0,0 +1,21 @@
+---
+title: Fake Selections and Insertions
+permalink: /references/fake-selections/
+---
+
+Rhino Editor has a couple of utilities for having "fake" insertions and selections.
+
+You'll notice as of v0.14.0 when you move focus to the link dialog inputs, the editor will either show a fake insertion cursor, or show a fake selection "box" around the currently selected text.
+
+There's also a fake cursor used for inline code blocks courtesy of the [Codemark Plugin](https://github.com/curvenote/editor/tree/main/packages/prosemirror-codemark)
+
+The CSS for these fake selections comes directly from `"rhino-editor/exports/styles/trix.css"`.
+
+However, some people may not use this because it can be overly opinionated. Fake selections / cursors can also be added to a CSS file via:
+
+`@import "rhino-editor/exports/styles/rhino-editor.css"`
+
+or from a JavaScript file:
+
+`import "rhino-editor/exports/styles/rhino-editor.css"`
+

docs/src/_layouts/home.erb

@@ -21,7 +21,7 @@ layout: default
     <% end %>
   </ul>
 
-  <input id="rhino-input" type="hidden">
+  <input id="rhino-input" type="hidden" value="<p>Hello World!</p>">
   <rhino-editor input="rhino-input"></rhino-editor>
 
   <h2 class="reason__header" style="margin-top: 2rem;"><%= resource.data.reason_header %></h2>

esbuild.config.js

@@ -31,20 +31,30 @@ function AppendCssStyles () {
 
         const {
           hostStyles,
-          toolbarButtonStyles
+          toolbarButtonStyles,
+          cursorStyles
         } = await import(`./src/exports/styles/editor.js?cache=${date.toString()}`)
 
-        const finalString = `/* THIS FILE IS AUTO-GENERATED. DO NOT EDIT BY HAND! */
-${styles.toString()}
+        const banner = `/* THIS FILE IS AUTO-GENERATED. DO NOT EDIT BY HAND! */`
+
+        const editorCSS = `
 /* src/exports/styles/editor.js:hostStyles */
 ${hostStyles.toString()}
 
+/* src/exports/styles/editor.js:toolbarButtonStyles */
+${cursorStyles.toString()}
+
 /* src/exports/styles/editor.js:toolbarButtonStyles */
 ${toolbarButtonStyles.toString()}
-`
+`.trim()
+
+        const trixCSS = `
+        ${styles.toString()}
+        ${editorCSS}
+`.trim()
 
-        await fsPromises.writeFile(path.join(process.cwd(), "src", "exports", "styles", "trix.css"), finalString)
-        // await fsPromises.writeFile(path.join(process.cwd(), "exports", "styles", "trix.css"), finalString)
+        await fsPromises.writeFile(path.join(process.cwd(), "src", "exports", "styles", "trix.css"), banner + "\n\n" + trixCSS)
+        await fsPromises.writeFile(path.join(process.cwd(), "src", "exports", "styles", "rhino-editor.css"), banner + "\n\n" + editorCSS)
       })
     }
   }