eric-edouard / remirror Goto Github PK

import React, { FC, FunctionComponent, MouseEventHandler, useState } from 'react';

import { memoize, EMPTY_OBJECT_NODE } from '@remirror/core';
import { Bold, Italic, Underline } from '@remirror/core-extensions';
import {
  bubblePositioner,
  ManagedRemirrorEditor,
  RemirrorEventListener,
  RemirrorExtension,
  RemirrorManager,
  RemirrorProps,
  useRemirrorContext,
} from '@remirror/react';

const runAction = (action: () => void): MouseEventHandler<HTMLElement> => e => {
  e.preventDefault();
  action();
};

const SimpleFloatingMenu: FC = () => {
  const { getPositionerProps, actions } = useRemirrorContext(); // Pull in injected props from context

  const props = getPositionerProps({
    positionerId: 'bubble',
    ...bubblePositioner,
  });
  return (
    <div
      style={{
        position: 'absolute',
        bottom: props.isActive ? props.bottom : -9999,
        left: props.isActive ? props.left : -9999,
      }}
      ref={props.ref}
    >
      <button
        style={{
          backgroundColor: actions.bold.isActive() ? 'white' : 'pink',
          fontWeight: actions.bold.isActive() ? 600 : 300,
        }}
        disabled={!actions.bold.isEnabled()}
        onClick={runAction(actions.bold.command)}
      >
        b
      </button>
      <button
        style={{
          backgroundColor: actions.italic.isActive() ? 'white' : 'pink',
          fontWeight: actions.italic.isActive() ? 600 : 300,
        }}
        disabled={!actions.italic.isEnabled()}
        onClick={runAction(actions.italic.command)}
      >
        i
      </button>
      <button
        style={{
          backgroundColor: actions.underline.isActive() ? 'white' : 'pink',
          fontWeight: actions.underline.isActive() ? 600 : 300,
        }}
        disabled={!actions.underline.isEnabled()}
        onClick={runAction(actions.underline.command)}
      >
        u
      </button>
    </div>
  );
};

const EditorLayout: FunctionComponent = () => {
  return (
    <RemirrorManager>
      <RemirrorExtension Constructor={Bold} />
      <RemirrorExtension Constructor={Italic} />
      <RemirrorExtension Constructor={Underline} />
      <ManagedRemirrorEditor
        attributes={{ 'data-test-id': 'editor-instance' }}
        onChange={onChange}
        placeholder='Start typing for magic...'
        autoFocus={true}
        initialContent={EMPTY_OBJECT_NODE}
      >
        <SimpleFloatingMenu />
      </ManagedRemirrorEditor>
    </RemirrorManager>
  );
};

import { withRemirror } from '@remirror/react';

// ...

function SimpleMenu({ getPositionerProps }: InjectedRemirrorProps) {
  return <Menu {...getPositionerProps()} />;
}

export const WrappedSimpleMenu = withRemirror(SimpleMenu);

import { EpicMode, heartEffect, ParticleEffect } from '@remirror/extension-epic-mode';

interface EpicModeComponentProps {
  particleEffect: ParticleEffect;
  placeholder: string;
  shake?: boolean;
}

const EpicModeComponent: FC<EpicModeComponentProps> = ({ particleEffect, placeholder, shake }) => {
  return (
    <div style={{ gridArea: 'editor' }}>
      <RemirrorManager>
        <RemirrorExtension Constructor={Bold} />
        <RemirrorExtension Constructor={Italic} />
        <RemirrorExtension Constructor={Underline} />
        <RemirrorExtension Constructor={EpicMode} particleEffect={particleEffect} shake={shake} />
        <ManagedRemirrorEditor
          autoFocus={true}
          attributes={{ 'data-test-id': 'editor-instance' }}
          placeholder={placeholder}
          editorStyles={editorStyles}
        />
      </RemirrorManager>
    </div>
  );
};

export const EpicModeHeart: FunctionComponent = () => (
  <EpicModeComponent particleEffect={heartEffect} shake={false} placeholder='Type for hearts' />
);