@allbluecn/web-app 0.6.3 → 0.7.0

package/src/components/tiptap/notion-like/notion-like-editor-theme-toggle.tsx

@@ -0,0 +1,66 @@
+// 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 { useEffect, useState } from "react"
+
+import { useTranslation } from 'react-i18next'
+// --- UI Primitives ---
+import { Button } from "../ui-primitive/button/index.tsx"
+
+// --- Icons ---
+import { SunIcon } from "../icons/sun-icon.tsx"
+import { MoonStarIcon } from "../icons/moon-star-icon.tsx"
+
+export function ThemeToggle() {
+  const { t } = useTranslation('editor')
+  const [isDarkMode, setIsDarkMode] = useState<boolean>(false)
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+    const handleChange = () => setIsDarkMode(mediaQuery.matches)
+    mediaQuery.addEventListener("change", handleChange)
+    return () => mediaQuery.removeEventListener("change", handleChange)
+  }, [])
+
+  useEffect(() => {
+    const initialDarkMode =
+      !!document.querySelector('meta[name="color-scheme"][content="dark"]') ||
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    setIsDarkMode(initialDarkMode)
+  }, [])
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", isDarkMode)
+  }, [isDarkMode])
+
+  const toggleDarkMode = () => setIsDarkMode((isDark) => !isDark)
+
+  return (
+    <Button
+      onClick={toggleDarkMode}
+      aria-label={t('theme-switch-to', { mode: isDarkMode ? t('light') : t('dark') })}
+      variant="ghost"
+    >
+      {isDarkMode ? (
+        <MoonStarIcon className="tiptap-button-icon" />
+      ) : (
+        <SunIcon className="tiptap-button-icon" />
+      )}
+    </Button>
+  )
+}

package/src/components/tiptap/notion-like/notion-like-editor-toolbar-floating.tsx

@@ -0,0 +1,435 @@
+// 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 { getClientI18n } from "@/i18n/client"
+import { useEffect, useState } from "react"
+import { useTranslation } from 'react-i18next'
+import { type Editor } from "@tiptap/react"
+import { NodeSelection } from "@tiptap/pm/state"
+import { ExternalLink, Type, LayoutGrid, Trash2, Palette, ChevronDown } from "lucide-react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../hooks/use-tiptap-editor.ts"
+import { useUiEditorState } from "../hooks/use-ui-editor-state.ts"
+import { useIsBreakpoint } from "../hooks/use-is-breakpoint.ts"
+import { useFloatingToolbarVisibility } from "../hooks/use-floating-toolbar-visibility.ts"
+
+// --- Node ---
+import { ImageNodeFloating } from "../node/image-node/image-node-floating.tsx"
+import { DocRefFloating } from "../ui/doc-reference-floating/doc-reference-floating.tsx"
+
+// --- Icons ---
+import { MoreVerticalIcon } from "../icons/more-vertical-icon.tsx"
+
+// --- UI ---
+import { ColorTextPopover, TextStyleColorPanel } from "../ui/color-text-popover/index.tsx"
+import { ImproveDropdown } from "../ui/improve-dropdown/index.tsx"
+import { LinkPopover } from "../ui/link-popover/index.tsx"
+import type { Mark } from "../ui/mark-button/index.tsx"
+import { canToggleMark, MarkButton } from "../ui/mark-button/index.tsx"
+import type { TextAlign } from "../ui/text-align-button/index.tsx"
+import {
+  canSetTextAlign,
+  TextAlignButton,
+} from "../ui/text-align-button/index.tsx"
+import { TurnIntoDropdown } from "../ui/turn-into-dropdown/index.tsx"
+import { IndentButton } from "../ui/indent-button/index.tsx"
+
+// --- Utils ---
+import { isSelectionValid } from "../lib/collab-utils.ts"
+
+// --- Primitive UI Components ---
+import type { ButtonProps } from "../ui-primitive/button/index.tsx"
+import { Button } from "../ui-primitive/button/index.tsx"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../ui-primitive/popover/index.tsx"
+import {
+  Toolbar,
+  ToolbarGroup,
+  ToolbarSeparator,
+} from "../ui-primitive/toolbar/index.tsx"
+import { Separator } from "../ui-primitive/separator/index.tsx"
+
+// --- UI Utils ---
+import { FloatingElement } from "../ui-utils/floating-element/index.tsx"
+
+export function NotionToolbarFloating({ hideAi }: { hideAi?: boolean }) {
+  const { editor } = useTiptapEditor()
+  const isMobile = useIsBreakpoint("max", 480)
+  const { lockDragHandle, aiGenerationActive, commentInputVisible } =
+    useUiEditorState(editor)
+
+  const { shouldShow } = useFloatingToolbarVisibility({
+    editor,
+    isSelectionValid,
+    extraHideWhen: Boolean(aiGenerationActive || commentInputVisible),
+  })
+
+  const [selectedNodeType, setSelectedNodeType] = useState<string | null>(null)
+  useEffect(() => {
+    if (!editor) return
+    const check = () => {
+      const sel = editor.state.selection as { node?: { type: { name: string } } }
+      setSelectedNodeType(sel.node?.type?.name ?? null)
+    }
+    check()
+    editor.on("selectionUpdate", check)
+    editor.on("transaction", check)
+    return () => {
+      editor.off("selectionUpdate", check)
+      editor.off("transaction", check)
+    }
+  }, [editor])
+
+  if (lockDragHandle || isMobile) return null
+
+  const isDocRefSelected = selectedNodeType === "mention" || selectedNodeType === "docCard"
+
+  return (
+    <FloatingElement shouldShow={shouldShow}>
+      <Toolbar variant="floating">
+        {!isDocRefSelected && (
+          <>
+            {!hideAi && (
+            <>
+              <ToolbarGroup>
+                <ImproveDropdown hideWhenUnavailable={true} />
+              </ToolbarGroup>
+
+              <ToolbarSeparator />
+            </>
+            )}
+
+            <ToolbarGroup>
+              <TurnIntoDropdown hideWhenUnavailable={true} />
+            </ToolbarGroup>
+
+            <ToolbarSeparator />
+
+            <ToolbarGroup>
+              <MarkButton type="bold" hideWhenUnavailable={true} />
+              <MarkButton type="italic" hideWhenUnavailable={true} />
+              <MarkButton type="underline" hideWhenUnavailable={true} />
+              <MarkButton type="strike" hideWhenUnavailable={true} />
+              <MarkButton type="code" hideWhenUnavailable={true} />
+            </ToolbarGroup>
+
+            <ToolbarSeparator />
+
+            <ToolbarGroup>
+              <ImageNodeFloating />
+            </ToolbarGroup>
+          </>
+        )}
+
+        {isDocRefSelected && (
+          <ToolbarGroup>
+            <DocRefButtons selectedNodeType={selectedNodeType!} />
+          </ToolbarGroup>
+        )}
+
+        {!isDocRefSelected && (
+          <>
+            <ToolbarGroup>
+              <LinkPopover
+                autoOpenOnLinkActive={false}
+                hideWhenUnavailable={true}
+              />
+              <ColorTextPopover hideWhenUnavailable={true} />
+            </ToolbarGroup>
+
+            <MoreOptions hideWhenUnavailable={true} />
+          </>
+        )}
+      </Toolbar>
+    </FloatingElement>
+  )
+}
+
+function canMoreOptions(editor: Editor | null): boolean {
+  if (!editor) {
+    return false
+  }
+
+  const canTextAlignAny = ["left", "center", "right", "justify"].some((align) =>
+    canSetTextAlign(editor, align as TextAlign)
+  )
+
+  const canMarkAny = ["superscript", "subscript"].some((type) =>
+    canToggleMark(editor, type as Mark)
+  )
+
+  return canMarkAny || canTextAlignAny
+}
+
+function shouldShowMoreOptions(params: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable } = params
+
+  if (!editor) {
+    return false
+  }
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canMoreOptions(editor)
+  }
+
+  return Boolean(editor?.isEditable)
+}
+
+export interface MoreOptionsProps extends Omit<ButtonProps, "type"> {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether to hide the dropdown when no options are available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+}
+
+export function MoreOptions({
+  editor: providedEditor,
+  hideWhenUnavailable = false,
+  ...props
+}: MoreOptionsProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const [show, setShow] = useState(false)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setShow(
+        shouldShowMoreOptions({
+          editor,
+          hideWhenUnavailable,
+        })
+      )
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  if (!show || !editor || !editor.isEditable) {
+    return null
+  }
+
+  return (
+    <>
+      <ToolbarSeparator />
+      <ToolbarGroup>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              role="button"
+              tabIndex={-1}
+              tooltip={getClientI18n().t('more-options')}
+              {...props}
+            >
+              <MoreVerticalIcon className="tiptap-button-icon" />
+            </Button>
+          </PopoverTrigger>
+
+          <PopoverContent
+            side="top"
+            align="end"
+            alignOffset={4}
+            sideOffset={4}
+            asChild
+          >
+            <Toolbar variant="floating" tabIndex={0}>
+              <ToolbarGroup>
+                <MarkButton type="superscript" />
+                <MarkButton type="subscript" />
+              </ToolbarGroup>
+
+              <ToolbarSeparator />
+
+              <ToolbarGroup>
+                <TextAlignButton align="left" />
+                <TextAlignButton align="center" />
+                <TextAlignButton align="right" />
+                <TextAlignButton align="justify" />
+              </ToolbarGroup>
+
+              <ToolbarSeparator />
+
+              <ToolbarGroup>
+                <IndentButton action="outdent" />
+                <IndentButton action="indent" />
+              </ToolbarGroup>
+            </Toolbar>
+          </PopoverContent>
+        </Popover>
+      </ToolbarGroup>
+     </>
+   )
+ }
+
+function DocRefButtons({
+  selectedNodeType,
+}: {
+  selectedNodeType: string
+}) {
+  const { editor } = useTiptapEditor()
+  const isMention = selectedNodeType === "mention"
+  const isDocCard = selectedNodeType === "docCard"
+  const [colorOpen, setColorOpen] = useState(false)
+
+  const getSelAttrs = () => {
+    if (!editor) return null
+    const sel = editor.state.selection as unknown as { node?: { attrs: Record<string, unknown> } }
+    return (sel.node?.attrs ?? {}) as { id: string; label: string; docType?: string; docGroup?: string; color?: string }
+  }
+
+  const handleOpenNewTab = () => {
+    const attrs = getSelAttrs()
+    if (!attrs) return
+    const { id, docGroup } = attrs
+    if (docGroup && [getClientI18n().t('laws-regulations'), getClientI18n().t('industry-compliance'), getClientI18n().t('dictionary-entry'), getClientI18n().t('website-bookmark')].includes(docGroup)) {
+      const m: Record<string, string> = { [getClientI18n().t('laws-regulations')]: "law", [getClientI18n().t('industry-compliance')]: "compliance", [getClientI18n().t('dictionary-entry')]: "dictionary", [getClientI18n().t('website-bookmark')]: "bookmarks" }
+      window.open(`/knowledge/${m[docGroup]}/${id}`, "_blank")
+    } else {
+      window.open(`/knowledge/doc/${id}`, "_blank")
+    }
+  }
+
+  const handleSwitch = (view: "title" | "card") => {
+    const attrs = getSelAttrs()
+    if (!editor || !attrs) return
+
+    if (view === "card" && isMention) {
+      editor.chain().focus().command(({ tr, state }) => {
+        let mentionPos = -1
+        state.doc.descendants((n, pos) => {
+          if (n.type.name === "mention" && n.attrs.id === attrs.id) {
+            mentionPos = pos
+            return false
+          }
+          return true
+        })
+        if (mentionPos < 0) return false
+
+        const $pos = state.doc.resolve(mentionPos)
+        const parentBlock = $pos.node($pos.depth)
+        let start = mentionPos
+        for (let i = $pos.depth; i > 0; i--) {
+          start = $pos.before(i)
+        }
+        const end = start + parentBlock.nodeSize
+
+        const docCardNode = editor.schema.nodes.docCard.create({
+          id: attrs.id,
+          label: attrs.label,
+          docType: attrs.docType || "doc",
+          docGroup: attrs.docGroup || "",
+          color: attrs.color || "",
+        })
+
+        tr.replaceWith(start, end, docCardNode)
+        tr.setSelection(NodeSelection.create(tr.doc, start))
+        return true
+      }).run()
+    }
+
+    if (view === "title" && isDocCard) {
+      editor.state.doc.descendants((n, pos) => {
+        if (n.type.name === "docCard" && n.attrs.id === attrs.id) {
+          editor.chain().focus()
+            .deleteRange({ from: pos, to: pos + n.nodeSize })
+            .insertContentAt(pos, [{ type: "mention", attrs: { id: attrs.id, label: attrs.label, mentionSuggestionChar: "[", docType: attrs.docType || "doc", docGroup: attrs.docGroup || "", color: attrs.color || "" } }, { type: "text", text: " " }])
+            .run()
+          return false
+        }
+        return true
+      })
+    }
+  }
+
+  const handleColorChanged = (payload: { type: string; label: string; value: string }) => {
+    const attrs = getSelAttrs()
+    if (!editor || !attrs) return
+    const isText = payload.type === "text"
+    editor.state.doc.descendants((n, pos) => {
+      if ((n.type.name === "mention" || n.type.name === "docCard") && n.attrs.id === attrs.id) {
+        const newAttrs = { ...n.attrs, [isText ? "color" : "bgColor"]: payload.value }
+        const tr = editor.state.tr.setNodeMarkup(pos, undefined, newAttrs)
+        editor.view.dispatch(tr)
+        return false
+      }
+      return true
+    })
+    setColorOpen(false)
+  }
+
+  const handleDelete = () => {
+    const attrs = getSelAttrs()
+    if (!editor || !attrs) return
+    editor.state.doc.descendants((n, pos) => {
+      if ((n.type.name === "mention" || n.type.name === "docCard") && n.attrs.id === attrs.id) {
+        editor.chain().focus().deleteRange({ from: pos, to: pos + 1 }).run()
+        return false
+      }
+      return true
+    })
+  }
+
+  return (
+    <>
+      <Button variant="ghost" type="button" tooltip={getClientI18n().t('open-in-new-tab')} onClick={handleOpenNewTab}>
+        <ExternalLink className="tiptap-button-icon" />
+      </Button>
+      <Separator />
+      <Button variant="ghost" type="button" tooltip={getClientI18n().t('heading-view')} data-active-state={isMention ? "on" : "off"} onClick={() => handleSwitch("title")}>
+        <Type className="tiptap-button-icon" />
+      </Button>
+      <Button variant="ghost" type="button" tooltip={getClientI18n().t('card-view')} data-active-state={isDocCard ? "on" : "off"} onClick={() => handleSwitch("card")}>
+        <LayoutGrid className="tiptap-button-icon" />
+      </Button>
+      <Separator />
+      <Popover open={colorOpen} onOpenChange={setColorOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="ghost" type="button" tooltip={getClientI18n().t('color')}>
+            <Palette className="tiptap-button-icon" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent side="bottom" align="center">
+          <TextStyleColorPanel onColorChanged={handleColorChanged} editor={null} />
+        </PopoverContent>
+      </Popover>
+      <Separator />
+      <Button variant="ghost" type="button" tooltip={getClientI18n().t('delete')} onClick={handleDelete}>
+        <Trash2 className="tiptap-button-icon" />
+      </Button>
+    </>
+  )
+}

package/src/components/tiptap/notion-like/notion-like-editor.scss

@@ -0,0 +1,181 @@
+body {
+  --tt-toolbar-height: 44px;
+  --tt-theme-text: var(--tt-gray-light-900);
+
+  .dark & {
+    --tt-theme-text: var(--tt-gray-dark-900);
+  }
+}
+
+body {
+  font-family: "Inter", sans-serif;
+  color: var(--tt-theme-text);
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  padding: 0;
+  overscroll-behavior-y: none;
+}
+
+html,
+body {
+  overscroll-behavior-x: none;
+}
+
+html,
+body,
+#root,
+#app {
+  background-color: var(--tt-bg-color);
+}
+
+::-webkit-scrollbar {
+  width: 0.25rem;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--tt-scrollbar-color) transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--tt-scrollbar-color);
+  border-radius: 9999px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.tiptap.ProseMirror {
+  font-family: "DM Sans", sans-serif;
+}
+
+// Important so the this does not override the editor behaviour
+@media screen and (max-width: 480px) {
+  .notion-like-editor-wrapper {
+    width: 100vw;
+    height: 100vh;
+    overflow: auto;
+  }
+  // 嵌入式场景（如需求详情）禁用窄屏全屏，编辑器跟随容器尺寸
+  .notion-like-editor-wrapper.notion-like-editor-wrapper-disable-mobile-fullscreen {
+    width: auto;
+    height: auto;
+    overflow: visible;
+  }
+}
+
+.notion-like-editor-layout {
+  --content-width: var(--notion-content-width, minmax(auto, 708px));
+  --margin-width: var(--notion-margin-width, minmax(96px, 1fr));
+
+  display: grid;
+  grid-template-columns:
+    [full-start] var(--margin-left-width, var(--margin-width))
+    [content-start] var(--content-width)
+    [content-end] var(--margin-right-width, var(--margin-width))
+    [full-end];
+  width: 100%;
+  position: relative;
+}
+
+// Mobile: single column layout
+@media screen and (max-width: 1024px) {
+  .notion-like-editor-layout {
+    --margin-width: minmax(1rem, 1fr);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .notion-like-editor-layout {
+    display: block;
+  }
+}
+
+.notion-full-width .notion-like-editor-layout {
+  --content-width: 1fr;
+  --margin-width: 0px;
+  grid-template-columns:
+    [full-start content-start] var(--content-width)
+    [content-end toc-start] auto
+    [toc-end full-end];
+}
+
+.notion-full-width .toc-sidebar {
+  grid-column: toc-start / toc-end;
+  position: relative;
+}
+
+.notion-full-width .notion-like-editor-content {
+  grid-column: full-start / content-end;
+}
+
+.notion-like-editor-content {
+  grid-column: content-start / content-end;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+// Mobile fallback
+@media screen and (max-width: 768px) {
+  .notion-like-editor-content {
+    max-width: 768px;
+    margin: 0 auto;
+  }
+}
+
+.notion-like-editor-content .tiptap.ProseMirror.notion-like-editor {
+  flex: 1;
+  padding: 3rem 3rem 30vh;
+}
+
+@media screen and (max-width: 480px) {
+  .notion-like-editor-content .tiptap.ProseMirror.notion-like-editor {
+    padding: 1.5rem 1.5rem 30vh;
+  }
+}
+
+// Spinner
+.spinner-container {
+  min-height: 100vh;
+  width: 100%;
+  height: 100%;
+  flex-grow: 1;
+  flex-shrink: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .spinner-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+
+    svg {
+      animation: spin 1s linear infinite;
+      height: 1.25rem;
+      width: 1.25rem;
+
+      circle {
+        opacity: 0.25;
+        stroke: currentColor;
+        stroke-width: 4;
+      }
+
+      path {
+        opacity: 0.75;
+        fill: currentColor;
+      }
+    }
+
+    .spinner-loading-text {
+      text-align: center;
+    }
+  }
+}