5htp-core 0.4.8 → 0.4.9

package/src/client/components/inputv3/Rte/nodes/MentionNode.ts

@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {
+  $applyNodeReplacement,
+  type DOMConversionMap,
+  type DOMConversionOutput,
+  type DOMExportOutput,
+  type EditorConfig,
+  type LexicalNode,
+  type NodeKey,
+  type SerializedTextNode,
+  type Spread,
+  TextNode,
+} from 'lexical';
+
+export type SerializedMentionNode = Spread<
+  {
+    mentionName: string;
+  },
+  SerializedTextNode
+>;
+
+function $convertMentionElement(
+  domNode: HTMLElement,
+): DOMConversionOutput | null {
+  const textContent = domNode.textContent;
+
+  if (textContent !== null) {
+    const node = $createMentionNode(textContent);
+    return {
+      node,
+    };
+  }
+
+  return null;
+}
+
+const mentionStyle = 'background-color: rgba(24, 119, 232, 0.2)';
+export class MentionNode extends TextNode {
+  __mention: string;
+
+  static getType(): string {
+    return 'mention';
+  }
+
+  static clone(node: MentionNode): MentionNode {
+    return new MentionNode(node.__mention, node.__text, node.__key);
+  }
+  static importJSON(serializedNode: SerializedMentionNode): MentionNode {
+    const node = $createMentionNode(serializedNode.mentionName);
+    node.setTextContent(serializedNode.text);
+    node.setFormat(serializedNode.format);
+    node.setDetail(serializedNode.detail);
+    node.setMode(serializedNode.mode);
+    node.setStyle(serializedNode.style);
+    return node;
+  }
+
+  constructor(mentionName: string, text?: string, key?: NodeKey) {
+    super(text ?? mentionName, key);
+    this.__mention = mentionName;
+  }
+
+  exportJSON(): SerializedMentionNode {
+    return {
+      ...super.exportJSON(),
+      mentionName: this.__mention,
+      type: 'mention',
+      version: 1,
+    };
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = super.createDOM(config);
+    dom.style.cssText = mentionStyle;
+    dom.className = 'mention';
+    return dom;
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement('span');
+    element.setAttribute('data-lexical-mention', 'true');
+    element.textContent = this.__text;
+    return {element};
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      span: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute('data-lexical-mention')) {
+          return null;
+        }
+        return {
+          conversion: $convertMentionElement,
+          priority: 1,
+        };
+      },
+    };
+  }
+
+  isTextEntity(): true {
+    return true;
+  }
+
+  canInsertTextBefore(): boolean {
+    return false;
+  }
+
+  canInsertTextAfter(): boolean {
+    return false;
+  }
+}
+
+export function $createMentionNode(mentionName: string): MentionNode {
+  const mentionNode = new MentionNode(mentionName);
+  mentionNode.setMode('segmented').toggleDirectionless();
+  return $applyNodeReplacement(mentionNode);
+}
+
+export function $isMentionNode(
+  node: LexicalNode | null | undefined,
+): node is MentionNode {
+  return node instanceof MentionNode;
+}

package/src/client/components/inputv3/Rte/nodes/PageBreakNode/index.css

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/* @import url('assets/styles/variables.css'); */
+
+[type='page-break'] {
+  position: relative;
+  display: block;
+  width: calc(100% + var(--editor-input-padding, 28px) * 2);
+  overflow: unset;
+  margin-left: calc(var(--editor-input-padding, 28px) * -1);
+  margin-top: var(--editor-input-padding, 28px);
+  margin-bottom: var(--editor-input-padding, 28px);
+
+  border: none;
+  border-top: 1px dashed var(--editor-color-secondary, #eeeeee);
+  border-bottom: 1px dashed var(--editor-color-secondary, #eeeeee);
+  background-color: var(--editor-color-secondary, #eeeeee);
+}
+
+[type='page-break']::before {
+  content: '';
+
+  position: absolute;
+  top: 50%;
+  left: calc(var(--editor-input-padding, 28px) + 12px);
+  transform: translateY(-50%);
+  opacity: 0.5;
+
+  width: 16px;
+  height: 16px;
+}
+
+[type='page-break']::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  display: block;
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  background-color: #fff;
+
+  content: 'PAGE BREAK';
+  font-size: 12px;
+  color: #000;
+  font-weight: 600;
+}
+
+.selected[type='page-break'] {
+  border-color: var(--editor-color-primary, #4766cb);
+}
+
+.selected[type='page-break']::before {
+  opacity: 1;
+}

package/src/client/components/inputv3/Rte/nodes/PageBreakNode/index.tsx

@@ -0,0 +1,170 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './index.css';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {useLexicalNodeSelection} from '@lexical/react/useLexicalNodeSelection';
+import {mergeRegister} from '@lexical/utils';
+import {
+  $getSelection,
+  $isNodeSelection,
+  CLICK_COMMAND,
+  COMMAND_PRIORITY_HIGH,
+  COMMAND_PRIORITY_LOW,
+  DecoratorNode,
+  DOMConversionMap,
+  DOMConversionOutput,
+  KEY_BACKSPACE_COMMAND,
+  KEY_DELETE_COMMAND,
+  LexicalNode,
+  NodeKey,
+  SerializedLexicalNode,
+} from 'lexical';
+import * as React from 'react';
+import {useCallback, useEffect} from 'react';
+
+export type SerializedPageBreakNode = SerializedLexicalNode;
+
+function PageBreakComponent({nodeKey}: {nodeKey: NodeKey}) {
+  const [editor] = useLexicalComposerContext();
+  const [isSelected, setSelected, clearSelection] =
+    useLexicalNodeSelection(nodeKey);
+
+  const $onDelete = useCallback(
+    (event: KeyboardEvent) => {
+      event.preventDefault();
+      const deleteSelection = $getSelection();
+      if (isSelected && $isNodeSelection(deleteSelection)) {
+        editor.update(() => {
+          deleteSelection.getNodes().forEach((node) => {
+            if ($isPageBreakNode(node)) {
+              node.remove();
+            }
+          });
+        });
+      }
+      return false;
+    },
+    [editor, isSelected],
+  );
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        CLICK_COMMAND,
+        (event: MouseEvent) => {
+          const pbElem = editor.getElementByKey(nodeKey);
+
+          if (event.target === pbElem) {
+            if (!event.shiftKey) {
+              clearSelection();
+            }
+            setSelected(!isSelected);
+            return true;
+          }
+
+          return false;
+        },
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand(
+        KEY_DELETE_COMMAND,
+        $onDelete,
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand(
+        KEY_BACKSPACE_COMMAND,
+        $onDelete,
+        COMMAND_PRIORITY_LOW,
+      ),
+    );
+  }, [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected]);
+
+  useEffect(() => {
+    const pbElem = editor.getElementByKey(nodeKey);
+    if (pbElem !== null) {
+      pbElem.className = isSelected ? 'selected' : '';
+    }
+  }, [editor, isSelected, nodeKey]);
+
+  return null;
+}
+
+export class PageBreakNode extends DecoratorNode<JSX.Element> {
+  static getType(): string {
+    return 'page-break';
+  }
+
+  static clone(node: PageBreakNode): PageBreakNode {
+    return new PageBreakNode(node.__key);
+  }
+
+  static importJSON(serializedNode: SerializedPageBreakNode): PageBreakNode {
+    return $createPageBreakNode();
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      figure: (domNode: HTMLElement) => {
+        const tp = domNode.getAttribute('type');
+        if (tp !== this.getType()) {
+          return null;
+        }
+
+        return {
+          conversion: $convertPageBreakElement,
+          priority: COMMAND_PRIORITY_HIGH,
+        };
+      },
+    };
+  }
+
+  exportJSON(): SerializedLexicalNode {
+    return {
+      type: this.getType(),
+      version: 1,
+    };
+  }
+
+  createDOM(): HTMLElement {
+    const el = document.createElement('figure');
+    el.style.pageBreakAfter = 'always';
+    el.setAttribute('type', this.getType());
+    return el;
+  }
+
+  getTextContent(): string {
+    return '\n';
+  }
+
+  isInline(): false {
+    return false;
+  }
+
+  updateDOM(): boolean {
+    return false;
+  }
+
+  decorate(): JSX.Element {
+    return <PageBreakComponent nodeKey={this.__key} />;
+  }
+}
+
+function $convertPageBreakElement(): DOMConversionOutput {
+  return {node: $createPageBreakNode()};
+}
+
+export function $createPageBreakNode(): PageBreakNode {
+  return new PageBreakNode();
+}
+
+export function $isPageBreakNode(
+  node: LexicalNode | null | undefined,
+): node is PageBreakNode {
+  return node instanceof PageBreakNode;
+}

package/src/client/components/inputv3/Rte/nodes/PlaygroundNodes.ts

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {Klass, LexicalNode} from 'lexical';
+
+import {CodeHighlightNode, CodeNode} from '@lexical/code';
+import {HashtagNode} from '@lexical/hashtag';
+import {AutoLinkNode, LinkNode} from '@lexical/link';
+import {ListItemNode, ListNode} from '@lexical/list';
+import {MarkNode} from '@lexical/mark';
+import {OverflowNode} from '@lexical/overflow';
+import {HorizontalRuleNode} from '@lexical/react/LexicalHorizontalRuleNode';
+import {HeadingNode, QuoteNode} from '@lexical/rich-text';
+import {TableCellNode, TableNode, TableRowNode} from '@lexical/table';
+
+import {CollapsibleContainerNode} from '../plugins/CollapsiblePlugin/CollapsibleContainerNode';
+import {CollapsibleContentNode} from '../plugins/CollapsiblePlugin/CollapsibleContentNode';
+import {CollapsibleTitleNode} from '../plugins/CollapsiblePlugin/CollapsibleTitleNode';
+import {AutocompleteNode} from './AutocompleteNode';
+import {EmojiNode} from './EmojiNode';
+import {EquationNode} from './EquationNode';
+import {FigmaNode} from './FigmaNode';
+import {ImageNode} from './ImageNode';
+import {InlineImageNode} from './InlineImageNode/InlineImageNode';
+import {KeywordNode} from './KeywordNode';
+import {LayoutContainerNode} from './LayoutContainerNode';
+import {LayoutItemNode} from './LayoutItemNode';
+import {MentionNode} from './MentionNode';
+import {PageBreakNode} from './PageBreakNode';
+import {PollNode} from './PollNode';
+import {StickyNode} from './StickyNode';
+import {TweetNode} from './TweetNode';
+import {YouTubeNode} from './YouTubeNode';
+
+const PlaygroundNodes: Array<Klass<LexicalNode>> = [
+  HeadingNode,
+  ListNode,
+  ListItemNode,
+  QuoteNode,
+  CodeNode,
+  TableNode,
+  TableCellNode,
+  TableRowNode,
+  HashtagNode,
+  CodeHighlightNode,
+  AutoLinkNode,
+  LinkNode,
+  OverflowNode,
+  PollNode,
+  StickyNode,
+  ImageNode,
+  InlineImageNode,
+  MentionNode,
+  EmojiNode,
+  EquationNode,
+  AutocompleteNode,
+  KeywordNode,
+  HorizontalRuleNode,
+  TweetNode,
+  YouTubeNode,
+  FigmaNode,
+  MarkNode,
+  CollapsibleContainerNode,
+  CollapsibleContentNode,
+  CollapsibleTitleNode,
+  PageBreakNode,
+  LayoutContainerNode,
+  LayoutItemNode,
+];
+
+export default PlaygroundNodes;

package/src/client/components/inputv3/Rte/nodes/PollComponent.tsx

@@ -0,0 +1,249 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// Core
+import Button from '@client/components/button';
+import Input from '@client/components/inputv3';
+
+import type { Option, Options, PollNode } from './PollNode';
+
+import './PollNode.css';
+
+import { useCollaborationContext } from '@lexical/react/LexicalCollaborationContext';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import { mergeRegister } from '@lexical/utils';
+import {
+    $getNodeByKey,
+    $getSelection,
+    $isNodeSelection,
+    BaseSelection,
+    CLICK_COMMAND,
+    COMMAND_PRIORITY_LOW,
+    KEY_BACKSPACE_COMMAND,
+    KEY_DELETE_COMMAND,
+    NodeKey,
+} from 'lexical';
+import * as React from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import joinClasses from '../utils/joinClasses';
+import { $isPollNode, createPollOption } from './PollNode';
+
+function getTotalVotes(options: Options): number {
+    return options.reduce((totalVotes, next) => {
+        return totalVotes + next.votes.length;
+    }, 0);
+}
+
+function PollOptionComponent({
+    option,
+    index,
+    options,
+    totalVotes,
+    withPollNode,
+}: {
+    index: number;
+    option: Option;
+    options: Options;
+    totalVotes: number;
+    withPollNode: (
+        cb: (pollNode: PollNode) => void,
+        onSelect?: () => void,
+    ) => void;
+}): JSX.Element {
+
+    const { clientID } = useCollaborationContext();
+    const checkboxRef = useRef(null);
+    const votesArray = option.votes;
+    const checkedIndex = votesArray.indexOf(clientID);
+    const checked = checkedIndex !== -1;
+    const votes = votesArray.length;
+    const text = option.text;
+
+    return (
+        <div className="row sp-05" style={{ position: 'relative' }}>
+            <div
+                className={joinClasses(
+                    'PollNode__optionCheckboxWrapper',
+                    checked && 'PollNode__optionCheckboxChecked',
+                )}>
+                <input
+                    ref={checkboxRef}
+                    className="PollNode__optionCheckbox"
+                    type="checkbox"
+                    onChange={(e) => {
+                        withPollNode((node) => {
+                            node.toggleVote(option, clientID);
+                        });
+                    }}
+                    checked={checked}
+                />
+            </div>
+            <div
+                className="PollNode__optionInputVotes"
+                style={{ width: `${votes === 0 ? 0 : (votes / totalVotes) * 100}%` }}
+            />
+            <span className="PollNode__optionInputVotesCount">
+                {votes > 0 && (votes === 1 ? '1 vote' : `${votes} votes`)}
+            </span>
+            <Input
+                value={text}
+                onChange={(e) => {
+                    const target = e.target;
+                    const value = target.value;
+                    const selectionStart = target.selectionStart;
+                    const selectionEnd = target.selectionEnd;
+                    withPollNode(
+                        (node) => {
+                            node.setOptionText(option, value);
+                        },
+                        () => {
+                            target.selectionStart = selectionStart;
+                            target.selectionEnd = selectionEnd;
+                        },
+                    );
+                }}
+                placeholder={`Option ${index + 1}`}
+                className="col-1"
+            />
+            <Button
+                disabled={options.length < 3}
+                icon="times"
+                onClick={() => {
+                    withPollNode((node) => {
+                        node.deleteOption(option);
+                    });
+                }}
+            />
+        </div>
+    );
+}
+
+export default function PollComponent({
+    question,
+    options,
+    nodeKey,
+}: {
+    nodeKey: NodeKey;
+    options: Options;
+    question: string;
+}): JSX.Element {
+
+    const [editor] = useLexicalComposerContext();
+    const totalVotes = useMemo(() => getTotalVotes(options), [options]);
+    const [isSelected, setSelected, clearSelection] =
+        useLexicalNodeSelection(nodeKey);
+    const [selection, setSelection] = useState<BaseSelection | null>(null);
+    const ref = useRef(null);
+
+    const $onDelete = useCallback(
+        (payload: KeyboardEvent) => {
+            const deleteSelection = $getSelection();
+            if (isSelected && $isNodeSelection(deleteSelection)) {
+                const event: KeyboardEvent = payload;
+                event.preventDefault();
+                editor.update(() => {
+                    deleteSelection.getNodes().forEach((node) => {
+                        if ($isPollNode(node)) {
+                            node.remove();
+                        }
+                    });
+                });
+            }
+            return false;
+        },
+        [editor, isSelected],
+    );
+
+    useEffect(() => {
+        return mergeRegister(
+            editor.registerUpdateListener(({ editorState }) => {
+                setSelection(editorState.read(() => $getSelection()));
+            }),
+            editor.registerCommand<MouseEvent>(
+                CLICK_COMMAND,
+                (payload) => {
+                    const event = payload;
+
+                    if (event.target === ref.current) {
+                        if (!event.shiftKey) {
+                            clearSelection();
+                        }
+                        setSelected(!isSelected);
+                        return true;
+                    }
+
+                    return false;
+                },
+                COMMAND_PRIORITY_LOW,
+            ),
+            editor.registerCommand(
+                KEY_DELETE_COMMAND,
+                $onDelete,
+                COMMAND_PRIORITY_LOW,
+            ),
+            editor.registerCommand(
+                KEY_BACKSPACE_COMMAND,
+                $onDelete,
+                COMMAND_PRIORITY_LOW,
+            ),
+        );
+    }, [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected]);
+
+    const withPollNode = (
+        cb: (node: PollNode) => void,
+        onUpdate?: () => void,
+    ): void => {
+        editor.update(
+            () => {
+                const node = $getNodeByKey(nodeKey);
+                if ($isPollNode(node)) {
+                    cb(node);
+                }
+            },
+            { onUpdate },
+        );
+    };
+
+    const addOption = () => {
+        withPollNode((node) => {
+            node.addOption(createPollOption());
+        });
+    };
+
+    const isFocused = $isNodeSelection(selection) && isSelected;
+
+    return (
+        <div
+            className={`PollNode__container ${isFocused ? 'focused' : ''}`}
+            ref={ref}>
+            <div className="PollNode__inner">
+                <h2 className="PollNode__heading">{question}</h2>
+                {options.map((option, index) => {
+                    const key = option.uid;
+                    return (
+                        <PollOptionComponent
+                            key={key}
+                            withPollNode={withPollNode}
+                            option={option}
+                            index={index}
+                            options={options}
+                            totalVotes={totalVotes}
+                        />
+                    );
+                })}
+                <div className="PollNode__footer">
+                    <Button icon="plus" onClick={addOption}>
+                        Add Option
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}