{blocks.map((b, index) => {
return
;
})}
diff --git a/components/Blocks/TextBlock/RenderYJSFragment.tsx b/components/Blocks/TextBlock/RenderYJSFragment.tsx
index 35c97cad..fb12897f 100644
--- a/components/Blocks/TextBlock/RenderYJSFragment.tsx
+++ b/components/Blocks/TextBlock/RenderYJSFragment.tsx
@@ -91,6 +91,21 @@ export function RenderYJSFragment({
);
}
+ // Handle footnote inline nodes
+ if (
+ node.constructor === XmlElement &&
+ node.nodeName === "footnote"
+ ) {
+ const id = node.getAttribute("footnoteEntityID") || "";
+ return (
+
+ );
+ }
+
// Handle atMention inline nodes
if (
node.constructor === XmlElement &&
diff --git a/components/Blocks/TextBlock/index.tsx b/components/Blocks/TextBlock/index.tsx
index 71574e9a..fd6a6be5 100644
--- a/components/Blocks/TextBlock/index.tsx
+++ b/components/Blocks/TextBlock/index.tsx
@@ -25,6 +25,7 @@ import { useLeafletPublicationData } from "components/PageSWRDataProvider";
import { DotLoader } from "components/utils/DotLoader";
import { useMountProsemirror } from "./mountProsemirror";
import { schema } from "./schema";
+import { useFootnotePopoverStore } from "components/Footnotes/FootnotePopover";
import { blockTextSize } from "src/utils/blockTextSize";
import { Mention, MentionAutocomplete } from "components/Mention";
@@ -171,6 +172,19 @@ export function RenderedTextBlock(props: {
wordBreak: "break-word",
...(props.type === "heading" ? { fontSize: headingFontSize[headingLevel?.data.value || 1] } : {}),
}}
+ onClick={(e) => {
+ let target = e.target as HTMLElement;
+ let footnoteRef = target.closest(".footnote-ref") as HTMLElement | null;
+ if (!footnoteRef) return;
+ let footnoteID = footnoteRef.dataset.footnoteId;
+ if (!footnoteID) return;
+ let store = useFootnotePopoverStore.getState();
+ if (store.activeFootnoteID === footnoteID) {
+ store.close();
+ } else {
+ store.open(footnoteID, footnoteRef);
+ }
+ }}
className={`
${alignmentClass}
${props.type === "blockquote" ? (props.previousBlock?.type === "blockquote" ? `blockquote pt-3 ` : "blockquote") : ""}
diff --git a/components/Blocks/TextBlock/inputRules.ts b/components/Blocks/TextBlock/inputRules.ts
index 90673c91..44814605 100644
--- a/components/Blocks/TextBlock/inputRules.ts
+++ b/components/Blocks/TextBlock/inputRules.ts
@@ -12,6 +12,8 @@ import { schema } from "./schema";
import { useUIState } from "src/useUIState";
import { flushSync } from "react-dom";
import { LAST_USED_CODE_LANGUAGE_KEY } from "src/utils/codeLanguageStorage";
+import { insertFootnote } from "./insertFootnote";
+import { useEditorStates } from "src/state/useEditorState";
export const inputrules = (
propsRef: MutableRefObject
,
repRef: MutableRefObject | null>,
@@ -227,6 +229,22 @@ export const inputrules = (
return tr;
}),
+ // Footnote - [^ triggers footnote insertion
+ new InputRule(/\[\^$/, (state, match, start, end) => {
+ let tr = state.tr.delete(start, end);
+ setTimeout(() => {
+ let view = useEditorStates.getState().editorStates[propsRef.current.entityID]?.view;
+ if (!view || !repRef.current) return;
+ insertFootnote(
+ view,
+ propsRef.current.entityID,
+ repRef.current,
+ propsRef.current.entity_set.set,
+ );
+ }, 0);
+ return tr;
+ }),
+
// Mention - @ at start of line, after space, or after hard break
new InputRule(/(?:^|\s)@$/, (state, match, start, end) => {
if (!openMentionAutocomplete) return null;
diff --git a/components/Blocks/TextBlock/insertFootnote.ts b/components/Blocks/TextBlock/insertFootnote.ts
new file mode 100644
index 00000000..7f83658a
--- /dev/null
+++ b/components/Blocks/TextBlock/insertFootnote.ts
@@ -0,0 +1,43 @@
+import { EditorView } from "prosemirror-view";
+import { v7 } from "uuid";
+import { Replicache } from "replicache";
+import type { ReplicacheMutators } from "src/replicache";
+import { schema } from "./schema";
+import { generateKeyBetween } from "fractional-indexing";
+import { scanIndex } from "src/replicache/utils";
+
+export async function insertFootnote(
+ view: EditorView,
+ blockID: string,
+ rep: Replicache,
+ permissionSet: string,
+) {
+ let footnoteEntityID = v7();
+
+ let existingFootnotes = await rep.query(async (tx) => {
+ let scan = scanIndex(tx);
+ return scan.eav(blockID, "block/footnote");
+ });
+ let lastPosition =
+ existingFootnotes.length > 0
+ ? existingFootnotes
+ .map((f) => f.data.position)
+ .sort()
+ .at(-1)!
+ : null;
+ let position = generateKeyBetween(lastPosition, null);
+
+ await rep.mutate.createFootnote({
+ footnoteEntityID,
+ blockID,
+ permission_set: permissionSet,
+ position,
+ });
+
+ let node = schema.nodes.footnote.create({ footnoteEntityID });
+ let { from } = view.state.selection;
+ let tr = view.state.tr.insert(from, node);
+ view.dispatch(tr);
+
+ return footnoteEntityID;
+}
diff --git a/components/Blocks/TextBlock/mountProsemirror.ts b/components/Blocks/TextBlock/mountProsemirror.ts
index ff646a80..6a5af3c9 100644
--- a/components/Blocks/TextBlock/mountProsemirror.ts
+++ b/components/Blocks/TextBlock/mountProsemirror.ts
@@ -1,5 +1,5 @@
import { useLayoutEffect, useRef, useEffect, useState } from "react";
-import { EditorState } from "prosemirror-state";
+import { EditorState, Transaction } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { baseKeymap } from "prosemirror-commands";
import { keymap } from "prosemirror-keymap";
@@ -10,6 +10,7 @@ import { Replicache } from "replicache";
import { produce } from "immer";
import { schema } from "./schema";
+import { UndoManager } from "src/undoManager";
import { TextBlockKeymap } from "./keymap";
import { inputrules } from "./inputRules";
import { highlightSelectionPlugin } from "./plugins";
@@ -24,6 +25,7 @@ import { useHandlePaste } from "./useHandlePaste";
import { BlockProps } from "../Block";
import { useEntitySetContext } from "components/EntitySetProvider";
import { didToBlueskyUrl, atUriToUrl } from "src/utils/mentionUtils";
+import { useFootnotePopoverStore } from "components/Footnotes/FootnotePopover";
export function useMountProsemirror({
props,
@@ -81,6 +83,49 @@ export function useMountProsemirror({
handleClickOn: (_view, _pos, node, _nodePos, _event, direct) => {
if (!direct) return;
+ // Check for footnote inline nodes
+ if (node?.type === schema.nodes.footnote) {
+ let footnoteID = node.attrs.footnoteEntityID;
+ let supEl = _event.target as HTMLElement;
+ let sup = supEl.closest(".footnote-ref") as HTMLElement | null;
+ if (!sup) return;
+
+ // On mobile/tablet or canvas, show popover
+ let isDesktop = window.matchMedia("(min-width: 1280px)").matches;
+ let isCanvas = propsRef.current.pageType === "canvas";
+ if (!isDesktop || isCanvas) {
+ let store = useFootnotePopoverStore.getState();
+ if (store.activeFootnoteID === footnoteID) {
+ store.close();
+ } else {
+ store.open(footnoteID, sup);
+ }
+ return;
+ }
+
+ // On desktop, prefer the side column editor if visible
+ let sideColumn = document.querySelector(".footnote-side-column");
+ let editor = sideColumn?.querySelector(
+ `[data-footnote-editor="${footnoteID}"]`,
+ ) as HTMLElement | null;
+ // Fall back to the bottom section
+ if (!editor) {
+ editor = document.querySelector(
+ `[data-footnote-editor="${footnoteID}"]`,
+ ) as HTMLElement | null;
+ }
+ if (editor) {
+ editor.scrollIntoView({ behavior: "smooth", block: "nearest" });
+ let pm = editor.querySelector(
+ ".ProseMirror",
+ ) as HTMLElement | null;
+ if (pm) {
+ setTimeout(() => pm!.focus(), 100);
+ }
+ }
+ return;
+ }
+
// Check for didMention inline nodes
if (node?.type === schema.nodes.didMention) {
window.open(
@@ -143,36 +188,49 @@ export function useMountProsemirror({
useEditorStates.setState((s) => {
let oldEditorState = this.state;
let newState = this.state.apply(tr);
- let addToHistory = tr.getMeta("addToHistory");
- let isBulkOp = tr.getMeta("bulkOp");
let docHasChanges = tr.steps.length !== 0 || tr.docChanged;
- // Handle undo/redo history with timeout-based grouping
- if (addToHistory !== false && docHasChanges) {
- if (actionTimeout.current) window.clearTimeout(actionTimeout.current);
- else if (!isBulkOp) rep.undoManager.startGroup();
-
- if (!isBulkOp) {
- actionTimeout.current = window.setTimeout(() => {
- rep.undoManager.endGroup();
- actionTimeout.current = null;
- }, 200);
+ // Diff for removed/added footnote nodes
+ if (docHasChanges) {
+ let oldFootnotes = new Set();
+ let newFootnotes = new Set();
+ oldEditorState.doc.descendants((n) => {
+ if (n.type.name === "footnote")
+ oldFootnotes.add(n.attrs.footnoteEntityID);
+ });
+ newState.doc.descendants((n) => {
+ if (n.type.name === "footnote")
+ newFootnotes.add(n.attrs.footnoteEntityID);
+ });
+ // Removed footnotes
+ for (let id of oldFootnotes) {
+ if (!newFootnotes.has(id)) {
+ repRef.current?.mutate.deleteFootnote({
+ footnoteEntityID: id,
+ blockID: entityID,
+ });
+ }
}
+ }
- let setState = (s: EditorState) => () =>
- useEditorStates.setState(
- produce((draft) => {
- let view = draft.editorStates[entityID]?.view;
- if (!view?.hasFocus() && !isBulkOp) view?.focus();
- draft.editorStates[entityID]!.editor = s;
- }),
- );
+ // Handle undo/redo history with timeout-based grouping
+ let isBulkOp = tr.getMeta("bulkOp");
+ let setState = (s: EditorState) => () =>
+ useEditorStates.setState(
+ produce((draft) => {
+ let view = draft.editorStates[entityID]?.view;
+ if (!view?.hasFocus() && !isBulkOp) view?.focus();
+ draft.editorStates[entityID]!.editor = s;
+ }),
+ );
- rep.undoManager.add({
- redo: setState(newState),
- undo: setState(oldEditorState),
- });
- }
+ trackUndoRedo(
+ tr,
+ rep.undoManager,
+ actionTimeout,
+ setState(oldEditorState),
+ setState(newState),
+ );
return {
editorStates: {
@@ -191,7 +249,33 @@ export function useMountProsemirror({
return { mountRef, actionTimeout };
}
-function useYJSValue(entityID: string) {
+export function trackUndoRedo(
+ tr: Transaction,
+ undoManager: UndoManager,
+ actionTimeout: { current: number | null },
+ undo: () => void,
+ redo: () => void,
+) {
+ let addToHistory = tr.getMeta("addToHistory");
+ let isBulkOp = tr.getMeta("bulkOp");
+ let docHasChanges = tr.steps.length !== 0 || tr.docChanged;
+
+ if (addToHistory !== false && docHasChanges) {
+ if (actionTimeout.current) window.clearTimeout(actionTimeout.current);
+ else if (!isBulkOp) undoManager.startGroup();
+
+ if (!isBulkOp) {
+ actionTimeout.current = window.setTimeout(() => {
+ undoManager.endGroup();
+ actionTimeout.current = null;
+ }, 200);
+ }
+
+ undoManager.add({ undo, redo });
+ }
+}
+
+export function useYJSValue(entityID: string) {
const [ydoc] = useState(new Y.Doc());
const docStateFromReplicache = useEntity(entityID, "block/text");
let rep = useReplicache();
diff --git a/components/Blocks/TextBlock/schema.ts b/components/Blocks/TextBlock/schema.ts
index ab9ff2a6..88b2ed91 100644
--- a/components/Blocks/TextBlock/schema.ts
+++ b/components/Blocks/TextBlock/schema.ts
@@ -194,6 +194,41 @@ let baseSchema = {
];
},
} as NodeSpec,
+ footnote: {
+ attrs: { footnoteEntityID: {} },
+ group: "inline",
+ inline: true,
+ atom: true,
+ selectable: false,
+ draggable: false,
+ parseDOM: [
+ {
+ tag: "span.footnote-ref",
+ getAttrs(dom: HTMLElement) {
+ return {
+ footnoteEntityID: dom.getAttribute("data-footnote-id"),
+ };
+ },
+ },
+ {
+ tag: "sup.footnote-ref",
+ getAttrs(dom: HTMLElement) {
+ return {
+ footnoteEntityID: dom.getAttribute("data-footnote-id"),
+ };
+ },
+ },
+ ],
+ toDOM(node) {
+ return [
+ "span",
+ {
+ class: "footnote-ref",
+ "data-footnote-id": node.attrs.footnoteEntityID,
+ },
+ ];
+ },
+ } as NodeSpec,
didMention: {
attrs: {
did: {},
diff --git a/components/Blocks/index.tsx b/components/Blocks/index.tsx
index f5d49802..b37b29c1 100644
--- a/components/Blocks/index.tsx
+++ b/components/Blocks/index.tsx
@@ -14,9 +14,10 @@ import { generateKeyBetween } from "fractional-indexing";
import { v7 } from "uuid";
import { Block } from "./Block";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
import { addShortcut } from "src/shortcuts";
import { useHandleDrop } from "./useHandleDrop";
+import { useFootnoteContext } from "components/Footnotes/FootnoteContext";
export function Blocks(props: { entityID: string }) {
let rep = useReplicache();
@@ -93,9 +94,17 @@ export function Blocks(props: { entityID: string }) {
),
);
+ let { footnotes } = useFootnoteContext();
+
+ let [areFootnotes, setAreFootnotes] = useState(false);
+
+ useEffect(() => {
+ setAreFootnotes(footnotes.length > 0);
+ }, [footnotes.length]);
+
return (
{
if (!permissions.write) return;
if (useUIState.getState().selectedBlocks.length > 1) return;
@@ -167,6 +176,7 @@ export function Blocks(props: { entityID: string }) {
lastVisibleBlock={lastVisibleBlock || undefined}
lastRootBlock={lastRootBlock || undefined}
entityID={props.entityID}
+ areFootnotes={areFootnotes}
/>
);
@@ -226,6 +236,7 @@ const BlockListBottom = (props: {
lastRootBlock: Block | undefined;
lastVisibleBlock: Block | undefined;
entityID: string;
+ areFootnotes: boolean;
}) => {
let { rep } = useReplicache();
let entity_set = useEntitySetContext();
@@ -236,9 +247,11 @@ const BlockListBottom = (props: {
});
if (!entity_set.permissions.write) return;
+ if (props.areFootnotes) return;
+
return (
{
let newEntityID = v7();
if (
diff --git a/components/DesktopFooter.tsx b/components/DesktopFooter.tsx
index f8937218..976b47b7 100644
--- a/components/DesktopFooter.tsx
+++ b/components/DesktopFooter.tsx
@@ -2,6 +2,7 @@
import { useUIState } from "src/useUIState";
import { Media } from "./Media";
import { Toolbar } from "./Toolbar";
+import { FootnoteToolbar } from "./Toolbar/FootnoteToolbarWrapper";
import { useEntitySetContext } from "./EntitySetProvider";
import { focusBlock } from "src/utils/focusBlock";
import { hasBlockToolbar } from "app/[leaflet_id]/Footer";
@@ -18,6 +19,10 @@ export function DesktopPageFooter(props: { pageID: string }) {
let blockType = useEntity(focusedEntity?.entityID || null, "block/type")?.data
.value;
+ let isFootnoteFocused =
+ focusedEntity?.entityType === "footnote" &&
+ focusedEntity.parent === props.pageID;
+
return (
)}
+ {isFootnoteFocused && entity_set.permissions.write && (
+ {
+ if (e.currentTarget === e.target) e.preventDefault();
+ }}
+ >
+
+
+ )}
);
}
diff --git a/components/Footnotes/FootnoteContext.tsx b/components/Footnotes/FootnoteContext.tsx
new file mode 100644
index 00000000..918c7461
--- /dev/null
+++ b/components/Footnotes/FootnoteContext.tsx
@@ -0,0 +1,18 @@
+import { createContext, useContext } from "react";
+import type { FootnoteInfo } from "./usePageFootnotes";
+
+type FootnoteContextValue = {
+ pageID: string;
+ footnotes: FootnoteInfo[];
+ indexMap: Record;
+};
+
+export const FootnoteContext = createContext({
+ pageID: "",
+ footnotes: [],
+ indexMap: {},
+});
+
+export function useFootnoteContext() {
+ return useContext(FootnoteContext);
+}
diff --git a/components/Footnotes/FootnoteEditor.tsx b/components/Footnotes/FootnoteEditor.tsx
new file mode 100644
index 00000000..a2a2d30a
--- /dev/null
+++ b/components/Footnotes/FootnoteEditor.tsx
@@ -0,0 +1,235 @@
+import { useLayoutEffect, useRef } from "react";
+import { EditorState, TextSelection } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { baseKeymap, toggleMark } from "prosemirror-commands";
+import { keymap } from "prosemirror-keymap";
+import { ySyncPlugin } from "y-prosemirror";
+import { schema } from "components/Blocks/TextBlock/schema";
+import { useReplicache } from "src/replicache";
+import { autolink } from "components/Blocks/TextBlock/autolink-plugin";
+import { betterIsUrl } from "src/utils/isURL";
+import {
+ useYJSValue,
+ trackUndoRedo,
+} from "components/Blocks/TextBlock/mountProsemirror";
+import { DeleteTiny } from "components/Icons/DeleteTiny";
+import { FootnoteItemLayout } from "./FootnoteItemLayout";
+import { useEditorStates } from "src/state/useEditorState";
+import { useUIState } from "src/useUIState";
+import { useFootnoteContext } from "./FootnoteContext";
+
+export function FootnoteEditor(props: {
+ footnoteEntityID: string;
+ index: number;
+ editable: boolean;
+ onDelete?: () => void;
+ autoFocus?: boolean;
+}) {
+ let mountRef = useRef(null);
+ let rep = useReplicache();
+ let value = useYJSValue(props.footnoteEntityID);
+ let actionTimeout = useRef(null);
+ let { pageID } = useFootnoteContext();
+
+ useLayoutEffect(() => {
+ if (!mountRef.current || !value) return;
+
+ let plugins = [
+ ySyncPlugin(value),
+ keymap({
+ "Meta-b": toggleMark(schema.marks.strong),
+ "Ctrl-b": toggleMark(schema.marks.strong),
+ "Meta-u": toggleMark(schema.marks.underline),
+ "Ctrl-u": toggleMark(schema.marks.underline),
+ "Meta-i": toggleMark(schema.marks.em),
+ "Ctrl-i": toggleMark(schema.marks.em),
+ "Shift-Enter": (state, dispatch) => {
+ let hardBreak = schema.nodes.hard_break.create();
+ if (dispatch) {
+ dispatch(state.tr.replaceSelectionWith(hardBreak).scrollIntoView());
+ }
+ return true;
+ },
+ Enter: (_state, _dispatch, view) => {
+ view?.dom.blur();
+ return true;
+ },
+ }),
+ keymap(baseKeymap),
+ autolink({
+ type: schema.marks.link,
+ shouldAutoLink: () => true,
+ defaultProtocol: "https",
+ }),
+ ];
+
+ let state = EditorState.create({ schema, plugins });
+ let view = new EditorView(
+ { mount: mountRef.current },
+ {
+ state,
+ editable: () => props.editable,
+ handlePaste: (view, e) => {
+ let text = e.clipboardData?.getData("text");
+ if (text && betterIsUrl(text)) {
+ let selection = view.state.selection as TextSelection;
+ let tr = view.state.tr;
+ let { from, to } = selection;
+ if (selection.empty) {
+ tr.insertText(text, selection.from);
+ tr.addMark(
+ from,
+ from + text.length,
+ schema.marks.link.create({ href: text }),
+ );
+ } else {
+ tr.addMark(from, to, schema.marks.link.create({ href: text }));
+ }
+ view.dispatch(tr);
+ return true;
+ }
+ },
+ handleClickOn: (_view, _pos, node, _nodePos, _event, direct) => {
+ if (!direct) return;
+ if (node.nodeSize - 2 <= _pos) return;
+ const nodeAt1 = node.nodeAt(_pos - 1);
+ const nodeAt2 = node.nodeAt(Math.max(_pos - 2, 0));
+ let linkMark =
+ nodeAt1?.marks.find((f) => f.type === schema.marks.link) ||
+ nodeAt2?.marks.find((f) => f.type === schema.marks.link);
+ if (linkMark) {
+ window.open(linkMark.attrs.href, "_blank");
+ return;
+ }
+ },
+ dispatchTransaction(this: EditorView, tr) {
+ let oldState = this.state;
+ let newState = this.state.apply(tr);
+ this.updateState(newState);
+
+ useEditorStates.setState((s) => ({
+ editorStates: {
+ ...s.editorStates,
+ [props.footnoteEntityID]: {
+ editor: newState,
+ view: this,
+ },
+ },
+ }));
+
+ trackUndoRedo(
+ tr,
+ rep.undoManager,
+ actionTimeout,
+ () => {
+ this.focus();
+ this.updateState(oldState);
+ },
+ () => {
+ this.focus();
+ this.updateState(newState);
+ },
+ );
+ },
+ },
+ );
+
+ // Register editor state
+ useEditorStates.setState((s) => ({
+ editorStates: {
+ ...s.editorStates,
+ [props.footnoteEntityID]: {
+ editor: view.state,
+ view,
+ },
+ },
+ }));
+
+ // Subscribe to external state changes (e.g. link toolbar)
+ let unsubscribe = useEditorStates.subscribe((s) => {
+ let editorState = s.editorStates[props.footnoteEntityID];
+ if (editorState?.editor)
+ editorState.view?.updateState(editorState.editor);
+ });
+
+ // Set focusedEntity on focus
+ let handleFocus = () => {
+ useUIState.setState({
+ focusedEntity: {
+ entityType: "footnote",
+ entityID: props.footnoteEntityID,
+ parent: pageID,
+ },
+ });
+ };
+ view.dom.addEventListener("focus", handleFocus);
+
+ if (props.autoFocus) {
+ setTimeout(() => view.focus(), 50);
+ }
+
+ return () => {
+ unsubscribe();
+ view.dom.removeEventListener("focus", handleFocus);
+ view.destroy();
+ useEditorStates.setState((s) => {
+ let { [props.footnoteEntityID]: _, ...rest } = s.editorStates;
+ return { editorStates: rest };
+ });
+ };
+ }, [
+ props.footnoteEntityID,
+ value,
+ props.editable,
+ props.autoFocus,
+ rep.undoManager,
+ pageID,
+ ]);
+
+ return (
+
+
{
+ let pm = mountRef.current?.querySelector(
+ ".ProseMirror",
+ ) as HTMLElement | null;
+ if (pm) {
+ pm.focus();
+ }
+ }}
+ trailing={
+ props.editable && props.onDelete ? (
+
+ ) : undefined
+ }
+ >
+
+
+
+ {props.indexHref ? (
+
+ {indexContent}
+
+ ) : (
+
+ )}
+
+ {props.children}
+
+ {props.trailing}
+
+ {
+ deleteFootnoteFromBlock(
+ footnote.footnoteEntityID,
+ footnote.blockID,
+ rep.rep,
+ );
+ close();
+ }
+ : undefined
+ }
+ />
+
+ );
+}
diff --git a/components/Footnotes/FootnoteSection.tsx b/components/Footnotes/FootnoteSection.tsx
new file mode 100644
index 00000000..b230d150
--- /dev/null
+++ b/components/Footnotes/FootnoteSection.tsx
@@ -0,0 +1,38 @@
+import { useFootnoteContext } from "./FootnoteContext";
+import { FootnoteEditor } from "./FootnoteEditor";
+import { useReplicache } from "src/replicache";
+import { useEntitySetContext } from "components/EntitySetProvider";
+import { deleteFootnoteFromBlock } from "./deleteFootnoteFromBlock";
+import { FootnoteSectionLayout } from "./FootnoteItemLayout";
+
+export function FootnoteSection(props: { hiddenOnDesktop?: boolean }) {
+ let { footnotes } = useFootnoteContext();
+ let { permissions } = useEntitySetContext();
+ let rep = useReplicache();
+
+ if (footnotes.length === 0) return null;
+
+ return (
+
+ {footnotes.map((fn) => (
+ {
+ deleteFootnoteFromBlock(
+ fn.footnoteEntityID,
+ fn.blockID,
+ rep.rep,
+ );
+ }
+ : undefined
+ }
+ />
+ ))}
+
+ );
+}
diff --git a/components/Footnotes/FootnoteSideColumn.tsx b/components/Footnotes/FootnoteSideColumn.tsx
new file mode 100644
index 00000000..f73fac18
--- /dev/null
+++ b/components/Footnotes/FootnoteSideColumn.tsx
@@ -0,0 +1,63 @@
+import { useCallback } from "react";
+import { useFootnoteContext } from "./FootnoteContext";
+import { FootnoteEditor } from "./FootnoteEditor";
+import { useReplicache } from "src/replicache";
+import { useEntitySetContext } from "components/EntitySetProvider";
+import { deleteFootnoteFromBlock } from "./deleteFootnoteFromBlock";
+import { FootnoteSideColumnLayout } from "./FootnoteSideColumnLayout";
+
+type EditorFootnoteItem = {
+ id: string;
+ index: number;
+ footnoteEntityID: string;
+ blockID: string;
+};
+
+export function FootnoteSideColumn(props: {
+ pageEntityID: string;
+ visible: boolean;
+ fullPageScroll?: boolean;
+}) {
+ let { footnotes } = useFootnoteContext();
+ let { permissions } = useEntitySetContext();
+ let rep = useReplicache();
+
+ let items: EditorFootnoteItem[] = footnotes.map((fn) => ({
+ id: fn.footnoteEntityID,
+ index: fn.index,
+ footnoteEntityID: fn.footnoteEntityID,
+ blockID: fn.blockID,
+ }));
+
+ let getAnchorSelector = useCallback(
+ (item: EditorFootnoteItem) =>
+ `.footnote-ref[data-footnote-id="${item.id}"]`,
+ [],
+ );
+
+ let renderItem = useCallback(
+ (item: EditorFootnoteItem & { top: number }) => (
+ deleteFootnoteFromBlock(item.footnoteEntityID, item.blockID, rep.rep)
+ : undefined
+ }
+ />
+ ),
+ [permissions.write, rep.rep],
+ );
+
+ return (
+
+ );
+}
diff --git a/components/Footnotes/FootnoteSideColumnLayout.tsx b/components/Footnotes/FootnoteSideColumnLayout.tsx
new file mode 100644
index 00000000..ae9007ba
--- /dev/null
+++ b/components/Footnotes/FootnoteSideColumnLayout.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback, ReactNode } from "react";
+import { useUIState } from "src/useUIState";
+
+export type FootnoteSideItem = {
+ id: string;
+ index: number;
+};
+
+const GAP = 4;
+
+export function FootnoteSideColumnLayout(props: {
+ items: T[];
+ visible: boolean;
+ fullPageScroll?: boolean;
+ getAnchorSelector: (item: T) => string;
+ renderItem: (item: T & { top: number }) => ReactNode;
+}) {
+ let containerRef = useRef(null);
+ let innerRef = useRef(null);
+ let [positions, setPositions] = useState<(T & { top: number })[]>([]);
+ let [scrollOffset, setScrollOffset] = useState(0);
+
+ let calculatePositions = useCallback(() => {
+ let container = containerRef.current;
+ let inner = innerRef.current;
+ if (!container || !inner || props.items.length === 0) {
+ setPositions([]);
+ return;
+ }
+
+ let scrollWrapper = container.closest(".pageWrapper")
+ ?.querySelector(".pageScrollWrapper") as HTMLElement | null;
+ if (!scrollWrapper) return;
+
+ let scrollTop = scrollWrapper.scrollTop;
+ let scrollWrapperRect = scrollWrapper.getBoundingClientRect();
+ setScrollOffset(scrollTop);
+
+ let measurements: (T & { anchorTop: number; height: number })[] = [];
+
+ for (let item of props.items) {
+ let supEl = scrollWrapper.querySelector(
+ props.getAnchorSelector(item),
+ ) as HTMLElement | null;
+ if (!supEl) continue;
+
+ let supRect = supEl.getBoundingClientRect();
+ let anchorTop = supRect.top - scrollWrapperRect.top + scrollTop;
+
+ let itemEl = inner.querySelector(
+ `[data-footnote-side-id="${item.id}"]`,
+ ) as HTMLElement | null;
+ let height = itemEl ? itemEl.offsetHeight : 54;
+
+ measurements.push({ ...item, anchorTop, height });
+ }
+
+ let resolved: (T & { top: number })[] = [];
+ let nextAvailableTop = 0;
+ for (let m of measurements) {
+ let top = Math.max(m.anchorTop, nextAvailableTop);
+ resolved.push({
+ ...m,
+ top,
+ });
+ nextAvailableTop = top + m.height + GAP;
+ }
+
+ setPositions(resolved);
+ }, [props.items, props.getAnchorSelector]);
+
+ useEffect(() => {
+ if (!props.visible) return;
+ calculatePositions();
+
+ let scrollWrapper = containerRef.current?.closest(".pageWrapper")
+ ?.querySelector(".pageScrollWrapper") as HTMLElement | null;
+ if (!scrollWrapper) return;
+
+ let onScroll = () => {
+ setScrollOffset(scrollWrapper!.scrollTop);
+ };
+
+ scrollWrapper.addEventListener("scroll", onScroll);
+
+ let resizeObserver = new ResizeObserver(calculatePositions);
+ resizeObserver.observe(scrollWrapper);
+
+ let mutationObserver = new MutationObserver(calculatePositions);
+ mutationObserver.observe(scrollWrapper, {
+ childList: true,
+ subtree: true,
+ characterData: true,
+ });
+
+ return () => {
+ scrollWrapper!.removeEventListener("scroll", onScroll);
+ resizeObserver.disconnect();
+ mutationObserver.disconnect();
+ };
+ }, [props.visible, calculatePositions]);
+
+ if (!props.visible || props.items.length === 0) return null;
+
+ return (
+
+
+ {positions.map((item) => (
+
+ {props.renderItem(item)}
+
+ ))}
+
+
+ {props.children}
+
+ );
+}
diff --git a/components/Footnotes/deleteFootnoteFromBlock.ts b/components/Footnotes/deleteFootnoteFromBlock.ts
new file mode 100644
index 00000000..ed97a0a2
--- /dev/null
+++ b/components/Footnotes/deleteFootnoteFromBlock.ts
@@ -0,0 +1,32 @@
+import { useEditorStates } from "src/state/useEditorState";
+
+export function deleteFootnoteFromBlock(
+ footnoteEntityID: string,
+ blockID: string,
+ rep: any,
+) {
+ if (!rep) return;
+
+ let editorState = useEditorStates.getState().editorStates[blockID];
+ if (editorState?.view) {
+ let view = editorState.view;
+ let { doc } = view.state;
+ let tr = view.state.tr;
+ let found = false;
+ doc.descendants((node, pos) => {
+ if (
+ found ||
+ node.type.name !== "footnote" ||
+ node.attrs.footnoteEntityID !== footnoteEntityID
+ )
+ return;
+ found = true;
+ tr.delete(pos, pos + node.nodeSize);
+ });
+ if (found) {
+ view.dispatch(tr);
+ }
+ }
+
+ rep.mutate.deleteFootnote({ footnoteEntityID, blockID });
+}
diff --git a/components/Footnotes/usePageFootnotes.ts b/components/Footnotes/usePageFootnotes.ts
new file mode 100644
index 00000000..b2889a9a
--- /dev/null
+++ b/components/Footnotes/usePageFootnotes.ts
@@ -0,0 +1,61 @@
+import { useReplicache } from "src/replicache";
+import { useSubscribe } from "src/replicache/useSubscribe";
+import { scanIndex } from "src/replicache/utils";
+
+export type FootnoteInfo = {
+ footnoteEntityID: string;
+ blockID: string;
+ index: number;
+};
+
+export function usePageFootnotes(pageID: string) {
+ let rep = useReplicache();
+ let data = useSubscribe(
+ rep?.rep,
+ async (tx) => {
+ let scan = scanIndex(tx);
+ let cardBlocks = await scan.eav(pageID, "card/block");
+ let canvasBlocks = await scan.eav(pageID, "canvas/block");
+
+ let sortedCardBlocks = cardBlocks
+ .map((b) => ({ value: b.data.value, position: b.data.position }))
+ .toSorted((a, b) => (a.position > b.position ? 1 : -1));
+
+ let sortedCanvasBlocks = canvasBlocks
+ .map((b) => ({ value: b.data.value, position: b.data.position }))
+ .toSorted((a, b) => {
+ if (a.position.y === b.position.y) return a.position.x - b.position.x;
+ return a.position.y - b.position.y;
+ });
+
+ let sorted = [...sortedCardBlocks, ...sortedCanvasBlocks];
+
+ let footnotes: FootnoteInfo[] = [];
+ let indexMap: Record = {};
+ let idx = 1;
+
+ for (let block of sorted) {
+ let blockFootnotes = await scan.eav(block.value, "block/footnote");
+ let sortedFootnotes = blockFootnotes.toSorted((a, b) =>
+ a.data.position > b.data.position ? 1 : -1,
+ );
+ for (let fn of sortedFootnotes) {
+ footnotes.push({
+ footnoteEntityID: fn.data.value,
+ blockID: block.value,
+ index: idx,
+ });
+ indexMap[fn.data.value] = idx;
+ idx++;
+ }
+ }
+
+ return { pageID, footnotes, indexMap };
+ },
+ { dependencies: [pageID] },
+ );
+
+ return (
+ data || { pageID, footnotes: [], indexMap: {} as Record }
+ );
+}
diff --git a/components/Pages/Page.tsx b/components/Pages/Page.tsx
index 134f6ede..30f74696 100644
--- a/components/Pages/Page.tsx
+++ b/components/Pages/Page.tsx
@@ -17,6 +17,11 @@ import { PageOptions } from "./PageOptions";
import { CardThemeProvider } from "components/ThemeManager/ThemeProvider";
import { useDrawerOpen } from "app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer";
import { usePreserveScroll } from "src/hooks/usePreserveScroll";
+import { usePageFootnotes } from "components/Footnotes/usePageFootnotes";
+import { FootnoteContext } from "components/Footnotes/FootnoteContext";
+import { FootnoteSection } from "components/Footnotes/FootnoteSection";
+import { FootnoteSideColumn } from "components/Footnotes/FootnoteSideColumn";
+import { FootnotePopover } from "components/Footnotes/FootnotePopover";
export function Page(props: {
entityID: string;
@@ -36,37 +41,55 @@ export function Page(props: {
let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc";
let drawerOpen = useDrawerOpen(props.entityID);
+ let footnoteData = usePageFootnotes(props.entityID);
+ let isRightmostPage = useUIState((s) => {
+ let pages = s.openPages;
+ if (pages.length === 0) return true;
+ return pages[pages.length - 1] === props.entityID;
+ });
+ let sideColumnVisible = pageType === "doc" && !drawerOpen && isRightmostPage;
+
return (
- {
- if (e.defaultPrevented) return;
- if (rep) {
- if (isFocused) return;
- focusPage(props.entityID, rep);
+
+ {
+ if (e.defaultPrevented) return;
+ if (rep) {
+ if (isFocused) return;
+ focusPage(props.entityID, rep);
+ }
+ }}
+ id={elementId.page(props.entityID).container}
+ drawerOpen={!!drawerOpen}
+ isFocused={isFocused}
+ fullPageScroll={props.fullPageScroll}
+ pageType={pageType}
+ pageOptions={
+
}
- }}
- id={elementId.page(props.entityID).container}
- drawerOpen={!!drawerOpen}
- isFocused={isFocused}
- fullPageScroll={props.fullPageScroll}
- pageType={pageType}
- pageOptions={
-
- }
- >
- {props.first && pageType === "doc" && (
- <>
-
-
- )}
-
-
-
+ footnoteSideColumn={
+
+ }
+ >
+ {props.first && pageType === "doc" && (
+ <>
+
+
+ )}
+
+
+
+
+
);
}
@@ -75,6 +98,7 @@ export const PageWrapper = (props: {
id: string;
children: React.ReactNode;
pageOptions?: React.ReactNode;
+ footnoteSideColumn?: React.ReactNode;
fullPageScroll: boolean;
isFocused?: boolean;
onClickAction?: (e: React.MouseEvent) => void;
@@ -123,7 +147,7 @@ export const PageWrapper = (props: {
`}
>
@@ -132,6 +156,7 @@ export const PageWrapper = (props: {