@atlaskit/adf-schema 28.1.12 → 28.2.0

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

@@ -1,44 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,179 +0,0 @@
-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

@@ -1,253 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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],
-    };
-  }, {}),
-});

package/src/schema/nodes/nested-expand.ts

@@ -1,77 +0,0 @@
-import { Node as PMNode, NodeSpec } from '@atlaskit/editor-prosemirror/model';
-import { NoMark } from './types/mark';
-import { ParagraphDefinition as Paragraph } from './paragraph';
-import { HeadingDefinition as Heading } from './heading';
-import { MediaSingleDefinition as MediaSingle } from './media-single';
-import { MediaGroupDefinition as MediaGroup } from './media-group';
-
-/**
- * @name nestedExpand_content
- * @minItems 1
- * @allowUnsupportedBlock true
- */
-export type NestedExpandContent = Array<
-  Paragraph | Heading | MediaSingle | MediaGroup
->;
-
-/**
- * @name nestedExpand_node
- */
-export interface NestedExpandBaseDefinition {
-  type: 'nestedExpand';
-  attrs: {
-    title?: string;
-  };
-  content: NestedExpandContent;
-}
-
-/**
- * @name nestedExpand_with_no_marks_node
- */
-export type NestedExpandDefinition = NestedExpandBaseDefinition & NoMark;
-
-export const nestedExpand: NodeSpec = {
-  inline: false,
-  marks: 'unsupportedMark unsupportedNodeAttribute',
-  content:
-    '(paragraph | heading | mediaSingle | mediaGroup | unsupportedBlock)+',
-  isolating: true,
-  selectable: true,
-  attrs: {
-    title: { default: '' },
-    __expanded: { default: true },
-  },
-  parseDOM: [
-    {
-      context: 'nestedExpand//',
-      tag: '[data-node-type="nestedExpand"]',
-      skip: true,
-    },
-    {
-      tag: '[data-node-type="nestedExpand"] button',
-      ignore: true,
-    },
-    {
-      tag: '[data-node-type="expand"] button',
-      ignore: true,
-    },
-    {
-      tag: 'div[data-node-type="nestedExpand"]',
-      getAttrs: (domNode) => {
-        const dom = domNode as HTMLElement;
-        return {
-          title: dom.getAttribute('data-title'),
-          __expanded: true,
-        };
-      },
-    },
-  ],
-  toDOM(node: PMNode) {
-    const attrs = {
-      'data-node-type': 'nestedExpand',
-      'data-title': node.attrs.title,
-      'data-expanded': node.attrs.__expanded,
-    };
-    return ['div', attrs, 0];
-  },
-};