@atlaskit/adf-schema 28.1.12 → 28.2.0

package/src/schema/marks/link.ts

@@ -1,139 +0,0 @@
-import { MarkSpec, Mark } from '@atlaskit/editor-prosemirror/model';
-import { LINK } from '../groups';
-import { isRootRelative, isSafeUrl, normalizeUrl } from '../../utils/url';
-
-export interface ConfluenceLinkMetadata {
-  linkType: string;
-  versionAtSave?: string | null;
-  fileName?: string | null;
-  spaceKey?: string | null;
-  contentTitle?: string | null;
-  isRenamedTitle?: boolean;
-  anchorName?: string | null;
-  contentId?: string | null;
-  container?: ConfluenceLinkMetadata;
-}
-
-export interface LinkAttributes {
-  /**
-   * @validatorFn safeUrl
-   */
-  href: string;
-  title?: string;
-  id?: string;
-  collection?: string;
-  occurrenceKey?: string;
-
-  __confluenceMetadata?: ConfluenceLinkMetadata;
-}
-
-/**
- * @name link_mark
- */
-export interface LinkDefinition {
-  type: 'link';
-  attrs: LinkAttributes;
-}
-
-const getLinkAttrs = (attribute: string) => (domNode: Node | string) => {
-  const dom = domNode as HTMLLinkElement;
-
-  const href = dom.getAttribute(attribute) || '';
-  const attrs: { __confluenceMetadata: string; href?: string } = {
-    __confluenceMetadata: dom.hasAttribute('__confluenceMetadata')
-      ? JSON.parse(dom.getAttribute('__confluenceMetadata') || '')
-      : undefined,
-  };
-
-  if (!isSafeUrl(href)) {
-    return false;
-  }
-
-  if (isRootRelative(href)) {
-    attrs.href = href;
-    return attrs;
-  }
-
-  attrs.href = normalizeUrl(href);
-  return attrs;
-};
-
-export const link: MarkSpec = {
-  excludes: `${LINK}`, // ED-5844 No multiple links in media node
-  group: LINK,
-  attrs: {
-    href: {},
-    __confluenceMetadata: {
-      default: null,
-    },
-  },
-  inclusive: false,
-  parseDOM: [
-    {
-      tag: '[data-block-link]',
-      getAttrs: getLinkAttrs('data-block-link'),
-      contentElement: (node) => {
-        const clone = node.cloneNode(true);
-        (clone as HTMLElement).removeAttribute('data-block-link');
-        (clone as HTMLElement).setAttribute('data-skip-paste', 'true');
-        const wrapper = document.createElement('div');
-        wrapper.appendChild(clone);
-        return wrapper;
-      },
-    },
-    {
-      tag: 'a[href]',
-      getAttrs: getLinkAttrs('href'),
-    },
-  ],
-  toDOM(node, isInline) {
-    const attrs = Object.keys(node.attrs).reduce<any>((attrs, key) => {
-      if (key === '__confluenceMetadata') {
-        if (node.attrs[key] !== null) {
-          attrs[key] = JSON.stringify(node.attrs[key]);
-        }
-      } else if (key === 'href') {
-        attrs[key] = isSafeUrl(node.attrs[key]) ? node.attrs[key] : undefined;
-      } else {
-        attrs[key] = node.attrs[key];
-      }
-
-      return attrs;
-    }, {});
-
-    if (isInline) {
-      return ['a', attrs];
-    }
-
-    return [
-      'a',
-      {
-        ...attrs,
-        ['data-block-link']: 'true',
-        class: 'blockLink',
-      },
-      0,
-    ];
-  },
-};
-
-const OPTIONAL_ATTRS = [
-  'title',
-  'id',
-  'collection',
-  'occurrenceKey',
-  '__confluenceMetadata',
-];
-
-export const toJSON = (mark: Mark) => ({
-  type: mark.type.name,
-  attrs: Object.keys(mark.attrs).reduce<Record<string, string>>(
-    (attrs, key) => {
-      if (OPTIONAL_ATTRS.indexOf(key) === -1 || mark.attrs[key] !== null) {
-        attrs[key] = mark.attrs[key];
-      }
-      return attrs;
-    },
-    {},
-  ),
-});

package/src/schema/marks/strike.ts

@@ -1,26 +0,0 @@
-import { MarkSpec } from '@atlaskit/editor-prosemirror/model';
-import { FONT_STYLE } from '../groups';
-
-/**
- * @name strike_mark
- */
-export interface StrikeDefinition {
-  type: 'strike';
-}
-
-export const strike: MarkSpec = {
-  inclusive: true,
-  group: FONT_STYLE,
-  parseDOM: [
-    { tag: 'strike' },
-    { tag: 's' },
-    { tag: 'del' },
-    {
-      style: 'text-decoration',
-      getAttrs: (value) => value === 'line-through' && null,
-    },
-  ],
-  toDOM(): [string] {
-    return ['s'];
-  },
-};

package/src/schema/marks/strong.ts

@@ -1,45 +0,0 @@
-import { MarkSpec, DOMOutputSpec } from '@atlaskit/editor-prosemirror/model';
-import { FONT_STYLE } from '../groups';
-
-/**
- * @name strong_mark
- */
-export interface StrongDefinition {
-  type: 'strong';
-}
-
-const strongDOM: DOMOutputSpec = ['strong'];
-export const strong: MarkSpec = {
-  inclusive: true,
-  group: FONT_STYLE,
-  parseDOM: [
-    { tag: 'strong' },
-    // This works around a Google Docs misbehavior where
-    // pasted content will be inexplicably wrapped in `<b>`
-    // tags with a font-weight normal.
-    {
-      tag: 'b',
-      getAttrs(node) {
-        const element = node as HTMLElement;
-        return element.style.fontWeight !== 'normal' && null;
-      },
-    },
-    {
-      tag: 'span',
-      getAttrs(node) {
-        const element = node as HTMLElement;
-        const { fontWeight } = element.style;
-        return (
-          typeof fontWeight === 'string' &&
-          (fontWeight === 'bold' ||
-            fontWeight === 'bolder' ||
-            /^(bold(er)?|[5-9]\d{2,})$/.test(fontWeight)) &&
-          null
-        );
-      },
-    },
-  ],
-  toDOM() {
-    return strongDOM;
-  },
-};

package/src/schema/marks/subsup.ts

@@ -1,53 +0,0 @@
-import { MarkSpec, Mark } from '@atlaskit/editor-prosemirror/model';
-import { FONT_STYLE } from '../groups';
-
-export interface SubSupAttributes {
-  type: 'sub' | 'sup';
-}
-
-/**
- * @name subsup_mark
- */
-export interface SubSupDefinition {
-  type: 'subsup';
-  attrs: SubSupAttributes;
-}
-
-export interface SubSupMark extends Mark {
-  attrs: SubSupAttributes;
-}
-
-function getAttrFromVerticalAlign(node: HTMLElement) {
-  if (node.style.verticalAlign) {
-    const type = node.style.verticalAlign.slice(0, 3);
-    if (type === 'sub' || type === 'sup') {
-      return { type };
-    }
-  }
-  return false;
-}
-
-export const subsup: MarkSpec = {
-  inclusive: true,
-  group: FONT_STYLE,
-  attrs: { type: { default: 'sub' } },
-  parseDOM: [
-    { tag: 'sub', attrs: { type: 'sub' } },
-    { tag: 'sup', attrs: { type: 'sup' } },
-    {
-      // Special case for pasting from Google Docs
-      // Google Docs uses vertical align to denote subscript and super script
-      tag: 'span',
-      style: 'vertical-align=super',
-      getAttrs: (node) => getAttrFromVerticalAlign(node as HTMLElement),
-    },
-    {
-      tag: 'span',
-      style: 'vertical-align=sub',
-      getAttrs: (node) => getAttrFromVerticalAlign(node as HTMLElement),
-    },
-  ],
-  toDOM(mark) {
-    return [mark.attrs.type];
-  },
-};

package/src/schema/marks/text-color.ts

@@ -1,172 +0,0 @@
-import { Mark, MarkSpec } from '@atlaskit/editor-prosemirror/model';
-
-import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
-
-import { COLOR } from '../groups';
-import {
-  rgbToHex,
-  N0,
-  N80,
-  P50,
-  P300,
-  P500,
-  T75,
-  T300,
-  T500,
-  G75,
-  G300,
-  G500,
-  R75,
-  R300,
-  R500,
-  Y75,
-  Y200,
-  Y400,
-  B75,
-  B100,
-  B500,
-} from '../../utils/colors';
-
-export interface TextColorAttributes {
-  /**
-   * @pattern "^#[0-9a-fA-F]{6}$"
-   */
-  color: string;
-}
-
-/**
- * @name textColor_mark
- */
-export interface TextColorDefinition {
-  type: 'textColor';
-  attrs: TextColorAttributes;
-}
-
-export interface TextColorMark extends Mark {
-  attrs: TextColorAttributes;
-}
-
-export type TextColorKey =
-  // row 1 original
-  | 'Light gray'
-  | 'Purple'
-  | 'Teal'
-  | 'Green'
-  | 'Red'
-  | 'Orange'
-  // row 1 extended extras
-  | 'Dark gray'
-  | 'Blue'
-  | 'Yellow'
-  // row 2
-  | 'Dark blue'
-  | 'Dark teal'
-  | 'Dark green'
-  | 'Dark red'
-  | 'Dark purple'
-  // row 3
-  | 'White'
-  | 'Light blue'
-  | 'Light teal'
-  | 'Light green'
-  | 'Light yellow'
-  | 'Light red'
-  | 'Light purple';
-
-// used for extended palette in text color picker
-const colorArrayPalette: Array<[string, TextColorKey]> = [
-  // default row - first color is added programatically
-  // [N800, 'Squid ink'], // default dark gray
-  [B500, 'Dark blue'], // Chore coat
-  [T500, 'Dark teal'], // Shabby chic
-  [G500, 'Dark green'], // Keen green
-  [Y400, 'Orange'], // Cheezy blasters
-  [R500, 'Dark red'], // Dragon's blood
-  [P500, 'Dark purple'], // Prince
-  // row 2
-  [N80, 'Light gray'], // Spooky ghost
-  [B100, 'Blue'], // Arvo breeze
-  [T300, 'Teal'], // Tamarama
-  [G300, 'Green'], // Fine pine
-  [Y200, 'Yellow'], // Pub mix
-  [R300, 'Red'], // Poppy surprise
-  [P300, 'Purple'], // Da' juice
-  // row 3
-  [N0, 'White'],
-  [B75, 'Light blue'], // Schwag
-  [T75, 'Light teal'], // Arctic chill
-  [G75, 'Light green'], // Mintie
-  [Y75, 'Light yellow'], // Dandelion whisper
-  [R75, 'Light red'], // Bondi sunburn
-  [P50, 'Light purple'], // Lavender secret
-];
-
-// @see https://product-fabric.atlassian.net/wiki/spaces/E/pages/55979455/Colour+picker+decisions#Colourpickerdecisions-Visualdesigndecisions
-export const colorPalette = new Map<string, TextColorKey>();
-/** @deprecated [ED-15849] The extended palette is now rolled into the main one. Use `colorPalette` instead. */
-export const colorPaletteExtended = colorPalette;
-
-colorArrayPalette.forEach(([color, label]) =>
-  colorPalette.set(color.toLowerCase(), label),
-);
-
-export const textColor: MarkSpec = {
-  attrs: { color: {} },
-  inclusive: true,
-  group: COLOR,
-  parseDOM: [
-    {
-      style: 'color',
-      getAttrs: (maybeValue) => {
-        const value = maybeValue as string;
-        let hexColor;
-        if (value.match(/^rgb/i)) {
-          hexColor = rgbToHex(value);
-        } else if (value[0] === '#') {
-          hexColor = value.toLowerCase();
-        }
-        // else handle other colour formats
-        return hexColor && colorPalette.has(hexColor)
-          ? { color: hexColor }
-          : false;
-      },
-    },
-    // This rule ensures when loading from a renderer or editor where the
-    // presented text color does not match the stored hex color -- that the
-    // text color is preserved.
-    //
-    // This was initially introduced to ensure text-color marks were not lost
-    // when text-color was used inside a link, and is now also used to support
-    // where the hex color stored in ADF is used as an ID for a design system
-    // token (and based on theme mode -- the presented color will change).
-    {
-      tag: '.fabric-text-color-mark',
-      getAttrs: (maybeElement) => {
-        if (!(maybeElement instanceof HTMLElement)) {
-          return false;
-        }
-
-        const hexColor = maybeElement.dataset.textCustomColor;
-
-        return hexColor && colorPalette.has(hexColor)
-          ? { color: hexColor }
-          : false;
-      },
-    },
-  ],
-  toDOM(mark) {
-    // Note -- while there is no way to create custom colors using default tooling
-    // the editor does supported ad hoc color values -- and there may be content
-    // which has been migrated or created via apis which use such values.
-    const paletteColorValue =
-      hexToEditorTextPaletteColor(mark.attrs.color) || mark.attrs.color;
-    return [
-      'span',
-      {
-        class: 'fabric-text-color-mark',
-        style: `--custom-palette-color: ${paletteColorValue}`,
-        ['data-text-custom-color']: mark.attrs.color,
-      },
-    ];
-  },
-};

package/src/schema/marks/type-ahead-query.ts

@@ -1,22 +0,0 @@
-import { MarkSpec } from '@atlaskit/editor-prosemirror/model';
-import { SEARCH_QUERY } from '../groups';
-import { B400 } from '../../utils/colors';
-
-export const typeAheadQuery: MarkSpec = {
-  inclusive: true,
-  group: SEARCH_QUERY,
-  parseDOM: [{ tag: 'span[data-type-ahead-query]' }],
-  toDOM(node) {
-    return [
-      'span',
-      {
-        'data-type-ahead-query': 'true',
-        'data-trigger': node.attrs.trigger,
-        style: `color: ${B400}`,
-      },
-    ];
-  },
-  attrs: {
-    trigger: { default: '' },
-  },
-};

package/src/schema/marks/underline.ts

@@ -1,24 +0,0 @@
-import { MarkSpec } from '@atlaskit/editor-prosemirror/model';
-import { FONT_STYLE } from '../groups';
-
-/**
- * @name underline_mark
- */
-export interface UnderlineDefinition {
-  type: 'underline';
-}
-
-export const underline: MarkSpec = {
-  inclusive: true,
-  group: FONT_STYLE,
-  parseDOM: [
-    { tag: 'u' },
-    {
-      style: 'text-decoration',
-      getAttrs: (value) => value === 'underline' && null,
-    },
-  ],
-  toDOM(): [string] {
-    return ['u'];
-  },
-};

package/src/schema/marks/unsupported-mark.ts

@@ -1,9 +0,0 @@
-import { MarkSpec } from '@atlaskit/editor-prosemirror/model';
-
-export const unsupportedMark: MarkSpec = {
-  toDOM() {
-    return ['span'];
-  },
-  excludes: '',
-  attrs: { originalValue: {} },
-};

package/src/schema/marks/unsupported-node-attributes.ts

@@ -1,8 +0,0 @@
-import { MarkSpec } from '@atlaskit/editor-prosemirror/model';
-
-export const unsupportedNodeAttribute: MarkSpec = {
-  toDOM() {
-    return ['span'];
-  },
-  attrs: { type: {}, unsupported: {} },
-};

package/src/schema/nodes/block-card.ts

@@ -1,121 +0,0 @@
-import { NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Layout, OptionalRichMediaAttributes } from './types/rich-media-common';
-
-export interface UrlType {
-  /**
-   * @validatorFn safeUrl
-   */
-  url: string;
-}
-
-export interface DataType {
-  /**
-   * @additionalProperties true
-   */
-  data: object;
-}
-
-export interface DatasourceAttributeProperties {
-  id: string;
-  parameters: object;
-  /**
-   * @minItems 1
-   */
-  views: { type: string; properties?: object }[];
-}
-
-/**
- * @stage 0
- */
-export interface DatasourceAttributes extends OptionalRichMediaAttributes {
-  /**
-   * @validatorFn safeUrl
-   */
-  url?: string;
-  datasource: DatasourceAttributeProperties;
-}
-
-export type CardAttributes = UrlType | DataType;
-
-/**
- * @name blockCard_node
- */
-export interface BlockCardDefinition {
-  type: 'blockCard';
-  attrs: DatasourceAttributes | CardAttributes;
-}
-
-const getCommonAttributesFromDom = (
-  dom: string | Node,
-): Partial<BlockCardDefinition['attrs']> => {
-  const anchor = dom as HTMLAnchorElement;
-  const data = anchor.getAttribute('data-card-data');
-  const datasource = anchor.getAttribute('data-datasource');
-
-  return {
-    data: data ? JSON.parse(data) : undefined,
-    layout: datasource
-      ? ((dom as HTMLElement).getAttribute('data-layout') as Layout) || 'center'
-      : undefined,
-    width: Number((dom as HTMLElement).getAttribute('data-width')) || undefined,
-    datasource: datasource ? JSON.parse(datasource) : undefined,
-  };
-};
-
-export const blockCard: NodeSpec = {
-  inline: false,
-  group: 'block',
-  draggable: true,
-  selectable: true,
-  attrs: {
-    url: { default: null },
-    data: { default: null },
-    datasource: { default: null },
-    width: { default: null },
-    layout: { default: null },
-  },
-  parseDOM: [
-    {
-      tag: 'a[data-block-card]',
-
-      // bump priority higher than hyperlink
-      priority: 100,
-
-      getAttrs: (dom) => {
-        const anchor = dom as HTMLAnchorElement;
-
-        return {
-          url: anchor.getAttribute('href') || undefined,
-          ...getCommonAttributesFromDom(dom),
-        };
-      },
-    },
-
-    {
-      tag: 'div[data-block-card]',
-
-      getAttrs: (dom) => {
-        const anchor = dom as HTMLDivElement;
-
-        return {
-          url: anchor.getAttribute('data-card-url') || undefined,
-          ...getCommonAttributesFromDom(dom),
-        };
-      },
-    },
-  ],
-  toDOM(node: PMNode) {
-    const { url } = node.attrs as UrlType;
-    const { data } = node.attrs as DataType;
-    const { layout, width, datasource } = node.attrs as DatasourceAttributes;
-    const attrs = {
-      'data-block-card': '',
-      href: url || '',
-      'data-card-data': data ? JSON.stringify(data) : '',
-      'data-datasource': datasource ? JSON.stringify(datasource) : '',
-      'data-layout': layout,
-      'data-width': `${width}`,
-    };
-    return ['a', attrs, node?.attrs?.url || ' '];
-  },
-};

package/src/schema/nodes/blockquote.ts

@@ -1,25 +0,0 @@
-import { NodeSpec } from '@atlaskit/editor-prosemirror/model';
-import { ParagraphDefinition as Paragraph } from './paragraph';
-
-/**
- * @name blockquote_node
- */
-export interface BlockQuoteDefinition {
-  type: 'blockquote';
-  /**
-   * @minItems 1
-   * @allowUnsupportedBlock true
-   */
-  content: Array<Paragraph>;
-}
-
-export const blockquote: NodeSpec = {
-  content: '(paragraph | unsupportedBlock)+',
-  group: 'block',
-  defining: true,
-  selectable: false,
-  parseDOM: [{ tag: 'blockquote' }],
-  toDOM() {
-    return ['blockquote', 0];
-  },
-};