5htp-core 0.4.8 → 0.4.9

package/src/client/components/inputv3/Rte/plugins/CollapsiblePlugin/CollapsibleContainerNode.ts

@@ -0,0 +1,168 @@
+/**
+ * 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 {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  ElementNode,
+  isHTMLElement,
+  LexicalEditor,
+  LexicalNode,
+  NodeKey,
+  SerializedElementNode,
+  Spread,
+} from 'lexical';
+import {IS_CHROME} from '../../shared/environment';
+import invariant from '../../shared/invariant';
+
+import {setDomHiddenUntilFound} from './CollapsibleUtils';
+
+type SerializedCollapsibleContainerNode = Spread<
+  {
+    open: boolean;
+  },
+  SerializedElementNode
+>;
+
+export function $convertDetailsElement(
+  domNode: HTMLDetailsElement,
+): DOMConversionOutput | null {
+  const isOpen = domNode.open !== undefined ? domNode.open : true;
+  const node = $createCollapsibleContainerNode(isOpen);
+  return {
+    node,
+  };
+}
+
+export class CollapsibleContainerNode extends ElementNode {
+  __open: boolean;
+
+  constructor(open: boolean, key?: NodeKey) {
+    super(key);
+    this.__open = open;
+  }
+
+  static getType(): string {
+    return 'collapsible-container';
+  }
+
+  static clone(node: CollapsibleContainerNode): CollapsibleContainerNode {
+    return new CollapsibleContainerNode(node.__open, node.__key);
+  }
+
+  createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement {
+    // details is not well supported in Chrome #5582
+    let dom: HTMLElement;
+    if (IS_CHROME) {
+      dom = document.createElement('div');
+      dom.setAttribute('open', '');
+    } else {
+      const detailsDom = document.createElement('details');
+      detailsDom.open = this.__open;
+      detailsDom.addEventListener('toggle', () => {
+        const open = editor.getEditorState().read(() => this.getOpen());
+        if (open !== detailsDom.open) {
+          editor.update(() => this.toggleOpen());
+        }
+      });
+      dom = detailsDom;
+    }
+    dom.classList.add('Collapsible__container');
+
+    return dom;
+  }
+
+  updateDOM(
+    prevNode: CollapsibleContainerNode,
+    dom: HTMLDetailsElement,
+  ): boolean {
+    const currentOpen = this.__open;
+    if (prevNode.__open !== currentOpen) {
+      // details is not well supported in Chrome #5582
+      if (IS_CHROME) {
+        const contentDom = dom.children[1];
+        invariant(
+          isHTMLElement(contentDom),
+          'Expected contentDom to be an HTMLElement',
+        );
+        if (currentOpen) {
+          dom.setAttribute('open', '');
+          contentDom.hidden = false;
+        } else {
+          dom.removeAttribute('open');
+          setDomHiddenUntilFound(contentDom);
+        }
+      } else {
+        dom.open = this.__open;
+      }
+    }
+
+    return false;
+  }
+
+  static importDOM(): DOMConversionMap<HTMLDetailsElement> | null {
+    return {
+      details: (domNode: HTMLDetailsElement) => {
+        return {
+          conversion: $convertDetailsElement,
+          priority: 1,
+        };
+      },
+    };
+  }
+
+  static importJSON(
+    serializedNode: SerializedCollapsibleContainerNode,
+  ): CollapsibleContainerNode {
+    const node = $createCollapsibleContainerNode(serializedNode.open);
+    return node;
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement('details');
+    element.classList.add('Collapsible__container');
+    element.setAttribute('open', this.__open.toString());
+    return {element};
+  }
+
+  exportJSON(): SerializedCollapsibleContainerNode {
+    return {
+      ...super.exportJSON(),
+      open: this.__open,
+      type: 'collapsible-container',
+      version: 1,
+    };
+  }
+
+  setOpen(open: boolean): void {
+    const writable = this.getWritable();
+    writable.__open = open;
+  }
+
+  getOpen(): boolean {
+    return this.getLatest().__open;
+  }
+
+  toggleOpen(): void {
+    this.setOpen(!this.getOpen());
+  }
+}
+
+export function $createCollapsibleContainerNode(
+  isOpen: boolean,
+): CollapsibleContainerNode {
+  return new CollapsibleContainerNode(isOpen);
+}
+
+export function $isCollapsibleContainerNode(
+  node: LexicalNode | null | undefined,
+): node is CollapsibleContainerNode {
+  return node instanceof CollapsibleContainerNode;
+}

package/src/client/components/inputv3/Rte/plugins/CollapsiblePlugin/CollapsibleContentNode.ts

@@ -0,0 +1,127 @@
+/**
+ * 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 {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  ElementNode,
+  LexicalEditor,
+  LexicalNode,
+  SerializedElementNode,
+} from 'lexical';
+import {IS_CHROME} from '../../shared/environment';
+import invariant from '../../shared/invariant';
+
+import {$isCollapsibleContainerNode} from './CollapsibleContainerNode';
+import {domOnBeforeMatch, setDomHiddenUntilFound} from './CollapsibleUtils';
+
+type SerializedCollapsibleContentNode = SerializedElementNode;
+
+export function $convertCollapsibleContentElement(
+  domNode: HTMLElement,
+): DOMConversionOutput | null {
+  const node = $createCollapsibleContentNode();
+  return {
+    node,
+  };
+}
+
+export class CollapsibleContentNode extends ElementNode {
+  static getType(): string {
+    return 'collapsible-content';
+  }
+
+  static clone(node: CollapsibleContentNode): CollapsibleContentNode {
+    return new CollapsibleContentNode(node.__key);
+  }
+
+  createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement {
+    const dom = document.createElement('div');
+    dom.classList.add('Collapsible__content');
+    if (IS_CHROME) {
+      editor.getEditorState().read(() => {
+        const containerNode = this.getParentOrThrow();
+        invariant(
+          $isCollapsibleContainerNode(containerNode),
+          'Expected parent node to be a CollapsibleContainerNode',
+        );
+        if (!containerNode.__open) {
+          setDomHiddenUntilFound(dom);
+        }
+      });
+      domOnBeforeMatch(dom, () => {
+        editor.update(() => {
+          const containerNode = this.getParentOrThrow().getLatest();
+          invariant(
+            $isCollapsibleContainerNode(containerNode),
+            'Expected parent node to be a CollapsibleContainerNode',
+          );
+          if (!containerNode.__open) {
+            containerNode.toggleOpen();
+          }
+        });
+      });
+    }
+    return dom;
+  }
+
+  updateDOM(prevNode: CollapsibleContentNode, dom: HTMLElement): boolean {
+    return false;
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      div: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute('data-lexical-collapsible-content')) {
+          return null;
+        }
+        return {
+          conversion: $convertCollapsibleContentElement,
+          priority: 2,
+        };
+      },
+    };
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement('div');
+    element.classList.add('Collapsible__content');
+    element.setAttribute('data-lexical-collapsible-content', 'true');
+    return {element};
+  }
+
+  static importJSON(
+    serializedNode: SerializedCollapsibleContentNode,
+  ): CollapsibleContentNode {
+    return $createCollapsibleContentNode();
+  }
+
+  isShadowRoot(): boolean {
+    return true;
+  }
+
+  exportJSON(): SerializedCollapsibleContentNode {
+    return {
+      ...super.exportJSON(),
+      type: 'collapsible-content',
+      version: 1,
+    };
+  }
+}
+
+export function $createCollapsibleContentNode(): CollapsibleContentNode {
+  return new CollapsibleContentNode();
+}
+
+export function $isCollapsibleContentNode(
+  node: LexicalNode | null | undefined,
+): node is CollapsibleContentNode {
+  return node instanceof CollapsibleContentNode;
+}

package/src/client/components/inputv3/Rte/plugins/CollapsiblePlugin/CollapsibleTitleNode.ts

@@ -0,0 +1,152 @@
+/**
+ * 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 {
+  $createParagraphNode,
+  $isElementNode,
+  DOMConversionMap,
+  DOMConversionOutput,
+  EditorConfig,
+  ElementNode,
+  LexicalEditor,
+  LexicalNode,
+  RangeSelection,
+  SerializedElementNode,
+} from 'lexical';
+import {IS_CHROME} from '../../shared/environment';
+import invariant from '../../shared/invariant';
+
+import {$isCollapsibleContainerNode} from './CollapsibleContainerNode';
+import {$isCollapsibleContentNode} from './CollapsibleContentNode';
+
+type SerializedCollapsibleTitleNode = SerializedElementNode;
+
+export function $convertSummaryElement(
+  domNode: HTMLElement,
+): DOMConversionOutput | null {
+  const node = $createCollapsibleTitleNode();
+  return {
+    node,
+  };
+}
+
+export class CollapsibleTitleNode extends ElementNode {
+  static getType(): string {
+    return 'collapsible-title';
+  }
+
+  static clone(node: CollapsibleTitleNode): CollapsibleTitleNode {
+    return new CollapsibleTitleNode(node.__key);
+  }
+
+  createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement {
+    const dom = document.createElement('summary');
+    dom.classList.add('Collapsible__title');
+    if (IS_CHROME) {
+      dom.addEventListener('click', () => {
+        editor.update(() => {
+          const collapsibleContainer = this.getLatest().getParentOrThrow();
+          invariant(
+            $isCollapsibleContainerNode(collapsibleContainer),
+            'Expected parent node to be a CollapsibleContainerNode',
+          );
+          collapsibleContainer.toggleOpen();
+        });
+      });
+    }
+    return dom;
+  }
+
+  updateDOM(prevNode: CollapsibleTitleNode, dom: HTMLElement): boolean {
+    return false;
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      summary: (domNode: HTMLElement) => {
+        return {
+          conversion: $convertSummaryElement,
+          priority: 1,
+        };
+      },
+    };
+  }
+
+  static importJSON(
+    serializedNode: SerializedCollapsibleTitleNode,
+  ): CollapsibleTitleNode {
+    return $createCollapsibleTitleNode();
+  }
+
+  exportJSON(): SerializedCollapsibleTitleNode {
+    return {
+      ...super.exportJSON(),
+      type: 'collapsible-title',
+      version: 1,
+    };
+  }
+
+  collapseAtStart(_selection: RangeSelection): boolean {
+    this.getParentOrThrow().insertBefore(this);
+    return true;
+  }
+
+  static transform(): (node: LexicalNode) => void {
+    return (node: LexicalNode) => {
+      invariant(
+        $isCollapsibleTitleNode(node),
+        'node is not a CollapsibleTitleNode',
+      );
+      if (node.isEmpty()) {
+        node.remove();
+      }
+    };
+  }
+
+  insertNewAfter(_: RangeSelection, restoreSelection = true): ElementNode {
+    const containerNode = this.getParentOrThrow();
+
+    if (!$isCollapsibleContainerNode(containerNode)) {
+      throw new Error(
+        'CollapsibleTitleNode expects to be child of CollapsibleContainerNode',
+      );
+    }
+
+    if (containerNode.getOpen()) {
+      const contentNode = this.getNextSibling();
+      if (!$isCollapsibleContentNode(contentNode)) {
+        throw new Error(
+          'CollapsibleTitleNode expects to have CollapsibleContentNode sibling',
+        );
+      }
+
+      const firstChild = contentNode.getFirstChild();
+      if ($isElementNode(firstChild)) {
+        return firstChild;
+      } else {
+        const paragraph = $createParagraphNode();
+        contentNode.append(paragraph);
+        return paragraph;
+      }
+    } else {
+      const paragraph = $createParagraphNode();
+      containerNode.insertAfter(paragraph, restoreSelection);
+      return paragraph;
+    }
+  }
+}
+
+export function $createCollapsibleTitleNode(): CollapsibleTitleNode {
+  return new CollapsibleTitleNode();
+}
+
+export function $isCollapsibleTitleNode(
+  node: LexicalNode | null | undefined,
+): node is CollapsibleTitleNode {
+  return node instanceof CollapsibleTitleNode;
+}

package/src/client/components/inputv3/Rte/plugins/CollapsiblePlugin/CollapsibleUtils.ts

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ *
+ */
+
+export function setDomHiddenUntilFound(dom: HTMLElement): void {
+  // @ts-expect-error
+  dom.hidden = 'until-found';
+}
+
+export function domOnBeforeMatch(dom: HTMLElement, callback: () => void): void {
+  // @ts-expect-error
+  dom.onbeforematch = callback;
+}