binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: added floating toolbar on text selection (#378)

Browse source 
style: re-designed create-issue modal
This commit is contained in:
Dakshesh Jain 2023-03-06 22:49:06 +05:30 • committed by GitHub
parent d28fe930a6
commit 82f8b6d387
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 86 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

33
apps/app/components/rich-text-editor/toolbar/float-tool-tip.tsx Normal file
View file

@ -0,0 +1,33 @@
// buttons
import {
ToggleBoldButton,
ToggleItalicButton,
ToggleUnderlineButton,
ToggleStrikeButton,
ToggleOrderedListButton,
ToggleBulletListButton,
ToggleCodeButton,
} from "@remirror/react";
import HeadingControls from "./heading-controls";
export const CustomFloatingToolbar: React.FC = () => (
<div className="z-[99999] flex items-center gap-y-2 divide-x rounded border bg-white p-1 px-0.5 shadow-md">
<div className="flex items-center gap-x-1 px-2">
<HeadingControls />
</div>
<div className="flex items-center gap-x-1 px-2">
<ToggleBoldButton />
<ToggleItalicButton />
<ToggleUnderlineButton />
<ToggleStrikeButton />
</div>
<div className="flex items-center gap-x-1 px-2">
<ToggleOrderedListButton />
<ToggleBulletListButton />
</div>
<div className="flex items-center gap-x-1 px-2">
<ToggleCodeButton />
</div>
</div>
);

4
apps/app/components/rich-text-editor/toolbar/link.tsx
View file

@ -173,12 +173,12 @@ export const FloatingLinkToolbar = () => {
return (
<>
{!isEditing && (
<FloatingToolbar className="shadow-lg rounded bg-white p-1">
<FloatingToolbar className="rounded bg-white p-1 shadow-lg">
{linkEditButtons}
</FloatingToolbar>
)}
{!isEditing && empty && (
<FloatingToolbar positioner={linkPositioner} className="shadow-lg rounded bg-white p-1">
<FloatingToolbar positioner={linkPositioner} className="rounded bg-white p-1 shadow-lg">
{linkEditButtons}
</FloatingToolbar>
)}