@atlaskit/adf-schema 28.1.6 → 28.1.7

package/src/schema/nodes/layout-section.ts

@@ -0,0 +1,93 @@
+import { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+import { LayoutColumnDefinition } from './layout-column';
+import { BreakoutMarkDefinition } from '../marks';
+
+/**
+ * @name layoutSection_node
+ */
+export type LayoutSectionBaseDefinition = {
+  type: 'layoutSection';
+  marks?: Array<BreakoutMarkDefinition>;
+  // Can't use Array<any> because `prosemirror-schema-compatibility-tests` can't handle it.
+  content: Array<LayoutColumnDefinition>;
+};
+
+/**
+ * Need duplicate `type` and `marks` to make both validator and json-schema satisfied
+ */
+
+/**
+ * @name layoutSection_full_node
+ */
+export type LayoutSectionFullDefinition = LayoutSectionBaseDefinition & {
+  type: 'layoutSection';
+  marks?: Array<BreakoutMarkDefinition>;
+  /**
+   * @minItems 2
+   * @maxItems 3
+   * @allowUnsupportedBlock true
+   */
+  content: Array<LayoutColumnDefinition>;
+};
+
+/**
+ * @stage 0
+ * @name layoutSection_with_single_column_node
+ */
+export type LayoutSectionWithSingleColumnDefinition =
+  LayoutSectionBaseDefinition & {
+    type: 'layoutSection';
+    marks?: Array<BreakoutMarkDefinition>;
+    /**
+     * @minItems 1
+     * @maxItems 3
+     * @allowUnsupportedBlock true
+     */
+    content: Array<LayoutColumnDefinition>;
+  };
+
+export type LayoutSectionDefinition =
+  | LayoutSectionFullDefinition
+  | LayoutSectionWithSingleColumnDefinition;
+
+export const layoutSection: NodeSpec = {
+  content:
+    '(layoutColumn | unsupportedBlock){1,3} unsupportedBlock* | unsupportedBlock+',
+  marks: 'unsupportedMark unsupportedNodeAttribute',
+  isolating: true,
+  parseDOM: [
+    {
+      context: 'layoutSection//|layoutColumn//',
+      tag: 'div[data-layout-section]',
+      skip: true,
+    },
+    {
+      tag: 'div[data-layout-section]',
+    },
+  ],
+  toDOM() {
+    const attrs = { 'data-layout-section': 'true' };
+    return ['div', attrs, 0];
+  },
+};
+
+export const layoutSectionWithSingleColumn: NodeSpec = {
+  content:
+    '(layoutColumn | unsupportedBlock){1,3} unsupportedBlock* | unsupportedBlock+',
+  marks: 'unsupportedMark unsupportedNodeAttribute',
+  isolating: true,
+  parseDOM: [
+    {
+      context: 'layoutSection//|layoutColumn//',
+      tag: 'div[data-layout-section]',
+      skip: true,
+    },
+    {
+      tag: 'div[data-layout-section]',
+    },
+  ],
+  toDOM() {
+    const attrs = { 'data-layout-section': 'true' };
+    return ['div', attrs, 0];
+  },
+};

package/src/schema/nodes/list-item.ts

@@ -0,0 +1,13 @@
+import { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+
+export const listItem: NodeSpec = {
+  content:
+    '(paragraph | mediaSingle | codeBlock | unsupportedBlock) (paragraph | bulletList | orderedList | mediaSingle | codeBlock | unsupportedBlock)*',
+  marks: 'unsupportedMark unsupportedNodeAttribute',
+  defining: true,
+  selectable: false,
+  parseDOM: [{ tag: 'li' }],
+  toDOM() {
+    return ['li', 0];
+  },
+};

package/src/schema/nodes/media-group.ts

@@ -0,0 +1,44 @@
+import { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+import { MediaDefinition as Media } from './media';
+
+/**
+ * @name mediaGroup_node
+ */
+export interface MediaGroupDefinition {
+  type: 'mediaGroup';
+  /**
+   * @minItems 1
+   *  @allowUnsupportedBlock true
+   */
+  content: Array<Media>;
+}
+
+// Temporary due to an existing issue in validator below:
+// https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-1429
+// TODO: Remove border and link marks from white list
+export const mediaGroup: NodeSpec = {
+  inline: false,
+  group: 'block',
+  content: '(media|unsupportedBlock)+',
+  attrs: {},
+  marks: 'unsupportedMark unsupportedNodeAttribute border link',
+  selectable: false,
+  parseDOM: [
+    {
+      tag: 'div[data-node-type="mediaGroup"]',
+    },
+    {
+      tag: 'div[class="MediaGroup"]',
+    },
+  ],
+
+  toDOM() {
+    return [
+      'div',
+      {
+        'data-node-type': 'mediaGroup',
+      },
+      0,
+    ];
+  },
+};

package/src/schema/nodes/media-inline.ts

@@ -0,0 +1,19 @@
+import { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+import { LinkDefinition } from '../marks/link';
+import { createMediaSpec, defaultAttrs, MediaBaseAttributes } from './media';
+
+export interface MediaInlineAttributes extends MediaBaseAttributes {
+  data?: object;
+  type?: 'file' | 'link';
+}
+
+/**
+ * @name mediaInline_node
+ */
+export interface MediaInlineDefinition {
+  type: 'mediaInline';
+  attrs: MediaInlineAttributes;
+  marks?: Array<LinkDefinition>;
+}
+
+export const mediaInline: NodeSpec = createMediaSpec(defaultAttrs, true);

package/src/schema/nodes/media-single.ts

@@ -0,0 +1,179 @@
+import { NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { MediaDefinition as Media } from './media';
+import { LinkDefinition } from '../marks/link';
+
+import { ExtendedMediaAttributes, WidthType } from './types/rich-media-common';
+import { CaptionDefinition as Caption } from './caption';
+import { isDOMElement } from '../../utils/parseDOM';
+
+export type MediaSingleDefinition =
+  | MediaSingleFullDefinition
+  | MediaSingleWithCaptionDefinition;
+
+/**
+ * @name mediaSingle_node
+ * @additionalProperties true
+ */
+export interface MediaSingleBaseDefinition {
+  type: 'mediaSingle';
+  attrs?: ExtendedMediaAttributes;
+  marks?: Array<LinkDefinition>;
+}
+
+/**
+ * @additionalProperties true
+ */
+export interface MediaCaptionContent {
+  /**
+   * @minItems 1
+   * @maxItems 2
+   * @allowUnsupportedBlock true
+   */
+  content: [Media, Caption?];
+}
+/**
+ * @name mediaSingle_caption_node
+ */
+export type MediaSingleWithCaptionDefinition = MediaSingleBaseDefinition &
+  MediaCaptionContent;
+
+/**
+ * @additionalProperties true
+ */
+export interface MediaSingleFullContent {
+  /**
+   * @minItems 1
+   * @maxItems 1
+   * @allowUnsupportedBlock true
+   */
+  content: Array<Media>;
+}
+
+/**
+ * @name mediaSingle_full_node
+ */
+export type MediaSingleFullDefinition = MediaSingleBaseDefinition &
+  MediaSingleFullContent;
+
+export const defaultAttrs: {
+  width: {
+      default: null;
+  };
+  layout: {
+      default: string;
+  };
+} = {
+  width: { default: null }, // null makes small images to have original size by default
+  layout: { default: 'center' },
+};
+
+export const mediaSingleSpec = ({
+  withCaption = false,
+  withExtendedWidthTypes = false,
+}: {
+  withCaption?: boolean | undefined;
+  withExtendedWidthTypes?: boolean | undefined;
+}): NodeSpec => {
+  const content = withCaption
+    ? 'media|unsupportedBlock+|media (caption|unsupportedBlock) unsupportedBlock*'
+    : 'media|unsupportedBlock+|media unsupportedBlock+';
+
+  const atom = !withCaption;
+
+  const getAttrs = (dom: string | Node) => {
+    if (!isDOMElement(dom)) {
+      // this should never happen
+      return { layout: 'center' };
+    }
+
+    const layout = dom.getAttribute('data-layout') || 'center';
+    const width = Number(dom.getAttribute('data-width')) || null;
+    const widthType = dom.getAttribute('data-width-type');
+
+    if (withExtendedWidthTypes) {
+      return { layout, width, widthType };
+    } else if (widthType === WidthType.PIXEL) {
+      // if editor does not support widthType attribute.
+      // We ignore width and widthType together.
+      return { layout };
+    } else {
+      return { layout, width };
+    }
+  };
+
+  const getAttrsFromNode = (node: PMNode) => {
+    const { layout, width } = node.attrs;
+    const attrs = {
+      'data-node-type': 'mediaSingle',
+      'data-layout': layout,
+      'data-width': '',
+    };
+
+    if (width) {
+      attrs['data-width'] =
+        isFinite(width) && Math.floor(width) === width
+          ? width
+          : width.toFixed(2);
+    }
+
+    if (withExtendedWidthTypes && node.attrs.widthType) {
+      const { widthType } = node.attrs;
+      return {
+        ...attrs,
+        'data-width-type': widthType || WidthType.PERCENTAGE,
+      };
+    }
+
+    return attrs;
+  };
+
+  return {
+    inline: false,
+    group: 'block',
+    selectable: true,
+    atom,
+    content,
+    attrs: withExtendedWidthTypes
+      ? { ...defaultAttrs, widthType: { default: null } }
+      : defaultAttrs,
+    marks: 'unsupportedMark unsupportedNodeAttribute border link',
+    parseDOM: [
+      {
+        tag: 'div[data-node-type="mediaSingle"]',
+        getAttrs,
+      },
+    ],
+    toDOM(node: PMNode) {
+      return ['div', getAttrsFromNode(node), 0];
+    },
+  };
+};
+
+export const mediaSingle: NodeSpec = mediaSingleSpec({
+  withCaption: false,
+  withExtendedWidthTypes: false,
+});
+
+export const mediaSingleWithCaption: NodeSpec = mediaSingleSpec({
+  withCaption: true,
+  withExtendedWidthTypes: false,
+});
+
+export const mediaSingleWithWidthType: NodeSpec = mediaSingleSpec({
+  withCaption: false,
+  withExtendedWidthTypes: true,
+});
+
+export const mediaSingleFull: NodeSpec = mediaSingleSpec({
+  withCaption: true,
+  withExtendedWidthTypes: true,
+});
+
+export const toJSON = (node: PMNode) => ({
+  attrs: Object.keys(node.attrs).reduce<any>((obj, key) => {
+    if (node.attrs[key] !== null) {
+      obj[key] = node.attrs[key];
+    }
+    return obj;
+  }, {}),
+});

package/src/schema/nodes/media.ts

@@ -0,0 +1,249 @@
+import {
+  NodeSpec,
+  Node as PMNode,
+  ParseRule,
+} from '@atlaskit/editor-prosemirror/model';
+import { N30 } from '../../utils/colors';
+import { BorderMarkDefinition } from '../marks/border';
+import { LinkDefinition } from '../marks/link';
+
+export type MediaType = 'file' | 'link' | 'external';
+export type DisplayType = 'file' | 'thumbnail';
+
+export type DefaultAttributes<T> = {
+  [P in keyof T]: {
+    default?: T[P] | null;
+  };
+};
+
+/**
+ * @name media_node
+ */
+export interface MediaDefinition {
+  type: 'media';
+  /**
+   * @minItems 1
+   */
+  attrs: MediaADFAttrs;
+
+  marks?: Array<LinkDefinition | BorderMarkDefinition>;
+}
+
+export interface MediaBaseAttributes {
+  /**
+   * @minLength 1
+   */
+  id: string;
+  collection: string;
+  height?: number;
+  width?: number;
+  /**
+   * @minLength 1
+   */
+  occurrenceKey?: string;
+  alt?: string;
+  // For both CQ and JIRA
+  __fileName?: string | null;
+  // For CQ
+  __fileSize?: number | null;
+  __fileMimeType?: string | null;
+  // For JIRA
+  __displayType?: DisplayType | null;
+  // For copy & paste
+  __contextId?: string | null;
+  // For tracing media operations
+  __mediaTraceId?: string | null;
+
+  // is set to true when new external media is inserted, false for external media in existing documents
+  __external?: boolean;
+}
+
+export interface MediaAttributes extends MediaBaseAttributes {
+  type: 'file' | 'link';
+}
+
+export interface ExternalMediaAttributes {
+  type: 'external';
+  url: string;
+  alt?: string;
+  width?: number;
+  height?: number;
+  __external?: boolean;
+}
+
+export type MediaADFAttrs = MediaAttributes | ExternalMediaAttributes;
+
+export const defaultAttrs: DefaultAttributes<MediaADFAttrs> = {
+  id: { default: '' },
+  type: { default: 'file' },
+  collection: { default: '' },
+  occurrenceKey: { default: null },
+  alt: { default: '' },
+  width: { default: null },
+  height: { default: null },
+  url: { default: null },
+  __fileName: { default: null },
+  __fileSize: { default: null },
+  __fileMimeType: { default: null },
+  __displayType: { default: null },
+  __contextId: { default: null },
+  __mediaTraceId: { default: null },
+  __external: { default: false },
+};
+
+interface MutableMediaAttributes extends MediaAttributes {
+  [key: string]: string | number | undefined | null | boolean;
+}
+
+export const createMediaSpec = (
+  attributes: Partial<NodeSpec['attrs']>,
+  inline: boolean = false,
+): NodeSpec => {
+  const domNodeType = inline ? 'span' : 'div';
+  const nodeName = inline ? 'mediaInline' : 'media';
+  const parseDOM: ParseRule[] = [
+    {
+      tag: `${domNodeType}[data-node-type="${nodeName}"]`,
+      getAttrs: (dom) => {
+        const attrs = {} as MutableMediaAttributes;
+
+        if (attributes) {
+          Object.keys(attributes).forEach((k) => {
+            const key = camelCaseToKebabCase(k).replace(/^__/, '');
+            const value =
+              (dom as HTMLElement).getAttribute(`data-${key}`) || '';
+            if (value) {
+              attrs[k] = value;
+            }
+          });
+        }
+
+        // Need to do validation & type conversion manually
+        if (attrs.__fileSize) {
+          attrs.__fileSize = +attrs.__fileSize;
+        }
+
+        const width = Number(attrs.width);
+        if (typeof width !== 'undefined' && !isNaN(width)) {
+          attrs.width = width;
+        }
+
+        const height = Number(attrs.height);
+        if (typeof height !== 'undefined' && !isNaN(height)) {
+          attrs.height = height;
+        }
+
+        return attrs as MediaAttributes;
+      },
+    },
+    // Don't match data URI
+    {
+      tag: 'img[src^="data:image"]',
+      ignore: true,
+    },
+  ];
+
+  // media-inline.ts uses this same function to generate the nodespec
+  // this ensures that we don't make a media inline out of a copied image
+  // https://product-fabric.atlassian.net/browse/EDM-2996
+  if (!inline) {
+    parseDOM.push({
+      tag: 'img:not(.smart-link-icon)',
+      getAttrs: (dom) => {
+        return {
+          type: 'external',
+          url: (dom as HTMLElement).getAttribute('src') || '',
+          alt: (dom as HTMLElement).getAttribute('alt') || '',
+        } as ExternalMediaAttributes;
+      },
+    });
+  }
+
+  return {
+    selectable: true,
+    inline,
+    group: inline ? 'inline' : undefined,
+    attrs: attributes as NodeSpec['attrs'],
+    parseDOM,
+    toDOM(node: PMNode) {
+      const attrs = {
+        'data-id': node.attrs.id,
+        'data-node-type': `${nodeName}`,
+        'data-type': node.attrs.type,
+        'data-collection': node.attrs.collection,
+        'data-occurrence-key': node.attrs.occurrenceKey,
+        'data-width': node.attrs.width,
+        'data-height': node.attrs.height,
+        'data-url': node.attrs.url,
+        'data-alt': node.attrs.alt,
+        // toDOM is used for static rendering as well as editor rendering. This comes into play for
+        // emails, copy/paste, etc, so the title and styling here *is* useful (despite a React-based
+        // node view being used for editing).
+        title: 'Attachment',
+        // Manually kept in sync with the style of media cards. The goal is to render a plain gray
+        // rectangle that provides an affordance for media.
+        style: `display: inline-block; border-radius: 3px; background: ${N30}; box-shadow: 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24);`,
+      };
+
+      copyPrivateAttributes(
+        node.attrs,
+        attrs,
+        (key) => `data-${camelCaseToKebabCase(key.slice(2))}`,
+      );
+
+      return [`${domNodeType}`, attrs];
+    },
+  };
+};
+
+export const media: NodeSpec = createMediaSpec(defaultAttrs);
+
+export const camelCaseToKebabCase = (str: string) =>
+  str.replace(/([^A-Z]+)([A-Z])/g, (_, x, y) => `${x}-${y.toLowerCase()}`);
+
+export const copyPrivateAttributes: (from: Record<string, any>, to: Record<string, any>, map?: ((str: string) => string) | undefined) => void = (
+  from: Record<string, any>,
+  to: Record<string, any>,
+  map?: (str: string) => string,
+) => {
+  if (media.attrs) {
+    Object.keys(media.attrs).forEach((key) => {
+      if (key[0] === '_' && key[1] === '_' && from[key]) {
+        to[map ? map(key) : key] = from[key];
+      }
+    });
+  }
+};
+
+/**
+ * There's no concept of optional property in ProseMirror. It sets value as `null`
+ * when there's no use of any property. We are filtering out all private & optional attrs here.
+ */
+const optionalAttributes = ['occurrenceKey', 'width', 'height', 'url', 'alt'];
+const externalOnlyAttributes = ['type', 'url', 'width', 'height', 'alt'];
+
+export const toJSON = (node: PMNode) => ({
+  attrs: Object.keys(node.attrs)
+    // Strip private attributes e.g. __fileName, __fileSize, __fileMimeType, etc.
+    .filter((key) => !(key[0] === '_' && key[1] === '_'))
+    .reduce<Record<string, any>>((obj, key) => {
+      if (
+        node.attrs.type === 'external' &&
+        externalOnlyAttributes.indexOf(key) === -1
+      ) {
+        return obj;
+      }
+      if (
+        optionalAttributes.indexOf(key) > -1 &&
+        (node.attrs[key] === null || node.attrs[key] === '')
+      ) {
+        return obj;
+      }
+      if (['width', 'height'].indexOf(key) !== -1) {
+        obj[key] = Number(node.attrs[key]);
+        return obj;
+      }
+      obj[key] = node.attrs[key];
+      return obj;
+    }, {}),
+});

package/src/schema/nodes/mention.ts

@@ -0,0 +1,86 @@
+import { NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+
+export enum USER_TYPES {
+  DEFAULT = 'DEFAULT',
+  SPECIAL = 'SPECIAL',
+  APP = 'APP',
+}
+
+export type UserType = keyof typeof USER_TYPES;
+
+export interface MentionAttributes {
+  id: string;
+  text?: string;
+  userType?: UserType;
+  accessLevel?: string;
+}
+
+/**
+ * @name mention_node
+ */
+export interface MentionDefinition {
+  type: 'mention';
+  attrs: MentionAttributes;
+}
+
+export const mention: NodeSpec = {
+  inline: true,
+  group: 'inline',
+  selectable: true,
+  attrs: {
+    id: { default: '' },
+    text: { default: '' },
+    accessLevel: { default: '' },
+    userType: { default: null },
+  },
+  parseDOM: [
+    {
+      tag: 'span[data-mention-id]',
+      getAttrs: (domNode) => {
+        const dom = domNode as HTMLElement;
+        const attrs: MentionAttributes = {
+          id: dom.getAttribute('data-mention-id') || mention.attrs!.id.default,
+          text: dom.textContent || mention.attrs!.text.default,
+          accessLevel:
+            dom.getAttribute('data-access-level') ||
+            mention.attrs!.accessLevel.default,
+        };
+
+        const userType = dom.getAttribute('data-user-type') as USER_TYPES;
+        if (USER_TYPES[userType]) {
+          attrs.userType = userType;
+        }
+
+        return attrs;
+      },
+    },
+  ],
+  toDOM(node) {
+    const { id, accessLevel, text, userType } = node.attrs;
+    const attrs: any = {
+      'data-mention-id': id,
+      'data-access-level': accessLevel,
+      contenteditable: 'false',
+    };
+    if (userType) {
+      attrs['data-user-type'] = userType;
+    }
+    return ['span', attrs, text];
+  },
+};
+
+const isOptional = (key: string) => {
+  return ['userType'].indexOf(key) > -1;
+};
+
+export const toJSON = (node: PMNode) => ({
+  attrs: Object.keys(node.attrs).reduce<typeof node.attrs>((obj, key) => {
+    if (isOptional(key) && !node.attrs[key]) {
+      return obj;
+    }
+    return {
+      ...obj,
+      [key]: node.attrs[key],
+    };
+  }, {}),
+});