features.stories.tsx

import { Annotations, Args, BaseStory } from '@storybook/addons';
import React, { useState } from 'react';

import { CombinedUnion, Extension, fromHtml } from 'remirror/core';
import { BoldExtension } from 'remirror/extension/bold';
import { CodeBlockExtension } from 'remirror/extension/code-block';
import { ItalicExtension } from 'remirror/extension/italic';
import { UnderlineExtension } from 'remirror/extension/underline';
import { CorePreset } from 'remirror/preset/core';
import { RemirrorProvider, useManager, useRemirror } from 'remirror/react';

export default { title: 'Features' };

type Story<StoryFnReturnType = JSX.Element> = BaseStory<Args, StoryFnReturnType> &
  Annotations<Args, StoryFnReturnType>;

interface EditorWrapperProps {
  extensions?: Extension[];
  initialContent?: string;
}

const EditorWrapper = ({ extensions = [], initialContent = '' }: EditorWrapperProps) => {
  const manager = useManager([
    new CorePreset({}),
    new BoldExtension({}),
    new ItalicExtension(),
    new UnderlineExtension(),
    ...extensions,
  ]);

  // Create a DOM from the content
  const [value, setValue] = useState(() =>
    manager.createState({
      content: initialContent,
      stringHandler: fromHtml,
    }),
  );

  return (
    <RemirrorProvider manager={manager} value={value} onChange={({ state }) => setValue(state)}>
      <div>
        <Menu />
        <TextEditor></TextEditor>
        <hr />
        <pre>
          <code>{JSON.stringify(value, null, 2)}</code>
        </pre>
      </div>
    </RemirrorProvider>
  );
};
const Menu = () => {
  const { commands, active } = useRemirror<
    CombinedUnion<BoldExtension | ItalicExtension | UnderlineExtension, CorePreset>
  >({ autoUpdate: true });

  return (
    <div>
      <button
        onClick={() => commands.toggleBold()}
        style={{ fontWeight: active.bold() ? 'bold' : undefined }}
      >
        B
      </button>
      <button
        onClick={() => commands.toggleItalic()}
        style={{ fontWeight: active.italic() ? 'bold' : undefined }}
      >
        I
      </button>
      <button
        onClick={() => commands.toggleUnderline()}
        style={{ fontWeight: active.underline() ? 'bold' : undefined }}
      >
        U
      </button>
    </div>
  );
};

const TextEditor = () => {
  const { getRootProps } = useRemirror();

  return <div style={{ background: 'ivory' }} {...getRootProps()} />;
};

const Template = (args: JSX.IntrinsicAttributes & EditorWrapperProps) => {
  return <EditorWrapper {...args}></EditorWrapper>;
};

export const CodeBlocks: Story = Template.bind({});
CodeBlocks.args = {
  extensions: [new CodeBlockExtension()],
  initialContent:
    '<p>Some content, followed by a code block: <pre><code data-code-block-language="js">const foo = bar();</code></pre>... and content afterwards!</p>',
};