{
6 | type: string;
7 | }
8 |
9 | export const AlertMenuItem = (props: AlertMenuItemProps) => {
10 | const { type, ...rest } = props;
11 | return (
12 |
13 |
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/packages/editor-kit/src/features/mentions/MentionElement.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { RenderElementProps } from "slate-react";
3 |
4 | export const MentionElement = (props: RenderElementProps) => {
5 | const { attributes, element, children } = props;
6 | return (
7 |
13 | @{element.value.name}
14 | {children}
15 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/packages/editor-kit/src/features/text-align/TextAlignCenterButton.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { IconProps } from "../buttons/IconButton";
3 | import { ActionButton } from "../actions/ActionButton";
4 | import { TooltipContentProps } from "../popup/Tooltip";
5 |
6 | export const TextAlignCenterButton = (
7 | props: IconProps & TooltipContentProps
8 | ) => {
9 | return (
10 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/packages/editor-kit/src/features/text-align/TextAlignRightButton.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { IconProps } from "../buttons/IconButton";
3 | import { TooltipContentProps } from "../popup/Tooltip";
4 | import { ActionButton } from "../actions/ActionButton";
5 |
6 | export const TextAlignRightButton = (
7 | props: IconProps & TooltipContentProps
8 | ) => {
9 | return (
10 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/packages/editor-kit/src/features/text-align/TextAlignJustifiedButton.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { IconProps } from "../buttons/IconButton";
3 | import { TooltipContentProps } from "../popup/Tooltip";
4 | import { ActionButton } from "../actions/ActionButton";
5 |
6 | export const TextAlignJustifiedButton = (
7 | props: IconProps & TooltipContentProps
8 | ) => {
9 | return (
10 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/packages/editor-kit/src/features/icons/material-regular/InfoAlertIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const InfoAlertIcon = (props: React.SVGProps) => (
4 |
17 | );
18 |
--------------------------------------------------------------------------------
/packages/editor-kit/dist/features/popup/CursorPopup.d.ts:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Location, Offsets } from "./Popups";
3 | export interface CursorPopupProps {
4 | location?: Location;
5 | children: React.ReactNode;
6 | onClose?(): void;
7 | fixed?: boolean;
8 | offsets?: Offsets;
9 | expanded?: boolean;
10 | delay?: number;
11 | }
12 | export declare const CursorPopup: (props: CursorPopupProps) => JSX.Element;
13 | export declare const getCursor: () => {
14 | range: Range;
15 | length: number;
16 | };
17 |
--------------------------------------------------------------------------------
/packages/editor-kit/src/features/icons/material-regular/ErrorAlertIcon.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const ErrorAlertIcon = (props: React.SVGProps) => (
4 |
17 | );
18 |
--------------------------------------------------------------------------------
/packages/editor-kit/src/features/superscript/SuperscriptMarkdownTrigger.ts:
--------------------------------------------------------------------------------
1 | import { MatchResult } from "../../editor/Matching";
2 | import { applyRegexMark } from "../marks/Marks";
3 | import { Trigger } from "../../plugins/Trigger";
4 | import { EditorState } from "../../editor/EditorState";
5 |
6 | export const SuperscriptMarkdownTrigger: Trigger = {
7 | pattern: /(\^)(.{1,})\1/,
8 | onMatch: (state: EditorState, matches: MatchResult[]) => {
9 | applyRegexMark(state.editor, matches[0], "superscript");
10 | },
11 | clear: false,
12 | };
13 |
--------------------------------------------------------------------------------
/packages/editor-kit/dist/features/links/LinkToolbar.d.ts:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Element } from "slate";
3 | export interface LinkToolbarProps {
4 | onEditLink(): any;
5 | element: Element;
6 | }
7 | export declare const LinkToolbar: (props: LinkToolbarProps) => JSX.Element;
8 | export declare const useLinkToolbar: (props: LinkToolbarProps) => {
9 | element: Element;
10 | onEditLink: () => any;
11 | handleRemoveLink: (event: React.MouseEvent) => void;
12 | handleOpenLink: () => void;
13 | };
14 |
--------------------------------------------------------------------------------
/packages/editor-kit/dist/ui/Utils.d.ts:
--------------------------------------------------------------------------------
1 | export declare const isInside: (rect: ClientRect, x: number, y: number) => boolean;
2 | export declare const isDeleting: (event: React.KeyboardEvent | KeyboardEvent) => boolean;
3 | export declare const stopEvent: (event: React.MouseEvent | MouseEvent | React.KeyboardEvent) => boolean;
4 | export declare const blockEvent: (event: React.MouseEvent | MouseEvent | React.KeyboardEvent | KeyboardEvent) => boolean;
5 | export declare const noOp: (...args: any[]) => void;
6 | export declare const clone: (value: any) => any;
7 |
--------------------------------------------------------------------------------
/packages/editor-kit/src/features/headings/HeadingMenuItem.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { MenuItemProps, MenuItem } from "../menu/MenuItem";
3 | import { HeadingAction } from "./HeadingAction";
4 |
5 | export interface HeadingMenuItemProps extends Partial {
6 | type: string;
7 | }
8 |
9 | export const HeadingMenuItem = (props: HeadingMenuItemProps) => {
10 | const { type, ...rest } = props;
11 | return (
12 |
13 |
14 |
15 | );
16 | };
17 |
--------------------------------------------------------------------------------
/packages/editor-kit/src/features/i18n/EditorLabels.ts:
--------------------------------------------------------------------------------
1 | export interface EditorLabels {
2 | enterUrl: string;
3 | enterDisplayText: string;
4 | editLink: string;
5 | textColor: string;
6 | backgroundColor: string;
7 | headerRow: string;
8 | headerColumn: string;
9 | borderless: string;
10 | save: string;
11 | validVideoUrl: string;
12 | validImageUrl: string;
13 | initialLetterOn: string;
14 | initialLetterOff: string;
15 | removeDueDate: string;
16 | moveToTop: string;
17 | delete: string;
18 | customLayout: string;
19 | }
20 |
--------------------------------------------------------------------------------
/packages/editor-kit/src/features/spoiler/SpoilerButton.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { IconProps, IconButton } from "../buttons/IconButton";
3 | import { SpoilerAction } from "./SpoilerAction";
4 | import { TooltipContentProps } from "../popup/Tooltip";
5 |
6 | export const SpoilerButton = (props: IconProps & TooltipContentProps) => {
7 | const { className, ligature, ...rest } = props;
8 | return (
9 |
10 |
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/packages/editor-kit/src/features/clear-formatting/ClearFormattingMenuItem.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { MenuItemProps, MenuItem } from "../menu/MenuItem";
3 | import { ClearFormattingAction } from "./ClearFormattingAction";
4 |
5 | export interface ClearFormattingMenuItemProps extends Partial {}
6 |
7 | export const ClearFormattingMenuItem = (
8 | props: ClearFormattingMenuItemProps
9 | ) => {
10 | return (
11 |
12 |
13 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/packages/editor-kit/src/features/strikethrough/StrikethroughMarkdownTrigger.ts:
--------------------------------------------------------------------------------
1 | import { MatchResult } from "../../editor/Matching";
2 | import { applyRegexMark } from "../marks/Marks";
3 | import { Trigger } from "../../plugins/Trigger";
4 | import { EditorState } from "../../editor/EditorState";
5 |
6 | export const StrikethroughMarkdownTrigger: Trigger = {
7 | pattern: /(\~~)(.{1,})\1/,
8 | onMatch: (state: EditorState, matches: MatchResult[]) => {
9 | applyRegexMark(state.editor, matches[0], "strikethrough");
10 | },
11 | clear: false,
12 | };
13 |
--------------------------------------------------------------------------------
/packages/editor-kit/src/features/layout/LayoutPluginAction.ts:
--------------------------------------------------------------------------------
1 | import { Transforms } from "slate";
2 | import { PluginAction } from "../../plugins/PluginAction";
3 | import { createLayout } from "./Layout";
4 |
5 | export const LayoutPluginAction: PluginAction = {
6 | action: ({ editor }, plugin, args) => {
7 | let layout = [2, 1];
8 | if (args && args.layout) {
9 | layout = args.layout;
10 | }
11 | Transforms.insertNodes(editor, createLayout(layout));
12 | },
13 | isActionActive: ({ elementType }) => elementType === "layout-cell",
14 | };
15 |
--------------------------------------------------------------------------------
/packages/editor-kit/src/features/toolbar/SelectionToolbarGlobalStyle.ts:
--------------------------------------------------------------------------------
1 | export const SelectionToolbarGlobalStyle = `
2 | .rek-selection-toolbar {
3 | border-radius: 4px;
4 | padding: 4px;
5 | display: flex;
6 | align-items: center;
7 | background-color: #1f2025;
8 |
9 | .rek-icon {
10 | color: white;
11 | }
12 |
13 | .rek-icon-button.active:not(.rek-disabled) {
14 | background-color:white;
15 | color: #1f2025;
16 | .rek-icon {
17 | color: #1f2025;
18 | }
19 | }
20 | }
21 | `;
22 |
--------------------------------------------------------------------------------