@atlaskit/adf-schema 28.1.5 → 28.1.7

package/src/schema/index.ts

@@ -0,0 +1,238 @@
+export {
+  PanelType,
+  blockCard,
+  blockquote,
+  bodiedExtension,
+  bulletList,
+  bulletListSelector,
+  caption,
+  codeBlock,
+  codeBlockToJSON,
+  confluenceJiraIssue,
+  confluenceUnsupportedBlock,
+  confluenceUnsupportedInline,
+  copyPrivateMediaAttributes,
+  date,
+  decisionItem,
+  decisionList,
+  decisionListSelector,
+  doc,
+  embedCard,
+  emoji,
+  expand,
+  expandToJSON,
+  extension,
+  hardBreak,
+  heading,
+  image,
+  inlineCard,
+  inlineExtension,
+  layoutColumn,
+  layoutSection,
+  layoutSectionWithSingleColumn,
+  listItem,
+  media,
+  mediaGroup,
+  mediaSingle,
+  mediaSingleSpec,
+  mediaInline,
+  mediaSingleWithCaption,
+  mediaSingleWithWidthType,
+  mediaSingleFull,
+  mediaSingleToJSON,
+  mediaToJSON,
+  mention,
+  mentionToJSON,
+  nestedExpand,
+  orderedList,
+  orderedListSelector,
+  orderedListWithOrder,
+  panel,
+  paragraph,
+  placeholder,
+  rule,
+  getCellAttrs,
+  getCellDomAttrs,
+  status,
+  table,
+  tableWithCustomWidth,
+  tableBackgroundBorderColor,
+  tableBackgroundColorNames,
+  tableBackgroundColorPalette,
+  tableCell,
+  tableCellContentDomSelector,
+  tableCellContentWrapperSelector,
+  tableCellSelector,
+  tableHeader,
+  tableHeaderSelector,
+  tablePrefixSelector,
+  tableRow,
+  tableToJSON,
+  taskItem,
+  taskList,
+  taskListSelector,
+  text,
+  toJSONTableCell,
+  toJSONTableHeader,
+  unknownBlock,
+  unsupportedBlock,
+  unsupportedInline,
+} from './nodes';
+export type {
+  BlockCardDefinition,
+  BlockContent,
+  BlockQuoteDefinition,
+  BodiedExtensionDefinition,
+  BulletListDefinition,
+  CaptionDefinition,
+  CardAttributes,
+  CellAttributes,
+  CodeBlockAttrs,
+  CodeBlockBaseDefinition,
+  CodeBlockDefinition,
+  CodeBlockWithMarksDefinition,
+  DatasourceAttributes,
+  DatasourceAttributeProperties,
+  DataType,
+  DateDefinition,
+  DecisionItemDefinition,
+  DecisionListDefinition,
+  DocNode,
+  EmbedCardDefinition,
+  EmbedCardAttributes,
+  EmojiAttributes,
+  EmojiDefinition,
+  ExpandDefinition,
+  ExtensionDefinition,
+  ExtensionLayout,
+  ExternalMediaAttributes,
+  HardBreakDefinition,
+  HeadingBaseDefinition,
+  HeadingDefinition,
+  HeadingWithAlignmentDefinition,
+  HeadingWithIndentationDefinition,
+  HeadingWithMarksDefinition,
+  Inline,
+  InlineAtomic,
+  InlineCardDefinition,
+  InlineCode,
+  InlineExtensionDefinition,
+  InlineFormattedText,
+  InlineLinkText,
+  LayoutColumnDefinition,
+  LayoutSectionDefinition,
+  LayoutSectionBaseDefinition,
+  LayoutSectionFullDefinition,
+  LayoutSectionWithSingleColumnDefinition,
+  ListItemArray,
+  ListItemDefinition,
+  MarksObject,
+  MediaADFAttrs,
+  MediaAttributes,
+  MediaInlineAttributes,
+  MediaInlineDefinition,
+  MediaBaseAttributes,
+  MediaDefinition,
+  MediaDisplayType,
+  MediaGroupDefinition,
+  MediaSingleDefinition,
+  MediaType,
+  MentionAttributes,
+  MentionDefinition,
+  MentionUserType,
+  NestedExpandContent,
+  NestedExpandDefinition,
+  NoMark,
+  NonNestableBlockContent,
+  OrderedListDefinition,
+  PanelAttributes,
+  PanelDefinition,
+  ParagraphBaseDefinition,
+  ParagraphDefinition,
+  ParagraphWithAlignmentDefinition,
+  ParagraphWithIndentationDefinition,
+  ParagraphWithMarksDefinition,
+  PlaceholderDefinition,
+  RuleDefinition,
+  StatusDefinition,
+  TableAttributes,
+  TableCellDefinition,
+  TableDefinition,
+  TableHeaderDefinition,
+  TableLayout,
+  TableRowDefinition,
+  TaskItemDefinition,
+  TaskListContent,
+  TaskListDefinition,
+  TextDefinition,
+  UrlType,
+  RichMediaAttributes,
+  ExtendedMediaAttributes,
+  RichMediaLayout,
+  CellDomAttrs,
+} from './nodes';
+export {
+  AnnotationTypes,
+  alignment,
+  alignmentPositionMap,
+  annotation,
+  breakout,
+  code,
+  colorPalette,
+  /** @deprecated [ED-15849] The extended palette is now rolled into the main one. Use `colorPalette` instead. */
+  colorPaletteExtended,
+  confluenceInlineComment,
+  dataConsumer,
+  dataConsumerToJSON,
+  em,
+  fragment,
+  fragmentToJSON,
+  indentation,
+  link,
+  linkToJSON,
+  strike,
+  strong,
+  subsup,
+  textColor,
+  typeAheadQuery,
+  underline,
+  buildAnnotationMarkDataAttributes,
+  AnnotationMarkStates,
+  unsupportedMark,
+  unsupportedNodeAttribute,
+  border,
+  borderColorPalette,
+} from './marks';
+export type {
+  AlignmentAttributes,
+  AlignmentMarkDefinition,
+  AnnotationMarkAttributes,
+  AnnotationMarkDefinition,
+  BreakoutMarkAttrs,
+  BreakoutMarkDefinition,
+  CodeDefinition,
+  EmDefinition,
+  FragmentAttributes,
+  FragmentDefinition,
+  IndentationMarkAttributes,
+  IndentationMarkDefinition,
+  LinkAttributes,
+  LinkDefinition,
+  StrikeDefinition,
+  StrongDefinition,
+  SubSupAttributes,
+  SubSupDefinition,
+  TextColorAttributes,
+  TextColorDefinition,
+  UnderlineDefinition,
+  AnnotationId,
+  AnnotationDataAttributes,
+  DataConsumerAttributes,
+  DataConsumerDefinition,
+  BorderMarkAttributes,
+  BorderMarkDefinition,
+} from './marks';
+export { unsupportedNodeTypesForMediaCards } from './unsupported';
+export { inlineNodes } from './inline-nodes';
+
+export { sanitizeNodes, createSchema } from './create-schema';

package/src/schema/inline-nodes.ts

@@ -0,0 +1,9 @@
+import * as nodes from './nodes';
+
+const typedNodes: Record<string, any> = nodes;
+
+export const inlineNodes = new Set(
+  Object.keys(typedNodes).filter(
+    (key) => typedNodes[key] && typedNodes[key].group === 'inline',
+  ),
+);

package/src/schema/jira-schema.ts

@@ -0,0 +1,158 @@
+import { createSchema } from './create-schema';
+import { Schema } from '@atlaskit/editor-prosemirror/model';
+
+/**
+ * @deprecated [ED-15676] We have stopped supporting product specific schemas. Use `@atlaskit/adf-schema/schema-default` instead.
+ **/
+export interface JIRASchemaConfig {
+  allowLists?: boolean;
+  allowMentions?: boolean;
+  allowEmojis?: boolean;
+  allowLinks?: boolean;
+  allowAdvancedTextFormatting?: boolean;
+  allowCodeBlock?: boolean;
+  allowBlockQuote?: boolean;
+  allowSubSup?: boolean;
+  allowMedia?: boolean;
+  allowTextColor?: boolean;
+  allowTables?: boolean;
+}
+
+/**
+ * @deprecated [ED-15676] We have stopped supporting product specific schemas. Use `@atlaskit/adf-schema/schema-default` instead.
+ **/
+export default function makeSchema(config: JIRASchemaConfig) {
+  const nodes = ['doc', 'paragraph', 'text', 'hardBreak', 'heading', 'rule'];
+  const marks = [
+    'strong',
+    'em',
+    'underline',
+    'typeAheadQuery',
+    'unsupportedMark',
+    'unsupportedNodeAttribute',
+  ];
+
+  if (config.allowLinks) {
+    marks.push('link');
+  }
+
+  if (config.allowLists) {
+    nodes.push('orderedList', 'bulletList', 'listItem');
+  }
+
+  if (config.allowMentions) {
+    nodes.push('mention');
+    marks.push('mentionQuery');
+  }
+
+  if (config.allowEmojis) {
+    nodes.push('emoji');
+  }
+
+  if (config.allowAdvancedTextFormatting) {
+    marks.push('strike', 'code');
+  }
+
+  if (config.allowSubSup) {
+    marks.push('subsup');
+  }
+
+  if (config.allowCodeBlock) {
+    nodes.push('codeBlock');
+  }
+
+  if (config.allowBlockQuote) {
+    nodes.push('blockquote');
+  }
+
+  if (config.allowMedia) {
+    nodes.push('mediaGroup', 'mediaSingle', 'media', 'caption', 'mediaInline');
+  }
+
+  if (config.allowTextColor) {
+    marks.push('textColor');
+  }
+
+  if (config.allowTables) {
+    nodes.push('table', 'tableCell', 'tableHeader', 'tableRow');
+  }
+
+  return createSchema({ nodes, marks });
+}
+/**
+ * @deprecated [ED-15676] We have stopped supporting product specific schemas. Use `@atlaskit/adf-schema/schema-default` instead.
+ **/
+export function isSchemaWithLists(schema: Schema): boolean {
+  return !!schema.nodes.bulletList;
+}
+/**
+ * @deprecated [ED-15676] We have stopped supporting product specific schemas. Use `@atlaskit/adf-schema/schema-default` instead.
+ **/
+export function isSchemaWithMentions(schema: Schema): boolean {
+  return !!schema.nodes.mention;
+}
+/**
+ * @deprecated [ED-15676] We have stopped supporting product specific schemas. Use `@atlaskit/adf-schema/schema-default` instead.
+ **/
+export function isSchemaWithEmojis(schema: Schema): boolean {
+  return !!schema.nodes.emoji;
+}
+/**
+ * @deprecated [ED-15676] We have stopped supporting product specific schemas. Use `@atlaskit/adf-schema/schema-default` instead.
+ **/
+export function isSchemaWithLinks(schema: Schema): boolean {
+  return !!schema.marks.link;
+}
+/**
+ * @deprecated [ED-15676] We have stopped supporting product specific schemas. Use `@atlaskit/adf-schema/schema-default` instead.
+ **/
+export function isSchemaWithAdvancedTextFormattingMarks(
+  schema: Schema,
+): boolean {
+  return !!schema.marks.code && !!schema.marks.strike;
+}
+/**
+ * @deprecated [ED-15676] We have stopped supporting product specific schemas. Use `@atlaskit/adf-schema/schema-default` instead.
+ **/
+export function isSchemaWithSubSupMark(schema: Schema): boolean {
+  return !!schema.marks.subsup;
+}
+/**
+ * @deprecated [ED-15676] We have stopped supporting product specific schemas. Use `@atlaskit/adf-schema/schema-default` instead.
+ **/
+export function isSchemaWithCodeBlock(schema: Schema): boolean {
+  return !!schema.nodes.codeBlock;
+}
+/**
+ * @deprecated [ED-15676] We have stopped supporting product specific schemas. Use `@atlaskit/adf-schema/schema-default` instead.
+ **/
+export function isSchemaWithBlockQuotes(schema: Schema): boolean {
+  return !!schema.nodes.blockquote;
+}
+/**
+ * @deprecated [ED-15676] We have stopped supporting product specific schemas. Use `@atlaskit/adf-schema/schema-default` instead.
+ **/
+export function isSchemaWithMedia(schema: Schema): boolean {
+  return (
+    !!schema.nodes.mediaGroup &&
+    !!schema.nodes.media &&
+    !!schema.nodes.mediaInline
+  );
+}
+/**
+ * @deprecated [ED-15676] We have stopped supporting product specific schemas. Use `@atlaskit/adf-schema/schema-default` instead.
+ **/
+export function isSchemaWithTextColor(schema: Schema): boolean {
+  return !!schema.marks.textColor;
+}
+/**
+ * @deprecated [ED-15676] We have stopped supporting product specific schemas. Use `@atlaskit/adf-schema/schema-default` instead.
+ **/
+export function isSchemaWithTables(schema: Schema): boolean {
+  return (
+    !!schema.nodes.table &&
+    !!schema.nodes.tableCell &&
+    !!schema.nodes.tableHeader &&
+    !!schema.nodes.tableRow
+  );
+}

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

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

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

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

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

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