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

public createDomRef(): HTMLElement {
    const { toDOM } = this.node.type.spec;

    if (toDOM) {
      const domSpec = toDOM(this.node);
      if (isString(domSpec)) {
        return document.createElement(domSpec);
      }

      if (isDOMNode(domSpec)) {
        if (!isElementDOMNode(domSpec)) {
          throw new Error('Invalid HTML Element provided in the DOM Spec');
        }
        return domSpec;
      }

      // Use the outer element string to render the dom node
      return document.createElement(domSpec[0]);
    }
    return this.node.isInline ? document.createElement('span') : document.createElement('div');
  }

apply: (tr, decorationSet) => {
          // Map the decoration based on the changes to the document.
          decorationSet = decorationSet.map(tr.mapping, tr.doc);

          // Get tracker updates from the meta data
          const tracker = getPluginMeta(key, tr);

          if (isNullOrUndefined(tracker)) {
            return decorationSet;
          }

          if (tracker.add) {
            const { defaultClassName, defaultElement } = this.options;
            const { className, element = defaultElement } = tracker.add;
            const widget = isString(element) ? document.createElement(element) : element;
            const classNames = className ? [defaultClassName, className] : [defaultClassName];

            widget.classList.add(...classNames);

            const deco = Decoration.widget(tracker.add.pos, widget, {
              id: tracker.add.id,
              type: name,
            });

            return decorationSet.add(tr.doc, [deco]);
          }

          if (tracker.remove) {
            const { remove } = tracker;
            const found = decorationSet.find(undefined, undefined, spec => spec.id === remove.id);

onKeyDown: callAllEventHandlers(onKeyDown, event => {
        const key = getKeyName(event);
        if (includes(SPECIAL_INPUT_KEYS, key)) {
          actions.inputSpecialKeyDown(createKeyDownPayload(event, key, disabled.current));
          event.preventDefault();
        }
      }),
      // TODO test this blur handler.

setInternalTimeout(() => {
          if (
            !contextRef.current.isMouseDown &&
            (isNullOrUndefined(document.activeElement) || document.activeElement.id !== menuId) &&
            document.activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS)
          ) {
            actions.toggleButtonBlur();
          }
        });
      }),

apply: (tr, decorationSet) => {
          // Map the decoration based on the changes to the document.
          decorationSet = decorationSet.map(tr.mapping, tr.doc);

          // Get tracker updates from the meta data
          const tracker = getPluginMeta(key, tr);

          if (isNullOrUndefined(tracker)) {
            return decorationSet;
          }

          if (tracker.add) {
            const { defaultClassName, defaultElement } = this.options;
            const { className, element = defaultElement } = tracker.add;
            const widget = isString(element) ? document.createElement(element) : element;
            const classNames = className ? [defaultClassName, className] : [defaultClassName];

            widget.classList.add(...classNames);

            const deco = Decoration.widget(tracker.add.pos, widget, {
              id: tracker.add.id,
              type: name,
            });

export const getHighlightedIndexOnOpen = (
  props: Pick, 'items' | 'initialHighlightedIndexes' | 'defaultHighlightedIndexes'>,
  state: MultishiftState,
  offset: number,
  getItemId: GetItemId,
): number[] => {
  const { items, initialHighlightedIndexes, defaultHighlightedIndexes } = props;
  const { selectedItems, highlightedIndexes } = state;

  // initialHighlightedIndexes will give value to highlightedIndex on initial
  // state only.
  if (!isUndefined(initialHighlightedIndexes) && highlightedIndexes.length) {
    return initialHighlightedIndexes;
  }

  if (defaultHighlightedIndexes) {
    return defaultHighlightedIndexes;
  }

  if (selectedItems.length) {
    const idsOfItems = items.map(getItemId);
    const index = selectedItems
      .map(selectedItem => idsOfItems.indexOf(getItemId(selectedItem)))
      .findIndex(isValidIndex);

    if (!isValidIndex(index)) {
      return [];
    }

export const createTrailingNodePlugin = ({ extension, tags, schema }: CreateTrailingNodePluginParams) => {
  const { options, pluginKey } = extension;
  const { disableTags, ignoredNodes, nodeName } = options;

  // The names of the nodes for whom this rule should not be applied.
  const notAfter: string[] = disableTags
    ? uniqueArray([...ignoredNodes, nodeName])
    : uniqueArray([...ignoredNodes, ...tags.general.lastNodeCompatible, nodeName]);

  // The node that will be inserted when the criteria match.
  const type = schema.nodes[nodeName];

  // The list of nodes for this schema that should have content injected after
  // them.
  const types = entries(schema.nodes)
    .map(([, entry]) => entry)
    .filter(entry => !notAfter.includes(entry.name));

  return new Plugin({
    key: extension.pluginKey,
    view() {
      return {
        update: view => {

test('schemaToJSON', () => {
  const testSchema = new Schema({
    nodes: pick(nodes, ['doc', 'paragraph', 'text']),
    marks: pick(marks, ['em', 'strong']),
  });

  expect(schemaToJSON(testSchema)).toMatchSnapshot();
});

test('#clone', () => {
    const cloned = hsl.clone();
    expect(cloned).not.toBe(hsl);
    expect(pick(hsl, ['h', 's', 'l', 'a'])).toEqual(pick(cloned, ['h', 's', 'l', 'a']));
  });

test('schemaToJSON', () => {
  const testSchema = new Schema({
    nodes: pick(nodes, ['doc', 'paragraph', 'text']),
    marks: pick(marks, ['em', 'strong']),
  });

  expect(schemaToJSON(testSchema)).toMatchSnapshot();
});