Fix hero-canvas navigation race; style the prosekit editor and add a toolbar
Deploy / deploy (push) Successful in 28s
Deploy / deploy (push) Successful in 28s
- Hero: gate RasterizedYES construction on a NodeRef resolving, not just "the Effect ran". Root cause of the reported "loading..." stall + "RefCell already borrowed" panic - navigating back to / client-side could run the Effect before the new <canvas> was actually in the DOM, yes.js did an unchecked getElementById(...).getContext() on null and threw mid-reactive-update, corrupting wasm_bindgen_futures' executor badly enough to panic on the next tick. Same NodeRef-gating pattern the prosekit editor's own mount already used. - style/main.css: .prosekit-wrap/.prosekit-toolbar/.prosekit-editor to match the existing input/textarea look (border, background, focus ring). - prosekit-editor.js: a real toolbar (Bold, Italic, H1, H2, Link, and a dedicated Gitea-repo-embed button reusing the paste rule's own insert logic) with active-state highlighting via the standard ProseMirror markActive/nodeActive idiom.
This commit is contained in:
@@ -218,6 +218,59 @@ input:focus, textarea:focus {
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
|
||||
.prosekit-wrap {
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.6rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.prosekit-toolbar {
|
||||
display: flex;
|
||||
gap: 0.2rem;
|
||||
padding: 0.4rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.prosekit-toolbar button {
|
||||
font: inherit;
|
||||
font-size: 0.9rem;
|
||||
color: var(--ink-dim);
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.4rem;
|
||||
padding: 0.3rem 0.55rem;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.prosekit-toolbar button:hover { color: var(--ink); border-color: var(--line); }
|
||||
|
||||
.prosekit-toolbar button.is-active {
|
||||
color: var(--paper);
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.prosekit-editor {
|
||||
font: inherit;
|
||||
color: var(--ink);
|
||||
padding: 0.65rem 0.8rem;
|
||||
min-height: 5rem;
|
||||
}
|
||||
|
||||
.prosekit-editor:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.prosekit-wrap:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
}
|
||||
|
||||
.prosekit-editor p { margin: 0 0 0.6em; }
|
||||
.prosekit-editor p:last-child { margin-bottom: 0; }
|
||||
|
||||
.alt-submit {
|
||||
margin-top: 1.4rem;
|
||||
font-family: var(--sans);
|
||||
|
||||
Reference in New Issue
Block a user