@pstdio/ui 0.0.2 → 0.0.4

package/src/components/rich-text/shared/plugins/FloatingTextFormatToolbarPlugin/FloatingTextFormatToolbarPlugin.tsx

@@ -1,414 +0,0 @@
-import "./FloatingTextFormatToolbarPlugin.css";
-
-import { IconButton, Stack, Text } from "@chakra-ui/react";
-import {
-  $isListNode,
-  INSERT_ORDERED_LIST_COMMAND,
-  INSERT_UNORDERED_LIST_COMMAND,
-  REMOVE_LIST_COMMAND,
-} from "@lexical/list";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $createHeadingNode, $isHeadingNode, type HeadingTagType } from "@lexical/rich-text";
-import { $setBlocksType } from "@lexical/selection";
-import { $findMatchingParent, mergeRegister } from "@lexical/utils";
-import {
-  $createParagraphNode,
-  $getSelection,
-  $isRangeSelection,
-  $isRootOrShadowRoot,
-  CLICK_COMMAND,
-  COMMAND_PRIORITY_CRITICAL,
-  COMMAND_PRIORITY_HIGH,
-  FORMAT_TEXT_COMMAND,
-  type LexicalEditor,
-  type LexicalNode,
-  SELECTION_CHANGE_COMMAND,
-} from "lexical";
-import type React from "react";
-import { type Dispatch, useCallback, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { Tooltip } from "../../../../tooltip";
-import { setFloatingElemPos } from "../LinkEditorPlugin/utils/setFloatingElemPos";
-
-// Increase the vertical gap (negative places it below the selection) to avoid overlap
-const GAP = -4;
-
-const blockTypeToBlockName = {
-  bullet: "Bulleted List",
-  check: "Check List",
-  code: "Code Block",
-  h1: "Heading 1",
-  h2: "Heading 2",
-  h3: "Heading 3",
-  h4: "Heading 4",
-  h5: "Heading 5",
-  h6: "Heading 6",
-  number: "Numbered List",
-  paragraph: "Normal",
-  quote: "Quote",
-};
-
-const toKnownBlockType = (type: string) => {
-  return type in blockTypeToBlockName ? (type as keyof typeof blockTypeToBlockName) : null;
-};
-
-const findSelectionElement = (anchorNode: LexicalNode) => {
-  const rootMatch =
-    anchorNode.getKey() === "root"
-      ? anchorNode
-      : $findMatchingParent(anchorNode, (node) => {
-          const parent = node.getParent();
-          return parent !== null && $isRootOrShadowRoot(parent);
-        });
-
-  return rootMatch ?? anchorNode.getTopLevelElementOrThrow();
-};
-
-const resolveBlockTypeFromAnchor = (anchorNode: LexicalNode) => {
-  const element = findSelectionElement(anchorNode);
-
-  if ($isListNode(element)) {
-    return element.getListType() as keyof typeof blockTypeToBlockName;
-  }
-
-  const parentList = $findMatchingParent(anchorNode, (node) => $isListNode(node));
-  if (parentList !== null && $isListNode(parentList)) {
-    return parentList.getListType() as keyof typeof blockTypeToBlockName;
-  }
-
-  const type = $isHeadingNode(element) ? element.getTag() : element.getType();
-  return toKnownBlockType(type);
-};
-
-function FloatingTextToolbar({
-  editor,
-  anchorElem,
-  isToolbarActive,
-  setIsToolbarActive,
-}: {
-  editor: LexicalEditor;
-  anchorElem: HTMLElement;
-  isToolbarActive: boolean;
-  setIsToolbarActive: Dispatch<boolean>;
-}): React.JSX.Element {
-  const editorRef = useRef<HTMLDivElement | null>(null);
-  const [blockType, setBlockType] = useState<keyof typeof blockTypeToBlockName>("paragraph");
-  const [isBold, setIsBold] = useState(false);
-  const [isItalic, setIsItalic] = useState(false);
-  const [isUnderline, setIsUnderline] = useState(false);
-
-  const formatHeading = useCallback(
-    (headingSize: HeadingTagType) => {
-      if (blockType !== headingSize) {
-        editor.update(() => {
-          const selection = $getSelection();
-          $setBlocksType(selection, () => $createHeadingNode(headingSize));
-        });
-      } else {
-        editor.update(() => {
-          const selection = $getSelection();
-          $setBlocksType(selection, () => $createParagraphNode());
-        });
-      }
-    },
-    [blockType, editor],
-  );
-
-  const formatBulletList = useCallback(() => {
-    if (blockType !== "bullet") {
-      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
-    }
-  }, [blockType, editor]);
-
-  const formatNumberedList = useCallback(() => {
-    if (blockType !== "number") {
-      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
-    }
-  }, [blockType, editor]);
-
-  const $updateToolbar = useCallback(() => {
-    const selection = $getSelection();
-    if (!$isRangeSelection(selection)) return;
-
-    setIsBold(selection.hasFormat("bold"));
-    setIsItalic(selection.hasFormat("italic"));
-    setIsUnderline(selection.hasFormat("underline"));
-
-    const nextBlockType = resolveBlockTypeFromAnchor(selection.anchor.getNode());
-    if (nextBlockType) {
-      setBlockType(nextBlockType);
-    }
-  }, []);
-
-  const $updateFloatingToolbar = useCallback(() => {
-    const selection = $getSelection();
-    const editorElem = editorRef.current;
-    const nativeSelection = window.getSelection();
-
-    if (editorElem === null) {
-      return;
-    }
-
-    const rootElement = editor.getRootElement();
-
-    // Show floating toolbar when there's a non-collapsed text selection
-    if (
-      selection !== null &&
-      $isRangeSelection(selection) &&
-      !selection.isCollapsed() &&
-      nativeSelection !== null &&
-      !nativeSelection.isCollapsed &&
-      rootElement !== null &&
-      rootElement.contains(nativeSelection.anchorNode) &&
-      editor.isEditable()
-    ) {
-      const domRect: DOMRect | undefined = nativeSelection.getRangeAt(0).getBoundingClientRect();
-
-      if (domRect) {
-        // Anchor to the bottom of the selection to avoid overlap with tall selections
-        const bottomRect = new DOMRect(domRect.left, domRect.bottom, 0, 0);
-        setFloatingElemPos(bottomRect, editorElem, anchorElem, GAP);
-      }
-
-      setIsToolbarActive(true);
-    } else {
-      if (rootElement !== null) {
-        setFloatingElemPos(null, editorElem, anchorElem);
-      }
-      setIsToolbarActive(false);
-    }
-
-    $updateToolbar();
-
-    return true;
-  }, [anchorElem, editor, setIsToolbarActive, $updateToolbar]);
-
-  useEffect(() => {
-    const scrollerElem = anchorElem.parentElement;
-
-    const update = () => {
-      editor.getEditorState().read(() => {
-        $updateFloatingToolbar();
-      });
-    };
-
-    window.addEventListener("resize", update);
-
-    if (scrollerElem) {
-      scrollerElem.addEventListener("scroll", update);
-    }
-
-    return () => {
-      window.removeEventListener("resize", update);
-      if (scrollerElem) {
-        scrollerElem.removeEventListener("scroll", update);
-      }
-    };
-  }, [anchorElem.parentElement, editor, $updateFloatingToolbar]);
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          $updateFloatingToolbar();
-        });
-      }),
-      editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
-        (_payload) => {
-          $updateFloatingToolbar();
-          return false;
-        },
-        COMMAND_PRIORITY_CRITICAL,
-      ),
-      editor.registerCommand(
-        CLICK_COMMAND,
-        (_payload) => {
-          const selection = $getSelection();
-          if ($isRangeSelection(selection)) {
-            $updateFloatingToolbar();
-          }
-          return false;
-        },
-        COMMAND_PRIORITY_HIGH,
-      ),
-    );
-  }, [editor, $updateFloatingToolbar]);
-
-  return (
-    <div ref={editorRef} className={`floating-text-format-toolbar ${isToolbarActive ? "active" : ""}`}>
-      <Stack direction="row" gap="0.5" alignItems="center">
-        {/* Text formatting buttons */}
-        <Tooltip content="Bold">
-          <IconButton
-            data-active={isBold || undefined}
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
-            }}
-            variant="ghost"
-            aria-label="Bold"
-            size="xs"
-          >
-            <Text fontWeight="bold" fontSize=".75rem">
-              B
-            </Text>
-          </IconButton>
-        </Tooltip>
-        <Tooltip content="Italic">
-          <IconButton
-            data-active={isItalic || undefined}
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
-            }}
-            variant="ghost"
-            aria-label="Italic"
-            size="xs"
-          >
-            <Text fontStyle="italic" fontSize=".75rem">
-              I
-            </Text>
-          </IconButton>
-        </Tooltip>
-        <Tooltip content="Underline">
-          <IconButton
-            data-active={isUnderline || undefined}
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
-            }}
-            variant="ghost"
-            aria-label="Underline"
-            size="xs"
-          >
-            <Text textDecoration="underline" fontSize=".75rem">
-              U
-            </Text>
-          </IconButton>
-        </Tooltip>
-
-        {/* Separator */}
-        <Stack as="span" height="1rem" mx="0.5">
-          <span
-            style={{
-              borderLeft: "1px solid",
-              height: "100%",
-              borderColor: "var(--chakra-colors-border-muted)",
-            }}
-          />
-        </Stack>
-
-        {/* Heading buttons */}
-        <Tooltip content="Heading 1">
-          <IconButton
-            data-active={blockType === "h1" || undefined}
-            variant="ghost"
-            aria-label="Heading 1"
-            size="xs"
-            onClick={() => {
-              formatHeading("h1");
-            }}
-          >
-            <Text fontWeight="thin" fontSize=".8rem">
-              H1
-            </Text>
-          </IconButton>
-        </Tooltip>
-        <Tooltip content="Heading 2">
-          <IconButton
-            data-active={blockType === "h2" || undefined}
-            variant="ghost"
-            aria-label="Heading 2"
-            size="xs"
-            onClick={() => {
-              formatHeading("h2");
-            }}
-          >
-            <Text fontWeight="thin" fontSize=".8rem">
-              H2
-            </Text>
-          </IconButton>
-        </Tooltip>
-        <Tooltip content="Heading 3">
-          <IconButton
-            data-active={blockType === "h3" || undefined}
-            variant="ghost"
-            aria-label="Heading 3"
-            size="xs"
-            onClick={() => {
-              formatHeading("h3");
-            }}
-          >
-            <Text fontWeight="thin" fontSize=".8rem">
-              H3
-            </Text>
-          </IconButton>
-        </Tooltip>
-
-        {/* Separator */}
-        <Stack as="span" height="1rem" mx="0.5">
-          <span
-            style={{
-              borderLeft: "1px solid",
-              height: "100%",
-              borderColor: "var(--chakra-colors-border-muted)",
-            }}
-          />
-        </Stack>
-
-        {/* List buttons */}
-        <Tooltip content="Bulleted List">
-          <IconButton
-            data-active={blockType === "bullet" || undefined}
-            variant="ghost"
-            aria-label="Bulleted List"
-            size="xs"
-            onClick={formatBulletList}
-          >
-            <Text fontWeight="thin" fontSize=".8rem">
-              •
-            </Text>
-          </IconButton>
-        </Tooltip>
-        <Tooltip content="Numbered List">
-          <IconButton
-            data-active={blockType === "number" || undefined}
-            variant="ghost"
-            aria-label="Numbered List"
-            size="xs"
-            onClick={formatNumberedList}
-          >
-            <Text fontWeight="thin" fontSize=".8rem">
-              1.
-            </Text>
-          </IconButton>
-        </Tooltip>
-      </Stack>
-    </div>
-  );
-}
-
-function useFloatingTextToolbar(editor: LexicalEditor, anchorElem: HTMLElement): React.JSX.Element | null {
-  const [isToolbarActive, setIsToolbarActive] = useState(false);
-
-  return createPortal(
-    <FloatingTextToolbar
-      editor={editor}
-      anchorElem={anchorElem}
-      isToolbarActive={isToolbarActive}
-      setIsToolbarActive={setIsToolbarActive}
-    />,
-    anchorElem,
-  );
-}
-
-export function FloatingTextFormatToolbarPlugin({
-  anchorElem = document.body,
-}: {
-  anchorElem?: HTMLElement;
-}): React.JSX.Element | null {
-  const [editor] = useLexicalComposerContext();
-  return useFloatingTextToolbar(editor, anchorElem);
-}

package/src/components/rich-text/shared/plugins/FloatingTextFormatToolbarPlugin/index.ts

@@ -1 +0,0 @@
-export { FloatingTextFormatToolbarPlugin } from "./FloatingTextFormatToolbarPlugin";

package/src/components/rich-text/shared/plugins/HorizontalRulePlugin/HorizontalRuleNode.ts

@@ -1,52 +0,0 @@
-import {
-  type EditorConfig,
-  ElementNode,
-  type LexicalEditor,
-  type LexicalNode,
-  type SerializedElementNode,
-  type Spread,
-} from "lexical";
-
-export type SerializedHRNode = Spread<SerializedElementNode, SerializedElementNode>;
-
-export class HRNode extends ElementNode {
-  static getType() {
-    return "hr";
-  }
-
-  static clone(node: HRNode) {
-    return new HRNode(node?.__key);
-  }
-
-  static importJSON(_serializedNode: SerializedHRNode) {
-    return $createHRNode();
-  }
-
-  exportJSON(): SerializedHRNode {
-    return {
-      ...super.exportJSON(),
-    };
-  }
-
-  createDOM(_config: EditorConfig, _editor: LexicalEditor): HTMLElement {
-    const element = document.createElement("hr");
-    element.style = "margin: 2rem 0;";
-    return element;
-  }
-
-  updateDOM(_prevNode: unknown, _dom: HTMLElement, _config: EditorConfig): boolean {
-    return false;
-  }
-
-  decorate(_editor: LexicalEditor) {
-    return null;
-  }
-}
-
-export function $createHRNode(): HRNode {
-  return new HRNode();
-}
-
-export function $isHRNode(node: LexicalNode | null | undefined): node is HRNode {
-  return node instanceof HRNode;
-}

package/src/components/rich-text/shared/plugins/HorizontalRulePlugin/horizontalRule.ts

@@ -1,16 +0,0 @@
-import type { ElementTransformer } from "@lexical/markdown";
-import type { LexicalNode } from "lexical";
-import { $createHRNode, $isHRNode, HRNode } from "./HorizontalRuleNode";
-
-export const HR: ElementTransformer = {
-  dependencies: [HRNode],
-  export: (node: LexicalNode) => {
-    return $isHRNode(node) ? "***" : null;
-  },
-  regExp: /^(---|\*\*\*|___)\s?$/,
-  replace: (parentNode) => {
-    const line = $createHRNode();
-    parentNode.replace(line);
-  },
-  type: "element",
-};

package/src/components/rich-text/shared/plugins/LinkEditorPlugin/LinkEditorPlugin.css

@@ -1,163 +0,0 @@
-.link-editor {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  max-width: 400px;
-  width: 100%;
-  opacity: 0;
-  background-color: var(--chakra-colors-background-primary);
-  border-radius: 0 0 8px 8px;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-  transition: opacity 0.5s;
-  will-change: transform;
-}
-
-.link-editor .button {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  padding: 6px;
-  border-radius: 8px;
-  cursor: pointer;
-  margin: 0 2px;
-}
-
-.link-editor .button.hovered {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  background-color: var(--chakra-colors-background-secondary);
-}
-
-.link-editor .button i,
-.actions i {
-  background-size: contain;
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-  vertical-align: -0.25em;
-}
-
-.link-editor .button.active,
-.toolbar .button.active {
-  background-color: rgb(223, 232, 250);
-}
-
-.link-editor .link-input {
-  display: block;
-  width: calc(100% - 75px);
-  box-sizing: border-box;
-  margin: 12px 12px;
-  padding: 8px 12px;
-  border-radius: 15px;
-  background-color: #eee;
-  font-size: 15px;
-  color: var(--chakra-colors-foreground-primary);
-  border: 0;
-  outline: 0;
-  position: relative;
-  font-family: inherit;
-}
-
-.link-editor .link-view {
-  display: block;
-  width: calc(100% - 24px);
-  margin: 8px 12px;
-  padding: 8px 12px;
-  border-radius: 15px;
-  font-size: 15px;
-  color: var(--chakra-colors-foreground-primary);
-  border: 0;
-  outline: 0;
-  position: relative;
-  font-family: inherit;
-}
-
-.link-editor .link-view a {
-  color: var(--chakra-colors-foreground-accent-blue-dark);
-  display: block;
-  word-break: break-word;
-  width: calc(100% - 33px);
-}
-
-.link-editor .link-view a:hover {
-  text-decoration: underline;
-}
-
-.link-editor div.link-edit,
-.link-editor div.link-trash,
-.link-editor div.link-cancel,
-.link-editor div.link-confirm {
-  font-size: 18px;
-  width: 28px;
-  padding: 6px 0 0 6px;
-}
-
-.link-editor div.link-cancel,
-.link-editor div.link-confirm {
-  padding: 18px 0 0 0;
-}
-
-.link-editor div.link-edit {
-  position: absolute;
-  right: 30px;
-  top: 0;
-  bottom: 0;
-  cursor: pointer;
-}
-
-.link-editor div.link-trash {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  cursor: pointer;
-}
-
-.link-editor div.link-cancel {
-  margin-right: 28px;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  cursor: pointer;
-  color: var(--chakra-colors-foreground-primary);
-}
-
-.link-editor div.link-confirm {
-  margin-right: 2px;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  cursor: pointer;
-  color: var(--chakra-colors-foreground-primary);
-}
-
-.link-editor .link-input a {
-  color: rgb(33, 111, 219);
-  text-decoration: underline;
-  white-space: nowrap;
-  overflow: hidden;
-  margin-right: 30px;
-  text-overflow: ellipsis;
-}
-
-.link-editor .link-input a:hover {
-  text-decoration: underline;
-}
-
-.link-editor .font-size-wrapper,
-.link-editor .font-family-wrapper {
-  display: flex;
-  margin: 0 4px;
-}
-
-.link-editor select {
-  padding: 6px;
-  border: none;
-  background-color: rgba(0, 0, 0, 0.075);
-  border-radius: 4px;
-}