@atlaskit/adf-schema 28.1.6 → 28.1.8

package/src/schema/nodes/nested-expand.ts

@@ -0,0 +1,77 @@
+import { Node as PMNode, NodeSpec } from '@atlaskit/editor-prosemirror/model';
+import { NoMark } from './types/mark';
+import { ParagraphDefinition as Paragraph } from './paragraph';
+import { HeadingDefinition as Heading } from './heading';
+import { MediaSingleDefinition as MediaSingle } from './media-single';
+import { MediaGroupDefinition as MediaGroup } from './media-group';
+
+/**
+ * @name nestedExpand_content
+ * @minItems 1
+ * @allowUnsupportedBlock true
+ */
+export type NestedExpandContent = Array<
+  Paragraph | Heading | MediaSingle | MediaGroup
+>;
+
+/**
+ * @name nestedExpand_node
+ */
+export interface NestedExpandBaseDefinition {
+  type: 'nestedExpand';
+  attrs: {
+    title?: string;
+  };
+  content: NestedExpandContent;
+}
+
+/**
+ * @name nestedExpand_with_no_marks_node
+ */
+export type NestedExpandDefinition = NestedExpandBaseDefinition & NoMark;
+
+export const nestedExpand: NodeSpec = {
+  inline: false,
+  marks: 'unsupportedMark unsupportedNodeAttribute',
+  content:
+    '(paragraph | heading | mediaSingle | mediaGroup | unsupportedBlock)+',
+  isolating: true,
+  selectable: true,
+  attrs: {
+    title: { default: '' },
+    __expanded: { default: true },
+  },
+  parseDOM: [
+    {
+      context: 'nestedExpand//',
+      tag: '[data-node-type="nestedExpand"]',
+      skip: true,
+    },
+    {
+      tag: '[data-node-type="nestedExpand"] button',
+      ignore: true,
+    },
+    {
+      tag: '[data-node-type="expand"] button',
+      ignore: true,
+    },
+    {
+      tag: 'div[data-node-type="nestedExpand"]',
+      getAttrs: (domNode) => {
+        const dom = domNode as HTMLElement;
+        return {
+          title: dom.getAttribute('data-title'),
+          __expanded: true,
+        };
+      },
+    },
+  ],
+  toDOM(node: PMNode) {
+    const attrs = {
+      'data-node-type': 'nestedExpand',
+      'data-title': node.attrs.title,
+      'data-expanded': node.attrs.__expanded,
+    };
+    return ['div', attrs, 0];
+  },
+};

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

@@ -0,0 +1,62 @@
+import { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+
+export const orderedListSelector = '.ak-ol';
+
+export const orderedList: NodeSpec = {
+  group: 'block',
+  attrs: {
+    order: { default: 1 },
+  },
+  content: 'listItem+',
+  marks: 'unsupportedMark unsupportedNodeAttribute',
+  selectable: false,
+  parseDOM: [{ tag: 'ol' }],
+  toDOM() {
+    const attrs = {
+      class: orderedListSelector.substr(1),
+    };
+    return ['ol', attrs, 0];
+  },
+};
+
+// resolve "start" to a safe, 0+ integer, otherwise return undefined
+// Note: Any changes to this function should also be made to "resolveOrder"
+// in packages/editor/editor-common/src/utils/list.ts
+const resolveStart = (start: any): number | undefined => {
+  const num = Number(start);
+  if (Number.isNaN(num)) {
+    return;
+  }
+  if (num < 0) {
+    return;
+  }
+  return Math.floor(Math.max(num, 0));
+};
+
+export const orderedListWithOrder: NodeSpec = {
+  ...orderedList,
+  parseDOM: [
+    {
+      tag: 'ol',
+      getAttrs: (domNode) => {
+        const dom = domNode as HTMLElement;
+        let startDOMAttr = dom.getAttribute('start');
+        if (startDOMAttr) {
+          const start = resolveStart(startDOMAttr);
+          if (typeof start === 'number') {
+            return { order: start };
+          }
+        }
+        return null;
+      },
+    },
+  ],
+  toDOM(node) {
+    const start = resolveStart(node?.attrs?.order);
+    const attrs = {
+      start: typeof start === 'number' ? String(start) : undefined,
+      class: orderedListSelector.substr(1),
+    };
+    return ['ol', attrs, 0];
+  },
+};

package/src/schema/nodes/panel.ts

@@ -0,0 +1,133 @@
+import {
+  NodeSpec,
+  Node,
+  AttributeSpec,
+} from '@atlaskit/editor-prosemirror/model';
+import { ParagraphDefinition as Paragraph } from './paragraph';
+import { OrderedListDefinition as OrderedList } from './types/list';
+import { BulletListDefinition as BulletList } from './types/list';
+import { HeadingDefinition as Heading } from './heading';
+import { BlockCardDefinition as BlockCard } from './block-card';
+
+export enum PanelType {
+  INFO = 'info',
+  NOTE = 'note',
+  TIP = 'tip',
+  WARNING = 'warning',
+  ERROR = 'error',
+  SUCCESS = 'success',
+  CUSTOM = 'custom',
+}
+export interface PanelAttributes {
+  panelType: PanelType;
+  panelIcon?: string; // To identify emojis by shortName
+  panelIconId?: string; // To uniquely identify emojis by id
+  panelIconText?: string; // falling back to Unicode representation of standard emojis when image representation cannot be loaded
+  panelColor?: string;
+}
+
+/**
+ * @name panel_node
+ */
+export interface PanelDefinition {
+  type: 'panel';
+  attrs: PanelAttributes;
+  /**
+   * @minItems 1
+   * @allowUnsupportedBlock true
+   */
+  content: Array<Paragraph | Heading | OrderedList | BulletList | BlockCard>;
+}
+
+export interface DOMAttributes {
+  [propName: string]: string;
+}
+
+type NodeSpecAttributes = {
+  [name: string]: AttributeSpec;
+};
+
+type ParseDOMAttrs = {
+  panelType: string;
+  panelIcon?: string;
+  panelIconId?: string;
+  panelIconText?: string;
+  panelColor?: string;
+};
+
+const getDefaultAttrs = (): NodeSpecAttributes => {
+  let attrs: NodeSpecAttributes = {
+    panelType: { default: 'info' },
+    panelIcon: { default: null },
+    panelIconId: { default: null },
+    panelIconText: { default: null },
+    panelColor: { default: null },
+  };
+
+  return attrs;
+};
+
+const getDomAttrs = (nodeAttrs: { [key: string]: any }): DOMAttributes => {
+  let attrs: DOMAttributes = {
+    'data-panel-type': nodeAttrs.panelType,
+    'data-panel-icon': nodeAttrs.panelIcon,
+    'data-panel-icon-id': nodeAttrs.panelIconId,
+    'data-panel-icon-text': nodeAttrs.panelIconText,
+    'data-panel-color': nodeAttrs.panelColor,
+  };
+
+  return attrs;
+};
+
+const getParseDOMAttrs = (
+  allowCustomPanel: boolean,
+  dom: string | globalThis.Node,
+): ParseDOMAttrs => {
+  let parseDOMAttrs: ParseDOMAttrs = {
+    panelType: (dom as HTMLElement).getAttribute('data-panel-type')!,
+  };
+
+  if (allowCustomPanel) {
+    parseDOMAttrs = {
+      ...parseDOMAttrs,
+      panelIcon: (dom as HTMLElement).getAttribute('data-panel-icon')!,
+      panelIconId: (dom as HTMLElement).getAttribute('data-panel-icon-id')!,
+      panelIconText: (dom as HTMLElement).getAttribute('data-panel-icon-text')!,
+      panelColor: (dom as HTMLElement).getAttribute('data-panel-color')!,
+    };
+  } else {
+    parseDOMAttrs.panelType =
+      parseDOMAttrs.panelType === PanelType.CUSTOM
+        ? PanelType.INFO
+        : parseDOMAttrs.panelType;
+  }
+
+  return parseDOMAttrs;
+};
+
+export const panel = (allowCustomPanel: boolean): NodeSpec => {
+  const panelNodeSpec: NodeSpec = {
+    group: 'block',
+    content:
+      '(paragraph | heading | bulletList | orderedList | blockCard | unsupportedBlock)+',
+    marks: 'unsupportedMark unsupportedNodeAttribute',
+    attrs: getDefaultAttrs(),
+    selectable: true,
+    parseDOM: [
+      {
+        tag: 'div[data-panel-type]',
+        getAttrs: (dom) => getParseDOMAttrs(allowCustomPanel, dom),
+      },
+    ],
+    toDOM(node: Node) {
+      const attrs: DOMAttributes = getDomAttrs(node.attrs);
+
+      const contentAttrs: Record<string, string> = {
+        'data-panel-content': 'true',
+      };
+
+      return ['div', attrs, ['div', contentAttrs, 0]];
+    },
+  };
+  return panelNodeSpec;
+};

package/src/schema/nodes/paragraph.ts

@@ -0,0 +1,79 @@
+import { NodeSpec, DOMOutputSpec } from '@atlaskit/editor-prosemirror/model';
+import { AlignmentMarkDefinition, IndentationMarkDefinition } from '../marks';
+import { MarksObject, NoMark } from './types/mark';
+import { Inline } from './types/inline-content';
+
+/**
+ * @name paragraph_node
+ */
+export interface ParagraphBaseDefinition {
+  type: 'paragraph';
+  /**
+   * @allowUnsupportedInline true
+   */
+  content?: Array<Inline>;
+  marks?: Array<any>;
+}
+
+/**
+ * @name paragraph_with_no_marks_node
+ */
+export type ParagraphDefinition = ParagraphBaseDefinition & NoMark;
+
+/**
+ * NOTE: Need this because TS is too smart and inline everything.
+ * So we need to give them separate identity.
+ * Probably there's a way to solve it but that will need time and exploration.
+ * // http://bit.ly/2raXFX5
+ * type T1 = X | Y
+ * type T2 = A | T1 | B // T2 = A | X | Y | B
+ */
+
+/**
+ * @name paragraph_with_alignment_node
+ */
+export type ParagraphWithAlignmentDefinition = ParagraphBaseDefinition &
+  MarksObject<AlignmentMarkDefinition>;
+
+/**
+ * @name paragraph_with_indentation_node
+ */
+export type ParagraphWithIndentationDefinition = ParagraphBaseDefinition &
+  MarksObject<IndentationMarkDefinition>;
+
+export type ParagraphWithMarksDefinition =
+  | ParagraphWithAlignmentDefinition
+  | ParagraphWithIndentationDefinition;
+
+const isImageNode = (node: Node | null): boolean => {
+  return Boolean(node && node.nodeName.toLowerCase() === 'img');
+};
+
+const hasInlineImage = (node: Node | null): boolean => {
+  if (!node) {
+    return false;
+  }
+
+  return Array.from(node.childNodes).some((child) => {
+    const isImage = isImageNode(child);
+
+    if (!isImage && child.childNodes) {
+      return Array.from(node.childNodes).some((node) => hasInlineImage(node));
+    }
+
+    return isImage;
+  });
+};
+
+const pDOM: DOMOutputSpec = ['p', 0];
+export const paragraph: NodeSpec = {
+  selectable: false,
+  content: 'inline*',
+  group: 'block',
+  marks:
+    'strong code em link strike subsup textColor typeAheadQuery underline confluenceInlineComment action annotation unsupportedMark unsupportedNodeAttribute dataConsumer fragment',
+  parseDOM: [{ tag: 'p' }],
+  toDOM() {
+    return pDOM;
+  },
+};

package/src/schema/nodes/placeholder.ts

@@ -0,0 +1,40 @@
+import { Node, NodeSpec } from '@atlaskit/editor-prosemirror/model';
+
+/**
+ * @name placeholder_node
+ */
+export interface PlaceholderDefinition {
+  type: 'placeholder';
+  attrs: {
+    text: string;
+  };
+}
+
+export const placeholder: NodeSpec = {
+  inline: true,
+  group: 'inline',
+  selectable: false,
+  marks: '',
+  attrs: {
+    text: { default: '' },
+  },
+  parseDOM: [
+    {
+      tag: 'span[data-placeholder]',
+      getAttrs: (dom) => ({
+        text:
+          (dom as HTMLElement).getAttribute('data-placeholder') ||
+          placeholder.attrs!.text.default,
+      }),
+    },
+  ],
+  toDOM(node: Node) {
+    const { text } = node.attrs;
+    const attrs = {
+      'data-placeholder': text,
+      // Needs to be edtiable for mobile to not close keyboard
+      contenteditable: 'true',
+    };
+    return ['span', attrs, text];
+  },
+};

package/src/schema/nodes/rule.ts

@@ -0,0 +1,17 @@
+import { NodeSpec, DOMOutputSpec } from '@atlaskit/editor-prosemirror/model';
+
+/**
+ * @name rule_node
+ */
+export interface RuleDefinition {
+  type: 'rule';
+}
+
+const hrDOM: DOMOutputSpec = ['hr'];
+export const rule: NodeSpec = {
+  group: 'block',
+  parseDOM: [{ tag: 'hr' }],
+  toDOM() {
+    return hrDOM;
+  },
+};

package/src/schema/nodes/status.ts

@@ -0,0 +1,58 @@
+import { NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { uuid } from '../../utils/uuid';
+
+/**
+ * @name status_node
+ */
+export interface StatusDefinition {
+  type: 'status';
+  attrs: {
+    /**
+     * @minLength 1
+     */
+    text: string;
+    color: 'neutral' | 'purple' | 'blue' | 'red' | 'yellow' | 'green';
+    localId?: string;
+    /**
+     * Supported values are bold and subtle
+     */
+    style?: string;
+  };
+}
+
+export const status: NodeSpec = {
+  inline: true,
+  group: 'inline',
+  selectable: true,
+  attrs: {
+    text: { default: '' },
+    color: { default: '' },
+    localId: { default: uuid.generate() },
+    style: { default: '' },
+  },
+  parseDOM: [
+    {
+      tag: 'span[data-node-type="status"]',
+      getAttrs: (domNode) => {
+        const dom = domNode as HTMLElement;
+        return {
+          text: dom.textContent!.replace(/\n/, '').trim(),
+          color: dom.getAttribute('data-color'),
+          localId: uuid.generate(),
+          style: dom.getAttribute('data-style'),
+        };
+      },
+    },
+  ],
+  toDOM(node: PMNode) {
+    const { text, color, localId, style } = node.attrs;
+    const attrs = {
+      'data-node-type': 'status',
+      'data-color': color,
+      'data-local-id': localId,
+      'data-style': style,
+      contenteditable: 'false',
+    };
+    return ['span', attrs, text];
+  },
+};