@raketa-cloud/admin 1.10.12 → 1.10.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raketa-cloud/admin",
-  "version": "1.10.12",
+  "version": "1.10.13",
   "main": "src/index.js",
   "engines": {
     "node": ">=22"
@@ -26,7 +26,7 @@
     "@babel/preset-env": "7.29.0",
     "@babel/preset-typescript": "7.28.5",
     "@repo/typescript-config": "*",
-    "@tailwindcss/cli": "4.3.3",
+    "@tailwindcss/cli": "4.3.0",
     "@tailwindcss/forms": "0.5.11",
     "@tailwindcss/typography": "0.5.20",
     "@types/node": "22.20.5",
@@ -43,7 +43,8 @@
     "google-auth-library": "11.3.1",
     "graphql-request": "7.4.0",
     "hono": "4.13.13",
-    "lru-cache": "11.5.2"
+    "lru-cache": "11.5.2",
+    "markdown-it": "15.0.3"
   },
   "overrides": {
     "error-ex": "1.3.4"

package/src/cloud/Comments.js

@@ -0,0 +1,88 @@
+import RaketaClient from "./RaketaClient";
+import {
+  CreateResourceCommentDocument,
+  DeleteResourceCommentDocument,
+  ResourceCommentCountsDocument,
+  ResourceCommentsDocument,
+  UpdateResourceCommentDocument,
+} from "./documents/commentsDocuments";
+
+export default class Comments extends RaketaClient {
+  // Without a revision id, lists the general discussion of the resource.
+  async list(query, resourceId, locale, resourceType, revisionId = null) {
+    const { resourceComments: items } = await this.query(
+      ResourceCommentsDocument,
+      {
+        input: {
+          id: resourceId,
+          locale,
+          resourceType,
+          revisionId,
+          pagination: this.buildPaginationInput(query),
+        },
+      },
+    );
+
+    return items;
+  }
+
+  // The number of comments per discussion, keyed by revision id and "general"
+  // for the general discussion. Discussions without comments are missing.
+  async counts(resourceId, locale, resourceType) {
+    const { resourceCommentCounts } = await this.query(
+      ResourceCommentCountsDocument,
+      {
+        input: { id: resourceId, locale, resourceType },
+      },
+    );
+
+    return Object.fromEntries(
+      (resourceCommentCounts || []).map(({ revisionId, count }) => [
+        revisionId ?? "general",
+        count,
+      ]),
+    );
+  }
+
+  async create(resourceId, locale, resourceType, params) {
+    const {
+      createResourceComment: { comment, errors },
+    } = await this.query(CreateResourceCommentDocument, {
+      input: {
+        id: resourceId,
+        locale,
+        resourceType,
+        revisionId: params.revisionId || null,
+        comment: {
+          body: params.body,
+          replyId: params.replyId || null,
+        },
+      },
+    });
+
+    return { comment, errors };
+  }
+
+  async update(id, params) {
+    const {
+      updateResourceComment: { comment, errors },
+    } = await this.query(UpdateResourceCommentDocument, {
+      input: {
+        id,
+        comment: { body: params.body },
+      },
+    });
+
+    return { comment, errors };
+  }
+
+  async delete(id) {
+    const {
+      deleteResourceComment: { comment, errors },
+    } = await this.query(DeleteResourceCommentDocument, {
+      input: { id },
+    });
+
+    return { comment, errors };
+  }
+}

package/src/cloud/Editors.js

@@ -0,0 +1,20 @@
+import RaketaClient from "./RaketaClient";
+import {
+  CurrentEditorDocument,
+  WebsiteEditorsDocument,
+} from "./documents/editorsDocuments";
+
+export default class Editors extends RaketaClient {
+  async current() {
+    const { currentEditor } = await this.query(CurrentEditorDocument);
+
+    return currentEditor;
+  }
+
+  // The active editors which are part of the current website.
+  async website() {
+    const { websiteEditors } = await this.query(WebsiteEditorsDocument);
+
+    return websiteEditors?.list || [];
+  }
+}

package/src/cloud/documents/commentsDocuments.js

@@ -0,0 +1,103 @@
+import { gql } from "graphql-request";
+import { errorsFragment, paginationFragment } from "./common";
+
+function editorFragment() {
+  return gql`
+    {
+      id
+      name
+      email
+      avatar
+    }
+  `;
+}
+
+function mentionFragment() {
+  return gql`
+    {
+      editorId
+      name
+      email
+    }
+  `;
+}
+
+function commentFragment() {
+  return gql`
+    {
+      id
+      body
+      resourceId
+      revisionId
+      replyId
+      mentions ${mentionFragment()}
+      editor ${editorFragment()}
+      reply {
+        id
+        body
+        mentions ${mentionFragment()}
+        editor ${editorFragment()}
+        deletedAt
+        insertedAt
+      }
+      deletedAt
+      insertedAt
+      updatedAt
+    }
+  `;
+}
+
+const ResourceCommentsDocument = gql`
+  query ResourceComments($input: ResourceCommentsInput!) {
+    resourceComments(input: $input) {
+      list ${commentFragment()}
+      pagination ${paginationFragment()}
+    }
+  }
+`;
+
+const ResourceCommentCountsDocument = gql`
+  query ResourceCommentCounts($input: IdTypeInput!) {
+    resourceCommentCounts(input: $input) {
+      revisionId
+      count
+    }
+  }
+`;
+
+const CreateResourceCommentDocument = gql`
+  mutation CreateResourceComment($input: CreateResourceCommentInput!) {
+    createResourceComment(input: $input) {
+      comment ${commentFragment()}
+      errors ${errorsFragment()}
+    }
+  }
+`;
+
+const UpdateResourceCommentDocument = gql`
+  mutation UpdateResourceComment($input: UpdateResourceCommentInput!) {
+    updateResourceComment(input: $input) {
+      comment ${commentFragment()}
+      errors ${errorsFragment()}
+    }
+  }
+`;
+
+const DeleteResourceCommentDocument = gql`
+  mutation DeleteResourceComment($input: SimpleIdInput!) {
+    deleteResourceComment(input: $input) {
+      comment {
+        id
+      }
+      errors ${errorsFragment()}
+    }
+  }
+`;
+
+export {
+  CreateResourceCommentDocument,
+  DeleteResourceCommentDocument,
+  ResourceCommentCountsDocument,
+  ResourceCommentsDocument,
+  UpdateResourceCommentDocument,
+};

package/src/cloud/documents/editorsDocuments.js

@@ -0,0 +1,27 @@
+import { gql } from "graphql-request";
+
+const CurrentEditorDocument = gql`
+  query CurrentEditor {
+    currentEditor {
+      id
+      name
+      email
+      avatar
+    }
+  }
+`;
+
+const WebsiteEditorsDocument = gql`
+  query WebsiteEditors {
+    websiteEditors {
+      list {
+        id
+        name
+        email
+        avatar
+      }
+    }
+  }
+`;
+
+export { CurrentEditorDocument, WebsiteEditorsDocument };

package/src/handlers/resources/DiscussionsHandler.js

@@ -0,0 +1,203 @@
+import Logger from "../../Logger";
+
+// The general discussion, or the one of a revision when given its id.
+function discussionsPath(
+  ctx,
+  resourceId,
+  { locale = ctx.locale, revisionId = null } = {},
+) {
+  const path = `/${locale}/${ctx.resourceConfig.resourceTypePlural}/${resourceId}/discussions`;
+
+  return revisionId ? `${path}/${revisionId}` : path;
+}
+
+function parseRevisionId(value) {
+  if (value === undefined || value === null || value === "") return null;
+  if (/^\d+$/.test(String(value))) return String(value);
+
+  throw new Error(`Missing discussion for revision #${value}`);
+}
+
+const BLANK_ERROR = "Comment can't be blank.";
+
+const ERROR_MESSAGES = {
+  revisionId: "This revision was published, its discussion is read-only.",
+};
+
+function errorPath(path, message) {
+  return `${path}?comment_error=${encodeURIComponent(message)}`;
+}
+
+function errorsMessage(errors) {
+  return errors
+    .map((error) => ERROR_MESSAGES[error.key] || error.message)
+    .join(", ");
+}
+
+// The login token may hold a stale or missing avatar, while the DXP editor is
+// kept in sync with the profile, so prefer it.
+async function fetchCurrentEditor(ctx) {
+  const fallback = ctx.authentication?.user || {};
+
+  try {
+    return (await ctx.client.editors.current()) || fallback;
+  } catch (e) {
+    Logger.error(`Failed to fetch the current editor: ${e.message}`);
+    return fallback;
+  }
+}
+
+// The editors which can be mentioned. The discussion works without them.
+async function fetchWebsiteEditors(ctx) {
+  try {
+    return await ctx.client.editors.website();
+  } catch (e) {
+    Logger.error(`Failed to fetch the website editors: ${e.message}`);
+    return [];
+  }
+}
+
+const index = async (ctx) => {
+  const { parent_id } = ctx.params;
+  const { resourceType } = ctx.resourceConfig;
+
+  const resource = await ctx.client.resources.find(
+    parent_id,
+    ctx.locale,
+    resourceType,
+  );
+
+  if (!resource) {
+    throw new Error(`Missing ${resourceType} #${parent_id}`);
+  }
+
+  const revisionId = parseRevisionId(ctx.params.revision_id);
+
+  const [comments, currentEditor, editors, revisions] = await Promise.all([
+    ctx.client.comments.list(
+      ctx.query,
+      parent_id,
+      ctx.locale,
+      resourceType,
+      revisionId,
+    ),
+    fetchCurrentEditor(ctx),
+    fetchWebsiteEditors(ctx),
+    ctx.client.resourceRevisions.all(parent_id, ctx.locale, resourceType),
+  ]);
+
+  const openRevisions = revisions?.list || [];
+  const revision = revisionId
+    ? openRevisions.find((item) => String(item.id) === revisionId) || null
+    : null;
+
+  return {
+    assigns: {
+      resource,
+      comments,
+      currentEditor,
+      editors,
+      revisions: openRevisions,
+      // A revision which is no longer open was published, its discussion is
+      // read-only.
+      discussion: {
+        revisionId,
+        revision,
+        archived: Boolean(revisionId && !revision),
+        path: discussionsPath(ctx, parent_id, { revisionId }),
+      },
+      _translations: Object.keys(ctx.locales)
+        .map((locale) => {
+          const translation = resource.translations[locale];
+
+          if (translation) {
+            return {
+              locale,
+              path: discussionsPath(ctx, translation.id, { locale }),
+            };
+          }
+
+          return null;
+        })
+        .filter(Boolean),
+    },
+  };
+};
+
+const create = async (ctx) => {
+  const { parent_id } = ctx.params;
+  const params = ctx.resourceParams.comment || {};
+  const body = (params.body || "").trim();
+  const revisionId = parseRevisionId(ctx.params.revision_id);
+  const path = discussionsPath(ctx, parent_id, { revisionId });
+
+  if (!body) {
+    return { redirect: errorPath(path, BLANK_ERROR) };
+  }
+
+  const { errors } = await ctx.client.comments.create(
+    parent_id,
+    ctx.locale,
+    ctx.resourceConfig.resourceType,
+    { body, replyId: params.reply_id, revisionId },
+  );
+
+  if (errors) {
+    return { redirect: errorPath(path, errorsMessage(errors)) };
+  }
+
+  return {
+    redirect: path,
+  };
+};
+
+// Submitted by htmx from the inline edit form, so it redirects with headers.
+const update = async (ctx) => {
+  const { id, parent_id } = ctx.params;
+  const params = ctx.resourceParams.comment || {};
+  const body = (params.body || "").trim();
+  const path = discussionsPath(ctx, parent_id, {
+    revisionId: parseRevisionId(ctx.resourceParams.revision_id),
+  });
+
+  const respond = (location) => ({
+    headers: { "HX-Redirect": location },
+    json: {},
+  });
+
+  if (!body) {
+    return respond(errorPath(path, BLANK_ERROR));
+  }
+
+  const { errors } = await ctx.client.comments.update(id, { body });
+
+  if (errors) {
+    return respond(errorPath(path, errorsMessage(errors)));
+  }
+
+  return respond(path);
+};
+
+const destroy = async (ctx) => {
+  const { id } = ctx.params;
+
+  const { errors } = await ctx.client.comments.delete(id);
+
+  if (errors) {
+    throw `Failed to delete comment #${id}: ${errorsMessage(errors)}`;
+  }
+
+  return {
+    headers: {
+      "HX-Refresh": "true",
+    },
+    json: {},
+  };
+};
+
+export default {
+  index,
+  create,
+  update,
+  destroy,
+};

package/src/handlers/resources/HistoryHandler.js

@@ -1,3 +1,5 @@
+import fetchCommentCounts from "../../helpers/fetchCommentCounts";
+
 const index = async (ctx) => {
   const { parent_id } = ctx.params;
   const { resourceType } = ctx.resourceConfig;
@@ -19,17 +21,17 @@ const index = async (ctx) => {
     resourceType,
   );
 
-  const editors = await ctx.client.resourceChanges.all_editors(
-    parent_id,
-    ctx.locale,
-    resourceType,
-  );
+  const [editors, commentCounts] = await Promise.all([
+    ctx.client.resourceChanges.all_editors(parent_id, ctx.locale, resourceType),
+    fetchCommentCounts(ctx, parent_id, resourceType),
+  ]);
 
   return {
     assigns: {
       resource,
       changes: changes,
       editors,
+      commentCounts,
     },
   };
 };

package/src/handlers/resources/ResourcesHandler.js

@@ -1,3 +1,4 @@
+import fetchCommentCounts from "../../helpers/fetchCommentCounts";
 import { CWV_METRICS } from "../../helpers/reports/cwv";
 import { reportsAvailability } from "../../helpers/reports/reportsUtils";
 
@@ -41,11 +42,10 @@ const show = async (ctx) => {
     throw new Error(`Missing ${resourceType} #${id}`);
   }
 
-  const revisions = await ctx.client.resourceRevisions.all(
-    id,
-    ctx.locale,
-    resourceType,
-  );
+  const [revisions, commentCounts] = await Promise.all([
+    ctx.client.resourceRevisions.all(id, ctx.locale, resourceType),
+    fetchCommentCounts(ctx, id, resourceType),
+  ]);
 
   const changes = await ctx.client.resourceChanges.list(
     {
@@ -78,6 +78,7 @@ const show = async (ctx) => {
         vitalsMeta: available.webVitals ? CWV_METRICS : [],
       },
       revisions: revisions.list,
+      commentCounts,
       changes: changes,
       _translations: Object.keys(ctx.locales)
         .map((locale) => {

package/src/helpers/commentMarkdown.js

@@ -0,0 +1,94 @@
+import MarkdownIt from "markdown-it";
+
+// Comments support only bold, italics, lists, quotes and links. Links are
+// detected in the text, the markdown link syntax stays plain text. Raw HTML is
+// escaped, so the output is safe to render unescaped.
+const md = new MarkdownIt("zero", {
+  html: false,
+  linkify: true,
+  breaks: true,
+}).enable(["emphasis", "list", "blockquote", "newline", "linkify"]);
+
+md.linkify.set({ fuzzyLink: true, fuzzyEmail: false });
+
+// Bare domains are linked only for known TLDs. The defaults miss the newer
+// generic ones, URLs with a protocol are linked regardless.
+md.linkify.tlds(
+  [
+    "agency",
+    "app",
+    "blog",
+    "cloud",
+    "design",
+    "dev",
+    "digital",
+    "online",
+    "site",
+    "store",
+    "studio",
+    "tech",
+  ],
+  true,
+);
+
+md.renderer.rules.link_open = (tokens, idx, options, _env, self) => {
+  tokens[idx].attrSet("target", "_blank");
+  tokens[idx].attrSet("rel", "noopener noreferrer");
+
+  return self.renderToken(tokens, idx, options);
+};
+
+// Editors are mentioned with "@editor-<id>" in the stored text. The comments
+// carry the names of their mentioned editors.
+const MENTION_PATTERN = /(?<![\p{L}\p{N}_@/])@editor-(\d+)(?![\p{L}\p{N}_])/gu;
+
+const mentionName = (mention) =>
+  (mention.name || "").trim() || mention.email || "";
+
+function mentionNames(mentions) {
+  return new Map(
+    (mentions || [])
+      .filter((mention) => mentionName(mention))
+      .map((mention) => [String(mention.editorId), mentionName(mention)]),
+  );
+}
+
+md.renderer.rules.text = (tokens, idx, _options, env) => {
+  const content = tokens[idx].content;
+  const escape = md.utils.escapeHtml;
+  let html = "";
+  let last = 0;
+
+  for (const match of content.matchAll(MENTION_PATTERN)) {
+    const name = env.mentionNames?.get(match[1]);
+
+    html += escape(content.slice(last, match.index));
+    html += name
+      ? `<span class="comment-mention">@${escape(name)}</span>`
+      : '<span class="comment-mention-unknown">@Unknown editor</span>';
+    last = match.index + match[0].length;
+  }
+
+  return html + escape(content.slice(last));
+};
+
+// The text with the known mentions written as "@Name", for previews and for
+// editing. Unknown mentions stay as they are.
+export function commentMentionsText(text, mentions = []) {
+  const names = mentionNames(mentions);
+
+  return (text || "").replace(MENTION_PATTERN, (token, id) =>
+    names.has(id) ? `@${names.get(id)}` : token,
+  );
+}
+
+// The editor ids of the mentions by their names, for editing.
+export function commentMentionIds(mentions = []) {
+  return Object.fromEntries(
+    [...mentionNames(mentions)].map(([id, name]) => [name, id]),
+  );
+}
+
+export default function commentMarkdown(text, { mentions = [] } = {}) {
+  return md.render(text || "", { mentionNames: mentionNames(mentions) });
+}

package/src/helpers/fetchCommentCounts.js

@@ -0,0 +1,14 @@
+import Logger from "../Logger";
+
+// The comment counts only decorate the revisions and history tables, so the
+// pages render without them when they cannot be fetched.
+export default async function fetchCommentCounts(ctx, id, resourceType) {
+  if (!ctx.resourceConfig?.comments) return {};
+
+  try {
+    return await ctx.client.comments.counts(id, ctx.locale, resourceType);
+  } catch (e) {
+    Logger.error(`Failed to fetch the comment counts: ${e.message}`);
+    return {};
+  }
+}

package/src/helpers/historyUtils.js

@@ -124,8 +124,19 @@ function isChangeRevertable(change, maxVersion) {
   );
 }
 
+// Published revisions keep their discussions, which can be opened from the
+// history when they have comments.
+function hasDiscussion(change, commentCounts = {}) {
+  return (
+    change.changeType === "revision_publish" &&
+    Boolean(change.revisionId) &&
+    (commentCounts?.[change.revisionId] || 0) > 0
+  );
+}
+
 export default {
   changeTypes,
+  hasDiscussion,
   getMaxVersion,
   changeAction,
   isChangeRevertable,

package/src/helpers/utils.js

@@ -1,3 +1,8 @@
+import commentMarkdown, {
+  commentMentionIds,
+  commentMentionsText,
+} from "./commentMarkdown";
+
 function includedInCollection(value, collection) {
   if (!collection) {
     return false;
@@ -43,6 +48,21 @@ export function isFeatureEnabled(value) {
   return value === true;
 }
 
+// Initials of the first two words of the name, e.g. "Jane van Doe" -> "JV".
+// Falls back to the first letter of the email when there is no name.
+function initials(name, email = "") {
+  const words = (name || "").trim().split(/\s+/).filter(Boolean);
+
+  if (words.length) {
+    return words
+      .slice(0, 2)
+      .map((word) => word[0].toUpperCase())
+      .join("");
+  }
+
+  return (email || "?").trim().charAt(0).toUpperCase() || "?";
+}
+
 function feature(featureName, context) {
   return isFeatureEnabled(context?.globalConfig?.features?.[featureName]);
 }
@@ -52,9 +72,13 @@ function contentTaskProviderEnabled(provider, context) {
 }
 
 export default {
+  commentMarkdown,
+  commentMentionIds,
+  commentMentionsText,
   includedInCollection,
   formattedDate,
   formattedDateTime,
   feature,
   contentTaskProviderEnabled,
+  initials,
 };