How to use the @remirror/react-utils.cloneElement function in @remirror/react-utils

To help you get started, we’ve selected a few @remirror/react-utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ifiokjr / remirror / @remirror / react / src / components / remirror.tsx View on Github external
if (this.rootPropsConfig.called) {
      // Simply return the element as this method can never actually be called
      // within a domless environment
      return element;
    } else if (
      // When called by a provider `getRootProps` can't actually be called until
      // the jsx is generated. Check if this is being rendered via any remirror
      // context provider. In this case `getRootProps` **must** be called by the
      // consumer.
      isRemirrorContextProvider(element) ||
      isRemirrorProvider(element) ||
      isManagedRemirrorProvider(element)
    ) {
      const { childAsRoot } = element.props;
      return childAsRoot
        ? cloneElement(element, props, this.renderClonedElement(children, childAsRoot))
        : element;
    } else {
      return isReactDOMElement(element) ? (
        this.renderClonedElement(element)
      ) : (
        <div>
      );
    }
  }
</div>
github ifiokjr / remirror / @remirror / core-extensions / src / extensions / ssr-helpers / utils.ts View on Github external
export const cloneSSRElement = (
  element: JSX.Element,
  transformChildElements: (
    children: JSX.Element | JSX.Element[],
    childrenProps: PlainObject,
  ) => JSX.Element | JSX.Element[],
) => {
  if (!isReactFragment(element)) {
    throw new Error('Invalid element passed. The top level element must be a fragment');
  }

  const { children } = getElementProps(element);
  const childrenProps = getElementProps(children);

  return cloneElement(element, {}, transformChildElements(children, childrenProps));
};
github ifiokjr / remirror / @remirror / core-extensions / src / extensions / ssr-helpers / utils.ts View on Github external
return Children.map(children, child => {
      if (!(isReactDOMElement(child) && elementIsEmpty(child) && elementIsOfType(child, 'p'))) {
        return child;
      }

      const props = getElementProps(child);
      return cloneElement(child, props, jsx('br'));
    });
  });
github ifiokjr / remirror / @remirror / react / src / components / remirror.tsx View on Github external
private renderClonedElement(element: JSX.Element, rootProps?: GetRootPropsConfig | boolean) {
    const { children, ...rest } = getElementProps(element);
    const props = isPlainObject(rootProps) ? { ...rootProps, ...rest } : rest;

    return cloneElement(element, this.internalGetRootProps(props, this.renderChildren(children)));
  }
github ifiokjr / remirror / @remirror / core-extensions / src / extensions / ssr-helpers / ssr-helpers-utils.ts View on Github external
export const cloneSSRElement = (
  element: JSX.Element,
  transformChildElements: (
    children: JSX.Element | JSX.Element[],
    childrenProps: PlainObject,
  ) => JSX.Element | JSX.Element[],
) => {
  if (!isReactFragment(element)) {
    throw new Error('Invalid element passed. The top level element must be a fragment');
  }

  const { children } = getElementProps(element);
  const childrenProps = getElementProps(children);

  return cloneElement(element, {}, transformChildElements(children, childrenProps));
};
github ifiokjr / remirror / @remirror / core-extensions / src / extensions / placeholder / placeholder-extension.ts View on Github external
public ssrTransformer(element: JSX.Element, { getState }: ExtensionManagerParams) {
    const state = getState();
    const { emptyNodeClass, placeholder } = this.options;
    const { children } = getElementProps(element);
    if (Children.count(children) > 1 || !isDocNodeEmpty(state.doc)) {
      return element;
    }

    const props = getElementProps(children);
    return cloneElement(
      element,
      {},
      cloneElement(children, {
        ...props,
        className: isString(props.className) ? `${props.className} ${emptyNodeClass}` : emptyNodeClass,
        'data-placeholder': placeholder,
      }),
    );
  }
}
github ifiokjr / remirror / @remirror / core-extensions / src / extensions / placeholder / placeholder-extension.ts View on Github external
public ssrTransformer(element: JSX.Element, { getState }: ExtensionManagerParams) {
    const state = getState();
    const { emptyNodeClass, placeholder } = this.options;
    const { children } = getElementProps(element);
    if (Children.count(children) > 1 || !isDocNodeEmpty(state.doc)) {
      return element;
    }

    const props = getElementProps(children);
    return cloneElement(
      element,
      {},
      cloneElement(children, {
        ...props,
        className: isString(props.className) ? `${props.className} ${emptyNodeClass}` : emptyNodeClass,
        'data-placeholder': placeholder,
      }),
    );
  }
}