fix: add icons for font family, size & headings

This commit is contained in:
thecodrr
2022-07-01 15:46:31 +05:00
parent 7d1e378fa4
commit ba2248e06b
10 changed files with 26 additions and 9 deletions

View File

@@ -1,3 +1,4 @@
/// <reference types="react" />
import { MenuItem } from "./types";
export declare function useFocus(items: MenuItem[], onAction: (event: KeyboardEvent) => void, onClose: (event: KeyboardEvent) => void): {
focusIndex: number;

View File

@@ -1,3 +1,4 @@
/// <reference types="react" />
import "./extensions";
import { EditorOptions } from "@tiptap/react";
import Toolbar from "./toolbar";

View File

@@ -14,8 +14,8 @@ export declare type ToolButtonProps = ButtonProps & {
};
export declare const ToolButton: React.NamedExoticComponent<ButtonProps & {
icon: IconNames;
iconColor?: "background" | "border" | "text" | "blue" | "gray" | "green" | "orange" | "purple" | "red" | "yellow" | "checked" | "disabled" | "placeholder" | "icon" | keyof import("@notesnook/theme/dist/theme/colorscheme/static").StaticColors | "primary" | "bgTransparent" | "accent" | "bgSecondary" | "bgSecondaryText" | "bgSecondaryHover" | "hover" | "fontSecondary" | "fontTertiary" | "overlay" | "secondary" | undefined;
iconSize?: number | "big" | "small" | "medium" | undefined;
iconColor?: "background" | "border" | "text" | "blue" | "gray" | "green" | "orange" | "purple" | "red" | "yellow" | "checked" | "disabled" | "placeholder" | "icon" | "overlay" | "hover" | keyof import("@notesnook/theme/dist/theme/colorscheme/static").StaticColors | "primary" | "bgTransparent" | "accent" | "bgSecondary" | "bgSecondaryText" | "bgSecondaryHover" | "fontSecondary" | "fontTertiary" | "secondary" | undefined;
iconSize?: number | "small" | "big" | "medium" | undefined;
toggled: boolean;
buttonRef?: React.MutableRefObject<HTMLButtonElement | null | undefined> | undefined;
variant?: ToolButtonVariant | undefined;

View File

@@ -77,6 +77,9 @@ export declare const Icons: {
math: string;
mathBlock: string;
outlineList: string;
fontFamily: string;
fontSize: string;
heading: string;
plus: string;
minus: string;
close: string;

View File

@@ -81,6 +81,9 @@ exports.Icons = {
math: js_1.mdiFunctionVariant,
mathBlock: js_1.mdiMathIntegral,
outlineList: js_1.mdiFileTreeOutline,
fontFamily: js_1.mdiFormatFont,
fontSize: js_1.mdiFormatFontSizeIncrease,
heading: js_1.mdiFormatHeaderPound,
plus: js_1.mdiPlus,
minus: js_1.mdiMinus,
close: js_1.mdiClose,

View File

@@ -1,5 +1,5 @@
import { ToolbarDefinition, ToolDefinition } from "./types";
import { ToolId } from "./tools";
export declare function getToolDefinition(id: ToolId): ToolDefinition;
export declare function getAllTools(): Record<"fontSize" | "underline" | "bold" | "bulletList" | "code" | "italic" | "subscript" | "superscript" | "fontFamily" | "highlight" | "removeAttachment" | "downloadAttachment" | "deleteColumn" | "deleteRow" | "deleteTable" | "mergeCells" | "ltr" | "rtl" | "strikethrough" | "codeRemove" | "alignCenter" | "alignLeft" | "alignRight" | "alignJustify" | "numberedList" | "textColor" | "openLink" | "linkSettings" | "imageSettings" | "rowProperties" | "insertRowBelow" | "insertRowAbove" | "moveRowDown" | "moveRowUp" | "columnProperties" | "insertColumnRight" | "insertColumnLeft" | "moveColumnRight" | "moveColumnLeft" | "cellProperties" | "cellBorderColor" | "splitCells" | "attachmentSettings" | "embedSettings" | "tableSettings" | "math" | "clearformatting" | "addLink" | "editLink" | "removeLink" | "insertBlock" | "headings" | "imageAlignCenter" | "imageAlignLeft" | "imageAlignRight" | "imageProperties" | "embedAlignCenter" | "embedAlignLeft" | "embedAlignRight" | "embedProperties" | "cellBackgroundColor" | "cellTextColor" | "cellBorderWidth", ToolDefinition>;
export declare function getAllTools(): Record<"bold" | "italic" | "underline" | "strikethrough" | "code" | "codeRemove" | "subscript" | "superscript" | "clearformatting" | "addLink" | "editLink" | "removeLink" | "linkSettings" | "openLink" | "insertBlock" | "numberedList" | "bulletList" | "fontSize" | "fontFamily" | "headings" | "alignCenter" | "alignRight" | "alignLeft" | "alignJustify" | "ltr" | "rtl" | "textColor" | "highlight" | "math" | "imageSettings" | "imageAlignCenter" | "imageAlignLeft" | "imageAlignRight" | "imageProperties" | "embedAlignCenter" | "embedAlignLeft" | "embedAlignRight" | "embedProperties" | "embedSettings" | "attachmentSettings" | "downloadAttachment" | "removeAttachment" | "tableSettings" | "columnProperties" | "rowProperties" | "cellProperties" | "insertColumnLeft" | "insertColumnRight" | "moveColumnLeft" | "moveColumnRight" | "deleteColumn" | "splitCells" | "mergeCells" | "cellBackgroundColor" | "cellBorderColor" | "cellTextColor" | "cellBorderWidth" | "insertRowAbove" | "insertRowBelow" | "moveRowUp" | "moveRowDown" | "deleteRow" | "deleteTable", ToolDefinition>;
export declare const DEFAULT_TOOLS: ToolbarDefinition;

View File

@@ -66,6 +66,7 @@ var tools = {
insertBlock: {
icon: "plus",
title: "Insert",
conditional: true,
},
bulletList: {
icon: "bulletList",
@@ -76,15 +77,15 @@ var tools = {
title: "Numbered list",
},
fontFamily: {
icon: "none",
icon: "fontFamily",
title: "Font family",
},
fontSize: {
icon: "none",
icon: "fontSize",
title: "Font size",
},
headings: {
icon: "none",
icon: "heading",
title: "Headings",
},
alignCenter: {

View File

@@ -1,3 +1,4 @@
/// <reference types="react" />
import { Editor } from "@tiptap/core";
import { MenuButton } from "../../components/menu/types";
import { ToolProps } from "../types";

View File

@@ -79,6 +79,9 @@ import {
mdiMathIntegral,
mdiFunctionVariant,
mdiFileTreeOutline,
mdiFormatFont,
mdiFormatFontSizeIncrease,
mdiFormatHeaderPound,
} from "@mdi/js";
export const Icons = {
@@ -169,6 +172,9 @@ export const Icons = {
math: mdiFunctionVariant,
mathBlock: mdiMathIntegral,
outlineList: mdiFileTreeOutline,
fontFamily: mdiFormatFont,
fontSize: mdiFormatFontSizeIncrease,
heading: mdiFormatHeaderPound,
plus: mdiPlus,
minus: mdiMinus,

View File

@@ -66,6 +66,7 @@ const tools: Record<ToolId, ToolDefinition> = {
insertBlock: {
icon: "plus",
title: "Insert",
conditional: true,
},
bulletList: {
icon: "bulletList",
@@ -76,15 +77,15 @@ const tools: Record<ToolId, ToolDefinition> = {
title: "Numbered list",
},
fontFamily: {
icon: "none",
icon: "fontFamily",
title: "Font family",
},
fontSize: {
icon: "none",
icon: "fontSize",
title: "Font size",
},
headings: {
icon: "none",
icon: "heading",
title: "Headings",
},
alignCenter: {