extension-code-block

package @remirror/extension-code-block

class CodeBlockExtension

Signature:

export declare class CodeBlockExtension extends NodeExtension<CodeBlockOptions> 

Extends: NodeExtension<CodeBlockOptions>

(Some inherited members may not be shown because they are not represented in the documentation.)

property name

Signature:

get name(): "codeBlock";

method backspaceKey

Signature:

backspaceKey({ dispatch, tr, state }: KeyBindingProps): boolean;

Parameters:

Parameter	Type	Description
{ dispatch, tr, state }	KeyBindingProps

Returns:

boolean

method createAttributes

Add the syntax theme class to the editor.

Signature:

createAttributes(): ProsemirrorAttributes;

Returns:

ProsemirrorAttributes

method createCodeBlock

Creates a code at the current position.

commands.createCodeBlock({ language: 'js' });

Signature:

createCodeBlock(attributes: CodeBlockAttributes): CommandFunction;

Parameters:

Parameter	Type	Description
attributes	CodeBlockAttributes

Returns:

CommandFunction

method createInputRules

Create an input rule that listens converts the code fence into a code block when typing triple back tick followed by a space.

Signature:

createInputRules(): InputRule[];

Returns:

InputRule[]

method createNodeSpec

Signature:

createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;

Parameters:

Parameter	Type	Description
extra	ApplySchemaAttributes
override	NodeSpecOverride

Returns:

NodeExtensionSpec

method createPlugin

Create the custom code block plugin which handles the delete key amongst other things.

Signature:

createPlugin(): CreateExtensionPlugin<CodeBlockState>;

Returns:

CreateExtensionPlugin<CodeBlockState>

method createTags

Signature:

createTags(): ("code" | "block")[];

Returns:

("code" | "block")[]

method enterKey

Signature:

enterKey({ dispatch, tr }: KeyBindingProps): boolean;

Parameters:

Parameter	Type	Description
{ dispatch, tr }	KeyBindingProps

Returns:

boolean

method formatCodeBlock

Format the code block with the code formatting function passed as an option.

Code formatters (like prettier) add a lot to the bundle size and hence it is up to you to provide a formatter which will be run on the entire code block when this method is used.

if (actions.formatCodeBlock.enabled()) {
  actions.formatCodeBlock();
  // Or to format a separate code block via position
  actions.formatCodeBlock({ pos: 100 });
}

Signature:

formatCodeBlock({ pos }?: Partial<PosProps>): NonChainableCommandFunction;

Parameters:

Parameter	Type	Description
{ pos }	Partial<PosProps>	(Optional)

Returns:

NonChainableCommandFunction

method formatShortcut

Signature:

formatShortcut({ tr }: KeyBindingProps): boolean;

Parameters:

Parameter	Type	Description
{ tr }	KeyBindingProps

Returns:

boolean

method init

Add the languages to the environment if they have not yet been added.

Signature:

protected init(): void;

Returns:

void

method onSetOptions

Signature:

protected onSetOptions(props: OnSetOptionsProps<CodeBlockOptions>): void;

Parameters:

Parameter	Type	Description
props	OnSetOptionsProps<CodeBlockOptions>

Returns:

void

method tabKey

Signature:

tabKey({ state, dispatch }: KeyBindingProps): boolean;

Parameters:

Parameter	Type	Description
{ state, dispatch }	KeyBindingProps

Returns:

boolean

method toggleCodeBlock

Call this method to toggle the code block.

Signature:

toggleCodeBlock(attributes?: Partial<CodeBlockAttributes>): CommandFunction;

Parameters:

Parameter	Type	Description
attributes	Partial<CodeBlockAttributes>	(Optional)

Returns:

CommandFunction

Remarks:

actions.toggleCodeBlock({ language: 'ts' });

The above makes the current node a codeBlock with the language ts or remove the code block altogether.

method updateCodeBlock

Update the code block at the current position. Primarily this is used to change the language.

if (commands.updateCodeBlock.enabled()) {
  commands.updateCodeBlock({ language: 'markdown' });
}

Signature:

updateCodeBlock(attributes: CodeBlockAttributes): CommandFunction;

Parameters:

Parameter	Type	Description
attributes	CodeBlockAttributes

Returns:

CommandFunction

function getLanguage()

Get the language from user input.

Signature:

export declare function getLanguage(props: GetLanguageProps): string;

Parameters:

Parameter	Type	Description
props	GetLanguageProps

Returns:

string

variable codeBlockPositioner

Signature:

codeBlockPositioner: Positioner<FindProsemirrorNodeResult>

interface CodeBlockAttributes

Signature:

export interface CodeBlockAttributes extends ProsemirrorAttributes 

Extends: ProsemirrorAttributes

(Some inherited members may not be shown because they are not represented in the documentation.)

property language

The language attribute

Signature:

language: string;

property wrap

Set to true to active the wrapping of the content within the editor.

Signature:

wrap?: boolean;

interface CodeBlockOptions

Signature:

export interface CodeBlockOptions 

property defaultLanguage

The default language to use when none is provided.

It is a property so it can change during the editor's life.

Signature:

defaultLanguage?: string;

property defaultWrap

Set to true to wrap content by default.

Signature:

defaultWrap?: boolean;

property formatter

Provide a formatter which can format the provided source code.

Signature:

formatter?: CodeBlockFormatter;

property getLanguageFromDom

Extract the language string from a code block.

Signature:

getLanguageFromDom?: Static<(codeElement: HTMLElement, preElement: HTMLElement) => string | undefined>;

property plainTextClassName

Class to use in decorations of plain text nodes.

Signature:

plainTextClassName?: string;

Remarks:

refractor highlighting produces elements to indicate the type of a part of the code. These elements get translated into decorations by this plugin.

For all other parts of the code the decoration will use this class name if it is set to a non-empty value, otherwise no decoration will be produced.

property supportedLanguages

Import languages from refractor.

Signature:

supportedLanguages?: RefractorSyntax[];

Remarks:

import jsx from 'refractor/lang/jsx.js'
import typescript from 'refractor/lang/typescript.js'

And pass them into the config when initializing this extension.

import { CodeBlockExtension } from '@remirror/extension-code-block';

new CodeBlockExtension({ supportedLanguages: [typescript, jsx] })

Or as a component

<RemirrorManager>
  <RemirrorExtension Constructor={CodeBlockExtension} supportedLanguages={[typescript, jsx]} />
</RemirrorManager>

By default refractor bundles the following languages: markup, css, clike, js

property syntaxTheme

The theme to use for the codeBlocks.

Signature:

syntaxTheme?: SyntaxTheme;

Remarks:

Currently only one theme can be set per editor.

Set this to false if you want to manage the syntax styles by yourself. For tips on how this could be accomplished see https://prismjs.com

property toggleName

The name of the node that the code block should toggle back and forth from.

Signature:

toggleName?: string;

interface FormattedContent

Data returned from a code formatter.

Signature:

export interface FormattedContent 

property cursorOffset

The new cursor position after formatting

Signature:

cursorOffset: number;

property formatted

The transformed source.

Signature:

formatted: string;

interface FormatterProps

Signature:

export interface FormatterProps 

property cursorOffset

Specify where the cursor is. This option cannot be used with rangeStart and rangeEnd. This allows the command to both formats the code, and translates a cursor position from unformatted code to formatted code.

Signature:

cursorOffset: number;

property language

The language of the code block. Should be used to determine whether the formatter can support the transformation.

Possible languages are available here https://github.com/wooorm/refractor/tree/716fe904c37cd7ebfde53ac5157e7d6c323a3986/lang

Signature:

language: string;

property source

The code to be formatted

Signature:

source: string;

type CodeBlockFormatter

A function which takes code and formats the code.

TODO - possibly allow error management if failure is because of invalid syntax

Signature:

export type CodeBlockFormatter = (params: FormatterProps) => Promise<FormattedContent | void>;

References: FormatterProps, FormattedContent

type SyntaxTheme

The default supported syntax themes.

Signature:

export type SyntaxTheme = Lowercase<StringKey<typeof ExtensionCodeBlockTheme>>;

References: StringKey