nodebb-plugin-timestamp 1.1.0 → 1.1.1

package/.oxfmtrc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "ignorePatterns": [],
+  "trailingComma": "none"
+}

package/.oxlintrc.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "eslint", "unicorn", "oxc", "node", "jsdoc", "promise", "import"],
+  "categories": {},
+  "rules": {
+    "unicorn/no-empty-file": "allow"
+  },
+  "settings": {
+    "jsx-a11y": {
+      "components": {},
+      "attributes": {}
+    },
+    "next": {
+      "rootDir": []
+    },
+    "react": {
+      "formComponents": [],
+      "linkComponents": [],
+      "componentWrapperFunctions": []
+    },
+    "jsdoc": {
+      "ignorePrivate": false,
+      "ignoreInternal": false,
+      "ignoreReplacesDocs": false,
+      "overrideReplacesDocs": true,
+      "augmentsExtendsReplacesDocs": false,
+      "implementsReplacesDocs": false,
+      "exemptDestructuredRootsFromChecks": false,
+      "tagNamePreference": {}
+    },
+    "vitest": {
+      "typecheck": false
+    }
+  },
+  "env": {
+    "builtin": true
+  },
+  "globals": {},
+  "ignorePatterns": []
+}

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 TASA-Ed
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+# NodeBB Plugin Timestamp
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![NodeBB Compatibility](https://img.shields.io/badge/NodeBB-%3E%3D4.12.0-green)](https://github.com/NodeBB/NodeBB)
+
+在帖子编辑器中插入一个可点击的按钮，方便用户选择日期时间，生成相对时间标记。其他用户看到的是相对时间（如"3 天后"），鼠标悬停即可看到浏览器本地时区的精确时间。
+
+Add a button to the post composer for inserting relative timestamps. Other users see a relative time (e.g. "in 3 days") — hover to reveal the exact time in their local timezone.
+
+![enus](./docs/ac198a72-2f08-4c17-82a0-29dbb1c0e4d0.webp)
+
+![zhcn](./docs/20f15e8a-d0f3-4020-ad62-75237ea6b6e9.webp)
+
+---
+
+## Features | 功能
+
+- Composer toolbar button for inserting timestamps
+- Datetime picker dialog for easy selection
+- Server-side parsing: `[timestamp]1700000000000[/timestamp]` → `<time>` HTML element
+- Client-side localization via `toLocaleString()`
+- Relative time rendering compatible with NodeBB's built-in timeago
+- i18n support (English / 简体中文)
+
+## Installation | 安装
+
+```bash
+npm install nodebb-plugin-timestamp
+# or via NodeBB ACP plugin manager
+```
+
+## Usage | 使用
+
+1. While composing a post, click the clock icon in the editor toolbar.
+2. Select a date and time in the picker dialog.
+3. A `[timestamp]...[/timestamp]` tag is inserted at the cursor position.
+4. After posting, it renders as a relative time. Hover to see the exact time.
+
+## Compatibility | 兼容性
+
+NodeBB v4.12.0+
+
+## Development | 开发
+
+```bash
+# Install dependencies
+pnpm install
+
+# Dev build with watch
+pnpm dev
+
+# Production build
+pnpm build
+
+# Type check
+pnpm typecheck
+
+# Lint
+pnpm lint
+```
+
+## License
+
+MIT © [TASA-Ed Studio](https://www.tasaed.top)

package/lib/index.ts

@@ -0,0 +1,78 @@
+import type { FormattingPayload, ParsePostData, ParseRawData } from "./type.ts";
+
+// 匹配标记：[timestamp]1700000000000[/timestamp]
+const TIMESTAMP_REGEX = /\[timestamp](\d{10,13})\[\/timestamp]/g;
+
+/**
+ * 向编辑器工具栏注册按钮
+ * 对应 plugin.json 中 filter:composer.formatting
+ */
+export function registerFormatting(
+  payload: FormattingPayload,
+  callback: (err: Error | null, payload: FormattingPayload) => void
+): void {
+  payload.options.push({
+    name: "timestamp",
+    className: "fa fa-clock-o",
+    title: "[[timestamp:composer.timestamp]]"
+  });
+  callback(null, payload);
+}
+
+function applyTimestamp(content: string) {
+  return content.replace(TIMESTAMP_REGEX, (_match: string, ts: string) => {
+    const epoch = parseInt(ts, 10);
+    if (isNaN(epoch)) return _match;
+
+    const date = new Date(epoch);
+    const iso = date.toISOString();
+    // datetime 提供机器可读的 ISO 时间
+    // 实际显示文本由客户端 JS 根据用户本地时区渲染
+    // 服务端仅输出 UTC 作为 fallback
+    return [
+      `<time`,
+      `  class="timeago plugin-timestamp"`,
+      `  datetime="${iso}"`,
+      `  title="${iso}"`,
+      `  data-timestamp="${epoch}"`,
+      `>${iso}</time>`
+    ].join(" ");
+  });
+}
+
+/**
+ * 解析帖子内容，将时间戳标记转换为 HTML
+ * 对应 plugin.json 中 filter:parse.post
+ */
+export function parsePost(
+  data: ParsePostData,
+  callback: (err: Error | null, data: ParsePostData) => void
+): void {
+  if (!data?.postData?.content) {
+    callback(null, data);
+    return;
+  }
+
+  data.postData.content = applyTimestamp(data.postData.content);
+
+  callback(null, data);
+}
+
+/**
+ * 解析 Raw，将时间戳标记转换为 HTML
+ * 对应 plugin.json 中 filter:parse.raw
+ *
+ * 注意：filter:parse.raw 传入的是原始字符串本身（用于编辑器预览等场景），
+ * 与 filter:parse.post 的对象结构不同
+ */
+export function parseRaw(
+  raw: ParseRawData,
+  callback: (err: Error | null, raw: ParseRawData) => void
+): void {
+  if (!raw) {
+    callback(null, raw);
+    return;
+  }
+
+  callback(null, applyTimestamp(raw));
+}

package/lib/type.ts

@@ -0,0 +1,25 @@
+// filter:composer.formatting 的 payload 类型
+export interface FormattingPayload {
+  options: Array<{
+    name: string;
+    className: string;
+    title: string;
+    // 可选：插入文本时的包裹符号
+    startTag?: string;
+    endTag?: string;
+  }>;
+}
+
+// filter:parse.post 的 data 类型
+export interface ParsePostData {
+  postData: {
+    pid?: number;
+    content: string;
+    uid?: number;
+  };
+  uid?: number;
+}
+
+// filter:parse.raw 传入的是原始字符串本身（用于解析任意文本片段，如编辑器预览），
+// 而非 parse.post 那样的对象
+export type ParseRawData = string;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "nodebb-plugin-timestamp",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Insert a relative time component into the post | 在帖子中插入相对时间组件",
-  "homepage": "https://www.tasaed.top",
+  "homepage": "https://github.com/TASA-Ed/nodebb-plugin-timestamp",
   "bugs": {
     "url": "https://github.com/TASA-Ed/nodebb-plugin-timestamp/issues"
   },
@@ -15,9 +15,6 @@
     "type": "git",
     "url": "git+https://github.com/TASA-Ed/nodebb-plugin-timestamp.git"
   },
-  "files": [
-    "build"
-  ],
   "type": "module",
   "main": "./build/index.js",
   "devDependencies": {

package/plugin.json

@@ -0,0 +1,23 @@
+{
+  "id": "nodebb-plugin-timestamp",
+  "name": "Timestamp Component",
+  "description": "Insert relative times in posts; hover to display the exact time | 在帖子中插入相对时间，hover 显示精确时间",
+  "url": "https://github.com/TASA-Ed/nodebb-plugin-timestamp",
+  "hooks": [
+    {
+      "hook": "filter:composer.formatting",
+      "method": "registerFormatting"
+    },
+    {
+      "hook": "filter:parse.post",
+      "method": "parsePost"
+    },
+    {
+      "hook": "filter:parse.raw",
+      "method": "parseRaw"
+    }
+  ],
+  "scripts": ["build/public/client.js"],
+  "scss": ["public/scss/style.scss"],
+  "languages": "public/languages"
+}

package/pnpm-workspace.yaml

@@ -0,0 +1 @@
+minimumReleaseAge: 60

package/public/client.ts

@@ -0,0 +1,161 @@
+/// <reference types="jquery"/>
+
+// bootbox 模块类型（通过 require(["bootbox"], ...) 按需加载）
+interface Bootbox {
+  dialog: (options: {
+    title: string;
+    message: string;
+    buttons: Record<
+      string,
+      {
+        label: string;
+        className: string;
+        callback?: () => void | boolean;
+      }
+    >;
+  }) => void;
+}
+
+// NodeBB 的 AMD require（RequireJS 风格）
+declare function require(deps: string[], callback: (...modules: unknown[]) => void): void;
+
+// composer/formatting 模块只用到 addButtonDispatch
+interface FormattingModule {
+  // handler 由 dispatch table 调用，this 指向 postContainer
+  addButtonDispatch: (
+    name: string,
+    onClick: (
+      this: JQuery,
+      textarea: HTMLTextAreaElement,
+      selectionStart: number,
+      selectionEnd: number,
+      event: JQuery.Event
+    ) => void
+  ) => void;
+}
+
+/**
+ * 获取 datetime-local input 所需的格式 "YYYY-MM-DDTHH:MM"
+ */
+function toDatetimeLocalValue(date: Date): string {
+  const pad = (n: number): string => String(n).padStart(2, "0");
+  return (
+    `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}` +
+    `T${pad(date.getHours())}:${pad(date.getMinutes())}`
+  );
+}
+
+/**
+ * 在 textarea 光标位置插入文本
+ */
+function insertAtCursor(
+  textarea: HTMLTextAreaElement,
+  start: number,
+  end: number,
+  text: string
+): void {
+  const before = textarea.value.substring(0, start);
+  const after = textarea.value.substring(end);
+  textarea.value = before + text + after;
+  textarea.selectionStart = textarea.selectionEnd = start + text.length;
+  textarea.focus();
+  // 触发 NodeBB 编辑器的响应式更新与预览刷新
+  textarea.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+/**
+ * 打开时间选择弹窗，确认后把标记插入到 textarea 光标处
+ */
+function openTimePicker(
+  textarea: HTMLTextAreaElement,
+  selectionStart: number,
+  selectionEnd: number
+): void {
+  const defaultValue = toDatetimeLocalValue(new Date());
+
+  require(["bootbox"], (bootbox: unknown) => {
+    (bootbox as Bootbox).dialog({
+      title: "[[timestamp:dialog.title]]",
+      message: `
+        <div class="form-group">
+          <label for="plugin-ts-picker" class="form-label">[[timestamp:dialog.label]]</label>
+          <input
+            type="datetime-local"
+            id="plugin-ts-picker"
+            class="form-control"
+            value="${defaultValue}"
+          />
+          <div class="form-text text-muted" style="margin-top:6px">
+            [[timestamp:dialog.description]]
+          </div>
+        </div>
+      `,
+      buttons: {
+        cancel: {
+          label: "[[timestamp:dialog.cancel]]",
+          className: "btn-secondary"
+        },
+        confirm: {
+          label: "[[timestamp:dialog.confirm]]",
+          className: "btn-primary",
+          callback(): void {
+            const input = document.getElementById("plugin-ts-picker") as HTMLInputElement | null;
+            if (!input?.value) return;
+
+            const ts = new Date(input.value).getTime();
+            if (isNaN(ts)) return;
+
+            insertAtCursor(textarea, selectionStart, selectionEnd, `[timestamp]${ts}[/timestamp]`);
+          }
+        }
+      }
+    });
+  });
+}
+
+/**
+ * 将页面中所有 .plugin-timestamp 元素的 title（hover tooltip）
+ * 替换为用户浏览器本地时区的格式化时间。
+ * 不修改 textContent —— 让 NodeBB 内置的 timeago 继续渲染相对时间。
+ */
+function localizeTimestamps(root: ParentNode = document): void {
+  const elements = root.querySelectorAll<HTMLTimeElement>("time.plugin-timestamp");
+  elements.forEach((el) => {
+    const iso = el.getAttribute("datetime");
+    if (!iso) return;
+
+    const date = new Date(iso);
+    if (isNaN(date.getTime())) return;
+
+    el.title = date.toLocaleString(undefined, {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+  });
+}
+
+// NodeBB 页面加载完成后，向 composer 的 dispatch table 注册按钮点击处理
+$(window).on("action:app.load", () => {
+  require(["composer/formatting"], (formatting: unknown) => {
+    (formatting as FormattingModule).addButtonDispatch(
+      "timestamp",
+      function (textarea, selectionStart, selectionEnd): void {
+        openTimePicker(textarea, selectionStart, selectionEnd);
+      }
+    );
+  });
+});
+
+// 初次加载 + ajaxify 切换页面时，本地化所有时间戳
+$(window).on("action:app.load action:ajaxify.end", () => {
+  localizeTimestamps();
+});
+
+// 帖子动态追加时（无限滚动等），也需要处理新出现的时间戳
+$(window).on("action:posts.loaded", () => {
+  localizeTimestamps();
+});

package/public/languages/en-GB/timestamp.json

@@ -0,0 +1,8 @@
+{
+  "composer.timestamp": "Insert time",
+  "dialog.title": "Insert time",
+  "dialog.label": "Select a time",
+  "dialog.description": "Other users will see a relative time (such as \"in 3 days\"); hover over it to see the exact time.",
+  "dialog.cancel": "Cancel",
+  "dialog.confirm": "Insert"
+}

package/public/languages/zh-CN/timestamp.json

@@ -0,0 +1,8 @@
+{
+  "composer.timestamp": "插入时间",
+  "dialog.title": "插入时间",
+  "dialog.label": "选择时间",
+  "dialog.description": "其他用户将看到相对时间（如\"3 天后\"），悬停可查看精确时间。",
+  "dialog.cancel": "取消",
+  "dialog.confirm": "插入"
+}

package/public/scss/style.scss

@@ -0,0 +1,11 @@
+/* 让时间标签有视觉提示 */
+time.plugin-timestamp {
+  border-bottom: 1px dashed currentColor;
+  cursor: help;
+  white-space: nowrap;
+}
+
+/* 自定义 tooltip（利用 title 属性，也可换成 Bootstrap tooltip） */
+time.plugin-timestamp:hover {
+  opacity: 0.75;
+}

package/public/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "umd",
+    "moduleResolution": "node10",
+    "types": ["jquery"],
+    "declaration": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitAny": false,
+    "incremental": true,
+    "composite": true,
+    "skipLibCheck": true
+  },
+  "include": ["lib"]
+}

package/rolldown.config.ts

@@ -0,0 +1,66 @@
+import { defineConfig, RolldownPluginOption } from "rolldown";
+import fs from "node:fs";
+import path from "node:path";
+
+const rolldownCopyCssPlugin: RolldownPluginOption = {
+  name: "rolldown-plugin-copy-css",
+  buildStart() {
+    const srcDir = path.resolve("public/scss");
+
+    // 如果目录不存在则直接跳过
+    if (!fs.existsSync(srcDir)) return;
+
+    const files = fs.readdirSync(srcDir);
+
+    for (const file of files) {
+      if (file.endsWith(".scss")) {
+        const filePath = path.join(srcDir, file);
+        const source = fs.readFileSync(filePath, "utf-8");
+
+        // 将 CSS 注册为 Asset 资源
+        // 这里的 fileName 是相对于 Rolldown 配置中 output.dir（例如 'build'）的路径
+        this.emitFile({
+          type: "asset",
+          fileName: `css/${file}`,
+          source: source
+        });
+      }
+    }
+  }
+};
+
+export default defineConfig([
+  {
+    input: ["lib/index.ts"],
+    platform: "node",
+    output: {
+      dir: "build",
+      format: "es",
+      cleanDir: true,
+      strict: true,
+      topLevelVar: true,
+      minify: {
+        compress: true,
+        mangle: false
+      },
+      sourcemap: true
+    }
+  },
+  {
+    input: ["public/client.ts"],
+    platform: "node",
+    output: {
+      dir: "build/public",
+      format: "umd",
+      cleanDir: true,
+      strict: true,
+      topLevelVar: true,
+      minify: {
+        compress: true,
+        mangle: false
+      },
+      sourcemap: true
+    },
+    plugins: [rolldownCopyCssPlugin]
+  }
+]);

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "node16",
+    "moduleResolution": "node16",
+    "types": ["node"],
+    "declaration": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitAny": false,
+    "incremental": true,
+    "composite": true,
+    "skipLibCheck": true
+  },
+  "include": ["lib", "rolldown.config.ts"],
+  "exclude": ["node_modules", "dist"]
+}