@atlaskit/adf-schema 28.1.6 → 28.1.8

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

@@ -0,0 +1,176 @@
+import {
+  NodeSpec,
+  Node as PMNode,
+  Fragment,
+} from '@atlaskit/editor-prosemirror/model';
+import { TextDefinition as Text } from './text';
+import { BreakoutMarkDefinition } from '../marks/breakout';
+import { MarksObject, NoMark } from './types/mark';
+
+/**
+ * @name codeBlock_node
+ */
+export type CodeBlockBaseDefinition = {
+  type: 'codeBlock';
+  /**
+   * @allowUnsupportedInline true
+   */
+  content?: Array<Text & NoMark>;
+  marks?: Array<any>;
+  attrs?: CodeBlockAttrs;
+};
+
+export type CodeBlockAttrs = {
+  language?: string;
+};
+
+/**
+ * @name codeBlock_with_no_marks_node
+ */
+export type CodeBlockDefinition = CodeBlockBaseDefinition & NoMark;
+
+/**
+ * @name codeBlock_with_marks_node
+ */
+export type CodeBlockWithMarksDefinition = CodeBlockBaseDefinition &
+  MarksObject<BreakoutMarkDefinition>;
+
+const getLanguageFromEditorStyle = (dom: HTMLElement): string | undefined => {
+  return dom.getAttribute('data-language') || undefined;
+};
+
+// example of BB style:
+// <div class="codehilite language-javascript"><pre><span>hello world</span><span>\n</span></pre></div>
+const getLanguageFromBitbucketStyle = (
+  dom: HTMLElement,
+): string | undefined => {
+  if (dom && dom.classList.contains('codehilite')) {
+    // code block html from Bitbucket always contains an extra new line
+    return extractLanguageFromClass(dom.className);
+  }
+  return;
+};
+
+// If there is a child code element, check that for data-language
+const getLanguageFromCode = (dom: HTMLElement): string | undefined => {
+  const firstChild = dom.firstElementChild;
+  if (firstChild && firstChild.nodeName === 'CODE') {
+    return firstChild.getAttribute('data-language') || undefined;
+  }
+};
+
+const extractLanguageFromClass = (className: string): string | undefined => {
+  const languageRegex = /(?:^|\s)language-([^\s]+)/;
+  const result = languageRegex.exec(className);
+  if (result && result[1]) {
+    return result[1];
+  }
+  return;
+};
+
+const removeLastNewLine = (dom: HTMLElement): HTMLElement => {
+  const parent = dom && dom.parentElement;
+  if (parent && parent.classList.contains('codehilite')) {
+    dom.textContent = dom.textContent!.replace(/\n$/, '');
+  }
+  return dom;
+};
+
+export const codeBlock: NodeSpec = {
+  attrs: { language: { default: null }, uniqueId: { default: null } },
+  content: '(text | unsupportedInline)*',
+  marks: 'unsupportedMark unsupportedNodeAttribute',
+  group: 'block',
+  code: true,
+  defining: true,
+  parseDOM: [
+    {
+      tag: 'pre',
+      preserveWhitespace: 'full',
+      getAttrs: (domNode) => {
+        let dom = domNode as HTMLElement;
+        const language =
+          getLanguageFromBitbucketStyle(dom.parentElement!) ||
+          getLanguageFromEditorStyle(dom.parentElement!) ||
+          getLanguageFromCode(dom) ||
+          dom.getAttribute('data-language')!;
+        dom = removeLastNewLine(dom);
+        return { language };
+      },
+    },
+    // Handle VSCode paste
+    // Checking `white-space: pre-wrap` is too aggressive @see ED-2627
+    {
+      tag: 'div[style]',
+      preserveWhitespace: 'full',
+      getAttrs: (domNode) => {
+        const dom = domNode as HTMLElement;
+        if (
+          dom.style.whiteSpace === 'pre' ||
+          (dom.style.fontFamily &&
+            dom.style.fontFamily.toLowerCase().indexOf('monospace') > -1)
+        ) {
+          return {};
+        }
+        return false;
+      },
+      // @see ED-5682
+      getContent: (domNode, schema) => {
+        const dom = domNode as HTMLElement;
+        const code = Array.from(dom.children)
+          .map((child) => child.textContent)
+          .filter((x) => x !== undefined)
+          .join('\n');
+        return code ? Fragment.from(schema.text(code)) : Fragment.empty;
+      },
+    },
+    // Handle GitHub/Gist paste
+    {
+      tag: 'table[style]',
+      preserveWhitespace: 'full',
+      getAttrs: (dom) => {
+        if ((dom as HTMLElement).querySelector('td[class*="blob-code"]')) {
+          return {};
+        }
+        return false;
+      },
+    },
+    {
+      tag: 'div.code-block',
+      preserveWhitespace: 'full',
+      getAttrs: (domNode) => {
+        const dom = domNode as HTMLElement;
+        // TODO: ED-5604 Fix it inside `react-syntax-highlighter`
+        // Remove line numbers
+        const lineNumber = dom.querySelectorAll(
+          '.react-syntax-highlighter-line-number',
+        );
+
+        if (lineNumber.length > 0) {
+          // It's possible to copy without the line numbers too hence this
+          // `react-syntax-highlighter-line-number` check, so that we don't remove real code
+          lineNumber.forEach((line) => line.remove());
+        }
+        return {};
+      },
+    },
+  ],
+  toDOM(node) {
+    return ['pre', ['code', { 'data-language': node.attrs.language }, 0]];
+  },
+};
+
+export const toJSON = (node: PMNode) => ({
+  attrs: Object.keys(node.attrs).reduce<Record<string, any>>((memo, key) => {
+    if (key === 'uniqueId') {
+      return memo;
+    }
+
+    if (key === 'language' && node.attrs.language === null) {
+      return memo;
+    }
+
+    memo[key] = node.attrs[key];
+    return memo;
+  }, {}),
+});

package/src/schema/nodes/confluence-jira-issue.ts

@@ -0,0 +1,43 @@
+import { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+
+const name = 'confluenceJiraIssue';
+
+export const confluenceJiraIssue: NodeSpec = {
+  group: 'inline',
+  inline: true,
+  atom: true,
+  attrs: {
+    issueKey: { default: '' },
+    macroId: { default: null },
+    schemaVersion: { default: null },
+    server: { default: null },
+    serverId: { default: null },
+  },
+  parseDOM: [
+    {
+      tag: `span[data-node-type="${name}"]`,
+      getAttrs: (domNode) => {
+        const dom = domNode as HTMLElement;
+        return {
+          issueKey: dom.textContent,
+          macroId: dom.dataset && dom.dataset.macroId,
+          schemaVersion: dom.dataset && dom.dataset.schemaVersion,
+          server: dom.dataset && dom.dataset.server,
+          serverId: dom.dataset && dom.dataset.serverId,
+        };
+      },
+    },
+  ],
+  toDOM(node) {
+    const attrs = {
+      'data-node-type': name,
+      'data-macro-id': node.attrs.macroId,
+      'data-schema-version': node.attrs.schemaVersion,
+      'data-server': node.attrs.server,
+      'data-server-id': node.attrs.serverId,
+      'data-jira-issue': node.attrs.issueKey,
+    };
+
+    return ['span', attrs, node.attrs.issueKey];
+  },
+};

package/src/schema/nodes/confluence-unsupported-block.ts

@@ -0,0 +1,29 @@
+import { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+
+const name = 'confluenceUnsupportedBlock';
+
+export const confluenceUnsupportedBlock: NodeSpec = {
+  group: 'block',
+  attrs: { cxhtml: { default: null } },
+  toDOM(node) {
+    // NOTE: This node cannot be "contenteditable: false". If it's the only node in a document, PM throws an error because there's nowhere to put the cursor.
+    const attrs = {
+      'data-node-type': name,
+      'data-confluence-unsupported': 'block',
+      'data-confluence-unsupported-block-cxhtml': node.attrs['cxhtml'],
+    };
+    return ['div', attrs, 'Unsupported content'];
+  },
+  parseDOM: [
+    {
+      tag: `div[data-node-type="${name}"]`,
+      getAttrs(dom) {
+        return {
+          cxhtml: (dom as HTMLElement).getAttribute(
+            'data-confluence-unsupported-block-cxhtml',
+          )!,
+        };
+      },
+    },
+  ],
+};

package/src/schema/nodes/confluence-unsupported-inline.ts

@@ -0,0 +1,30 @@
+import { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+
+const name = 'confluenceUnsupportedInline';
+
+export const confluenceUnsupportedInline: NodeSpec = {
+  group: 'inline',
+  inline: true,
+  atom: true,
+  attrs: { cxhtml: { default: null } },
+  toDOM(node) {
+    const attrs = {
+      'data-node-type': name,
+      'data-confluence-unsupported': 'inline',
+      'data-confluence-unsupported-inline-cxhtml': node.attrs['cxhtml'],
+    };
+    return ['div', attrs, 'Unsupported content'];
+  },
+  parseDOM: [
+    {
+      tag: `div[data-node-type="${name}"]`,
+      getAttrs(dom) {
+        return {
+          cxhtml: (dom as HTMLElement).getAttribute(
+            'data-confluence-unsupported-inline-cxhtml',
+          )!,
+        };
+      },
+    },
+  ],
+};

package/src/schema/nodes/date.ts

@@ -0,0 +1,38 @@
+import { NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+
+/**
+ * @name date_node
+ */
+export interface DateDefinition {
+  type: 'date';
+  attrs: {
+    /**
+     * @minLength 1
+     */
+    timestamp: string;
+  };
+}
+
+export const date: NodeSpec = {
+  inline: true,
+  group: 'inline',
+  selectable: true,
+  attrs: {
+    timestamp: { default: '' },
+  },
+  parseDOM: [
+    {
+      tag: 'span[data-node-type="date"]',
+      getAttrs: (dom) => ({
+        timestamp: (dom as HTMLElement).getAttribute('data-timestamp'),
+      }),
+    },
+  ],
+  toDOM(node: PMNode) {
+    const attrs = {
+      'data-node-type': 'date',
+      'data-timestamp': node.attrs.timestamp,
+    };
+    return ['span', attrs];
+  },
+};

package/src/schema/nodes/decision-item.ts

@@ -0,0 +1,50 @@
+import { Node, NodeSpec } from '@atlaskit/editor-prosemirror/model';
+import { uuid } from '../../utils/uuid';
+import { Inline } from './types/inline-content';
+
+/**
+ * @name decisionItem_node
+ */
+export interface DecisionItemDefinition {
+  type: 'decisionItem';
+  /**
+   * @allowUnsupportedInline true
+   */
+  content?: Array<Inline>;
+  attrs: {
+    localId: string;
+    state: string;
+  };
+}
+
+export const decisionItem: NodeSpec = {
+  content: 'inline*',
+  defining: true,
+  marks: '_',
+  attrs: {
+    localId: { default: '' },
+    state: { default: 'DECIDED' },
+  },
+  parseDOM: [
+    {
+      tag: 'li[data-decision-local-id]',
+
+      // Default priority is 50. We normally don't change this but since this node type is
+      // also used by list-item we need to make sure that we run this parser first.
+      priority: 100,
+
+      getAttrs: (dom) => ({
+        localId: uuid.generate(),
+        state: (dom as HTMLElement).getAttribute('data-decision-state')!,
+      }),
+    },
+  ],
+  toDOM(node: Node) {
+    const { localId, state } = node.attrs;
+    const attrs = {
+      'data-decision-local-id': localId || 'local-decision',
+      'data-decision-state': state,
+    };
+    return ['li', attrs, 0];
+  },
+};

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

@@ -0,0 +1,56 @@
+import { Node, NodeSpec } from '@atlaskit/editor-prosemirror/model';
+import { DecisionItemDefinition as DecisionItemNode } from './decision-item';
+import { uuid } from '../../utils/uuid';
+
+/**
+ * @name decisionList_node
+ */
+export interface DecisionListDefinition {
+  type: 'decisionList';
+  /**
+   * @minItems 1
+   * @allowUnsupportedBlock true
+   */
+  content: Array<DecisionItemNode>;
+  attrs: {
+    localId: string;
+  };
+}
+
+const name = 'decisionList';
+
+export const decisionListSelector = `[data-node-type="${name}"]`;
+
+export const decisionList: NodeSpec = {
+  group: 'block',
+  defining: true,
+  content: '(decisionItem|unsupportedBlock)+',
+  marks: 'unsupportedMark unsupportedNodeAttribute',
+  selectable: false,
+  attrs: {
+    localId: { default: '' },
+  },
+  parseDOM: [
+    {
+      tag: `ol${decisionListSelector}`,
+
+      // Default priority is 50. We normally don't change this but since this node type is
+      // also used by ordered-list we need to make sure that we run this parser first.
+      priority: 100,
+
+      getAttrs: () => ({
+        localId: uuid.generate(),
+      }),
+    },
+  ],
+  toDOM(node: Node) {
+    const { localId } = node.attrs;
+    const attrs = {
+      'data-node-type': name,
+      'data-decision-list-local-id': localId || 'local-decision-list',
+      style: 'list-style: none; padding-left: 0',
+    };
+
+    return ['ol', attrs, 0];
+  },
+};

package/src/schema/nodes/doc.ts

@@ -0,0 +1,30 @@
+import { NodeSpec } from '@atlaskit/editor-prosemirror/model';
+import { CodeBlockWithMarksDefinition as CodeBlockWithMarks } from './code-block';
+import { ExpandWithBreakoutDefinition as ExpandWithBreakout } from './expand';
+import { LayoutSectionDefinition as LayoutSection } from './layout-section';
+import { ParagraphWithIndentationDefinition } from './paragraph';
+import { BlockContent } from './types/block-content';
+
+/**
+ * @name doc_node
+ */
+export interface DocNode {
+  version: 1;
+  type: 'doc';
+  /**
+   * @allowUnsupportedBlock true
+   */
+  content: Array<
+    | BlockContent
+    | LayoutSection
+    | CodeBlockWithMarks
+    | ExpandWithBreakout
+    | ParagraphWithIndentationDefinition
+  >;
+}
+
+export const doc: NodeSpec = {
+  content: '(block|layoutSection)+',
+  marks:
+    'alignment breakout dataConsumer fragment indentation unsupportedMark unsupportedNodeAttribute',
+};

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

@@ -0,0 +1,62 @@
+import { NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { RichMediaAttributes } from './types/rich-media-common';
+
+export interface EmbedCardAttributes extends RichMediaAttributes {
+  originalWidth?: number;
+  originalHeight?: number;
+  /**
+   * @validatorFn safeUrl
+   */
+  url: string;
+}
+
+/**
+ * @name embedCard_node
+ */
+export interface EmbedCardDefinition {
+  type: 'embedCard';
+  attrs: EmbedCardAttributes;
+}
+
+export const embedCard: NodeSpec = {
+  inline: false,
+  group: 'block',
+  selectable: true,
+  attrs: {
+    url: { default: '' },
+    layout: { default: 'center' },
+    width: { default: 100 },
+    originalWidth: { default: null },
+    originalHeight: { default: null },
+  },
+  parseDOM: [
+    {
+      tag: 'div[data-embed-card]',
+      getAttrs: (dom) => ({
+        url: (dom as HTMLElement).getAttribute('data-card-url'),
+        layout: (dom as HTMLElement).getAttribute('data-layout') || 'center',
+        width: Number((dom as HTMLElement).getAttribute('data-width')) || null,
+        originalWidth:
+          Number(
+            (dom as HTMLElement).getAttribute('data-card-original-width'),
+          ) || null,
+        originalHeight:
+          Number(
+            (dom as HTMLElement).getAttribute('data-card-original-height'),
+          ) || null,
+      }),
+    },
+  ],
+  toDOM(node: PMNode) {
+    const { url, layout, width, originalWidth, originalHeight } = node.attrs;
+    const attrs = {
+      'data-embed-card': '',
+      'data-card-url': url,
+      'data-layout': layout,
+      'data-width': width,
+      'data-original-width': originalWidth,
+      'data-original-height': originalHeight,
+    };
+    return ['div', attrs];
+  },
+};

package/src/schema/nodes/emoji.ts

@@ -0,0 +1,89 @@
+import { Node, NodeSpec } from '@atlaskit/editor-prosemirror/model';
+import { acNameToEmoji, acShortcutToEmoji } from '../../utils/confluence/emoji';
+
+/**
+ * @name emoji_node
+ */
+export interface EmojiDefinition {
+  type: 'emoji';
+  attrs: EmojiAttributes;
+}
+
+export interface EmojiAttributes {
+  id?: string; // Optional to support legacy formats
+  shortName: string;
+  text?: string;
+}
+
+export const emoji: NodeSpec = {
+  inline: true,
+  group: 'inline',
+  selectable: true,
+  attrs: {
+    shortName: { default: '' },
+    id: { default: '' },
+    text: { default: '' },
+  },
+  parseDOM: [
+    // Handle copy/paste beautiful panel from renderer />
+    {
+      tag: 'div.ak-editor-panel__icon span',
+      ignore: true,
+    },
+    {
+      tag: 'span[data-emoji-short-name]',
+      getAttrs: (domNode) => {
+        const dom = domNode as HTMLElement;
+        return {
+          shortName:
+            dom.getAttribute('data-emoji-short-name') ||
+            emoji.attrs!.shortName.default,
+          id: dom.getAttribute('data-emoji-id') || emoji.attrs!.id.default,
+          text:
+            dom.getAttribute('data-emoji-text') || emoji.attrs!.text.default,
+        };
+      },
+    },
+    // Handle copy/paste from old <ac:emoticon />
+    {
+      tag: 'img[data-emoticon-name]',
+      getAttrs: (dom) =>
+        acNameToEmoji(
+          (dom as Element).getAttribute('data-emoticon-name') as any,
+        ),
+    },
+    // Handle copy/paste from old <ac:hipchat-emoticons />
+    {
+      tag: 'img[data-hipchat-emoticon]',
+      getAttrs: (dom) =>
+        acShortcutToEmoji(
+          (dom as Element).getAttribute('data-hipchat-emoticon')!,
+        ),
+    },
+    // Handle copy/paste from bitbucket's <img class="emoji" />
+    {
+      tag: 'img.emoji[data-emoji-short-name]',
+      getAttrs: (domNode) => {
+        const dom = domNode as HTMLElement;
+        return {
+          shortName:
+            dom.getAttribute('data-emoji-short-name') ||
+            emoji.attrs!.shortName.default,
+          id: dom.getAttribute('data-emoji-id') || emoji.attrs!.id.default,
+          text:
+            dom.getAttribute('data-emoji-text') || emoji.attrs!.text.default,
+        };
+      },
+    },
+  ],
+  toDOM(node: Node) {
+    const { shortName, id, text } = node.attrs;
+    const attrs = {
+      'data-emoji-short-name': shortName,
+      'data-emoji-id': id,
+      'data-emoji-text': text,
+      contenteditable: 'false',
+    };
+    return ['span', attrs, text];
+  },
+};