@atlaskit/adf-schema 28.1.6 → 28.1.8

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

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

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

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

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

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

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

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

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

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

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

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