Skip to content

Commit

Permalink
toolbar style fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ibastawisi
ibastawisi committed Apr 14, 2024
1 parent 384b7de commit 5d39301
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 138 deletions.
8 changes: 6 additions & 2 deletions src/editor/plugins/ToolbarPlugin/Tools/AITools.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,12 @@ export default function AITools({ editor, sx }: { editor: LexicalEditor, sx?: Sx
const offset = useRef(0);

const handlePrompt = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
e.stopPropagation();
const command = promptRef.current?.value || "";
const textarea = e.currentTarget;
const isNavigatingUp = textarea.selectionStart === 0 && e.key === "ArrowUp";
const isNavigatingDown = textarea.selectionStart === textarea.value.length && e.key === "ArrowDown";
if (!isNavigatingUp && !isNavigatingDown) e.stopPropagation();
if (isNavigatingDown) textarea.closest("li")?.focus();
const command = textarea.value;
const isSubmit = e.key === "Enter" && !e.shiftKey && command.trim().length > 0;
if (!isSubmit) return;
e.preventDefault();
Expand Down
86 changes: 45 additions & 41 deletions src/editor/plugins/ToolbarPlugin/Tools/ImageTools.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,46 +55,50 @@ export default function ImageTools({ editor, node, sx }: { editor: LexicalEditor
};

return (
<ToggleButtonGroup size="small" sx={{ ...sx }} >
<ToggleButton value="edit" key="edit"
onClick={openDialog}>
<Edit />
</ToggleButton>
{(!$isSketchNode(node) && !$isIFrameNode(node)) && <ToggleButton value="sketch" key="sketch"
onClick={openSketchDialog}>
<Draw />
</ToggleButton>}
<ToggleButton value="caption" key="caption" selected={node.getShowCaption()}
onClick={toggleShowCaption}>
{node.getShowCaption() ? <ClosedCaption /> : <ClosedCaptionDisabled />}
</ToggleButton>
<ToggleButton value="float-left" key="float-left" selected={style?.float === "left"}
onClick={() => {
updateStyle({ "float": "left", "margin": "0 1em 0 0", "max-width": "50%" });
}}>
<FormatImageLeft />
</ToggleButton>
<ToggleButton value="float-none" key="float-none" selected={!style || style?.float === "none"}
onClick={() => {
updateStyle({ "float": "none", "margin": "0", "max-width": "100%" });
}}>
<ViewHeadline />
</ToggleButton>,
<ToggleButton value="float-right" key="float-right" selected={style?.float === "right"}
onClick={() => {
updateStyle({ "float": "right", "margin": "0 0 0 1em", "max-width": "50%" });
}}>
<FormatImageRight />
</ToggleButton>
<ToggleButton value="delete"
onClick={() => {
editor.update(() => {
node.selectPrevious();
node.remove();
});
}}>
<Delete />
</ToggleButton>
</ToggleButtonGroup>
<>
<ToggleButtonGroup size="small" sx={{ ...sx }} >
<ToggleButton value="edit" key="edit"
onClick={openDialog}>
<Edit />
</ToggleButton>
{(!$isSketchNode(node) && !$isIFrameNode(node)) && <ToggleButton value="sketch" key="sketch"
onClick={openSketchDialog}>
<Draw />
</ToggleButton>}
<ToggleButton value="caption" key="caption" selected={node.getShowCaption()}
onClick={toggleShowCaption}>
{node.getShowCaption() ? <ClosedCaption /> : <ClosedCaptionDisabled />}
</ToggleButton>
<ToggleButton value="delete"
onClick={() => {
editor.update(() => {
node.selectPrevious();
node.remove();
});
}}>
<Delete />
</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup size="small" sx={{ ...sx }} >
<ToggleButton value="float-left" key="float-left" selected={style?.float === "left"}
onClick={() => {
updateStyle({ "float": "left", "margin": "0 1em 0 0", "max-width": "50%" });
}}>
<FormatImageLeft />
</ToggleButton>
<ToggleButton value="float-none" key="float-none" selected={!style || style?.float === "none"}
onClick={() => {
updateStyle({ "float": "none", "margin": "0", "max-width": "100%" });
}}>
<ViewHeadline />
</ToggleButton>,
<ToggleButton value="float-right" key="float-right" selected={style?.float === "right"}
onClick={() => {
updateStyle({ "float": "right", "margin": "0 0 0 1em", "max-width": "50%" });
}}>
<FormatImageRight />
</ToggleButton>
</ToggleButtonGroup>
</>
)
}
172 changes: 88 additions & 84 deletions src/editor/plugins/ToolbarPlugin/Tools/MathTools.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,91 +189,95 @@ export default function MathTools({ editor, node, sx }: { editor: LexicalEditor,


return (
<ToggleButtonGroup size="small" sx={{ position: "relative", ...sx }} exclusive value={value} onChange={(e, newValue) => setValue(newValue)}>
<ToggleButton value="wolfram" onClick={openWolfram}>
<WolframIcon />
</ToggleButton>
<ToggleButton value="edit" onClick={openEditDialog}>
<Edit />
</ToggleButton>
<Dialog open={open} onClose={handleClose} maxWidth="md" sx={{ '& .MuiDialog-paper': { width: '100%' } }}>
<form onSubmit={handleEdit}>
<DialogTitle>Edit LaTeX</DialogTitle>
<DialogContent >
<TextField margin="normal" size="small" fullWidth multiline id="value" value={formData.value} onChange={updateFormData} label="Latex Value" name="value" autoFocus />
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography variant="button" component="h3" color="text.secondary" sx={{ my: 1 }}>
Preview
</Typography>
<math-field ref={mathfieldRef} value={formData.value} style={{ width: "auto", margin: "0 auto" }} read-only></math-field>
</Box>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button type='submit' onClick={handleEdit}>Save</Button>
</DialogActions>
</form>
</Dialog>
<ToggleButton component="label" value="draw">
<Draw />
</ToggleButton>
{value === "draw" && <Collapse in={value === "draw"}>
<Paper sx={{
position: "absolute",
top: 48,
left: 0,
width: "100%",
height: 128,
border: "1px solid",
borderColor: theme.palette.divider,
zIndex: 1000,
'& .App-top-bar': { display: "none !important" },
'& .App-bottom-bar': { display: "none !important" },
'& .popover': { display: 'none !important' },
'& canvas': { borderRadius: 1 },
}}>
<Excalidraw
excalidrawAPI={excalidrawAPIRefCallback}
initialData={{
elements: [],
appState: {
activeTool: { type: "freedraw", lastActiveTool: null, customType: null, locked: true },
currentItemStrokeWidth: 0.5,
},
}}
theme={theme.palette.mode}
langCode='en'
/>
<IconButton onClick={handleFreeHand} sx={{ position: "absolute", bottom: 8, right: 8, zIndex: 1000 }} disabled={loading}>
<Save />
</IconButton>
<LinearProgress sx={{ visibility: loading ? 'visible' : 'hidden', position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 1000 }} />
</Paper>
</Collapse>}
<ColorPicker onColorChange={onColorChange} onClose={handleClose} />
<ToggleButton value="delete"
onClick={() => {
editor.update(() => {
node.selectPrevious();
node.remove();
});
}}>
<Delete />
</ToggleButton>
<ToggleButton value="menu"
onClick={(e) => {
const mathfield = node.getMathfield();
if (!mathfield) return;
const x = e.currentTarget.getBoundingClientRect().left;
const y = e.currentTarget.getBoundingClientRect().top + 40;
mathfield.showMenu({ location: { x, y }, modifiers: { alt: false, control: false, shift: false, meta: false } });
setTimeout(() => { setValue(null); }, 0);
}}>
<Menu />
</ToggleButton>
<>
<ToggleButtonGroup size="small" sx={{ position: "relative", ...sx }} exclusive value={value} onChange={(e, newValue) => setValue(newValue)}>
<ToggleButton value="wolfram" onClick={openWolfram}>
<WolframIcon />
</ToggleButton>
<ToggleButton value="edit" onClick={openEditDialog}>
<Edit />
</ToggleButton>
<Dialog open={open} onClose={handleClose} maxWidth="md" sx={{ '& .MuiDialog-paper': { width: '100%' } }}>
<form onSubmit={handleEdit}>
<DialogTitle>Edit LaTeX</DialogTitle>
<DialogContent >
<TextField margin="normal" size="small" fullWidth multiline id="value" value={formData.value} onChange={updateFormData} label="Latex Value" name="value" autoFocus />
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Typography variant="button" component="h3" color="text.secondary" sx={{ my: 1 }}>
Preview
</Typography>
<math-field ref={mathfieldRef} value={formData.value} style={{ width: "auto", margin: "0 auto" }} read-only></math-field>
</Box>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button type='submit' onClick={handleEdit}>Save</Button>
</DialogActions>
</form>
</Dialog>
<ToggleButton component="label" value="draw">
<Draw />
</ToggleButton>
{value === "draw" && <Collapse in={value === "draw"}>
<Paper sx={{
position: "absolute",
top: 48,
left: 0,
width: "100%",
height: 128,
border: "1px solid",
borderColor: theme.palette.divider,
zIndex: 1000,
'& .App-top-bar': { display: "none !important" },
'& .App-bottom-bar': { display: "none !important" },
'& .popover': { display: 'none !important' },
'& canvas': { borderRadius: 1 },
}}>
<Excalidraw
excalidrawAPI={excalidrawAPIRefCallback}
initialData={{
elements: [],
appState: {
activeTool: { type: "freedraw", lastActiveTool: null, customType: null, locked: true },
currentItemStrokeWidth: 0.5,
},
}}
theme={theme.palette.mode}
langCode='en'
/>
<IconButton onClick={handleFreeHand} sx={{ position: "absolute", bottom: 8, right: 8, zIndex: 1000 }} disabled={loading}>
<Save />
</IconButton>
<LinearProgress sx={{ visibility: loading ? 'visible' : 'hidden', position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 1000 }} />
</Paper>
</Collapse>}
<ColorPicker onColorChange={onColorChange} onClose={handleClose} />
</ToggleButtonGroup>
<Select size='small' onChange={onFontSizeSelect} value={fontSize}>
{FONT_SIZE_OPTIONS.map(([option, text]) => <MenuItem key={option} value={option}>{text}</MenuItem>)}
{FONT_SIZE_OPTIONS.map(([option, text]) => <MenuItem key={option} value={option} sx={{ justifyContent: "center" }}>{text}</MenuItem>)}
</Select>
</ToggleButtonGroup>
<ToggleButtonGroup size="small" sx={{ position: "relative", ...sx }} exclusive>
<ToggleButton value="menu"
onClick={(e) => {
const mathfield = node.getMathfield();
if (!mathfield) return;
const x = e.currentTarget.getBoundingClientRect().left;
const y = e.currentTarget.getBoundingClientRect().top + 40;
mathfield.showMenu({ location: { x, y }, modifiers: { alt: false, control: false, shift: false, meta: false } });
setTimeout(() => { setValue(null); }, 0);
}}>
<Menu />
</ToggleButton>
<ToggleButton value="delete"
onClick={() => {
editor.update(() => {
node.selectPrevious();
node.remove();
});
}}>
<Delete />
</ToggleButton>
</ToggleButtonGroup>
</>
)
}
17 changes: 6 additions & 11 deletions src/editor/plugins/ToolbarPlugin/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,17 +311,12 @@ function ToolbarPlugin() {
const showTableTools = !!selectedTable;
const showTextTools = (!showMathTools && !showImageTools) || $isStickyNode(selectedNode);

const [toolbarRef, toolbarDimensions] = useMeasure();
const [toolboxRef, toolboxDimensions] = useMeasure();
const toolboxOverflow = toolbarDimensions.width && toolboxDimensions.width ? toolboxDimensions.width + 168 > toolbarDimensions.width : false;

return (
<>
<AppBar elevation={toolbarTrigger ? 4 : 0} position={toolbarTrigger ? 'fixed' : 'static'}>
<Toolbar className="editor-toolbar" ref={toolbarRef} sx={{
<Toolbar className="editor-toolbar" sx={{
displayPrint: 'none', px: `${(toolbarTrigger ? 1 : 0)}!important`,
display: "grid", gridTemplateColumns: "repeat(3,auto)", gridAutoFlow: "dense",
justifyContent: "space-between", alignItems: "center", gap: 0.5, py: 1,
justifyContent: "space-between", alignItems: "start", gap: 0.5, py: 1,
}}>
<Box sx={{ display: "flex" }}>
<IconButton title={IS_APPLE ? 'Undo (⌘Z)' : 'Undo (Ctrl+Z)'} aria-label="Undo" disabled={!canUndo}
Expand All @@ -333,7 +328,7 @@ function ToolbarPlugin() {
<Redo />
</IconButton>
</Box>
<Box sx={{ display: "flex", gap: 0.5, mx: 'auto', gridColumn: toolboxOverflow ? "1/-1" : "auto" }} ref={toolboxRef}>
<Box sx={{ display: "flex", gap: 0.5, mx: 'auto', flexWrap: "wrap", justifyContent: "center" }}>
{showMathTools && <MathTools editor={activeEditor} node={selectedNode} />}
{(showImageTools) && <ImageTools editor={activeEditor} node={selectedNode} />}
{showTextTools && <>
Expand All @@ -344,11 +339,11 @@ function ToolbarPlugin() {
</Select>
) : (
<>
<Select size='small' sx={{ width: { xs: 86, md: "auto" } }} onChange={onFontFamilySelect} value={fontFamily}>
<Select size='small' sx={{ width: { xs: 68, md: "auto" } }} onChange={onFontFamilySelect} value={fontFamily}>
{FONT_FAMILY_OPTIONS.map(([option, text]) => <MenuItem key={option} value={option}>{text}</MenuItem>)}
</Select>
<Select size='small' sx={{ width: { xs: 86, md: "auto" } }} onChange={onFontSizeSelect} value={fontSize}>
{FONT_SIZE_OPTIONS.map(([option, text]) => <MenuItem key={option} value={option}>{text} px</MenuItem>)}
<Select size='small' sx={{ width: { xs: 68, md: "auto" } }} onChange={onFontSizeSelect} value={fontSize}>
{FONT_SIZE_OPTIONS.map(([option, text]) => <MenuItem key={option} value={option} sx={{ justifyContent: "center" }}>{text}</MenuItem>)}
</Select>
<AITools editor={activeEditor} />
{showTableTools && <TableTools editor={activeEditor} node={selectedTable} />}
Expand Down

0 comments on commit 5d39301

Please sign in to comment.