@atlaskit/adf-schema 28.1.12 → 28.2.0

package/src/schema/marks/__tests__/unit/annotation.ts

@@ -1,18 +0,0 @@
-import { AnnotationTypes, buildDataAttributes } from '../../annotation';
-
-describe('marks/annotations', () => {
-  describe('#buildDataAttributes', () => {
-    it('should return an object with the data attributes', () => {
-      const result = buildDataAttributes({
-        id: '999',
-        annotationType: AnnotationTypes.INLINE_COMMENT,
-      });
-
-      expect(result).toEqual({
-        'data-mark-type': 'annotation',
-        'data-mark-annotation-type': 'inlineComment',
-        'data-id': '999',
-      });
-    });
-  });
-});

package/src/schema/marks/alignment.ts

@@ -1,48 +0,0 @@
-import { MarkSpec } from '@atlaskit/editor-prosemirror/model';
-import { ALIGNMENT, INDENTATION } from '../groups';
-
-/** TODO: Flip these positions for RTL */
-export const alignmentPositionMap: { [key: string]: string } = {
-  end: 'right',
-  right: 'end',
-  center: 'center',
-};
-
-export interface AlignmentAttributes {
-  align: 'center' | 'end';
-}
-
-/**
- * @name alignment_mark
- */
-export interface AlignmentMarkDefinition {
-  type: 'alignment';
-  attrs: AlignmentAttributes;
-}
-
-export const alignment: MarkSpec = {
-  excludes: `alignment ${INDENTATION}`,
-  group: ALIGNMENT,
-  attrs: {
-    align: {},
-  },
-  parseDOM: [
-    {
-      tag: 'div.fabric-editor-block-mark',
-      getAttrs: (dom) => {
-        const align = (dom as Element).getAttribute('data-align');
-        return align ? { align } : false;
-      },
-    },
-  ],
-  toDOM(mark) {
-    return [
-      'div',
-      {
-        class: `fabric-editor-block-mark fabric-editor-alignment fabric-editor-align-${mark.attrs.align}`,
-        'data-align': mark.attrs.align,
-      },
-      0,
-    ];
-  },
-};

package/src/schema/marks/annotation.ts

@@ -1,107 +0,0 @@
-import { MarkSpec } from '@atlaskit/editor-prosemirror/model';
-
-/**
- * @name annotation_mark
- */
-export interface AnnotationMarkDefinition {
-  type: 'annotation';
-  attrs: AnnotationMarkAttributes;
-}
-
-export interface AnnotationMarkAttributes {
-  id: AnnotationId;
-  annotationType: AnnotationTypes;
-}
-
-export type AnnotationId = string;
-export enum AnnotationTypes {
-  INLINE_COMMENT = 'inlineComment',
-}
-export enum AnnotationMarkStates {
-  RESOLVED = 'resolved',
-  ACTIVE = 'active',
-}
-
-export type AnnotationDataAttributes = {
-  'data-mark-type': string;
-  'data-mark-annotation-type': AnnotationTypes;
-  'data-id': AnnotationId;
-  'data-mark-annotation-state'?: AnnotationMarkStates;
-};
-
-type BuildDataAttributesProps = AnnotationMarkAttributes & {
-  state?: AnnotationMarkStates | undefined | null;
-};
-export function buildDataAttributes({
-  id,
-  annotationType,
-  state,
-}: BuildDataAttributesProps): AnnotationDataAttributes {
-  const data = {
-    'data-mark-type': 'annotation',
-    'data-mark-annotation-type': annotationType,
-    'data-id': id,
-  };
-
-  if (state) {
-    return {
-      ...data,
-      'data-mark-annotation-state': state,
-    };
-  }
-
-  return data;
-}
-
-export const annotation: MarkSpec = {
-  inclusive: true,
-  group: 'annotation',
-  excludes: '',
-  attrs: {
-    id: {
-      default: '',
-    },
-    annotationType: {
-      default: AnnotationTypes.INLINE_COMMENT,
-    },
-  },
-  parseDOM: [
-    {
-      tag: 'span[data-mark-type="annotation"]',
-      mark: 'annotation',
-      getAttrs: (domNode) => {
-        const dom = domNode as HTMLElement;
-        let attrs: AnnotationMarkAttributes = {
-          id: dom.getAttribute('data-id') as string,
-          annotationType: dom.getAttribute(
-            'data-mark-annotation-type',
-          ) as AnnotationTypes,
-        };
-
-        return attrs;
-      },
-    },
-  ],
-  toDOM(node) {
-    /*
-      Data attributes on the DOM node are a temporary means of
-      incrementally switching over to the Annotation mark. Once renderer
-      provides native support for inline comments the data attributes on the
-      DOM nodes will be removed.
-    */
-    return [
-      'span',
-      {
-        // Prettier will remove the quotes around class. This would cause some browsers
-        // to not add this attribute properly, as its a reserved word.
-        // prettier-ignore
-        'class': 'fabric-editor-annotation',
-        ...buildDataAttributes({
-          id: node.attrs.id as AnnotationId,
-          annotationType: node.attrs.annotationType as AnnotationTypes,
-        }),
-      } as any,
-      0,
-    ];
-  },
-};

package/src/schema/marks/border.ts

@@ -1,74 +0,0 @@
-import { MarkSpec } from '@atlaskit/editor-prosemirror/model';
-import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
-import { N300A, N600, N1000 } from '../../utils/colors';
-
-export type BorderMarkAttributes = {
-  /**
-   * @minimum 1
-   * @maximum 3
-   */
-  size: number;
-  /**
-   * @pattern "^#[0-9a-fA-F]{8}$|^#[0-9a-fA-F]{6}$"
-   */
-  color: string;
-};
-
-/**
- * @name border_mark
- * @description This mark adds decoration to an element, and any element decorated with it will also have a border style.
- */
-export interface BorderMarkDefinition {
-  type: 'border';
-  attrs: BorderMarkAttributes;
-}
-
-export type BorderColorKey = 'Subtle gray' | 'Gray' | 'Bold gray';
-
-const borderColorArrayPalette: Array<[string, BorderColorKey]> = [
-  [N300A, 'Subtle gray'],
-  [N600, 'Gray'],
-  [N1000, 'Bold gray'],
-];
-
-export const borderColorPalette = new Map<string, BorderColorKey>();
-
-borderColorArrayPalette.forEach(([color, label]) =>
-  borderColorPalette.set(color.toLowerCase(), label),
-);
-
-export const border: MarkSpec = {
-  inclusive: false,
-  parseDOM: [
-    {
-      tag: 'div[data-mark-type="border"]',
-      getAttrs: (domNode) => {
-        const dom = domNode as HTMLElement;
-        const color = (dom.getAttribute('data-color') ?? '').toLowerCase();
-        const size = +(dom.getAttribute('data-size') ?? '0');
-
-        return {
-          size: size > 3 ? 3 : size < 1 ? false : size,
-          color: borderColorPalette.has(color) ? color : false,
-        };
-      },
-    },
-  ],
-  attrs: { color: {}, size: {} },
-  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 =
-      hexToEditorBorderPaletteColor(mark.attrs.color) || mark.attrs.color;
-    return [
-      'div',
-      {
-        'data-mark-type': 'border',
-        'data-color': mark.attrs.color,
-        'data-size': mark.attrs.size,
-        style: `--custom-palette-color: ${paletteColorValue}`,
-      },
-    ];
-  },
-};

package/src/schema/marks/breakout.ts

@@ -1,42 +0,0 @@
-import { MarkSpec } from '@atlaskit/editor-prosemirror/model';
-
-const allowedTypes = ['wide', 'full-width'];
-
-export type BreakoutMarkAttrs = {
-  mode: 'wide' | 'full-width';
-};
-
-/**
- * @name breakout_mark
- */
-export interface BreakoutMarkDefinition {
-  type: 'breakout';
-  attrs: BreakoutMarkAttrs;
-}
-
-export const breakout: MarkSpec = {
-  spanning: false,
-  inclusive: false,
-  parseDOM: [
-    {
-      tag: 'div.fabric-editor-breakout-mark',
-      getAttrs(dom) {
-        const mode = (dom as HTMLElement).getAttribute('data-mode');
-
-        return {
-          mode: allowedTypes.indexOf(mode || '') === -1 ? 'wide' : mode,
-        };
-      },
-    },
-  ],
-  attrs: {
-    mode: { default: 'wide' },
-  },
-  toDOM(mark) {
-    return [
-      'div',
-      { class: 'fabric-editor-breakout-mark', 'data-mode': mark.attrs.mode },
-      0,
-    ];
-  },
-};

package/src/schema/marks/code.ts

@@ -1,45 +0,0 @@
-import { MarkSpec } from '@atlaskit/editor-prosemirror/model';
-import { COLOR, FONT_STYLE, LINK, SEARCH_QUERY } from '../groups';
-
-/**
- * @name code_mark
- */
-export interface CodeDefinition {
-  type: 'code';
-}
-
-export const code: MarkSpec = {
-  excludes: `${FONT_STYLE} ${LINK} ${SEARCH_QUERY} ${COLOR}`,
-  inclusive: true,
-  parseDOM: [
-    { tag: 'span.code', preserveWhitespace: true },
-    { tag: 'code', preserveWhitespace: true },
-    { tag: 'tt', preserveWhitespace: true },
-    {
-      tag: 'span',
-      preserveWhitespace: true,
-      getAttrs: (domNode) => {
-        let dom = domNode as HTMLSpanElement;
-        if (dom.style.whiteSpace === 'pre') {
-          return {};
-        }
-        if (
-          dom.style.fontFamily &&
-          dom.style.fontFamily.toLowerCase().indexOf('monospace') >= 0
-        ) {
-          return {};
-        }
-        return false;
-      },
-    },
-  ],
-  toDOM() {
-    return [
-      'span',
-      {
-        class: 'code',
-        spellcheck: 'false',
-      },
-    ];
-  },
-};

package/src/schema/marks/confluence-inline-comment.ts

@@ -1,32 +0,0 @@
-import { MarkSpec } from '@atlaskit/editor-prosemirror/model';
-
-/**
- * @name inline_comment_marker
- * @description This temporary mark represents a Confluence-backed inline comment that wraps a piece of text. It will be replaced with a cross-product inline comment solution at later date.
- */
-export interface ConfluenceInlineCommentDefinition {
-  type: 'confluenceInlineComment';
-  attrs: {
-    reference: string;
-  };
-}
-
-export const confluenceInlineComment: MarkSpec = {
-  inclusive: false,
-  excludes: '',
-  attrs: {
-    reference: {
-      default: '',
-    },
-  },
-  parseDOM: [{ tag: 'span[data-mark-type="confluenceInlineComment"]' }],
-  toDOM(node) {
-    return [
-      'span',
-      {
-        'data-mark-type': 'confluenceInlineComment',
-        'data-reference': node.attrs.reference,
-      },
-    ];
-  },
-};

package/src/schema/marks/data-consumer.ts

@@ -1,100 +0,0 @@
-import { Mark, MarkSpec } from '@atlaskit/editor-prosemirror/model';
-import { isDOMElement } from '../../utils/parseDOM';
-
-/**
- * This annotation is purely for reference, & does _nothing_ given annotating
- * `minLength` on an array of strings is not supported with our schema+spec
- * generator.
- *
- * We're keeping it to signal that data consumer `sources` shouldn't be empty
- * strings
- *
- * // @minLength 1
- */
-type DataConsumerSource = string;
-
-export interface DataConsumerAttributes {
-  /**
-   * @minItems 1
-   */
-  sources: Array<DataConsumerSource>;
-}
-
-/**
- * @name dataConsumer_mark
- * @description This mark is used for metadata surrounding a node consuming data
- * from a given source node
- */
-export interface DataConsumerDefinition {
-  type: 'dataConsumer';
-  attrs: DataConsumerAttributes;
-}
-
-export interface DataConsumerMark extends Mark {
-  attrs: DataConsumerAttributes;
-}
-
-const parseDataConsumer = (maybeValue: string | Node) => {
-  const sources =
-    isDOMElement(maybeValue) && maybeValue.getAttribute('data-sources');
-  try {
-    return sources ? { sources: JSON.parse(sources) } : false;
-  } catch {
-    return false;
-  }
-};
-
-export const dataConsumer: MarkSpec = {
-  attrs: { sources: { default: [] } },
-  parseDOM: [
-    {
-      tag: '[data-mark-type="dataConsumer"]',
-      getAttrs: (maybeValue) => parseDataConsumer(maybeValue),
-    },
-  ],
-  toDOM(mark: Mark, inline) {
-    const wrapperStyle = inline ? 'span' : 'div';
-
-    return [
-      wrapperStyle,
-      {
-        'data-mark-type': 'dataConsumer',
-        'data-sources': JSON.stringify(mark.attrs.sources),
-      },
-    ];
-  },
-};
-
-/**
- * We want to ensure any "invalid ADF" doesn't get serialised, but the entire
- * mark itself is not valid without a non-empty `sources`.
- *
- * We _almost could_ simply return `null` if sources length is < 0 & would fit
- * the type signature of prosemirror-model's `fragment` but not `mark`'s toJSON.
- *
- * So we'll leave any extra transformation checks in
- * `editor-json-transformer`(?)
- */
-export const toJSON = (mark: Mark) => {
-  // // Remove intemediary state if we don't have any sources on data consumer
-  // if (mark.attrs?.sources?.length < 1) {
-  //   return null;
-  // }
-
-  return {
-    type: mark.type.name,
-    attrs: Object.keys(mark.attrs)
-      .filter(
-        (key) =>
-          key === 'sources' &&
-          mark.attrs[key].length > 0 &&
-          mark.attrs[key] !== null,
-      )
-      .reduce<typeof mark.attrs>((acc, key) => {
-        return {
-          ...acc,
-          [key]: mark.attrs[key],
-        };
-      }, {}),
-  };
-};

package/src/schema/marks/em.ts

@@ -1,19 +0,0 @@
-import { MarkSpec, DOMOutputSpec } from '@atlaskit/editor-prosemirror/model';
-import { FONT_STYLE } from '../groups';
-
-/**
- * @name em_mark
- */
-export interface EmDefinition {
-  type: 'em';
-}
-
-const emDOM: DOMOutputSpec = ['em'];
-export const em: MarkSpec = {
-  inclusive: true,
-  group: FONT_STYLE,
-  parseDOM: [{ tag: 'i' }, { tag: 'em' }, { style: 'font-style=italic' }],
-  toDOM() {
-    return emDOM;
-  },
-};

package/src/schema/marks/fragment.ts

@@ -1,77 +0,0 @@
-import { Mark, MarkSpec } from '@atlaskit/editor-prosemirror/model';
-import { isDOMElement } from '../../utils/parseDOM';
-
-export type LocalId = string;
-
-export interface FragmentAttributes {
-  /**
-   * @minLength 1
-   */
-  localId: LocalId;
-  name?: string;
-}
-
-/**
- * @name fragment_mark
- * @description Indicates that the elements decorated with this mark belong to a "fragment" entity, which represents a collection of ADF nodes.
- * This entity can be referred to later by its `localId` attribute.
- */
-export interface FragmentDefinition {
-  type: 'fragment';
-  attrs: FragmentAttributes;
-}
-
-export interface FragmentMark extends Mark {
-  attrs: FragmentAttributes;
-}
-
-const parseFragment = (
-  maybeValue: string | Node,
-): FragmentAttributes | false => {
-  if (!isDOMElement(maybeValue)) {
-    return false;
-  }
-
-  const name = maybeValue.getAttribute('data-name') ?? undefined;
-  const localId = maybeValue.getAttribute('data-localId');
-
-  if (!localId) {
-    return false;
-  }
-
-  return { localId, name };
-};
-
-export const fragment: MarkSpec = {
-  inclusive: false,
-  excludes: '',
-  attrs: { localId: { default: '' }, name: { default: null } },
-  parseDOM: [
-    {
-      tag: '[data-mark-type="fragment"]',
-      getAttrs: (maybeValue) => parseFragment(maybeValue),
-    },
-  ],
-  toDOM(mark: Mark, inline) {
-    const wrapperStyle = inline ? 'span' : 'div';
-
-    return [
-      wrapperStyle,
-      {
-        'data-mark-type': 'fragment',
-        'data-name': mark.attrs.name,
-        'data-localId': mark.attrs.localId,
-      },
-    ];
-  },
-};
-
-export const toJSON = (mark: Mark) => {
-  return {
-    type: mark.type.name,
-    attrs: {
-      localId: mark.attrs.localId,
-      ...(mark.attrs.name ? { name: mark.attrs.name } : {}),
-    },
-  };
-};

package/src/schema/marks/indentation.ts

@@ -1,47 +0,0 @@
-import { MarkSpec } from '@atlaskit/editor-prosemirror/model';
-import { ALIGNMENT, INDENTATION } from '../groups';
-
-export interface IndentationMarkAttributes {
-  /**
-   * @minimum 1
-   * @maximum 6
-   */
-  level: number;
-}
-
-/**
- * @name indentation_mark
- */
-export interface IndentationMarkDefinition {
-  type: 'indentation';
-  attrs: IndentationMarkAttributes;
-}
-
-export const indentation: MarkSpec = {
-  excludes: `indentation ${ALIGNMENT}`,
-  group: INDENTATION,
-  attrs: {
-    level: {},
-  },
-  parseDOM: [
-    {
-      tag: 'div.fabric-editor-indentation-mark',
-      getAttrs(dom) {
-        const level = +((dom as HTMLElement).getAttribute('data-level') || '0');
-        return {
-          level: level > 6 ? 6 : level < 1 ? false : level,
-        };
-      },
-    },
-  ],
-  toDOM(mark) {
-    return [
-      'div',
-      {
-        class: 'fabric-editor-block-mark fabric-editor-indentation-mark',
-        'data-level': mark.attrs.level,
-      },
-      0,
-    ];
-  },
-};