new Web rich text composer

bskyweb/templates/base.html

@@ -131,42 +131,70 @@
       scrollbar-gutter: stable both-edges;
     }
 
-    /* ProseMirror */
-    .ProseMirror {
+    /* RichText composer */
+    .rt-editor {
       font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-      min-height: 140px;
+      line-height: 24px;
+      width: 100%;
+      margin: 0 0 10px 8px;
+      position: relative;
     }
-    .ProseMirror-dark {
-      color: white;
+    .rt-editor-light {
+      --rt-caret-color: #000000;
     }
-    .ProseMirror p {
-      margin: 0;
+    .rt-editor-dark {
+      --rt-caret-color: #ffffff;
+    }
+
+    .rt-overlay {
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
     }
-    .ProseMirror p.is-editor-empty:first-child::before {
-      color: #8d8e96;
-      content: attr(data-placeholder);
-      float: left;
-      height: 0;
-      pointer-events: none;
+    .rt-segment {
     }
-    .ProseMirror .mention {
-      color: #0085ff;
+    .rt-segment-text {
     }
-    .ProseMirror a,
-    .ProseMirror .autolink {
+    .rt-segment-link {
       color: #0085ff;
     }
-    /* OLLIE: TODO -- this is not accessible */
-    /* Remove focus state on inputs */
-    .ProseMirror-focused {
-      outline: 0;
+
+    .rt-input {
+      caret-color: var(--rt-caret-color);
+      color: transparent;
+      font: inherit;
+      line-height: inherit;
+      background: transparent;
+      width: 100%;
+      border: 0;
+      margin: 0;
+      display: block;
+      box-sizing: border-box;
+      position: relative;
+      z-index: 1;
+      resize: none;
+    }
+    .rt-input:focus {
+      outline: none;
     }
-    textarea:focus,
-    input:focus {
-      outline: 0;
+    .rt-input::selection {
+      background: #0085ff;
+      color: #ffffff;
     }
-    .tippy-content .items {
-      width: fit-content;
+    .rt-input::placeholder {
+      color: #878788;
+      opacity: 1;
+    }
+
+    .rt-overlay,
+    .rt-input {
+      padding: 5px;
+    }
+
+    .rt-autocomplete {
+      z-index: 3;
     }
 
     /* Tooltips */

package.json

@@ -48,6 +48,7 @@
     "@emoji-mart/react": "^1.1.1",
     "@expo/html-elements": "^0.4.2",
     "@expo/webpack-config": "^19.0.0",
+    "@floating-ui/react-dom": "^2.0.6",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
@@ -75,18 +76,6 @@
     "@sentry/react-native": "5.5.0",
     "@tamagui/focus-scope": "^1.84.1",
     "@tanstack/react-query": "^5.8.1",
-    "@tiptap/core": "^2.0.0-beta.220",
-    "@tiptap/extension-document": "^2.0.0-beta.220",
-    "@tiptap/extension-hard-break": "^2.0.3",
-    "@tiptap/extension-history": "^2.0.3",
-    "@tiptap/extension-mention": "^2.0.0-beta.220",
-    "@tiptap/extension-paragraph": "^2.0.0-beta.220",
-    "@tiptap/extension-placeholder": "^2.0.0-beta.220",
-    "@tiptap/extension-text": "^2.0.0-beta.220",
-    "@tiptap/html": "^2.1.11",
-    "@tiptap/pm": "^2.0.0-beta.220",
-    "@tiptap/react": "^2.0.0-beta.220",
-    "@tiptap/suggestion": "^2.0.0-beta.220",
     "@types/node": "^18.16.2",
     "@zxing/text-encoding": "^0.9.0",
     "array.prototype.findlast": "^1.2.3",
@@ -172,9 +161,9 @@
     "react-native-web-webview": "^1.0.2",
     "react-native-webview": "13.6.4",
     "react-responsive": "^9.0.2",
+    "react-textarea-autosize": "^8.5.3",
     "rn-fetch-blob": "^0.12.0",
     "sentry-expo": "~7.0.1",
-    "tippy.js": "^6.3.7",
     "tlds": "^1.234.0",
     "use-deep-compare": "^1.1.0",
     "zeego": "^1.6.2",
@@ -248,8 +237,7 @@
     "webpack-dev-server": "^4.11.1"
   },
   "resolutions": {
-    "@types/react": "^18",
-    "**/zeed-dom": "0.10.9"
+    "@types/react": "^18"
   },
   "jest": {
     "preset": "jest-expo/ios",

src/view/com/composer/text-input/TextInput.tsx

@@ -42,7 +42,7 @@ interface TextInputProps extends ComponentProps<typeof RNTextInput> {
   suggestedLinks: Set<string>
   setRichText: (v: RichText | ((v: RichText) => RichText)) => void
   onPhotoPasted: (uri: string) => void
-  onPressPublish: (richtext: RichText) => Promise<void>
+  onPressPublish: () => Promise<void>
   onSuggestedLinksChanged: (uris: Set<string>) => void
   onError: (err: string) => void
 }