@mrshmllw/smores-react 13.2.2 → 13.3.1
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/BadgeList/BadgeList.js +1 -2
- package/dist/BadgeList/BadgeList.js.map +1 -1
- package/dist/RichTextEditor/RichTextEditor.js +5 -6
- package/dist/RichTextEditor/RichTextEditor.js.map +1 -1
- package/dist/RichTextEditor/plugins/ToolbarPlugin.js +10 -19
- package/dist/RichTextEditor/plugins/ToolbarPlugin.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,7 +3,6 @@ import { Badge, BadgeSize } from '../Badge/Badge';
|
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import { Tooltip } from '../Tooltip';
|
|
5
5
|
import { Text } from '../Text';
|
|
6
|
-
import { theme } from '../theme';
|
|
7
6
|
/**
|
|
8
7
|
* ### A list of badges with optional tooltips
|
|
9
8
|
*
|
|
@@ -40,7 +39,7 @@ const ExcessBadgeContainer = styled.div `
|
|
|
40
39
|
place-content: center;
|
|
41
40
|
width: 100%;
|
|
42
41
|
height: 100%;
|
|
43
|
-
background-color: ${theme.
|
|
42
|
+
background-color: ${({ theme }) => theme.color.surface.base[400]};
|
|
44
43
|
pointer-events: none;
|
|
45
44
|
`;
|
|
46
45
|
const WithTooltip = ({ badge: { tooltip, ...badge } }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BadgeList.js","sourceRoot":"","sources":["../../src/BadgeList/BadgeList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,SAAS,EAAmB,MAAM,gBAAgB,CAAA;AAClE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"BadgeList.js","sourceRoot":"","sources":["../../src/BadgeList/BadgeList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Badge, BadgeSize, type BadgeProps } from '../Badge/Badge'\nimport styled from 'styled-components'\nimport { Tooltip } from '../Tooltip'\nimport type { TooltipProps } from '../Tooltip/Tooltip'\nimport { Text } from '../Text'\n\ntype WithTooltip = Pick<TooltipProps, 'title' | 'content'> & {\n position?: TooltipProps['position']\n}\n\nexport type BadgeListBadge = BadgeProps & { tooltip?: WithTooltip }\n\ntype Props = {\n size?: BadgeProps['size']\n limit?: number\n badges: Omit<BadgeListBadge, 'zIndex'>[]\n}\n\n/**\n * ### A list of badges with optional tooltips\n *\n * @param limit - The maximum number of badges to display. If the number of badges exceeds the limit, a badge will be displayed indicating the number of hidden excess badges.\n *\n */\nexport function BadgeList({ badges, limit, size = BadgeSize.Lg }: Props) {\n const badgeZIndexMax = badges.length\n const limitExcess =\n // TODO: off by one adjustments work, just hard to read, refactor for human eyes 👁️👄👁️\n limit && (badges.length > limit ? badges.length - limit : 0)\n\n const maxBadges = limit ? limit - 1 : undefined\n const showExcessBadge = limitExcess !== undefined && Boolean(limitExcess)\n\n return (\n <Container $size={size}>\n {badges\n .slice(0, limitExcess ? maxBadges : undefined)\n .map((badge, index) => (\n <WithTooltip\n key={typeof badge.src === 'string' ? badge.src : index}\n badge={{\n ...badge,\n zIndex: badgeZIndexMax - index,\n size,\n }}\n />\n ))}\n\n {showExcessBadge && (\n <div\n className=\"limit-badge\"\n style={{ zIndex: badgeZIndexMax, marginLeft: '4px' }}\n >\n <Badge\n title={`+${limitExcess}`}\n borderColour=\"oatmeal\"\n size={size}\n src={<ExcessBadge excess={limitExcess + 1} />}\n disabled\n />\n </div>\n )}\n </Container>\n )\n}\n\ntype ExcessBadgeProps = {\n excess: number\n}\n\nfunction ExcessBadge({ excess }: ExcessBadgeProps) {\n return (\n <ExcessBadgeContainer>\n <Text typo=\"caption\" style={{ fontWeight: 'bold' }}>\n +{excess}\n </Text>\n </ExcessBadgeContainer>\n )\n}\n\nconst ExcessBadgeContainer = styled.div`\n display: flex;\n align-items: center;\n place-content: center;\n width: 100%;\n height: 100%;\n background-color: ${({ theme }) => theme.color.surface.base[400]};\n pointer-events: none;\n`\n\ntype WithTooltipProps = {\n badge: BadgeListBadge\n}\n\nconst WithTooltip = ({ badge: { tooltip, ...badge } }: WithTooltipProps) => {\n if (tooltip) {\n return (\n <div style={{ zIndex: badge.zIndex }}>\n <Tooltip\n position={tooltip.position ?? 'bottom'}\n title={tooltip?.title}\n content={tooltip.content}\n >\n <Badge {...badge} />\n </Tooltip>\n </div>\n )\n }\n\n return (\n <div style={{ zIndex: badge.zIndex }}>\n <Badge {...badge} />\n </div>\n )\n}\n\nconst marginRightMapping = {\n [BadgeSize.Lg]: '-18px',\n [BadgeSize.Md]: '-14px',\n [BadgeSize.Sm]: '-11px',\n} satisfies Record<BadgeSize, string>\n\nconst Container = styled.div<{ $size: BadgeSize }>`\n display: flex;\n\n > * {\n transition:\n margin 0.2s ease-in-out,\n padding 0.2s ease-in-out;\n margin-right: ${(props) => marginRightMapping[props.$size]};\n\n &:hover:not(:first-child):not(.limit-badge) {\n padding-left: 10px;\n &:not(:last-child) {\n padding-right: 5px;\n }\n }\n }\n`\n"]}
|
|
@@ -17,7 +17,6 @@ import { $getRoot } from 'lexical';
|
|
|
17
17
|
import React from 'react';
|
|
18
18
|
import styled from 'styled-components';
|
|
19
19
|
import { Box } from '../Box';
|
|
20
|
-
import { theme } from '../theme';
|
|
21
20
|
import CustomAutoLinkPlugin from './plugins/AutoLinkPlugin';
|
|
22
21
|
import { EditorDefaultUpdatePlugin } from './plugins/EditorDefaultUpdatePlugin';
|
|
23
22
|
import { EditorUpdatePlugin } from './plugins/EditorUpdatePlugin';
|
|
@@ -63,12 +62,12 @@ export const RichTextEditor = ({ defaultValue, height, outline = false, maxHeigh
|
|
|
63
62
|
const Editor = styled(Box) `
|
|
64
63
|
.editor-input {
|
|
65
64
|
margin-top: 12px;
|
|
66
|
-
background-color: ${theme.
|
|
65
|
+
background-color: ${({ theme }) => theme.color.background['000']};
|
|
67
66
|
border-radius: 12px;
|
|
68
|
-
border: 2px solid ${theme.
|
|
67
|
+
border: 2px solid ${({ theme }) => theme.color.surface.base[400]};
|
|
69
68
|
padding: 16px;
|
|
70
69
|
overflow: scroll;
|
|
71
|
-
outline-color: ${theme.
|
|
70
|
+
outline-color: ${({ theme }) => theme.color.border.base};
|
|
72
71
|
max-height: ${({ $maxHeight }) => $maxHeight};
|
|
73
72
|
${({ $height }) => $height && `height: ${$height}`};
|
|
74
73
|
min-height: 84px;
|
|
@@ -80,9 +79,9 @@ const Editor = styled(Box) `
|
|
|
80
79
|
}
|
|
81
80
|
`;
|
|
82
81
|
const Container = styled(Box) `
|
|
83
|
-
background-color: ${theme.
|
|
82
|
+
background-color: ${({ theme }) => theme.color.background[100]};
|
|
84
83
|
border-radius: 16px;
|
|
85
84
|
padding: 12px;
|
|
86
|
-
${({ $outline }) => $outline && `border: 2px solid ${theme.
|
|
85
|
+
${({ $outline, theme }) => $outline && `border: 2px solid ${theme.color.surface.base[400]}`}
|
|
87
86
|
`;
|
|
88
87
|
//# sourceMappingURL=RichTextEditor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8CAA8C,CAAA;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC3D,OAAO,SAAS,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAiB,MAAM,SAAS,CAAA;AACjD,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"RichTextEditor.js","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CodeHighlightNode, CodeNode } from '@lexical/code'\nimport { $generateNodesFromDOM } from '@lexical/html'\nimport { AutoLinkNode, LinkNode } from '@lexical/link'\nimport { ListItemNode, ListNode } from '@lexical/list'\nimport { TRANSFORMERS } from '@lexical/markdown'\nimport { LexicalComposer } from '@lexical/react/LexicalComposer'\nimport { ContentEditable } from '@lexical/react/LexicalContentEditable'\nimport { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'\nimport { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'\nimport { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'\nimport { ListPlugin } from '@lexical/react/LexicalListPlugin'\nimport { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin'\nimport { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\nimport DOMPurify from 'dompurify'\nimport { $getRoot, LexicalEditor } from 'lexical'\nimport React, { FC } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { MarginProps } from '../utils/space'\nimport CustomAutoLinkPlugin from './plugins/AutoLinkPlugin'\nimport { EditorDefaultUpdatePlugin } from './plugins/EditorDefaultUpdatePlugin'\nimport { EditorUpdatePlugin } from './plugins/EditorUpdatePlugin'\nimport ToolbarPlugin from './plugins/ToolbarPlugin'\nimport { appendNodes } from './utils'\n\nexport interface RichTextEditorProps extends MarginProps {\n defaultValue?: string\n maxHeight?: string\n height?: string\n outline?: boolean\n onChange: (e: string) => void\n}\n\nexport const RichTextEditor: FC<RichTextEditorProps> = ({\n defaultValue,\n height,\n outline = false,\n maxHeight = '300px',\n onChange,\n ...props\n}) => {\n const defaultEditorState = (editor: LexicalEditor) => {\n const parser = new DOMParser()\n const dom = parser.parseFromString(\n defaultValue ? DOMPurify.sanitize(defaultValue) : '<p></p>',\n 'text/html',\n )\n const nodes = $generateNodesFromDOM(editor, dom)\n const root = $getRoot()\n root.clear()\n\n appendNodes(root, nodes)\n }\n\n const initialConfig = {\n editorState: defaultEditorState,\n namespace: 'MarshmallowRichTextEditor',\n onError: (e: Error) => console.log(e),\n nodes: [\n AutoLinkNode,\n LinkNode,\n ListNode,\n ListItemNode,\n HeadingNode,\n QuoteNode,\n CodeHighlightNode,\n CodeNode,\n ],\n }\n\n return (\n <Container $outline={outline} {...props}>\n <Editor $maxHeight={maxHeight} $height={height}>\n <LexicalComposer initialConfig={initialConfig}>\n <ToolbarPlugin />\n <RichTextPlugin\n contentEditable={<ContentEditable className=\"editor-input\" />}\n placeholder={<div></div>}\n ErrorBoundary={LexicalErrorBoundary}\n />\n <LinkPlugin />\n <ListPlugin />\n <HistoryPlugin />\n <CustomAutoLinkPlugin />\n <MarkdownShortcutPlugin transformers={TRANSFORMERS} />\n <EditorUpdatePlugin onChange={onChange} />\n <EditorDefaultUpdatePlugin defaultValue={defaultValue} />\n </LexicalComposer>\n </Editor>\n </Container>\n )\n}\n\nconst Editor = styled(Box)<{ $maxHeight: string; $height?: string }>`\n .editor-input {\n margin-top: 12px;\n background-color: ${({ theme }) => theme.color.background['000']};\n border-radius: 12px;\n border: 2px solid ${({ theme }) => theme.color.surface.base[400]};\n padding: 16px;\n overflow: scroll;\n outline-color: ${({ theme }) => theme.color.border.base};\n max-height: ${({ $maxHeight }) => $maxHeight};\n ${({ $height }) => $height && `height: ${$height}`};\n min-height: 84px;\n\n * {\n all: revert;\n outline: none;\n }\n }\n`\n\nconst Container = styled(Box)<{ $outline: boolean }>`\n background-color: ${({ theme }) => theme.color.background[100]};\n border-radius: 16px;\n padding: 12px;\n ${({ $outline, theme }) =>\n $outline && `border: 2px solid ${theme.color.surface.base[400]}`}\n`\n"]}
|
|
@@ -9,7 +9,6 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
|
9
9
|
import styled from 'styled-components';
|
|
10
10
|
import { Box } from '../../Box';
|
|
11
11
|
import { Icon } from '../../Icon';
|
|
12
|
-
import { theme } from '../../theme';
|
|
13
12
|
const LowPriority = 1;
|
|
14
13
|
function getSelectedNode(selection) {
|
|
15
14
|
const anchor = selection.anchor;
|
|
@@ -147,22 +146,13 @@ const EditorButton = styled(Box) `
|
|
|
147
146
|
align-items: center;
|
|
148
147
|
font-size: 24px;
|
|
149
148
|
cursor: pointer;
|
|
150
|
-
background-color: ${theme.
|
|
149
|
+
background-color: ${({ theme }) => theme.color.surface.base[300]};
|
|
151
150
|
flex-shrink: 0;
|
|
152
151
|
|
|
153
|
-
${({ $active }) => $active &&
|
|
152
|
+
${({ $active, theme }) => $active &&
|
|
154
153
|
`
|
|
155
|
-
background-color: ${theme.
|
|
154
|
+
background-color: ${theme.color.interactive.primary.hover};
|
|
156
155
|
`}
|
|
157
|
-
|
|
158
|
-
:hover {
|
|
159
|
-
filter: brightness(0.95);
|
|
160
|
-
|
|
161
|
-
${({ $active }) => $active &&
|
|
162
|
-
`
|
|
163
|
-
background-color: ${theme.colors.fairyFloss};
|
|
164
|
-
`}
|
|
165
|
-
}
|
|
166
156
|
`;
|
|
167
157
|
const Bold = styled(EditorButton) `
|
|
168
158
|
font-weight: 500;
|
|
@@ -186,9 +176,9 @@ const Link = styled(EditorButton) `
|
|
|
186
176
|
padding-right: 5px;
|
|
187
177
|
flex-shrink: 1;
|
|
188
178
|
|
|
189
|
-
${({ $active }) => $active &&
|
|
179
|
+
${({ $active, theme }) => $active &&
|
|
190
180
|
`
|
|
191
|
-
background-color: ${theme.
|
|
181
|
+
background-color: ${theme.color.interactive.primary.hover};
|
|
192
182
|
|
|
193
183
|
:hover {
|
|
194
184
|
filter: none;
|
|
@@ -196,14 +186,14 @@ const Link = styled(EditorButton) `
|
|
|
196
186
|
`}
|
|
197
187
|
`;
|
|
198
188
|
const LinkOpen = styled(Icon) `
|
|
199
|
-
background-color: ${theme.
|
|
189
|
+
background-color: ${({ theme }) => theme.color.interactive.tertiary.base};
|
|
200
190
|
height: 32px;
|
|
201
191
|
width: 32px;
|
|
202
192
|
border-radius: 20px;
|
|
203
193
|
padding: 6px;
|
|
204
194
|
|
|
205
195
|
:hover {
|
|
206
|
-
background-color: ${theme.
|
|
196
|
+
background-color: ${({ theme }) => theme.color.interactive.tertiary.active};
|
|
207
197
|
}
|
|
208
198
|
`;
|
|
209
199
|
const LinkInput = styled.input `
|
|
@@ -215,13 +205,14 @@ const LinkInput = styled.input `
|
|
|
215
205
|
padding-right: 12px;
|
|
216
206
|
font-size: 16px;
|
|
217
207
|
min-width: 0;
|
|
208
|
+
background-color: white;
|
|
218
209
|
|
|
219
210
|
:hover {
|
|
220
|
-
outline: 2px solid ${theme.
|
|
211
|
+
outline: 2px solid ${({ theme }) => theme.color.surface.brand[200]};
|
|
221
212
|
}
|
|
222
213
|
|
|
223
214
|
:focus {
|
|
224
|
-
outline: 2px solid ${theme.
|
|
215
|
+
outline: 2px solid ${({ theme }) => theme.color.surface.brand[300]};
|
|
225
216
|
}
|
|
226
217
|
`;
|
|
227
218
|
//# sourceMappingURL=ToolbarPlugin.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarPlugin.js","sourceRoot":"","sources":["../../../src/RichTextEditor/plugins/ToolbarPlugin.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AAChE,OAAO,EACL,WAAW,EACX,6BAA6B,EAC7B,QAAQ,EACR,mBAAmB,GACpB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAA;AACjF,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACjD,OAAO,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AACrE,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EAEnB,wBAAwB,GACzB,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,MAAM,WAAW,GAAG,CAAC,CAAA;AAErB,SAAS,eAAe,CAAC,SAAyB;IAChD,MAAM,MAAM,GAAG,SAAS,CAAC,MAAM,CAAA;IAC/B,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAA;IAC7B,MAAM,UAAU,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,CAAA;IAC7C,MAAM,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;IAC3C,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;QAC7B,OAAO,UAAU,CAAA;IACnB,CAAC;IACD,MAAM,UAAU,GAAG,SAAS,CAAC,UAAU,EAAE,CAAA;IACzC,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAA;IACrD,CAAC;SAAM,CAAC;QACN,OAAO,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAA;IACtD,CAAC;AACH,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,aAAa;IACnC,MAAM,CAAC,MAAM,CAAC,GAAG,yBAAyB,EAAE,CAAA;IAC5C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAA;IACvD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC/C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAC1C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAElD,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;YACvB,MAAM,CAAC,eAAe,CAAC,6BAA6B,EAAE,SAAS,CAAC,CAAA;QAClE,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,eAAe,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAA;QACxD,CAAC;IACH,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,MAAM,SAAS,GAAG,aAAa,EAAE,CAAA;QACjC,IAAI,iBAAiB,CAAC,SAAS,CAAC,EAAE,CAAC;YACjC,MAAM,UAAU,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,CAAA;YAC7C,MAAM,OAAO,GACX,UAAU,CAAC,MAAM,EAAE,KAAK,MAAM;gBAC5B,CAAC,CAAC,UAAU;gBACZ,CAAC,CAAC,UAAU,CAAC,yBAAyB,EAAE,CAAA;YAC5C,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,EAAE,CAAA;YACnC,MAAM,UAAU,GAAG,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;YACrD,IAAI,UAAU,KAAK,IAAI,EAAE,CAAC;gBACxB,IAAI,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;oBACzB,MAAM,UAAU,GAAG,qBAAqB,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA;oBAC9D,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,CAAA;oBAChE,YAAY,CAAC,IAAI,CAAC,CAAA;gBACpB,CAAC;qBAAM,CAAC;oBACN,MAAM,IAAI,GAAG,cAAc,CAAC,OAAO,CAAC;wBAClC,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE;wBAClB,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,CAAA;oBACrB,YAAY,CAAC,IAAI,CAAC,CAAA;gBACpB,CAAC;YACH,CAAC;YACD,qBAAqB;YACrB,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAA;YACtC,WAAW,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAA;YAE1C,eAAe;YACf,MAAM,IAAI,GAAG,eAAe,CAAC,SAAS,CAAC,CAAA;YACvC,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAA;YAC/B,IAAI,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC;gBACxB,SAAS,CAAC,IAAI,CAAC,CAAA;gBACf,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAA;YAC7B,CAAC;iBAAM,IAAI,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC7B,SAAS,CAAC,IAAI,CAAC,CAAA;gBACf,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;YAC3B,CAAC;iBAAM,CAAC;gBACN,SAAS,CAAC,KAAK,CAAC,CAAA;gBAChB,UAAU,CAAC,EAAE,CAAC,CAAA;YAChB,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,MAAM,aAAa,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC/D,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC;YACH,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAA;QAChC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,8BAA8B,EAAE,KAAK,CAAC,CAAA;QACrD,CAAC;IACH,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAA;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,KAAK,EAAE,IAAI,MAAM,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;YACxD,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;QAC7B,CAAC;QACD,cAAc,CAAC,OAAO,CAAC,CAAA;IACzB,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,aAAa,CAClB,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE;YAChD,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE;gBACpB,aAAa,EAAE,CAAA;YACjB,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,EACF,MAAM,CAAC,eAAe,CACpB,wBAAwB,EACxB,GAAG,EAAE;YACH,aAAa,EAAE,CAAA;YACf,OAAO,KAAK,CAAA;QACd,CAAC,EACD,WAAW,CACZ,EACD,MAAM,CAAC,eAAe,CACpB,gBAAgB,EAChB,GAAG,EAAE;YACH,OAAO,KAAK,CAAA;QACd,CAAC,EACD,WAAW,CACZ,EACD,MAAM,CAAC,eAAe,CACpB,gBAAgB,EAChB,GAAG,EAAE;YACH,OAAO,KAAK,CAAA;QACd,CAAC,EACD,WAAW,CACZ,CACF,CAAA;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAA;IAE3B,OAAO,CACL,oBAAC,OAAO,IAAC,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,UAAU;QAC1C,oBAAC,IAAI,IACH,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,eAAe,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAA;YACrD,CAAC,aACQ,MAAM,QAGV;QACP,oBAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,eAAe,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAA;YACvD,CAAC,aACQ,QAAQ,QAGV;QACT,oBAAC,YAAY,eACF,SAAS,KAAK,IAAI,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,EAAE;YAEjC,oBAAC,IAAI,IAAC,MAAM,EAAC,SAAS,GAAG,CACZ;QAEf,oBAAC,IAAI,eACM,MAAM,EACf,OAAO,EAAE,GAAG,EAAE,CACZ,CAAC,MAAM;gBACL,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,mBAAmB,EAAE,UAAU,CAAC;gBACzD,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,mBAAmB,EAAE,IAAI,CAAC;YAGvD,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;gBACzB,oBAAC,IAAI,IAAC,MAAM,EAAC,MAAM,GAAG,CAClB;YACN,oBAAC,SAAS,IACR,QAAQ,EAAE,CAAC,CAAC,EACZ,GAAG,EAAE,WAAW,EAChB,WAAW,EAAC,WAAW,EACvB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACd,MAAM,CAAC,eAAe,CAAC,mBAAmB,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;gBAC7D,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,GACnC;YACF,oBAAC,GAAG,IAAC,OAAO,EAAE,aAAa;gBACzB,oBAAC,QAAQ,IAAC,MAAM,EAAC,YAAY,GAAG,CAC5B,CACD,CACC,CACX,CAAA;AACH,CAAC;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAsB;;;;;;;;;;;sBAWhC,KAAK,CAAC,MAAM,CAAC,OAAO;;;IAGtC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAChB,OAAO;IACP;wBACoB,KAAK,CAAC,MAAM,CAAC,UAAU;GAC5C;;;;;MAKG,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAChB,OAAO;IACP;0BACoB,KAAK,CAAC,MAAM,CAAC,UAAU;KAC5C;;CAEJ,CAAA;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;;CAEhC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;;;;CAIlC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;CAI1B,CAAA;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;;IAE7B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,IAAI,eAAe;;;;;;;IAO3C,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAChB,OAAO;IACP;wBACoB,KAAK,CAAC,MAAM,CAAC,UAAU;;;;;GAK5C;CACF,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;sBACP,KAAK,CAAC,MAAM,CAAC,eAAe;;;;;;;wBAO1B,KAAK,CAAC,MAAM,CAAC,QAAQ;;CAE5C,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;;;;yBAWL,KAAK,CAAC,MAAM,CAAC,SAAS;;;;yBAItB,KAAK,CAAC,MAAM,CAAC,eAAe;;CAEpD,CAAA","sourcesContent":["import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'\nimport {\n $isListNode,\n INSERT_UNORDERED_LIST_COMMAND,\n ListNode,\n REMOVE_LIST_COMMAND,\n} from '@lexical/list'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { $isHeadingNode } from '@lexical/rich-text'\nimport { $isAtNodeEnd } from '@lexical/selection'\nimport { $getNearestNodeOfType, mergeRegister } from '@lexical/utils'\nimport {\n $getSelection,\n $isRangeSelection,\n CAN_REDO_COMMAND,\n CAN_UNDO_COMMAND,\n FORMAT_TEXT_COMMAND,\n RangeSelection,\n SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\nimport { theme } from '../../theme'\n\nconst LowPriority = 1\n\nfunction getSelectedNode(selection: RangeSelection) {\n const anchor = selection.anchor\n const focus = selection.focus\n const anchorNode = selection.anchor.getNode()\n const focusNode = selection.focus.getNode()\n if (anchorNode === focusNode) {\n return anchorNode\n }\n const isBackward = selection.isBackward()\n if (isBackward) {\n return $isAtNodeEnd(focus) ? anchorNode : focusNode\n } else {\n return $isAtNodeEnd(anchor) ? focusNode : anchorNode\n }\n}\n\nexport default function ToolbarPlugin() {\n const [editor] = useLexicalComposerContext()\n const toolbarRef = useRef(null)\n const [blockType, setBlockType] = useState('paragraph')\n const [isLink, setIsLink] = useState(false)\n const [isBold, setIsBold] = useState(false)\n const [isItalic, setIsItalic] = useState(false)\n const [linkURL, setLinkURL] = useState('')\n const [prevLinkURL, setPrevLinkURL] = useState('')\n\n const formatBulletList = () => {\n if (blockType !== 'ul') {\n editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\n } else {\n editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)\n }\n }\n\n const updateToolbar = useCallback(() => {\n const selection = $getSelection()\n if ($isRangeSelection(selection)) {\n const anchorNode = selection.anchor.getNode()\n const element =\n anchorNode.getKey() === 'root'\n ? anchorNode\n : anchorNode.getTopLevelElementOrThrow()\n const elementKey = element.getKey()\n const elementDOM = editor.getElementByKey(elementKey)\n if (elementDOM !== null) {\n if ($isListNode(element)) {\n const parentList = $getNearestNodeOfType(anchorNode, ListNode)\n const type = parentList ? parentList.getTag() : element.getTag()\n setBlockType(type)\n } else {\n const type = $isHeadingNode(element)\n ? element.getTag()\n : element.getType()\n setBlockType(type)\n }\n }\n // Update text format\n setIsBold(selection.hasFormat('bold'))\n setIsItalic(selection.hasFormat('italic'))\n\n // Update links\n const node = getSelectedNode(selection)\n const parent = node.getParent()\n if ($isLinkNode(parent)) {\n setIsLink(true)\n setLinkURL(parent.getURL())\n } else if ($isLinkNode(node)) {\n setIsLink(true)\n setLinkURL(node.getURL())\n } else {\n setIsLink(false)\n setLinkURL('')\n }\n }\n }, [editor])\n\n const openNewWindow = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation()\n try {\n window.open(linkURL, '_blank')\n } catch (error) {\n console.warn('Failed to open invalid URL: ', error)\n }\n }\n\n const urlInputRef = useRef<HTMLInputElement | null>(null)\n\n useEffect(() => {\n if (prevLinkURL !== '' && isLink && urlInputRef.current) {\n urlInputRef.current.focus()\n }\n setPrevLinkURL(linkURL)\n }, [linkURL])\n\n useEffect(() => {\n return mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n updateToolbar()\n })\n }),\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n updateToolbar()\n return false\n },\n LowPriority,\n ),\n editor.registerCommand(\n CAN_UNDO_COMMAND,\n () => {\n return false\n },\n LowPriority,\n ),\n editor.registerCommand(\n CAN_REDO_COMMAND,\n () => {\n return false\n },\n LowPriority,\n ),\n )\n }, [editor, updateToolbar])\n\n return (\n <Toolbar className=\"toolbar\" ref={toolbarRef}>\n <Bold\n onClick={() => {\n editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\n }}\n $active={isBold}\n >\n B\n </Bold>\n <Italic\n onClick={() => {\n editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\n }}\n $active={isItalic}\n >\n i\n </Italic>\n <EditorButton\n $active={blockType === 'ul'}\n onClick={() => formatBulletList()}\n >\n <Icon render=\"bullets\" />\n </EditorButton>\n\n <Link\n $active={isLink}\n onClick={() =>\n !isLink\n ? editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://')\n : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n }\n >\n <Box ml={{ custom: '-4px' }}>\n <Icon render=\"link\" />\n </Box>\n <LinkInput\n tabIndex={-1}\n ref={urlInputRef}\n placeholder=\"Enter url\"\n value={linkURL}\n onChange={(e) => {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, e.target.value)\n }}\n onClick={(e) => e.stopPropagation()}\n />\n <Box onClick={openNewWindow}>\n <LinkOpen render=\"new-window\" />\n </Box>\n </Link>\n </Toolbar>\n )\n}\n\nconst EditorButton = styled(Box)<{ $active: boolean }>`\n height: 40px;\n width: 40px;\n line-height: 50px;\n padding: 12px;\n border-radius: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 24px;\n cursor: pointer;\n background-color: ${theme.colors.custard};\n flex-shrink: 0;\n\n ${({ $active }) =>\n $active &&\n `\n background-color: ${theme.colors.fairyFloss};\n `}\n\n :hover {\n filter: brightness(0.95);\n\n ${({ $active }) =>\n $active &&\n `\n background-color: ${theme.colors.fairyFloss};\n `}\n }\n`\n\nconst Bold = styled(EditorButton)`\n font-weight: 500;\n`\n\nconst Italic = styled(EditorButton)`\n font-style: italic;\n font-weight: 500;\n text-indent: -4px;\n`\n\nconst Toolbar = styled(Box)`\n display: flex;\n flex-direction: row;\n gap: 8px;\n`\n\nconst Link = styled(EditorButton)`\n transition: width 0.3s;\n ${({ $active }) => $active && `width: 360px;`}\n justify-content: left;\n overflow: hidden;\n gap: 12px;\n padding-right: 5px;\n flex-shrink: 1;\n\n ${({ $active }) =>\n $active &&\n `\n background-color: ${theme.colors.fairyFloss};\n\n :hover {\n filter: none;\n }\n `}\n`\n\nconst LinkOpen = styled(Icon)`\n background-color: ${theme.colors.marshmallowPink};\n height: 32px;\n width: 32px;\n border-radius: 20px;\n padding: 6px;\n\n :hover {\n background-color: ${theme.colors.lollipop};\n }\n`\n\nconst LinkInput = styled.input`\n width: inherit;\n height: 32px;\n border: none;\n border-radius: 20px;\n padding-left: 12px;\n padding-right: 12px;\n font-size: 16px;\n min-width: 0;\n\n :hover {\n outline: 2px solid ${theme.colors.bubblegum};\n }\n\n :focus {\n outline: 2px solid ${theme.colors.marshmallowPink};\n }\n`\n"]}
|
|
1
|
+
{"version":3,"file":"ToolbarPlugin.js","sourceRoot":"","sources":["../../../src/RichTextEditor/plugins/ToolbarPlugin.tsx"],"names":[],"mappings":"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","sourcesContent":["import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'\nimport {\n $isListNode,\n INSERT_UNORDERED_LIST_COMMAND,\n ListNode,\n REMOVE_LIST_COMMAND,\n} from '@lexical/list'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport { $isHeadingNode } from '@lexical/rich-text'\nimport { $isAtNodeEnd } from '@lexical/selection'\nimport { $getNearestNodeOfType, mergeRegister } from '@lexical/utils'\nimport {\n $getSelection,\n $isRangeSelection,\n CAN_REDO_COMMAND,\n CAN_UNDO_COMMAND,\n FORMAT_TEXT_COMMAND,\n RangeSelection,\n SELECTION_CHANGE_COMMAND,\n} from 'lexical'\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\n\nconst LowPriority = 1\n\nfunction getSelectedNode(selection: RangeSelection) {\n const anchor = selection.anchor\n const focus = selection.focus\n const anchorNode = selection.anchor.getNode()\n const focusNode = selection.focus.getNode()\n if (anchorNode === focusNode) {\n return anchorNode\n }\n const isBackward = selection.isBackward()\n if (isBackward) {\n return $isAtNodeEnd(focus) ? anchorNode : focusNode\n } else {\n return $isAtNodeEnd(anchor) ? focusNode : anchorNode\n }\n}\n\nexport default function ToolbarPlugin() {\n const [editor] = useLexicalComposerContext()\n const toolbarRef = useRef(null)\n const [blockType, setBlockType] = useState('paragraph')\n const [isLink, setIsLink] = useState(false)\n const [isBold, setIsBold] = useState(false)\n const [isItalic, setIsItalic] = useState(false)\n const [linkURL, setLinkURL] = useState('')\n const [prevLinkURL, setPrevLinkURL] = useState('')\n\n const formatBulletList = () => {\n if (blockType !== 'ul') {\n editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\n } else {\n editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)\n }\n }\n\n const updateToolbar = useCallback(() => {\n const selection = $getSelection()\n if ($isRangeSelection(selection)) {\n const anchorNode = selection.anchor.getNode()\n const element =\n anchorNode.getKey() === 'root'\n ? anchorNode\n : anchorNode.getTopLevelElementOrThrow()\n const elementKey = element.getKey()\n const elementDOM = editor.getElementByKey(elementKey)\n if (elementDOM !== null) {\n if ($isListNode(element)) {\n const parentList = $getNearestNodeOfType(anchorNode, ListNode)\n const type = parentList ? parentList.getTag() : element.getTag()\n setBlockType(type)\n } else {\n const type = $isHeadingNode(element)\n ? element.getTag()\n : element.getType()\n setBlockType(type)\n }\n }\n // Update text format\n setIsBold(selection.hasFormat('bold'))\n setIsItalic(selection.hasFormat('italic'))\n\n // Update links\n const node = getSelectedNode(selection)\n const parent = node.getParent()\n if ($isLinkNode(parent)) {\n setIsLink(true)\n setLinkURL(parent.getURL())\n } else if ($isLinkNode(node)) {\n setIsLink(true)\n setLinkURL(node.getURL())\n } else {\n setIsLink(false)\n setLinkURL('')\n }\n }\n }, [editor])\n\n const openNewWindow = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation()\n try {\n window.open(linkURL, '_blank')\n } catch (error) {\n console.warn('Failed to open invalid URL: ', error)\n }\n }\n\n const urlInputRef = useRef<HTMLInputElement | null>(null)\n\n useEffect(() => {\n if (prevLinkURL !== '' && isLink && urlInputRef.current) {\n urlInputRef.current.focus()\n }\n setPrevLinkURL(linkURL)\n }, [linkURL])\n\n useEffect(() => {\n return mergeRegister(\n editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n updateToolbar()\n })\n }),\n editor.registerCommand(\n SELECTION_CHANGE_COMMAND,\n () => {\n updateToolbar()\n return false\n },\n LowPriority,\n ),\n editor.registerCommand(\n CAN_UNDO_COMMAND,\n () => {\n return false\n },\n LowPriority,\n ),\n editor.registerCommand(\n CAN_REDO_COMMAND,\n () => {\n return false\n },\n LowPriority,\n ),\n )\n }, [editor, updateToolbar])\n\n return (\n <Toolbar className=\"toolbar\" ref={toolbarRef}>\n <Bold\n onClick={() => {\n editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\n }}\n $active={isBold}\n >\n B\n </Bold>\n <Italic\n onClick={() => {\n editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\n }}\n $active={isItalic}\n >\n i\n </Italic>\n <EditorButton\n $active={blockType === 'ul'}\n onClick={() => formatBulletList()}\n >\n <Icon render=\"bullets\" />\n </EditorButton>\n\n <Link\n $active={isLink}\n onClick={() =>\n !isLink\n ? editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://')\n : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\n }\n >\n <Box ml={{ custom: '-4px' }}>\n <Icon render=\"link\" />\n </Box>\n <LinkInput\n tabIndex={-1}\n ref={urlInputRef}\n placeholder=\"Enter url\"\n value={linkURL}\n onChange={(e) => {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, e.target.value)\n }}\n onClick={(e) => e.stopPropagation()}\n />\n <Box onClick={openNewWindow}>\n <LinkOpen render=\"new-window\" />\n </Box>\n </Link>\n </Toolbar>\n )\n}\n\nconst EditorButton = styled(Box)<{ $active: boolean }>`\n height: 40px;\n width: 40px;\n line-height: 50px;\n padding: 12px;\n border-radius: 25px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 24px;\n cursor: pointer;\n background-color: ${({ theme }) => theme.color.surface.base[300]};\n flex-shrink: 0;\n\n ${({ $active, theme }) =>\n $active &&\n `\n background-color: ${theme.color.interactive.primary.hover};\n `}\n`\n\nconst Bold = styled(EditorButton)`\n font-weight: 500;\n`\n\nconst Italic = styled(EditorButton)`\n font-style: italic;\n font-weight: 500;\n text-indent: -4px;\n`\n\nconst Toolbar = styled(Box)`\n display: flex;\n flex-direction: row;\n gap: 8px;\n`\n\nconst Link = styled(EditorButton)`\n transition: width 0.3s;\n ${({ $active }) => $active && `width: 360px;`}\n justify-content: left;\n overflow: hidden;\n gap: 12px;\n padding-right: 5px;\n flex-shrink: 1;\n\n ${({ $active, theme }) =>\n $active &&\n `\n background-color: ${theme.color.interactive.primary.hover};\n\n :hover {\n filter: none;\n }\n `}\n`\n\nconst LinkOpen = styled(Icon)`\n background-color: ${({ theme }) => theme.color.interactive.tertiary.base};\n height: 32px;\n width: 32px;\n border-radius: 20px;\n padding: 6px;\n\n :hover {\n background-color: ${({ theme }) => theme.color.interactive.tertiary.active};\n }\n`\n\nconst LinkInput = styled.input`\n width: inherit;\n height: 32px;\n border: none;\n border-radius: 20px;\n padding-left: 12px;\n padding-right: 12px;\n font-size: 16px;\n min-width: 0;\n background-color: white;\n\n :hover {\n outline: 2px solid ${({ theme }) => theme.color.surface.brand[200]};\n }\n\n :focus {\n outline: 2px solid ${({ theme }) => theme.color.surface.brand[300]};\n }\n`\n"]}
|