@remirror/extension-react-language-select v0.1.0

@remirror/extension-react-language-select

A React floating language select dropdown component for the code block extension.

Installation

# yarn
yarn add @remirror/extension-react-language-select

# pnpm
pnpm add @remirror/extension-react-language-select

# npm
npm install @remirror/extension-react-language-select

Usage

The following code creates an instance of this extension.

import React from 'react';
import css from 'refractor/lang/css.js';
import javascript from 'refractor/lang/javascript.js';
import json from 'refractor/lang/json.js';
import markdown from 'refractor/lang/markdown.js';
import typescript from 'refractor/lang/typescript.js';
import { cx } from 'remirror';
import { CodeBlockExtension } from 'remirror/extensions';
import { CodeBlockLanguageSelect } from '@remirror/extension-react-language-select';
import { Remirror, ThemeProvider, useRemirror } from '@remirror/react';
import { ExtensionCodeBlockTheme } from '@remirror/theme';

const extensions = () => [
  new CodeBlockExtension({
    // optionally add spacing for select element
    extraAttributes: { style: 'padding: 2em 1em;' },
    supportedLanguages: [css, javascript, json, markdown, typescript],
  }),
];

const Basic = (): JSX.Element => {
  const { manager, state } = useRemirror({ extensions, content: '', stringHandler: 'html' });

  return (
    <ThemeProvider>
      <Remirror manager={manager} initialContent={state} autoRender>
        <CodeBlockLanguageSelect
          // offset for the positioner
          offset={{ x: 5, y: 5 }}
          selectClassName={cx(
            ExtensionCodeBlockTheme.LANGUAGE_SELECT_POSITIONER,
            ExtensionCodeBlockTheme.LANGUAGE_SELECT_WIDTH,
          )}
        />
      </Remirror>
    </ThemeProvider>
  );
};