diff --git a/app/globals.css b/app/globals.css index 1b8b939a..07ac8d95 100644 --- a/app/globals.css +++ b/app/globals.css @@ -496,17 +496,19 @@ pre.shiki { .footnote-ref { counter-increment: footnote; cursor: pointer; - color: rgb(var(--accent-contrast)); + color: rgb(var(--color-tertiary)); opacity: 0.7; } .footnote-ref::after { content: counter(footnote); vertical-align: super; + padding-left: 2px; font-size: 75%; + line-height: 0rem; } .footnote-ref ~ br.ProseMirror-trailingBreak { - display: inline; - width: 4px; + display: inline; + width: 4px; } .footnote-ref ~ img.ProseMirror-separator { display: none; 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/Footnotes/FootnoteEditor.tsx b/components/Footnotes/FootnoteEditor.tsx index e2e5e907..da27cb7f 100644 --- a/components/Footnotes/FootnoteEditor.tsx +++ b/components/Footnotes/FootnoteEditor.tsx @@ -12,7 +12,7 @@ import { useYJSValue, trackUndoRedo, } from "components/Blocks/TextBlock/mountProsemirror"; -import { CloseTiny } from "components/Icons/CloseTiny"; +import { DeleteTiny } from "components/Icons/DeleteTiny"; import { FootnoteItemLayout } from "./FootnoteItemLayout"; import { useEditorStates } from "src/state/useEditorState"; import { useUIState } from "src/useUIState"; @@ -46,9 +46,7 @@ export function FootnoteEditor(props: { "Shift-Enter": (state, dispatch) => { let hardBreak = schema.nodes.hard_break.create(); if (dispatch) { - dispatch( - state.tr.replaceSelectionWith(hardBreak).scrollIntoView(), - ); + dispatch(state.tr.replaceSelectionWith(hardBreak).scrollIntoView()); } return true; }, @@ -179,7 +177,14 @@ export function FootnoteEditor(props: { return { editorStates: rest }; }); }; - }, [props.footnoteEntityID, value, props.editable, props.autoFocus, rep.undoManager, pageID]); + }, [ + props.footnoteEntityID, + value, + props.editable, + props.autoFocus, + rep.undoManager, + pageID, + ]); return ( - - + ) : undefined } > -
+
); } +function FootnoteDeleteButton(props: { + footnoteEntityID: string; + onDelete: () => void; +}) { + let isActive = useUIState( + (s) => + s.focusedEntity?.entityType === "footnote" && + s.focusedEntity.entityID === props.footnoteEntityID, + ); + + return ( + + ); +} diff --git a/components/Footnotes/FootnoteItemLayout.tsx b/components/Footnotes/FootnoteItemLayout.tsx index 5fea30d6..140e3571 100644 --- a/components/Footnotes/FootnoteItemLayout.tsx +++ b/components/Footnotes/FootnoteItemLayout.tsx @@ -10,7 +10,7 @@ export function FootnoteItemLayout(props: { className?: string; }) { let indexClassName = - "text-accent-contrast font-medium shrink-0 text-xs leading-normal no-underline hover:underline cursor-pointer"; + "text-tertiary font-medium shrink-0 text-xs leading-normal no-underline hover:underline cursor-pointer"; let indexContent = <>{props.index}.; @@ -48,7 +48,9 @@ export function FootnoteSectionLayout(props: { className?: string; }) { return ( -
+
{props.children}
diff --git a/components/Toolbar/FootnoteButton.tsx b/components/Toolbar/FootnoteButton.tsx index e71a6799..0c4e09f4 100644 --- a/components/Toolbar/FootnoteButton.tsx +++ b/components/Toolbar/FootnoteButton.tsx @@ -5,6 +5,7 @@ import { useEntitySetContext } from "components/EntitySetProvider"; import { insertFootnote } from "components/Blocks/TextBlock/insertFootnote"; import { TooltipButton } from "components/Buttons"; import { Props } from "components/Icons/Props"; +import { ToolbarButton } from "."; export function FootnoteButton() { let rep = useReplicache(); @@ -12,9 +13,9 @@ export function FootnoteButton() { let focusedBlock = useUIState((s) => s.focusedEntity); return ( - Footnote
} - onMouseDown={async (e) => { + { e.preventDefault(); if (!focusedBlock || focusedBlock.entityType !== "block") return; let editorState = @@ -29,7 +30,7 @@ export function FootnoteButton() { }} > - + ); } @@ -43,25 +44,14 @@ function FootnoteIcon(props: Props) { xmlns="http://www.w3.org/2000/svg" {...props} > - - f - - + - n - + /> ); } diff --git a/components/Toolbar/FootnoteTextToolbar.tsx b/components/Toolbar/FootnoteTextToolbar.tsx index 5c11aa5d..7288fd0a 100644 --- a/components/Toolbar/FootnoteTextToolbar.tsx +++ b/components/Toolbar/FootnoteTextToolbar.tsx @@ -25,6 +25,7 @@ export const FootnoteTextToolbar = (props: { mark={schema.marks.strong} icon={} /> +