@pstdio/ui 0.0.1

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

@@ -0,0 +1,414 @@
+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

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

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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,163 @@
+.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;
+}