chore: export Editor & DEFAULT_TOOLS

This commit is contained in:
thecodrr
2022-06-28 06:51:40 +05:00
parent a1f45ee0b0
commit 4fba7ed9fc
9 changed files with 70 additions and 68 deletions

View File

@@ -73,7 +73,6 @@ var PopupRenderer = /** @class */ (function (_super) {
_this.closePopup = function (id) {
_this.setState(function (prev) {
var index = prev.popups.findIndex(function (p) { return p.id === id; });
console.log("[closePopup] ", index, id);
if (index <= -1)
return prev;
var clone = prev.popups.slice();
@@ -88,7 +87,6 @@ var PopupRenderer = /** @class */ (function (_super) {
PopupRenderer.prototype.render = function () {
return (_jsxs(PopupRendererContext.Provider, __assign({ value: this }, { children: [this.props.children, _jsxs(EditorContext.Provider, __assign({ value: this.props.editor }, { children: [this.state.popups.map(function (_a) {
var id = _a.id, Popup = _a.popup;
console.log("rendering poopup", id);
return _jsx(Popup, { id: id }, id);
}), _jsx("div", { id: "popup-container" })] }))] })));
};

View File

@@ -9,4 +9,5 @@ declare const useTiptap: (options?: Partial<EditorOptions & AttachmentOptions &
theme: Theme;
}>, deps?: import("react").DependencyList) => Editor | null;
export { useTiptap, Toolbar };
export type { Editor } from "./types";
export * from "./extensions/react";

View File

@@ -14,8 +14,8 @@ export declare type ToolButtonProps = ButtonProps & {
};
export declare const ToolButton: React.NamedExoticComponent<ButtonProps & {
icon: IconNames;
iconColor?: "text" | "background" | "border" | "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" | "fontSecondary" | "fontTertiary" | "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" | "fontSecondary" | "fontTertiary" | "secondary" | undefined;
iconSize?: number | "small" | "big" | "medium" | undefined;
toggled: boolean;
buttonRef?: React.MutableRefObject<HTMLButtonElement | null | undefined> | undefined;
variant?: ToolButtonVariant | undefined;

View File

@@ -13,40 +13,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Flex } from "rebass";
import { ThemeProvider } from "emotion-theming";
import { EditorFloatingMenus } from "./floating-menus";
import { DEFAULT_TOOLS } from "./tool-definitions";
import { useEffect } from "react";
import { useToolbarStore, } from "./stores/toolbar-store";
import { ToolbarGroup } from "./components/toolbar-group";
import { EditorContext, PopupRenderer, } from "../components/popup-presenter/popuprenderer";
var DEFAULT_TOOLS = [
[
"insertBlock",
"tableSettings",
"imageSettings",
"embedSettings",
"attachmentSettings",
"linkSettings",
"codeRemove",
],
[
"bold",
"italic",
"underline",
[
"strikethrough",
"code",
"subscript",
"superscript",
"highlight",
"textColor",
],
],
["fontSize"],
["headings", "fontFamily"],
["numberedList", "bulletList"],
["addLink"],
["alignCenter", ["alignLeft", "alignRight", "alignJustify", "ltr", "rtl"]],
["clearformatting"],
];
export function Toolbar(props) {
var editor = props.editor, theme = props.theme, location = props.location, isMobile = props.isMobile, _a = props.tools, tools = _a === void 0 ? DEFAULT_TOOLS : _a;
var setIsMobile = useToolbarStore(function (store) { return store.setIsMobile; });

View File

@@ -1,3 +1,4 @@
import { ToolDefinition } from "./types";
import { ToolbarDefinition, ToolDefinition } from "./types";
import { ToolId } from "./tools";
export declare function getToolDefinition(id: ToolId): ToolDefinition;
export declare const DEFAULT_TOOLS: ToolbarDefinition;

View File

@@ -290,3 +290,33 @@ var tools = {
export function getToolDefinition(id) {
return tools[id];
}
export var DEFAULT_TOOLS = [
[
"insertBlock",
"tableSettings",
"imageSettings",
"embedSettings",
"attachmentSettings",
"linkSettings",
"codeRemove",
],
[
"bold",
"italic",
"underline",
[
"strikethrough",
"code",
"subscript",
"superscript",
"highlight",
"textColor",
],
],
["fontSize"],
["headings", "fontFamily"],
["numberedList", "bulletList"],
["addLink"],
["alignCenter", ["alignLeft", "alignRight", "alignJustify", "ltr", "rtl"]],
["clearformatting"],
];

View File

@@ -177,4 +177,5 @@ const useTiptap = (
};
export { useTiptap, Toolbar };
export type { Editor } from "./types";
export * from "./extensions/react";

View File

@@ -1,4 +1,4 @@
import { ToolDefinition } from "./types";
import { ToolbarDefinition, ToolDefinition } from "./types";
import { ToolId } from "./tools";
const tools: Record<ToolId, ToolDefinition> = {
@@ -296,3 +296,34 @@ const tools: Record<ToolId, ToolDefinition> = {
export function getToolDefinition(id: ToolId) {
return tools[id];
}
export const DEFAULT_TOOLS: ToolbarDefinition = [
[
"insertBlock",
"tableSettings",
"imageSettings",
"embedSettings",
"attachmentSettings",
"linkSettings",
"codeRemove",
],
[
"bold",
"italic",
"underline",
[
"strikethrough",
"code",
"subscript",
"superscript",
"highlight",
"textColor",
],
],
["fontSize"],
["headings", "fontFamily"],
["numberedList", "bulletList"],
["addLink"],
["alignCenter", ["alignLeft", "alignRight", "alignJustify", "ltr", "rtl"]],
["clearformatting"],
];

View File

@@ -5,7 +5,7 @@ import { Flex, FlexProps } from "rebass";
import { findTool, ToolId } from "./tools";
import { ThemeProvider } from "emotion-theming";
import { EditorFloatingMenus } from "./floating-menus";
import { getToolDefinition } from "./tool-definitions";
import { DEFAULT_TOOLS, getToolDefinition } from "./tool-definitions";
import { Dropdown } from "./components/dropdown";
import { ToolButton } from "./components/tool-button";
import { useContext, useEffect, useRef, useState } from "react";
@@ -32,37 +32,6 @@ type ToolbarProps = {
tools?: ToolbarDefinition;
};
const DEFAULT_TOOLS: ToolbarDefinition = [
[
"insertBlock",
"tableSettings",
"imageSettings",
"embedSettings",
"attachmentSettings",
"linkSettings",
"codeRemove",
],
[
"bold",
"italic",
"underline",
[
"strikethrough",
"code",
"subscript",
"superscript",
"highlight",
"textColor",
],
],
["fontSize"],
["headings", "fontFamily"],
["numberedList", "bulletList"],
["addLink"],
["alignCenter", ["alignLeft", "alignRight", "alignJustify", "ltr", "rtl"]],
["clearformatting"],
];
export function Toolbar(props: ToolbarProps) {
const { editor, theme, location, isMobile, tools = DEFAULT_TOOLS } = props;
const setIsMobile = useToolbarStore((store) => store.setIsMobile);