@atlaskit/adf-schema 28.1.11 → 28.1.13

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];
-  },
-};

package/src/schema/nodes/bodied-extension.ts

@@ -1,75 +0,0 @@
-import { NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { getExtensionAttrs } from '../../utils/extensions';
-import { ExtensionAttributes } from './types/extensions';
-import { MarksObject } from './types/mark';
-import { NonNestableBlockContent } from './types/non-nestable-block-content';
-import { DataConsumerDefinition } from '../marks/data-consumer';
-import { FragmentDefinition } from '../marks/fragment';
-
-/**
- * @name bodiedExtension_node
- */
-export interface BodiedExtensionBaseDefinition {
-  type: 'bodiedExtension';
-  attrs: ExtensionAttributes;
-  marks?: Array<any>;
-  /**
-   * @minItems 1
-   * @allowUnsupportedBlock true
-   */
-  content: Array<NonNestableBlockContent>;
-}
-
-/**
- * @name bodiedExtension_with_marks_node
- */
-export type BodiedExtensionDefinition = BodiedExtensionBaseDefinition &
-  MarksObject<DataConsumerDefinition | FragmentDefinition>;
-
-const createBodiedExtensionNodeSpec = (): NodeSpec => {
-  const nodeSpec: NodeSpec = {
-    inline: false,
-    group: 'block',
-    marks: 'dataConsumer fragment',
-    content:
-      '(paragraph | panel | blockquote | orderedList | bulletList | rule | heading | codeBlock | mediaGroup | mediaSingle | decisionList | taskList | table | blockCard | extension | unsupportedBlock | embedCard)+',
-    defining: true,
-    selectable: true,
-    isolating: true,
-    attrs: {
-      extensionType: { default: '' },
-      extensionKey: { default: '' },
-      parameters: { default: null },
-      text: { default: null },
-      layout: { default: 'default' },
-      localId: { default: null },
-    },
-    parseDOM: [
-      {
-        context: 'bodiedExtension//',
-        tag: '[data-node-type="bodied-extension"]',
-        skip: true,
-      },
-      {
-        tag: '[data-node-type="bodied-extension"]',
-        getAttrs: (domNode) => getExtensionAttrs(domNode as HTMLElement),
-      },
-    ],
-    toDOM(node: PMNode) {
-      const attrs = {
-        'data-node-type': 'bodied-extension',
-        'data-extension-type': node.attrs.extensionType,
-        'data-extension-key': node.attrs.extensionKey,
-        'data-text': node.attrs.text,
-        'data-parameters': JSON.stringify(node.attrs.parameters),
-        'data-layout': node.attrs.layout,
-        'data-local-id:': node.attrs.localId,
-      };
-      return ['div', attrs, 0];
-    },
-  };
-
-  return nodeSpec;
-};
-
-export const bodiedExtension = createBodiedExtensionNodeSpec();

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

@@ -1,17 +0,0 @@
-import { NodeSpec } from '@atlaskit/editor-prosemirror/model';
-
-export const bulletListSelector = '.ak-ul';
-
-export const bulletList: NodeSpec = {
-  group: 'block',
-  content: 'listItem+',
-  selectable: false,
-  parseDOM: [{ tag: 'ul' }],
-  marks: 'unsupportedMark unsupportedNodeAttribute',
-  toDOM() {
-    const attrs = {
-      class: bulletListSelector.substr(1),
-    };
-    return ['ul', attrs, 0];
-  },
-};

package/src/schema/nodes/caption.ts

@@ -1,51 +0,0 @@
-import { NodeSpec } from '@atlaskit/editor-prosemirror/model';
-import { InlineFormattedText, InlineCode } from './types/inline-content';
-import { HardBreakDefinition as HardBreak } from './hard-break';
-import { MentionDefinition as Mention } from './mention';
-import { EmojiDefinition as Emoji } from './emoji';
-import { DateDefinition as Date } from './date';
-import { PlaceholderDefinition as Placeholder } from './placeholder';
-import { InlineCardDefinition as InlineCard } from './inline-card';
-import { StatusDefinition as Status } from './status';
-
-/**
- * @name caption_node
- */
-export interface CaptionDefinition {
-  type: 'caption';
-  /**
-   * @minItems 0
-   * @allowUnsupportedInline true
-   */
-  content: Array<
-    | InlineFormattedText
-    | InlineCode
-    | HardBreak
-    | Mention
-    | Emoji
-    | Date
-    | Placeholder
-    | InlineCard
-    | Status
-  >;
-}
-
-export const caption: NodeSpec = {
-  content:
-    '(text|hardBreak|mention|emoji|date|placeholder|inlineCard|status|unsupportedInline)*',
-  isolating: true,
-  marks: '_',
-  selectable: false,
-  parseDOM: [
-    {
-      tag: 'figcaption[data-caption]',
-    },
-  ],
-  toDOM(node) {
-    const attrs: Record<string, string> = {
-      'data-caption': 'true',
-    };
-
-    return ['figcaption', attrs, 0];
-  },
-};