@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/modules/email-editor/maily-subpaths.d.ts

@@ -0,0 +1,90 @@
+declare module '@maily-to/core/blocks' {
+  import type { Editor, Range } from '@tiptap/core';
+
+  interface CommandProps {
+    editor: Editor;
+    range: Range;
+  }
+
+  export type BlockItem = {
+    title: string;
+    description?: string;
+    searchTerms: string[];
+    icon?: JSX.Element;
+    render?: (editor: Editor) => JSX.Element | null | true;
+    preview?: string | ((editor: Editor) => JSX.Element | null);
+  } & (
+    | { command: (options: CommandProps) => void; id?: never; commands?: never }
+    | { id: string; command?: never; commands: BlockItem[] }
+  );
+
+  export type BlockGroupItem = {
+    title: string;
+    commands: BlockItem[];
+  };
+
+  export const text: BlockItem;
+  export const heading1: BlockItem;
+  export const heading2: BlockItem;
+  export const heading3: BlockItem;
+  export const bulletList: BlockItem;
+  export const orderedList: BlockItem;
+  export const blockquote: BlockItem;
+  export const divider: BlockItem;
+  export const hardBreak: BlockItem;
+  export const clearLine: BlockItem;
+  export const button: BlockItem;
+  export const image: BlockItem;
+  export const inlineImage: BlockItem;
+  export const logo: BlockItem;
+  export const columns: BlockItem;
+  export const section: BlockItem;
+  export const repeat: BlockItem;
+  export const spacer: BlockItem;
+  export const footer: BlockItem;
+  export const linkCard: BlockItem;
+  export const htmlCodeBlock: BlockItem;
+}
+
+declare module '@maily-to/core/extensions' {
+  import type { AnyExtension, Editor } from '@tiptap/core';
+  import type { SuggestionOptions } from '@tiptap/suggestion';
+
+  export const MailyKit: AnyExtension;
+  export const HTMLCodeBlockExtension: AnyExtension;
+  export const PlaceholderExtension: AnyExtension;
+
+  export interface MailyVariable {
+    name: string;
+    required?: boolean;
+    valid?: boolean;
+    hideDefaultValue?: boolean;
+    label?: string;
+  }
+
+  export type MailyVariablesFunction = (opts: {
+    query: string;
+    from: 'content-variable' | 'bubble-variable' | 'repeat-variable';
+    editor: Editor;
+  }) => MailyVariable[];
+
+  export type MailyVariables = MailyVariable[] | MailyVariablesFunction;
+
+  export const VariableExtension: AnyExtension & {
+    configure: (options: {
+      suggestion: Omit<SuggestionOptions, 'editor'>;
+      variables: MailyVariables;
+    }) => AnyExtension;
+  };
+
+  export const ImageUploadExtension: AnyExtension & {
+    configure: (options: {
+      onImageUpload?: (file: Blob) => Promise<string>;
+      allowedMimeTypes?: string[];
+    }) => AnyExtension;
+  };
+
+  export function getVariableSuggestions(
+    char?: string,
+  ): Omit<SuggestionOptions, 'editor'>;
+}

package/src/modules/email-editor/types/index.ts

@@ -0,0 +1,37 @@
+import type { EditorProps as MailyEditorProps } from '@maily-to/core';
+import type { Editor as TiptapEditor, JSONContent } from '@tiptap/core';
+
+export type { JSONContent };
+
+export type EmailPreviewDevice = 'desktop' | 'mobile';
+
+export interface EmailEditorVariable {
+  name: string;
+  label?: string;
+  required?: boolean;
+  hideDefaultValue?: boolean;
+}
+
+export type EmailEditorVariablesResolver = (opts: {
+  query: string;
+  from: 'content-variable' | 'bubble-variable' | 'repeat-variable';
+  editor: TiptapEditor;
+}) => EmailEditorVariable[];
+
+export type EmailEditorVariables =
+  | EmailEditorVariable[]
+  | EmailEditorVariablesResolver;
+
+export interface EmailEditorProps {
+  contentJson?: JSONContent;
+  onChange?: (contentJson: JSONContent) => void;
+  onCreate?: (editor: TiptapEditor) => void;
+  variables?: EmailEditorVariables;
+  onImageUpload?: (file: File) => Promise<string>;
+  blocks?: MailyEditorProps['blocks'];
+  extensions?: MailyEditorProps['extensions'];
+  placeholder?: string;
+  className?: string;
+  /** Previews render the same editor, just not writable. */
+  editable?: boolean;
+}

package/src/modules/email-editor/utils/expandCustomNodes.ts

@@ -0,0 +1,190 @@
+import type { JSONContent } from '@tiptap/core';
+
+/**
+ * Nodes the email editor understands but `@maily-to/render` does not. They are
+ * turned into its custom-html node before rendering, which it emits verbatim —
+ * so a block can be added here without forking the renderer.
+ */
+const HTML_NODE = 'htmlCodeBlock';
+
+type TPart = JSONContent;
+
+const escapeHtml = (value: string) =>
+  value
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+
+const CELL_STYLE =
+  'border: 1px solid #e5e7eb; padding: 8px 12px; vertical-align: top; font-size: 15px; line-height: 1.6; color: #374151;';
+
+const HEADER_STYLE = `${CELL_STYLE} font-weight: 600; color: #111827; text-align: left;`;
+
+/** What a header cell wears when nobody picked anything for it. */
+const HEADER_BACKGROUND = '#f9fafb';
+
+const TABLE_STYLE =
+  'border-collapse: collapse; width: 100%; margin: 16px 0; border: 1px solid #e5e7eb;';
+
+const markUp = (html: string, marks?: JSONContent['marks']) =>
+  (marks || []).reduce((wrapped, mark) => {
+    const { type, attrs } = mark as {
+      type?: string;
+      attrs?: Record<string, unknown>;
+    };
+
+    switch (type) {
+      case 'bold':
+        return `<strong>${wrapped}</strong>`;
+      case 'italic':
+        return `<em>${wrapped}</em>`;
+      case 'underline':
+        return `<u>${wrapped}</u>`;
+      case 'strike':
+        return `<s>${wrapped}</s>`;
+      case 'link':
+        return `<a href="${escapeHtml(
+          String(attrs?.href || ''),
+        )}" target="_blank" rel="noopener" style="color: #2563eb; text-decoration: underline;">${wrapped}</a>`;
+      case 'textStyle':
+        return attrs?.color
+          ? `<span style="color: ${escapeHtml(String(attrs.color))};">${wrapped}</span>`
+          : wrapped;
+      default:
+        return wrapped;
+    }
+  }, html);
+
+/**
+ * Inline content becomes a run of parts rather than one string: a variable has
+ * to stay a node so the renderer still fills it in with the recipient's value.
+ */
+const pushInline = (parts: TPart[], nodes: JSONContent[] = []) => {
+  for (const node of nodes) {
+    if (node.type === 'variable') {
+      parts.push(node);
+      continue;
+    }
+
+    if (node.type === 'hardBreak') {
+      parts.push({ type: 'text', text: '<br />' });
+      continue;
+    }
+
+    if (node.text) {
+      parts.push({ type: 'text', text: markUp(escapeHtml(node.text), node.marks) });
+    }
+  }
+};
+
+const pushCellContent = (parts: TPart[], blocks: JSONContent[] = []) => {
+  blocks.forEach((block, index) => {
+    if (index) {
+      parts.push({ type: 'text', text: '<br />' });
+    }
+
+    pushInline(parts, block.content);
+  });
+};
+
+const pushTable = (parts: TPart[], table: JSONContent) => {
+  parts.push({
+    type: 'text',
+    text: `<table role="presentation" cellpadding="0" cellspacing="0" style="${TABLE_STYLE}"><tbody>`,
+  });
+
+  for (const row of table.content || []) {
+    parts.push({ type: 'text', text: '<tr>' });
+
+    for (const cell of row.content || []) {
+      const isHeader = cell.type === 'tableHeader';
+      const {
+        colspan = 1,
+        rowspan = 1,
+        colwidth,
+        backgroundColor,
+      } = (cell.attrs || {}) as {
+        colspan?: number;
+        rowspan?: number;
+        colwidth?: number[] | null;
+        backgroundColor?: string | null;
+      };
+      const width = Array.isArray(colwidth) && colwidth[0] ? colwidth[0] : null;
+      // A table written before backgrounds carries no attribute at all, and
+      // its header still has to look like a header.
+      const background =
+        backgroundColor === undefined && isHeader
+          ? HEADER_BACKGROUND
+          : backgroundColor;
+
+      parts.push({
+        type: 'text',
+        text: `<${isHeader ? 'th' : 'td'}${colspan > 1 ? ` colspan="${colspan}"` : ''}${
+          rowspan > 1 ? ` rowspan="${rowspan}"` : ''
+        } style="${isHeader ? HEADER_STYLE : CELL_STYLE}${
+          width ? ` width: ${width}px;` : ''
+        }${
+          background
+            ? ` background-color: ${escapeHtml(String(background))};`
+            : ''
+        }">`,
+      });
+
+      pushCellContent(parts, cell.content);
+
+      parts.push({ type: 'text', text: `</${isHeader ? 'th' : 'td'}>` });
+    }
+
+    parts.push({ type: 'text', text: '</tr>' });
+  }
+
+  parts.push({ type: 'text', text: '</tbody></table>' });
+};
+
+/**
+ * The document is not rendered here: it is produced per recipient, so the node
+ * leaves behind the same `{{ document.<id> }}` marker the block editor emits
+ * and the send path fills it in.
+ */
+const pushDocumentPlaceholder = (parts: TPart[], node: JSONContent) => {
+  const documentId = String(node.attrs?.documentId || '');
+
+  if (!documentId) {
+    return;
+  }
+
+  parts.push({
+    type: 'text',
+    text: `<div class="erxes-document-placeholder" data-document-id="${escapeHtml(
+      documentId,
+    )}">{{ document.${escapeHtml(documentId)} }}</div>`,
+  });
+};
+
+const EXPANDERS: Record<string, (parts: TPart[], node: JSONContent) => void> = {
+  table: pushTable,
+  documentPlaceholder: pushDocumentPlaceholder,
+};
+
+export const expandCustomNodes = (node: JSONContent): JSONContent => {
+  const expander = node.type ? EXPANDERS[node.type] : undefined;
+
+  if (expander) {
+    const parts: TPart[] = [];
+
+    expander(parts, node);
+
+    return {
+      type: HTML_NODE,
+      attrs: { language: 'html', showIfKey: node.attrs?.showIfKey ?? null },
+      content: parts,
+    };
+  }
+
+  if (!node.content?.length) {
+    return node;
+  }
+
+  return { ...node, content: node.content.map(expandCustomNodes) };
+};

package/src/modules/email-editor/utils/renderEmailHtml.ts

@@ -0,0 +1,52 @@
+import { Maily } from '@maily-to/render';
+import type { JSONContent } from '@tiptap/core';
+import { expandCustomNodes } from './expandCustomNodes';
+
+const addMissingLinkTargets = (html: string): string =>
+  html.replace(/<a\s[^>]*>/gi, (tag) =>
+    /\btarget=/i.test(tag)
+      ? tag
+      : tag.replace(/^<a\s/i, '<a target="_blank" rel="noopener noreferrer" '),
+  );
+
+/**
+ * A field becomes the `{{ … }}` token the server fills per recipient. An
+ * automation's output variable is already a token, so it is left as written.
+ */
+const toPlaceholder = ({
+  variable,
+  fallback,
+}: {
+  variable: string;
+  fallback?: string;
+}) => {
+  if (/^\{\{[\s\S]+\}\}$/.test(variable.trim())) {
+    return variable.trim();
+  }
+
+  const fallbackText = fallback?.replace(/[{}|]/g, '').trim();
+
+  return fallbackText
+    ? `{{ ${variable} | ${fallbackText} }}`
+    : `{{ ${variable} }}`;
+};
+
+/** The email as html, with every field left as a placeholder for the server. */
+export const renderEmailHtml = async (
+  contentJson?: JSONContent,
+  { previewText }: { previewText?: string } = {},
+): Promise<string> => {
+  if (!contentJson) {
+    return '';
+  }
+
+  const maily = new Maily(expandCustomNodes(contentJson));
+
+  if (previewText) {
+    maily.setPreviewText(previewText);
+  }
+
+  maily.setVariableFormatter(toPlaceholder);
+
+  return addMissingLinkTargets(await maily.render());
+};