@valbuild/ui 0.26.0 → 0.27.0

package/src/components/RichTextEditor/ContentEditable.tsx

@@ -1,117 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import * as React from "react";
-import { useCallback, useState } from "react";
-import "../../richtext/shadowRootPolyFill";
-
-export type Props = {
-  ariaActiveDescendant?: React.AriaAttributes["aria-activedescendant"];
-  ariaAutoComplete?: React.AriaAttributes["aria-autocomplete"];
-  ariaControls?: React.AriaAttributes["aria-controls"];
-  ariaDescribedBy?: React.AriaAttributes["aria-describedby"];
-  ariaExpanded?: React.AriaAttributes["aria-expanded"];
-  ariaLabel?: React.AriaAttributes["aria-label"];
-  ariaLabelledBy?: React.AriaAttributes["aria-labelledby"];
-  ariaMultiline?: React.AriaAttributes["aria-multiline"];
-  ariaOwns?: React.AriaAttributes["aria-owns"];
-  ariaRequired?: React.AriaAttributes["aria-required"];
-  autoCapitalize?: HTMLDivElement["autocapitalize"];
-  "data-testid"?: string | null | undefined;
-} & React.AllHTMLAttributes<HTMLDivElement>;
-
-export function ContentEditable({
-  ariaActiveDescendant,
-  ariaAutoComplete,
-  ariaControls,
-  ariaDescribedBy,
-  ariaExpanded,
-  ariaLabel,
-  ariaLabelledBy,
-  ariaMultiline,
-  ariaOwns,
-  ariaRequired,
-  autoCapitalize,
-  className,
-  id,
-  role = "textbox",
-  spellCheck = true,
-  style,
-  tabIndex,
-  "data-testid": testid,
-  ...rest
-}: Props): JSX.Element {
-  const [editor] = useLexicalComposerContext();
-  const [isEditable, setEditable] = useState(false);
-
-  const ref = useCallback(
-    (rootElement: null | HTMLElement) => {
-      editor.setRootElement(rootElement);
-      const shadowRoot = document.getElementById("val-ui")?.shadowRoot;
-      if (!shadowRoot) {
-        return;
-      }
-      // Lexical doesnt officially support shadow dom yet, but this is a workaround
-      // It happens to work in firefox since their document.getSelection pierces shadow dom
-      // Chrome does not do this,. but has getSelection on the shadowRoot
-      // Safari does not have getSelection on the shadowRoot, and document.getSelection does not pierce shadow dom
-      // So for Safari this is polyfilled in shadowRootPolyFill.js
-      // https://github.com/facebook/lexical/issues/2119
-      //
-      // In the code below we have a hack to override the window object on the editor with the shadowRoot
-      // then it will call getSelection on the shadowRoot instead of the document
-      if ("getSelection" in shadowRoot) {
-        // safari (if polyfilled) and chrome
-        editor._window = shadowRoot as unknown as Window;
-        return;
-      }
-    },
-    [editor]
-  );
-
-  React.useLayoutEffect(() => {
-    setEditable(editor.isEditable());
-    return editor.registerEditableListener((currentIsEditable) => {
-      setEditable(currentIsEditable);
-    });
-  }, [editor]);
-
-  return (
-    <div
-      {...rest}
-      aria-activedescendant={!isEditable ? undefined : ariaActiveDescendant}
-      aria-autocomplete={!isEditable ? "none" : ariaAutoComplete}
-      aria-controls={!isEditable ? undefined : ariaControls}
-      aria-describedby={ariaDescribedBy}
-      aria-expanded={
-        !isEditable
-          ? undefined
-          : role === "combobox"
-          ? !!ariaExpanded
-          : undefined
-      }
-      aria-label={ariaLabel}
-      aria-labelledby={ariaLabelledBy}
-      aria-multiline={ariaMultiline}
-      aria-owns={!isEditable ? undefined : ariaOwns}
-      aria-readonly={!isEditable ? true : undefined}
-      aria-required={ariaRequired}
-      autoCapitalize={autoCapitalize}
-      className={className}
-      contentEditable={isEditable}
-      data-testid={testid}
-      id={id}
-      ref={ref}
-      role={role}
-      spellCheck={spellCheck}
-      style={style}
-      tabIndex={tabIndex}
-    />
-  );
-}
-
-export default function LexicalContentEditable({
-  className,
-}: {
-  className?: string;
-}): JSX.Element {
-  return <ContentEditable className={className} />;
-}

package/src/components/RichTextEditor/Nodes/ImageNode.tsx

@@ -1,100 +0,0 @@
-import {
-  DecoratorNode,
-  LexicalNode,
-  NodeKey,
-  SerializedLexicalNode,
-  Spread,
-} from "lexical";
-
-export type ImagePayload = {
-  src: string;
-  altText?: string;
-  height?: number;
-  width?: number;
-};
-
-export type SerializedImageNode = Spread<ImagePayload, SerializedLexicalNode>;
-
-export class ImageNode extends DecoratorNode<JSX.Element> {
-  __src: string;
-  __sha256?: string;
-  __imageFileExt?: string;
-  __altText?: string;
-  __width?: number;
-  __height?: number;
-
-  static getType(): string {
-    return "image";
-  }
-
-  static clone(node: ImageNode): ImageNode {
-    return new ImageNode({
-      src: node.__src,
-      altText: node.__altText,
-      width: node.__width,
-      height: node.__height,
-    });
-  }
-
-  constructor(payload: ImagePayload, key?: NodeKey) {
-    super(key);
-    this.__src = payload.src;
-    this.__altText = payload.altText;
-    this.__width = payload.width;
-    this.__height = payload.height;
-  }
-
-  exportJSON(): SerializedImageNode {
-    return {
-      altText: this.__altText,
-      height: this.__width,
-      src: this.__src,
-      type: "image",
-      version: 1,
-      width: this.__width,
-    };
-  }
-
-  static importJSON(serializedNode: SerializedImageNode): ImageNode {
-    return $createImageNode(serializedNode);
-  }
-
-  createDOM(): HTMLElement {
-    return document.createElement("div");
-  }
-
-  updateDOM(): false {
-    return false;
-  }
-
-  decorate(): JSX.Element {
-    return (
-      <ImageComponent
-        src={this.__src}
-        altText={this.__altText}
-        empty={this.__empty}
-        height={this.__height}
-        nodeKey={this.getKey()}
-      />
-    );
-  }
-}
-
-function ImageComponent(props: {
-  empty: boolean;
-  altText?: string;
-  height?: number;
-  nodeKey?: NodeKey;
-  src: string;
-  width?: number;
-}): JSX.Element {
-  return <img src={props.src}></img>;
-}
-
-export function $createImageNode(payload: ImagePayload): ImageNode {
-  return new ImageNode(payload);
-}
-
-export function $isImageNode(node: LexicalNode | null): boolean {
-  return node instanceof ImageNode;
-}

package/src/components/RichTextEditor/Plugins/AutoFocus.tsx

@@ -1,12 +0,0 @@
-import { useEffect } from "react";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-
-export function AutoFocus() {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    editor.focus();
-  }, [editor]);
-
-  return null;
-}

package/src/components/RichTextEditor/Plugins/ImagePlugin.tsx

@@ -1,45 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $wrapNodeInElement, mergeRegister } from "@lexical/utils";
-import {
-  $createParagraphNode,
-  $insertNodes,
-  $isRootOrShadowRoot,
-  COMMAND_PRIORITY_EDITOR,
-  createCommand,
-  LexicalCommand,
-} from "lexical";
-import { useEffect } from "react";
-
-import { $createImageNode, ImageNode, ImagePayload } from "../Nodes/ImageNode";
-
-export type InsertImagePayload = Readonly<ImagePayload>;
-
-export const INSERT_IMAGE_COMMAND: LexicalCommand<InsertImagePayload> =
-  createCommand("INSERT_IMAGE_COMMAND");
-
-export default function ImagesPlugin(): JSX.Element | null {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    if (!editor.hasNodes([ImageNode])) {
-      throw new Error("ImagesPlugin: ImageNode not registered on editor");
-    }
-
-    return mergeRegister(
-      editor.registerCommand<InsertImagePayload>(
-        INSERT_IMAGE_COMMAND,
-        (payload) => {
-          const imageNode = $createImageNode(payload);
-          $insertNodes([imageNode]);
-          if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
-            $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
-          }
-          return true;
-        },
-        COMMAND_PRIORITY_EDITOR
-      )
-    );
-  }, [editor]);
-
-  return null;
-}

package/src/components/RichTextEditor/Plugins/LinkEditorPlugin.tsx

@@ -1,58 +0,0 @@
-import { $isLinkNode } from "@lexical/link";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $isAtNodeEnd } from "@lexical/selection";
-import { $findMatchingParent, mergeRegister } from "@lexical/utils";
-import {
-  $getSelection,
-  $isRangeSelection,
-  CLICK_COMMAND,
-  COMMAND_PRIORITY_LOW,
-  ElementNode,
-  RangeSelection,
-  TextNode,
-} from "lexical";
-import { useEffect } from "react";
-
-export function getSelectedNode(
-  selection: RangeSelection
-): TextNode | ElementNode {
-  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) ? anchorNode : focusNode;
-  }
-}
-
-export default function LinkEditorPlugin() {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerCommand(
-        CLICK_COMMAND,
-        (payload) => {
-          const selection = $getSelection();
-          if ($isRangeSelection(selection)) {
-            const node = getSelectedNode(selection);
-            const linkNode = $findMatchingParent(node, $isLinkNode);
-            if ($isLinkNode(linkNode) && (payload.metaKey || payload.ctrlKey)) {
-              window.open(linkNode.getURL(), "_blank");
-              return true;
-            }
-          }
-          return false;
-        },
-        COMMAND_PRIORITY_LOW
-      )
-    );
-  }, []);
-  return null;
-}