diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index a862288..6e255ee 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -1840,12 +1840,6 @@ button {
background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
}
-.editor-toolbar-meta {
- display: inline-flex;
- align-items: center;
- gap: 8px;
-}
-
.editor-width-control {
display: inline-flex;
align-items: center;
@@ -2148,7 +2142,6 @@ button {
gap: 2px;
}
-.editor-toolbar-trailing,
.note-toolbar-trailing {
margin-left: auto;
display: inline-flex;
diff --git a/packages/editor/src/rendered-editor.tsx b/packages/editor/src/rendered-editor.tsx
index 20c6998..d1f6c0a 100644
--- a/packages/editor/src/rendered-editor.tsx
+++ b/packages/editor/src/rendered-editor.tsx
@@ -594,7 +594,7 @@ export function RenderedEditor({
editor={editor}
disabled={toolbarDisabled}
trailing={
-
+ <>
{!isStandalone && (
)}
-
+ >
}
/>
{button("image", "🖼", "Insert image by URL", false, () => void insertImage())}
{button("hr", "―", "Horizontal rule", false, () => chain().setHorizontalRule().run())}
+
+ {trailing}
- {trailing && {trailing}
}
{promptDialog}
>
diff --git a/packages/note-boards/src/board-card.tsx b/packages/note-boards/src/board-card.tsx
index 1fffafb..cc37693 100644
--- a/packages/note-boards/src/board-card.tsx
+++ b/packages/note-boards/src/board-card.tsx
@@ -36,6 +36,7 @@ export function BoardCard({
const [expanded, setExpanded] = useState(false);
const [editingTitle, setEditingTitle] = useState(isNew ?? false);
const [menuIsOpen, setMenuIsOpen] = useState(false);
+ const [menuPosition, setMenuPosition] = useState<{ x: number; y: number } | null>(null);
const cardRef = useRef(null);
const titleInputRef = useRef(null);
// Track whether this card was created fresh and hasn't been edited yet
@@ -213,7 +214,11 @@ export function BoardCard({
setMenuIsOpen(false)}
+ onClose={() => {
+ setMenuIsOpen(false);
+ setMenuPosition(null);
+ }}
+ menuPosition={menuPosition}
menu={
<>
diff --git a/packages/note-boards/src/styles.css b/packages/note-boards/src/styles.css
index 5b857ef..8eb5bca 100644
--- a/packages/note-boards/src/styles.css
+++ b/packages/note-boards/src/styles.css
@@ -341,7 +341,7 @@
}
.editor-toolbar {
- padding: 6px 8px 0;
+ padding: 6px 8px;
}
.rendered-scroll {
diff --git a/packages/note-tables/src/styles.css b/packages/note-tables/src/styles.css
index e98fe78..9365a2e 100644
--- a/packages/note-tables/src/styles.css
+++ b/packages/note-tables/src/styles.css
@@ -6,6 +6,7 @@
height: 100%;
min-height: 0;
padding-bottom: 2px;
+ overflow: hidden;
flex: 1;
}
diff --git a/packages/note-tables/src/table-grid.tsx b/packages/note-tables/src/table-grid.tsx
index 95d34d1..991c335 100644
--- a/packages/note-tables/src/table-grid.tsx
+++ b/packages/note-tables/src/table-grid.tsx
@@ -41,6 +41,7 @@ export function TableGrid({ value, onChange }: RendererProps) {
const [editing, setEditing] = useState(null);
const [draft, setDraft] = useState("");
const [menuCol, setMenuCol] = useState(null);
+ const [menuPosition, setMenuPosition] = useState<{ x: number; y: number } | null>(null);
const gridRef = useRef(null);
useEffect(() => {
@@ -160,6 +161,7 @@ export function TableGrid({ value, onChange }: RendererProps) {
const rows = model.rows.map((row) => row.filter((_, index) => index !== c));
commit({ ...model, columns, rows });
setMenuCol(null);
+ setMenuPosition(null);
},
[commit, model, columnCount],
);
@@ -181,6 +183,7 @@ export function TableGrid({ value, onChange }: RendererProps) {
);
commit({ ...model, columns });
setMenuCol(null);
+ setMenuPosition(null);
},
[commit, model, openPrompt],
);
@@ -223,6 +226,7 @@ export function TableGrid({ value, onChange }: RendererProps) {
});
commit({ ...model, columns });
setMenuCol(null);
+ setMenuPosition(null);
},
[commit, model, openPrompt],
);
@@ -254,6 +258,7 @@ export function TableGrid({ value, onChange }: RendererProps) {
);
commit({ ...model, columns });
setMenuCol(null);
+ setMenuPosition(null);
},
[commit, model, openPrompt],
);
@@ -267,6 +272,7 @@ export function TableGrid({ value, onChange }: RendererProps) {
});
commit({ ...model, rows });
setMenuCol(null);
+ setMenuPosition(null);
},
[commit, model],
);
@@ -408,6 +414,7 @@ export function TableGrid({ value, onChange }: RendererProps) {
setMenuCol(null)}
+ menuPosition={menuPosition}
menu={
<>
@@ -437,7 +444,11 @@ export function TableGrid({ value, onChange }: RendererProps) {
diff --git a/packages/ui/src/popup-menu.tsx b/packages/ui/src/popup-menu.tsx
index 0c88fb7..859cefa 100644
--- a/packages/ui/src/popup-menu.tsx
+++ b/packages/ui/src/popup-menu.tsx
@@ -7,6 +7,7 @@ export function PopupMenu({
menu,
role = "menu",
style,
+ menuPosition,
}: {
open: boolean;
onClose: () => void;
@@ -14,6 +15,7 @@ export function PopupMenu({
menu?: React.ReactNode;
role?: string;
style?: React.CSSProperties;
+ menuPosition?: { x: number; y: number } | null;
}) {
const ref = useRef(null);
@@ -42,12 +44,20 @@ export function PopupMenu({
{children}
{open && (
e.stopPropagation()}
- style={style}
+ style={{
+ position: menuPosition ? "fixed" : undefined,
+ left: menuPosition?.x,
+ top: menuPosition?.y,
+ }}
>
- {menu}
+
e.stopPropagation()}
+ style={style}
+ >
+ {menu}
+
)}