@collabchron/notiq 0.2.0 → 1.0.0

package/src/components/ui/write/text-format-floting-toolbar.tsx

@@ -1,346 +0,0 @@
-import { blockTypeToBlockName } from "@/components/providers/ToolbarContext";
-import {
-  $getSelection,
-  COMMAND_PRIORITY_LOW,
-  FORMAT_TEXT_COMMAND,
-  getDOMSelection,
-  LexicalEditor,
-  SELECTION_CHANGE_COMMAND,
-} from "lexical";
-import { Dispatch, useCallback, useEffect, useRef } from "react";
-import { TOGGLE_LINK_COMMAND } from "@lexical/link";
-import { getDOMRangeRect } from "@/components/editor/utils/getDOMRangeRect";
-import { setFloatingElemPosition } from "@/components/editor/utils/setFloatingElemPosition";
-import { mergeRegister } from "@lexical/utils";
-import { Separator } from "@/components/ui/separator";
-import BlockFormatDropDown from "../drop-downs/block-format";
-import { useIsMobile } from "@/components/editor/hooks/use-mobile";
-import { Toggle } from "@/components/ui/toggle";
-import { SHORTCUTS } from "@/components/editor/plugins/ShortcutsPlugin/shortcuts";
-import { Bold, Code, Italic, Link, UnderlineIcon } from "lucide-react";
-import Color from "../drop-downs/color";
-import { sanitizeUrl } from "@/components/editor/utils/url";
-import TextFormat from "../drop-downs/text-format";
-import Font from "../drop-downs/font";
-import FontSize from "../drop-downs/font-size";
-import AiButton from "../ai/ai-button";
-
-
-
-
-
-
-export default function TextFormatFloatingToolbar({
-  editor,
-  anchorElem,
-  isLink,
-  isBold,
-  isItalic,
-  isUnderline,
-  isUppercase,
-  isLowercase,
-  isCapitalize,
-  isCode,
-  fontColor,
-  isStrikethrough,
-  isSubscript,
-  isSuperscript,
-  bgColor,
-  setIsLinkEditMode,
-  blockType,
-  fontFamily,
-  rootType,
-  textAlign,
-  fontSize,
-}: {
-  editor: LexicalEditor;
-  anchorElem: HTMLElement;
-  isBold: boolean;
-  isCode: boolean;
-  bgColor: string;
-  fontColor: string;
-  isItalic: boolean;
-  isLink: boolean;
-  fontFamily: string;
-  isUppercase: boolean;
-  isLowercase: boolean;
-  fontSize: string;
-  isCapitalize: boolean;
-  isStrikethrough: boolean;
-  isSubscript: boolean;
-  isSuperscript: boolean;
-  isUnderline: boolean;
-  setIsLinkEditMode: Dispatch<boolean>;
-  blockType: keyof typeof blockTypeToBlockName;
-  rootType: "root" | "table";
-  textAlign: "left" | "center" | "right" | "justify" | null;
-}): React.JSX.Element {
-  const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);
-  const isSmall = useIsMobile();
-
-  const insertLink = useCallback(() => {
-    if (!isLink) {
-      setIsLinkEditMode(true);
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl("https://"));
-    } else {
-      setIsLinkEditMode(false);
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
-    }
-  }, [editor, setIsLinkEditMode, isLink]);
-  function mouseMoveListener(e: MouseEvent) {
-    if (
-      popupCharStylesEditorRef?.current &&
-      (e.buttons === 1 || e.buttons === 3)
-    ) {
-      if (popupCharStylesEditorRef.current.style.pointerEvents !== "none") {
-        const x = e.clientX;
-        const y = e.clientY;
-        const elementUnderMouse = document.elementFromPoint(x, y);
-
-        if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {
-          // Mouse is not over the target element => not a normal click, but probably a drag
-          popupCharStylesEditorRef.current.style.pointerEvents = "none";
-        }
-      }
-    }
-  }
-  function mouseUpListener(e: MouseEvent) {
-    if (popupCharStylesEditorRef?.current) {
-      if (popupCharStylesEditorRef.current.style.pointerEvents !== "auto") {
-        popupCharStylesEditorRef.current.style.pointerEvents = "auto";
-      }
-    }
-  }
-
-  useEffect(() => {
-    if (popupCharStylesEditorRef?.current) {
-      document.addEventListener("mousemove", mouseMoveListener);
-      document.addEventListener("mouseup", mouseUpListener);
-
-      return () => {
-        document.removeEventListener("mousemove", mouseMoveListener);
-        document.removeEventListener("mouseup", mouseUpListener);
-      };
-    }
-  }, [popupCharStylesEditorRef]);
-
-  const $updateTextFormatFloatingToolbar = useCallback(() => {
-    const selection = $getSelection();
-    const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
-    const nativeSelection = getDOMSelection(editor._window);
-
-    if (!popupCharStylesEditorElem) return;
-
-    const rootElement = editor.getRootElement();
-    if (
-      selection &&
-      nativeSelection &&
-      !nativeSelection.isCollapsed &&
-      rootElement &&
-      rootElement.contains(nativeSelection.anchorNode)
-    ) {
-      const rangeRect = getDOMRangeRect(nativeSelection, rootElement);
-
-      setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);
-    }
-  }, [editor, anchorElem]);
-
-
-
-
-  useEffect(() => {
-    const scrollerElem = anchorElem.parentElement;
-
-    const update = () => {
-      editor.getEditorState().read(() => {
-        $updateTextFormatFloatingToolbar();
-      });
-    };
-
-    window.addEventListener("resize", update);
-    if (scrollerElem) {
-      scrollerElem.addEventListener("scroll", update);
-    }
-
-    return () => {
-      window.removeEventListener("resize", update);
-      if (scrollerElem) {
-        scrollerElem.removeEventListener("scroll", update);
-      }
-    };
-  }, [editor, $updateTextFormatFloatingToolbar, anchorElem]);
-
-  useEffect(() => {
-    editor.getEditorState().read(() => {
-      $updateTextFormatFloatingToolbar();
-    });
-    return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          $updateTextFormatFloatingToolbar();
-        });
-      }),
-
-      editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
-        () => {
-          $updateTextFormatFloatingToolbar();
-          return false;
-        },
-        COMMAND_PRIORITY_LOW
-      )
-    );
-  }, [editor, $updateTextFormatFloatingToolbar]);
-
-
-  return (
-    <div
-      id="toolbar"
-      ref={popupCharStylesEditorRef}
-      className={`
-            h-[30px] p-1 px-2 max-sm:p-2   max-sm:h-[295px] max-sm:w-[32px]  max-sm:overflow-y-auto
-            border dark:border-zinc-800 dark:bg-zinc-900  text-zinc-950 dark:text-zinc-50  border-zinc-200 bg-white/90 
-            inline-flex flex-row max-sm:flex-col items-center shadow-md absolute top-0 left-0  text-sm rounded-[6px]
-        `}
-    >
-      <AiButton editor={editor}/>
-      <Separator
-        orientation="vertical"
-        className="max-sm:h-[1px] max-sm:my-1 max-sm:w-5 h-5 mx-1"
-      />
-      <BlockFormatDropDown
-        editor={editor}
-        blockType={blockType}
-        style={{ height: "25px" }}
-        ShowChevronsUpDown={false}
-        side={isSmall ? "right" : "bottom"}
-        sideOffset={isSmall ? 10 : 5}
-      />
-      <Separator
-        orientation="vertical"
-        className="max-sm:h-[1px] max-sm:my-1 max-sm:w-5 h-5 mx-1"
-      />
-      <FontSize
-        selectionFontSize={fontSize.slice(0, -2)}
-        editor={editor}
-        disabled={false}
-        className="h-[25px]"
-        classNameContent="max-sm:flex-col"
-      />
-      <Separator
-        orientation="vertical"
-        className="max-sm:h-[1px] max-sm:my-1 max-sm:w-5 h-5 mx-1"
-      />
-      <Font
-        disabled={false}
-        style={{ fontFamily: fontFamily, height: "25px", padding: "0px 13px" }}
-        value={fontFamily}
-        editor={editor}
-        ShowChevronsUpDown={false}
-        side={isSmall ? "right" : "bottom"}
-        sideOffset={isSmall ? 10 : 5}
-      />
-      <Separator
-        orientation="vertical"
-        className="max-sm:h-[1px] max-sm:my-1 max-sm:w-5 h-5 mx-1"
-      />
-      <div className="flex  flex-row max-sm:flex-col gap-1 items-center justify-center">
-        <Toggle
-          variant={"outline"}
-          size={"floting"}
-          pressed={isBold}
-          onPressedChange={() => {
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
-          }}
-          tip={`Bold ${SHORTCUTS.BOLD}`}
-          aria-label={`Format text as bold. Shortcut: ${SHORTCUTS.BOLD}`}
-        >
-          <Bold />
-        </Toggle>
-        <Toggle
-          variant={"outline"}
-          size={"floting"}
-          pressed={isItalic}
-          onPressedChange={() => {
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
-          }}
-          tip={`Italic (${SHORTCUTS.ITALIC})`}
-          type="button"
-          aria-label={`Format text as italics. Shortcut: ${SHORTCUTS.ITALIC}`}
-        >
-          <Italic />
-        </Toggle>
-        <Toggle
-          variant={"outline"}
-          size={"floting"}
-          pressed={isUnderline}
-          onPressedChange={() => {
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
-          }}
-          tip={`Underline (${SHORTCUTS.UNDERLINE})`}
-          type="button"
-          aria-label={`Format text to underlined. Shortcut: ${SHORTCUTS.UNDERLINE}`}
-        >
-          <UnderlineIcon />
-        </Toggle>
-        <Toggle
-          variant={"outline"}
-          size={"floting"}
-          pressed={isCode}
-          onPressedChange={() => {
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
-          }}
-          tip={`Insert code block (${SHORTCUTS.INSERT_CODE_BLOCK})`}
-          type="button"
-          aria-label="Insert code block"
-        >
-          <Code />
-        </Toggle>
-        <Toggle
-          variant={"outline"}
-          size={"floting"}
-          onPressedChange={insertLink}
-          pressed={isLink}
-          aria-label="Insert link"
-          tip={`Insert link (${SHORTCUTS.INSERT_LINK})`}
-          type="button"
-        >
-          <Link />
-        </Toggle>
-      </div>
-      <Separator
-        orientation="vertical"
-        className="max-sm:h-[1px] max-sm:my-1 max-sm:w-5 h-5 mx-1"
-      />
-      <Color
-        disabled={false}
-        side={isSmall ? "right" : "bottom"}
-        sideOffset={isSmall ? 10 : 5}
-        style={{ height: "25px" }}
-        color={fontColor}
-        bgColor={bgColor}
-        editor={editor}
-      />
-      <Separator
-        orientation="vertical"
-        className="max-sm:h-[1px] max-sm:my-1 max-sm:w-5 h-5 mx-1"
-      />
-      <TextFormat
-        disabled={false}
-        editor={editor}
-        ShowChevronsUpDown={false}
-        side={isSmall ? "right" : "bottom"}
-        sideOffset={isSmall ? 10 : 5}
-        style={{ height: "2px" }}
-        toolbarState={{
-          isLowercase,
-          isUppercase,
-          isCapitalize,
-          isStrikethrough,
-          isSubscript,
-          isSuperscript
-        }}
-      />
-    </div>
-  );
-}

package/src/lib/edgestore.ts

@@ -1,9 +0,0 @@
-'use client';
-
-import { EdgeStoreRouter } from '@/app/api/edgestore/[...edgestore]/route';
-import { createEdgeStoreProvider } from '@edgestore/react';
-
-const { EdgeStoreProvider, useEdgeStore } =
-  createEdgeStoreProvider<EdgeStoreRouter>();
-
-export { EdgeStoreProvider, useEdgeStore };

package/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/src/utils/docSerialization.ts

@@ -1,77 +0,0 @@
-/**
- * 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 {SerializedDocument} from '@lexical/file';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-async function* generateReader<T = any>(
-  reader: ReadableStreamDefaultReader<T>,
-) {
-  let done = false;
-  while (!done) {
-    const res = await reader.read();
-    const {value} = res;
-    if (value !== undefined) {
-      yield value;
-    }
-    done = res.done;
-  }
-}
-
-async function readBytestoString(
-  reader: ReadableStreamDefaultReader,
-): Promise<string> {
-  const output = [];
-  const chunkSize = 0x8000;
-  for await (const value of generateReader(reader)) {
-    for (let i = 0; i < value.length; i += chunkSize) {
-      output.push(String.fromCharCode(...value.subarray(i, i + chunkSize)));
-    }
-  }
-  return output.join('');
-}
-
-export async function docToHash(doc: SerializedDocument): Promise<string> {
-  const cs = new CompressionStream('gzip');
-  const writer = cs.writable.getWriter();
-  const [, output] = await Promise.all([
-    writer
-      .write(new TextEncoder().encode(JSON.stringify(doc)))
-      .then(() => writer.close()),
-    readBytestoString(cs.readable.getReader()),
-  ]);
-  return `#doc=${btoa(output)
-    .replace(/\//g, '_')
-    .replace(/\+/g, '-')
-    .replace(/=+$/, '')}`;
-}
-
-export async function docFromHash(
-  hash: string,
-): Promise<SerializedDocument | null> {
-  const m = /^#doc=(.*)$/.exec(hash);
-  if (!m) {
-    return null;
-  }
-  const ds = new DecompressionStream('gzip');
-  const writer = ds.writable.getWriter();
-  const b64 = atob(m[1].replace(/_/g, '/').replace(/-/g, '+'));
-  const array = new Uint8Array(b64.length);
-  for (let i = 0; i < b64.length; i++) {
-    array[i] = b64.charCodeAt(i);
-  }
-  const closed = writer.write(array).then(() => writer.close());
-  const output = [];
-  for await (const chunk of generateReader(
-    ds.readable.pipeThrough(new TextDecoderStream()).getReader(),
-  )) {
-    output.push(chunk);
-  }
-  await closed;
-  return JSON.parse(output.join(''));
-}