@allbluecn/web-app 0.6.3 → 0.7.0

package/src/components/tiptap/node/list-node/list-node.scss

@@ -0,0 +1,208 @@
+.tiptap.ProseMirror {
+  --tt-checklist-bg-color: var(--tt-gray-light-a-100);
+  --tt-checklist-bg-active-color: var(--tt-gray-light-a-900);
+  --tt-checklist-border-color: var(--tt-gray-light-a-200);
+  --tt-checklist-border-active-color: var(--tt-gray-light-a-900);
+  --tt-checklist-check-icon-color: var(--white);
+  --tt-checklist-text-active: var(--tt-gray-light-a-500);
+
+  .dark & {
+    --tt-checklist-bg-color: var(--tt-gray-dark-a-100);
+    --tt-checklist-bg-active-color: var(--tt-gray-dark-a-900);
+    --tt-checklist-border-color: var(--tt-gray-dark-a-200);
+    --tt-checklist-border-active-color: var(--tt-gray-dark-a-900);
+    --tt-checklist-check-icon-color: var(--black);
+    --tt-checklist-text-active: var(--tt-gray-dark-a-500);
+  }
+}
+
+/* =====================
+     LISTS
+     ===================== */
+.tiptap.ProseMirror {
+  // Common list styles
+  ol,
+  ul {
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+    padding-left: 1.5em;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    ol,
+    ul {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  li {
+    p {
+      margin-top: 0;
+      line-height: 1.6;
+    }
+  }
+
+  // Ordered lists
+  ol {
+    list-style: decimal;
+
+    ol {
+      list-style: lower-alpha;
+
+      ol {
+        list-style: lower-roman;
+
+        ol {
+          list-style: decimal;
+
+          ol {
+            list-style: lower-alpha;
+
+            ol {
+              list-style: lower-roman;
+
+              ol {
+                list-style: decimal;
+
+                ol {
+                  list-style: lower-alpha;
+
+                  ol {
+                    list-style: lower-roman;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Unordered lists
+  ul:not([data-type="taskList"]) {
+    list-style: disc;
+
+    ul {
+      list-style: circle;
+
+      ul {
+        list-style: square;
+
+        ul {
+          list-style: disc;
+
+          ul {
+            list-style: circle;
+
+            ul {
+              list-style: square;
+
+              ul {
+                list-style: disc;
+
+                ul {
+                  list-style: circle;
+
+                  ul {
+                    list-style: square;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // Task lists
+  ul[data-type="taskList"] {
+    padding-left: 0.25em;
+
+    li {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+
+      &:not(:has(> p:first-child)) {
+        list-style-type: none;
+      }
+
+      &[data-checked="true"] {
+        > div > p {
+          opacity: 0.5;
+          text-decoration: line-through;
+        }
+
+        > div > p span {
+          text-decoration: line-through;
+        }
+      }
+
+      label {
+        position: relative;
+        padding-top: 0.375rem;
+        padding-right: 0.5rem;
+
+        input[type="checkbox"] {
+          position: absolute;
+          opacity: 0;
+          width: 0;
+          height: 0;
+        }
+
+        span {
+          display: block;
+          width: 1em;
+          height: 1em;
+          border: 1px solid var(--tt-checklist-border-color);
+          border-radius: var(--tt-radius-xs, 0.25rem);
+          position: relative;
+          cursor: pointer;
+          background-color: var(--tt-checklist-bg-color);
+          transition:
+            background-color 80ms ease-out,
+            border-color 80ms ease-out;
+
+          &::before {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 0.75em;
+            height: 0.75em;
+            background-color: var(--tt-checklist-check-icon-color);
+            opacity: 0;
+            -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E")
+              center/contain no-repeat;
+            mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E")
+              center/contain no-repeat;
+          }
+        }
+
+        input[type="checkbox"]:checked + span {
+          background: var(--tt-checklist-bg-active-color);
+          border-color: var(--tt-checklist-border-active-color);
+
+          &::before {
+            opacity: 1;
+          }
+        }
+      }
+
+      div {
+        flex: 1 1 0%;
+        min-width: 0;
+      }
+    }
+  }
+}

package/src/components/tiptap/node/mention-extension.ts

@@ -0,0 +1,163 @@
+import { getClientI18n } from '@/i18n/client'
+// 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 { Mention } from "@tiptap/extension-mention"
+
+const DOC_REF_SVG: Record<
+  string,
+  Array<[string, Record<string, string>]>
+> = {
+  "file-text": [
+    ["path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }],
+    ["polyline", { points: "14 2 14 8 20 8" }],
+    ["line", { x1: "16", y1: "13", x2: "8", y2: "13" }],
+    ["line", { x1: "16", y1: "17", x2: "8", y2: "17" }],
+  ],
+  scale: [
+    ["path", { d: "m16 16 3-8 3 8c-.14.2-.34.2-.5 0-.2-.3-.4-.5-.5 0-.14.24-.34.24-.5 0-.2-.3-.4-.5-.5 0-.14.24-.34.24-.5 0" }],
+    ["path", { d: "m4 16 3-8 3 8c-.14.2-.34.2-.5 0-.2-.3-.4-.5-.5 0-.14.24-.34.24-.5 0-.2-.3-.4-.5-.5 0-.14.24-.34.24-.5 0" }],
+    ["path", { d: "M7 21h10" }],
+    ["path", { d: "M12 3v18" }],
+    ["path", { d: "M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2" }],
+  ],
+  "shield-check": [
+    ["path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" }],
+    ["path", { d: "m9 12 2 2 4-4" }],
+  ],
+  "book-marked": [
+    ["path", { d: "M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" }],
+    ["polyline", { points: "10 2 10 10 13 7 16 10 16 2" }],
+  ],
+  bookmark: [
+    ["path", { d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" }],
+  ],
+  network: [
+    ["rect", { x: "3", y: "3", width: "8", height: "8", rx: "2" }],
+    ["rect", { x: "13", y: "3", width: "8", height: "8", rx: "2" }],
+    ["path", { d: "M7 11v4a2 2 0 0 0 2 2h4" }],
+  ],
+  table: [
+    ["rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }],
+    ["path", { d: "M3 9h18" }],
+    ["path", { d: "M3 15h18" }],
+    ["path", { d: "M9 3v18" }],
+    ["path", { d: "M15 3v18" }],
+  ],
+  "grid-3x3": [
+    ["rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }],
+    ["path", { d: "M3 9h18" }],
+    ["path", { d: "M3 15h18" }],
+    ["path", { d: "M9 3v18" }],
+    ["path", { d: "M15 3v18" }],
+  ],
+}
+
+function getDocRefSvgChildren(
+  type: string,
+  group: string,
+): Array<[string, Record<string, string>]> {
+  const GROUP_ICON_MAP: Record<string, string> = {
+    [getClientI18n().t('laws-regulations')]: "scale",
+    [getClientI18n().t('industry-compliance')]: "shield-check",
+    [getClientI18n().t('dictionary-entry')]: "book-marked",
+    [getClientI18n().t('website-bookmark')]: "bookmark",
+  }
+  const TYPE_ICON_MAP: Record<string, string> = {
+    doc: "file-text",
+    mindmap: "network",
+    sheet: "table",
+    table: "grid-3x3",
+  }
+  const iconKey =
+    GROUP_ICON_MAP[group] ?? TYPE_ICON_MAP[type] ?? "file-text"
+  return DOC_REF_SVG[iconKey] ?? DOC_REF_SVG["file-text"] ?? []
+}
+
+export const MentionExtension = Mention.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      docType: { default: "doc", parseHTML: (el) => el.getAttribute("data-doc-type") || "doc" },
+      docGroup: { default: "", parseHTML: (el) => el.getAttribute("data-doc-group") || "" },
+      color: { default: "", parseHTML: (el) => el.getAttribute("data-color") || "" },
+      bgColor: { default: "", parseHTML: (el) => el.getAttribute("data-bg-color") || "" },
+    }
+  },
+
+  renderHTML({ node }) {
+    const char = node.attrs.mentionSuggestionChar || "@"
+    if (char === "[") {
+      const type = (node.attrs.docType as string) || "doc"
+      const group = (node.attrs.docGroup as string) || ""
+      const color = (node.attrs.color as string) || ""
+      const bgColor = (node.attrs.bgColor as string) || ""
+      const svgChildren = getDocRefSvgChildren(type, group)
+      const styleParts: string[] = []
+      if (color) styleParts.push(`color: ${color}`)
+      if (bgColor) styleParts.push(`background-color: ${bgColor}`)
+      return [
+        "span",
+        {
+          "data-type": "mention",
+          "data-id": node.attrs.id,
+          "data-label": node.attrs.label,
+          "data-mention-suggestion-char": char,
+          "data-doc-type": node.attrs.docType || "doc",
+          "data-doc-group": node.attrs.docGroup || "",
+          "data-color": color,
+          "data-bg-color": bgColor,
+          class: "tiptap-doc-reference",
+          style: styleParts.length ? styleParts.join("; ") : undefined,
+        },
+        [
+          "span",
+          { class: "tiptap-doc-reference-icon" },
+          [
+            "http://www.w3.org/2000/svg svg",
+            {
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+          },
+            ...svgChildren,
+          ],
+        ],
+        node.attrs.label || node.attrs.id,
+      ]
+    }
+    return [
+      "span",
+      {
+        "data-type": "mention",
+        "data-id": node.attrs.id,
+        "data-label": node.attrs.label,
+        "data-mention-suggestion-char": char,
+      },
+      `@${node.attrs.label || node.attrs.id}`,
+    ]
+  },
+
+  renderText({ node }) {
+    const char = node.attrs.mentionSuggestionChar || "@"
+    if (char === "[") return `[[${node.attrs.label || node.attrs.id}]]`
+    return `@${node.attrs.label || node.attrs.id}`
+  },
+})

package/src/components/tiptap/node/mindmap-node/mindmap-extension.ts

@@ -0,0 +1,87 @@
+// 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 { Node, mergeAttributes } from "@tiptap/core"
+import { ReactNodeViewRenderer } from "@tiptap/react"
+import { MindmapNodeView } from "./mindmap-node-view"
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    mindmap: {
+      insertMindmap: () => ReturnType
+    }
+  }
+}
+
+export const MindmapExtension = Node.create({
+  name: "mindmap",
+  group: "block",
+  atom: true,
+  selectable: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      nodeData: {
+        default: null,
+        parseHTML: (element: HTMLElement) => {
+          const raw = element.getAttribute("data-mindmap")
+          if (!raw) return null
+          try {
+            return JSON.parse(raw)
+          } catch {
+            return null
+          }
+        },
+        renderHTML: (attributes: Record<string, unknown>) => {
+          if (!attributes.nodeData) return {}
+          return { "data-mindmap": JSON.stringify(attributes.nodeData) }
+        },
+      },
+      direction: {
+        default: 2,
+        parseHTML: (element: HTMLElement) =>
+          Number(element.getAttribute("data-direction") ?? 2),
+        renderHTML: (attributes: Record<string, unknown>) => ({
+          "data-direction": String(attributes.direction ?? 2),
+        }),
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: "div[data-type=\"mindmap\"]" }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const { nodeData, direction, ...rest } = HTMLAttributes
+    return ["div", mergeAttributes(rest, { "data-type": "mindmap" })]
+  },
+
+  addCommands() {
+    return {
+      insertMindmap:
+        () =>
+        ({ chain }) =>
+          chain().insertContent({ type: "mindmap" }).run(),
+    }
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(MindmapNodeView)
+  },
+})

package/src/components/tiptap/node/mindmap-node/mindmap-node-view.tsx

@@ -0,0 +1,61 @@
+// 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 { NodeViewWrapper, type NodeViewProps } from "@tiptap/react"
+import type { MindElixirData } from "mind-elixir"
+import { MindMap, MindMapControls } from "../../mindmap/mind-map.tsx"
+import { MindmapFullscreenDialog } from "../../mindmap/mindmap-fullscreen-dialog.tsx"
+import { createDefaultMindmapData } from "../../mindmap/lib/default-mindmap-data.ts"
+
+export function MindmapNodeView({ node, updateAttributes }: NodeViewProps) {
+  const attrs = node.attrs as { nodeData: MindElixirData | null; direction: 0 | 1 | 2 }
+  const [fullscreen, setFullscreen] = useState(false)
+
+  const effectiveData = attrs.nodeData ?? createDefaultMindmapData()
+
+  const handleChange = (newNodeData: MindElixirData) => {
+    updateAttributes({ nodeData: newNodeData })
+  }
+
+  return (
+    <NodeViewWrapper className="mindmap-block my-4" data-type="mindmap">
+      <div className="relative h-[400px] rounded-lg border overflow-hidden bg-background">
+        <MindMap
+          data={effectiveData}
+          direction={attrs.direction}
+          onChange={handleChange}
+          readonly={false}
+          fit
+        >
+          <MindMapControls
+            position="top-right"
+            showFullscreen
+            onFullscreen={() => setFullscreen(true)}
+          />
+        </MindMap>
+      </div>
+      <MindmapFullscreenDialog
+        open={fullscreen}
+        onOpenChange={setFullscreen}
+        data={effectiveData}
+        direction={attrs.direction}
+        onChange={handleChange}
+      />
+    </NodeViewWrapper>
+  )
+}

package/src/components/tiptap/node/paragraph-node/paragraph-node.scss

@@ -0,0 +1 @@
+@use "../../../../plugins/core/prd/components/tiptap/node/paragraph-node/paragraph-node.scss";