@pareto-engineering/design-system 4.0.0-alpha.70 → 4.0.0-alpha.73

package/src/ui/b/ExpandableLexicalPreview/ExpandableLexicalPreview.jsx

@@ -0,0 +1,157 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+/* eslint-disable import/no-extraneous-dependencies -- required here */
+import * as React from 'react'
+import { useState, useMemo } from 'react'
+import { LexicalComposer } from '@lexical/react/LexicalComposer'
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
+import { ContentEditable } from '@lexical/react/LexicalContentEditable'
+import { AutoLinkNode, LinkNode } from '@lexical/link'
+import { ListItemNode, ListNode } from '@lexical/list'
+
+import PropTypes from 'prop-types'
+import styleNames from '@pareto-engineering/bem/exports'
+import { Button } from '@pareto-engineering/design-system'
+import './styles.scss'
+import { ExpandButton } from './common'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+const componentClassName = 'expandable-lexical-preview'
+
+/**
+ * This is the component description.
+ */
+const ExpandableLexicalPreview = ({
+  id,
+  className:userClassName,
+  style,
+  nodes,
+  color,
+  resize,
+  title,
+  // ...otherProps
+}) => {
+  const initialConfig = {
+    nameSpace  :id,
+    editable   :false,
+    editorState:nodes,
+    theme      :{
+      text:{
+        italic       :'italic',
+        strikethrough:'strikethrough',
+        underline    :'underlined',
+      },
+    },
+    nodes:[
+      AutoLinkNode,
+      LinkNode,
+      ListNode,
+      ListItemNode,
+    ],
+  }
+
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const handleButtonClick = () => {
+    setIsExpanded(!isExpanded)
+  }
+
+  const Content = useMemo(() => (
+    <div className="lexical-content">
+      <RichTextPlugin
+        contentEditable={(
+          <ContentEditable
+            id={id}
+            className="content-editable"
+          />
+        )}
+      />
+      <ExpandButton
+        title={title}
+        onResolve={handleButtonClick}
+      />
+    </div>
+  ), [id])
+
+  return (
+    <LexicalComposer
+      initialConfig={initialConfig}
+    >
+      <div
+        id={id}
+        className={[
+          baseClassName,
+          componentClassName,
+          userClassName,
+          `y-${color}`,
+          isExpanded && 'collapsed',
+        ]
+          .filter((e) => e)
+          .join(' ')}
+        style={{
+          '--resize':resize,
+          ...style,
+        }}
+      >
+        {typeof title === 'string' ? <p className="title h2">{title}</p> : title}
+        {isExpanded && (
+          <Button
+            onClick={handleButtonClick}
+            color="background-far"
+            isCompact
+          >
+            <span className="ai-icon c-x x-paragraph">
+              C
+            </span>
+          </Button>
+        )}
+        {!isExpanded && Content}
+      </div>
+    </LexicalComposer>
+  )
+}
+
+ExpandableLexicalPreview.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * Color of the text
+   */
+  color:PropTypes.string,
+
+  /**
+   * The nodes to render in the form of a json string
+   */
+  nodes:PropTypes.string,
+
+  /**
+   * The resize property of the textarea
+   */
+  resize:PropTypes.string,
+
+  /**
+   * The title for the preview.
+   */
+  title:PropTypes.string,
+}
+
+ExpandableLexicalPreview.defaultProps = {
+  color :'paragraph',
+  resize:'vertical',
+}
+
+export default ExpandableLexicalPreview

package/src/ui/b/ExpandableLexicalPreview/common/ExpandButton/ExpandButton.jsx

@@ -0,0 +1,123 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+/* eslint-disable import/no-extraneous-dependencies -- required here */
+import * as React from 'react'
+import { $generateHtmlFromNodes } from '@lexical/html'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+
+import PropTypes from 'prop-types'
+import styleNames from '@pareto-engineering/bem/exports'
+import { Button } from '@pareto-engineering/design-system'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+const componentClassName = 'expand-button'
+
+/**
+ * This is the component description.
+ */
+const ExpandButton = ({
+  id,
+  className: userClassName,
+  style,
+  onResolve,
+  title,
+  // ...otherProps
+}) => {
+  const [editor] = useLexicalComposerContext()
+
+  return (
+    <Button
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        'ai-icon',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      color="background-far"
+      isCompact
+      onClick={() => {
+        editor.getEditorState().read(() => {
+          const rawHtml = $generateHtmlFromNodes(editor)
+          const preview = window.open('', '_blank', 'width=600,height=600')
+          preview.document.write(
+            `<html>
+            <title>${title || 'Preview'}</title>
+            <style>
+              li:has(ol, ul) {
+                list-style-type: none;
+              }
+
+              p,
+              span,
+              strong,
+              em,
+              li {
+                &.underlined {
+                  text-decoration: underline;
+
+                  &.strikethrough {
+                    text-decoration: underline line-through;
+                  }
+                }
+
+                &.strikethrough {
+                  text-decoration: line-through;
+                }
+
+                &.italic {
+                  font-style: italic;
+                }
+              }
+
+              :first-child {
+                margin-top: 0;
+              }
+
+              &::placeholder {
+                color: #abadb3;
+              }
+            </style>
+            <body>
+            <style></style>
+            ${rawHtml}
+            <button onclick="window.close()">Close Preview</button>
+            </body></html>`,
+          )
+        })
+        onResolve()
+      }}
+    >
+      D
+    </Button>
+
+  )
+}
+
+ExpandButton.propTypes = {
+  /**
+     * The HTML id for this element
+     */
+  id:PropTypes.string,
+
+  /**
+     * The HTML class names for this element
+     */
+  className:PropTypes.string,
+
+  /**
+     * The React-written, css properties for this element.
+     */
+  style:PropTypes.objectOf(PropTypes.string),
+}
+
+ExpandButton.defaultProps = {
+  // color: 'paragraph',
+  // resize: 'vertical',
+}
+
+export default ExpandButton

package/src/ui/b/ExpandableLexicalPreview/common/ExpandButton/index.js

@@ -0,0 +1 @@
+export { default as ExpandButton } from './ExpandButton'

package/src/ui/b/ExpandableLexicalPreview/common/index.js

@@ -0,0 +1 @@
+export { ExpandButton } from './ExpandButton'

package/src/ui/b/ExpandableLexicalPreview/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as ExpandableLexicalPreview } from './ExpandableLexicalPreview'

package/src/ui/b/ExpandableLexicalPreview/styles.scss

@@ -0,0 +1,84 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable max-nesting-depth -- required */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+.#{bem.$base}.expandable-lexical-preview {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  width: 100%;
+
+  &.collapsed {
+    flex-direction: row;
+  }
+
+  > .title {
+    margin: 0;
+  }
+
+
+  > .#{bem.$base}.button {
+    align-items: center;
+    border: 1px solid var(--outline-inputs);
+    display: flex;
+  }
+
+  > .lexical-content {
+    position: relative;
+
+    > .content-editable {
+      background: var(--background-inputs);
+      border: 1px solid var(--outline-inputs);
+      border-radius: var(--theme-default-border-radius);
+      color: var(--y);
+      overflow: auto;
+      padding: var(--gap);
+      resize: var(--resize);
+
+      li:has(ol, ul) {
+        list-style-type: none;
+      }
+
+      p,
+      span,
+      strong,
+      em,
+      li {
+        &.underlined {
+          text-decoration: underline;
+
+          &.strikethrough {
+            text-decoration: underline line-through;
+          }
+        }
+
+        &.strikethrough {
+          text-decoration: line-through;
+        }
+
+        &.italic {
+          font-style: italic;
+        }
+      }
+
+      :first-child {
+        margin-top: 0;
+      }
+
+      &::placeholder {
+        color: var(--metadata);
+      }
+    }
+
+    > .#{bem.$base}.expand-button {
+      border: 1px solid var(--outline-inputs);
+      position: absolute;
+      right: 1em;
+      top: 1em;
+    }
+  }
+}

package/src/ui/b/index.js

@@ -5,3 +5,4 @@ export { SocialMediaButton } from './SocialMediaButton'
 export { ThemeSelector } from './ThemeSelector'
 export { Title } from './Title'
 export { Card } from './Card'
+export { ExpandableLexicalPreview } from './ExpandableLexicalPreview'

package/src/ui/c/index.js

@@ -1,4 +1,3 @@
-export { ContentSlides, useContentSlides } from './ContentSlides'
 export { Shortener } from './Shortener'
 export { SocialMediaShareButton } from './SocialMediaShareButton'
 export { Modal } from './Modal'

package/src/ui/f/fields/EditorInput/EditorInput.jsx

@@ -20,7 +20,7 @@ import styleNames from '@pareto-engineering/bem/exports'
 // Local Definitions
 
 import { FormLabel, FormDescription } from '../../common'
-import { Toolbar, TreeViewPlugin } from './common'
+import { Toolbar, TreeViewPlugin, StopPropagationPlugin } from './common'
 
 import './styles.scss'
 
@@ -45,6 +45,7 @@ const EditorInput = ({
   description,
   disabled,
   showDebugger,
+  stopPropagationKeys,
   // ...otherProps
 }) => {
   const formik = useFormikContext()
@@ -158,8 +159,11 @@ const EditorInput = ({
         <ListPlugin />
         <TabIndentationPlugin />
         <HistoryPlugin />
+        { stopPropagationKeys && (
+          <StopPropagationPlugin stopPropagationKeys={stopPropagationKeys} />
+        )}
         <FormDescription className="s-1" description={description} name={name} />
-        { showDebugger && <TreeViewPlugin />}
+        { showDebugger && <TreeViewPlugin /> }
       </div>
     </LexicalComposer>
   )
@@ -230,6 +234,16 @@ EditorInput.propTypes = {
    * The resize property of the text area
    */
   resize:PropTypes.oneOf(['none', 'both', 'horizontal', 'vertical']),
+
+  /**
+   * Whether to show the debugger or not
+   */
+  showDebugger:PropTypes.bool,
+
+  /**
+   * Map to stop propagation of the given keys
+   */
+  stopPropagationKeys:PropTypes.arrayOf(PropTypes.string),
 }
 
 EditorInput.defaultProps = {

package/src/ui/f/fields/EditorInput/common/StopPropagationPlugin.jsx

@@ -0,0 +1,29 @@
+import { useInsertionEffect } from 'react'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+
+const StopPropagationPlugin = ({
+  stopPropagationKeys,
+}) => {
+  const [editor] = useLexicalComposerContext()
+
+  useInsertionEffect(() => {
+    const onKeyDown = (e) => {
+      if (stopPropagationKeys?.includes(e.key)) {
+        e.stopPropagation()
+      }
+    }
+
+    return editor.registerRootListener(
+      (rootElement, prevRootElement) => {
+        if (prevRootElement !== null) {
+          prevRootElement.removeEventListener('keydown', onKeyDown)
+        }
+        if (rootElement !== null) {
+          rootElement.addEventListener('keydown', onKeyDown)
+        }
+      },
+    )
+  }, [editor])
+}
+
+export default StopPropagationPlugin

package/src/ui/f/fields/EditorInput/common/index.jsx

@@ -1,2 +1,3 @@
 export { default as Toolbar } from './Toolbar'
 export { default as TreeViewPlugin } from './TreeViewPlugin'
+export { default as StopPropagationPlugin } from './StopPropagationPlugin'

package/src/ui/index.js

@@ -1,4 +1,3 @@
-export * from './r' // Router Extensions
 export * from './a'
 export * from './b'
 export * from './c'