@thangph2146/lexical-editor 0.0.1

package/src/ui/tooltip.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export const TooltipProvider = ({ children }: { children: React.ReactNode }) => <>{children}</>
+
+export const Tooltip = ({ children }: { children: React.ReactNode, disableHoverableContent?: boolean }) => <div className="editor-tooltip-group">{children}</div>
+
+export const TooltipTrigger = ({ asChild, children, ...props }: React.HTMLAttributes<HTMLElement> & { asChild?: boolean, children: React.ReactNode }) => {
+  const child = asChild ? React.Children.only(children) : children
+  if (!React.isValidElement(child)) return null
+  return React.cloneElement(child as React.ReactElement<any>, {
+    ...props,
+    className: cn((child as React.ReactElement<any>).props.className, "editor-tooltip-trigger")
+  })
+}
+
+export const TooltipContent = ({ children, className, side = "top", ...props }: React.HTMLAttributes<HTMLDivElement> & { side?: "top" | "bottom" | "left" | "right" }) => (
+  <div
+    className={cn(
+      "editor-tooltip-content",
+      `editor-tooltip-content--${side}`,
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+)

package/src/ui/typography.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export const IconSize = ({ size = "medium", children, className }: { size?: "small" | "medium" | "large" | "sm" | "md" | "lg" | "xs" | "xl", children: React.ReactNode, className?: string }) => {
+  const sizeMap: Record<string, string> = {
+    xs: "editor-icon-xs",
+    small: "editor-icon-sm",
+    medium: "editor-icon-md",
+    large: "editor-icon-lg",
+    xl: "editor-icon-xl",
+    sm: "editor-icon-sm",
+    md: "editor-icon-md",
+    lg: "editor-icon-lg",
+  }
+  
+  if (React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<React.HTMLAttributes<HTMLElement>>, {
+      className: cn(sizeMap[size] || sizeMap.medium, (children as React.ReactElement<React.HTMLAttributes<HTMLElement>>).props.className, className)
+    })
+  }
+  
+  return <>{children}</>
+}
+
+export const TypographyP = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("editor-typography-p", className)} {...props} />
+  )
+)
+TypographyP.displayName = "TypographyP"
+
+export const TypographyPSmall = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("editor-typography-p-small", className)} {...props} />
+  )
+)
+TypographyPSmall.displayName = "TypographyPSmall"
+
+export const TypographySpanSmallMuted = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <span ref={ref} className={cn("editor-typography-span-small-muted", className)} {...props} />
+  )
+)
+TypographySpanSmallMuted.displayName = "TypographySpanSmallMuted"

package/src/utils/doc-serialization.ts

@@ -0,0 +1,68 @@
+import { SerializedDocument } from "@lexical/file"
+
+async function* generateReader<T = unknown>(
+  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 || !m[1]) {
+    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(""))
+}