bsky-richtext-react 1.0.0

package/dist/styles.css

@@ -0,0 +1,106 @@
+/* src/styles.css */
+.bsky-richtext {
+  display: inline;
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+.bsky-mention,
+.bsky-link,
+.bsky-tag {
+  display: inline;
+}
+.bsky-editor {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+}
+.bsky-editor-content {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+.bsky-editor .ProseMirror,
+.bsky-editor-content .ProseMirror {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  outline: none;
+  min-height: 1em;
+}
+.bsky-editor .ProseMirror p,
+.bsky-editor-content .ProseMirror p {
+  margin: 0;
+}
+.bsky-editor .ProseMirror p.is-editor-empty:first-child::before,
+.bsky-editor-content .ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+.bsky-editor-mention {
+  display: inline;
+}
+.autolink {
+  display: inline;
+}
+.bsky-suggestions {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  max-height: 320px;
+  overflow-y: auto;
+}
+.bsky-suggestion-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  text-align: left;
+  padding: 0;
+  margin: 0;
+  user-select: none;
+}
+.bsky-suggestion-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+.bsky-suggestion-name,
+.bsky-suggestion-handle {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.bsky-suggestion-avatar {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+.bsky-suggestion-avatar-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.bsky-suggestion-avatar-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.bsky-suggestion-empty {
+  display: block;
+  box-sizing: border-box;
+}
+/*# sourceMappingURL=styles.css.map */

package/dist/styles.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles.css"],"sourcesContent":["/**\n * bsky-richtext-react — Structural CSS\n *\n * Import this file in your app for essential layout styles.\n * These rules define structure and positioning only — no colors,\n * fonts, or visual decoration. Override freely with your own styles.\n *\n * Usage:\n *   import 'bsky-richtext-react/styles.css'\n *\n * Class names reference (matching the default classNames objects):\n *\n *   RichTextDisplay:\n *     .bsky-richtext              — root <span>\n *     .bsky-mention               — @mention anchor\n *     .bsky-link                  — link anchor\n *     .bsky-tag                   — #hashtag anchor\n *\n *   RichTextEditor:\n *     .bsky-editor                — root wrapper <div>\n *     .bsky-editor-content        — ProseMirror editable area wrapper\n *     .bsky-editor-mention        — mention chip inside the editor\n *     .autolink                   — URL decoration span inside the editor\n *\n *   MentionSuggestionList (dropdown):\n *     .bsky-suggestions           — outer container\n *     .bsky-suggestion-item       — each suggestion row (<button>)\n *     .bsky-suggestion-item-selected — currently highlighted row\n *     .bsky-suggestion-avatar     — avatar wrapper\n *     .bsky-suggestion-avatar-img — <img> element\n *     .bsky-suggestion-avatar-placeholder — initial-letter fallback\n *     .bsky-suggestion-text       — text column (name + handle)\n *     .bsky-suggestion-name       — display name\n *     .bsky-suggestion-handle     — @handle\n *     .bsky-suggestion-empty      — \"No results\" message\n *\n * Visual styling guide:\n *   All class names above can be targeted directly in your CSS.\n *   Use generateClassNames() to append your own classes without\n *   removing the structural defaults.\n */\n\n/* ─── RichTextDisplay ────────────────────────────────────────────────────── */\n\n.bsky-richtext {\n  /* Inline so the span respects the parent's flow and wraps naturally */\n  display: inline;\n  /* Allow long URLs and handles to break at word boundaries */\n  word-break: break-word;\n  overflow-wrap: break-word;\n}\n\n/* Facet anchors — stay inline, no block-level layout shift */\n.bsky-mention,\n.bsky-link,\n.bsky-tag {\n  display: inline;\n}\n\n/* ─── RichTextEditor ─────────────────────────────────────────────────────── */\n\n.bsky-editor {\n  /* Fill available width */\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  /* Establish a positioning context for any absolutely-positioned children */\n  position: relative;\n}\n\n/* The ProseMirror editable region wrapper */\n.bsky-editor-content {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* The ProseMirror editable region itself */\n.bsky-editor .ProseMirror,\n.bsky-editor-content .ProseMirror {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  /* Remove browser's default focus outline — consumers provide their own */\n  outline: none;\n  /* At least one line tall when empty, so clicks register */\n  min-height: 1em;\n}\n\n/* Paragraphs — reset margin so consumers control spacing */\n.bsky-editor .ProseMirror p,\n.bsky-editor-content .ProseMirror p {\n  margin: 0;\n}\n\n/* Placeholder — floated so it doesn't push content down */\n.bsky-editor .ProseMirror p.is-editor-empty:first-child::before,\n.bsky-editor-content .ProseMirror p.is-editor-empty:first-child::before {\n  content: attr(data-placeholder);\n  float: left;\n  height: 0;\n  pointer-events: none;\n}\n\n/* Mention chips inside the editor */\n.bsky-editor-mention {\n  display: inline;\n}\n\n/* URL decorations inside the editor */\n.autolink {\n  display: inline;\n}\n\n/* ─── Mention Suggestion Dropdown ───────────────────────────────────────── */\n\n.bsky-suggestions {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  /* Constrain height so very long lists don't overflow the viewport */\n  max-height: 320px;\n  overflow-y: auto;\n}\n\n.bsky-suggestion-item {\n  /* Full-width button row */\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  width: 100%;\n  box-sizing: border-box;\n  cursor: pointer;\n  /* Reset button element defaults */\n  border: none;\n  background: transparent;\n  text-align: left;\n  padding: 0;\n  margin: 0;\n  /* Prevent text selection on rapid clicks */\n  user-select: none;\n}\n\n.bsky-suggestion-text {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0; /* allow text to truncate */\n  overflow: hidden;\n}\n\n.bsky-suggestion-name,\n.bsky-suggestion-handle {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n/* Avatar wrapper — fixed square, circular clip via consumer CSS */\n.bsky-suggestion-avatar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n}\n\n.bsky-suggestion-avatar-img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.bsky-suggestion-avatar-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n}\n\n.bsky-suggestion-empty {\n  display: block;\n  box-sizing: border-box;\n}\n"],"mappings":";AA4CA,CAAC;AAEC,WAAS;AAET,cAAY;AACZ,iBAAe;AACjB;AAGA,CAAC;AACD,CAAC;AACD,CAAC;AACC,WAAS;AACX;AAIA,CAAC;AAEC,WAAS;AACT,SAAO;AACP,cAAY;AAEZ,YAAU;AACZ;AAGA,CAAC;AACC,WAAS;AACT,SAAO;AACP,cAAY;AACd;AAGA,CAjBC,YAiBY,CAAC;AACd,CARC,oBAQoB,CADP;AAEZ,WAAS;AACT,SAAO;AACP,cAAY;AAEZ,WAAS;AAET,cAAY;AACd;AAGA,CA7BC,YA6BY,CAZC,YAYY;AAC1B,CApBC,oBAoBoB,CAbP,YAaoB;AAChC,UAAQ;AACV;AAGA,CAnCC,YAmCY,CAlBC,YAkBY,CAAC,CAAC,eAAe,YAAY;AACvD,CA1BC,oBA0BoB,CAnBP,YAmBoB,CAAC,CADP,eACuB,YAAY;AAC7D,WAAS,KAAK;AACd,SAAO;AACP,UAAQ;AACR,kBAAgB;AAClB;AAGA,CAAC;AACC,WAAS;AACX;AAGA,CAAC;AACC,WAAS;AACX;AAIA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,cAAY;AAEZ,cAAY;AACZ,cAAY;AACd;AAEA,CAAC;AAEC,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,SAAO;AACP,cAAY;AACZ,UAAQ;AAER,UAAQ;AACR,cAAY;AACZ,cAAY;AACZ,WAAS;AACT,UAAQ;AAER,eAAa;AACf;AAEA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,QAAM;AACN,aAAW;AACX,YAAU;AACZ;AAEA,CAAC;AACD,CAAC;AACC,WAAS;AACT,YAAU;AACV,eAAa;AACb,iBAAe;AACjB;AAGA,CAAC;AACC,WAAS;AACT,eAAa;AACb,eAAa;AACb,mBAAiB;AACnB;AAEA,CAAC;AACC,WAAS;AACT,SAAO;AACP,UAAQ;AACR,cAAY;AACd;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,SAAO;AACP,UAAQ;AACV;AAEA,CAAC;AACC,WAAS;AACT,cAAY;AACd;","names":[]}

package/dist/styles.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/package.json

@@ -0,0 +1,126 @@
+{
+  "name": "bsky-richtext-react",
+  "version": "1.0.0",
+  "description": "React components for rendering and editing Bluesky richtext content (app.bsky.richtext lexicon)",
+  "author": "satyam-mishra-pce",
+  "license": "MIT",
+  "keywords": [
+    "bluesky",
+    "atproto",
+    "at-protocol",
+    "richtext",
+    "react",
+    "mention",
+    "editor",
+    "tiptap",
+    "facets"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/satyam-mishra-pce/bsky-richtext-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/satyam-mishra-pce/bsky-richtext-react/issues"
+  },
+  "homepage": "https://github.com/satyam-mishra-pce/bsky-richtext-react#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsup",
+    "build:watch": "tsup --watch",
+    "build:storybook": "storybook build",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,css}\"",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "bun run typecheck && bun run test:run && bun run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": false
+    }
+  },
+  "dependencies": {
+    "@atproto/api": "^0.13.16",
+    "@tiptap/core": "^2.11.5",
+    "@tiptap/extension-document": "^2.11.5",
+    "@tiptap/extension-hard-break": "^2.11.5",
+    "@tiptap/extension-history": "^2.11.5",
+    "@tiptap/extension-mention": "^2.11.5",
+    "@tiptap/extension-paragraph": "^2.11.5",
+    "@tiptap/extension-placeholder": "^2.11.5",
+    "@tiptap/extension-text": "^2.11.5",
+    "@tiptap/react": "^2.11.5",
+    "tippy.js": "^6.3.7"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.18.0",
+    "@storybook/addon-essentials": "^8.5.3",
+    "@storybook/addon-interactions": "^8.5.3",
+    "@storybook/addon-links": "^8.5.3",
+    "@storybook/blocks": "^8.5.3",
+    "@storybook/react": "^8.5.3",
+    "@storybook/react-vite": "^8.5.3",
+    "@storybook/test": "^8.5.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "@types/tippy.js": "^6.3.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^3.0.2",
+    "@vitest/ui": "^3.0.2",
+    "eslint": "^9.18.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "globals": "^15.14.0",
+    "jsdom": "^26.0.0",
+    "prettier": "^3.4.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^8.5.3",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^6.0.7",
+    "vitest": "^3.0.2"
+  }
+}