@mrshmllw/smores-react 10.7.0-crumbs-feature-vite-bundling.2 → 10.7.1

package/dist/RichText/RichText.js

@@ -0,0 +1,35 @@
+import domPurify from 'dompurify';
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { theme } from '../theme';
+export const RichText = forwardRef(function RichText({ htmlString, ...props }, ref) {
+    const sanitisedHtml = domPurify.sanitize(htmlString);
+    if (!domPurify.isSupported) {
+        return (React.createElement(Box, { ...props },
+            React.createElement(WarningText, null,
+                React.createElement(Icon, { render: "warning" }),
+                "Your browser is not supported, please upgrade to a newer version"),
+            htmlString));
+    }
+    else {
+        return (React.createElement(HtmlBox, { ref: ref, ...props, dangerouslySetInnerHTML: { __html: sanitisedHtml } }));
+    }
+});
+const WarningText = styled(Box) `
+  background-color: ${theme.colors.sherbert};
+  padding: 16px;
+  border-radius: 16px;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+`;
+const HtmlBox = styled(Box) `
+  * {
+    all: revert;
+  }
+`;
+//# sourceMappingURL=RichText.js.map

package/dist/RichText/RichText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichText.js","sourceRoot":"","sources":["../../src/RichText/RichText.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,WAAW,CAAA;AACjC,OAAO,KAAK,EAAE,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAA;AACvD,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAOhC,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,oBAAC,GAAG,OAAK,KAAK;YACZ,oBAAC,WAAW;gBACV,oBAAC,IAAI,IAAC,MAAM,EAAC,SAAS,GAAG;mFAEb;YACb,UAAU,CACP,CACP,CAAA;IACH,CAAC;SAAM,CAAC;QACN,OAAO,CACL,oBAAC,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,KAAK,CAAC,MAAM,CAAC,QAAQ;;;;;;;;CAQ1C,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;CAI1B,CAAA","sourcesContent":["import domPurify from 'dompurify'\nimport React, { ForwardedRef, forwardRef } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { theme } from '../theme'\nimport { MarginProps } from '../utils/space'\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          <Icon render=\"warning\" />\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.colors.sherbert};\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"]}

package/dist/RichText/index.js

@@ -0,0 +1,2 @@
+export { RichText } from './RichText';
+//# sourceMappingURL=index.js.map

package/dist/RichText/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/RichText/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA","sourcesContent":["export { RichText } from './RichText'\n"]}

package/dist/RichTextEditor/RichTextEditor.js

@@ -0,0 +1,88 @@
+import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import { $generateNodesFromDOM } from '@lexical/html';
+import { AutoLinkNode, LinkNode } from '@lexical/link';
+import { ListItemNode, ListNode } from '@lexical/list';
+import { TRANSFORMERS } from '@lexical/markdown';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import DOMPurify from 'dompurify';
+import { $getRoot } from 'lexical';
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { theme } from '../theme';
+import CustomAutoLinkPlugin from './plugins/AutoLinkPlugin';
+import { EditorDefaultUpdatePlugin } from './plugins/EditorDefaultUpdatePlugin';
+import { EditorUpdatePlugin } from './plugins/EditorUpdatePlugin';
+import ToolbarPlugin from './plugins/ToolbarPlugin';
+import { appendNodes } from './utils';
+export const RichTextEditor = ({ defaultValue, height, outline = false, maxHeight = '300px', onChange, ...props }) => {
+    const defaultEditorState = (editor) => {
+        const parser = new DOMParser();
+        const dom = parser.parseFromString(defaultValue ? DOMPurify.sanitize(defaultValue) : '<p></p>', 'text/html');
+        const nodes = $generateNodesFromDOM(editor, dom);
+        const root = $getRoot();
+        root.clear();
+        appendNodes(root, nodes);
+    };
+    const initialConfig = {
+        editorState: defaultEditorState,
+        namespace: 'MarshmallowRichTextEditor',
+        onError: (e) => console.log(e),
+        nodes: [
+            AutoLinkNode,
+            LinkNode,
+            ListNode,
+            ListItemNode,
+            HeadingNode,
+            QuoteNode,
+            CodeHighlightNode,
+            CodeNode,
+        ],
+    };
+    return (React.createElement(Container, { "$outline": outline, ...props },
+        React.createElement(Editor, { "$maxHeight": maxHeight, "$height": height },
+            React.createElement(LexicalComposer, { initialConfig: initialConfig },
+                React.createElement(ToolbarPlugin, null),
+                React.createElement(RichTextPlugin, { contentEditable: React.createElement(ContentEditable, { className: "editor-input" }), placeholder: React.createElement("div", null), ErrorBoundary: LexicalErrorBoundary }),
+                React.createElement(LinkPlugin, null),
+                React.createElement(ListPlugin, null),
+                React.createElement(HistoryPlugin, null),
+                React.createElement(CustomAutoLinkPlugin, null),
+                React.createElement(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }),
+                React.createElement(EditorUpdatePlugin, { onChange: onChange }),
+                React.createElement(EditorDefaultUpdatePlugin, { defaultValue: defaultValue })))));
+};
+const Editor = styled(Box) `
+  .editor-input {
+    margin-top: 12px;
+    background-color: ${theme.colors.cream};
+    border-radius: 12px;
+    border: 2px solid ${theme.colors.oatmeal};
+    padding: 16px;
+    overflow: scroll;
+    outline-color: ${theme.colors.marzipan};
+    max-height: ${({ $maxHeight }) => $maxHeight};
+    ${({ $height }) => $height && `height: ${$height}`};
+    min-height: 84px;
+
+    * {
+      all: revert;
+      outline: none;
+    }
+  }
+`;
+const Container = styled(Box) `
+  background-color: ${theme.colors.coconut};
+  border-radius: 16px;
+  padding: 12px;
+  ${({ $outline }) => $outline && `border: 2px solid ${theme.colors.oatmeal}`}
+`;
+//# sourceMappingURL=RichTextEditor.js.map

package/dist/RichTextEditor/RichTextEditor.js.map

@@ -0,0 +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 { theme } from '../theme'\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.colors.cream};\n    border-radius: 12px;\n    border: 2px solid ${theme.colors.oatmeal};\n    padding: 16px;\n    overflow: scroll;\n    outline-color: ${theme.colors.marzipan};\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.colors.coconut};\n  border-radius: 16px;\n  padding: 12px;\n  ${({ $outline }) => $outline && `border: 2px solid ${theme.colors.oatmeal}`}\n`\n"]}

package/dist/RichTextEditor/index.js

@@ -0,0 +1,2 @@
+export { RichTextEditor } from './RichTextEditor';
+//# sourceMappingURL=index.js.map

package/dist/RichTextEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/RichTextEditor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA","sourcesContent":["export { RichTextEditor } from './RichTextEditor'\n"]}

package/dist/RichTextEditor/plugins/AutoLinkPlugin.d.ts

@@ -1,2 +1,2 @@
-import { default as React } from 'react';
+import React from 'react';
 export default function CustomAutoLinkPlugin(): React.JSX.Element;

package/dist/RichTextEditor/plugins/AutoLinkPlugin.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin';
+const URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+const EMAIL_MATCHER = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+const MATCHERS = [
+    (text) => {
+        const match = URL_MATCHER.exec(text);
+        return (match && {
+            index: match.index,
+            length: match[0].length,
+            text: match[0],
+            url: match[0],
+        });
+    },
+    (text) => {
+        const match = EMAIL_MATCHER.exec(text);
+        return (match && {
+            index: match.index,
+            length: match[0].length,
+            text: match[0],
+            url: `mailto:${match[0]}`,
+        });
+    },
+];
+export default function CustomAutoLinkPlugin() {
+    return React.createElement(AutoLinkPlugin, { matchers: MATCHERS });
+}
+//# sourceMappingURL=AutoLinkPlugin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AutoLinkPlugin.js","sourceRoot":"","sources":["../../../src/RichTextEditor/plugins/AutoLinkPlugin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAA;AAErE,MAAM,WAAW,GACf,iHAAiH,CAAA;AAEnH,MAAM,aAAa,GACjB,qJAAqJ,CAAA;AAEvJ,MAAM,QAAQ,GAAG;IACf,CAAC,IAAY,EAAE,EAAE;QACf,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACpC,OAAO,CACL,KAAK,IAAI;YACP,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM;YACvB,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;YACd,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;SACd,CACF,CAAA;IACH,CAAC;IACD,CAAC,IAAY,EAAE,EAAE;QACf,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACtC,OAAO,CACL,KAAK,IAAI;YACP,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM;YACvB,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;YACd,GAAG,EAAE,UAAU,KAAK,CAAC,CAAC,CAAC,EAAE;SAC1B,CACF,CAAA;IACH,CAAC;CACF,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC1C,OAAO,oBAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAA;AAC/C,CAAC","sourcesContent":["import React from 'react'\n\nimport { AutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin'\n\nconst URL_MATCHER =\n  /((https?:\\/\\/(www\\.)?)|(www\\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/\n\nconst EMAIL_MATCHER =\n  /(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))/\n\nconst MATCHERS = [\n  (text: string) => {\n    const match = URL_MATCHER.exec(text)\n    return (\n      match && {\n        index: match.index,\n        length: match[0].length,\n        text: match[0],\n        url: match[0],\n      }\n    )\n  },\n  (text: string) => {\n    const match = EMAIL_MATCHER.exec(text)\n    return (\n      match && {\n        index: match.index,\n        length: match[0].length,\n        text: match[0],\n        url: `mailto:${match[0]}`,\n      }\n    )\n  },\n]\n\nexport default function CustomAutoLinkPlugin() {\n  return <AutoLinkPlugin matchers={MATCHERS} />\n}\n"]}

package/dist/RichTextEditor/plugins/EditorDefaultUpdatePlugin.js

@@ -0,0 +1,21 @@
+import { $generateNodesFromDOM } from '@lexical/html';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import DOMPurify from 'dompurify';
+import { $getRoot } from 'lexical';
+import { useEffect } from 'react';
+import { appendNodes } from '../utils';
+export const EditorDefaultUpdatePlugin = ({ defaultValue }) => {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        editor.update(() => {
+            const parser = new DOMParser();
+            const dom = parser.parseFromString(defaultValue ? DOMPurify.sanitize(defaultValue) : '<p></p>', 'text/html');
+            const root = $getRoot();
+            root.clear();
+            const nodes = $generateNodesFromDOM(editor, dom);
+            appendNodes(root, nodes);
+        });
+    }, [defaultValue]);
+    return null;
+};
+//# sourceMappingURL=EditorDefaultUpdatePlugin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorDefaultUpdatePlugin.js","sourceRoot":"","sources":["../../../src/RichTextEditor/plugins/EditorDefaultUpdatePlugin.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAA;AACjF,OAAO,SAAS,MAAM,WAAW,CAAA;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAM,SAAS,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAEtC,MAAM,CAAC,MAAM,yBAAyB,GAEjC,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;IACxB,MAAM,CAAC,MAAM,CAAC,GAAG,yBAAyB,EAAE,CAAA;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE;YACjB,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAA;YAC9B,MAAM,GAAG,GAAG,MAAM,CAAC,eAAe,CAChC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,EAC3D,WAAW,CACZ,CAAA;YACD,MAAM,IAAI,GAAG,QAAQ,EAAE,CAAA;YACvB,IAAI,CAAC,KAAK,EAAE,CAAA;YACZ,MAAM,KAAK,GAAG,qBAAqB,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;YAChD,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;QAC1B,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,IAAI,CAAA;AACb,CAAC,CAAA","sourcesContent":["import { $generateNodesFromDOM } from '@lexical/html'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport DOMPurify from 'dompurify'\nimport { $getRoot } from 'lexical'\nimport { FC, useEffect } from 'react'\nimport { appendNodes } from '../utils'\n\nexport const EditorDefaultUpdatePlugin: FC<{\n  defaultValue?: string\n}> = ({ defaultValue }) => {\n  const [editor] = useLexicalComposerContext()\n\n  useEffect(() => {\n    editor.update(() => {\n      const parser = new DOMParser()\n      const dom = parser.parseFromString(\n        defaultValue ? DOMPurify.sanitize(defaultValue) : '<p></p>',\n        'text/html',\n      )\n      const root = $getRoot()\n      root.clear()\n      const nodes = $generateNodesFromDOM(editor, dom)\n      appendNodes(root, nodes)\n    })\n  }, [defaultValue])\n\n  return null\n}\n"]}

package/dist/RichTextEditor/plugins/EditorUpdatePlugin.js

@@ -0,0 +1,18 @@
+import { $generateHtmlFromNodes } from '@lexical/html';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import DOMPurify from 'dompurify';
+import { useEffect } from 'react';
+export const EditorUpdatePlugin = ({ onChange }) => {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return editor.registerUpdateListener((listener) => {
+            if (listener.editorState !== listener.prevEditorState) {
+                editor.update(() => {
+                    onChange(DOMPurify.sanitize($generateHtmlFromNodes(editor, null)));
+                });
+            }
+        });
+    }, []);
+    return null;
+};
+//# sourceMappingURL=EditorUpdatePlugin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorUpdatePlugin.js","sourceRoot":"","sources":["../../../src/RichTextEditor/plugins/EditorUpdatePlugin.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAA;AACjF,OAAO,SAAS,MAAM,WAAW,CAAA;AACjC,OAAO,EAAM,SAAS,EAAE,MAAM,OAAO,CAAA;AAErC,MAAM,CAAC,MAAM,kBAAkB,GAE1B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpB,MAAM,CAAC,MAAM,CAAC,GAAG,yBAAyB,EAAE,CAAA;IAE5C,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,MAAM,CAAC,sBAAsB,CAAC,CAAC,QAAQ,EAAE,EAAE;YAChD,IAAI,QAAQ,CAAC,WAAW,KAAK,QAAQ,CAAC,eAAe,EAAE,CAAC;gBACtD,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE;oBACjB,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,sBAAsB,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAA;gBACpE,CAAC,CAAC,CAAA;YACJ,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,IAAI,CAAA;AACb,CAAC,CAAA","sourcesContent":["import { $generateHtmlFromNodes } from '@lexical/html'\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'\nimport DOMPurify from 'dompurify'\nimport { FC, useEffect } from 'react'\n\nexport const EditorUpdatePlugin: FC<{\n  onChange: (value: string) => void\n}> = ({ onChange }) => {\n  const [editor] = useLexicalComposerContext()\n\n  useEffect(() => {\n    return editor.registerUpdateListener((listener) => {\n      if (listener.editorState !== listener.prevEditorState) {\n        editor.update(() => {\n          onChange(DOMPurify.sanitize($generateHtmlFromNodes(editor, null)))\n        })\n      }\n    })\n  }, [])\n\n  return null\n}\n"]}

package/dist/RichTextEditor/plugins/ToolbarPlugin.d.ts

@@ -1,2 +1,2 @@
-import { default as React } from 'react';
+import React from 'react';
 export default function ToolbarPlugin(): React.JSX.Element;

package/dist/RichTextEditor/plugins/ToolbarPlugin.js

@@ -0,0 +1,227 @@
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
+import { $isListNode, INSERT_UNORDERED_LIST_COMMAND, ListNode, REMOVE_LIST_COMMAND, } from '@lexical/list';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $isHeadingNode } from '@lexical/rich-text';
+import { $isAtNodeEnd } from '@lexical/selection';
+import { $getNearestNodeOfType, mergeRegister } from '@lexical/utils';
+import { $getSelection, $isRangeSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { Box } from '../../Box';
+import { Icon } from '../../Icon';
+import { theme } from '../../theme';
+const LowPriority = 1;
+function getSelectedNode(selection) {
+    const anchor = selection.anchor;
+    const focus = selection.focus;
+    const anchorNode = selection.anchor.getNode();
+    const focusNode = selection.focus.getNode();
+    if (anchorNode === focusNode) {
+        return anchorNode;
+    }
+    const isBackward = selection.isBackward();
+    if (isBackward) {
+        return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+    }
+    else {
+        return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+    }
+}
+export default function ToolbarPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const toolbarRef = useRef(null);
+    const [blockType, setBlockType] = useState('paragraph');
+    const [isLink, setIsLink] = useState(false);
+    const [isBold, setIsBold] = useState(false);
+    const [isItalic, setIsItalic] = useState(false);
+    const [linkURL, setLinkURL] = useState('');
+    const [prevLinkURL, setPrevLinkURL] = useState('');
+    const formatBulletList = () => {
+        if (blockType !== 'ul') {
+            editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+        }
+        else {
+            editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+        }
+    };
+    const updateToolbar = useCallback(() => {
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            const anchorNode = selection.anchor.getNode();
+            const element = anchorNode.getKey() === 'root'
+                ? anchorNode
+                : anchorNode.getTopLevelElementOrThrow();
+            const elementKey = element.getKey();
+            const elementDOM = editor.getElementByKey(elementKey);
+            if (elementDOM !== null) {
+                if ($isListNode(element)) {
+                    const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+                    const type = parentList ? parentList.getTag() : element.getTag();
+                    setBlockType(type);
+                }
+                else {
+                    const type = $isHeadingNode(element)
+                        ? element.getTag()
+                        : element.getType();
+                    setBlockType(type);
+                }
+            }
+            // Update text format
+            setIsBold(selection.hasFormat('bold'));
+            setIsItalic(selection.hasFormat('italic'));
+            // Update links
+            const node = getSelectedNode(selection);
+            const parent = node.getParent();
+            if ($isLinkNode(parent)) {
+                setIsLink(true);
+                setLinkURL(parent.getURL());
+            }
+            else if ($isLinkNode(node)) {
+                setIsLink(true);
+                setLinkURL(node.getURL());
+            }
+            else {
+                setIsLink(false);
+                setLinkURL('');
+            }
+        }
+    }, [editor]);
+    const openNewWindow = (e) => {
+        e.stopPropagation();
+        try {
+            window.open(linkURL, '_blank');
+        }
+        catch (error) {
+            console.warn('Failed to open invalid URL: ', error);
+        }
+    };
+    const urlInputRef = useRef(null);
+    useEffect(() => {
+        if (prevLinkURL !== '' && isLink && urlInputRef.current) {
+            urlInputRef.current.focus();
+        }
+        setPrevLinkURL(linkURL);
+    }, [linkURL]);
+    useEffect(() => {
+        return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                updateToolbar();
+            });
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+            updateToolbar();
+            return false;
+        }, LowPriority), editor.registerCommand(CAN_UNDO_COMMAND, () => {
+            return false;
+        }, LowPriority), editor.registerCommand(CAN_REDO_COMMAND, () => {
+            return false;
+        }, LowPriority));
+    }, [editor, updateToolbar]);
+    return (React.createElement(Toolbar, { className: "toolbar", ref: toolbarRef },
+        React.createElement(Bold, { onClick: () => {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
+            }, "$active": isBold }, "B"),
+        React.createElement(Italic, { onClick: () => {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
+            }, "$active": isItalic }, "i"),
+        React.createElement(EditorButton, { "$active": blockType === 'ul', onClick: () => formatBulletList() },
+            React.createElement(Icon, { render: "bullets" })),
+        React.createElement(Link, { "$active": isLink, onClick: () => !isLink
+                ? editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://')
+                : editor.dispatchCommand(TOGGLE_LINK_COMMAND, null) },
+            React.createElement(Box, { ml: { custom: '-4px' } },
+                React.createElement(Icon, { render: "link" })),
+            React.createElement(LinkInput, { tabIndex: -1, ref: urlInputRef, placeholder: "Enter url", value: linkURL, onChange: (e) => {
+                    editor.dispatchCommand(TOGGLE_LINK_COMMAND, e.target.value);
+                }, onClick: (e) => e.stopPropagation() }),
+            React.createElement(Box, { onClick: openNewWindow },
+                React.createElement(LinkOpen, { render: "new-window" })))));
+}
+const EditorButton = styled(Box) `
+  height: 40px;
+  width: 40px;
+  line-height: 50px;
+  padding: 12px;
+  border-radius: 25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 24px;
+  cursor: pointer;
+  background-color: ${theme.colors.custard};
+  flex-shrink: 0;
+
+  ${({ $active }) => $active &&
+    `
+    background-color: ${theme.colors.fairyFloss};
+  `}
+
+  :hover {
+    filter: brightness(0.95);
+
+    ${({ $active }) => $active &&
+    `
+      background-color: ${theme.colors.fairyFloss};
+    `}
+  }
+`;
+const Bold = styled(EditorButton) `
+  font-weight: 500;
+`;
+const Italic = styled(EditorButton) `
+  font-style: italic;
+  font-weight: 500;
+  text-indent: -4px;
+`;
+const Toolbar = styled(Box) `
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+`;
+const Link = styled(EditorButton) `
+  transition: width 0.3s;
+  ${({ $active }) => $active && `width: 360px;`}
+  justify-content: left;
+  overflow: hidden;
+  gap: 12px;
+  padding-right: 5px;
+  flex-shrink: 1;
+
+  ${({ $active }) => $active &&
+    `
+    background-color: ${theme.colors.fairyFloss};
+
+    :hover {
+      filter: none;
+    }
+  `}
+`;
+const LinkOpen = styled(Icon) `
+  background-color: ${theme.colors.marshmallowPink};
+  height: 32px;
+  width: 32px;
+  border-radius: 20px;
+  padding: 6px;
+
+  :hover {
+    background-color: ${theme.colors.lollipop};
+  }
+`;
+const LinkInput = styled.input `
+  width: inherit;
+  height: 32px;
+  border: none;
+  border-radius: 20px;
+  padding-left: 12px;
+  padding-right: 12px;
+  font-size: 16px;
+  min-width: 0;
+
+  :hover {
+    outline: 2px solid ${theme.colors.bubblegum};
+  }
+
+  :focus {
+    outline: 2px solid ${theme.colors.marshmallowPink};
+  }
+`;
+//# sourceMappingURL=ToolbarPlugin.js.map

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

@@ -0,0 +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'\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"]}

package/dist/RichTextEditor/plugins/index.js

@@ -0,0 +1,2 @@
+export * from './AutoLinkPlugin';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/RichTextEditor/plugins/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA","sourcesContent":["export * from './AutoLinkPlugin'\n"]}

package/dist/RichTextEditor/utils.js

@@ -0,0 +1,15 @@
+import { $createParagraphNode } from 'lexical';
+export const appendNodes = (root, nodes) => {
+    nodes
+        .filter((node) => node.__type !== 'linebreak')
+        .map((node) => {
+        if (node.__type === 'text') {
+            const paragraphNode = $createParagraphNode();
+            paragraphNode.append(node);
+            return paragraphNode;
+        }
+        return node;
+    })
+        .forEach((node) => root.append(node));
+};
+//# sourceMappingURL=utils.js.map

package/dist/RichTextEditor/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/RichTextEditor/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,SAAS,CAAA;AAErE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAc,EAAE,KAAoB,EAAE,EAAE;IAClE,KAAK;SACF,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC;SAC7C,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACZ,IAAI,IAAI,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YAC3B,MAAM,aAAa,GAAG,oBAAoB,EAAE,CAAA;YAC5C,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;YAC1B,OAAO,aAAa,CAAA;QACtB,CAAC;QACD,OAAO,IAAI,CAAA;IACb,CAAC,CAAC;SACD,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;AACzC,CAAC,CAAA","sourcesContent":["import { $createParagraphNode, LexicalNode, RootNode } from 'lexical'\n\nexport const appendNodes = (root: RootNode, nodes: LexicalNode[]) => {\n  nodes\n    .filter((node) => node.__type !== 'linebreak')\n    .map((node) => {\n      if (node.__type === 'text') {\n        const paragraphNode = $createParagraphNode()\n        paragraphNode.append(node)\n        return paragraphNode\n      }\n      return node\n    })\n    .forEach((node) => root.append(node))\n}\n"]}

package/dist/Row/Row.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+import { Text } from '../Text';
+import { theme } from '../theme';
+export const Row = ({ iconLeft, iconLeftColor = 'liquorice', iconRight, iconRightColor = 'marzipan', handleClick, heading, subHeading, type, borderTop = true, borderBottom = true, boldHeading, ...marginProps }) => {
+    const windowWidth = screen.width;
+    return (React.createElement(Container, { "$type": type, "$iconLeft": iconLeft, "$borderTop": borderTop, "$borderBottom": borderBottom, "$iconRight": iconRight, onClick: handleClick, "$boldHeading": boldHeading, ...marginProps },
+        iconLeft && (React.createElement(Icon, { render: iconLeft, size: windowWidth > 768 ? 24 : 18, color: iconLeftColor })),
+        React.createElement(Box, null,
+            React.createElement(Text, { tag: "h1", typo: "base" }, heading),
+            React.createElement(Text, { tag: "p", typo: "desc-small", color: "sesame" }, subHeading)),
+        iconRight && (React.createElement(Icon, { className: "iconRight", render: iconRight, size: 24, rotate: iconRight === 'caret' ? -90 : 0, color: iconRightColor }))));
+};
+const Container = styled(Box)(({ $type, $iconLeft, $borderTop, $borderBottom, $boldHeading }) => css `
+    border-radius: ${($type === 'first' && `16px 16px 0 0`) ||
+    ($type === 'curved' && `16px`) ||
+    ($type === 'last' && `0 0 16px 16px`) ||
+    0};
+
+    border-top: ${$borderTop && $type !== 'curved' && $type !== 'first'
+    ? `1px solid ${theme.colors.oatmeal}`
+    : 'none'};
+    border-bottom: ${$borderBottom && $type !== 'curved' && $type !== 'last'
+    ? `1px solid ${theme.colors.oatmeal}`
+    : 'none'};
+
+    background-color: ${theme.colors.custard};
+    display: grid;
+    grid-template-columns: ${$iconLeft ? `24px auto 24px` : `auto 24px`};
+    padding: 16px;
+    grid-gap: 16px;
+    align-items: center;
+
+    cursor: pointer;
+
+    h1 {
+      font-weight: ${$boldHeading && 500};
+    }
+
+    .iconRight {
+      justify-self: end;
+    }
+
+    @media (min-width: 768px) {
+      grid-gap: 24px;
+    }
+  `);
+//# sourceMappingURL=Row.js.map

package/dist/Row/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/Row/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAiBvC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,QAAQ,EACR,aAAa,GAAG,WAAW,EAC3B,SAAS,EACT,cAAc,GAAG,UAAU,EAC3B,WAAW,EACX,OAAO,EACP,UAAU,EACV,IAAI,EACJ,SAAS,GAAG,IAAI,EAChB,YAAY,GAAG,IAAI,EACnB,WAAW,EACX,GAAG,WAAW,EACf,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAA;IAEhC,OAAO,CACL,oBAAC,SAAS,aACD,IAAI,eACA,QAAQ,gBACP,SAAS,mBACN,YAAY,gBACf,SAAS,EACrB,OAAO,EAAE,WAAW,kBACN,WAAW,KACrB,WAAW;QAEd,QAAQ,IAAI,CACX,oBAAC,IAAI,IACH,MAAM,EAAE,QAAQ,EAChB,IAAI,EAAE,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACjC,KAAK,EAAE,aAAa,GACpB,CACH;QACD,oBAAC,GAAG;YACF,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,IACvB,OAAO,CACH;YACP,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,QAAQ,IAC3C,UAAU,CACN,CACH;QACL,SAAS,IAAI,CACZ,oBAAC,IAAI,IACH,SAAS,EAAC,WAAW,EACrB,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EACvC,KAAK,EAAE,cAAc,GACrB,CACH,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAWD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;qBACnD,CAAC,KAAK,KAAK,OAAO,IAAI,eAAe,CAAC;IACvD,CAAC,KAAK,KAAK,QAAQ,IAAI,MAAM,CAAC;IAC9B,CAAC,KAAK,KAAK,MAAM,IAAI,eAAe,CAAC;IACrC,CAAC;;kBAEa,UAAU,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,OAAO;IACjE,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;IACrC,CAAC,CAAC,MAAM;qBACO,aAAa,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,MAAM;IACtE,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;IACrC,CAAC,CAAC,MAAM;;wBAEU,KAAK,CAAC,MAAM,CAAC,OAAO;;6BAEf,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,WAAW;;;;;;;;qBAQlD,YAAY,IAAI,GAAG;;;;;;;;;;GAUrC,CACF,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\nimport { Text } from '../Text'\nimport { Color, theme } from '../theme'\nimport { MarginProps } from '../utils/space'\n\nexport type RowProps = {\n  iconLeft?: Icons\n  iconLeftColor?: Color\n  iconRight?: Icons\n  iconRightColor?: Color\n  handleClick?: () => void\n  heading: string\n  subHeading?: string\n  type?: 'first' | 'last' | 'curved'\n  borderTop?: boolean\n  borderBottom?: boolean\n  boldHeading?: boolean\n} & MarginProps\n\nexport const Row: FC<RowProps> = ({\n  iconLeft,\n  iconLeftColor = 'liquorice',\n  iconRight,\n  iconRightColor = 'marzipan',\n  handleClick,\n  heading,\n  subHeading,\n  type,\n  borderTop = true,\n  borderBottom = true,\n  boldHeading,\n  ...marginProps\n}) => {\n  const windowWidth = screen.width\n\n  return (\n    <Container\n      $type={type}\n      $iconLeft={iconLeft}\n      $borderTop={borderTop}\n      $borderBottom={borderBottom}\n      $iconRight={iconRight}\n      onClick={handleClick}\n      $boldHeading={boldHeading}\n      {...marginProps}\n    >\n      {iconLeft && (\n        <Icon\n          render={iconLeft}\n          size={windowWidth > 768 ? 24 : 18}\n          color={iconLeftColor}\n        />\n      )}\n      <Box>\n        <Text tag=\"h1\" typo=\"base\">\n          {heading}\n        </Text>\n        <Text tag=\"p\" typo=\"desc-small\" color=\"sesame\">\n          {subHeading}\n        </Text>\n      </Box>\n      {iconRight && (\n        <Icon\n          className=\"iconRight\"\n          render={iconRight}\n          size={24}\n          rotate={iconRight === 'caret' ? -90 : 0}\n          color={iconRightColor}\n        />\n      )}\n    </Container>\n  )\n}\n\ninterface IContainer {\n  $type?: 'first' | 'last' | 'curved'\n  $iconLeft?: string\n  $iconRight?: string\n  $borderTop: boolean\n  $borderBottom: boolean\n  $boldHeading?: boolean\n}\n\nconst Container = styled(Box)<IContainer>(\n  ({ $type, $iconLeft, $borderTop, $borderBottom, $boldHeading }) => css`\n    border-radius: ${($type === 'first' && `16px 16px 0 0`) ||\n    ($type === 'curved' && `16px`) ||\n    ($type === 'last' && `0 0 16px 16px`) ||\n    0};\n\n    border-top: ${$borderTop && $type !== 'curved' && $type !== 'first'\n      ? `1px solid ${theme.colors.oatmeal}`\n      : 'none'};\n    border-bottom: ${$borderBottom && $type !== 'curved' && $type !== 'last'\n      ? `1px solid ${theme.colors.oatmeal}`\n      : 'none'};\n\n    background-color: ${theme.colors.custard};\n    display: grid;\n    grid-template-columns: ${$iconLeft ? `24px auto 24px` : `auto 24px`};\n    padding: 16px;\n    grid-gap: 16px;\n    align-items: center;\n\n    cursor: pointer;\n\n    h1 {\n      font-weight: ${$boldHeading && 500};\n    }\n\n    .iconRight {\n      justify-self: end;\n    }\n\n    @media (min-width: 768px) {\n      grid-gap: 24px;\n    }\n  `,\n)\n"]}

package/dist/Row/index.js

@@ -0,0 +1,2 @@
+export * from './Row';
+//# sourceMappingURL=index.js.map

package/dist/Row/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Row/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA","sourcesContent":["export * from './Row'\n"]}