Skip to content

Commit

Permalink
Merge 4dbec49 into afc9b96
Browse files Browse the repository at this point in the history
  • Loading branch information
@alihamuh
alihamuh committed Dec 22, 2023
2 parents afc9b96 + 4dbec49 commit ff04155
Show file tree
Hide file tree
Showing 10 changed files with 48 additions and 19 deletions.
1 change: 0 additions & 1 deletion packages/editor/src/extensions/code-block/component.tsx
View file
Expand Up @@ -81,7 +81,6 @@ export function CodeblockComponent(
}
},
fontFamily: "monospace",
fontSize: "code",
whiteSpace: "pre", // TODO !important
tabSize: 1,
position: "relative",
Expand Down
42 changes: 27 additions & 15 deletions packages/editor/src/toolbar/components/counter.tsx
View file
Expand Up @@ -28,9 +28,10 @@ export type CounterProps = {
onDecrease: () => void;
onReset: () => void;
value: string;
disabled?: boolean;
};
function _Counter(props: CounterProps) {
const { title, onDecrease, onIncrease, onReset, value } = props;
const { title, onDecrease, onIncrease, onReset, value, disabled } = props;
const isMobile = useIsMobile();

return (
Expand All @@ -39,24 +40,29 @@ function _Counter(props: CounterProps) {
alignItems: "stretch",
borderRadius: "default",
overflow: "hidden",
cursor: "pointer",
cursor: disabled ? "not-allowed" : "pointer",
height: "100%",
":hover": {
bg: isMobile ? "transparent" : "hover-secondary"
bg: isMobile || disabled ? "transparent" : "hover-secondary"
}
}}
onClick={onReset}
title={`Click to reset ${title}`}
onClick={disabled ? undefined : onReset}
title={disabled ? "" : `Click to reset ${title}`}
>
<ToolButton
toggled={false}
title={`Decrease ${title}`}
icon="minus"
variant={"small"}
onClick={(e) => {
e.stopPropagation();
onDecrease();
}}
disabled={disabled}
onClick={
disabled
? undefined
: (e) => {
e.stopPropagation();
onDecrease();
}
}
/>

<Text
Expand All @@ -65,7 +71,8 @@ function _Counter(props: CounterProps) {
fontSize: "subBody",
alignSelf: "center",
mx: 1,
textAlign: "center"
textAlign: "center",
opacity: disabled ? 0.5 : 1
}}
>
{value}
Expand All @@ -76,15 +83,20 @@ function _Counter(props: CounterProps) {
title={`Increase ${title}`}
icon="plus"
variant={"small"}
onClick={(e) => {
e.stopPropagation();
onIncrease();
}}
disabled={disabled}
onClick={
disabled
? undefined
: (e) => {
e.stopPropagation();
onIncrease();
}
}
/>
</Flex>
);
}

export const Counter = React.memo(_Counter, (prev, next) => {
return prev.value === next.value;
return prev.value === next.value && prev.disabled === next.disabled;
});
5 changes: 4 additions & 1 deletion packages/editor/src/toolbar/components/dropdown.tsx
View file
Expand Up @@ -33,9 +33,11 @@ type DropdownProps = {
items: MenuItem[];
buttonRef?: React.MutableRefObject<HTMLButtonElement | undefined>;
menuWidth?: number;
disabled?: boolean;
};
export function Dropdown(props: DropdownProps) {
const { id, group, items, selectedItem, buttonRef, menuWidth } = props;
const { id, group, items, selectedItem, buttonRef, menuWidth, disabled } =
props;
const internalRef = useRef<HTMLButtonElement>();
const [isOpen, setIsOpen] = useState(false);
const toolbarLocation = useToolbarLocation();
Expand Down Expand Up @@ -74,6 +76,7 @@ export function Dropdown(props: DropdownProps) {
bg: "transparent"
}
}}
disabled={disabled}
onClick={() => setIsOpen((s) => !s)}
onMouseDown={(e) => e.preventDefault()}
>
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/toolbar/components/tool-button.tsx
View file
Expand Up @@ -89,6 +89,7 @@ export const ToolButton = React.memo(
return (
prev.toggled === next.toggled &&
prev.icon === next.icon &&
prev.disabled === next.disabled &&
JSON.stringify(prev.sx) === JSON.stringify(next.sx)
);
}
Expand Down
2 changes: 2 additions & 0 deletions packages/editor/src/toolbar/tools/alignment.tsx
View file
Expand Up @@ -21,6 +21,7 @@ import { ToolProps } from "../types";
import { ToolButton } from "../components/tool-button";
import { useRefValue } from "../../hooks/use-ref-value";
import { IconNames } from "../icons";
import { CodeBlock } from "../../extensions/code-block";

type Alignment = "left" | "right" | "center" | "justify";
type AlignmentToolProps = ToolProps & {
Expand All @@ -40,6 +41,7 @@ function AlignmentTool(props: AlignmentToolProps) {
.setTextAlign(alignmentRef.current)
.run();
}}
disabled={editor.isActive(CodeBlock.name)}
toggled={false}
/>
);
Expand Down
5 changes: 4 additions & 1 deletion packages/editor/src/toolbar/tools/font.tsx
View file
Expand Up @@ -26,6 +26,7 @@ import { Counter } from "../components/counter";
import { useRefValue } from "../../hooks/use-ref-value";
import { useToolbarStore } from "../stores/toolbar-store";
import { getFontById, getFontIds, getFonts } from "../../utils/font";
import { CodeBlock } from "../../extensions/code-block";

export function FontSize(props: ToolProps) {
const { editor } = props;
Expand All @@ -45,7 +46,8 @@ export function FontSize(props: ToolProps) {

return (
<Counter
title="font size"
title="Font size"
disabled={editor.isActive(CodeBlock.name)}
onDecrease={() =>
editor.current
?.chain()
Expand Down Expand Up @@ -93,6 +95,7 @@ export function FontFamily(props: ToolProps) {
selectedItem={getFontById(currentFontFamily)?.title || defaultFontFamily}
items={items}
menuWidth={130}
disabled={editor.isActive(CodeBlock.name)}
/>
);
}
Expand Down
2 changes: 2 additions & 0 deletions packages/editor/src/toolbar/tools/headings.tsx
View file
Expand Up @@ -23,6 +23,7 @@ import { Dropdown } from "../components/dropdown";
import { MenuItem } from "@notesnook/ui";
import { ToolbarLocation, useToolbarLocation } from "../stores/toolbar-store";
import { useMemo } from "react";
import { CodeBlock } from "../../extensions/code-block";

const defaultLevels = [1, 2, 3, 4, 5, 6] as const;

Expand All @@ -48,6 +49,7 @@ export function Headings(props: ToolProps) {
}
items={items}
menuWidth={130}
disabled={editor.isActive(CodeBlock.name)}
/>
);
}
Expand Down
5 changes: 5 additions & 0 deletions packages/editor/src/toolbar/tools/inline.tsx
View file
Expand Up @@ -20,6 +20,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
import { ToolProps } from "../types";
import { ToolButton } from "../components/tool-button";
import { useToolbarLocation } from "../stores/toolbar-store";
import { CodeBlock } from "../../extensions/code-block";

export function Italic(props: ToolProps) {
const { editor } = props;
Expand Down Expand Up @@ -61,6 +62,7 @@ export function Code(props: ToolProps) {
<ToolButton
{...props}
toggled={editor.isActive("code")}
disabled={editor.isActive(CodeBlock.name)}
onClick={() => editor.current?.chain().focus().toggleCode().run()}
/>
);
Expand All @@ -84,6 +86,7 @@ export function Subscript(props: ToolProps) {
<ToolButton
{...props}
toggled={editor.isActive("subscript")}
disabled={editor.isActive(CodeBlock.name)}
onClick={() => editor.current?.chain().focus().toggleSubscript().run()}
/>
);
Expand All @@ -95,6 +98,7 @@ export function Superscript(props: ToolProps) {
<ToolButton
{...props}
toggled={editor.isActive("superscript")}
disabled={editor.isActive(CodeBlock.name)}
onClick={() => editor.current?.chain().focus().toggleSuperscript().run()}
/>
);
Expand Down Expand Up @@ -139,6 +143,7 @@ export function Math(props: ToolProps) {
{...props}
toggled={false}
onClick={() => editor.current?.chain().focus().insertMathInline().run()}
disabled={editor.isActive(CodeBlock.name)}
/>
);
}
2 changes: 2 additions & 0 deletions packages/editor/src/toolbar/tools/text-direction.tsx
View file
Expand Up @@ -25,6 +25,7 @@ import {
getTextDirection,
TextDirections
} from "../../extensions/text-direction";
import { CodeBlock } from "../../extensions/code-block";

type TextDirectionToolProps = ToolProps & {
direction: TextDirections;
Expand All @@ -43,6 +44,7 @@ function TextDirectionTool(props: TextDirectionToolProps) {
.setTextDirection(directionRef.current)
.run()
}
disabled={editor.isActive(CodeBlock.name)}
toggled={false}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/src/theme/variants/button.ts
View file
Expand Up @@ -50,7 +50,7 @@ export const createButtonVariant = (
filter: "brightness(90%)",
...states?.hover
},
":active": {
":active:not(:disabled)": {
bg: background,
filter: "brightness(85%)",
transform: "scale(0.98) !important",
Expand Down

0 comments on commit ff04155

Please sign in to comment.