@thangph2146/lexical-editor 0.0.1

package/src/plugins/toolbar/toolbar-plugin.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { type CSSProperties, type ReactNode, useEffect, useState } from "react"
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
+import { COMMAND_PRIORITY_CRITICAL, SELECTION_CHANGE_COMMAND } from "lexical"
+
+import { ToolbarContext } from "../../context/toolbar-context"
+import { useEditorModal } from "../../editor-hooks/use-modal"
+import { useHeaderHeight } from "../../hooks/use-header-height"
+import { cn } from "../../lib/utils"
+
+export function ToolbarPlugin({
+  children,
+  className,
+  style,
+}: {
+  children: (props: { blockType: string }) => ReactNode
+  className?: string
+  style?: CSSProperties
+}) {
+  const [editor] = useLexicalComposerContext()
+  const { headerHeight } = useHeaderHeight()
+
+  const [activeEditor, setActiveEditor] = useState(editor)
+  const [blockType, setBlockType] = useState<string>("paragraph")
+
+  const [modal, showModal] = useEditorModal()
+
+  const $updateToolbar = () => {}
+
+  useEffect(() => {
+    return activeEditor.registerCommand(
+      SELECTION_CHANGE_COMMAND,
+      (_payload, newEditor) => {
+        setActiveEditor(newEditor)
+        return false
+      },
+      COMMAND_PRIORITY_CRITICAL
+    )
+  }, [activeEditor, editor])
+
+  return (
+    <ToolbarContext
+      activeEditor={activeEditor}
+      $updateToolbar={$updateToolbar}
+      blockType={blockType}
+      setBlockType={setBlockType}
+      showModal={showModal}
+    >
+      {modal}
+
+      <div
+        className={cn(
+          "editor-toolbar",
+          className
+        )}
+        style={{
+          ...style,
+          top: Math.round(headerHeight),
+        }}
+      >
+        {children({ blockType })}
+      </div>
+    </ToolbarContext>
+  )
+}

package/src/plugins/typing-pref-plugin.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+/**
+ * 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 { JSX, useEffect } from "react"
+
+import { useReport } from "../editor-hooks/use-report"
+
+const validInputTypes = new Set([
+  "insertText",
+  "insertCompositionText",
+  "insertFromComposition",
+  "insertLineBreak",
+  "insertParagraph",
+  "deleteCompositionText",
+  "deleteContentBackward",
+  "deleteByComposition",
+  "deleteContent",
+  "deleteContentForward",
+  "deleteWordBackward",
+  "deleteWordForward",
+  "deleteHardLineBackward",
+  "deleteSoftLineBackward",
+  "deleteHardLineForward",
+  "deleteSoftLineForward",
+])
+
+export function TypingPerfPlugin(): JSX.Element | null {
+  const report = useReport()
+  useEffect(() => {
+    let start = 0
+    let timerId: ReturnType<typeof setTimeout> | null
+    let keyPressTimerId: ReturnType<typeof setTimeout> | null
+    let log: Array<DOMHighResTimeStamp> = []
+    let invalidatingEvent = false
+
+    const measureEventEnd = function logKeyPress() {
+      if (keyPressTimerId != null) {
+        if (invalidatingEvent) {
+          invalidatingEvent = false
+        } else {
+          log.push(performance.now() - start)
+        }
+
+        clearTimeout(keyPressTimerId)
+        keyPressTimerId = null
+      }
+    }
+
+    const measureEventStart = function measureEvent() {
+      if (timerId != null) {
+        clearTimeout(timerId)
+        timerId = null
+      }
+
+      // We use a setTimeout(0) instead of requestAnimationFrame, due to
+      // inconsistencies between the sequencing of rAF in different browsers.
+      keyPressTimerId = setTimeout(measureEventEnd, 0)
+      // Schedule a timer to report the results.
+      timerId = setTimeout(() => {
+        const total = log.reduce((a, b) => a + b, 0)
+        const reportedText =
+          "Typing Perf: " + Math.round((total / log.length) * 100) / 100 + "ms"
+        report(reportedText)
+        log = []
+      }, 2000)
+      // Make the time after we do the previous logic, so we don't measure the overhead
+      // for it all.
+      start = performance.now()
+    }
+
+    const beforeInputHandler = function beforeInputHandler(event: InputEvent) {
+      if (!validInputTypes.has(event.inputType) || invalidatingEvent) {
+        invalidatingEvent = false
+        return
+      }
+
+      measureEventStart()
+    }
+
+    const keyDownHandler = function keyDownHandler(event: KeyboardEvent) {
+      const key = event.key
+
+      if (key === "Backspace" || key === "Enter") {
+        measureEventStart()
+      }
+    }
+
+    const pasteHandler = function pasteHandler() {
+      invalidatingEvent = true
+    }
+
+    const cutHandler = function cutHandler() {
+      invalidatingEvent = true
+    }
+
+    window.addEventListener("keydown", keyDownHandler, true)
+    window.addEventListener("selectionchange", measureEventEnd, true)
+    window.addEventListener("beforeinput", beforeInputHandler, true)
+    window.addEventListener("paste", pasteHandler, true)
+    window.addEventListener("cut", cutHandler, true)
+
+    return () => {
+      window.removeEventListener("keydown", keyDownHandler, true)
+      window.removeEventListener("selectionchange", measureEventEnd, true)
+      window.removeEventListener("beforeinput", beforeInputHandler, true)
+      window.removeEventListener("paste", pasteHandler, true)
+      window.removeEventListener("cut", cutHandler, true)
+    }
+  }, [report])
+
+  return null
+}

package/src/shared/can-use-dom.ts

@@ -0,0 +1,4 @@
+export const CAN_USE_DOM: boolean =
+  typeof window !== "undefined" &&
+  typeof window.document !== "undefined" &&
+  typeof window.document.createElement !== "undefined"

package/src/shared/environment.ts

@@ -0,0 +1,47 @@
+import { CAN_USE_DOM } from "../shared/can-use-dom"
+
+declare global {
+  interface Document {
+    documentMode?: unknown
+  }
+
+  interface Window {
+    MSStream?: unknown
+  }
+}
+
+const documentMode =
+  CAN_USE_DOM && "documentMode" in document ? document.documentMode : null
+
+export const IS_APPLE: boolean =
+  CAN_USE_DOM && /Mac|iPod|iPhone|iPad/.test(navigator.platform)
+
+export const IS_FIREFOX: boolean =
+  CAN_USE_DOM && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent)
+
+export const CAN_USE_BEFORE_INPUT: boolean =
+  CAN_USE_DOM && "InputEvent" in window && !documentMode
+    ? "getTargetRanges" in new window.InputEvent("input")
+    : false
+
+export const IS_SAFARI: boolean =
+  CAN_USE_DOM && /Version\/[\d.]+.*Safari/.test(navigator.userAgent)
+
+export const IS_IOS: boolean =
+  CAN_USE_DOM &&
+  /iPad|iPhone|iPod/.test(navigator.userAgent) &&
+  !window.MSStream
+
+export const IS_ANDROID: boolean =
+  CAN_USE_DOM && /Android/.test(navigator.userAgent)
+
+// Keep these in case we need to use them in the future.
+// export const IS_WINDOWS: boolean = CAN_USE_DOM && /Win/.test(navigator.platform);
+export const IS_CHROME: boolean =
+  CAN_USE_DOM && /^(?=.*Chrome).*/i.test(navigator.userAgent)
+// export const canUseTextInputEvent: boolean = CAN_USE_DOM && 'TextEvent' in window && !documentMode;
+
+export const IS_ANDROID_CHROME: boolean = CAN_USE_DOM && IS_ANDROID && IS_CHROME
+
+export const IS_APPLE_WEBKIT =
+  CAN_USE_DOM && /AppleWebKit\/[\d.]+/.test(navigator.userAgent) && !IS_CHROME

package/src/shared/invariant.ts

@@ -0,0 +1,16 @@
+export function invariant(
+  cond?: boolean,
+  message?: string,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- rest args for compile-time replacement
+  ..._args: string[]
+): asserts cond {
+  if (cond) {
+    return
+  }
+
+  throw new Error(
+    "Internal Lexical error: invariant() is meant to be replaced at compile " +
+      "time. There is no runtime version. Error: " +
+      message
+  )
+}

package/src/shared/use-layout-effect.ts

@@ -0,0 +1,12 @@
+import { useEffect, useLayoutEffect } from "react"
+
+import { CAN_USE_DOM } from "../shared/can-use-dom"
+
+// This workaround is no longer necessary in React 19,
+// but we currently support React >=17.x
+// https://github.com/facebook/react/pull/26395
+const useLayoutEffectImpl: typeof useLayoutEffect = CAN_USE_DOM
+  ? useLayoutEffect
+  : useEffect
+
+export default useLayoutEffectImpl

package/src/themes/_mixins.scss

@@ -0,0 +1,107 @@
+/**
+ * Editor Theme Mixins
+ */
+
+@use "variables" as *;
+
+@mixin focus-ring {
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px $editor-bg-color;
+  }
+}
+
+@mixin text-sm {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+}
+
+@mixin flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin flex-center-justify {
+  @include flex-center;
+  justify-content: center;
+}
+
+@mixin shadow-sm {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+@mixin shadow-md {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+@mixin shadow-lg {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+@mixin shadow-xl {
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+@mixin rounded-sm {
+  border-radius: calc($editor-border-radius - 2px);
+}
+
+@mixin rounded-md {
+  border-radius: $editor-border-radius;
+}
+
+@mixin rounded-lg {
+  border-radius: calc($editor-border-radius + 4px);
+}
+
+// --- Unified Hover Styles ---
+@mixin editor-hover-base {
+  background-color: $editor-accent-color;
+  color: $editor-accent-foreground-color;
+  border-color: $editor-accent-color;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
+}
+
+@mixin editor-active-base {
+  transform: translateY(0);
+  box-shadow: none;
+}
+
+@mixin editor-button-interactive {
+  &:hover:not(:disabled):not([data-state="on"]) {
+    @include editor-hover-base;
+  }
+  
+  &:active:not(:disabled) {
+    @include editor-active-base;
+  }
+}
+
+// Interactive mixin for dropdown/menu items
+@mixin editor-dropdown-item-interactive {
+  &:hover, &:focus, &--selected, &[aria-selected="true"], &[data-selected="true"] {
+    background-color: $editor-accent-color;
+    color: $editor-accent-foreground-color;
+    border-color: $editor-border-color; // Use border color for visibility
+  }
+  
+  &:active {
+    @include editor-active-base;
+  }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes editor-fade-in {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}

package/src/themes/_variables.scss

@@ -0,0 +1,33 @@
+/**
+ * Editor Theme Variables
+ * Use these variables to customize the editor's appearance.
+ * All variables use !default so they can be overridden by the consumer.
+ */
+
+// Typography
+$editor-font-family: var(--font-inter), "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+$editor-font-size-base: 16px !default;
+$editor-line-height-base: 1.75 !default;
+
+// Colors - Compatible with Shadcn CSS Variables
+$editor-primary-color: var(--primary, #3b82f6) !default; // blue-500 fallback
+$editor-link-color: #3b82f6 !default; // Fixed link color (Blue 500) to ensure consistency across apps
+$editor-text-color: var(--foreground, #1f2937) !default; // gray-800 fallback
+$editor-bg-color: var(--background, transparent) !default;
+$editor-muted-color: var(--muted, #f3f4f6) !default; // gray-100 fallback
+$editor-border-color: var(--border, #d1d5db) !default; // gray-300 fallback
+$editor-quote-border-color: var(--input, #e5e7eb) !default; // gray-200 fallback
+$editor-accent-color: var(--accent, #f1f5f9) !default; // slate-100 fallback
+$editor-accent-foreground-color: var(--accent-foreground, #0f172a) !default; // slate-900 fallback
+
+// Layout
+$editor-border-radius: var(--radius, 8px) !default;
+$editor-spacing-unit: 8px !default;
+
+// Code
+$editor-code-bg: var(--muted, #f3f4f6) !default;
+$editor-code-color: var(--muted-foreground, #1f2937) !default;
+
+// Table
+$editor-table-border-color: var(--border, #d1d5db) !default;
+$editor-table-header-bg: var(--muted, #f9fafb) !default; // gray-50 fallback