5htp-core 0.4.8 → 0.4.9

package/src/client/components/inputv3/Rte/nodes/PollNode.css

@@ -0,0 +1,187 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.PollNode__container {
+    border: 1px solid #eee;
+    background-color: #fcfcfc;
+    border-radius: 10px;
+    max-width: 600px;
+    min-width: 400px;
+    cursor: pointer;
+    user-select: none;
+
+    font-size: 1rem;
+}
+
+.PollNode__container.focused {
+    outline: 2px solid rgb(60, 132, 244);
+}
+
+.PollNode__inner {
+    margin: 15px;
+    cursor: default;
+}
+
+.PollNode__heading {
+    margin-left: 0px;
+    margin-top: 0px;
+    margin-right: 0px;
+    margin-bottom: 15px;
+    color: #444;
+    text-align: center;
+    font-size: 18px;
+}
+
+.PollNode__optionContainer {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 10px;
+    align-items: center;
+}
+
+.PollNode__optionInputWrapper {
+    display: flex;
+    flex: 10px;
+    border: 1px solid rgb(61, 135, 245);
+    border-radius: 5px;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.PollNode__optionInput {
+    display: flex;
+    flex: 1px;
+    border: 0px;
+    padding: 7px;
+    color: rgb(61, 135, 245);
+    background-color: transparent;
+    font-weight: bold;
+    outline: 0px;
+    z-index: 0;
+}
+
+.PollNode__optionInput::placeholder {
+    font-weight: normal;
+    color: #999;
+}
+
+.PollNode__optionInputVotes {
+    background-color: rgb(236, 243, 254);
+    height: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    transition: width 1s ease;
+    z-index: 0;
+}
+
+.PollNode__optionInputVotesCount {
+    color: rgb(61, 135, 245);
+    position: absolute;
+    right: 15px;
+    font-size: 12px;
+    top: 5px;
+}
+
+.PollNode__optionCheckboxWrapper {
+    position: relative;
+    display: flex;
+    width: 22px;
+    height: 22px;
+    border: 1px solid #999;
+    border-radius: 5px;
+}
+
+.PollNode__optionCheckboxChecked {
+    border: 1px solid rgb(61, 135, 245);
+    background-color: rgb(61, 135, 245);
+}
+
+.PollNode__optionCheckboxChecked:after {
+    content: '';
+    cursor: pointer;
+    border-color: #fff;
+    border-style: solid;
+    position: absolute;
+    display: block;
+    top: 4px;
+    width: 5px;
+    left: 8px;
+    height: 9px;
+    margin: 0;
+    transform: rotate(45deg);
+    border-width: 0 2px 2px 0;
+    pointer-events: none;
+}
+
+.PollNode__optionCheckbox {
+    border: 0px;
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+}
+
+.PollNode__optionDelete {
+    position: relative;
+    display: flex;
+    width: 28px;
+    height: 28px;
+    margin-left: 6px;
+    border: 0px;
+    background-color: transparent;
+    background-position: 6px 6px;
+    background-repeat: no-repeat;
+    z-index: 0;
+    cursor: pointer;
+    border-radius: 5px;
+    opacity: 0.3;
+}
+
+.PollNode__optionDelete:before,
+.PollNode__optionDelete:after {
+    position: absolute;
+    display: block;
+    content: '';
+    background-color: #999;
+    width: 2px;
+    height: 15px;
+    top: 6px;
+    left: 13px;
+}
+
+.PollNode__optionDelete:before {
+    transform: rotate(-45deg);
+}
+
+.PollNode__optionDelete:after {
+    transform: rotate(45deg);
+}
+
+.PollNode__optionDelete:hover {
+    opacity: 1;
+    background-color: #eee;
+}
+
+.PollNode__optionDeleteDisabled {
+    cursor: not-allowed;
+}
+
+.PollNode__optionDeleteDisabled:hover {
+    opacity: 0.3;
+    background-color: transparent;
+}
+
+.PollNode__footer {
+    display: flex;
+    justify-content: center;
+}

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

@@ -0,0 +1,209 @@
+/**
+ * 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 {
+    DecoratorNode,
+    DOMConversionMap,
+    DOMConversionOutput,
+    DOMExportOutput,
+    LexicalNode,
+    NodeKey,
+    SerializedLexicalNode,
+    Spread,
+} from 'lexical';
+import * as React from 'react';
+import { Suspense } from 'react';
+
+export type Options = ReadonlyArray<Option>;
+
+export type Option = Readonly<{
+    text: string;
+    uid: string;
+    votes: Array<number>;
+}>;
+
+const PollComponent = React.lazy(() => import('./PollComponent'));
+
+function createUID(): string {
+    return Math.random()
+        .toString(36)
+        .replace(/[^a-z]+/g, '')
+        .substr(0, 5);
+}
+
+export function createPollOption(text = ''): Option {
+    return {
+        text,
+        uid: createUID(),
+        votes: [],
+    };
+}
+
+function cloneOption(
+    option: Option,
+    text: string,
+    votes?: Array<number>,
+): Option {
+    return {
+        text,
+        uid: option.uid,
+        votes: votes || Array.from(option.votes),
+    };
+}
+
+export type SerializedPollNode = Spread<
+    {
+        question: string;
+        options: Options;
+    },
+    SerializedLexicalNode
+>;
+
+function $convertPollElement(domNode: HTMLElement): DOMConversionOutput | null {
+    const question = domNode.getAttribute('data-lexical-poll-question');
+    const options = domNode.getAttribute('data-lexical-poll-options');
+    if (question !== null && options !== null) {
+        const node = $createPollNode(question, JSON.parse(options));
+        return { node };
+    }
+    return null;
+}
+
+export class PollNode extends DecoratorNode<JSX.Element> {
+    __question: string;
+    __options: Options;
+
+    static getType(): string {
+        return 'poll';
+    }
+
+    static clone(node: PollNode): PollNode {
+        return new PollNode(node.__question, node.__options, node.__key);
+    }
+
+    static importJSON(serializedNode: SerializedPollNode): PollNode {
+        const node = $createPollNode(
+            serializedNode.question,
+            serializedNode.options,
+        );
+        serializedNode.options.forEach(node.addOption);
+        return node;
+    }
+
+    constructor(question: string, options: Options, key?: NodeKey) {
+        super(key);
+        this.__question = question;
+        this.__options = options;
+    }
+
+    exportJSON(): SerializedPollNode {
+        return {
+            options: this.__options,
+            question: this.__question,
+            type: 'poll',
+            version: 1,
+        };
+    }
+
+    addOption(option: Option): void {
+        const self = this.getWritable();
+        const options = Array.from(self.__options);
+        options.push(option);
+        self.__options = options;
+    }
+
+    deleteOption(option: Option): void {
+        const self = this.getWritable();
+        const options = Array.from(self.__options);
+        const index = options.indexOf(option);
+        options.splice(index, 1);
+        self.__options = options;
+    }
+
+    setOptionText(option: Option, text: string): void {
+        const self = this.getWritable();
+        const clonedOption = cloneOption(option, text);
+        const options = Array.from(self.__options);
+        const index = options.indexOf(option);
+        options[index] = clonedOption;
+        self.__options = options;
+    }
+
+    toggleVote(option: Option, clientID: number): void {
+        const self = this.getWritable();
+        const votes = option.votes;
+        const votesClone = Array.from(votes);
+        const voteIndex = votes.indexOf(clientID);
+        if (voteIndex === -1) {
+            votesClone.push(clientID);
+        } else {
+            votesClone.splice(voteIndex, 1);
+        }
+        const clonedOption = cloneOption(option, option.text, votesClone);
+        const options = Array.from(self.__options);
+        const index = options.indexOf(option);
+        options[index] = clonedOption;
+        self.__options = options;
+    }
+
+    static importDOM(): DOMConversionMap | null {
+        return {
+            span: (domNode: HTMLElement) => {
+                if (!domNode.hasAttribute('data-lexical-poll-question')) {
+                    return null;
+                }
+                return {
+                    conversion: $convertPollElement,
+                    priority: 2,
+                };
+            },
+        };
+    }
+
+    exportDOM(): DOMExportOutput {
+        const element = document.createElement('span');
+        element.setAttribute('data-lexical-poll-question', this.__question);
+        element.setAttribute(
+            'data-lexical-poll-options',
+            JSON.stringify(this.__options),
+        );
+        return { element };
+    }
+
+    createDOM(): HTMLElement {
+        const elem = document.createElement('span');
+        elem.style.display = 'inline-block';
+        return elem;
+    }
+
+    updateDOM(): false {
+        return false;
+    }
+
+    decorate(): JSX.Element {
+        return (
+            <Suspense fallback={null}>
+                <PollComponent
+                    question={this.__question}
+                    options={this.__options}
+                    nodeKey={this.__key}
+                />
+            </Suspense>
+        );
+    }
+}
+
+export function $createPollNode(question: string, options: Options): PollNode {
+    return new PollNode(question, options);
+}
+
+export function $isPollNode(
+    node: LexicalNode | null | undefined,
+): node is PollNode {
+    return node instanceof PollNode;
+}

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

@@ -0,0 +1,261 @@
+/**
+ * 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 {LexicalEditor, NodeKey} from 'lexical';
+
+import './StickyNode.css';
+
+import {useCollaborationContext} from '@lexical/react/LexicalCollaborationContext';
+import {CollaborationPlugin} from '@lexical/react/LexicalCollaborationPlugin';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
+import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
+import {LexicalNestedComposer} from '@lexical/react/LexicalNestedComposer';
+import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
+import {calculateZoomLevel} from '@lexical/utils';
+import {$getNodeByKey} from 'lexical';
+import * as React from 'react';
+import {useEffect, useRef} from 'react';
+import useLayoutEffect from '../shared/useLayoutEffect';
+
+import {useSharedHistoryContext} from '../context/SharedHistoryContext';
+import StickyEditorTheme from '../themes/StickyEditorTheme';
+import ContentEditable from '../ui/ContentEditable';
+import {$isStickyNode} from './StickyNode';
+
+type Positioning = {
+  isDragging: boolean;
+  offsetX: number;
+  offsetY: number;
+  rootElementRect: null | ClientRect;
+  x: number;
+  y: number;
+};
+
+function positionSticky(
+  stickyElem: HTMLElement,
+  positioning: Positioning,
+): void {
+  const style = stickyElem.style;
+  const rootElementRect = positioning.rootElementRect;
+  const rectLeft = rootElementRect !== null ? rootElementRect.left : 0;
+  const rectTop = rootElementRect !== null ? rootElementRect.top : 0;
+  style.top = rectTop + positioning.y + 'px';
+  style.left = rectLeft + positioning.x + 'px';
+}
+
+export default function StickyComponent({
+  x,
+  y,
+  nodeKey,
+  color,
+  caption,
+}: {
+  caption: LexicalEditor;
+  color: 'pink' | 'yellow';
+  nodeKey: NodeKey;
+  x: number;
+  y: number;
+}): JSX.Element {
+  const [editor] = useLexicalComposerContext();
+  const stickyContainerRef = useRef<null | HTMLDivElement>(null);
+  const positioningRef = useRef<Positioning>({
+    isDragging: false,
+    offsetX: 0,
+    offsetY: 0,
+    rootElementRect: null,
+    x: 0,
+    y: 0,
+  });
+  const {isCollabActive} = useCollaborationContext();
+
+  useEffect(() => {
+    const position = positioningRef.current;
+    position.x = x;
+    position.y = y;
+
+    const stickyContainer = stickyContainerRef.current;
+    if (stickyContainer !== null) {
+      positionSticky(stickyContainer, position);
+    }
+  }, [x, y]);
+
+  useLayoutEffect(() => {
+    const position = positioningRef.current;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let i = 0; i < entries.length; i++) {
+        const entry = entries[i];
+        const {target} = entry;
+        position.rootElementRect = target.getBoundingClientRect();
+        const stickyContainer = stickyContainerRef.current;
+        if (stickyContainer !== null) {
+          positionSticky(stickyContainer, position);
+        }
+      }
+    });
+
+    const removeRootListener = editor.registerRootListener(
+      (nextRootElem, prevRootElem) => {
+        if (prevRootElem !== null) {
+          resizeObserver.unobserve(prevRootElem);
+        }
+        if (nextRootElem !== null) {
+          resizeObserver.observe(nextRootElem);
+        }
+      },
+    );
+
+    const handleWindowResize = () => {
+      const rootElement = editor.getRootElement();
+      const stickyContainer = stickyContainerRef.current;
+      if (rootElement !== null && stickyContainer !== null) {
+        position.rootElementRect = rootElement.getBoundingClientRect();
+        positionSticky(stickyContainer, position);
+      }
+    };
+
+    window.addEventListener('resize', handleWindowResize);
+
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+      removeRootListener();
+    };
+  }, [editor]);
+
+  useEffect(() => {
+    const stickyContainer = stickyContainerRef.current;
+    if (stickyContainer !== null) {
+      // Delay adding transition so we don't trigger the
+      // transition on load of the sticky.
+      setTimeout(() => {
+        stickyContainer.style.setProperty(
+          'transition',
+          'top 0.3s ease 0s, left 0.3s ease 0s',
+        );
+      }, 500);
+    }
+  }, []);
+
+  const handlePointerMove = (event: PointerEvent) => {
+    const stickyContainer = stickyContainerRef.current;
+    const positioning = positioningRef.current;
+    const rootElementRect = positioning.rootElementRect;
+    const zoom = calculateZoomLevel(stickyContainer);
+    if (
+      stickyContainer !== null &&
+      positioning.isDragging &&
+      rootElementRect !== null
+    ) {
+      positioning.x =
+        event.pageX / zoom - positioning.offsetX - rootElementRect.left;
+      positioning.y =
+        event.pageY / zoom - positioning.offsetY - rootElementRect.top;
+      positionSticky(stickyContainer, positioning);
+    }
+  };
+
+  const handlePointerUp = (event: PointerEvent) => {
+    const stickyContainer = stickyContainerRef.current;
+    const positioning = positioningRef.current;
+    if (stickyContainer !== null) {
+      positioning.isDragging = false;
+      stickyContainer.classList.remove('dragging');
+      editor.update(() => {
+        const node = $getNodeByKey(nodeKey);
+        if ($isStickyNode(node)) {
+          node.setPosition(positioning.x, positioning.y);
+        }
+      });
+    }
+    document.removeEventListener('pointermove', handlePointerMove);
+    document.removeEventListener('pointerup', handlePointerUp);
+  };
+
+  const handleDelete = () => {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isStickyNode(node)) {
+        node.remove();
+      }
+    });
+  };
+
+  const handleColorChange = () => {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isStickyNode(node)) {
+        node.toggleColor();
+      }
+    });
+  };
+
+  const {historyState} = useSharedHistoryContext();
+
+  return (
+    <div ref={stickyContainerRef} className="sticky-note-container">
+      <div
+        className={`sticky-note ${color}`}
+        onPointerDown={(event) => {
+          const stickyContainer = stickyContainerRef.current;
+          if (
+            stickyContainer == null ||
+            event.button === 2 ||
+            event.target !== stickyContainer.firstChild
+          ) {
+            // Right click or click on editor should not work
+            return;
+          }
+          const stickContainer = stickyContainer;
+          const positioning = positioningRef.current;
+          if (stickContainer !== null) {
+            const {top, left} = stickContainer.getBoundingClientRect();
+            const zoom = calculateZoomLevel(stickContainer);
+            positioning.offsetX = event.clientX / zoom - left;
+            positioning.offsetY = event.clientY / zoom - top;
+            positioning.isDragging = true;
+            stickContainer.classList.add('dragging');
+            document.addEventListener('pointermove', handlePointerMove);
+            document.addEventListener('pointerup', handlePointerUp);
+            event.preventDefault();
+          }
+        }}>
+        <button
+          onClick={handleDelete}
+          className="delete"
+          aria-label="Delete sticky note"
+          title="Delete">
+          X
+        </button>
+        <button
+          onClick={handleColorChange}
+          className="color"
+          aria-label="Change sticky note color"
+          title="Color">
+          <i className="bucket" />
+        </button>
+        <LexicalNestedComposer
+          initialEditor={caption}
+          initialTheme={StickyEditorTheme}>
+
+        <HistoryPlugin externalHistoryState={historyState} />
+        
+          <PlainTextPlugin
+            contentEditable={
+              <ContentEditable
+                placeholder="What's up?"
+                placeholderClassName="StickyNode__placeholder"
+                className="StickyNode__contentEditable"
+              />
+            }
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+        </LexicalNestedComposer>
+      </div>
+    </div>
+  );
+}

package/src/client/components/inputv3/Rte/nodes/StickyNode.css

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ *
+ *
+ */
+.StickyNode__contentEditable {
+  min-height: 20px;
+  border: 0;
+  resize: none;
+  cursor: text;
+  font-size: 24px;
+  caret-color: rgb(5, 5, 5);
+  display: block;
+  position: relative;
+  outline: 0;
+  padding: 10px;
+  user-select: text;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.StickyNode__placeholder {
+  font-size: 24px;
+  color: #999;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: 30px;
+  left: 20px;
+  width: 120px;
+  user-select: none;
+  white-space: nowrap;
+  display: inline-block;
+  pointer-events: none;
+}