@mrshmllw/smores-react 15.1.18 → 15.1.20

package/dist/RichText/RichText.js

@@ -17,13 +17,13 @@ export const RichText = forwardRef(function RichText({ htmlString, ...props }, r
 });
 const WarningText = styled(Box) `
   background-color: ${({ theme }) => theme.color.feedback.negative[200]};
-  padding: 16px;
+  padding: ${({ theme }) => theme.space[200]};
   border-radius: 16px;
   width: fit-content;
   display: flex;
   align-items: center;
-  gap: 16px;
-  margin-bottom: 16px;
+  gap: ${({ theme }) => theme.space[200]};
+  margin-bottom: ${({ theme }) => theme.space[200]};
 `;
 const HtmlBox = styled(Box) `
   * {

package/dist/RichText/RichText.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichText.js","sourceRoot":"","sources":["../../src/RichText/RichText.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,WAAW,CAAA;AACjC,OAAO,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,kDAAkD,CAAA;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAM7D,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EAAE,UAAU,EAAE,GAAG,KAAK,EAAiB,EACvC,GAAiC;IAEjC,MAAM,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAA;IAEpD,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;QAC3B,OAAO,CACL,MAAC,GAAG,OAAK,KAAK,aACZ,MAAC,WAAW,eACV,KAAC,aAAa,aAAQ,EAAE,YACtB,KAAC,eAAe,IAAC,IAAI,EAAE,SAAS,GAAI,GACtB,wEAEJ,EACb,UAAU,IACP,CACP,CAAA;IACH,CAAC;SAAM,CAAC;QACN,OAAO,CACL,KAAC,OAAO,IACN,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,GAClD,CACH,CAAA;IACH,CAAC;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;sBACT,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;;;;;;;;CAQtE,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;CAI1B,CAAA","sourcesContent":["import domPurify from 'dompurify'\nimport { ForwardedRef, forwardRef } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { MarginProps } from '../utils/space'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faWarning } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nexport interface RichTextProps extends MarginProps {\n  htmlString: string\n}\n\nexport const RichText = forwardRef(function RichText(\n  { htmlString, ...props }: RichTextProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const sanitisedHtml = domPurify.sanitize(htmlString)\n\n  if (!domPurify.isSupported) {\n    return (\n      <Box {...props}>\n        <WarningText>\n          <IconContainer $size={24}>\n            <FontAwesomeIcon icon={faWarning} />\n          </IconContainer>\n          Your browser is not supported, please upgrade to a newer version\n        </WarningText>\n        {htmlString}\n      </Box>\n    )\n  } else {\n    return (\n      <HtmlBox\n        ref={ref}\n        {...props}\n        dangerouslySetInnerHTML={{ __html: sanitisedHtml }}\n      />\n    )\n  }\n})\n\nconst WarningText = styled(Box)`\n  background-color: ${({ theme }) => theme.color.feedback.negative[200]};\n  padding: 16px;\n  border-radius: 16px;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin-bottom: 16px;\n`\n\nconst HtmlBox = styled(Box)`\n  * {\n    all: revert;\n  }\n`\n"]}
+{"version":3,"file":"RichText.js","sourceRoot":"","sources":["../../src/RichText/RichText.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,WAAW,CAAA;AACjC,OAAO,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,kDAAkD,CAAA;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAA;AAM7D,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EAAE,UAAU,EAAE,GAAG,KAAK,EAAiB,EACvC,GAAiC;IAEjC,MAAM,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAA;IAEpD,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;QAC3B,OAAO,CACL,MAAC,GAAG,OAAK,KAAK,aACZ,MAAC,WAAW,eACV,KAAC,aAAa,aAAQ,EAAE,YACtB,KAAC,eAAe,IAAC,IAAI,EAAE,SAAS,GAAI,GACtB,wEAEJ,EACb,UAAU,IACP,CACP,CAAA;IACH,CAAC;SAAM,CAAC;QACN,OAAO,CACL,KAAC,OAAO,IACN,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,GAClD,CACH,CAAA;IACH,CAAC;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;sBACT,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC;aAC1D,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;SAKnC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;mBACrB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;CACjD,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;CAI1B,CAAA","sourcesContent":["import domPurify from 'dompurify'\nimport { ForwardedRef, forwardRef } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { MarginProps } from '../utils/space'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faWarning } from '@awesome.me/kit-46ca99185c/icons/classic/regular'\nimport { IconContainer } from '../sharedStyles/shared.styles'\n\nexport interface RichTextProps extends MarginProps {\n  htmlString: string\n}\n\nexport const RichText = forwardRef(function RichText(\n  { htmlString, ...props }: RichTextProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const sanitisedHtml = domPurify.sanitize(htmlString)\n\n  if (!domPurify.isSupported) {\n    return (\n      <Box {...props}>\n        <WarningText>\n          <IconContainer $size={24}>\n            <FontAwesomeIcon icon={faWarning} />\n          </IconContainer>\n          Your browser is not supported, please upgrade to a newer version\n        </WarningText>\n        {htmlString}\n      </Box>\n    )\n  } else {\n    return (\n      <HtmlBox\n        ref={ref}\n        {...props}\n        dangerouslySetInnerHTML={{ __html: sanitisedHtml }}\n      />\n    )\n  }\n})\n\nconst WarningText = styled(Box)`\n  background-color: ${({ theme }) => theme.color.feedback.negative[200]};\n  padding: ${({ theme }) => theme.space[200]};\n  border-radius: 16px;\n  width: fit-content;\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.space[200]};\n  margin-bottom: ${({ theme }) => theme.space[200]};\n`\n\nconst HtmlBox = styled(Box)`\n  * {\n    all: revert;\n  }\n`\n"]}

package/dist/RichTextEditor/RichTextEditor.js

@@ -50,11 +50,11 @@ export const RichTextEditor = ({ defaultValue, height, outline = false, maxHeigh
 };
 const Editor = styled(Box) `
   .editor-input {
-    margin-top: 12px;
+    margin-top: ${({ theme }) => theme.space[150]};
     background-color: ${({ theme }) => theme.color.background['000']};
     border-radius: 12px;
     border: 2px solid ${({ theme }) => theme.color.surface.base[400]};
-    padding: 16px;
+    padding: ${({ theme }) => theme.space[200]};
     overflow: scroll;
     outline-color: ${({ theme }) => theme.color.border.base};
     max-height: ${({ $maxHeight }) => $maxHeight};
@@ -70,7 +70,7 @@ const Editor = styled(Box) `
 const Container = styled(Box) `
   background-color: ${({ theme }) => theme.color.background[100]};
   border-radius: 16px;
-  padding: 12px;
+  padding: ${({ theme }) => theme.space[150]};
   ${({ $outline, theme }) => $outline && `border: 2px solid ${theme.color.surface.base[400]}`}
 `;
 //# sourceMappingURL=RichTextEditor.js.map

package/dist/RichTextEditor/RichTextEditor.js.map

@@ -1 +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 { 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"]}
+{"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 { 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: ${({ theme }) => theme.space[150]};\n    background-color: ${({ theme }) => theme.color.background['000']};\n    border-radius: 12px;\n    border: 2px solid ${({ theme }) => theme.color.surface.base[400]};\n    padding: ${({ theme }) => theme.space[200]};\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: ${({ theme }) => theme.space[150]};\n  ${({ $outline, theme }) =>\n    $outline && `border: 2px solid ${theme.color.surface.base[400]}`}\n`\n"]}

package/dist/RichTextEditor/plugins/ToolbarPlugin.js

@@ -132,7 +132,7 @@ const EditorButton = styled(Box) `
   height: 40px;
   width: 40px;
   line-height: 50px;
-  padding: 12px;
+  padding: ${({ theme }) => theme.space[150]};
   border-radius: 25px;
   display: flex;
   justify-content: center;
@@ -158,14 +158,14 @@ const Italic = styled(EditorButton) `
 const Toolbar = styled(Box) `
   display: flex;
   flex-direction: row;
-  gap: 8px;
+  gap: ${({ theme }) => theme.space[100]};
 `;
 const Link = styled(EditorButton) `
   transition: width 0.3s;
   ${({ $active }) => $active && `width: 360px;`}
   justify-content: left;
   overflow: hidden;
-  gap: 12px;
+  gap: ${({ theme }) => theme.space[150]};
   padding-right: 5px;
   flex-shrink: 1;
 
@@ -194,8 +194,8 @@ const LinkInput = styled.input `
   height: 32px;
   border: none;
   border-radius: 20px;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-left: ${({ theme }) => theme.space[150]};
+  padding-right: ${({ theme }) => theme.space[150]};
   font-size: 16px;
   min-width: 0;
   background-color: white;

package/dist/RichTextEditor/plugins/ToolbarPlugin.js.map

@@ -1 +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 { MouseEvent } from 'react'\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 { useCallback, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../../Box'\nimport { IconContainer } from '../../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n  faArrowUpRightFromSquare,\n  faLinkSimple,\n  faList,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\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: 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        <IconContainer $size={24}>\n          <FontAwesomeIcon icon={faList} />\n        </IconContainer>\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' }} mt={{ custom: '6px' }}>\n          <IconContainer $size={24}>\n            <FontAwesomeIcon icon={faLinkSimple} />\n          </IconContainer>\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 $size={24}>\n            <FontAwesomeIcon icon={faArrowUpRightFromSquare} />\n          </LinkOpen>\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(IconContainer)`\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"]}
+{"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 { MouseEvent } from 'react'\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 { useCallback, useEffect, useRef, useState } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../../Box'\nimport { IconContainer } from '../../sharedStyles/shared.styles'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n  faArrowUpRightFromSquare,\n  faLinkSimple,\n  faList,\n} from '@awesome.me/kit-46ca99185c/icons/classic/regular'\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: 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        <IconContainer $size={24}>\n          <FontAwesomeIcon icon={faList} />\n        </IconContainer>\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' }} mt={{ custom: '6px' }}>\n          <IconContainer $size={24}>\n            <FontAwesomeIcon icon={faLinkSimple} />\n          </IconContainer>\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 $size={24}>\n            <FontAwesomeIcon icon={faArrowUpRightFromSquare} />\n          </LinkOpen>\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: ${({ theme }) => theme.space[150]};\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: ${({ theme }) => theme.space[100]};\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: ${({ theme }) => theme.space[150]};\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(IconContainer)`\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: ${({ theme }) => theme.space[150]};\n  padding-right: ${({ theme }) => theme.space[150]};\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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "15.1.18",
+  "version": "15.1.20",
   "description": "Collection of React components used by Marshmallow Technology",
   "main": "./dist/index.js",
   "type": "module",