How to use @remirror/core-extensions - 10 common examples

test('ReactSerializer.fromExtensionManager', () => {
  expect(serializer).toBeInstanceOf(ReactSerializer);
  expect(serializer.nodes.paragraph).toBeFunction();
  expect(serializer.marks.bold).toBeFunction();

  // fills in for a missing text
  const altExtensions = [
    { extension: new DocExtension(), priority: 2 },
    { extension: new ParagraphExtension(), priority: 2 },
    { extension: new TextExtension(), priority: 2 },
    { extension: new BoldExtension(), priority: 2 },
    { extension: new CodeBlockExtension(), priority: 2 },
  ];
  const altManager = ExtensionManager.create(altExtensions);
  expect(ReactSerializer.fromExtensionManager(altManager).nodes.text).toBeFunction();
});

test('ReactSerializer.fromExtensionManager', () => {
  expect(serializer).toBeInstanceOf(ReactSerializer);
  expect(serializer.nodes.paragraph).toBeFunction();
  expect(serializer.marks.bold).toBeFunction();

  // fills in for a missing text
  const altExtensions = [
    { extension: new DocExtension(), priority: 2 },
    { extension: new ParagraphExtension(), priority: 2 },
    { extension: new TextExtension(), priority: 2 },
    { extension: new BoldExtension(), priority: 2 },
    { extension: new CodeBlockExtension(), priority: 2 },
  ];
  const altManager = ExtensionManager.create(altExtensions);
  expect(ReactSerializer.fromExtensionManager(altManager).nodes.text).toBeFunction();
});

test('ReactSerializer.fromExtensionManager', () => {
  expect(serializer).toBeInstanceOf(ReactSerializer);
  expect(serializer.nodes.paragraph).toBeFunction();
  expect(serializer.marks.bold).toBeFunction();

  // fills in for a missing text
  const altExtensions = [
    { extension: new DocExtension(), priority: 2 },
    { extension: new ParagraphExtension(), priority: 2 },
    { extension: new TextExtension(), priority: 2 },
    { extension: new BoldExtension(), priority: 2 },
    { extension: new CodeBlockExtension(), priority: 2 },
  ];
  const altManager = ExtensionManager.create(altExtensions);
  expect(ReactSerializer.fromExtensionManager(altManager).nodes.text).toBeFunction();
});

import { Remirror } from '../..';
import { InjectedRemirrorProps } from '../../types';

const label = 'Remirror editor';
const handlers = {
  onChange: jest.fn(),
  onBlur: jest.fn(),
  onFocus: jest.fn(),
  onFirstRender: jest.fn(),
};
const placeholderText = 'Start typing...';
const extensions = [
  { extension: new Doc(), priority: 2 },
  { extension: new Text(), priority: 2 },
  { extension: new Paragraph(), priority: 2 },
  { extension: new History(), priority: 2 },
];
// const placeholderExtension = { extension: new Placeholder(), priority: 2 }

test('should not fail without the placeholder extension', () => {
  expect(() =>
    render(
      
        {() =&gt; <div>}
      ,
    ),
  ).not.toThrowError();
});

test('should display a placeholder when the content is empty', () =&gt; {
  const { baseElement, getByLabelText } = render(
    </div>

width = (width || domNode.getAttribute('width')) ?? '';
  height = (height || domNode.getAttribute('height')) ?? '';

  let crop = null;
  let rotate = null;
  const { parentElement } = domNode;
  if (parentElement instanceof HTMLElement) {
    // Special case for Google doc's image.
    const ps = parentElement.style;
    if (
      ps.display === 'inline-block' &&
      ps.overflow === 'hidden' &&
      ps.width &&
      ps.height &&
      marginLeft &&
      !EMPTY_CSS_VALUE.has(marginLeft) &&
      marginTop &&
      !EMPTY_CSS_VALUE.has(marginTop)
    ) {
      crop = {
        width: parseInt(ps.width, 10) || 0,
        height: parseInt(ps.height, 10) || 0,
        left: parseInt(marginLeft, 10) || 0,
        top: parseInt(marginTop, 10) || 0,
      };
    }
    if (ps.transform) {
      // example: `rotate(1.57rad) translateZ(0px)`;
      const mm = ps.transform.match(CSS_ROTATE_PATTERN);
      if (mm?.[1]) {
        rotate = parseFloat(mm[1]) || null;
      }

let crop = null;
  let rotate = null;
  const { parentElement } = domNode;
  if (parentElement instanceof HTMLElement) {
    // Special case for Google doc's image.
    const ps = parentElement.style;
    if (
      ps.display === 'inline-block' &&
      ps.overflow === 'hidden' &&
      ps.width &&
      ps.height &&
      marginLeft &&
      !EMPTY_CSS_VALUE.has(marginLeft) &&
      marginTop &&
      !EMPTY_CSS_VALUE.has(marginTop)
    ) {
      crop = {
        width: parseInt(ps.width, 10) || 0,
        height: parseInt(ps.height, 10) || 0,
        left: parseInt(marginLeft, 10) || 0,
        top: parseInt(marginTop, 10) || 0,
      };
    }
    if (ps.transform) {
      // example: `rotate(1.57rad) translateZ(0px)`;
      const mm = ps.transform.match(CSS_ROTATE_PATTERN);
      if (mm?.[1]) {
        rotate = parseFloat(mm[1]) || null;
      }
    }
  }

{ extension: new BoldExtension(), priority: 3 },
  { extension: new ItalicExtension(), priority: 3 },
  { extension: new UnderlineExtension(), priority: 3 },
  { extension: new BlockquoteExtension(), priority: 3 },
];

/**
 * Useful for testing
 */
export const ExtensionMap = {
  nodes: {
    blockquote: new BlockquoteExtension(),
    heading: new HeadingExtension(),
  },
  marks: {
    bold: new BoldExtension(),
    italic: new ItalicExtension(),
    underline: new UnderlineExtension(),
  },
};

/**
 * @deprecated Causes issues when multiple tests use this. Prefer {@link createTestManager}
 */
export const manager = ExtensionManager.create(extensions).init(helpers);

export const createBaseTestManager = (
  extra: GFlexibleList = [] as any,
) => ExtensionManager.create([...baseExtensions, ...extra]);

export const createTestManager = (
  extra: GFlexibleList = [] as any,

export const extensions = [
  ...baseExtensions,
  { extension: new HistoryExtension(), priority: 2 },
  { extension: new PlaceholderExtension(), priority: 2 },
  { extension: new BoldExtension(), priority: 3 },
  { extension: new ItalicExtension(), priority: 3 },
  { extension: new UnderlineExtension(), priority: 3 },
  { extension: new BlockquoteExtension(), priority: 3 },
];

/**
 * Useful for testing
 */
export const ExtensionMap = {
  nodes: {
    blockquote: new BlockquoteExtension(),
    heading: new HeadingExtension(),
  },
  marks: {
    bold: new BoldExtension(),
    italic: new ItalicExtension(),
    underline: new UnderlineExtension(),
  },
};

/**
 * @deprecated Causes issues when multiple tests use this. Prefer {@link createTestManager}
 */
export const manager = ExtensionManager.create(extensions).init(helpers);

export const createBaseTestManager = (
  extra: GFlexibleList = [] as any,

{ extension: new ItalicExtension(), priority: 3 },
  { extension: new UnderlineExtension(), priority: 3 },
  { extension: new BlockquoteExtension(), priority: 3 },
];

/**
 * Useful for testing
 */
export const ExtensionMap = {
  nodes: {
    blockquote: new BlockquoteExtension(),
    heading: new HeadingExtension(),
  },
  marks: {
    bold: new BoldExtension(),
    italic: new ItalicExtension(),
    underline: new UnderlineExtension(),
  },
};

/**
 * @deprecated Causes issues when multiple tests use this. Prefer {@link createTestManager}
 */
export const manager = ExtensionManager.create(extensions).init(helpers);

export const createBaseTestManager = (
  extra: GFlexibleList = [] as any,
) => ExtensionManager.create([...baseExtensions, ...extra]);

export const createTestManager = (
  extra: GFlexibleList = [] as any,
) => ExtensionManager.create([...extensions, ...extra]);

{ extension: new UnderlineExtension(), priority: 3 },
  { extension: new BlockquoteExtension(), priority: 3 },
];

/**
 * Useful for testing
 */
export const ExtensionMap = {
  nodes: {
    blockquote: new BlockquoteExtension(),
    heading: new HeadingExtension(),
  },
  marks: {
    bold: new BoldExtension(),
    italic: new ItalicExtension(),
    underline: new UnderlineExtension(),
  },
};

/**
 * @deprecated Causes issues when multiple tests use this. Prefer {@link createTestManager}
 */
export const manager = ExtensionManager.create(extensions).init(helpers);

export const createBaseTestManager = (
  extra: GFlexibleList = [] as any,
) => ExtensionManager.create([...baseExtensions, ...extra]);

export const createTestManager = (
  extra: GFlexibleList = [] as any,
) => ExtensionManager.create([...extensions, ...extra]);