Feature/comment quotes (#199)

* add comment quote button and editor

* actually publish and render quotes in comments

* added some styling

---------

Co-authored-by: celine <[e-mail]>

app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox.tsx

···
 import { multi } from "linkifyjs";
 import { Json } from "supabase/database.types";
 import { isIOS } from "src/utils/isDevice";
+import {
+  decodeQuotePosition,
+  QUOTE_PARAM,
+  QuotePosition,
+} from "../../quotePosition";
+import { QuoteContent } from "../Quotes";
+import { create } from "zustand";
+import { CloseTiny } from "components/Icons/CloseTiny";
+import { CloseFillTiny } from "components/Icons/CloseFillTiny";
 
 export function CommentBox(props: {
   doc_uri: string;
···
   onSubmit?: () => void;
 }) {
   let mountRef = useRef<HTMLPreElement | null>(null);
+  let quote = useInteractionState((s) => s.commentBox.quote);
   let [editorState, setEditorState] = useState(() =>
     EditorState.create({
       schema: multiBlockSchema,
···
       { mount: mountRef.current },
       {
         state: editorState,
+        handlePaste: (view, e) => {
+          let text =
+            e.clipboardData?.getData("text") ||
+            e.clipboardData?.getData("text/html");
+          let html = e.clipboardData?.getData("text/html");
+          if (!text && html) {
+            let xml = new DOMParser().parseFromString(html, "text/html");
+            text = xml.textContent || "";
+          }
+          console.log("URL: " + window.location.toString());
+          console.log("TEXT: " + text, text?.includes(QUOTE_PARAM));
+          if (
+            text?.includes(QUOTE_PARAM) &&
+            text.includes(window.location.toString())
+          ) {
+            const url = new URL(text);
+            const quoteParam = url.pathname.split("/l-quote/")[1];
+            if (!quoteParam) return;
+            const quotePosition = decodeQuotePosition(quoteParam);
+            if (!quotePosition) return;
+            useInteractionState.setState({
+              commentBox: { quote: quotePosition },
+            });
+            return true;
+          }
+        },
         handleClickOn: (view, _pos, node, _nodePos, _event, direct) => {
           if (!direct) return;
           if (node.nodeSize - 2 <= _pos) return;
···
   }, []);
   let [loading, setLoading] = useState(false);
   return (
-    <div className=" flex flex-col gap-1">
+    <div className=" flex flex-col">
+      {quote && (
+        <div className="relative mt-2 mb-2">
+          <QuoteContent position={quote} did="" index={-1} />
+          <button
+            className="text-border absolute -top-3 right-1 bg-bg-page p-1 rounded-full"
+            onClick={() =>
+              useInteractionState.setState({ commentBox: { quote: null } })
+            }
+          >
+            <CloseFillTiny />
+          </button>
+        </div>
+      )}
       <div className="w-full relative group">
         <pre
           ref={mountRef}
-          className={`border whitespace-pre-wrap input-with-border min-h-32 h-fit`}
+          className={`border whitespace-pre-wrap input-with-border min-h-32 h-fit !px-2 !py-[6px]`}
         />
         <IOSBS view={view} />
       </div>
-      <div className="flex justify-between">
+      <div className="flex justify-between pt-1">
         <div className="flex gap-1">
           <TextDecorationButton
             mark={multiBlockSchema.marks.strong}
···
             let [plaintext, facets] = docToFacetedText(editorState.doc);
             let comment = await publishComment({
               document: props.doc_uri,
-              comment: { plaintext, facets, replyTo: props.replyTo },
+              comment: {
+                plaintext,
+                facets,
+                replyTo: props.replyTo,
+                attachment: quote
+                  ? {
+                      $type: "pub.leaflet.comment#linearDocumentQuote",
+                      document: props.doc_uri,
+                      quote,
+                    }
+                  : undefined,
+              },
             });
 
             setLoading(false);
             props.onSubmit?.();
             useInteractionState.setState((s) => ({
+              commentBox: {
+                quote: null,
+              },
               localComments: [
                 ...s.localComments,
                 {

app/lish/[did]/[publication]/[rkey]/Interactions/Comments/commentAction.ts

···
     plaintext: string;
     facets: PubLeafletRichtextFacet.Main[];
     replyTo?: string;
+    attachment: PubLeafletComment.Record["attachment"];
   };
 }) {
   const oauthClient = await createOauthClient();
···
     plaintext: args.comment.plaintext,
     facets: args.comment.facets,
     reply: args.comment.replyTo ? { parent: args.comment.replyTo } : undefined,
+    attachment: args.comment.attachment,
   };
   let rkey = TID.nextStr();
   let uri = AtUri.make(credentialSession.did!, "pub.leaflet.comment", rkey);

app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx

···
 import { timeAgo } from "app/discover/PubListing";
 import { BlueskyLogin } from "app/login/LoginForm";
 import { usePathname } from "next/navigation";
+import { QuoteContent } from "../Quotes";
 
 export type Comment = {
   record: Json;
···
         </div>
       )}
       <hr className="border-border-light" />
-      <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-6 py-2">
         {comments
           .sort((a, b) => {
             let aRecord = a.record as PubLeafletComment.Record;
···
 }) => {
   return (
     <div className="comment">
-      <div className="flex gap-2 ">
+      <div className="flex gap-2">
         {props.profile && (
           <ProfilePopover profile={props.profile} comment={props.comment.uri} />
         )}
         <DatePopover date={props.record.createdAt} />
       </div>
+      {props.record.attachment &&
+        PubLeafletComment.isLinearDocumentQuote(props.record.attachment) && (
+          <div className="mt-1 mb-2">
+            <QuoteContent
+              index={-1}
+              position={props.record.attachment.quote}
+              did={new AtUri(props.record.attachment.document).host}
+            />
+          </div>
+        )}
       <pre
         key={props.comment.uri}
         style={{ wordBreak: "break-word" }}
-        className="whitespace-pre-wrap text-secondary pb-[4px]"
+        className="whitespace-pre-wrap text-secondary pb-[4px] "
       >
         <BaseTextBlock
           index={[]}

app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx

···
 import type { Json } from "supabase/database.types";
 import { create } from "zustand";
 import type { Comment } from "./Comments";
+import { QuotePosition } from "../quotePosition";
 
 export let useInteractionState = create(() => ({
   drawerOpen: undefined as boolean | undefined,
   drawer: undefined as undefined | "comments" | "quotes",
   localComments: [] as Comment[],
+  commentBox: { quote: null as QuotePosition | null },
 }));
 export function openInteractionDrawer(drawer: "comments" | "quotes") {
   flushSync(() => {

app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx

···
   PubLeafletPagesLinearDocument,
   PubLeafletBlocksCode,
 } from "lexicons/api";
-import {
-  decodeQuotePosition,
-  QuotePosition,
-  useActiveHighlightState,
-} from "../useHighlight";
+import { decodeQuotePosition, QuotePosition } from "../quotePosition";
+import { useActiveHighlightState } from "../useHighlight";
 import { PostContent } from "../PostContent";
 import { ProfileViewBasic } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 
···
   quotes: { link: string; bsky_posts: { post_view: Json } | null }[];
   did: string;
 }) => {
-  let isMobile = useIsMobile();
   let data = useContext(PostPageContext);
 
   return (
···
         <div className="quotes flex flex-col gap-8">
           {props.quotes.map((q, index) => {
             let pv = q.bsky_posts?.post_view as unknown as PostView;
-            let record = data?.data as PubLeafletDocument.Record;
             const url = new URL(q.link);
             const quoteParam = url.pathname.split("/l-quote/")[1];
             if (!quoteParam) return null;
             const quotePosition = decodeQuotePosition(quoteParam);
             if (!quotePosition) return null;
-
-            let page = record.pages[0] as PubLeafletPagesLinearDocument.Main;
-            // Extract blocks within the quote range
-            const content = extractQuotedBlocks(
-              page.blocks || [],
-              quotePosition,
-              [],
-            );
             return (
-              <div
-                className="quoteSection flex flex-col gap-2"
-                key={index}
-                onMouseLeave={() => {
-                  useActiveHighlightState.setState({ activeHighlight: null });
-                }}
-                onMouseEnter={() => {
-                  useActiveHighlightState.setState({ activeHighlight: index });
-                }}
-              >
-                <div
-                  className="quoteSectionQuote text-secondary text-sm text-left pb-1 hover:cursor-pointer"
-                  onClick={(e) => {
-                    let scrollMargin = isMobile
-                      ? 16
-                      : e.currentTarget.getBoundingClientRect().top;
-                    let scrollContainer =
-                      window.document.getElementById("post-page");
-                    let el = window.document.getElementById(
-                      quotePosition.start.block.join("."),
-                    );
-                    if (!el || !scrollContainer) return;
-                    let blockRect = el.getBoundingClientRect();
-                    let quoteScrollTop =
-                      (scrollContainer &&
-                        blockRect.top + scrollContainer.scrollTop) ||
-                      0;
+              <div key={index} className="flex flex-col ">
+                <QuoteContent
+                  index={index}
+                  did={props.did}
+                  position={quotePosition}
+                />
 
-                    if (blockRect.left < 0)
-                      scrollContainer.scrollIntoView({ behavior: "smooth" });
-                    scrollContainer?.scrollTo({
-                      top: quoteScrollTop - scrollMargin,
-                      behavior: "smooth",
-                    });
-                  }}
-                >
-                  <div className="italic">
-                    <PostContent
-                      bskyPostData={[]}
-                      blocks={content || []}
-                      did={props.did}
-                      preview
-                    />
-                  </div>
-                  <BskyPost
-                    rkey={new AtUri(pv.uri).rkey}
-                    content={pv.record.text as string}
-                    user={pv.author.displayName || pv.author.handle}
-                    profile={pv.author}
-                    handle={pv.author.handle}
-                  />
-                </div>
+                <div className="h-5 w-1 ml-5 border-l border-border-light" />
+                <BskyPost
+                  rkey={new AtUri(pv.uri).rkey}
+                  content={pv.record.text as string}
+                  user={pv.author.displayName || pv.author.handle}
+                  profile={pv.author}
+                  handle={pv.author.handle}
+                />
               </div>
             );
           })}
···
   );
 };
 
+export const QuoteContent = (props: {
+  position: QuotePosition;
+  index: number;
+  did: string;
+}) => {
+  let isMobile = useIsMobile();
+  const data = useContext(PostPageContext);
+
+  let record = data?.data as PubLeafletDocument.Record;
+  let page = record.pages[0] as PubLeafletPagesLinearDocument.Main;
+  // Extract blocks within the quote range
+  const content = extractQuotedBlocks(page.blocks || [], props.position, []);
+  return (
+    <div
+      className="quoteSection"
+      onMouseLeave={() => {
+        useActiveHighlightState.setState({ activeHighlight: null });
+      }}
+      onMouseEnter={() => {
+        useActiveHighlightState.setState({ activeHighlight: props.index });
+      }}
+    >
+      <div
+        className="quoteSectionQuote text-secondary text-sm text-left hover:cursor-pointer"
+        onClick={(e) => {
+          let scrollMargin = isMobile
+            ? 16
+            : e.currentTarget.getBoundingClientRect().top;
+          let scrollContainer = window.document.getElementById("post-page");
+          let el = window.document.getElementById(
+            props.position.start.block.join("."),
+          );
+          if (!el || !scrollContainer) return;
+          let blockRect = el.getBoundingClientRect();
+          let quoteScrollTop =
+            (scrollContainer && blockRect.top + scrollContainer.scrollTop) || 0;
+
+          if (blockRect.left < 0)
+            scrollContainer.scrollIntoView({ behavior: "smooth" });
+          scrollContainer?.scrollTo({
+            top: quoteScrollTop - scrollMargin,
+            behavior: "smooth",
+          });
+        }}
+      >
+        <div className="italic border border-border-light rounded-md px-2 pt-1">
+          <PostContent
+            bskyPostData={[]}
+            blocks={content}
+            did={props.did}
+            preview
+            className="!py-0"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const BskyPost = (props: {
   rkey: string;
   content: string;
···
     <a
       target="_blank"
       href={`https://bsky.app/profile/${props.handle}/post/${props.rkey}`}
-      className="quoteSectionBskyItem opaque-container py-2 px-2 text-sm flex gap-[6px] hover:no-underline font-normal"
+      className="quoteSectionBskyItem px-2  flex gap-[6px] hover:no-underline font-normal"
     >
       {props.profile.avatar && (
         <img
···
           <div className="font-bold">{props.user}</div>
           <div className="text-tertiary">@{props.handle}</div>
         </div>
-        <div className="text-secondary">{props.content}</div>
+        <div className="text-primary">{props.content}</div>
       </div>
     </a>
   );

app/lish/[did]/[publication]/[rkey]/PostContent.tsx

···
   blocks,
   did,
   preview,
+  className,
   prerenderedCodeBlocks,
   bskyPostData,
 }: {
   blocks: PubLeafletPagesLinearDocument.Block[];
   did: string;
   preview?: boolean;
+  className?: string;
   prerenderedCodeBlocks?: Map<string, string>;
   bskyPostData: AppBskyFeedDefs.PostView[];
 }) {
   return (
-    <div id="post-content" className="postContent flex flex-col">
+    <div
+      id="post-content"
+      className={`postContent flex flex-col  pb-1 sm:pb-2 pt-1 sm:pt-2 ${className}`}
+    >
       {blocks.map((b, index) => {
         return (
           <Block
···
   // non text blocks, they need this padding, pt-3 sm:pt-4, which is applied in each case
   let className = `
     postBlockWrapper
-    pt-1
     min-h-7
-    ${isList ? "isListItem pb-0 " : "pb-2 last:pb-3 last:sm:pb-4 first:pt-2 sm:first:pt-3"}
+    pt-1 pb-2
+    ${isList && "isListItem !pb-0 "}
     ${alignment}
     `;
 

app/lish/[did]/[publication]/[rkey]/QuoteHandler.tsx

···
 import { Separator } from "components/Layout";
 import { useSmoker } from "components/Toast";
 import { useEffect, useMemo, useState } from "react";
+import {
+  encodeQuotePosition,
+  decodeQuotePosition,
+  QuotePosition,
+} from "./quotePosition";
+import { useIdentityData } from "components/IdentityProvider";
+import { CommentTiny } from "components/Icons/CommentTiny";
 import { useInteractionState } from "./Interactions/Interactions";
-import { encodeQuotePosition } from "./useHighlight";
-import { useParams } from "next/navigation";
-import { decodeQuotePosition, QuotePosition } from "./quotePosition";
 
 export function QuoteHandler() {
   let [position, setPosition] = useState<{
···
     return (
       <div
         id="quote-trigger"
-        className={`accent-container border border-border-light text-accent-contrast px-2 flex gap-1 text-sm justify-center text-center items-center`}
+        className={`accent-container border border-border-light text-accent-contrast px-1 flex gap-1 text-sm justify-center text-center items-center`}
         style={{
           position: "absolute",
           top: position.top,
···
 
 export const QuoteOptionButtons = (props: { position: string }) => {
   let smoker = useSmoker();
-  let url = useMemo(() => {
+  let { identity } = useIdentityData();
+  let [url, position] = useMemo(() => {
     let currentUrl = new URL(window.location.href);
     let pos = decodeQuotePosition(props.position);
     if (currentUrl.pathname.includes("/l-quote/")) {
···
     currentUrl.pathname = currentUrl.pathname + `/l-quote/${props.position}`;
 
     currentUrl.hash = `#${pos?.start.block.join(".")}_${pos?.start.offset}`;
-    return currentUrl.toString();
+    return [currentUrl.toString(), pos];
   }, [props.position]);
 
   return (
     <>
-      <div className="">Share Quote via</div>
+      <div className="">Share via</div>
 
       <a
-        className="flex gap-1 items-center hover:font-bold p-1"
+        className="flex gap-1 items-center hover:font-bold px-1 hover:!no-underline"
         role="link"
         href={`https://bsky.app/intent/compose?text=${encodeURIComponent(url)}`}
         target="_blank"
···
         <BlueskyLinkTiny className="shrink-0" />
         Bluesky
       </a>
-      <Separator classname="h-3" />
+      <Separator classname="h-4" />
       <button
         id="copy-quote-link"
-        className="flex gap-1 items-center hover:font-bold p-1"
+        className="flex gap-1 items-center hover:font-bold px-1"
         onClick={() => {
           let rect = document
             .getElementById("copy-quote-link")
···
         <CopyTiny className="shrink-0" />
         Link
       </button>
+      <Separator classname="h-4" />
+
+      {identity?.atp_did && (
+        <button
+          className="flex gap-1 items-center hover:font-bold px-1"
+          onClick={() => {
+            if (!position) return;
+            useInteractionState.setState({
+              drawer: "comments",
+              drawerOpen: true,
+              commentBox: { quote: position },
+            });
+          }}
+        >
+          <CommentTiny /> Comment
+        </button>
+      )}
     </>
   );
 };

app/lish/[did]/[publication]/[rkey]/quotePosition.ts

···
   };
 }
 
-export const QUOTE_PARAM = "l_quote";
+export const QUOTE_PARAM = "/l-quote/";
 
 /**
  * Encodes quote position into a URL-friendly string

app/lish/[did]/[publication]/[rkey]/useHighlight.tsx

···
 import { useContext } from "react";
 import { PostPageContext } from "./PostPageContext";
 import { create } from "zustand";
-
-export interface QuotePosition {
-  start: {
-    block: number[];
-    offset: number;
-  };
-  end: {
-    block: number[];
-    offset: number;
-  };
-}
+import { decodeQuotePosition } from "./quotePosition";
 
 export const useActiveHighlightState = create(() => ({
   activeHighlight: null as null | number,
···
     })
     .filter((highlight) => highlight !== null);
 };
-
-/**
- * Encodes quote position into a URL-friendly string
- * Format: startBlock_startOffset-endBlock_endOffset
- * Block paths are joined with dots: 1.2.0_45-1.2.3_67
- * Simple blocks: 0:12-2:45
- */
-export function encodeQuotePosition(position: QuotePosition): string {
-  const { start, end } = position;
-  return `${start.block.join(".")}_${start.offset}-${end.block.join(".")}_${end.offset}`;
-}
-
-/**
- * Decodes quote position from URL parameter
- * Returns null if the format is invalid
- */
-export function decodeQuotePosition(encoded: string): QuotePosition | null {
-  try {
-    // Match format: blockPath:number-blockPath:number
-    // Block paths can be: 5, 1.2, 0.1.3, etc.
-    const match = encoded.match(/^([\d.]+)_(\d+)-([\d.]+)_(\d+)$/);
-
-    if (!match) {
-      return null;
-    }
-
-    const [, startBlockPath, startOffset, endBlockPath, endOffset] = match;
-
-    const position: QuotePosition = {
-      start: {
-        block: startBlockPath.split(".").map((i) => parseInt(i)),
-        offset: parseInt(startOffset, 10),
-      },
-      end: {
-        block: endBlockPath.split(".").map((i) => parseInt(i)),
-        offset: parseInt(endOffset, 10),
-      },
-    };
-
-    return position;
-  } catch (error) {
-    return null;
-  }
-}

components/Icons/CloseFillTiny.tsx

···
+import { Props } from "./Props";
+
+export const CloseFillTiny = (props: Props) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.954 4.04603C12.282 4.37407 12.282 4.90593 11.954 5.23397L9.18794 8L11.954 10.766C12.282 11.0941 12.282 11.6259 11.954 11.954C11.6259 12.282 11.0941 12.282 10.766 11.954L8 9.18794L5.23397 11.954C4.90593 12.282 4.37407 12.282 4.04603 11.954C3.71799 11.6259 3.71799 11.0941 4.04603 10.766L6.81206 8L4.04603 5.23397C3.71799 4.90593 3.71799 4.37407 4.04603 4.04603C4.37407 3.71799 4.90593 3.71799 5.23397 4.04603L8 6.81206L10.766 4.04603C11.0941 3.71799 11.6259 3.71799 11.954 4.04603Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

lexicons/api/lexicons.ts

···
                 ref: 'lex:pub.leaflet.richtext.facet',
               },
             },
+            attachment: {
+              type: 'union',
+              refs: ['lex:pub.leaflet.comment#linearDocumentQuote'],
+            },
+          },
+        },
+      },
+      linearDocumentQuote: {
+        type: 'object',
+        required: ['document', 'quote'],
+        properties: {
+          document: {
+            type: 'string',
+            format: 'at-uri',
+          },
+          quote: {
+            type: 'ref',
+            ref: 'lex:pub.leaflet.pages.linearDocument#quote',
           },
         },
       },
···
       },
       textAlignRight: {
         type: 'token',
+      },
+      quote: {
+        type: 'object',
+        required: ['start', 'end'],
+        properties: {
+          start: {
+            type: 'ref',
+            ref: 'lex:pub.leaflet.pages.linearDocument#position',
+          },
+          end: {
+            type: 'ref',
+            ref: 'lex:pub.leaflet.pages.linearDocument#position',
+          },
+        },
+      },
+      position: {
+        type: 'object',
+        required: ['block', 'offset'],
+        properties: {
+          block: {
+            type: 'array',
+            items: {
+              type: 'integer',
+            },
+          },
+          offset: {
+            type: 'integer',
+          },
+        },
       },
     },
   },

lexicons/api/types/pub/leaflet/comment.ts

···
 import { validate as _validate } from '../../../lexicons'
 import { $Typed, is$typed as _is$typed, OmitKey } from '../../../util'
 import type * as PubLeafletRichtextFacet from './richtext/facet'
+import type * as PubLeafletPagesLinearDocument from './pages/linearDocument'
 
 const is$typed = _is$typed,
   validate = _validate
···
   reply?: ReplyRef
   plaintext: string
   facets?: PubLeafletRichtextFacet.Main[]
+  attachment?: $Typed<LinearDocumentQuote> | { $type: string }
   [k: string]: unknown
 }
 
···
 
 export function validateRecord<V>(v: V) {
   return validate<Record & V>(v, id, hashRecord, true)
+}
+
+export interface LinearDocumentQuote {
+  $type?: 'pub.leaflet.comment#linearDocumentQuote'
+  document: string
+  quote: PubLeafletPagesLinearDocument.Quote
+}
+
+const hashLinearDocumentQuote = 'linearDocumentQuote'
+
+export function isLinearDocumentQuote<V>(v: V) {
+  return is$typed(v, id, hashLinearDocumentQuote)
+}
+
+export function validateLinearDocumentQuote<V>(v: V) {
+  return validate<LinearDocumentQuote & V>(v, id, hashLinearDocumentQuote)
 }
 
 export interface ReplyRef {

lexicons/api/types/pub/leaflet/pages/linearDocument.ts

···
 export const TEXTALIGNLEFT = `${id}#textAlignLeft`
 export const TEXTALIGNCENTER = `${id}#textAlignCenter`
 export const TEXTALIGNRIGHT = `${id}#textAlignRight`
+
+export interface Quote {
+  $type?: 'pub.leaflet.pages.linearDocument#quote'
+  start: Position
+  end: Position
+}
+
+const hashQuote = 'quote'
+
+export function isQuote<V>(v: V) {
+  return is$typed(v, id, hashQuote)
+}
+
+export function validateQuote<V>(v: V) {
+  return validate<Quote & V>(v, id, hashQuote)
+}
+
+export interface Position {
+  $type?: 'pub.leaflet.pages.linearDocument#position'
+  block: number[]
+  offset: number
+}
+
+const hashPosition = 'position'
+
+export function isPosition<V>(v: V) {
+  return is$typed(v, id, hashPosition)
+}
+
+export function validatePosition<V>(v: V) {
+  return validate<Position & V>(v, id, hashPosition)
+}

lexicons/pub/leaflet/comment.json

···
               "type": "ref",
               "ref": "pub.leaflet.richtext.facet"
             }
+          },
+          "attachment": {
+            "type": "union",
+            "refs": [
+              "#linearDocumentQuote"
+            ]
           }
+        }
+      }
+    },
+    "linearDocumentQuote": {
+      "type": "object",
+      "required": [
+        "document",
+        "quote"
+      ],
+      "properties": {
+        "document": {
+          "type": "string",
+          "format": "at-uri"
+        },
+        "quote": {
+          "type": "ref",
+          "ref": "pub.leaflet.pages.linearDocument#quote"
         }
       }
     },

lexicons/pub/leaflet/pages/linearDocument.json

···
     },
     "textAlignRight": {
       "type": "token"
+    },
+    "quote": {
+      "type": "object",
+      "required": [
+        "start",
+        "end"
+      ],
+      "properties": {
+        "start": {
+          "type": "ref",
+          "ref": "#position"
+        },
+        "end": {
+          "type": "ref",
+          "ref": "#position"
+        }
+      }
+    },
+    "position": {
+      "type": "object",
+      "required": [
+        "block",
+        "offset"
+      ],
+      "properties": {
+        "block": {
+          "type": "array",
+          "items": {
+            "type": "integer"
+          }
+        },
+        "offset": {
+          "type": "integer"
+        }
+      }
     }
   }
 }

lexicons/src/comment.ts

···
             type: "array",
             items: { type: "ref", ref: PubLeafletRichTextFacet.id },
           },
+          attachment: { type: "union", refs: ["#linearDocumentQuote"] },
         },
+      },
+    },
+    linearDocumentQuote: {
+      type: "object",
+      required: ["document", "quote"],
+      properties: {
+        document: { type: "string", format: "at-uri" },
+        quote: { type: "ref", ref: "pub.leaflet.pages.linearDocument#quote" },
       },
     },
     replyRef: {

lexicons/src/pages/LinearDocument.ts

···
     textAlignLeft: { type: "token" },
     textAlignCenter: { type: "token" },
     textAlignRight: { type: "token" },
+    quote: {
+      type: "object",
+      required: ["start", "end"],
+      properties: {
+        start: { type: "ref", ref: "#position" },
+        end: { type: "ref", ref: "#position" },
+      },
+    },
+    position: {
+      type: "object",
+      required: ["block", "offset"],
+      properties: {
+        block: { type: "array", items: { type: "integer" } },
+        offset: { type: "integer" },
+      },
+    },
   },
 };

next-env.d.ts

···
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.