@atlaskit/adf-schema 28.1.6 → 28.1.8

package/src/schema/marks/code.ts

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

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

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

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

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

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

package/src/schema/marks/index.ts

@@ -0,0 +1,61 @@
+export { em } from './em';
+export type { EmDefinition } from './em';
+export { code } from './code';
+export type { CodeDefinition } from './code';
+export { strike } from './strike';
+export type { StrikeDefinition } from './strike';
+export { strong } from './strong';
+export type { StrongDefinition } from './strong';
+export { underline } from './underline';
+export type { UnderlineDefinition } from './underline';
+export { link, toJSON as linkToJSON } from './link';
+export type { LinkAttributes, LinkDefinition } from './link';
+export { typeAheadQuery } from './type-ahead-query';
+export { subsup } from './subsup';
+export type { SubSupDefinition, SubSupAttributes } from './subsup';
+export { textColor, colorPalette, colorPaletteExtended } from './text-color';
+export type { TextColorDefinition, TextColorAttributes } from './text-color';
+export { confluenceInlineComment } from './confluence-inline-comment';
+export { breakout } from './breakout';
+export type { BreakoutMarkAttrs, BreakoutMarkDefinition } from './breakout';
+export { alignment, alignmentPositionMap } from './alignment';
+export type { AlignmentAttributes, AlignmentMarkDefinition } from './alignment';
+export { indentation } from './indentation';
+export type {
+  IndentationMarkAttributes,
+  IndentationMarkDefinition,
+} from './indentation';
+export {
+  annotation,
+  AnnotationMarkStates,
+  buildDataAttributes as buildAnnotationMarkDataAttributes,
+  AnnotationTypes,
+} from './annotation';
+export type {
+  AnnotationMarkDefinition,
+  AnnotationMarkAttributes,
+  AnnotationId,
+  AnnotationDataAttributes,
+} from './annotation';
+
+export { unsupportedMark } from './unsupported-mark';
+
+export { unsupportedNodeAttribute } from './unsupported-node-attributes';
+
+export type {
+  DataConsumerAttributes,
+  DataConsumerDefinition,
+} from './data-consumer';
+
+export { dataConsumer, toJSON as dataConsumerToJSON } from './data-consumer';
+
+export type {
+  FragmentAttributes,
+  FragmentDefinition,
+  LocalId,
+} from './fragment';
+
+export { fragment, toJSON as fragmentToJSON } from './fragment';
+
+export { border, borderColorPalette } from './border';
+export type { BorderMarkAttributes, BorderMarkDefinition } from './border';

package/src/schema/marks/link.ts

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

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

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

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