@allbluecn/web-app 0.6.3 → 0.7.0

package/src/components/tiptap/ui-primitive/textarea/textarea.scss

@@ -0,0 +1,42 @@
+:root {
+  --tt-textarea-placeholder: var(--tt-gray-light-a-400);
+  --tt-textarea-border: var(--tt-gray-light-a-200);
+  --tt-textarea-border-focus: var(--tt-gray-light-a-300);
+}
+
+.dark {
+  --tt-textarea-placeholder: var(--tt-gray-dark-a-400);
+  --tt-textarea-border: var(--tt-gray-dark-a-200);
+  --tt-textarea-border-focus: var(--tt-gray-dark-a-300);
+}
+
+.tiptap-textarea {
+  display: flex;
+  width: 100%;
+  min-height: 4rem;
+  padding: 0.5rem 0.625rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--tt-textarea-border);
+  background: transparent;
+  font-size: 1rem;
+  field-sizing: content;
+  outline: none;
+  transition:
+    color,
+    background-color,
+    border-color 150ms;
+}
+
+.tiptap-textarea::placeholder {
+  color: var(--tt-textarea-placeholder);
+}
+
+.tiptap-textarea:focus-visible {
+  border-color: var(--tt-textarea-border-focus);
+}
+
+@media (min-width: 768px) {
+  .tiptap-textarea {
+    font-size: 0.875rem;
+  }
+}

package/src/components/tiptap/ui-primitive/textarea/textarea.tsx

@@ -0,0 +1,32 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import { cn } from "../../lib/utils.ts"
+import "./textarea.scss"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn("textarea", className)}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/tiptap/ui-primitive/textarea-autosize/index.tsx

@@ -0,0 +1,18 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export * from "./textarea-autosize"

package/src/components/tiptap/ui-primitive/textarea-autosize/textarea-autosize.tsx

@@ -0,0 +1,34 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import { useState } from "react"
+import type { TextareaAutosizeProps } from "react-textarea-autosize"
+import ReactTextareaAutosize from "react-textarea-autosize"
+
+// -- Hooks --
+import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect.ts"
+
+export function TextareaAutosize({ ...props }: TextareaAutosizeProps) {
+  const [isRerendered, setIsRerendered] = useState(false)
+
+  useIsomorphicLayoutEffect(() => setIsRerendered(true), [])
+
+  return isRerendered ? <ReactTextareaAutosize {...props} /> : null
+}
+
+TextareaAutosize.displayName = "TextareaAutosize"

package/src/components/tiptap/ui-primitive/toolbar/index.tsx

@@ -0,0 +1,18 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export * from "./toolbar"

package/src/components/tiptap/ui-primitive/toolbar/toolbar.scss

@@ -0,0 +1,98 @@
+:root {
+  --tt-toolbar-height: 2.75rem;
+  --tt-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --tt-toolbar-bg-color: var(--white);
+  --tt-toolbar-border-color: var(--tt-gray-light-a-100);
+}
+
+.dark {
+  --tt-toolbar-bg-color: var(--black);
+  --tt-toolbar-border-color: var(--tt-gray-dark-a-50);
+}
+
+.tiptap-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  &-group {
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+
+    &:empty {
+      display: none;
+    }
+
+    &:empty + .tiptap-separator,
+    .tiptap-separator + &:empty {
+      display: none;
+    }
+  }
+
+  &[data-variant="fixed"] {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    width: 100%;
+    min-height: var(--tt-toolbar-height);
+    background: var(--tt-toolbar-bg-color);
+    border-bottom: 1px solid var(--tt-toolbar-border-color);
+    padding: 0 0.5rem;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    @media (max-width: 480px) {
+      position: absolute;
+      top: auto;
+      height: calc(var(--tt-toolbar-height) + var(--tt-safe-area-bottom));
+      border-top: 1px solid var(--tt-toolbar-border-color);
+      border-bottom: none;
+      padding: 0 0.5rem var(--tt-safe-area-bottom);
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+
+      .tiptap-toolbar-group {
+        flex: 0 0 auto;
+      }
+    }
+  }
+
+  &[data-variant="floating"] {
+    --tt-toolbar-padding: 0.125rem;
+    --tt-toolbar-border-width: 1px;
+
+    padding: 0.188rem;
+    border-radius: calc(
+      var(--tt-toolbar-padding) + var(--tt-radius-lg) +
+        var(--tt-toolbar-border-width)
+    );
+    border: var(--tt-toolbar-border-width) solid var(--tt-toolbar-border-color);
+    background-color: var(--tt-toolbar-bg-color);
+    box-shadow: var(--tt-shadow-elevated-md);
+    outline: none;
+    overflow: hidden;
+
+    &[data-plain="true"] {
+      padding: 0;
+      border-radius: 0;
+      border: none;
+      box-shadow: none;
+      background-color: transparent;
+    }
+
+    @media screen and (max-width: 480px) {
+      width: 100%;
+      border-radius: 0;
+      border: none;
+      box-shadow: none;
+    }
+  }
+}

package/src/components/tiptap/ui-primitive/toolbar/toolbar.tsx

@@ -0,0 +1,139 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react"
+import { Separator } from "../separator/index.tsx"
+import "./toolbar.scss"
+import { cn } from "../../lib/utils.ts"
+import { useMenuNavigation } from "../../hooks/use-menu-navigation.ts"
+import { useComposedRef } from "../../hooks/use-composed-ref.ts"
+
+type BaseProps = React.HTMLAttributes<HTMLDivElement>
+
+interface ToolbarProps extends BaseProps {
+  variant?: "floating" | "fixed"
+}
+
+const useToolbarNavigation = (
+  toolbarRef: React.RefObject<HTMLDivElement | null>
+) => {
+  const [items, setItems] = useState<HTMLElement[]>([])
+
+  const collectItems = useCallback(() => {
+    if (!toolbarRef.current) return []
+    return Array.from(
+      toolbarRef.current.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [role="button"]:not([disabled]), [tabindex="0"]:not([disabled])'
+      )
+    )
+  }, [toolbarRef])
+
+  useEffect(() => {
+    const toolbar = toolbarRef.current
+    if (!toolbar) return
+
+    const updateItems = () => setItems(collectItems())
+
+    updateItems()
+    const observer = new MutationObserver(updateItems)
+    observer.observe(toolbar, { childList: true, subtree: true })
+
+    return () => observer.disconnect()
+  }, [collectItems, toolbarRef])
+
+  const { selectedIndex } = useMenuNavigation<HTMLElement>({
+    containerRef: toolbarRef,
+    items,
+    orientation: "horizontal",
+    onSelect: (el) => el.click(),
+    autoSelectFirstItem: false,
+  })
+
+  useEffect(() => {
+    const toolbar = toolbarRef.current
+    if (!toolbar) return
+
+    const handleFocus = (e: FocusEvent) => {
+      const target = e.target as HTMLElement
+      if (toolbar.contains(target))
+        target.setAttribute("data-focus-visible", "true")
+    }
+
+    const handleBlur = (e: FocusEvent) => {
+      const target = e.target as HTMLElement
+      if (toolbar.contains(target)) target.removeAttribute("data-focus-visible")
+    }
+
+    toolbar.addEventListener("focus", handleFocus, true)
+    toolbar.addEventListener("blur", handleBlur, true)
+
+    return () => {
+      toolbar.removeEventListener("focus", handleFocus, true)
+      toolbar.removeEventListener("blur", handleBlur, true)
+    }
+  }, [toolbarRef])
+
+  useEffect(() => {
+    if (selectedIndex !== undefined && items[selectedIndex]) {
+      items[selectedIndex].focus()
+    }
+  }, [selectedIndex, items])
+}
+
+export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
+  ({ children, className, variant = "fixed", ...props }, ref) => {
+    const toolbarRef = useRef<HTMLDivElement>(null)
+    const composedRef = useComposedRef(toolbarRef, ref)
+    useToolbarNavigation(toolbarRef)
+
+    return (
+      <div
+        ref={composedRef}
+        role="toolbar"
+        aria-label="toolbar"
+        data-variant={variant}
+        className={cn("tiptap-toolbar", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+Toolbar.displayName = "Toolbar"
+
+export const ToolbarGroup = forwardRef<HTMLDivElement, BaseProps>(
+  ({ children, className, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="group"
+      className={cn("tiptap-toolbar-group", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+)
+ToolbarGroup.displayName = "ToolbarGroup"
+
+export const ToolbarSeparator = forwardRef<HTMLDivElement, BaseProps>(
+  ({ ...props }, ref) => (
+    <Separator ref={ref} orientation="vertical" decorative {...props} />
+  )
+)
+ToolbarSeparator.displayName = "ToolbarSeparator"

package/src/components/tiptap/ui-primitive/tooltip/index.tsx

@@ -0,0 +1,18 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export * from "./tooltip"

package/src/components/tiptap/ui-primitive/tooltip/tooltip.scss

@@ -0,0 +1,43 @@
+.tiptap-tooltip {
+  --tt-tooltip-bg: var(--tt-gray-light-900);
+  --tt-tooltip-text: var(--white);
+  --tt-kbd: var(--tt-gray-dark-a-400);
+
+  .dark & {
+    --tt-tooltip-bg: var(--white);
+    --tt-tooltip-text: var(--tt-gray-light-600);
+    --tt-kbd: var(--tt-gray-light-a-400);
+  }
+}
+
+.tiptap-tooltip {
+  z-index: 50;
+  overflow: hidden;
+  border-radius: var(--tt-radius-md, 0.375rem);
+  background-color: var(--tt-tooltip-bg);
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--tt-tooltip-text);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  text-align: center;
+
+  kbd {
+    display: inline-block;
+    text-align: center;
+    vertical-align: baseline;
+    font-family:
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Noto Sans",
+      sans-serif;
+    text-transform: capitalize;
+    color: var(--tt-kbd);
+  }
+}