@monolith-forensics/monolith-ui 1.9.3-dev.2 → 1.9.3-dev.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/MonolithUIProvider/MonolithUIProvider.d.ts +4 -0
- package/dist/RichTextEditor/Components/BubbleMenu.js +25 -2
- package/dist/RichTextEditor/Enums/Controls.d.ts +1 -0
- package/dist/RichTextEditor/Enums/Controls.js +1 -0
- package/dist/RichTextEditor/Enums/Extensions.d.ts +1 -0
- package/dist/RichTextEditor/Enums/Extensions.js +1 -0
- package/dist/RichTextEditor/Enums/SlashCommands.d.ts +1 -0
- package/dist/RichTextEditor/Enums/SlashCommands.js +1 -0
- package/dist/RichTextEditor/Extensions/getSlashCommand.js +10 -1
- package/dist/RichTextEditor/Extensions/getTiptapExtensions.js +8 -0
- package/dist/RichTextEditor/RichTextEditor.js +18 -0
- package/dist/RichTextEditor/Toolbar/Controls.d.ts +1 -0
- package/dist/RichTextEditor/Toolbar/Controls.js +8 -1
- package/dist/RichTextEditor/Toolbar/Toolbar.js +2 -2
- package/dist/theme/variants.js +8 -0
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import styled, { useTheme } from "styled-components";
|
|
3
3
|
import { Extensions } from "../Enums";
|
|
4
|
-
import { BoldIcon, CodeIcon, ItalicIcon, UnderlineIcon, CaseSensitiveIcon, ListIcon, ListOrderedIcon, SquareCodeIcon, StrikethroughIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, HighlighterIcon, LinkIcon, PaletteIcon, RemoveFormattingIcon, SquircleIcon, } from "lucide-react";
|
|
4
|
+
import { BoldIcon, CodeIcon, ItalicIcon, UnderlineIcon, CaseSensitiveIcon, ListIcon, ListOrderedIcon, SquareCodeIcon, StrikethroughIcon, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, HighlighterIcon, LinkIcon, PaletteIcon, RemoveFormattingIcon, SquircleIcon, TextQuoteIcon, } from "lucide-react";
|
|
5
5
|
import { DropDownMenu, } from "../../DropDownMenu";
|
|
6
6
|
import { useEffect, useState } from "react";
|
|
7
7
|
import { Button } from "../../Button";
|
|
@@ -16,15 +16,19 @@ const getMenuItems = (editor, customMenuItems, theme, openLinkEditor) => {
|
|
|
16
16
|
const pos = (_e = (_d = editor === null || editor === void 0 ? void 0 : editor.state) === null || _d === void 0 ? void 0 : _d.selection) === null || _e === void 0 ? void 0 : _e.$from;
|
|
17
17
|
let withinUnorderedList = false;
|
|
18
18
|
let withinOrderedList = false;
|
|
19
|
+
let withinBlockquote = false;
|
|
19
20
|
// Traverse the node ancestors
|
|
20
21
|
pos.path.forEach((node) => {
|
|
21
|
-
var _a, _b;
|
|
22
|
+
var _a, _b, _c;
|
|
22
23
|
if (((_a = node === null || node === void 0 ? void 0 : node.type) === null || _a === void 0 ? void 0 : _a.name) === "bulletList") {
|
|
23
24
|
withinUnorderedList = true;
|
|
24
25
|
}
|
|
25
26
|
else if (((_b = node === null || node === void 0 ? void 0 : node.type) === null || _b === void 0 ? void 0 : _b.name) === "orderedList") {
|
|
26
27
|
withinOrderedList = true;
|
|
27
28
|
}
|
|
29
|
+
else if (((_c = node === null || node === void 0 ? void 0 : node.type) === null || _c === void 0 ? void 0 : _c.name) === "blockquote") {
|
|
30
|
+
withinBlockquote = true;
|
|
31
|
+
}
|
|
28
32
|
});
|
|
29
33
|
const attrs = node === null || node === void 0 ? void 0 : node.attrs;
|
|
30
34
|
const supportsSyntaxCodeBlock = hasSyntaxHighlightedCodeBlock(editor);
|
|
@@ -32,6 +36,7 @@ const getMenuItems = (editor, customMenuItems, theme, openLinkEditor) => {
|
|
|
32
36
|
const supportsColor = Boolean(editor.extensionManager.extensions.find((extension) => extension.name === "color"));
|
|
33
37
|
const supportsHighlight = Boolean(editor.extensionManager.extensions.find((extension) => extension.name === "highlight"));
|
|
34
38
|
const supportsLink = Boolean(editor.extensionManager.extensions.find((extension) => extension.name === "link"));
|
|
39
|
+
const supportsBlockquote = Boolean(editor.extensionManager.extensions.find((extension) => extension.name === "blockquote"));
|
|
35
40
|
let nodeTypeLabel = "Select Type";
|
|
36
41
|
let nodeTypeIcon = null;
|
|
37
42
|
if (withinOrderedList) {
|
|
@@ -50,6 +55,10 @@ const getMenuItems = (editor, customMenuItems, theme, openLinkEditor) => {
|
|
|
50
55
|
nodeTypeLabel = "Code Block";
|
|
51
56
|
nodeTypeIcon = _jsx(SquareCodeIcon, { size: 16 });
|
|
52
57
|
}
|
|
58
|
+
else if (withinBlockquote) {
|
|
59
|
+
nodeTypeLabel = "Blockquote";
|
|
60
|
+
nodeTypeIcon = _jsx(TextQuoteIcon, { size: 16 });
|
|
61
|
+
}
|
|
53
62
|
else if (((_h = node === null || node === void 0 ? void 0 : node.type) === null || _h === void 0 ? void 0 : _h.name) === "heading") {
|
|
54
63
|
const level = attrs === null || attrs === void 0 ? void 0 : attrs.level;
|
|
55
64
|
nodeTypeLabel = `Heading ${level}`;
|
|
@@ -147,6 +156,20 @@ const getMenuItems = (editor, customMenuItems, theme, openLinkEditor) => {
|
|
|
147
156
|
},
|
|
148
157
|
},
|
|
149
158
|
},
|
|
159
|
+
...(supportsBlockquote
|
|
160
|
+
? [
|
|
161
|
+
{
|
|
162
|
+
label: "Blockquote",
|
|
163
|
+
value: "blockquote",
|
|
164
|
+
data: {
|
|
165
|
+
Icon: TextQuoteIcon,
|
|
166
|
+
command: (editor) => {
|
|
167
|
+
editor.chain().focus().toggleBlockquote().run();
|
|
168
|
+
},
|
|
169
|
+
},
|
|
170
|
+
},
|
|
171
|
+
]
|
|
172
|
+
: []),
|
|
150
173
|
...(supportsSyntaxCodeBlock
|
|
151
174
|
? [
|
|
152
175
|
{
|
|
@@ -9,6 +9,7 @@ export var Controls;
|
|
|
9
9
|
Controls["CLEAR_FORMATTING"] = "clearFormatting";
|
|
10
10
|
Controls["CODE"] = "code";
|
|
11
11
|
Controls["CODE_BLOCK"] = "codeBlock";
|
|
12
|
+
Controls["BLOCKQUOTE"] = "blockquote";
|
|
12
13
|
Controls["HEADING_1"] = "heading_1";
|
|
13
14
|
Controls["HEADING_2"] = "heading_2";
|
|
14
15
|
Controls["HEADING_3"] = "heading_3";
|
|
@@ -7,6 +7,7 @@ export var Extensions;
|
|
|
7
7
|
Extensions["Italic"] = "italic";
|
|
8
8
|
Extensions["Code"] = "code";
|
|
9
9
|
Extensions["CodeBlock"] = "codeBlock";
|
|
10
|
+
Extensions["Blockquote"] = "blockquote";
|
|
10
11
|
Extensions["Color"] = "color";
|
|
11
12
|
Extensions["Highlight"] = "highlight";
|
|
12
13
|
Extensions["Link"] = "link";
|
|
@@ -9,6 +9,7 @@ export var SlashCommands;
|
|
|
9
9
|
SlashCommands["NumberedList"] = "Numbered List";
|
|
10
10
|
SlashCommands["Code"] = "Code";
|
|
11
11
|
SlashCommands["CodeBlock"] = "Code Block";
|
|
12
|
+
SlashCommands["Blockquote"] = "Blockquote";
|
|
12
13
|
SlashCommands["CurrentDate"] = "Current Date";
|
|
13
14
|
SlashCommands["CurrentTimestamp"] = "Current Timestamp";
|
|
14
15
|
SlashCommands["Image"] = "Image";
|
|
@@ -11,7 +11,7 @@ import { Extension } from "@tiptap/core";
|
|
|
11
11
|
import Suggestion from "@tiptap/suggestion";
|
|
12
12
|
import { ReactRenderer } from "@tiptap/react";
|
|
13
13
|
import tippy from "tippy.js";
|
|
14
|
-
import { Heading1, Heading2, Heading3, Heading4, List, ListOrdered, Text, Image as ImageIcon, Calendar, CodeIcon, ClockIcon, SquareCodeIcon, Table2Icon, } from "lucide-react";
|
|
14
|
+
import { Heading1, Heading2, Heading3, Heading4, List, ListOrdered, Text, TextQuote, Image as ImageIcon, Calendar, CodeIcon, ClockIcon, SquareCodeIcon, Table2Icon, } from "lucide-react";
|
|
15
15
|
import { startImageUpload, } from "../Plugins/UploadImagesPlugin.js";
|
|
16
16
|
import { PluginKey } from "@tiptap/pm/state";
|
|
17
17
|
import SlashCommandList from "./SlashCommandList";
|
|
@@ -139,6 +139,15 @@ const getCommandItems = (values, options) => {
|
|
|
139
139
|
.run();
|
|
140
140
|
},
|
|
141
141
|
},
|
|
142
|
+
{
|
|
143
|
+
title: SlashCommands.Blockquote,
|
|
144
|
+
description: "Capture a quotation or cited note.",
|
|
145
|
+
searchTerms: ["quote", "blockquote", "callout"],
|
|
146
|
+
icon: TextQuote,
|
|
147
|
+
command: ({ editor, range }) => {
|
|
148
|
+
editor.chain().focus().deleteRange(range).toggleBlockquote().run();
|
|
149
|
+
},
|
|
150
|
+
},
|
|
142
151
|
{
|
|
143
152
|
title: SlashCommands.CurrentDate,
|
|
144
153
|
description: "Insert the current date.",
|
|
@@ -70,6 +70,7 @@ export const BASIC_EXTENSIONS = [
|
|
|
70
70
|
Extensions.Underline,
|
|
71
71
|
Extensions.Strike,
|
|
72
72
|
Extensions.Code,
|
|
73
|
+
Extensions.Blockquote,
|
|
73
74
|
Extensions.BulletList,
|
|
74
75
|
Extensions.OrderedList,
|
|
75
76
|
Extensions.TextStyle,
|
|
@@ -164,6 +165,13 @@ const getTipTapExtensions = ({ disabledExtensions = [], extensions = [], slashCo
|
|
|
164
165
|
},
|
|
165
166
|
}
|
|
166
167
|
: false,
|
|
168
|
+
blockquote: isEnabled(Extensions.Blockquote)
|
|
169
|
+
? {
|
|
170
|
+
HTMLAttributes: {
|
|
171
|
+
class: "editor-blockquote",
|
|
172
|
+
},
|
|
173
|
+
}
|
|
174
|
+
: false,
|
|
167
175
|
codeBlock: false,
|
|
168
176
|
horizontalRule: false,
|
|
169
177
|
dropcursor: {
|
|
@@ -448,6 +448,20 @@ const StyledContent = styled.div `
|
|
|
448
448
|
font-size: 0.9em;
|
|
449
449
|
box-decoration-break: clone;
|
|
450
450
|
}
|
|
451
|
+
.editor-blockquote,
|
|
452
|
+
blockquote {
|
|
453
|
+
margin: 0.5rem 0;
|
|
454
|
+
padding: 0.375rem 0 0.375rem 0.875rem;
|
|
455
|
+
border-left: 4px solid ${({ theme }) => theme.palette.primary.main};
|
|
456
|
+
color: ${({ theme }) => theme.palette.text.secondary};
|
|
457
|
+
background-color: ${({ theme }) => theme.palette.action.hover};
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.editor-blockquote p,
|
|
461
|
+
blockquote p {
|
|
462
|
+
margin: 0;
|
|
463
|
+
}
|
|
464
|
+
|
|
451
465
|
.editor-code-block {
|
|
452
466
|
position: relative;
|
|
453
467
|
margin: 0.5rem 0;
|
|
@@ -827,6 +841,9 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
|
|
|
827
841
|
if (command === SlashCommands.CodeBlock) {
|
|
828
842
|
return resolvedExtensionSet.has(Extensions.CodeBlock);
|
|
829
843
|
}
|
|
844
|
+
if (command === SlashCommands.Blockquote) {
|
|
845
|
+
return resolvedExtensionSet.has(Extensions.Blockquote);
|
|
846
|
+
}
|
|
830
847
|
if (command === SlashCommands.Table) {
|
|
831
848
|
return resolvedExtensionSet.has(Extensions.Table);
|
|
832
849
|
}
|
|
@@ -842,6 +859,7 @@ export const RichTextEditor = ({ className, editorInstanceRef, defaultValue = ""
|
|
|
842
859
|
[Controls.STRIKE]: Extensions.Strike,
|
|
843
860
|
[Controls.CODE]: Extensions.Code,
|
|
844
861
|
[Controls.CODE_BLOCK]: Extensions.CodeBlock,
|
|
862
|
+
[Controls.BLOCKQUOTE]: Extensions.Blockquote,
|
|
845
863
|
[Controls.BULLET_LIST]: Extensions.BulletList,
|
|
846
864
|
[Controls.ORDERED_LIST]: Extensions.OrderedList,
|
|
847
865
|
[Controls.COLOR]: Extensions.Color,
|
|
@@ -14,6 +14,7 @@ export declare const UnderlineControl: ({ editor }: ControlProps) => import("rea
|
|
|
14
14
|
export declare const StrikeThroughControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
export declare const CodeControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
export declare const CodeBlockControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare const BlockquoteControl: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
18
|
export declare const Heading1Control: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
export declare const Heading2Control: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
20
|
export declare const Heading3Control: ({ editor }: ControlProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { IconBold, IconItalic, IconUnderline, IconStrikethrough, IconH1, IconH2, IconH3, IconH4, IconList, IconListNumbers, IconAlignLeft, IconAlignRight, IconAlignCenter, IconAlignJustified, IconCornerUpLeft, IconCornerUpRight, } from "@tabler/icons-react";
|
|
2
|
+
import { IconBold, IconItalic, IconUnderline, IconStrikethrough, IconH1, IconH2, IconH3, IconH4, IconList, IconListNumbers, IconAlignLeft, IconAlignRight, IconAlignCenter, IconAlignJustified, IconCornerUpLeft, IconCornerUpRight, IconBlockquote, } from "@tabler/icons-react";
|
|
3
3
|
import { CodeIcon, HighlighterIcon, PaletteIcon, RemoveFormattingIcon, SquircleIcon, TypeIcon, } from "lucide-react";
|
|
4
4
|
import { SquareCodeIcon } from "lucide-react";
|
|
5
5
|
import { Control } from "./Control";
|
|
@@ -156,6 +156,13 @@ export const CodeBlockControl = ({ editor }) => {
|
|
|
156
156
|
name: "codeBlock",
|
|
157
157
|
}, onClick: toggleCodeBlock, disabled: !hasSyntaxHighlightedCodeBlock(editor), icon: SquareCodeIcon }));
|
|
158
158
|
};
|
|
159
|
+
export const BlockquoteControl = ({ editor }) => {
|
|
160
|
+
return (_jsx(Control, { editor: editor, label: "blockquoteControlLabel", isActive: {
|
|
161
|
+
name: "blockquote",
|
|
162
|
+
}, operation: {
|
|
163
|
+
name: "toggleBlockquote",
|
|
164
|
+
}, icon: IconBlockquote }));
|
|
165
|
+
};
|
|
159
166
|
export const Heading1Control = ({ editor }) => {
|
|
160
167
|
return (_jsx(Control, { editor: editor, label: "h1ControlLabel", isActive: {
|
|
161
168
|
name: "heading",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
3
|
import ControlsGroup from "./ControlsGroup";
|
|
4
|
-
import { UndoControl, RedoControl, FontControl, TextColorControl, HighlightControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, ClearFormattingControl, CodeControl, CodeBlockControl, Heading1Control, Heading2Control, Heading3Control, Heading4Control, BulletListControl, OrderedListControl, AlignLeftControl, AlignCenterControl, AlignRightControl, AlignJustifiedControl, } from "./Controls";
|
|
4
|
+
import { UndoControl, RedoControl, FontControl, TextColorControl, HighlightControl, BoldControl, ItalicControl, UnderlineControl, StrikeThroughControl, ClearFormattingControl, CodeControl, CodeBlockControl, BlockquoteControl, Heading1Control, Heading2Control, Heading3Control, Heading4Control, BulletListControl, OrderedListControl, AlignLeftControl, AlignCenterControl, AlignRightControl, AlignJustifiedControl, } from "./Controls";
|
|
5
5
|
import { Controls } from "../Enums";
|
|
6
6
|
import { DropDownMenu } from "../../DropDownMenu";
|
|
7
7
|
import { useState } from "react";
|
|
@@ -46,5 +46,5 @@ export const Toolbar = ({ editor, toolbarOptions }) => {
|
|
|
46
46
|
},
|
|
47
47
|
} }, item.options, { size: "xs", children: (_b = item === null || item === void 0 ? void 0 : item.options) === null || _b === void 0 ? void 0 : _b.label }), index));
|
|
48
48
|
}
|
|
49
|
-
}), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDO)) && _jsx(UndoControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.REDO)) && _jsx(RedoControl, { editor: editor })] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.FONT)) && _jsx(FontControl, {}), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.COLOR)) && (_jsx(TextColorControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HIGHLIGHT)) && (_jsx(HighlightControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BOLD)) && _jsx(BoldControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ITALIC)) && (_jsx(ItalicControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDERLINE)) && (_jsx(UnderlineControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.STRIKE)) && (_jsx(StrikeThroughControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_1)) && (_jsx(Heading1Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_2)) && (_jsx(Heading2Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_3)) && (_jsx(Heading3Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_4)) && (_jsx(Heading4Control, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BULLET_LIST)) && (_jsx(BulletListControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ORDERED_LIST)) && (_jsx(OrderedListControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_LEFT)) && (_jsx(AlignLeftControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_CENTER)) && (_jsx(AlignCenterControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_RIGHT)) && (_jsx(AlignRightControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_JUSTIFIED)) && (_jsx(AlignJustifiedControl, { editor: editor }))] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.LINK)) && (_jsxs(Popover, { opened: linkPopoverOpen, onChange: setLinkPopoverOpen, position: "bottom", width: 330, trapFocus: true, children: [_jsx(Popover.Target, { children: _jsx(Button, { size: "xs", variant: "outlined", title: "Link", "aria-label": "Link", selected: linkPopoverOpen || Boolean(editor === null || editor === void 0 ? void 0 : editor.isActive("link")), disabled: !editor, style: { padding: "1px 6px" }, children: _jsx(LinkIcon, { size: 14 }) }) }), _jsx(Popover.Dropdown, { children: editor && (_jsx(LinkEditor, { editor: editor, autoFocus: linkPopoverOpen, onClose: () => setLinkPopoverOpen(false) })) })] })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CODE)) && _jsx(CodeControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CODE_BLOCK)) && (_jsx(CodeBlockControl, { editor: editor }))] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TABLE)) && (_jsx(TableToolsPopover, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CLEAR_FORMATTING)) && (_jsx(ClearFormattingControl, { editor: editor }))] }));
|
|
49
|
+
}), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDO)) && _jsx(UndoControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.REDO)) && _jsx(RedoControl, { editor: editor })] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.FONT)) && _jsx(FontControl, {}), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.COLOR)) && (_jsx(TextColorControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HIGHLIGHT)) && (_jsx(HighlightControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BOLD)) && _jsx(BoldControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ITALIC)) && (_jsx(ItalicControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.UNDERLINE)) && (_jsx(UnderlineControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.STRIKE)) && (_jsx(StrikeThroughControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_1)) && (_jsx(Heading1Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_2)) && (_jsx(Heading2Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_3)) && (_jsx(Heading3Control, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.HEADING_4)) && (_jsx(Heading4Control, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BULLET_LIST)) && (_jsx(BulletListControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.ORDERED_LIST)) && (_jsx(OrderedListControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.BLOCKQUOTE)) && (_jsx(BlockquoteControl, { editor: editor }))] }), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_LEFT)) && (_jsx(AlignLeftControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_CENTER)) && (_jsx(AlignCenterControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_RIGHT)) && (_jsx(AlignRightControl, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TEXT_ALIGN_JUSTIFIED)) && (_jsx(AlignJustifiedControl, { editor: editor }))] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.LINK)) && (_jsxs(Popover, { opened: linkPopoverOpen, onChange: setLinkPopoverOpen, position: "bottom", width: 330, trapFocus: true, children: [_jsx(Popover.Target, { children: _jsx(Button, { size: "xs", variant: "outlined", title: "Link", "aria-label": "Link", selected: linkPopoverOpen || Boolean(editor === null || editor === void 0 ? void 0 : editor.isActive("link")), disabled: !editor, style: { padding: "1px 6px" }, children: _jsx(LinkIcon, { size: 14 }) }) }), _jsx(Popover.Dropdown, { children: editor && (_jsx(LinkEditor, { editor: editor, autoFocus: linkPopoverOpen, onClose: () => setLinkPopoverOpen(false) })) })] })), _jsxs(ControlsGroup, { children: [(controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CODE)) && _jsx(CodeControl, { editor: editor }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CODE_BLOCK)) && (_jsx(CodeBlockControl, { editor: editor }))] }), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.TABLE)) && (_jsx(TableToolsPopover, { editor: editor })), (controls === null || controls === void 0 ? void 0 : controls.includes(Controls.CLEAR_FORMATTING)) && (_jsx(ClearFormattingControl, { editor: editor }))] }));
|
|
50
50
|
};
|
package/dist/theme/variants.js
CHANGED
|
@@ -73,6 +73,10 @@ const lightVariant = {
|
|
|
73
73
|
main: green[700],
|
|
74
74
|
contrastText: "#FFF",
|
|
75
75
|
},
|
|
76
|
+
warning: {
|
|
77
|
+
main: "#ffa726",
|
|
78
|
+
contrastText: "#FFF",
|
|
79
|
+
},
|
|
76
80
|
background: {
|
|
77
81
|
default: "#FFF",
|
|
78
82
|
paper: "#FFF",
|
|
@@ -260,6 +264,10 @@ const darkVariant = merge(lightVariant, {
|
|
|
260
264
|
main: green[500],
|
|
261
265
|
contrastText: "#FFF",
|
|
262
266
|
},
|
|
267
|
+
warning: {
|
|
268
|
+
main: "#ffa726",
|
|
269
|
+
contrastText: "#FFF",
|
|
270
|
+
},
|
|
263
271
|
background: {
|
|
264
272
|
default: "#222222",
|
|
265
273
|
paper: "#333333",
|